diff --git a/README.md b/README.md index ee6feae983caa08798b2a40515e68ce9afe2fab2..69885d5561bb179b387dfffc4aa12dfb7cd15a8f 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ ### 效果预览 -| 滑动选择弹窗 | 模态弹窗 | 半模态弹窗 | toast弹窗 | +| 滑动选择弹窗 | 模态弹窗 | 半模态弹窗 | Toast弹窗 | |------------------------------------------|-------------------------------------------|--------------------------------------------|----------------------------------------| | ![image](screenshots/device/slide.gif) | ![image](screenshots/device/modality.gif) | ![image](screenshots/device/semimodal.gif) | ![image](screenshots/device/toast.gif) | | 隐私协议弹窗 | 全屏弹窗 | 自定义日历选择器弹窗 | 两级半模态+全屏弹窗 | @@ -18,7 +18,7 @@ 1. 滑动选择弹窗：点击页面底部两个按钮，会弹出对应的12小时制的时间选择器弹窗和文本选择器弹窗。 2. 模态弹窗：点击页面底部选择乘车人，会弹出模态弹窗，点击模态弹窗底部确认按钮，关闭模态弹窗。 3. 半模态弹窗：点击页面中选择点餐口味和餐具按钮，弹出半模态弹窗，点击遮罩层关闭弹窗。 -4. toast弹窗：点击底部按钮，会弹出登陆成功的toast弹窗，3s后弹窗淡出消失。 +4. Toast弹窗：点击底部按钮，会弹出登录成功的Toast弹窗，3s后弹窗淡出消失。 5. 隐私协议弹窗：点击底部按钮弹出隐私协议弹窗，弹窗内容可以滚动，橙色的隐私协议可以点击，点击后会跳转到新页面，点击新页面的返回按钮回到隐私弹窗页面，弹窗不会关闭，点击同意或不同意关闭弹窗。 6. 全屏弹窗：点击底部按钮弹出全屏弹窗，点击左上角向下箭头可直接关闭弹窗；通过向下滑动会有阻尼效果，当滑动距离大于300时，弹窗会关闭，否则回弹到原位置。 7. 自定义日历选择器弹窗：点击页面中的日期会弹出日期选择器弹窗，当前日期之前的日期不可选，之后的日期可选，选择完成后弹窗关闭，日期更改为选中的日期。 @@ -56,7 +56,7 @@ 1. 滑动选择弹窗：通过TimePickerDialog.show(时间选择器弹窗)和TextPickerDialog.show(文本选择器弹窗)两个组件来实现。 2. 模态弹窗：通过bindContentCover属性为组件绑定全屏模态页面，点击后显示模态页面。模态页面内容自定义，显示方式可设置无动画过渡，上下切换过渡以及透明渐变过渡方式。 3. 半模态弹窗：通过bindSheet属性为组件绑定半模态页面，点击后显示半模态页面。 -4. toast弹窗：使用自定义弹窗(CustomDialog)来模拟toast提示弹窗，通过设置CustomDialogController类的各种属性值实现效果。 +4. Toast弹窗：使用自定义弹窗(CustomDialog)来模拟toast提示弹窗，通过设置CustomDialogController类的各种属性值实现效果。 5. 隐私协议弹窗：通过Stack组件层叠模拟实现弹窗，使用visibility属性控制弹窗显示隐藏，实现点击跳转到新页面，点击新页面的返回按钮回到隐私弹窗页面，弹窗不会关闭的效果。 6. 全屏弹窗：通过translate属性将全屏页面隐藏在可视区外，点击全屏弹窗按钮，通过显示动画将全屏弹窗显示出来；在gesture属性内通过PanGesture拖动手势事件，来实现当向下滑动大于300时，弹窗会关闭，否则回弹到原位置。 7. 自定义日历选择器弹窗：使用自定义弹窗(CustomDialog)来实现自定义日历选择器，使用LazyForEach组件循环遍历实现月份，本示例值显示两个月(当前月份与下一个月)，使用ForEach来遍历每个月的每一天。 @@ -70,10 +70,10 @@ ### 约束与限制 -1.本示例仅支持标准系统上运行，支持设备：华为手机。 +1.本示例仅支持标准系统上运行，支持设备：phone,tablet,2in1。 -2.HarmonyOS系统：HarmonyOS NEXT Developer Beta1及以上。 +2.HarmonyOS系统：HarmonyOS 5.0.0 Release及以上。 -3.DevEco Studio版本：DevEco Studio NEXT Developer Beta1及以上。 +3.DevEco Studio版本：DevEco Studio 5.0.0 Release及以上。 -4.HarmonyOS SDK版本：HarmonyOS NEXT Developer Beta1 SDK及以上。 \ No newline at end of file +4.HarmonyOS SDK版本：HarmonyOS 5.0.0 Release SDK及以上。 \ No newline at end of file diff --git a/entry/obfuscation-rules.txt b/entry/obfuscation-rules.txt index a1dfa0bd175984dc49e641436aa67b1de1b8abeb..f8bf42a6d9720ce24231dc0b736dcf310ff0efdf 100644 --- a/entry/obfuscation-rules.txt +++ b/entry/obfuscation-rules.txt @@ -18,5 +18,4 @@ # -keep-global-name: specifies names that you want to keep in the global scope -enable-property-obfuscation -enable-toplevel-obfuscation --enable-filename-obfuscation -enable-export-obfuscation \ No newline at end of file diff --git a/entry/src/main/ets/common/constants/BreakpointSystem.ets b/entry/src/main/ets/common/constants/BreakpointSystem.ets new file mode 100644 index 0000000000000000000000000000000000000000..797bded69d885bd7a43faffcdafa5bea8a0f9e49 --- /dev/null +++ b/entry/src/main/ets/common/constants/BreakpointSystem.ets @@ -0,0 +1,39 @@ +/* + * Copyright (c) 2025 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export class BreakpointType { + sm: T + md: T + lg: T + + constructor(sm: T, md: T, lg: T) { + this.sm = sm; + this.md = md; + this.lg = lg; + } + + GetValue(currentBreakpoint: string) { + if (currentBreakpoint === 'sm') { + return this.sm; + } + if (currentBreakpoint === 'md') { + return this.md; + } + if (currentBreakpoint === 'lg') { + return this.lg; + } + return undefined; + } +} diff --git a/entry/src/main/ets/common/constants/CommonConstants.ets b/entry/src/main/ets/common/constants/CommonConstants.ets index 77abb077c5744cd8fb6e890e972af50e3329a6fd..a83eac7ffbae7cb5348c72077184586b8769ac9a 100644 --- a/entry/src/main/ets/common/constants/CommonConstants.ets +++ b/entry/src/main/ets/common/constants/CommonConstants.ets @@ -58,7 +58,12 @@ export class CommonConstants { /** * One hundred eleven percent. */ - static readonly ONE_HUNDRED_ELEVEN_PERCENT: string = '111%'; + static readonly ONE_HUNDRED_ELEVEN_PERCENT: string = '100%'; + + /** + * The hundred percent of the components + */ + static readonly FULL_PERCENT: string = '100%'; /** * Ninety two percent. @@ -103,7 +108,7 @@ export class CommonConstants { /** * Line Spacing. */ - static readonly SPACE: number = 15; + static readonly SPACE: number = 16; /** * Moving distance. @@ -163,7 +168,7 @@ export class CommonConstants { /** * Element margin large. */ - static readonly ELEMENTS_MARGIN_L: number = 24; + static readonly ELEMENTS_MARGIN_L: number = 16; /** * Element margin small. @@ -209,4 +214,29 @@ export class CommonConstants { * Five grid. */ static readonly GRID_FIVE: string = '1fr 1fr 1fr 1fr 1fr'; + + /** + * Breakpoint sm. + */ + static readonly BREAK_POINT_SM: string = 'sm'; + + /** + * Breakpoint md. + */ + static readonly BREAK_POINT_MD: string = 'md'; + + /** + * Breakpoint lg. + */ + static readonly BREAK_POINT_LG: string = 'lg'; + + /** + * MD and LG width. + */ + static readonly WIDTH_MD_LG: number = 448; + + /** + * All breakpoints + */ + static readonly BREAKPOINTS: string[] = ['sm', 'md', 'lg']; } \ No newline at end of file diff --git a/entry/src/main/ets/entryability/EntryAbility.ets b/entry/src/main/ets/entryability/EntryAbility.ets index a32a8361c7fcad66acf12208583e198fc4e68dab..579b04b4851dae2b6e3c8c8108303cd9374dbbd6 100644 --- a/entry/src/main/ets/entryability/EntryAbility.ets +++ b/entry/src/main/ets/entryability/EntryAbility.ets @@ -12,13 +12,46 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; + +import { AbilityConstant, Configuration, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit'; +import { display, window } from '@kit.ArkUI'; import { hilog } from '@kit.PerformanceAnalysisKit'; -import { window } from '@kit.ArkUI'; +import { BusinessError } from '@kit.BasicServicesKit'; +import { resourceManager } from '@kit.LocalizationKit'; export default class EntryAbility extends UIAbility { + private windowObj?: window.Window; + private curBp: string = ''; + + private updateBreakpoint(windowWidth: number): void { + let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels; + let newBp: string = ''; + if (windowWidthVp < 600) { + newBp = 'sm'; + } else if (windowWidthVp < 840) { + newBp = 'md'; + } else { + newBp = 'lg'; + } + if (this.curBp !== newBp) { + this.curBp = newBp; + AppStorage.setOrCreate('currentBreakpoint', this.curBp); + } + } + onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); + AppStorage.setOrCreate('systemColorMode', this.context.config.colorMode); + this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET); + } + + onConfigurationUpdate(newConfig: Configuration): void { + let newColorMode: ConfigurationConstant.ColorMode = + newConfig.colorMode || ConfigurationConstant.ColorMode.COLOR_MODE_DARK; + let currentColorMode = AppStorage.get('systemColorMode'); + if (newColorMode !== currentColorMode) { + AppStorage.setOrCreate('systemColorMode', newColorMode); + } } onDestroy(): void { @@ -26,15 +59,39 @@ export default class EntryAbility extends UIAbility { } onWindowStageCreate(windowStage: window.WindowStage): void { + windowStage.getMainWindow().then((windowObj: window.Window) => { + let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; + let avoidArea = windowObj.getWindowAvoidArea(type); + let bottomRectHeight = avoidArea.bottomRect.height; + AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight); + type = window.AvoidAreaType.TYPE_SYSTEM; + avoidArea = windowObj.getWindowAvoidArea(type); + let topRectHeight = avoidArea.topRect.height; + AppStorage.setOrCreate('topRectHeight', topRectHeight); + this.windowObj = windowObj; + this.updateBreakpoint(windowObj.getWindowProperties().windowRect.width); + windowObj.on('windowSizeChange', (windowSize) => { + this.updateBreakpoint(windowSize.width); + }) + }); // Main window is created, set main page for this ability hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); - - windowStage.loadContent('pages/Index', (err) => { + let context = this.context; + let resourceManager: resourceManager.ResourceManager = context.resourceManager; + AppStorage.setOrCreate('resourceManager', resourceManager); + windowStage.loadContent('pages/Index', (err, data) => { if (err.code) { hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); return; } - hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.'); + hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? ''); + let windowClass: window.Window = windowStage.getMainWindowSync(); + let isLayoutFullScreen = true; + windowClass.setWindowLayoutFullScreen(isLayoutFullScreen).then(() => { + console.info('Succeeded in setting the window layout to full-screen mode.'); + }).catch((err: BusinessError) => { + console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err)); + }); }); } diff --git a/entry/src/main/ets/pages/BindContentCoverDemo.ets b/entry/src/main/ets/pages/BindContentCoverDemo.ets index d11ac00d5d166b6c1a797442d85b4e5e9f9a539a..8a837dd0804468c89360806a7b27194798e01306 100644 --- a/entry/src/main/ets/pages/BindContentCoverDemo.ets +++ b/entry/src/main/ets/pages/BindContentCoverDemo.ets @@ -12,157 +12,129 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { curves } from '@kit.ArkUI'; -import { ComposeListItem } from "@kit.ArkUI"; + import { CommonConstants } from '../common/constants/CommonConstants'; -import { PersonList, personList } from '../viewmodel/BindContentModel'; @Entry @Component struct BindContentCoverDemo { - private personList: Array = personList; + @StorageLink('topRectHeight') topRectHeight: number = 0; + @StorageLink('bottomRectHeight') bottomRectHeight: number = 0; + @StorageLink('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM; @State isPresent: boolean = false; - - @Builder - MyBuilder() { - Column() { - Row() - .backgroundColor(Color.White) - .height($r('app.float.blank_height')) - Row() { - Text($r('app.string.select_person')) - .fontSize($r('app.float.font_size')) - .fontColor(Color.Black) - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .textAlign(TextAlign.Center) - .padding({ - top: $r('app.float.corner_radius_default_m'), - bottom: $r('app.float.column_padding') - }) - } - .backgroundColor($r('app.color.start_window_background')) - - Row() { - Text($r('app.string.add_person')) - .fontSize($r('app.float.font_size1')) - .fontColor($r('app.color.color_bind_sheet')) - .margin({ top: $r('app.float.text_margin') }) - .padding({ top: $r('app.float.train_image_size'), bottom: $r('app.float.train_image_size') }) - .width(CommonConstants.NINETY_TWO_PERCENT) - .borderRadius($r('app.float.text_size_headline')) - .textAlign(TextAlign.Center) - .backgroundColor(Color.White) - } - .margin({ bottom: $r('app.float.text_margin') }) - - Column() { - ForEach(this.personList, (item: PersonList, index: number) => { - Row() { - if (index % 2 == 0) { - Checkbox() - .select(true) - } else { - Checkbox() - .select(false) - } - ComposeListItem({ - contentItem: ({ - primaryText: item.name, - secondaryText: item.cardNum - }), - operateItem: ({ - text: $r('app.string.edit') - }) - }) - } - .padding({ - left: $r('app.float.text_margin'), - right: $r('app.float.row_padding') - }) - }, (item: PersonList) => JSON.stringify(item)) - } - .width(CommonConstants.NINETY_TWO_PERCENT) - .backgroundColor(Color.White) - .borderRadius($r('app.float.text_size_headline')) - - Text($r('app.string.confirmed')) - .margin({ top: $r('app.float.margin_large') }) - .width(CommonConstants.NINETY_TWO_PERCENT) - .height($r('app.float.text_height')) - .textAlign(TextAlign.Center) - .borderRadius($r('app.float.train_image_size')) - .fontColor(Color.White) - .backgroundColor($r('app.color.color_warning')) - .onClick(() => { - this.isPresent = !this.isPresent; - }) - } - .height(CommonConstants.ONE_HUNDRED_ELEVEN_PERCENT) - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .backgroundColor($r('app.color.dialog_background')) - .transition(TransitionEffect.translate({ y: CommonConstants.TRANSLATE }) - .animation({ - curve: curves.springMotion(CommonConstants.ZERO_SIX, CommonConstants.ZERO_EIGHT) - })) - } + pageInfos: NavPathStack = new NavPathStack(); build() { - Navigation() { + Navigation(this.pageInfos) { Column() { Row() { Text($r('app.string.confirm_order')) - .fontSize($r('app.float.font_size')) - .fontColor(Color.White) - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .textAlign(TextAlign.Center) - .padding({ top: $r('app.float.row_padding'), bottom: $r('app.float.row_height') }) + .fontSize($r('sys.float.Subtitle_L')) + .fontColor($r('sys.color.font_primary')) + .width(CommonConstants.FULL_PERCENT) + .textAlign(TextAlign.Start) + .fontWeight(FontWeight.Bold) + .padding({ top: $r('sys.float.padding_level5') }) } - .backgroundColor($r('app.color.color_warning')) + .height(50) - Column() { - Row() { - Column() { - Text($r('app.string.start_time')) - Text($r('app.string.start_string')) - } - .width(CommonConstants.THIRTY_PERCENT) + Row() { + Column() { + Text($r('app.string.start_time')) + .fontSize($r('sys.float.Title_S')) + .fontColor($r('sys.color.font_primary')) + .fontWeight(FontWeight.Medium) + .margin({ + bottom: $r('sys.float.padding_level2') + }) + Text($r('app.string.start_string')) + .fontSize($r('sys.float.Subtitle_S')) + .fontColor($r('sys.color.font_primary')) + } - Column() { - Text($r('app.string.car_name')) - Text($r('app.string.car_time')) - } - .width(CommonConstants.THIRTY_PERCENT) + Column() { + Text($r('app.string.car_name')) + .fontSize($r('sys.float.Subtitle_L')) + .fontColor($r('sys.color.font_primary')) + .margin({ + bottom: $r('sys.float.padding_level2') + }) + Text($r('app.string.car_time')) + .fontSize($r('sys.float.Body_S')) + .fontColor($r('sys.color.font_tertiary')) + } - Column() { - Text($r('app.string.end_time')) - Text($r('app.string.end_name')) - } - .width(CommonConstants.THIRTY_PERCENT) + Column() { + Text($r('app.string.end_time')) + .fontSize($r('sys.float.Title_S')) + .fontColor($r('sys.color.font_primary')) + .fontWeight(FontWeight.Medium) + .margin({ + bottom: $r('sys.float.padding_level2') + }) + Text($r('app.string.end_name')) + .fontSize($r('sys.float.Subtitle_S')) + .fontColor($r('sys.color.font_primary')) } } - .width(CommonConstants.NINETY_TWO_PERCENT) - .padding($r('app.float.column_padding')) - .margin({ top: $r('app.float.column_margin') }) - .backgroundColor(Color.White) - .shadow({ radius: $r('app.float.row_padding'), color: $r('app.color.color_shadow') }) - .borderRadius($r('app.float.text_margin')) + .width(CommonConstants.FULL_PERCENT) + .height(97) + .backgroundColor($r('sys.color.comp_background_primary')) + .borderRadius($r('sys.float.corner_radius_level6')) + .justifyContent(FlexAlign.SpaceBetween) + .padding({ + right: this.curBp === 'sm' ? $r('sys.float.padding_level6') : $r('sys.float.padding_level12'), + left: this.curBp === 'sm' ? $r('sys.float.padding_level6') : $r('sys.float.padding_level12') + }) + .margin({ + bottom: $r('sys.float.padding_level6') + }) - Column() { - Button($r('app.string.button_select')) - .fontSize($r('app.float.font_size3')) - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .borderRadius($r('app.float.text_size_headline')) - .bindContentCover(this.isPresent, this.MyBuilder(), ModalTransition.DEFAULT) - .onClick(() => { - this.isPresent = !this.isPresent; - }) + + Row() { + Button({ type: ButtonType.Circle }) { + SymbolGlyph($r('sys.symbol.plus')) + .fontColor([$r('sys.color.comp_background_primary')]) + .fontSize($r('sys.float.Subtitle_L')) + } + .backgroundColor($r('sys.color.brand')) + .height($r('sys.float.Title_M')) + .aspectRatio(1) + .margin({ right: $r('sys.float.padding_level4') }) + + Text($r('app.string.button_select')) + .fontColor($r('sys.color.brand')) + .fontSize($r('sys.float.Body_L')) + .fontWeight(FontWeight.Medium) } - .height(CommonConstants.SEVENTY_FIVE_PERCENT) - .justifyContent(FlexAlign.End) - .padding({ left: $r('app.float.text_size_headline'), right: $r('app.float.text_size_headline') }) + .onClick(() => { + this.pageInfos.replacePath({ name: 'addPassengers' }); + }) + .width(CommonConstants.FULL_PERCENT) + .height($r('app.integer.button_height')) + .alignItems(VerticalAlign.Center) + .justifyContent(FlexAlign.Center) + .backgroundColor($r('sys.color.comp_background_primary')) + .borderRadius($r('sys.float.corner_radius_level6')) + } + .padding({ + right: this.curBp === 'lg' ? $r('sys.float.padding_level16') : $r('sys.float.padding_level8'), + left: $r('sys.float.padding_level8') + }) } .title($r('app.string.dialog_name')) + .mode(this.curBp === 'lg' ? NavigationMode.Split : NavigationMode.Stack) + .navBarWidth($r('app.integer.nav_bar_width')) .titleMode(NavigationTitleMode.Mini) + .backgroundColor($r('sys.color.background_secondary')) + .padding({ + top: px2vp(this.topRectHeight), + right: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8'), + bottom: px2vp(this.bottomRectHeight), + left: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8') + }) } } \ No newline at end of file diff --git a/entry/src/main/ets/pages/BindSheet.ets b/entry/src/main/ets/pages/BindSheet.ets index 3490712b0b331bb1894f4ce8a76333cc2ada7168..510a7f74f2fc5a0f5fdce55eb97a65c4435123cf 100644 --- a/entry/src/main/ets/pages/BindSheet.ets +++ b/entry/src/main/ets/pages/BindSheet.ets @@ -12,89 +12,134 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +import { BreakpointType } from '../common/constants/BreakpointSystem'; import { CommonConstants } from '../common/constants/CommonConstants'; +import { ConfigurationConstant } from '@kit.AbilityKit'; @Entry @Component struct BindSheetDemo { + @StorageProp('systemColorMode') + currentMode: ConfigurationConstant.ColorMode = ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT; + @StorageLink('topRectHeight') topRectHeight: number = 0; + @StorageLink('bottomRectHeight') bottomRectHeight: number = 0; + @StorageLink('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM; @State isShowSheet: boolean = false; - private menuList: ResourceStr[] = [$r('app.string.spicy'), $r('app.string.spicy1'), $r('app.string.spicy2'), $r('app.string.spicy3'), $r('app.string.spicy4'), $r('app.string.spicy5')]; - @Builder mySheet() { + private menuList: ResourceStr[] = [ + $r('app.string.spicy'), $r('app.string.spicy1'), $r('app.string.spicy2'), $r('app.string.spicy3'), + $r('app.string.spicy4'), $r('app.string.spicy5')]; + + @Builder + mySheet() { Column() { Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) { ForEach(this.menuList, (item: string) => { Text(item) - .fontSize($r('app.float.font_size1')) - .fontColor($r('app.color.color_bind_sheet')) - .backgroundColor($r('app.color.color_background_bind')) - .borderRadius($r('app.float.border_radius1')) - .margin($r('app.float.text_margin')) - .padding($r('app.float.text_margin')) + .height($r('sys.float.Display_S')) + .fontSize($r('sys.float.Subtitle_M')) + .fontColor($r('sys.color.font_primary')) + .backgroundColor($r('sys.color.comp_background_tertiary')) + .borderRadius($r('sys.float.corner_radius_level6')) + .margin({ + right: $r('sys.float.corner_radius_level6'), + bottom: $r('sys.float.corner_radius_level6') + }) + .padding({ + top: $r('sys.float.corner_radius_level4'), + right: $r('sys.float.corner_radius_level6'), + bottom: $r('sys.float.corner_radius_level4'), + left: $r('sys.float.corner_radius_level6') + }) }) } + .borderRadius($r('sys.float.corner_radius_level8')) + .backgroundColor(this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT ? + $r('sys.color.background_primary') : $r('sys.color.background_fourth')) + .margin({ + top: $r('sys.float.corner_radius_level4'), + right: $r('sys.float.corner_radius_level8'), + left: $r('sys.float.corner_radius_level8') + }) .padding({ - top: $r('app.float.column_padding'), - left: $r('app.float.corner_radius_default_m') + top: $r('sys.float.corner_radius_level8'), + right: $r('sys.float.corner_radius_level8'), + bottom: $r('sys.float.corner_radius_level2'), + left: $r('sys.float.corner_radius_level8') }) } - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .height(CommonConstants.ONE_HUNDRED_PERCENT) - .backgroundColor(Color.White) + .width(CommonConstants.FULL_PERCENT) + .height(CommonConstants.FULL_PERCENT) + .backgroundColor(this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT ? + $r('sys.color.background_secondary') : $r('sys.color.background_tertiary')) } build() { Navigation() { Column() { Text($r('app.string.tastes')) - .fontSize($r('app.float.font_size5')) + .fontSize($r('sys.float.Subtitle_L')) + .fontColor($r('sys.color.font_primary')) + .width(CommonConstants.FULL_PERCENT) + .textAlign(TextAlign.Start) + .fontWeight(FontWeight.Bold) .padding({ - top: $r('app.float.row_padding'), - bottom: $r('app.float.row_padding') + top: $r('sys.float.padding_level16'), + bottom: $r('sys.float.padding_level4') }) Column() { Row() { - Column() { - Text($r('app.string.choose_flavors')) - .fontSize($r('app.float.font_size1')) - .fontWeight(FontWeight.Medium) - } - .alignItems(HorizontalAlign.Start) - Blank() - Row() - .width($r('app.float.button_margin')) - .height($r('app.float.button_margin')) - .margin({ right: $r('app.float.column_padding') }) - .border({ - width: { top: $r('app.float.border'), right: $r('app.float.border') }, - color: $r('app.color.color_border') - }) - .rotate({ angle: CommonConstants.ANGLE }) + Text($r('app.string.choose_flavors')) + .fontColor($r('sys.color.font_primary')) + .fontSize($r('sys.float.Subtitle_M')) + .fontWeight(FontWeight.Medium) + SymbolGlyph($r('sys.symbol.chevron_right')) + .fontColor([$r('sys.color.font_primary')]) + .fontSize($r('sys.float.Title_L')) } - .borderRadius($r('app.float.column_padding')) - .shadow({ - radius: $r('app.float.shadow_radius'), - color: $r('app.color.shadow_color') - }) - .width(CommonConstants.NINETY_PERCENT) .alignItems(VerticalAlign.Center) - .padding({ left: $r('app.float.column_padding'), top: $r('app.float.column_padding'), bottom: $r('app.float.column_padding') }) - .backgroundColor(Color.White) - .bindSheet($$this.isShowSheet, this.mySheet(), { - height: $r('app.float.bind_sheet_height'), - dragBar: false, - showClose: false + .justifyContent(FlexAlign.SpaceBetween) + .width(CommonConstants.FULL_PERCENT) + .borderRadius($r('sys.float.corner_radius_level6')) + .width(CommonConstants.FULL_PERCENT) + .padding($r('sys.float.padding_level8')) + .backgroundColor($r('sys.color.comp_background_primary')) + .bindSheet(this.isShowSheet, this.mySheet(), { + title: { title: $r('app.string.select') }, + scrollSizeMode: ScrollSizeMode.FOLLOW_DETENT, + height: new BreakpointType(320, 560, 560).GetValue(this.curBp), + width: this.curBp === 'sm' ? '100%' : $r('app.integer.bind_sheet_width'), + preferType: SheetType.CENTER, + backgroundColor: this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT ? + $r('sys.color.background_secondary') : $r('sys.color.background_tertiary'), + onWillDisappear: () => { + this.isShowSheet = !this.isShowSheet; + } }) .onClick(() => { this.isShowSheet = !this.isShowSheet; }) } - .width(CommonConstants.ONE_HUNDRED_PERCENT) + .width(CommonConstants.FULL_PERCENT) } - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .height(CommonConstants.ONE_HUNDRED_ELEVEN_PERCENT) - .backgroundColor($r('app.color.color_background_bind')) + .width(CommonConstants.FULL_PERCENT) + .backgroundColor($r('sys.color.background_secondary')) + .padding({ + right: this.curBp === 'sm' ? $r('sys.float.padding_level8') : + this.curBp === 'md' ? $r('sys.float.padding_level12') : $r('sys.float.padding_level16'), + left: this.curBp === 'sm' ? $r('sys.float.padding_level8') : + this.curBp === 'md' ? $r('sys.float.padding_level12') : $r('sys.float.padding_level16') + }) } .title($r('app.string.bind_sheet_dialog')) .titleMode(NavigationTitleMode.Mini) + .mode(NavigationMode.Stack) + .backgroundColor($r('sys.color.background_secondary')) + .padding({ + top: px2vp(this.topRectHeight), + bottom: px2vp(this.bottomRectHeight), + left: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8') + }) } } diff --git a/entry/src/main/ets/pages/CustomCalendar.ets b/entry/src/main/ets/pages/CustomCalendar.ets index a2da74a1877227aff55cc1b60743413fa7273669..6fdad8437783f74c8d2eaea8f560d0ce371bf5b0 100644 --- a/entry/src/main/ets/pages/CustomCalendar.ets +++ b/entry/src/main/ets/pages/CustomCalendar.ets @@ -12,16 +12,22 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { promptAction } from '@kit.ArkUI'; + import { CustomCalendarPickerDialog } from '../view/CustomCalendarPickerDialog'; -import { DateModel } from '../viewmodel/DateModel'; -import { getRealTimeDate } from '../viewmodel/GetDate'; import { CommonConstants } from '../common/constants/CommonConstants'; +import { getRealTimeDate } from '../viewmodel/GetDate'; +import { DateModel } from '../viewmodel/DateModel'; @Entry @Component export struct CalendarView { - private week: ResourceStr[] = [$r('app.string.sunday'), $r('app.string.monday'), $r('app.string.tuesday'), $r('app.string.wednesday'), $r('app.string.thursday'), $r('app.string.friday'), $r('app.string.saturday')]; + @StorageLink('topRectHeight') topRectHeight: number = 0; + @StorageLink('bottomRectHeight') bottomRectHeight: number = 0; + @StorageLink('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM; + pageInfos: NavPathStack = new NavPathStack(); + private week: ResourceStr[] = + [$r('app.string.sunday'), $r('app.string.monday'), $r('app.string.tuesday'), $r('app.string.wednesday'), + $r('app.string.thursday'), $r('app.string.friday'), $r('app.string.saturday')]; @State currentMonth: number = 1; @State currentDay: number = 1; @State currentYear: number = 1; @@ -41,11 +47,15 @@ export struct CalendarView { currentYear: this.currentYear, cancel: this.onCancel }), - alignment: DialogAlignment.Bottom, - customStyle: true + alignment: this.curBp === 'sm' ? DialogAlignment.Bottom : DialogAlignment.Center, + customStyle: true, + maskColor: $r('sys.color.mask_fourth') }) - onCancel() { + onCancel(): void { + if (this.dialogController != undefined) { + this.dialogController.close(); + } } getResourceString(resource: Resource): string { @@ -59,56 +69,67 @@ export struct CalendarView { Column({ space: CommonConstants.ELEMENTS_MARGIN_L }) { Row() { Text($r('app.string.departure')) - .fontSize($r('app.float.text_size_headline')) - Image($r('app.media.train_transport_icon')) - .height($r('app.float.train_image_size')) - .width($r('app.float.train_image_size')) + .fontSize($r('sys.float.Subtitle_M')) + .fontColor($r('sys.color.font_primary')) + SymbolGlyph($r('sys.symbol.monorail_fill')) + .fontColor([$r('sys.color.icon_primary')]) + .fontSize($r('sys.float.Title_S')) Text($r('app.string.destination')) - .fontSize($r('app.float.text_size_headline')) + .fontSize($r('sys.float.Subtitle_M')) + .fontColor($r('sys.color.font_primary')) } .justifyContent(FlexAlign.SpaceBetween) - .width(CommonConstants.ONE_HUNDRED_PERCENT) + .width(CommonConstants.FULL_PERCENT) + .padding({ + right: $r('sys.float.padding_level6'), + left: $r('sys.float.padding_level6') + }) Row({ space: CommonConstants.ELEMENTS_MARGIN_M }) { Text(`${this.dateModel.month}${this.getResourceString($r('app.string.month'))}${this.dateModel.day}${this.getResourceString($r('app.string.day'))}`) - .fontSize($r('app.float.text_size_headline')) + .fontSize($r('sys.float.Subtitle_M')) + .fontColor($r('sys.color.font_primary')) Text(this.week[this.dateModel.week]) - .fontSize($r('app.float.text_size_body1')) + .fontSize($r('sys.float.Subtitle_M')) + .fontColor($r('sys.color.font_primary')) } - .justifyContent(FlexAlign.Start) - .width(CommonConstants.ONE_HUNDRED_PERCENT) + .justifyContent(FlexAlign.Center) + .width(CommonConstants.FULL_PERCENT) .onClick(() => { this.dialogController.open(); }) - Button($r('app.string.check_ticket')) - .fontSize($r('app.float.text_size_headline')) - .height($r('app.float.check_button_height')) - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .type(ButtonType.Normal) - .borderRadius($r('app.float.corner_radius_default_m')) + Button($r('app.string.ticket_inquiry')) + .width(this.curBp === 'md' ? CommonConstants.WIDTH_MD_LG : CommonConstants.FULL_PERCENT) + .height($r('app.integer.button_height_small')) + .fontSize($r('sys.float.Subtitle_M')) + .backgroundColor($r('sys.color.brand')) .onClick(() => { - promptAction.showToast({ - message: $r('app.string.button_text') - }); + this.pageInfos.replacePath({ name: 'defaultList' }); }) } - .backgroundColor($r('app.color.start_window_background')) - .padding($r('app.float.card_padding')) - .borderRadius($r('app.float.corner_radius_default_m')) + .width(CommonConstants.FULL_PERCENT) + .backgroundColor($r('sys.color.comp_background_primary')) + .borderRadius($r('sys.float.corner_radius_level6')) + .padding($r('sys.float.padding_level12')) } build() { - Navigation() { + Navigation(this.pageInfos) { Column() { this.calendarMainView() } - .backgroundColor($r('app.color.color_sub_background')) - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .height(CommonConstants.ONE_HUNDRED_ELEVEN_PERCENT) - .padding($r('app.float.corner_radius_default_m')) + .width(CommonConstants.FULL_PERCENT) + .padding($r('sys.float.padding_level8')) } + .mode(this.curBp === 'lg' ? NavigationMode.Split : NavigationMode.Stack) .title($r('app.string.calendar_dialog')) .titleMode(NavigationTitleMode.Mini) + .navBarWidth($r('app.integer.nav_bar_width')) + .backgroundColor($r('sys.color.background_secondary')) + .padding({ + top: px2vp(this.topRectHeight), + bottom: px2vp(this.bottomRectHeight) + }) } } \ No newline at end of file diff --git a/entry/src/main/ets/pages/Details.ets b/entry/src/main/ets/pages/Details.ets index c832289fdaa6986aec6819ad1cfe126534004820..16cbd09d98536c075edf13c0bb4bd133a0fa6580 100644 --- a/entry/src/main/ets/pages/Details.ets +++ b/entry/src/main/ets/pages/Details.ets @@ -12,23 +12,54 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { router } from '@kit.ArkUI'; +import { CommonConstants } from '../common/constants/CommonConstants'; @Entry @Component struct Details { - @State message: string = '隐私详情'; + @StorageLink('topRectHeight') topRectHeight: number = 0; + @StorageLink('bottomRectHeight') bottomRectHeight: number = 0; + @StorageLink('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM; build() { - Row() { + Navigation() { Column() { - Button($r('app.string.back')).onClick(() => { - router.back(); - }) + Button($r('app.string.back')) + .fontSize($r('sys.float.Subtitle_M')) + .width(this.curBp === 'sm' ? CommonConstants.FULL_PERCENT : CommonConstants.WIDTH_MD_LG) + .height($r('app.integer.button_height_small')) + .margin({ + bottom: $r('sys.float.padding_level6') + }) + .backgroundColor($r('sys.color.brand')) + .onClick(() => { + router.back(); + }) } - .width('100%') + .width(CommonConstants.FULL_PERCENT) + .height(CommonConstants.FULL_PERCENT) + .justifyContent(FlexAlign.End) + .padding({ + right: this.curBp === 'sm' ? $r('sys.float.padding_level8') : $r('sys.float.padding_level0'), + left: this.curBp === 'sm' ? $r('sys.float.padding_level8') : $r('sys.float.padding_level0') + }) } - .alignItems(VerticalAlign.Center) - .height('100%') + .width(CommonConstants.FULL_PERCENT) + .height(CommonConstants.FULL_PERCENT) + .title($r('app.string.privacy_details')) + .titleMode(NavigationTitleMode.Mini) + .mode(NavigationMode.Stack) + .hideBackButton(true) + .backgroundColor($r('sys.color.background_secondary')) + .padding({ + top: px2vp(this.topRectHeight), + right: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8'), + bottom: px2vp(this.bottomRectHeight), + left: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8') + }) } } \ No newline at end of file diff --git a/entry/src/main/ets/pages/FullScreen.ets b/entry/src/main/ets/pages/FullScreen.ets index 37d1e37b505fa41c212467f9ff6eddcfde2c2e17..fd1928b36324bf869c9df55a26046315f26778c1 100644 --- a/entry/src/main/ets/pages/FullScreen.ets +++ b/entry/src/main/ets/pages/FullScreen.ets @@ -12,6 +12,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { curves } from '@kit.ArkUI'; import { CommonConstants } from '../common/constants/CommonConstants'; @@ -20,12 +21,20 @@ import { CommonConstants } from '../common/constants/CommonConstants'; struct FullScreen { private positionY: number = 0; @State translateY: string | number = '110%'; + @StorageLink('topRectHeight') topRectHeight: number = 0; + @StorageLink('bottomRectHeight') bottomRectHeight: number = 0; + @StorageLink('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM; build() { Stack() { Navigation() { Column() { Button($r('app.string.full_screen')) + .fontSize($r('sys.float.Subtitle_M')) + .width(this.curBp === 'sm' ? CommonConstants.FULL_PERCENT : CommonConstants.WIDTH_MD_LG) + .height($r('app.integer.button_height_small')) + .margin({ bottom: $r('sys.float.padding_level6') }) + .backgroundColor($r('sys.color.brand')) .onClick(() => { animateTo({ duration: CommonConstants.DURATION, @@ -34,120 +43,74 @@ struct FullScreen { this.translateY = '0%'; }); }) - .margin({ bottom: $r('app.float.card_padding') }) } - .height(CommonConstants.ONE_HUNDRED_PERCENT) + .height(CommonConstants.FULL_PERCENT) .justifyContent(FlexAlign.End) + .padding({ + right: this.curBp === 'sm' ? $r('sys.float.padding_level8') : $r('sys.float.padding_level0'), + left: this.curBp === 'sm' ? $r('sys.float.padding_level8') : $r('sys.float.padding_level0') + }) } + .width(CommonConstants.FULL_PERCENT) + .height(CommonConstants.FULL_PERCENT) .title($r('app.string.full_screen')) .titleMode(NavigationTitleMode.Mini) + .mode(NavigationMode.Stack) + .backgroundColor($r('sys.color.background_secondary')) + .padding({ + top: px2vp(this.topRectHeight), + right: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8'), + bottom: px2vp(this.bottomRectHeight), + left: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8') + }) RelativeContainer() { - Image($r('sys.media.ohos_ic_public_arrow_down')) - .fillColor($r('app.color.shadow_color')) - .width($r('app.float.check_button_height')) - .height($r('app.float.calendar_height')) - .alignRules({ - top: { anchor: "__container__", align: VerticalAlign.Top }, - left: { anchor: '__container__', align: HorizontalAlign.Start } - }) - .margin({ - top: $r('app.float.check_button_height'), - left: $r('app.float.corner_radius_default_m') - }) - .onClick(() => { - this.closeSelf(); - }) - .id('button') - - Row() { + Column() { + Image($r('app.media.background_guide')) + .width(this.curBp === 'sm' ? $r('app.integer.full_screen_icon_width') : + $r('app.integer.full_screen_icon_height')) + .height(this.curBp === 'sm' ? $r('app.integer.full_screen_icon_width') : + $r('app.integer.full_screen_icon_height')) + Row() { + Text($r('app.string.full_screen')) + .backgroundColor($r('sys.color.multi_color_aux_02')) + .fontColor($r('sys.color.font_on_primary')) + .fontSize($r('sys.float.Body_L')) + } + .height(21) } - .width($r('app.float.shadow_radius')) - .height($r('app.float.row_padding')) - .backgroundColor("#EAEDED") - .borderRadius($r('app.float.text_margin')) - .alignRules({ - top: { anchor: "__container__", align: VerticalAlign.Top }, - left: { anchor: "__container__", align: HorizontalAlign.Center } - }) - .margin({ top: $r('app.float.row_height') }) - .offset({ x: $r('app.float.offset_x') }) - .id('title') + .width(CommonConstants.FULL_PERCENT) + .height(CommonConstants.FULL_PERCENT) + .alignItems(HorizontalAlign.Center) + .justifyContent(FlexAlign.Center) - Row() { + Button({ type: ButtonType.Circle }) { + SymbolGlyph($r('sys.symbol.xmark')) + .fontColor([$r('sys.color.icon_primary')]) + .fontSize($r('sys.float.Subtitle_L')) } - .width($r('app.float.bind_sheet_height')) - .height($r('app.float.bind_sheet_height')) - .clipShape(new Circle({ width: CommonConstants.GRID_HEIGHT_M, height: CommonConstants.GRID_HEIGHT_M })) - .backgroundColor($r('app.color.shadow_color')) - .alignRules({ - top: { anchor: "__container__", align: VerticalAlign.Center }, - left: { anchor: "__container__", align: HorizontalAlign.Center }, + .backgroundColor($r('sys.color.comp_background_tertiary')) + .height($r('app.integer.button_height_small')) + .aspectRatio(1) + .margin({ + top: px2vp(this.topRectHeight), + right: this.curBp === 'sm' ? $r('sys.float.padding_level8') : + this.curBp === 'md' ? $r('sys.float.padding_level12') : $r('sys.float.padding_level16'), }) - .offset({ x: $r('app.float.offset_x_l'), y: $r('app.float.offset_y') }) - .id('main') - - Row() { - } - .width($r('app.float.width_l')) - .height($r('app.float.text_margin')) - .backgroundColor($r('app.color.shadow_color')) - .borderRadius($r('app.float.border_radius5')) .alignRules({ - top: { anchor: "main", align: VerticalAlign.Bottom }, - left: { anchor: '__container__', align: HorizontalAlign.Center } + top: { anchor: '__container__', align: VerticalAlign.Top }, + right: { anchor: '__container__', align: HorizontalAlign.End } }) - .margin({ top: $r('app.float.text_margin') }) - .offset({ x: $r('app.float.offset_x_m'), y: $r('app.float.offset_y_l') }) - .id('slider') - - Image($r('sys.media.ohos_ic_public_play')) - .fillColor($r('app.color.shadow_color')) - .width($r('app.float.row_height')) - .height($r('app.float.row_height')) - .alignRules({ - top: { anchor: "slider", align: VerticalAlign.Bottom }, - left: { anchor: '__container__', align: HorizontalAlign.Center } - }) - .offset({ x: $r('app.float.column_margin'), y: $r('app.float.offset_x') }) - .id('play') - - Image($r('sys.media.ohos_ic_public_play_next')) - .fillColor($r('app.color.shadow_color')) - .width($r('app.float.row_height')) - .height($r('app.float.row_height')) - .alignRules({ - top: { anchor: "slider", align: VerticalAlign.Bottom }, - right: { anchor: '__container__', align: HorizontalAlign.End } - }) - .offset({ x: $r('app.float.offset_20'), y: $r('app.float.offset_x') }) - .id('playNext') - - Image($r('sys.media.ohos_ic_public_play_last')) - .fillColor($r('app.color.shadow_color')) - .width($r('app.float.row_height')) - .height($r('app.float.row_height')) - .alignRules({ - top: { anchor: "slider", align: VerticalAlign.Bottom }, - left: { anchor: '__container__', align: HorizontalAlign.Start } - }) - .offset({ x: $r('app.float.train_image_size'), y: $r('app.float.offset_x') }) - .id('playPrev') - + .onClick(() => { + this.closeSelf(); + }) + .id('button') } - .linearGradient({ - colors: [ - [$r('app.color.color_linear1'), CommonConstants.ZERO_ZERO], - [$r('app.color.color_linear2'), CommonConstants.ZERO_Three], - [$r('app.color.color_linear3'), CommonConstants.ONE_ZERO] - ] - }) - .borderRadius({ - topLeft: $r('app.float.column_padding'), - topRight: $r('app.float.column_padding') - }) - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .height(CommonConstants.ONE_HUNDRED_ELEVEN_PERCENT) + .width(CommonConstants.FULL_PERCENT) + .height(CommonConstants.FULL_PERCENT) + .backgroundColor($r('sys.color.multi_color_aux_02')) .translate({ x: CommonConstants.ZERO, y: this.translateY }) .gesture( PanGesture({ direction: PanDirection.Vertical, distance: CommonConstants.JANUARY }) diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index c193aa19a8dfb6637c2e0f8e600e1261512de61a..ac8fb9f5c627287a584644da70dd8d8ebb1e2454 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -12,71 +12,106 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { router } from '@kit.ArkUI'; import { CommonConstants } from '../common/constants/CommonConstants'; +import { titleModel } from '../viewmodel/DateModel'; @Entry @Component struct Index { + @StorageLink('topRectHeight') topRectHeight: number = 0; + @StorageLink('bottomRectHeight') bottomRectHeight: number = 0; + @StorageLink('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM; + scroller: Scroller = new Scroller(); + titleList: Array = [ + new titleModel($r('app.string.scroll_option'), 'pages/ScrollOption'), + new titleModel($r('app.string.dialog_name'), 'pages/BindContentCoverDemo'), + new titleModel($r('app.string.bind_sheet_dialog'), 'pages/BindSheet'), + new titleModel($r('app.string.toast_dialog'), 'pages/Toast'), + new titleModel($r('app.string.toast_private_dialog'), 'pages/Privacy'), + new titleModel($r('app.string.full_screen'), 'pages/FullScreen'), + new titleModel($r('app.string.calendar_dialog'), 'pages/CustomCalendar'), + new titleModel($r('app.string.two_level_dialog'), 'pages/TwoLevelPageSheet') + ]; + @Builder - Options(name: Resource, url: string) { - Row() { - Column() { + Options(name: Resource, url: string, index: number, titleLength: number) { + Column() { + Row() { Text(name) - .fontSize($r('app.float.card_padding')) + .fontColor($r('sys.color.font_primary')) + .fontSize($r('sys.float.Subtitle_M')) .fontWeight(FontWeight.Medium) + SymbolGlyph($r('sys.symbol.chevron_right')) + .fontColor([$r('sys.color.icon_fourth')]) + .fontSize($r('sys.float.Title_M')) } - .alignItems(HorizontalAlign.Start) + .height($r('app.integer.text_icon_height')) + .width(CommonConstants.FULL_PERCENT) + .justifyContent(FlexAlign.SpaceBetween) - Blank() - Row() - .width($r('app.float.button_margin')) - .height($r('app.float.button_margin')) - .margin({ right: $r('app.float.column_padding') }) - .border({ - width: { top: $r('app.float.border'), right: $r('app.float.border') }, - color: $r('app.color.color_border') - }) - .rotate({ angle: CommonConstants.ANGLE }) + Divider() + .vertical(false) + .height(CommonConstants.FULL_PERCENT) + .color($r('sys.color.comp_divider')) + .visibility(this.curBp === 'sm' ? (index < titleLength - 1 ? Visibility.Visible : Visibility.None) : + (index < titleLength - 2 ? Visibility.Visible : Visibility.None)) } - .borderRadius($r('app.float.text_size_headline')) - .shadow({ - radius: $r('app.float.shadow_radius'), - color: $r('app.color.shadow_color') + .borderRadius({ + topLeft: index === 0 ? $r('sys.float.corner_radius_level6') : 0, + topRight: this.curBp === 'sm' ? (index === 0 ? $r('sys.float.corner_radius_level6') : 0) : + (index === 1 ? $r('sys.float.corner_radius_level6') : 0), + bottomLeft: this.curBp === 'sm' ? (index < titleLength - 1 ? 0 : $r('sys.float.corner_radius_level6')) : + (index === titleLength - 2 ? $r('sys.float.corner_radius_level6') : 0), + bottomRight: this.curBp === 'sm' ? (index < titleLength - 1 ? 0 : $r('sys.float.corner_radius_level6')) : + (index === titleLength - 1 ? $r('sys.float.corner_radius_level6') : 0) }) - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .height($r('app.float.row_height')) - .alignItems(VerticalAlign.Center) + .backgroundColor($r('sys.color.comp_background_primary')) + .width(CommonConstants.FULL_PERCENT) + .height($r('app.integer.button_height')) .padding({ - left: $r('app.float.column_padding'), - top: $r('app.float.column_padding'), - bottom: $r('app.float.column_padding') + top: this.curBp === 'sm' ? $r('sys.float.padding_level7') : $r('sys.float.padding_level9'), + right: $r('sys.float.padding_level6'), + bottom: this.curBp === 'sm' ? $r('sys.float.padding_level7') : $r('sys.float.padding_level9'), + left: $r('sys.float.padding_level6') }) - .backgroundColor(Color.White) .onClick(() => { - router.pushUrl({ - url - }) + router.pushUrl({ url }); }) } build() { - Column({ space: CommonConstants.SPACE }) { - Text($r('app.string.index_name')) - .fontSize($r('app.float.font_size4')) - .margin({ bottom: $r('app.float.text_margin') }) - this.Options($r('app.string.scroll_option'), 'pages/ScrollOption') - this.Options($r('app.string.dialog_name'), 'pages/BindContentCoverDemo') - this.Options($r('app.string.bind_sheet_dialog'), 'pages/BindSheet') - this.Options($r('app.string.toast_dialog'), 'pages/Toast') - this.Options($r('app.string.toast_private_dialog'), 'pages/Privacy') - this.Options($r('app.string.full_screen'), 'pages/FullScreen') - this.Options($r('app.string.calendar_dialog'), 'pages/CustomCalendar') - this.Options($r('app.string.two_level_dialog'), 'pages/TwoLevelPageSheet') + Navigation() { + Column() { + Grid() { + ForEach(this.titleList, (item: titleModel, index: number) => { + GridItem() { + this.Options(item.title, item.url, index, this.titleList.length) + } + }, (item: titleModel, index: number) => index + JSON.stringify(item)) + } + .padding($r('sys.float.padding_level8')) + .height(CommonConstants.FULL_PERCENT) + .width(CommonConstants.FULL_PERCENT) + .backgroundColor($r('sys.color.background_secondary')) + .columnsTemplate(this.curBp === 'sm' ? '1fr' : '1fr 1fr') + } + .borderRadius($r('sys.float.corner_radius_level6')) + .height(CommonConstants.FULL_PERCENT) + .width(CommonConstants.FULL_PERCENT) } - .padding($r('app.float.column_padding')) - .height(CommonConstants.ONE_HUNDRED_ELEVEN_PERCENT) - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .backgroundColor($r('app.color.color_background')) + .title($r('app.string.index_name')) + .titleMode(NavigationTitleMode.Full) + .mode(NavigationMode.Stack) + .backgroundColor($r('sys.color.background_secondary')) + .padding({ + top: px2vp(this.topRectHeight), + right: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8'), + bottom: px2vp(this.bottomRectHeight), + left: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8') + }) } -} \ No newline at end of file +} diff --git a/entry/src/main/ets/pages/Privacy.ets b/entry/src/main/ets/pages/Privacy.ets index 6bbb972466528f69bad2fd9b3c5de19b7033bb4b..de0f726d1d39db7873b1b9015a028cb768a0f5c4 100644 --- a/entry/src/main/ets/pages/Privacy.ets +++ b/entry/src/main/ets/pages/Privacy.ets @@ -12,15 +12,48 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { router } from '@kit.ArkUI'; import { CommonConstants } from '../common/constants/CommonConstants'; @Entry @Component struct Privacy { + @StorageLink('topRectHeight') topRectHeight: number = 0; + @StorageLink('bottomRectHeight') bottomRectHeight: number = 0; + @StorageLink('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM; @State visible: Visibility = Visibility.None; scroller: Scroller = new Scroller(); - private pointsArr: string[] = ['400vp', '600vp', '800vp']; + dialogController: CustomDialogController | null = new CustomDialogController({ + builder: PrivacyDialog({ + cancel: () => { + this.onCancel(); + }, + confirm: () => { + this.onAccept(); + }, + }), + alignment: DialogAlignment.Center, + onWillDismiss: (dismissDialogAction: DismissDialogAction) => { + console.info('reason=' + JSON.stringify(dismissDialogAction.reason)); + console.info('dialog onWillDismiss'); + if (dismissDialogAction.reason === DismissReason.PRESS_BACK) { + dismissDialogAction.dismiss(); + } + if (dismissDialogAction.reason === DismissReason.TOUCH_OUTSIDE) { + dismissDialogAction.dismiss(); + } + } + }) + controller?: CustomDialogController; + + onCancel() { + console.info('Callback when the first button is clicked'); + } + + onAccept() { + console.info('Callback when the second button is clicked'); + } build() { Navigation() { @@ -28,111 +61,121 @@ struct Privacy { Row() { Column() { Button($r('app.string.button_name1')) + .fontSize($r('sys.float.Subtitle_M')) + .width(this.curBp === 'sm' ? CommonConstants.FULL_PERCENT : CommonConstants.WIDTH_MD_LG) + .height($r('app.integer.button_height_small')) + .margin({ + bottom: $r('sys.float.padding_level6') + }) + .backgroundColor($r('sys.color.brand')) .onClick(() => { - if (this.visible === Visibility.Visible) { - this.visible = Visibility.None; - } else { - this.visible = Visibility.Visible; + if (this.dialogController !== null) { + this.dialogController.open(); } }) - .fontColor(Color.White) - .margin({ bottom: $r('app.float.text_size_headline') }) } - .width(CommonConstants.ONE_HUNDRED_PERCENT) + .width(CommonConstants.FULL_PERCENT) } .alignItems(VerticalAlign.Bottom) - .height(CommonConstants.ONE_HUNDRED_PERCENT) - Column() { - GridRow({ - columns: { - xs: CommonConstants.JANUARY, - sm: CommonConstants.FOUR, - md: CommonConstants.EIGHT, - lg: CommonConstants.TWELVES - }, - breakpoints: { - value: this.pointsArr, - reference: BreakpointsReference.WindowSize - } - }) { - GridCol({ - span: { - xs: CommonConstants.JANUARY, - sm: CommonConstants.GRID_COUNT, - md: CommonConstants.FOUR, - lg: CommonConstants.EIGHT - }, - offset: { - xs: CommonConstants.ZERO, - sm: CommonConstants.JANUARY, - md: CommonConstants.GRID_COUNT, - lg: CommonConstants.GRID_COUNT - } - }) { - Column() { - Text($r('app.string.button_name2')) - .height($r('app.float.button_height1')) - .fontSize($r('app.float.font_size3')) - .fontWeight(FontWeight.Bold) + .height(CommonConstants.FULL_PERCENT) + } + .padding({ + right: this.curBp === 'sm' ? $r('sys.float.padding_level8') : $r('sys.float.padding_level0'), + left: this.curBp === 'sm' ? $r('sys.float.padding_level8') : $r('sys.float.padding_level0') + }) + } + .title($r('app.string.toast_private_dialog')) + .titleMode(NavigationTitleMode.Mini) + .mode(NavigationMode.Stack) + .backgroundColor($r('sys.color.background_secondary')) + .padding({ + top: px2vp(this.topRectHeight), + right: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8'), + bottom: px2vp(this.bottomRectHeight), + left: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8') + }) + } +} - Scroll(this.scroller) { - Text() { - Span($r('app.string.word1')) - Span($r('app.string.toast_text')) - .fontColor(Color.Orange) - .fontWeight(FontWeight.Bold) - .decoration({ type: TextDecorationType.Underline, color: Color.Orange }) - .onClick(() => { - router.pushUrl({ - url: 'pages/Details' - }) - }) - Span($r('app.string.word2')) - } - .fontSize($r('app.float.font_size1')) - .padding({ - left: $r('app.float.column_padding'), - right: $r('app.float.column_padding') - }) - } - .scrollable(ScrollDirection.Vertical) - .height($r('app.float.dialog_height')) - Row({ space: CommonConstants.SPACE_ONE }) { - Button($r('app.string.disagree'), { stateEffect: false, buttonStyle: ButtonStyleMode.TEXTUAL}) - .onClick(() => { - if (this.visible === Visibility.Visible) { - this.visible = Visibility.None; - } else { - this.visible = Visibility.Visible; - } - }) - .width(CommonConstants.FORTY_PERCENT) - Button($r('app.string.agreed'), { type: ButtonType.Capsule }) - .onClick(() => { - if (this.visible === Visibility.Visible) { - this.visible = Visibility.None; - } else { - this.visible = Visibility.Visible; - } - }) - .width(CommonConstants.FORTY_PERCENT) - } - .alignItems(VerticalAlign.Top) - .margin({ top: $r('app.float.border_radius1') }) - .height($r('app.float.button_height1')) +@CustomDialog +struct PrivacyDialog { + @StorageLink('topRectHeight') topRectHeight: number = 0; + @StorageLink('bottomRectHeight') bottomRectHeight: number = 0; + @StorageLink('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM; + dialogController?: CustomDialogController; + cancel: () => void = () => { + } + confirm: () => void = () => { + } + + build() { + Column() { + Text($r('app.string.button_name2')) + .fontSize($r('sys.float.Subtitle_M')) + .fontWeight(FontWeight.Bold) + .padding({ + bottom: $r('sys.float.corner_radius_level8') + }) + Column() { + Text() { + Span($r('app.string.word1')) + Span($r('app.string.toast_text')) + .fontColor($r('sys.color.font_emphasize')) + .fontWeight(FontWeight.Bold) + .decoration({ + type: TextDecorationType.Underline, + color: $r('sys.color.font_emphasize') + }) + .onClick(() => { + if (this.dialogController != undefined) { + this.dialogController.close() } - .backgroundColor(Color.White) - .visibility(this.visible) - .borderRadius($r('app.float.border_radius3')) - .width($r('app.float.bind_sheet_height')) - } - } + router.pushUrl({ + url: 'pages/Details' + }) + }) + Span($r('app.string.word2')) } - .width(CommonConstants.NINETY_FIVE_PERCENT) + .fontSize($r('sys.float.Body_L')) } + + Row({ space: CommonConstants.SPACE_ONE }) { + Button($r('app.string.disagree'), { + stateEffect: true, + buttonStyle: ButtonStyleMode.TEXTUAL + }) + .width(CommonConstants.FORTY_PERCENT) + .onClick(() => { + if (this.dialogController != undefined) { + this.dialogController.close() + } + }) + + Divider() + .vertical(true) + .height($r('sys.float.Title_S')) + .color($r('sys.color.icon_fourth')) + + Button($r('app.string.agreed'), { + stateEffect: true, + buttonStyle: ButtonStyleMode.TEXTUAL + }) + .onClick(() => { + if (this.dialogController != undefined) { + this.dialogController.close() + } + }) + .width(CommonConstants.FORTY_PERCENT) + } + .justifyContent(FlexAlign.SpaceBetween) + .width(CommonConstants.FULL_PERCENT) + .margin({ top: $r('sys.float.corner_radius_level8') }) + .height($r('app.integer.button_height_small')) } - .backgroundColor($r('app.color.dialog_background')) - .title($r('app.string.toast_private_dialog')) - .titleMode(NavigationTitleMode.Mini) + .width(CommonConstants.FULL_PERCENT) + .backgroundColor($r('sys.color.comp_background_primary')) + .padding(this.curBp === 'sm' ? $r('sys.float.corner_radius_level8') : $r('sys.float.padding_level12')) } } \ No newline at end of file diff --git a/entry/src/main/ets/pages/ScrollOption.ets b/entry/src/main/ets/pages/ScrollOption.ets index 60bb92c5610fb237763fb41b58e2de211444b44e..3b418a64644bffde0035b0206adc72be3e20228f 100644 --- a/entry/src/main/ets/pages/ScrollOption.ets +++ b/entry/src/main/ets/pages/ScrollOption.ets @@ -12,11 +12,15 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { CommonConstants } from '../common/constants/CommonConstants'; @Entry @Component struct ScrollOption { + @StorageLink('topRectHeight') topRectHeight: number = 0; + @StorageLink('bottomRectHeight') bottomRectHeight: number = 0; + @StorageLink('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM; private selectTime: Date = new Date('2024-4-17T18:30:00'); @State select: number = 2; private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']; @@ -25,25 +29,35 @@ struct ScrollOption { Navigation() { Column() { Button($r('app.string.button_scroll_option1')) - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .margin({ bottom: $r('app.float.button_margin') }) + .width(this.curBp === 'sm' ? CommonConstants.FULL_PERCENT : CommonConstants.WIDTH_MD_LG) + .height($r('app.integer.button_height_small')) + .fontSize($r('sys.float.Subtitle_M')) + .backgroundColor($r('sys.color.brand')) + .margin({ + bottom: $r('sys.float.padding_level6') + }) .onClick(() => { TimePickerDialog.show({ selected: this.selectTime, - backgroundColor: $r('app.color.start_window_background'), + backgroundColor: $r('sys.color.background_primary'), onAccept: (value: TimePickerResult) => { this.selectTime.setHours(value.hour, value.minute); } }) }) Button($r('app.string.button_scroll_option2')) - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .margin({ bottom: $r('app.float.card_padding') }) + .width(this.curBp === 'sm' ? CommonConstants.FULL_PERCENT : CommonConstants.WIDTH_MD_LG) + .height($r('app.integer.button_height_small')) + .fontSize($r('sys.float.Subtitle_M')) + .backgroundColor($r('sys.color.brand')) + .margin({ + bottom: $r('sys.float.padding_level6') + }) .onClick(() => { TextPickerDialog.show({ range: this.fruits, selected: this.select, - backgroundColor: $r('app.color.start_window_background'), + backgroundColor: $r('sys.color.background_primary'), onAccept: (value: TextPickerResult) => { this.select = value.index as number; } @@ -51,14 +65,24 @@ struct ScrollOption { }) } .justifyContent(FlexAlign.End) - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .height(CommonConstants.ONE_HUNDRED_PERCENT) + .width(CommonConstants.FULL_PERCENT) + .height(CommonConstants.FULL_PERCENT) .padding({ - left: $r('app.float.card_padding'), - right: $r('app.float.card_padding') + right: this.curBp === 'sm' ? $r('sys.float.padding_level8') : $r('sys.float.padding_level0'), + left: this.curBp === 'sm' ? $r('sys.float.padding_level8') : $r('sys.float.padding_level0') }) } .title($r('app.string.scroll_option')) .titleMode(NavigationTitleMode.Mini) + .mode(NavigationMode.Stack) + .backgroundColor($r('sys.color.background_secondary')) + .padding({ + top: px2vp(this.topRectHeight), + right: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8'), + bottom: px2vp(this.bottomRectHeight), + left: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8') + }) } } \ No newline at end of file diff --git a/entry/src/main/ets/pages/Toast.ets b/entry/src/main/ets/pages/Toast.ets index 819f1e3f5447e2d1cc129aa3b6b30b5bfaa3b021..e4d2f1fa38f535cfc961c933236e5b9fccdf97a7 100644 --- a/entry/src/main/ets/pages/Toast.ets +++ b/entry/src/main/ets/pages/Toast.ets @@ -12,6 +12,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { CommonConstants } from '../common/constants/CommonConstants'; @CustomDialog @@ -21,19 +22,25 @@ struct CustomDialogExample { build() { Column() { Text($r('app.string.login')) - .fontSize($r('app.float.font_size1')) - .fontColor(Color.Black) + .fontSize($r('sys.float.Subtitle_M')) + .fontColor($r('sys.color.font_primary')) .height($r('app.float.toast_height')) } - .backgroundColor($r('app.color.start_window_background')) - .borderRadius($r('app.float.border_radius2')) - .width($r('app.float.toast_width')) + .padding({ + left: $r('sys.float.padding_level8'), + right: $r('sys.float.padding_level8') + }) + .backgroundColor($r('sys.color.comp_background_primary')) + .borderRadius($r('sys.float.corner_radius_level8')) } } @Entry @Component struct CustomDialogUser { + @StorageLink('topRectHeight') topRectHeight: number = 0; + @StorageLink('bottomRectHeight') bottomRectHeight: number = 0; + @StorageLink('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM; @State textValue: string = ''; @State inputValue: ResourceStr = $r('app.string.click'); dialogController: CustomDialogController | null = new CustomDialogController({ @@ -53,7 +60,7 @@ struct CustomDialogUser { alignment: DialogAlignment.Bottom, offset: { dx: CommonConstants.ZERO, dy: $r('app.float.offset_dy') }, customStyle: true, - cornerRadius: $r('app.float.corner_radius'), + cornerRadius: $r('sys.float.corner_radius_level12'), isModal: false }) @@ -65,6 +72,13 @@ struct CustomDialogUser { Navigation() { Column() { Button(this.inputValue) + .width(this.curBp === 'sm' ? CommonConstants.FULL_PERCENT : CommonConstants.WIDTH_MD_LG) + .height($r('app.integer.button_height_small')) + .fontSize($r('sys.float.Subtitle_M')) + .backgroundColor($r('sys.color.brand')) + .margin({ + bottom: $r('sys.float.padding_level6') + }) .onClick(() => { if (this.dialogController != null) { this.dialogController.open(); @@ -73,15 +87,26 @@ struct CustomDialogUser { }, 3000) } }) - .backgroundColor($r('app.color.color_warning')) - .margin({ bottom: $r('app.float.bottom_margin') }) } - .height(CommonConstants.ONE_HUNDRED_ELEVEN_PERCENT) - .width(CommonConstants.ONE_HUNDRED_PERCENT) + .height(CommonConstants.FULL_PERCENT) + .width(CommonConstants.FULL_PERCENT) .justifyContent(FlexAlign.End) - .backgroundColor($r('app.color.color_background')) + .padding({ + right: this.curBp === 'sm' ? $r('sys.float.padding_level8') : $r('sys.float.padding_level0'), + left: this.curBp === 'sm' ? $r('sys.float.padding_level8') : $r('sys.float.padding_level0') + }) } .title($r('app.string.toast_dialog')) .titleMode(NavigationTitleMode.Mini) + .mode(NavigationMode.Stack) + .backgroundColor($r('sys.color.background_secondary')) + .padding({ + top: px2vp(this.topRectHeight), + right: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8'), + bottom: px2vp(this.bottomRectHeight), + left: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8') + }) } } \ No newline at end of file diff --git a/entry/src/main/ets/pages/TwoLevelPageSheet.ets b/entry/src/main/ets/pages/TwoLevelPageSheet.ets index 8248ca56861674d00e7f63ca8313eb6eda6228e8..af113b27ae3cede7ec14a72e41948e3df431e2f8 100644 --- a/entry/src/main/ets/pages/TwoLevelPageSheet.ets +++ b/entry/src/main/ets/pages/TwoLevelPageSheet.ets @@ -18,74 +18,96 @@ import { CommonConstants } from '../common/constants/CommonConstants'; @Entry @Component struct TwoLevelPageSheet { + @StorageLink('topRectHeight') topRectHeight: number = 0; + @StorageLink('bottomRectHeight') bottomRectHeight: number = 0; + @StorageLink('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM; @State isShow: boolean = false @State isShow2: boolean = false - @State sheetHeight: string = '60%'; + @State sheetHeight: string = '50%'; @State sheetHeight2: number = 200; @State showDragBar: boolean = true; @State showDragBar2: boolean = true; @Builder - myBuilder() { + bindSheetBuilder() { Column() { - TextInput() - .margin({ - top: $r('app.float.margin_top'), - left: $r('app.float.corner_radius'), - right: $r('app.float.corner_radius') - }) - Row({ space: CommonConstants.SPACE_ONE }) { - Button($r('app.string.button_two')) - .fontSize($r('app.float.font_size')) - .onClick(() => { - this.isShow = false; - }) + Row() { + TextInput({ placeholder: $r('app.string.please_enter') }) + } + .width(CommonConstants.FULL_PERCENT) + + Column() { Button($r('app.string.button_three')) - .fontSize($r('app.float.font_size')) + .fontSize($r('sys.float.Subtitle_M')) + .width(this.curBp === 'sm' ? CommonConstants.FULL_PERCENT : CommonConstants.WIDTH_MD_LG) + .height($r('app.integer.button_height_small')) + .margin({ bottom: $r('sys.float.padding_level6') }) + .backgroundColor($r('sys.color.brand')) .onClick(() => { this.isShow2 = true; }) - .bindSheet($$this.isShow2, this.myBuilder2(), - { - height: this.sheetHeight2, - dragBar: this.showDragBar2, - backgroundColor: $r('app.color.color_background'), - maskColor: Color.Black, - }) + .bindSheet(this.isShow2, this.bindSheetBuilder2(), { + height: this.sheetHeight2, + dragBar: this.showDragBar2, + preferType: SheetType.CENTER, + backgroundColor: $r('sys.color.comp_background_primary'), + onWillDisappear: () => { + this.isShow2 = false; + } + }) + + Button($r('app.string.button_two')) + .fontSize($r('sys.float.Subtitle_M')) + .width(this.curBp === 'sm' ? CommonConstants.FULL_PERCENT : CommonConstants.WIDTH_MD_LG) + .height($r('app.integer.button_height_small')) + .backgroundColor($r('sys.color.brand')) + .onClick(() => { + this.isShow = false; + }) } - .margin({ bottom: $r('app.float.builder_height') }) } .justifyContent(FlexAlign.SpaceBetween) - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .height(CommonConstants.ONE_HUNDRED_PERCENT) + .width(CommonConstants.FULL_PERCENT) + .height(CommonConstants.FULL_PERCENT) + .padding({ + top: $r('app.integer.padding_max'), + right: $r('sys.float.padding_level8'), + bottom: px2vp(this.bottomRectHeight), + left: $r('sys.float.padding_level8') + }) } @Builder - myBuilder2() { + bindSheetBuilder2() { Column() { - Button($r('app.string.button_four')) - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .margin({ bottom: $r('app.float.button_margin') }) - .fontSize($r('app.float.font_size')) - .onClick(() => { - this.isShow2 = false; - }) - Button($r('app.string.button_five')) - .margin({ bottom: $r('app.float.builder_height') }) - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .fontSize($r('app.float.font_size')) - .onClick(() => { - this.isShow = false; - this.isShow2 = false; - }) + Button($r('app.string.button_four')) + .fontSize($r('sys.float.Subtitle_M')) + .width(this.curBp === 'sm' ? CommonConstants.FULL_PERCENT : CommonConstants.WIDTH_MD_LG) + .height($r('app.integer.button_height_small')) + .margin({ bottom: $r('sys.float.padding_level6') }) + .backgroundColor($r('sys.color.brand')) + .onClick(() => { + this.isShow2 = false; + }) + Button($r('app.string.button_five')) + .fontSize($r('sys.float.Subtitle_M')) + .width(this.curBp === 'sm' ? CommonConstants.FULL_PERCENT : CommonConstants.WIDTH_MD_LG) + .height($r('app.integer.button_height_small')) + .backgroundColor($r('sys.color.brand')) + .onClick(() => { + this.isShow = false; + this.isShow2 = false; + }) } + .justifyContent(FlexAlign.End) + .width(CommonConstants.FULL_PERCENT) + .height(CommonConstants.FULL_PERCENT) .padding({ - left: $r('app.float.card_padding'), - right: $r('app.float.card_padding') + top: $r('app.integer.padding_max'), + right: this.curBp === 'sm' ? $r('sys.float.padding_level8') : $r('sys.float.padding_level0'), + bottom: px2vp(this.bottomRectHeight), + left: this.curBp === 'sm' ? $r('sys.float.padding_level8') : $r('sys.float.padding_level0') }) - .justifyContent(FlexAlign.End) - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .height(CommonConstants.ONE_HUNDRED_PERCENT) } build() { @@ -93,22 +115,42 @@ struct TwoLevelPageSheet { Column() { Button($r('app.string.button_one')) .onClick(() => { - this.isShow = true + this.isShow = true; }) - .margin({ bottom: $r('app.float.card_padding') }) - .fontSize($r('app.float.font_size')) - .bindSheet($$this.isShow, this.myBuilder(), { + .fontSize($r('sys.float.Subtitle_M')) + .width(this.curBp === 'sm' ? CommonConstants.FULL_PERCENT : CommonConstants.WIDTH_MD_LG) + .height($r('app.integer.button_height_small')) + .margin({ bottom: $r('sys.float.padding_level6') }) + .backgroundColor($r('sys.color.brand')) + .bindSheet(this.isShow, this.bindSheetBuilder(), { height: this.sheetHeight, dragBar: this.showDragBar, - backgroundColor: $r('app.color.dialog_background'), - maskColor: Color.Black, + preferType: SheetType.CENTER, + backgroundColor: $r('sys.color.comp_background_primary'), + onWillDisappear: () => { + this.isShow = false; + } }) } + .width(CommonConstants.FULL_PERCENT) + .height(CommonConstants.FULL_PERCENT) .justifyContent(FlexAlign.End) - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .height(CommonConstants.ONE_HUNDRED_PERCENT) + .padding({ + right: this.curBp === 'sm' ? $r('sys.float.padding_level8') : $r('sys.float.padding_level0'), + left: this.curBp === 'sm' ? $r('sys.float.padding_level8') : $r('sys.float.padding_level0') + }) } .title($r('app.string.two_level_dialog')) .titleMode(NavigationTitleMode.Mini) + .mode(NavigationMode.Stack) + .backgroundColor($r('sys.color.background_secondary')) + .padding({ + top: px2vp(this.topRectHeight), + right: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8'), + bottom: px2vp(this.bottomRectHeight), + left: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8') + }) } } \ No newline at end of file diff --git a/entry/src/main/ets/view/AddPassengers.ets b/entry/src/main/ets/view/AddPassengers.ets new file mode 100644 index 0000000000000000000000000000000000000000..ada1756a58068e50810f4016bbd7cf13fa1d4408 --- /dev/null +++ b/entry/src/main/ets/view/AddPassengers.ets @@ -0,0 +1,172 @@ +/* + * Copyright (c) 2024 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { PersonList, personList } from '../viewmodel/BindContentModel'; +import { CommonConstants } from '../common/constants/CommonConstants'; + +@Builder +export function AddPassengersBuilder() { + AddPassengers() +} + +@Component +export struct AddPassengers { + @StorageLink('topRectHeight') topRectHeight: number = 0; + @StorageLink('bottomRectHeight') bottomRectHeight: number = 0; + @StorageLink('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM; + private personList: Array = personList; + + getResourceString(resource: Resource): string { + let resourceString: string = ''; + try { + resourceString = getContext(this).resourceManager.getStringSync(resource.id); + } catch (error) { + hilog.error(0x0000, '[getResourceString]', `getResourceString err: ${JSON.stringify(error)}`); + } + return resourceString; + } + + @Builder + MyBuilder() { + Column() { + Column() { + Row() { + Text($r('app.string.passenger')) + .fontSize($r('sys.float.Subtitle_L')) + .fontColor($r('sys.color.font_primary')) + .width(CommonConstants.FULL_PERCENT) + .textAlign(TextAlign.Start) + .fontWeight(FontWeight.Bold) + .padding({ top: $r('sys.float.padding_level5') }) + } + .height($r('app.integer.passenger_text_height')) + .margin({ + top: $r('sys.float.padding_level4'), + bottom: $r('sys.float.padding_level4') + }) + + Row() { + Button({ type: ButtonType.Circle }) { + SymbolGlyph($r('sys.symbol.plus')) + .fontColor([$r('sys.color.comp_background_primary')]) + .fontSize($r('sys.float.Subtitle_L')) + } + .backgroundColor($r('sys.color.brand')) + .height($r('sys.float.Title_M')) + .aspectRatio(1) + .margin({ right: $r('sys.float.padding_level4') }) + + Text($r('app.string.add_person')) + .fontColor($r('sys.color.brand')) + .fontSize($r('sys.float.Body_L')) + .fontWeight(FontWeight.Medium) + } + .width(CommonConstants.FULL_PERCENT) + .height($r('app.integer.button_height')) + .alignItems(VerticalAlign.Center) + .justifyContent(FlexAlign.Center) + .backgroundColor($r('sys.color.comp_background_primary')) + .borderRadius($r('sys.float.corner_radius_level6')) + .margin({ + top: $r('sys.float.padding_level4'), + bottom: $r('sys.float.padding_level6') + }) + + Column() { + ForEach(this.personList, (item: PersonList, index: number) => { + Row() { + Row() { + SymbolGlyph($r('sys.symbol.square_and_pencil')) + .fontColor([$r('sys.color.icon_tertiary')]) + .fontSize($r('sys.float.Subtitle_M')) + .margin({ + right: $r('sys.float.padding_level8') + }) + Column() { + Text(item.name) + .fontColor($r('sys.color.font_primary')) + .fontSize($r('sys.float.Subtitle_M')) + .fontWeight(FontWeight.Medium) + Text(item.cardNum) + .fontColor($r('sys.color.font_tertiary')) + .fontSize($r('sys.float.Subtitle_S')) + .fontWeight(FontWeight.Regular) + .margin($r('sys.float.padding_level1')) + } + .alignItems(HorizontalAlign.Start) + } + + if (index % 2 === 0) { + Checkbox() + .select(true) + } else { + Checkbox() + .select(false) + } + } + .borderRadius({ + topLeft: index === 0 ? $r('sys.float.corner_radius_level6') : 0, + topRight: index === 0 ? $r('sys.float.corner_radius_level6') : 0, + bottomLeft: index === 3 ? $r('sys.float.corner_radius_level6') : 0, + bottomRight: index === 3 ? $r('sys.float.corner_radius_level6') : 0 + }) + .backgroundColor($r('sys.color.comp_background_primary')) + .height(64) + .width(CommonConstants.FULL_PERCENT) + .justifyContent(FlexAlign.SpaceBetween) + .padding({ + left: $r('sys.float.padding_level8'), + right: $r('sys.float.padding_level8') + }) + }, (item: PersonList, index: number) => index + JSON.stringify(item)) + } + .height($r('app.integer.button_height')) + .width(CommonConstants.FULL_PERCENT) + .borderRadius($r('sys.float.corner_radius_level6')) + .backgroundColor($r('sys.color.comp_background_primary')) + } + + Button($r('app.string.confirmed')) + .width(this.curBp === 'sm' ? '100%' : CommonConstants.WIDTH_MD_LG) + .backgroundColor($r('sys.color.brand')) + .fontSize($r('sys.float.Body_L')) + .height($r('app.integer.button_height_small')) + } + .justifyContent(FlexAlign.SpaceBetween) + .height(CommonConstants.FULL_PERCENT) + .width(CommonConstants.FULL_PERCENT) + .backgroundColor($r('sys.color.background_secondary')) + .padding({ + right: $r('sys.float.padding_level8'), + left: $r('sys.float.padding_level8'), + }) + } + + build() { + NavDestination() { + this.MyBuilder(); + } + .title(this.getResourceString($r('app.string.select_person'))) + .backgroundColor($r('sys.color.background_secondary')) + .padding({ + right: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level0') : $r('sys.float.padding_level2'), + bottom: px2vp(this.bottomRectHeight), + left: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level0') : $r('sys.float.padding_level8') + }) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/view/CustomCalendarPickerDialog.ets b/entry/src/main/ets/view/CustomCalendarPickerDialog.ets index a9623f053dbe4bad8ff08145c2480a4ed5fd3b97..91d6416f5980e1d7731bd5daa11b5a2f5d0d47a5 100644 --- a/entry/src/main/ets/view/CustomCalendarPickerDialog.ets +++ b/entry/src/main/ets/view/CustomCalendarPickerDialog.ets @@ -12,14 +12,21 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { getMonthDate } from '../viewmodel/GetDate'; + +import { ConfigurationConstant } from '@kit.AbilityKit'; import { MonthDataSource, Month } from '../viewmodel/MonthDataSource'; +import { CommonConstants } from '../common/constants/CommonConstants'; import { DataManager } from '../viewmodel/DataManager'; +import { getMonthDate } from '../viewmodel/GetDate'; import { DateModel } from '../viewmodel/DateModel'; -import { CommonConstants } from '../common/constants/CommonConstants'; @CustomDialog export struct CustomCalendarPickerDialog { + @StorageProp('systemColorMode') + currentMode: ConfigurationConstant.ColorMode = ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT; + @StorageLink('topRectHeight') topRectHeight: number = 0; + @StorageLink('bottomRectHeight') bottomRectHeight: number = 0; + @StorageLink('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM; @State contentData: MonthDataSource = new MonthDataSource(); @State nextMonth: number = 1; @State nextYear: number = 1; @@ -31,8 +38,11 @@ export struct CustomCalendarPickerDialog { @Link currentYear: number; @StorageLink('selectedDate') dateModel: DateModel = new DateModel(0, 0, 0, 0); controller: CustomDialogController; - cancel: () => void = () => {}; - private week: ResourceStr[] = [$r('app.string.ri'), $r('app.string.yi'), $r('app.string.er'), $r('app.string.san'), $r('app.string.si'), $r('app.string.wu'), $r('app.string.liu')]; + cancel: () => void = () => { + }; + private week: ResourceStr[] = + [$r('app.string.ri'), $r('app.string.yi'), $r('app.string.er'), $r('app.string.san'), $r('app.string.si'), + $r('app.string.wu'), $r('app.string.liu')]; getResourceString(resource: Resource): string { let resourceString: string = ''; @@ -55,11 +65,6 @@ export struct CustomCalendarPickerDialog { month: `${this.currentYear}${this.getResourceString($r('app.string.year'))} ${this.currentMonth}${this.getResourceString($r('app.string.month'))}`, num: this.currentMonth, days: this.currentMonthDay - }, - { - month: `${this.nextYear}${this.getResourceString($r('app.string.year'))} ${this.nextMonth}${this.getResourceString($r('app.string.month'))}`, - num: this.nextMonth, - days: this.nextMonthDay } ] this.contentData.pushData(months); @@ -68,58 +73,113 @@ export struct CustomCalendarPickerDialog { @Builder itemHead(text: string) { - Text(text) - .backgroundColor($r('app.color.color_sub_background')) - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .height($r('app.float.text_height')) - .textAlign(TextAlign.Center) + Row() { + SymbolGlyph($r('sys.symbol.chevron_left')) + .fontColor([$r('sys.color.font_primary')]) + .fontSize($r('sys.float.Title_M')) + Text(text) + .fontSize($r('sys.float.Subtitle_L')) + .fontColor($r('sys.color.font_primary')) + .fontWeight(FontWeight.Bold) + .height($r('app.float.text_height')) + .textAlign(TextAlign.Center) + SymbolGlyph($r('sys.symbol.chevron_right')) + .fontColor([$r('sys.color.font_primary')]) + .fontSize($r('sys.float.Title_M')) + } + .justifyContent(FlexAlign.SpaceBetween) + .width(CommonConstants.FULL_PERCENT) + .margin({ + bottom: $r('sys.float.padding_level16') + }) + .padding({ + left: $r('sys.float.padding_level12'), + right: $r('sys.float.padding_level12') + }) + } + + @Builder + itemWeek() { + List() { + ForEach(this.week, (weekInformation: string) => { + ListItem() { + Text(weekInformation) + .textAlign(TextAlign.Center) + .width(CommonConstants.FULL_PERCENT) + .fontSize($r('sys.float.Subtitle_M')) + .fontColor(weekInformation === CommonConstants.SUNDAY || weekInformation === + CommonConstants.SATURDAY ? $r('sys.color.font_emphasize') : $r('sys.color.font_primary')) + } + .width($r('app.string.week_width')) + }) + } + .width(CommonConstants.FULL_PERCENT) + .height($r('sys.float.Subtitle_M')) + .listDirection(Axis.Horizontal) + .scrollBar(BarState.Off) } build() { Column({ space: CommonConstants.ELEMENTS_MARGIN }) { - Text($r('app.string.departure_date')) - .fontSize($r('app.float.text_size_headline')) - List() { - ForEach(this.week, (weekInformation: string) => { - ListItem() { - Text(weekInformation) - .textAlign(TextAlign.Center) - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .height($r('app.float.text_size_headline')) - .fontColor(weekInformation === CommonConstants.SUNDAY || weekInformation === - CommonConstants.SATURDAY ? $r('app.color.color_warning') : $r('app.color.color_text_primary')) - } - .width($r('app.string.week_width')) - }) + Row() { + Text($r('app.string.departure_date')) + .fontSize($r('sys.float.Subtitle_L')) + .fontColor($r('sys.color.font_primary')) + .fontWeight(FontWeight.Bold) + + Button({ type: ButtonType.Circle }) { + SymbolGlyph($r('sys.symbol.xmark')) + .fontColor([$r('sys.color.icon_primary')]) + .fontSize($r('sys.float.Subtitle_L')) + .onClick(() => { + this.controller.close(); + }) + } + .backgroundColor($r('sys.color.comp_background_tertiary')) + .height($r('app.integer.icon_size')) + .aspectRatio(1) } - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .height($r('app.float.text_size_headline')) - .listDirection(Axis.Horizontal) - .scrollBar(BarState.Off) + .height($r('app.integer.icon_size')) + .width(CommonConstants.FULL_PERCENT) + .justifyContent(FlexAlign.SpaceBetween) + .padding({ + left: $r('sys.float.padding_level12'), + right: $r('sys.float.padding_level12') + }) List({ initialIndex: this.initialIndex }) { LazyForEach(this.contentData, (monthItem: Month) => { - ListItemGroup({ header: this.itemHead(monthItem.month) }) { + ListItemGroup() { + ListItem() { + Column() { + this.itemHead(monthItem.month) + this.itemWeek() + } + } + .width(CommonConstants.FULL_PERCENT) + ListItem() { Grid() { ForEach(monthItem.days, (day: number) => { GridItem() { if (day === this.dateModel.day && monthItem.num === this.dateModel.month) { Text(day.toString()) - .fontSize($r('app.float.text_size_headline')) - .fontColor($r('app.color.start_window_background')) + .fontSize($r('sys.float.Subtitle_M')) + .fontColor($r('sys.color.background_primary')) } else { Text(day.toString()) - .fontSize($r('app.float.text_size_headline')) + .fontSize($r('sys.float.Subtitle_M')) .fontColor(day < this.currentDay && monthItem.num === - this.currentMonth ? $r('app.color.color_text_secondary') : $r('app.color.color_text_primary')) + this.currentMonth ? $r('sys.color.font_tertiary') : $r('sys.color.font_primary')) } } .height($r('app.float.calendar_height')) .width($r('app.float.calendar_height')) - .borderRadius($r('app.float.corner_radius_default_l')) + .borderRadius($r('sys.float.corner_radius_level2')) .backgroundColor(day === this.dateModel.day && monthItem.num === - this.dateModel.month ? $r('app.color.color_warning') : $r('app.color.start_window_background')) + this.dateModel.month ? $r('sys.color.font_emphasize') : + (this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT ? + $r('sys.color.background_primary') : $r('sys.color.background_fourth'))) .opacity(day === CommonConstants.ZERO ? CommonConstants.ZERO : CommonConstants.JANUARY) .onClick(() => { if (day >= this.currentDay || monthItem.num > this.currentMonth) { @@ -127,36 +187,37 @@ export struct CustomCalendarPickerDialog { this.dateModel.day = day; this.dateModel.week = weekIndex; this.dateModel.month = monthItem.num; - DataManager.setDate(getContext(this), this.dateModel, () => {}); + DataManager.setDate(getContext(this), this.dateModel, () => { + }); this.controller.close(); } }) }, (day: number) => JSON.stringify(day)) } - .backgroundColor($r('app.color.start_window_background')) .columnsTemplate(CommonConstants.GRID_SEVEN) .rowsTemplate(monthItem.days.length > CommonConstants.MONTH_NUMBER ? - CommonConstants.GRID_SIX : CommonConstants.GRID_FIVE) + CommonConstants.GRID_SIX : CommonConstants.GRID_FIVE) .height(monthItem.days.length > CommonConstants.MONTH_NUMBER ? CommonConstants.GRID_HEIGHT_L : CommonConstants.GRID_HEIGHT_M) } } }, (monthItem: Month) => JSON.stringify(monthItem)) } - .height($r('app.string.calendar_height')) - .width(CommonConstants.ONE_HUNDRED_PERCENT) + .width(CommonConstants.FULL_PERCENT) .edgeEffect(EdgeEffect.None) .scrollBar(BarState.Off) .sticky(StickyStyle.Header) + .padding({ + right: $r('sys.float.padding_level4'), + left: $r('sys.float.padding_level4') + }) } - .padding({ top: CommonConstants.ELEMENTS_MARGIN }) - .width(CommonConstants.ONE_HUNDRED_PERCENT) - .height(CommonConstants.EIGHTY_FIVE_PERCENT) - .borderRadius({ - topLeft: $r('app.float.corner_radius_default_l'), - topRight: $r('app.float.corner_radius_default_l') - }) - .backgroundColor($r('app.color.start_window_background')) + .padding({ top: $r('sys.float.padding_level12') }) + .width(this.curBp === 'sm' ? '100%' : $r('app.integer.bind_sheet_width')) + .height($r('app.integer.bind_sheet_width')) + .borderRadius($r('sys.float.corner_radius_level12')) + .backgroundColor(this.currentMode === ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT ? + $r('sys.color.background_primary') : $r('sys.color.background_fourth')) .alignItems(HorizontalAlign.Center) } } \ No newline at end of file diff --git a/entry/src/main/ets/view/DefaultList.ets b/entry/src/main/ets/view/DefaultList.ets new file mode 100644 index 0000000000000000000000000000000000000000..dd9ad9b2e49b0c744df98f491cb7c88d043e5984 --- /dev/null +++ b/entry/src/main/ets/view/DefaultList.ets @@ -0,0 +1,77 @@ +/* + * Copyright (c) 2024 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { CommonConstants } from '../common/constants/CommonConstants'; + +@Builder +export function DefaultListBuilder() { + DefaultList() +} + +@Component +export struct DefaultList { + @StorageLink('topRectHeight') topRectHeight: number = 0; + @StorageLink('bottomRectHeight') bottomRectHeight: number = 0; + @StorageLink('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM; + private defaultListData: Array = [1, 2, 3, 4, 5]; + + getResourceString(resource: Resource): string { + let resourceString: string = ''; + try { + resourceString = getContext(this).resourceManager.getStringSync(resource.id); + } catch (error) { + hilog.error(0x0000, '[getResourceString]', `getResourceString err: ${JSON.stringify(error)}`); + } + return resourceString; + } + + @Builder + defaultListPage() { + Row() { + } + .backgroundColor($r('sys.color.comp_background_primary')) + .height($r('app.integer.blank_height')) + .width(CommonConstants.FULL_PERCENT) + .borderRadius($r('sys.float.corner_radius_level6')) + .margin({ + top: $r('sys.float.padding_level8'), + right: $r('sys.float.padding_level8'), + left: $r('sys.float.padding_level8') + }) + } + + build() { + NavDestination() { + Column() { + ForEach(this.defaultListData, () => { + this.defaultListPage() + }, (item: number, index: number) => index + JSON.stringify(item)) + } + .margin({ + right: $r('sys.float.padding_level8'), + left: $r('sys.float.padding_level8') + }) + } + .title(this.getResourceString($r('app.string.ticket_list'))) + .backgroundColor($r('sys.color.background_secondary')) + .padding({ + right: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level0') : $r('sys.float.padding_level2'), + left: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level0') : $r('sys.float.padding_level8') + }) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/viewmodel/DateModel.ets b/entry/src/main/ets/viewmodel/DateModel.ets index 2ba8eea18f7d9520fc56a6c0e7aeb9a15484763e..0b51bd3142cd00042c57cacb6e9cfd0692315d5e 100644 --- a/entry/src/main/ets/viewmodel/DateModel.ets +++ b/entry/src/main/ets/viewmodel/DateModel.ets @@ -25,4 +25,14 @@ export class DateModel { this.month = month; this.year = year; } +} + +export class titleModel { + title: Resource; + url: string; + + constructor(title: Resource, url: string) { + this.title = title; + this.url = url; + } } \ No newline at end of file diff --git a/entry/src/main/module.json5 b/entry/src/main/module.json5 index de78b5cae3b2ba99788048311e5d0cd34d075039..087bc8f6f42d360bb9a777a7c41f13d714f9271b 100644 --- a/entry/src/main/module.json5 +++ b/entry/src/main/module.json5 @@ -9,6 +9,7 @@ "tablet", "2in1" ], + "routerMap": "$profile:router_map", "deliveryWithInstall": true, "installationFree": false, "pages": "$profile:main_pages", diff --git a/entry/src/main/resources/base/element/float.json b/entry/src/main/resources/base/element/float.json index 9705ce1e99cd4165ee286f4c3ab5c1709d4c5c99..f432c399e7ae0b66ff69a4db62b1618ead588fb0 100644 --- a/entry/src/main/resources/base/element/float.json +++ b/entry/src/main/resources/base/element/float.json @@ -118,7 +118,7 @@ }, { "name": "calendar_height", - "value": "50vp" + "value": "32vp" }, { "name": "blank_height", @@ -183,6 +183,14 @@ { "name": "offset_20", "value": "-20vp" + }, + { + "name": "station_card_height", + "value": "97vp" + }, + { + "name": "nav_bar_width", + "value": "97vp" } ] } \ No newline at end of file diff --git a/entry/src/main/resources/base/element/integer.json b/entry/src/main/resources/base/element/integer.json new file mode 100644 index 0000000000000000000000000000000000000000..f3aca9186e93aa06a2ba5aa2583455f5446e74dc --- /dev/null +++ b/entry/src/main/resources/base/element/integer.json @@ -0,0 +1,48 @@ +{ + "integer": [ + { + "name": "nav_bar_width", + "value": 432 + }, + { + "name": "button_height", + "value": 56 + }, + { + "name": "bind_sheet_width", + "value": 480 + }, + { + "name": "button_height_small", + "value": 40 + }, + { + "name": "full_screen_icon_width", + "value": 248 + }, + { + "name": "full_screen_icon_height", + "value": 300 + }, + { + "name": "text_icon_height", + "value": 22 + }, + { + "name": "padding_max", + "value": 80 + }, + { + "name": "passenger_text_height", + "value": 24 + }, + { + "name": "icon_size", + "value": 32 + }, + { + "name": "blank_height", + "value": 60 + } + ] +} \ No newline at end of file diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json index 35a38aacd8c020f58c6eea8e5d11fff45362e84d..2503107989f5a7690eace96df772732571fba9f9 100644 --- a/entry/src/main/resources/base/element/string.json +++ b/entry/src/main/resources/base/element/string.json @@ -21,8 +21,8 @@ "value": "上海" }, { - "name": "check_ticket", - "value": "检查车票" + "name": "ticket_inquiry", + "value": "查询车票" }, { "name": "departure_date", @@ -62,7 +62,7 @@ }, { "name": "add_person", - "value": "+ 添加乘车人" + "value": "添加乘车人" }, { "name": "edit", @@ -122,11 +122,11 @@ }, { "name": "login", - "value": "登陆成功 !" + "value": "登录成功 !" }, { "name": "toast_dialog", - "value": "toast弹窗" + "value": "Toast弹窗" }, { "name": "button_name1", @@ -307,6 +307,26 @@ { "name": "saturday", "value": "星期六" + }, + { + "name": "privacy_details", + "value": "隐私详情" + }, + { + "name": "please_enter", + "value": "请输入......" + }, + { + "name": "passenger", + "value": "乘车人" + }, + { + "name": "select", + "value": "选择" + }, + { + "name": "ticket_list", + "value": "车票列表" } ] } \ No newline at end of file diff --git a/entry/src/main/resources/base/media/background_guide.png b/entry/src/main/resources/base/media/background_guide.png new file mode 100644 index 0000000000000000000000000000000000000000..a3fe510409f971e620516aeb5e0e9936d809db0e Binary files /dev/null and b/entry/src/main/resources/base/media/background_guide.png differ diff --git a/entry/src/main/resources/base/profile/router_map.json b/entry/src/main/resources/base/profile/router_map.json new file mode 100644 index 0000000000000000000000000000000000000000..38d899d43174e867946f341ec808fdb333c3fd52 --- /dev/null +++ b/entry/src/main/resources/base/profile/router_map.json @@ -0,0 +1,14 @@ +{ + "routerMap": [ + { + "name": "addPassengers", + "pageSourceFile": "src/main/ets/view/AddPassengers.ets", + "buildFunction": "AddPassengersBuilder" + }, + { + "name": "defaultList", + "pageSourceFile": "src/main/ets/view/DefaultList.ets", + "buildFunction": "DefaultListBuilder" + } + ] +} \ No newline at end of file diff --git a/entry/src/main/resources/en_US/element/string.json b/entry/src/main/resources/en_US/element/string.json index af78288a7a9f6af5781c4e22da463dc879bdc4e1..d943629bd5f216116679d158586e533cdbb1a960 100644 --- a/entry/src/main/resources/en_US/element/string.json +++ b/entry/src/main/resources/en_US/element/string.json @@ -21,8 +21,8 @@ "value": "shanghai" }, { - "name": "check_ticket", - "value": "Check ticket" + "name": "ticket_inquiry", + "value": "Ticket Inquiry" }, { "name": "departure_date", @@ -62,7 +62,7 @@ }, { "name": "add_person", - "value": "+ add passengers" + "value": "Add passengers" }, { "name": "edit", @@ -287,6 +287,26 @@ { "name": "saturday", "value": "Saturday" + }, + { + "name": "privacy_details", + "value": "Privacy Details" + }, + { + "name": "please_enter", + "value": "Please enter......" + }, + { + "name": "passenger", + "value": "Passenger" + }, + { + "name": "select", + "value": "Select" + }, + { + "name": "ticket_list", + "value": "Ticket List" } ] } \ No newline at end of file diff --git a/entry/src/main/resources/zh_CN/element/string.json b/entry/src/main/resources/zh_CN/element/string.json index db7ba4b2eb2c6c5ccef55630b8bbcb0e407e726a..86fe883a824aeaf4ee429f6513a2613aa1a1fb25 100644 --- a/entry/src/main/resources/zh_CN/element/string.json +++ b/entry/src/main/resources/zh_CN/element/string.json @@ -21,8 +21,8 @@ "value": "上海" }, { - "name": "check_ticket", - "value": "检查车票" + "name": "ticket_inquiry", + "value": "查询车票" }, { "name": "departure_date", @@ -62,7 +62,7 @@ }, { "name": "add_person", - "value": "+ 添加乘车人" + "value": "添加乘车人" }, { "name": "edit", @@ -122,11 +122,11 @@ }, { "name": "login", - "value": "登陆成功 !" + "value": "登录成功 !" }, { "name": "toast_dialog", - "value": "toast弹窗" + "value": "Toast弹窗" }, { "name": "button_name1", @@ -287,6 +287,26 @@ { "name": "saturday", "value": "星期六" + }, + { + "name": "privacy_details", + "value": "隐私详情" + }, + { + "name": "please_enter", + "value": "请输入......" + }, + { + "name": "passenger", + "value": "乘车人" + }, + { + "name": "select", + "value": "选择" + }, + { + "name": "ticket_list", + "value": "车票列表" } ] } \ No newline at end of file