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

update demo-banking-ui,

Browse Source
This commit is contained in:
louiscklaw
2025-06-08 19:06:05 +08:00
parent 4303704753
commit 546fb72732
3 changed files with 46 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
03_source/mobile/src/pages/DemoBankingUi/components/SkeletonDashboard/index.tsx
View File

@@ -13,8 +13,9 @@ import {
IonThumbnail,
} from '@ionic/react';
import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
import React from 'react';
export const SkeletonDashboard = () => (
export const SkeletonDashboard = (): React.JSX.Element => (
<IonGrid>
<IonCard>
<IonCardContent className="ion-text-center">

12
03_source/mobile/src/pages/DemoBankingUi/index.tsx
View File

@@ -1,19 +1,19 @@
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 Home from './pages/Home.jsx';
import Home from './pages/Home';
import Account from './pages/Account';
import AddCard from './pages/AddCard';
import AddTransaction from './pages/AddTransaction';
import './style.scss';
import React from 'react';
function DemoBankingUi() {
function DemoBankingUi(): React.JSX.Element {
return (
<IonTabs className="demo-banking-ui">
<IonRouterOutlet>

46
03_source/mobile/src/pages/DemoBankingUi/pages/Home.jsx
View File

@@ -1,5 +1,17 @@
import { useRef, useState } from 'react';
import { IonButton, IonButtons, IonContent, IonGrid, IonHeader, IonIcon, IonPage, IonTitle, IonToolbar, useIonRouter, useIonViewDidEnter } from '@ionic/react';
import {
IonButton,
IonButtons,
IonContent,
IonGrid,
IonHeader,
IonIcon,
IonPage,
IonTitle,
IonToolbar,
useIonRouter,
useIonViewDidEnter,
} from '@ionic/react';
import styles from './Home.module.css';
import { AccountStore } from '../data/AccountStore';
import CardSlide from '../components/CardSlide';
@@ -22,7 +34,7 @@ const Home = () => {
const [mainColor, setMainColor] = useState(cards[0].color);
const [slideSpace, setSlideSpace] = useState(10);
const slidesRef = useRef();
const slidesRef = useRef(null);
useIonViewDidEnter(() => {
setSlideSpace(0);
@@ -38,7 +50,9 @@ const Home = () => {
document.getElementById(`slide_${swiperIndex}_balance`).classList.add('animate__headShake');
setTimeout(() => {
document.getElementById(`slide_${swiperIndex}_balance`).classList.remove('animate__headShake');
document
.getElementById(`slide_${swiperIndex}_balance`)
.classList.remove('animate__headShake');
}, 1000);
};
@@ -47,9 +61,13 @@ const Home = () => {
const swiperIndex = swiper.activeIndex;
if (touched) {
document.getElementById(`slide_${swiperIndex}_transactions`).classList.add('animate__fadeOut');
document
.getElementById(`slide_${swiperIndex}_transactions`)
.classList.add('animate__fadeOut');
} else {
document.getElementById(`slide_${swiperIndex}_transactions`).classList.remove('animate__fadeOut');
document
.getElementById(`slide_${swiperIndex}_transactions`)
.classList.remove('animate__fadeOut');
document.getElementById(`slide_${swiperIndex}_transactions`).classList.add('animate__fadeIn');
}
};
@@ -70,7 +88,11 @@ const Home = () => {
routerLink="/demo-banking-ui/account"
className={stylesS.toolbarAvatar}
>
<img alt="toolbar avatar" className={stylesS.toolbarAvatarImage} src={profile.avatar} />
<img
alt="toolbar avatar"
className={stylesS.toolbarAvatarImage}
src={profile.avatar}
/>
</IonButton>
</IonButtons>
@@ -82,7 +104,11 @@ const Home = () => {
</IonButton>
{/* */}
<IonButton>
<IonIcon color="light" icon={searchOutline} style={{ backgroundColor: mainColor, borderRadius: '500px', padding: '0.2rem' }} />
<IonIcon
color="light"
icon={searchOutline}
style={{ backgroundColor: mainColor, borderRadius: '500px', padding: '0.2rem' }}
/>
</IonButton>
</IonButtons>
</IonToolbar>
@@ -101,7 +127,11 @@ const Home = () => {
>
{cards.map((card, index) => {
return (
<SwiperSlide key={`slide_${index}`} id={`slide_${index}`} className={stylesS.customSlide}>
<SwiperSlide
key={`slide_${index}`}
id={`slide_${index}`}
className={stylesS.customSlide}
>
<CardSlide key={index} card={card} profile={profile} index={index} />
</SwiperSlide>
);