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

update demo-react-qr-code,

Browse Source
This commit is contained in:
louiscklaw
2025-06-07 10:36:15 +08:00
parent 5b680f2219
commit c3f680aa22
21 changed files with 885 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
03_source/mobile/src/pages/DemoReactQrCode/components/CurrentWeather/WeatherProperty.tsx Normal file
View File

@@ -0,0 +1,62 @@
import { IonCardSubtitle, IonCol, IonIcon, IonNote, IonRow } from '@ionic/react';
import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
import { useEffect, useState } from 'react';
export const WeatherProperty = ({ type, currentWeather }: { type: any; currentWeather: any }) => {
const [property, setProperty] = useState(false);
const properties = {
wind: {
isIcon: false,
icon: '/assets/WeatherDemo/wind.png',
alt: 'wind',
label: 'Wind',
value: `${currentWeather.current.wind_mph}mph`,
},
feelsLike: {
isIcon: true,
icon: thermometerOutline,
alt: 'feels like',
label: 'Feels like',
value: `${currentWeather.current.feelslike_c}°C`,
},
indexUV: {
isIcon: true,
icon: sunnyOutline,
alt: 'index uv',
label: 'Index UV',
value: currentWeather.current.uv,
},
pressure: {
isIcon: true,
icon: pulseOutline,
alt: 'pressure',
label: 'Pressure',
value: `${currentWeather.current.pressure_mb} mbar`,
},
};
useEffect(() => {
setProperty(properties[type]);
}, [type]);
return (
<IonCol size="6">
<IonRow className="ion-justify-content-center ion-align-items-center">
<IonCol size="3">
{!property.isIcon && (
<img alt={property.alt} src={property.icon} height="32" width="32" />
)}
{property.isIcon && (
<IonIcon icon={property.icon} color="medium" style={{ fontSize: '2rem' }} />
)}
</IonCol>
<IonCol size="9">
<IonCardSubtitle>{property.label}</IonCardSubtitle>
<IonNote>{property.value}</IonNote>
</IonCol>
</IonRow>
</IonCol>
);
};

48
03_source/mobile/src/pages/DemoReactQrCode/components/CurrentWeather/index.tsx Normal file
View File

@@ -0,0 +1,48 @@
import { IonCard, IonCardContent, IonGrid, IonRow, IonText, IonCardTitle } from '@ionic/react';
import { WeatherProperty } from './WeatherProperty';
export const CurrentWeather = ({ currentWeather }: { currentWeather: any }) => (
<IonGrid>
<IonCard>
<IonCardContent className="ion-text-center">
<IonText color="primary">
<h1>
{currentWeather.location.region},{' '}
<span style={{ color: 'gray' }}>{currentWeather.location.country}</span>
</h1>
</IonText>
<div className="ion-margin-top">
<img
alt="condition"
src={currentWeather.current.condition.icon.replace('//', 'https://')}
/>
<IonText color="dark">
<h1 style={{ fontWeight: 'bold' }}>{currentWeather.current.condition.text}</h1>
</IonText>
<IonText color="medium">
<p>{new Date(currentWeather.location.localtime).toDateString()}</p>
</IonText>
</div>
<IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
{currentWeather.current.temp_c}&#8451;
</IonCardTitle>
<IonGrid className="ion-margin-top">
<IonRow>
<WeatherProperty type="wind" currentWeather={currentWeather} />
<WeatherProperty type="feelsLike" currentWeather={currentWeather} />
</IonRow>
<IonRow className="ion-margin-top">
<WeatherProperty type="indexUV" currentWeather={currentWeather} />
<WeatherProperty type="pressure" currentWeather={currentWeather} />
</IonRow>
</IonGrid>
</IonCardContent>
</IonCard>
</IonGrid>
);

27
03_source/mobile/src/pages/DemoReactQrCode/components/CustomFab.jsx Normal file
View File

@@ -0,0 +1,27 @@
import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react';
import { addOutline, cameraOutline, qrCodeOutline } from 'ionicons/icons';
export const CustomFab = ({ start }) => {
return (
<IonFab
vertical="bottom"
horizontal="end"
slot="fixed"
className="ion-padding-bottom ion-padding-end"
>
<IonFabButton>
<IonIcon icon={qrCodeOutline} />
</IonFabButton>
<IonFabList side="top" className="ion-padding-bottom">
<IonFabButton color="primary" onClick={start}>
<IonIcon icon={cameraOutline} />
</IonFabButton>
<IonFabButton color="primary" routerLink="/demo-qr-scanner/manual">
<IonIcon icon={addOutline} />
</IonFabButton>
</IonFabList>
</IonFab>
);
};

15
03_source/mobile/src/pages/DemoReactQrCode/components/NoQRCodes.jsx Normal file
View File

@@ -0,0 +1,15 @@
import { IonCol, IonRow, IonText } from '@ionic/react';
export const NoQRCodes = () => (
<IonRow className="ion-text-center ion-justify-content-center">
<IonCol size="9">
<h3>It looks like you don't have any QR codes stored.</h3>
<img src="/assets/icon2.png" alt="icon" />
<p>
Click the <IonText color="primary">button</IonText> in the bottom right to scan a code or
generate a code.
</p>
</IonCol>
</IonRow>
);

106
03_source/mobile/src/pages/DemoReactQrCode/components/QRCodeScannedModal.jsx Normal file
View File

@@ -0,0 +1,106 @@
import {
IonButton,
IonButtons,
IonCard,
IonCardContent,
IonCardHeader,
IonCardTitle,
IonCol,
IonContent,
IonGrid,
IonHeader,
IonIcon,
IonNote,
IonPage,
IonRow,
IonTitle,
IonToolbar,
useIonToast,
} from '@ionic/react';
import QRCode from 'react-qr-code';
import { addQRCode } from '../store/QRStore';
import useSound from 'use-sound';
import closeSound from '../sounds/close.wav';
import { reloadOutline } from 'ionicons/icons';
export const QRCodeScannedModal = ({ dismiss, code, set, scan }) => {
const [play] = useSound(closeSound);
const [showToast] = useIonToast();
const handleDismiss = () => {
dismiss();
play();
};
const handleScanAgain = () => {
handleDismiss();
setTimeout(() => {
scan();
}, 10);
};
const handleAdd = async () => {
addQRCode(code.text ? code.text : code, true);
showToast({
header: 'Success!',
message: 'QR Code stored successfully.',
duration: 3000,
color: 'primary',
});
handleDismiss();
};
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>View QR Code</IonTitle>
<IonButtons slot="end">
<IonButton onClick={handleDismiss}>Close</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent>
<IonGrid className="ion-padding-top ion-margin-top">
<IonRow className="ion-justify-content-center ion-text-center animate__animated animate__lightSpeedInLeft animate__faster">
<IonCol size="12">
<QRCode value={code.text ? code.text : code} />
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12">
<IonCard>
<IonCardHeader>
<IonCardTitle>QR Code data</IonCardTitle>
<IonNote>This is what the code represents</IonNote>
</IonCardHeader>
<IonCardContent>
<p>{code.text ? code.text : code}</p>
</IonCardContent>
</IonCard>
</IonCol>
</IonRow>
<IonRow>
<IonCol size="6">
<IonButton expand="block" fill="outline" onClick={handleScanAgain}>
<IonIcon icon={reloadOutline} />
&nbsp; Scan again
</IonButton>
</IonCol>
<IonCol size="6">
<IonButton expand="block" onClick={handleAdd}>
Store &rarr;
</IonButton>
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
);
};

45
03_source/mobile/src/pages/DemoReactQrCode/components/QRWebModal.jsx Normal file
View File

@@ -0,0 +1,45 @@
import {
IonButton,
IonButtons,
IonCol,
IonContent,
IonGrid,
IonHeader,
IonPage,
IonRow,
IonTitle,
IonToolbar,
} from '@ionic/react';
// import QrReader from "react-qr-reader";
export const QRWebModal = ({ dismiss, set, scan, error }) => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Scan QR Code</IonTitle>
<IonButtons slot="end">
<IonButton onClick={dismiss}>Close</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent>
<IonGrid className="ion-padding-top ion-margin-top">
<IonRow className="ion-justify-content-center ion-text-center animate__animated animate__lightSpeedInLeft animate__faster">
<IonCol size="12">
{/*
<QrReader
delay={ 500 }
onError={ error }
onScan={ scan }
style={{ width: "100%", height: "100%" }}
/>
*/}
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
);
};

117
03_source/mobile/src/pages/DemoReactQrCode/components/SkeletonDashboard/index.tsx Normal file
View File

@@ -0,0 +1,117 @@
import {
IonCard,
IonCardContent,
IonCardSubtitle,
IonCardTitle,
IonCol,
IonGrid,
IonIcon,
IonNote,
IonRow,
IonSkeletonText,
IonText,
IonThumbnail,
} from '@ionic/react';
import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
export const SkeletonDashboard = () => (
<IonGrid>
<IonCard>
<IonCardContent className="ion-text-center">
<IonText color="primary">
<h1>
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
</h1>
</IonText>
<div className="ion-margin-top">
<IonThumbnail>
<IonSkeletonText animated style={{ width: '2rem', height: '2rem' }} />
</IonThumbnail>
<IonText color="dark">
<h1 style={{ fontWeight: 'bold' }}>
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
</h1>
</IonText>
<IonText color="medium">
<p>
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
</p>
</IonText>
</div>
<IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
<IonSkeletonText animated style={{ height: '3rem', width: '30%', textAlign: 'center' }} />
</IonCardTitle>
<IonGrid className="ion-margin-top">
<IonRow>
<IonCol size="6">
<IonRow className="ion-justify-content-center ion-align-items-center">
<IonCol size="3">
<img alt="wind" src="/assets/WeatherDemo/wind.png" height="32" width="32" />
</IonCol>
<IonCol size="9">
<IonCardSubtitle>Wind</IonCardSubtitle>
<IonNote>
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
</IonNote>
</IonCol>
</IonRow>
</IonCol>
<IonCol size="6">
<IonRow className="ion-justify-content-center ion-align-items-center">
<IonCol size="3">
<IonIcon icon={thermometerOutline} color="medium" style={{ fontSize: '2rem' }} />
</IonCol>
<IonCol size="9">
<IonCardSubtitle>Feels like</IonCardSubtitle>
<IonNote>
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
</IonNote>
</IonCol>
</IonRow>
</IonCol>
</IonRow>
<IonRow className="ion-margin-top">
<IonCol size="6">
<IonRow className="ion-justify-content-center ion-align-items-center">
<IonCol size="3">
<IonIcon icon={sunnyOutline} color="medium" style={{ fontSize: '2rem' }} />
</IonCol>
<IonCol size="9">
<IonCardSubtitle>Index UV</IonCardSubtitle>
<IonNote>
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
</IonNote>
</IonCol>
</IonRow>
</IonCol>
<IonCol size="6">
<IonRow className="ion-justify-content-center ion-align-items-center">
<IonCol size="3">
<IonIcon icon={pulseOutline} color="medium" style={{ fontSize: '2rem' }} />
</IonCol>
<IonCol size="9">
<IonCardSubtitle>Pressure</IonCardSubtitle>
<IonNote>
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
</IonNote>
</IonCol>
</IonRow>
</IonCol>
</IonRow>
</IonGrid>
</IonCardContent>
</IonCard>
</IonGrid>
);

30
03_source/mobile/src/pages/DemoReactQrCode/index.tsx
View File

@@ -3,38 +3,30 @@ import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs }
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';
function DemoReactQrCode() {
function DemoWeatherAppUi() {
return (
<IonTabs>
<IonRouterOutlet>
<Route exact path="/demo-react-qr-code/tab1">
<Route exact path="/demo-react-qr-code/home">
<Tab1 />
</Route>
<Route exact path="/demo-react-qr-code/tab2">
<Route exact path="/demo-react-qr-code/manual">
<Tab2 />
</Route>
<Redirect exact path="/demo-react-qr-code" to="/demo-react-qr-code/tab1" />
</IonRouterOutlet>
<Route exact path="/demo-react-qr-code/camera">
<Tab3 />
</Route>
{/* */}
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/demo-react-qr-code/tab1">
<IonIcon icon={cloudOutline} />
<IonLabel>Dashboard</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/demo-react-qr-code/tab2">
<IonIcon icon={searchOutline} />
<IonLabel>Search</IonLabel>
</IonTabButton>
</IonTabBar>
<Redirect exact path="/demo-react-qr-code" to="/demo-react-qr-code/home" />
</IonRouterOutlet>
</IonTabs>
);
}
export default DemoReactQrCode;
export default DemoWeatherAppUi;

0
03_source/mobile/src/pages/DemoReactQrCode/pages/Tab1.css Normal file
View File

114
03_source/mobile/src/pages/DemoReactQrCode/pages/Tab1.jsx Normal file
View File

@@ -0,0 +1,114 @@
import { BarcodeScanner } from '@ionic-native/barcode-scanner';
import { IonContent, IonGrid, IonHeader, IonPage, IonTitle, IonToolbar, useIonModal, getPlatforms } from '@ionic/react';
import { useStoreState } from 'pullstate';
import { useState } from 'react';
import { useRef } from 'react';
import useSound from 'use-sound';
import { CustomFab } from '../components/CustomFab';
import { NoQRCodes } from '../components/NoQRCodes';
import { QRCodeList } from '../components/QRCodeList';
import { QRCodeScannedModal } from '../components/QRCodeScannedModal';
import { QRStore } from '../store';
import { getCodes } from '../store/Selectors';
import './Tab1.css';
import openSound from "../sounds/open.wav";
import { QRWebModal } from '../components/QRWebModal';
const Tab1 = () => {
const pageRef = useRef();
const codes = useStoreState(QRStore, getCodes);
const [ play ] = useSound(openSound);
const [ QRData, setQRData ] = useState(false);
const handleScan = data => {
if (data) {
setQRData(data);
play();
handleSuccess(data);
}
}
const handleError = err => {
console.error(err)
}
const start = async () => {
const platforms = getPlatforms();
const isWeb = (platforms.includes("desktop") || platforms.includes("mobileweb") || platforms.includes("pwa"));
if (!isWeb) {
const data = await BarcodeScanner.scan();
if (data) {
handleSuccess(data);
}
} else {
presentWebModal({
presentingElement: pageRef.current
});
}
}
const handleSuccess = data => {
setQRData(data);
console.log(data);
dismissWebModal();
play();
present({
presentingElement: pageRef.current
});
}
const [ present, dismiss ] = useIonModal(QRCodeScannedModal, {
dismiss: () => dismiss(),
code: QRData,
set: () => setQRData(),
scan: () => start()
});
const [ presentWebModal, dismissWebModal ] = useIonModal(QRWebModal, {
dismiss: () => dismissWebModal(),
set: () => setQRData(),
scan: handleScan,
error: handleError
});
return (
<IonPage ref={ pageRef }>
<IonHeader>
<IonToolbar>
<IonTitle>QR Codes</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">QR Codes</IonTitle>
</IonToolbar>
</IonHeader>
<IonGrid>
{ codes.length < 1 && <NoQRCodes /> }
{ codes.length > 0 && <QRCodeList codes={ codes } pageRef={ pageRef } /> }
</IonGrid>
<CustomFab start={ start } />
</IonContent>
</IonPage>
);
};
export default Tab1;

0
03_source/mobile/src/pages/DemoReactQrCode/pages/Tab2.css Normal file
View File

105
03_source/mobile/src/pages/DemoReactQrCode/pages/Tab2.jsx Normal file
View File

@@ -0,0 +1,105 @@
import { IonBackButton, IonButton, IonButtons, IonCol, IonContent, IonGrid, IonHeader, IonInput, IonItem, IonLabel, IonNote, IonPage, IonRow, IonTextarea, IonTitle, IonToolbar, useIonToast } from '@ionic/react';
import './Tab2.css';
import QRCode from "react-qr-code";
import { useState } from 'react';
import { addQRCode } from '../store/QRStore';
const Tab2 = () => {
const [ data, setData ] = useState("");
const [ showToast ] = useIonToast();
const handleAdd = async () => {
if (data === "") {
showToast({
header: "Error!",
message: "Please enter some data to store.",
duration: 3000,
color: "danger"
});
} else {
addQRCode(data);
showToast({
header: "Success!",
message: "QR Code stored successfully.",
duration: 3000,
color: "primary"
});
setData("");
}
}
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton text="QR Codes" />
</IonButtons>
<IonTitle>Generate QR Code</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Generate QR Code</IonTitle>
</IonToolbar>
</IonHeader>
<IonGrid>
<IonRow>
<IonCol size="12">
<IonItem lines="none">
<IonLabel className="ion-text-wrap">
<h1>You can generate a QR code to store or share with friends.</h1>
<p>You'll see a live preview of the QR Code</p>
</IonLabel>
</IonItem>
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12">
<IonItem>
<IonLabel position="stacked">Data to store</IonLabel>
<IonTextarea rows="3" placeholder="Enter a URL or secret information" type="text" inputmode="text" value={ data } onIonChange={ e => setData(e.target.value) } />
</IonItem>
</IonCol>
</IonRow>
<IonRow className="ion-text-center ion-margin-top">
<IonCol size="12">
{ data !== "" ? <QRCode value={ data } /> : <img src="/assets/placeholder2.png" alt="placeholder qr" height="256" /> }
</IonCol>
</IonRow>
<IonRow className="ion-text-center ion-justify-content-center">
<IonCol size="10">
<IonItem lines="none">
<IonLabel className="ion-text-wrap ion-text-center">
<p>When you're ready, you can store the generated QR Code</p>
</IonLabel>
</IonItem>
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12">
<IonButton expand="block" onClick={ handleAdd }>Store &rarr;</IonButton>
</IonCol>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
);
};
export default Tab2;

0
03_source/mobile/src/pages/DemoReactQrCode/pages/Tab3.css Normal file
View File

102
03_source/mobile/src/pages/DemoReactQrCode/pages/Tab3.jsx Normal file
View File

@@ -0,0 +1,102 @@
import { IonBackButton, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardTitle, IonCol, IonContent, IonGrid, IonHeader, IonIcon, IonNote, IonPage, IonRow, IonTitle, IonToolbar, useIonToast } from '@ionic/react';
import './Tab3.css';
import { useState } from 'react';
import { BarcodeScanner } from "@ionic-native/barcode-scanner";
import QRCode from 'react-qr-code';
import { addQRCode } from '../store/QRStore';
import { reloadOutline } from 'ionicons/icons';
const Tab3 = () => {
const [ QRData, setQRData ] = useState(false);
const start = async () => {
const data = await BarcodeScanner.scan();
setQRData(data);
}
const [ showToast ] = useIonToast();
const handleAdd = async () => {
addQRCode(QRData.text, true);
showToast({
header: "Success!",
message: "QR Code stored successfully.",
duration: 3000,
color: "primary"
});
setQRData(false);
}
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton text="QR Codes" />
</IonButtons>
<IonTitle>Scan QR Code</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Scan QR Code</IonTitle>
</IonToolbar>
</IonHeader>
<IonGrid>
{ !QRData &&
<IonRow>
<IonCol size="12">
<IonButton expand="block" onClick={ start }>Scan &rarr;</IonButton>
</IonCol>
</IonRow>
}
{ QRData &&
<>
<IonRow className="ion-justify-content-center ion-text-center animate__animated animate__lightSpeedInLeft animate__faster">
<IonCol size="12">
<QRCode value={ QRData.text } />
</IonCol>
</IonRow>
<IonRow>
<IonCol size="12">
<IonCard>
<IonCardHeader>
<IonCardTitle>QR Code data</IonCardTitle>
<IonNote>This is what the code represents</IonNote>
</IonCardHeader>
<IonCardContent>
<p>{ QRData.text }</p>
</IonCardContent>
</IonCard>
</IonCol>
</IonRow>
<IonRow>
<IonCol size="6">
<IonButton expand="block" fill="outline" onClick={ start }>
<IonIcon icon={ reloadOutline } />&nbsp;
Scan again</IonButton>
</IonCol>
<IonCol size="6">
<IonButton expand="block" onClick={ handleAdd }>Store &rarr;</IonButton>
</IonCol>
</IonRow>
</>
}
</IonGrid>
</IonContent>
</IonPage>
);
};
export default Tab3;

BIN
03_source/mobile/src/pages/DemoReactQrCode/sounds/close.wav Normal file
View File

Binary file not shown.

BIN
03_source/mobile/src/pages/DemoReactQrCode/sounds/open.wav Normal file
View File

Binary file not shown.

19
03_source/mobile/src/pages/DemoReactQrCode/store/QRStore.js Normal file
View File

@@ -0,0 +1,19 @@
import { Store } from 'pullstate';
const QRStore = new Store({
codes: [],
});
export default QRStore;
export const addQRCode = (data, scanned = false) => {
QRStore.update((s) => {
s.codes = [...s.codes, { id: new Date(), data, scanned }];
});
};
export const removeQRCode = (id) => {
QRStore.update((s) => {
s.codes = s.codes.filter((code) => code.id !== id);
});
};

6
03_source/mobile/src/pages/DemoReactQrCode/store/Selectors.js Normal file
View File

@@ -0,0 +1,6 @@
import { createSelector } from 'reselect';
const getState = (state) => state;
// General getters
export const getCodes = createSelector(getState, (state) => state.codes);

1
03_source/mobile/src/pages/DemoReactQrCode/store/index.js Normal file
View File

@@ -0,0 +1 @@
export { default as QRStore } from './QRStore';

30
03_source/mobile/src/pages/DemoReactQrCode/theme/custom-tab-bar.scss Normal file
View File

@@ -0,0 +1,30 @@
:root {
/* --ion-background-color: white; */
--ion-tab-bar-color: rgb(76, 112, 141);
--ion-tab-bar-color-selected: white;
}
ion-tab-bar {
--background: rgb(1, 72, 131);
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.4);
border-radius: 50px !important;
height: 50px;
width: 40%;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
bottom: 24px;
position: relative;
margin: 0 auto !important;
border-top: none;
}
ion-tab-button {
border-radius: 16px !important;
}

77
03_source/mobile/src/pages/DemoReactQrCode/theme/variables.css Normal file
View File

@@ -0,0 +1,77 @@
/* 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;
}