louiscklaw/HKSingleParty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update demo-react-profile-dashboard-ui,

Browse Source
This commit is contained in:
louiscklaw
2025-06-07 09:41:52 +08:00
parent 04eaf91d60
commit d3d95469ea
7 changed files with 392 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
03_source/mobile/src/pages/DemoReactProfileDashboardUi/AppPages/Tab1.jsx → 03_source/mobile/src/pages/DemoReactProfileDashboardUi/AppPages/Tab1.tsx
View File

@@ -18,7 +18,7 @@ import { SkeletonDashboard } from '../TestComponents/SkeletonDashboard';
import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
import { CurrentWeather } from '../TestComponents/CurrentWeather';
function Tab1() {
function Tab1(): React.JSX.Element {
const router = useIonRouter();
const [currentWeather, setCurrentWeather] = useState(false);

4
03_source/mobile/src/pages/DemoReactProfileDashboardUi/AppPages/Tab2.jsx → 03_source/mobile/src/pages/DemoReactProfileDashboardUi/AppPages/Tab2.tsx
View File

@@ -12,9 +12,9 @@ import {
import { useState } from 'react';
import { CurrentWeather } from '../TestComponents/CurrentWeather';
function Tab2() {
function Tab2(): React.JSX.Element {
const [search, setSearch] = useState('');
const [currentWeather, setCurrentWeather] = useState(false);
const [currentWeather, setCurrentWeather] = useState<any>(false);
const performSearch = async () => {
getAddress(search);

37
03_source/mobile/src/pages/DemoReactProfileDashboardUi/index.tsx
View File

@@ -1,38 +1,27 @@
import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
import { IonRouterOutlet, IonTabs } from '@ionic/react';
import { cloudOutline, searchOutline } from 'ionicons/icons';
import { Route, Redirect } from 'react-router';
import Tab1 from './AppPages/Tab1';
import Tab2 from './AppPages/Tab2';
// import Tab1 from './AppPages/Tab1';
// import Tab2 from './AppPages/Tab2';
import './style.scss';
// import './style.scss';
import Home from './pages/Home';
function DemoReactProfileDashboardUi() {
return (
<IonTabs>
<IonTabs className="demo-react-profile-dashboard-ui">
<IonRouterOutlet>
<Route exact path="/demo-react-profile-dashboard-ui/tab1">
<Tab1 />
</Route>
<Route exact path="/demo-react-profile-dashboard-ui/tab2">
<Tab2 />
<Route exact path="/demo-react-profile-dashboard-ui/home">
<Home />
</Route>
<Redirect exact path="/demo-react-profile-dashboard-ui" to="/demo-react-profile-dashboard-ui/tab1" />
<Redirect
exact
path="/demo-react-profile-dashboard-ui"
to="/demo-react-profile-dashboard-ui/home"
/>
</IonRouterOutlet>
{/* */}
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/demo-react-profile-dashboard-ui/tab1">
<IonIcon icon={cloudOutline} />
<IonLabel>Dashboard</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/demo-react-profile-dashboard-ui/tab2">
<IonIcon icon={searchOutline} />
<IonLabel>Search</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
);
}

105
03_source/mobile/src/pages/DemoReactProfileDashboardUi/pages/Home.module.scss Normal file
View File

@@ -0,0 +1,105 @@
.home {
ion-header {
&.header-md:after {
background: none;
}
}
ion-header,
ion-toolbar {
border: none !important;
--border-style: none !important;
border-color: none !important;
border-bottom: none !important;
}
ion-toolbar {
background-color: #5893fa;
--background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%236a9df6' fill-opacity='0.9' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
}
.topHeader {
height: 8rem;
margin-bottom: -8rem;
border-end-start-radius: 60px !important;
background-color: #5893fa;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%236a9df6' fill-opacity='0.9' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.avatar {
border-radius: 10px;
}
.profileStats {
background-color: rgb(245, 245, 245);
border-radius: 10px !important;
padding: 0.2rem;
align-content: center;
}
.profileStat {
text-align: center;
margin: 0 auto;
ion-card-title {
color: rgb(68, 68, 68);
font-size: 0.8rem;
}
ion-card-subtitle {
font-size: 0.6rem;
}
}
.profileInfo {
text-align: left;
margin-top: -0.2rem;
justify-content: center;
align-content: center;
align-items: center;
}
.profileName {
color: rgb(59, 59, 59) !important;
font-weight: 500 !important;
}
.profileCard {
ion-icon {
font-size: 1.75rem;
color: #5893fa;
margin-bottom: 1rem;
}
}
.profileStatusContainer {
margin-top: -2rem;
margin-bottom: -2rem;
ion-card-content {
margin-top: -1rem !important;
}
}
.profileActionContainer {
margin-top: -2rem;
}
.profileStatus {
ion-card-subtitle {
margin-top: 0.35rem;
margin-left: 1rem;
}
}
.profileActionCard {
padding-top: 0.5rem;
ion-icon {
font-size: 1.75rem;
color: #5893fa;
margin-top: -0.3rem;
}
}

183
03_source/mobile/src/pages/DemoReactProfileDashboardUi/pages/Home.tsx Normal file
View File

@@ -0,0 +1,183 @@
import {
IonButton,
IonButtons,
IonCard,
IonCardContent,
IonCardHeader,
IonCardSubtitle,
IonCardTitle,
IonCol,
IonContent,
IonGrid,
IonHeader,
IonIcon,
IonPage,
IonRow,
IonText,
IonToolbar,
useIonRouter,
} from '@ionic/react';
import styles from './Home.module.scss';
import {
arrowBackOutline,
arrowForward,
bookmarkOutline,
chatboxEllipsesOutline,
chevronBackOutline,
ellipsisHorizontal,
imageOutline,
personAddOutline,
} from 'ionicons/icons';
const Home = (): React.JSX.Element => {
const router = useIonRouter();
function handleBackClick() {
router.goBack();
}
return (
<IonPage className={styles.home}>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonButton onClick={() => handleBackClick()} color="light">
<IonIcon icon={arrowBackOutline} />
</IonButton>
</IonButtons>
<IonButtons slot="end">
<IonButton color="light">
<IonIcon icon={ellipsisHorizontal} />
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent>
<div className={styles.topHeader}></div>
<IonGrid>
<IonRow className="ion-justify-content-center">
<IonCol
size="12"
className="ion-justify-content-center ion-align-items-center ion-text-center"
>
<IonCard className={styles.profileHeader}>
<IonCardContent>
<IonRow>
<IonCol size="4">
<img
src="/assets/DemoReactProfileDashboardUi/alan.jpg"
alt="avatar"
className={styles.avatar}
/>
</IonCol>
<IonCol size="8">
<IonRow className={styles.profileInfo}>
<IonCol size="12">
<IonText color="dark" className={styles.profileName}>
<p>Alan Montgomery</p>
</IonText>
<IonText color="medium">
<p>Mobile Team Lead</p>
</IonText>
</IonCol>
</IonRow>
<IonRow className={styles.profileStats}>
<IonCol className={styles.profileStat}>
<IonCardTitle>109</IonCardTitle>
<IonCardSubtitle>Followinig</IonCardSubtitle>
</IonCol>
<IonCol className={styles.profileStat}>
<IonCardTitle>1.2k</IonCardTitle>
<IonCardSubtitle>Followers</IonCardSubtitle>
</IonCol>
</IonRow>
</IonCol>
</IonRow>
<IonRow>
<IonCol size="6">
<IonButton fill="outline" expand="block">
Message
</IonButton>
</IonCol>
<IonCol size="6">
<IonButton color="primary" expand="block">
<IonIcon icon={personAddOutline} size="small" />
&nbsp; Follow
</IonButton>
</IonCol>
</IonRow>
</IonCardContent>
</IonCard>
</IonCol>
</IonRow>
<IonRow className={styles.profileStatusContainer}>
<IonCol size="12">
<IonCard className={styles.profileCard}>
<IonCardHeader>
<IonRow className={styles.profileStatus}>
<IonIcon icon={chatboxEllipsesOutline} />
<IonCardSubtitle>Status</IonCardSubtitle>
</IonRow>
</IonCardHeader>
<IonCardContent>
<IonText>
<p>
I love posting content related to Ionic React! Make sure to check out the
Ionic React Hub!
</p>
</IonText>
</IonCardContent>
</IonCard>
</IonCol>
</IonRow>
<IonRow>
<IonCol size="6">
<IonCard className={styles.profileCard}>
<IonCardContent>
<IonIcon icon={imageOutline} />
<IonCardTitle>147</IonCardTitle>
<IonCardSubtitle>Photos</IonCardSubtitle>
</IonCardContent>
</IonCard>
</IonCol>
<IonCol size="6">
<IonCard className={styles.profileCard}>
<IonCardContent>
<IonIcon icon={bookmarkOutline} />
<IonCardTitle>63</IonCardTitle>
<IonCardSubtitle>Bookmarks</IonCardSubtitle>
</IonCardContent>
</IonCard>
</IonCol>
</IonRow>
<IonRow className={styles.profileActionContainer}>
<IonCol size="12">
<IonCard className={styles.profileActionCard}>
<IonCardContent>
<IonRow className="ion-justify-content-between">
<IonCardSubtitle>View latest project</IonCardSubtitle>
<IonIcon icon={arrowForward} />
</IonRow>
</IonCardContent>
</IonCard>
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
);
};
export default Home;

103
03_source/mobile/src/pages/DemoReactProfileDashboardUi/style.scss
View File

@@ -1,103 +0,0 @@
#about-page {
ion-toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
--background: transparent;
--color: white;
}
ion-toolbar ion-back-button,
ion-toolbar ion-button,
ion-toolbar ion-menu-button {
--color: white;
}
.about-header {
position: relative;
width: 100%;
height: 30%;
}
.about-header .about-image {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 500ms ease-in-out;
}
.about-header .madison {
background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
}
.about-header .austin {
background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
}
.about-header .chicago {
background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
}
.about-header .seattle {
background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
}
.about-info {
position: relative;
margin-top: -10px;
border-radius: 10px;
background: var(--ion-background-color, #fff);
z-index: 2; // display rounded border above header image
}
.about-info h3 {
margin-top: 0;
}
.about-info ion-list {
padding-top: 0;
}
.about-info p {
line-height: 130%;
color: var(--ion-color-dark);
}
.about-info ion-icon {
margin-inline-end: 32px;
}
/*
* iOS Only
*/
.ios .about-info {
--ion-padding: 19px;
}
.ios .about-info h3 {
font-weight: 700;
}
}
#date-input-popover {
--offset-y: -var(--ion-safe-area-bottom);
--max-width: 90%;
--width: 336px;
}

88
03_source/mobile/src/pages/DemoReactProfileDashboardUi/theme/variables.scss Normal file
View File

@@ -0,0 +1,88 @@
.demo-react-profile-dashboard-ui {
/* Ionic Variables and Theming. For more info, please see:
http://ionicframework.com/docs/theming/ */
/** Ionic CSS Variables **/
:root {
/** primary **/
--ion-color-primary: #3880ff;
--ion-color-primary-rgb: 56, 128, 255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #3171e0;
--ion-color-primary-tint: #4c8dff;
/** secondary **/
--ion-color-secondary: #3dc2ff;
--ion-color-secondary-rgb: 61, 194, 255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255, 255, 255;
--ion-color-secondary-shade: #36abe0;
--ion-color-secondary-tint: #50c8ff;
/** tertiary **/
--ion-color-tertiary: #5260ff;
--ion-color-tertiary-rgb: 82, 96, 255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
--ion-color-tertiary-shade: #4854e0;
--ion-color-tertiary-tint: #6370ff;
/** success **/
--ion-color-success: #2dd36f;
--ion-color-success-rgb: 45, 211, 111;
--ion-color-success-contrast: #ffffff;
--ion-color-success-contrast-rgb: 255, 255, 255;
--ion-color-success-shade: #28ba62;
--ion-color-success-tint: #42d77d;
/** warning **/
--ion-color-warning: #ffc409;
--ion-color-warning-rgb: 255, 196, 9;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0, 0, 0;
--ion-color-warning-shade: #e0ac08;
--ion-color-warning-tint: #ffca22;
/** danger **/
--ion-color-danger: #eb445a;
--ion-color-danger-rgb: 235, 68, 90;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #cf3c4f;
--ion-color-danger-tint: #ed576b;
/** dark **/
--ion-color-dark: #222428;
--ion-color-dark-rgb: 34, 36, 40;
--ion-color-dark-contrast: #ffffff;
--ion-color-dark-contrast-rgb: 255, 255, 255;
--ion-color-dark-shade: #1e2023;
--ion-color-dark-tint: #383a3e;
/** medium **/
--ion-color-medium: #92949c;
--ion-color-medium-rgb: 146, 148, 156;
--ion-color-medium-contrast: #ffffff;
--ion-color-medium-contrast-rgb: 255, 255, 255;
--ion-color-medium-shade: #808289;
--ion-color-medium-tint: #9d9fa6;
/** light **/
--ion-color-light: #f4f5f8;
--ion-color-light-rgb: 244, 245, 248;
--ion-color-light-contrast: #000000;
--ion-color-light-contrast-rgb: 0, 0, 0;
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;
--ion-background-color: white;
}
ion-item,
ion-toolbar,
ion-header {
--background: var(--ion-background-color);
--color: white;
}
}