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

update canvas,

Browse Source
This commit is contained in:
louiscklaw
2025-06-06 22:21:22 +08:00
parent 8200e0d902
commit b2adcff61b
8 changed files with 271 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
03_source/mobile/src/pages/DemoReactDrawingCanvas/components/ExploreContainer.scss Normal file
View File

@@ -0,0 +1,24 @@
.container {
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.container strong {
font-size: 20px;
line-height: 26px;
}
.container p {
font-size: 16px;
line-height: 22px;
color: #8c8c8c;
margin: 0;
}
.container a {
text-decoration: none;
}

23
03_source/mobile/src/pages/DemoReactDrawingCanvas/components/ExploreContainer.tsx Normal file
View File

@@ -0,0 +1,23 @@
import './ExploreContainer.scss';
interface ContainerProps {}
const ExploreContainer: React.FC<ContainerProps> = () => {
return (
<div className="container">
<strong>Ready to create an app?</strong>
<p>
Start with Ionic{' '}
<a
target="_blank"
rel="noopener noreferrer"
href="https://ionicframework.com/docs/components"
>
UI Components
</a>
</p>
</div>
);
};
export default ExploreContainer;

29
03_source/mobile/src/pages/DemoReactDrawingCanvas/index.tsx
View File

@@ -1,38 +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 './style.scss';
import Home from './pages/Home';
function DemoReactDrawingCanvas() {
return (
<IonTabs>
<IonRouterOutlet>
<Route exact path="/demo-react-drawing-canvas/tab1">
<Tab1 />
</Route>
<Route exact path="/demo-react-drawing-canvas/tab2">
<Tab2 />
<Route exact path="/demo-react-drawing-canvas/home">
<Home />
</Route>
<Redirect exact path="/demo-react-drawing-canvas" to="/demo-react-drawing-canvas/tab1" />
<Redirect exact path="/demo-react-drawing-canvas" to="/demo-react-drawing-canvas/home" />
</IonRouterOutlet>
{/* */}
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/demo-react-drawing-canvas/tab1">
<IonIcon icon={cloudOutline} />
<IonLabel>Dashboard</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/demo-react-drawing-canvas/tab2">
<IonIcon icon={searchOutline} />
<IonLabel>Search</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
);
}

9
03_source/mobile/src/pages/DemoReactDrawingCanvas/module.d.ts vendored Normal file
View File

@@ -0,0 +1,9 @@
declare module '*.module.css' {
const classes: { readonly [key: string]: string };
export default classes;
}
declare module '*.module.scss' {
const classes: { readonly [key: string]: string };
export default classes;
}

17
03_source/mobile/src/pages/DemoReactDrawingCanvas/pages/Home.module.scss Normal file
View File

@@ -0,0 +1,17 @@
.canvasOptions {
position: absolute;
z-index: 99999;
width: 100%;
background-color: white !important;
border-bottom: 1px solid rgb(230, 230, 230);
}
.fixed {
position: fixed;
background-color: white;
border-bottom: 1px solid rgb(204, 204, 204);
}
.picker {
width: 100% !important;
}

114
03_source/mobile/src/pages/DemoReactDrawingCanvas/pages/Home.tsx Normal file
View File

@@ -0,0 +1,114 @@
import {
IonIcon,
IonItem,
IonLabel,
IonInput,
IonButton,
IonCol,
IonContent,
IonGrid,
IonHeader,
IonPage,
IonRow,
IonTitle,
IonToolbar,
Platform,
IonButtons,
useIonRouter,
} from '@ionic/react';
import { arrowUndoOutline, brushOutline, chevronBackOutline, closeOutline } from 'ionicons/icons';
import React, { useState } from 'react';
import styles from './Home.module.scss';
import CanvasDraw from 'react-canvas-draw';
import { SwatchesPicker } from 'react-color';
const Home = (): React.JSX.Element => {
var canvasRef = '';
const [brushColor, setBrushColor] = useState('#000000');
const [brushSize, setBrushSize] = useState(5);
const [showColorPicker, setShowColorPicker] = useState(false);
const handleColorChange = (colorValue) => {
setBrushColor(colorValue.hex);
};
const router = useIonRouter();
function handleBackClick() {
router.goBack();
}
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Ionic Drawing Canvas</IonTitle>
<IonButtons slot="start">
<IonButton onClick={() => handleBackClick()}>
<IonIcon icon={chevronBackOutline} color="primary" />
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<div className={styles.canvasOptions}>
<IonGrid className={styles.fixed}>
<IonRow>
<IonCol size={showColorPicker ? '12' : '2'}>
<IonButton
style={{ backgroundColor: brushColor }}
color={brushColor}
expand="block"
onClick={() => setShowColorPicker(!showColorPicker)}
>
<IonIcon icon={brushOutline} />
</IonButton>
{showColorPicker && (
<SwatchesPicker onChange={handleColorChange} className={styles.picker} />
)}
</IonCol>
{!showColorPicker && (
<>
<IonCol size="4">
<IonItem lines="none">
<IonLabel position="inset">Size</IonLabel>
<IonInput
type="number"
value={brushSize}
onIonChange={(e) => setBrushSize(parseInt(e.target.value))}
/>
</IonItem>
</IonCol>
<IonCol size="3">
<IonButton expand="full" color="primary" onClick={() => canvasRef.undo()}>
<IonIcon icon={arrowUndoOutline} />
</IonButton>
</IonCol>
<IonCol size="3">
<IonButton expand="full" color="primary" onClick={() => canvasRef.clear()}>
<IonIcon icon={closeOutline} />
</IonButton>
</IonCol>
</>
)}
</IonRow>
</IonGrid>
</div>
<CanvasDraw
brushRadius={brushSize}
lazyRadius={0}
canvasHeight={window.innerHeight}
canvasWidth={window.innerWidth}
brushColor={brushColor}
ref={(canvasDraw) => (canvasRef = canvasDraw)}
/>
</IonContent>
</IonPage>
);
};
export default Home;

103
03_source/mobile/src/pages/DemoReactDrawingCanvas/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;
}

79
03_source/mobile/src/pages/DemoReactDrawingCanvas/theme/variables.scss Normal file
View File

@@ -0,0 +1,79 @@
.demo-react-drawing-canvas {
/* 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;
}
}