diff --git a/README.md b/README.md index d94b08a0c01123770fc85ffe73e8efbc49ae338a..263d0f8708dd99d61746adba8d7d7496c95cf447 100644 --- a/README.md +++ b/README.md @@ -23,28 +23,37 @@ ### 工程目录 ``` -├──entry/src/main/ets // 代码区 -│ ├──application -│ │ ├──MailBox.ets // 邮箱 -│ │ ├──PhotoAlbum.ets // 图库 -│ │ └──Settings.ets // 设置 +multicolumnslibrary +├──src/main/ets // 代码区 │ ├──common -│ │ ├──BreakpointSystem.ets // 媒体查询 +│ │ └──CommonConstants.ets +│ ├──component │ │ ├──MailContent.ets // 邮箱详情 │ │ ├──MailNavigation.ets // 邮箱导航 │ │ ├──MailSideBar.ets // 邮箱侧边栏 │ │ ├──PhotoContent.ets // 图库详情 │ │ ├──PhotoSideBar.ets // 图库侧边栏 │ │ ├──SettingItem.ets // setting设置项 -│ │ └──WlanItem.ets // Wlan详情页 -│ ├──entryability -│ │ └──EntryAbility.ets +│ │ └──WlanItem.ets // Wlan详情页 │ ├──model │ │ └──dataType.ets // 侧边栏菜单数据类型 +│ ├──utils +│ │ ├──BreakpointSystem.ets // 断点 +│ │ └──WindowUtils.ets // 窗口工具 +│ ├──view +│ │ ├──MailBoxView.ets // 邮箱 +│ │ ├──MultiColumnsView.ets // 首页 +│ │ ├──PhotoAlbumView.ets // 图库 +│ │ └──SettingsView.ets // 设置 +│ └──MultiColumnController.ets // 能力控制器 +└──src/main/resources // 应用资源目录 +multicolumnssample +├──src/main/ets // 代码区 +│ ├──entryability +│ │ └──EntryAbility.ets │ └──pages -│ └──Index.ets // 首页 -└──entry/src/main/resources // 应用资源目录 - +│ └──Index.ets // 入口页面 +└──src/main/resources // 应用资源目录 ``` ### 具体实现 diff --git a/README_EN.md b/README_EN.md index e81211146b6987bb76bb99924da29b37c6a105b4..aff6dbeb65969fcb694a7b5cb579f1ca180de18a 100644 --- a/README_EN.md +++ b/README_EN.md @@ -24,28 +24,37 @@ Below are the preview effects. ## Project Directory ``` -├──entry/src/main/ets // Code area -│ ├──application -│ │ ├──MailBox.ets // Mailbox -│ │ ├──PhotoAlbum.ets // Photo album -│ │ └──Settings.ets // Settings +multicolumnslibrary +├──src/main/ets // Code area │ ├──common -│ │ ├──BreakpointSystem.ets // Breakpoint system +│ │ └──CommonConstants.ets +│ ├──component │ │ ├──MailContent.ets // Mail content │ │ ├──MailNavigation.ets // Mailbox navigation │ │ ├──MailSideBar.ets // Sidebar of the mailbox │ │ ├──PhotoContent.ets // Photo details │ │ ├──PhotoSideBar.ets // Photo sidebar │ │ ├──SettingItem.ets // Setting item -│ │ └──WlanItem.ets // WLAN details page -│ ├──entryability -│ │ └──EntryAbility.ets +│ │ └──WlanItem.ets // WLAN details page │ ├──model │ │ └──dataType.ets // Sidebar menu data type +│ ├──utils +│ │ ├──BreakpointSystem.ets // BreakpointSystem util +│ │ └──WindowUtils.ets // Window util +│ ├──view +│ │ ├──MailBoxView.ets // Mailbox +│ │ ├──MultiColumnsView.ets // Home +│ │ ├──PhotoAlbumView.ets // Photo +│ │ └──SettingsView.ets // Settings +│ └──MultiColumnController.ets +└──src/main/resources // App resource directory +multicolumnssample +├──src/main/ets // Code area +│ ├──entryability +│ │ └──EntryAbility.ets │ └──pages -│ └──Index.ets // Home page -└──entry/src/main/resources // App resource directory - +│ └──Index.ets // Entry page +└──src/main/resources // App resource directory ``` ### How to Implement diff --git a/multicolumnslibrary/CHANGELOG.md b/multicolumnslibrary/CHANGELOG.md new file mode 100644 index 0000000000000000000000000000000000000000..addaa8c904e77491f00f6f35027c527cda8c1bb0 --- /dev/null +++ b/multicolumnslibrary/CHANGELOG.md @@ -0,0 +1,6 @@ +# 版本记录 +## 1.0.0（2025.07.11） + +--- +### Initial +- 初始版本 diff --git a/multicolumnslibrary/Index.ets b/multicolumnslibrary/Index.ets index 2fc7e9a8c9003e8a9d57b97b2429859ff364a7fc..ea7a239841fbe5ea81be9bd76d2b7ce800203adb 100644 --- a/multicolumnslibrary/Index.ets +++ b/multicolumnslibrary/Index.ets @@ -1,2 +1,3 @@ -export { MultiColumnsPage} from './src/main/ets/pages/MultiColumnsPage' -export { WindowUtil} from './src/main/ets/utils/WindowUtils' \ No newline at end of file +export { MultiColumnsView } from './src/main/ets/view/MultiColumnsView'; + +export { MultiColumnController } from './src/main/ets/MultiColumnController'; \ No newline at end of file diff --git a/multicolumnslibrary/LICENSE b/multicolumnslibrary/LICENSE new file mode 100644 index 0000000000000000000000000000000000000000..338e5b0bc22082e0ffcc7121c2ed3897a3ddccb0 --- /dev/null +++ b/multicolumnslibrary/LICENSE @@ -0,0 +1,78 @@ + Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved. + + 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. + +Apache License, Version 2.0 +TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + +1. Definitions. + +"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. + +"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. + +"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. + +"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. + +"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. + +"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. + +"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). + +"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. + +"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." + +"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. + +2. Grant of Copyright License. + +Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. + +3. Grant of Patent License. + +Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. + +4. Redistribution. + +You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: +1.You must give any other recipients of the Work or Derivative Works a copy of this License; and +2.You must cause any modified files to carry prominent notices stating that You changed the files; and +3.You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and +4.If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. + +You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. + +5. Submission of Contributions. + +Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. + +6. Trademarks. + +This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. + +7. Disclaimer of Warranty. + +Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. + +8. Limitation of Liability. + +In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. + +9. Accepting Warranty or Additional Liability. + +While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. + +END OF TERMS AND CONDITIONS \ No newline at end of file diff --git a/multicolumnslibrary/README.md b/multicolumnslibrary/README.md new file mode 100644 index 0000000000000000000000000000000000000000..e94a006944e99b310fa919d51a53b9cc6600cb69 --- /dev/null +++ b/multicolumnslibrary/README.md @@ -0,0 +1,48 @@ +## 多设备分栏控件 + +### 介绍 + +本示例分别展示了多场景下，一多分栏控件的响应式变化效果。 + +本示例分别用到了SideBarContainer组件与Navigation组件，对应使用场景如下： + +A+B+C：即SideBarContainer组件组合Navigation组件 +A+C：SideBarContainer组件 +B+C：Navigation组件 + +### 下载安装 + +使用ohpm安装依赖 + +``` +ohpm install @ohos_samples/multicolumnslibrary +``` + +或者按需在模块中修改oh-package.json5 + +``` +{ + "dependencies": { + "@ohos_samples/multicolumnslibrary": "^1.0.0" + } +} +``` + +### 使用说明 + +``` +import { MultiColumnsView, MultiColumnController } from '@ohos_samples/multicolumnslibrary'; +``` +按需在文件中使用导出模块即可，其MultiColumnsView是整个sample的入口页面组件。MultiColumnController初始化了沉浸式、设备断点判断、避让区域计算等窗口能力。示例如下： +``` +// Index.ets +import { MultiColumnsView } from '@ohos_samples/multicolumnslibrary'; +Stack() { + MultiColumnsView() +} + +// EntryAbility.ets +import { MultiColumnController } from '@ohos_samples/multicolumnslibrary'; +// onWindowStageCreate回调里的loadContent方法里初始化 +MultiColumnController.initWindowConfig(windowStage); +``` \ No newline at end of file diff --git a/multicolumnslibrary/obfuscation-rules.txt b/multicolumnslibrary/obfuscation-rules.txt index 272efb6ca3f240859091bbbfc7c5802d52793b0b..d59018fe596092b6b264883fe853c40519c4e470 100644 --- a/multicolumnslibrary/obfuscation-rules.txt +++ b/multicolumnslibrary/obfuscation-rules.txt @@ -17,7 +17,7 @@ # -keep-property-name: specifies property names that you want to keep # -keep-global-name: specifies names that you want to keep in the global scope --enable-property-obfuscation +#-enable-property-obfuscation -enable-toplevel-obfuscation --enable-filename-obfuscation +#-enable-filename-obfuscation -enable-export-obfuscation \ No newline at end of file diff --git a/multicolumnslibrary/oh-package.json5 b/multicolumnslibrary/oh-package.json5 index e7446f1ec7962ad3145d94034b5da16c2aa536d1..57b1a449dad3ba483bdedbd4d35fd959e4215c16 100644 --- a/multicolumnslibrary/oh-package.json5 +++ b/multicolumnslibrary/oh-package.json5 @@ -1,9 +1,10 @@ { - "name": "multicolumnslibrary", + "name": "@ohos_samples/multicolumnslibrary", "version": "1.0.0", - "description": "Please describe the basic information.", + "description": "This sample shows the responsive change effect of the multi-column control in various scenarios.", "main": "Index.ets", - "author": "", + "author": "@ohos_samples", "license": "Apache-2.0", + "repository": "https://gitee.com/harmonyos_samples/multi-columns/tree/br_release_hmos/", "dependencies": {} } diff --git a/multicolumnslibrary/src/main/ets/MultiColumnController.ets b/multicolumnslibrary/src/main/ets/MultiColumnController.ets new file mode 100644 index 0000000000000000000000000000000000000000..328e810408a928a82925ef0da832798d8cf02014 --- /dev/null +++ b/multicolumnslibrary/src/main/ets/MultiColumnController.ets @@ -0,0 +1,22 @@ +/* + * 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 { window } from '@kit.ArkUI'; +import { WindowUtil } from './utils/WindowUtils'; + +export class MultiColumnController { + public static initWindowConfig(windowStage: window.WindowStage): void { + WindowUtil.initialize(windowStage); + } +} \ No newline at end of file diff --git a/multicolumnslibrary/src/main/ets/application/MailBox.ets b/multicolumnslibrary/src/main/ets/application/MailBox.ets deleted file mode 100644 index 74e7e32e87fe7b2f69490813a9ad15f17acdf6b0..0000000000000000000000000000000000000000 --- a/multicolumnslibrary/src/main/ets/application/MailBox.ets +++ /dev/null @@ -1,86 +0,0 @@ -/* - * 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 { BreakpointType } from '../utils/BreakpointSystem'; -import { MailNavigation } from '../common/MailNavigation'; -import { MailSideBar } from '../common/MailSideBar'; - -let storage = LocalStorage.getShared(); - -@Builder -export function MailBoxBuilder() { - MailBox(); -} - -@Entry(storage) -@Component -struct MailBox { - @LocalStorageLink('currentBreakPoint') currentBreakPoint: string = 'md'; - @State isFold: boolean = false; - @State sideBarWidth: number = 304; - @StorageProp('topRectHeight') topRectHeight: number = 0; - - build() { - NavDestination() { - GridRow() { - GridCol({ span: { sm: 12, md: 12, lg: 12 } }) { - SideBarContainer(SideBarContainerType.AUTO) { - // Area A - Column() { - MailSideBar() - } - .borderWidth({ right: 0.5 }) - .borderColor({ right: $r('sys.color.comp_divider') }) - .width('100%') - .height('100%') - .backgroundColor($r('sys.color.background_primary')) - - // Area B+C - Column() { - Stack() { - MailNavigation() - if (this.isFold && this.currentBreakPoint !== 'lg') { - Column().width('100%').height('100%').backgroundColor('#33000000') - } - } - }.height('100%').width('100%') - } - .divider({ color: $r('sys.color.comp_divider'), strokeWidth: 0 }) - .sideBarWidth(this.sideBarWidth) - .minSideBarWidth(240) - .minContentWidth(this.currentBreakPoint === 'sm' ? '100%' : 600) - .controlButton({ - left: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.currentBreakPoint), - top: px2vp(this.topRectHeight), - width: 24, - height: 24 - }) - .showSideBar(this.currentBreakPoint === 'lg') - .onChange((value: boolean) => { - this.isFold = value; - }) - } - } - .onBreakpointChange((breakpoint: string) => { - this.currentBreakPoint = breakpoint; - }) - } - .hideTitleBar(true) - .padding({ top: px2vp(this.topRectHeight) }) - } -} - - - diff --git a/multicolumnslibrary/src/main/ets/application/PhotoAlbum.ets b/multicolumnslibrary/src/main/ets/application/PhotoAlbum.ets deleted file mode 100644 index b77623dd1984ffea3a8b3c145a36298304fda0ed..0000000000000000000000000000000000000000 --- a/multicolumnslibrary/src/main/ets/application/PhotoAlbum.ets +++ /dev/null @@ -1,70 +0,0 @@ -/* - * 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 { BreakpointType } from '../utils/BreakpointSystem'; -import { CommonConstants } from '../common/CommonConstants'; -import { PhotoContent } from '../common/PhotoContent'; -import { PhotoSideBar } from '../common/PhotoSideBar'; - -let storage = LocalStorage.getShared(); - -@Builder -export function PhotoAlbumBuilder() { - PhotoAlbum(); -} - -@Entry(storage) -@Component -struct PhotoAlbum { - @State sideBarStatus: boolean = true; - @LocalStorageLink('currentBreakPoint') currentBreakPoint: string = 'sm'; - @StorageProp('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM; - @StorageProp('topRectHeight') topRectHeight: number = 0; - - build() { - NavDestination() { - GridRow() { - GridCol({ span: { sm: 12, md: 12, lg: 12 } }) { - SideBarContainer(SideBarContainerType.AUTO) { - Column() { - PhotoSideBar() - } - .backgroundColor($r('sys.color.comp_background_primary')) - - Column() { - PhotoContent({ sideBarStatus: $sideBarStatus }) - } - .backgroundColor($r('sys.color.background_secondary')) - } - .divider({ strokeWidth: 0.5, color: $r('sys.color.comp_divider') }) - .controlButton({ - left: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.curBp), - top: px2vp(this.topRectHeight), - width: 24, - height: 24 - }) - .onChange((value: boolean) => { - this.sideBarStatus = value; - }) - } - } - .onBreakpointChange((breakpoint: string) => { - this.currentBreakPoint = breakpoint; - }) - } - .hideTitleBar(true) - .padding({ top: px2vp(this.topRectHeight), }) - } -} \ No newline at end of file diff --git a/multicolumnslibrary/src/main/ets/common/CommonConstants.ets b/multicolumnslibrary/src/main/ets/common/Constants.ets similarity index 42% rename from multicolumnslibrary/src/main/ets/common/CommonConstants.ets rename to multicolumnslibrary/src/main/ets/common/Constants.ets index 5b3ebeab8b365ab91ea4471f6303412fccba8a5b..fb3597e67fb4e25739f7f9e9aa253ae35b13b19d 100644 --- a/multicolumnslibrary/src/main/ets/common/CommonConstants.ets +++ b/multicolumnslibrary/src/main/ets/common/Constants.ets @@ -13,31 +13,92 @@ * limitations under the License. */ -/** +/* * Common constants for all features. */ -export class CommonConstants { - /** +export class Constants { + /* + * Back Button size. + */ + public static readonly BACK_SIZE: number = 48; + /* * Index page padding top size. */ public static readonly PADDING_TOP_INDEX: number = 64; - /** + /* * Index page padding bottom size. */ public static readonly PADDING_BOTTOM_INDEX: number = 16; - /** + /* + * Image size. + */ + public static readonly IMAGE_SIZE_SMALL: number = 24; + /* + * Grid space. + */ + public static readonly GRID_SPACE: number = 12; + /* + * List space. + */ + public static readonly LIST_SPACE: number = 20; + /* + * Custom padding top size. + */ + public static readonly PADDING_CUSTOM: number = 8; + /* + * Custom padding size 16. + */ + public static readonly PADDING_16: number = 16; + /* + * Custom padding size 24. + */ + public static readonly PADDING_24: number = 24; + /* + * Custom padding size 32. + */ + public static readonly PADDING_32: number = 32; + /* + * Album title padding left. + */ + public static readonly ALBUMS_PADDING_LEFT: number = 36; + /* * Width the percentage of the 100. */ public static readonly FULL_WIDTH: string = '100%'; - /** + /* * Height the percentage of the 100. */ public static readonly FULL_HEIGHT: string = '100%'; - /** - * Breakpoint sm. + /* + * Breakpoint sm navBarWidth. + */ + public static readonly NAV_BAR_WIDTH_SM: number = 321; + /* + * Breakpoint md navBarWidth. + */ + public static readonly NAV_BAR_WIDTH_MD: number = 321; + /* + * Breakpoint lg navBarWidth. */ - public static readonly BREAK_POINT_SM: string = 'sm'; - /** + public static readonly NAV_BAR_WIDTH_LG: number = 390; + /* + * Breakpoint lg navBarWidth. + */ + public static readonly SIDE_BAR_WIDTH_MIN: number = 240; + /* + * Breakpoint lg navBarWidth. + */ + public static readonly SIDE_BAR_WIDTH_CONTENT_MIN: number = 600; + /* + * AppStorage key + */ + public static readonly KEY_PREFIX_COLUMNS: string = 'multiColumns'; + public static readonly KEY_BREAKPOINT: string = Constants.KEY_PREFIX_COLUMNS + 'BreakPoint'; + public static readonly KEY_STATUS_BAR_HEIGHT: string = Constants.KEY_PREFIX_COLUMNS + 'StatusBarHeight'; + public static readonly KEY_NAV_INDICATOR_HEIGHT: string = Constants.KEY_PREFIX_COLUMNS + 'NavIndicatorHeight'; + public static readonly KEY_PATH_STACK: string = Constants.KEY_PREFIX_COLUMNS + 'PathStack'; + public static readonly KEY_UI_CONTEXT: string = Constants.KEY_PREFIX_COLUMNS + 'UIContext'; + /* * Routes */ public static readonly ROUTES: Route[] = [ @@ -53,7 +114,7 @@ export class CommonConstants { ]; } -/** +/* * Route type define */ export interface Route { diff --git a/multicolumnslibrary/src/main/ets/common/MailContent.ets b/multicolumnslibrary/src/main/ets/component/MailContent.ets similarity index 58% rename from multicolumnslibrary/src/main/ets/common/MailContent.ets rename to multicolumnslibrary/src/main/ets/component/MailContent.ets index aa560d56623d8cc1bac7e9b08ce8f31fc8eced16..e4f5d955f5a3c81bc3f453c6c928273131b2498b 100644 --- a/multicolumnslibrary/src/main/ets/common/MailContent.ets +++ b/multicolumnslibrary/src/main/ets/component/MailContent.ets @@ -13,9 +13,9 @@ * limitations under the License. */ +import { Constants } from '../common/Constants'; import { OperateTabs } from '../model/dataType'; -import { BreakpointType } from '../utils/BreakpointSystem'; -import { CommonConstants } from './CommonConstants'; +import { BreakpointType, BreakpointTypeEnum } from '../utils/BreakpointSystem'; @Component export struct MailContent { @@ -26,62 +26,78 @@ export struct MailContent { new OperateTabs($r('sys.symbol.trash'), $r('app.string.delete')), new OperateTabs($r('sys.symbol.dot_grid_2x2'), $r('app.string.more')), ] - @StorageProp('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM; - @StorageProp('bottomRectHeight') bottomRectHeight: number = 0; - @StorageProp('topRectHeight') topRectHeight: number = 0; + @StorageProp(Constants.KEY_BREAKPOINT) curBp: string = BreakpointTypeEnum.SM; + @StorageProp(Constants.KEY_NAV_INDICATOR_HEIGHT) navIndicatorHeight: number = 0; + @StorageProp(Constants.KEY_STATUS_BAR_HEIGHT) statusBarHeight: number = 0; build() { NavDestination() { Column() { Column() { - Text('HHHxx UXD') - .fontSize(22) - .margin({ left: this.curBp === 'sm' ? 32 : 0 }) + Text($r('app.string.mailDetailTitle')) + .fontSize($r('sys.float.Title_M')) + .margin({ left: this.curBp === BreakpointTypeEnum.SM ? Constants.PADDING_32 + Constants.BACK_SIZE : 0 }) .fontWeight(FontWeight.Medium) .fontColor($r('sys.color.font_primary')) Row() { Text($r('app.string.recUser')) - .fontSize(14) + .fontSize($r('sys.float.Body_M')) .fontWeight(FontWeight.Regular) .fontColor($r('sys.color.font_primary')) Text($r('app.string.mailDesc')) - .padding({ left: 12 }) - .fontSize(16) + .padding({ left: $r('sys.float.padding_level6') }) + .fontSize($r('sys.float.Body_L')) .fontWeight(FontWeight.Medium) .fontColor($r('sys.color.font_primary')) Blank() SymbolGlyph($r('sys.symbol.chevron_down')) - .fontSize(24) + .fontSize($r('sys.float.Title_M')) .fontColor([$r('sys.color.icon_secondary')]) } .width('100%') - .height(48) + .height($r('app.float.item_height_48')) - Text('PostMaster').fontSize(20).fontColor($r('sys.color.font_primary')).lineHeight(23) - Text('09:42').margin({ top: 2 }).fontColor($r('sys.color.font_tertiary')) + Text($r('app.string.postMaster')) + .fontSize($r('sys.float.Title_S')) + .fontColor($r('sys.color.font_primary')) + .lineHeight($r('app.float.line_height_23')) + Text($r('app.string.postTime')) + .margin({ top: $r('sys.float.padding_level1') }) + .fontColor($r('sys.color.font_tertiary')) Scroll() { Column() { Text($r('app.string.textData')).fancyText() Text($r('app.string.bodyTextPartOne')).fancyText() Text('').fancyText() - Image($r('app.media.orange')).width('100%').height(166).borderRadius(10) + Image($r('app.media.orange')) + .width('100%') + .height($r('app.float.content_image_height')) + .borderRadius($r('sys.float.corner_radius_level5')) Text('').fancyText() Text($r('app.string.bodyTextPartTwo')).fancyText() Text($r('app.string.bodyTextPartThree')).fancyText() } .alignItems(HorizontalAlign.Center) } - .margin({ top: 20 }) + .margin({ top: $r('sys.float.padding_level10') }) .layoutWeight(1) .width('100%') .scrollBar(BarState.Off) } .layoutWeight(1) .padding({ - left: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.curBp), - right: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.curBp), + left: new BreakpointType({ + sm: $r('sys.float.padding_level8'), + md: $r('sys.float.padding_level12'), + lg: $r('sys.float.padding_level16') + }).getValue(this.curBp), + right: new BreakpointType({ + sm: $r('sys.float.padding_level8'), + md: $r('sys.float.padding_level12'), + lg: $r('sys.float.padding_level16'), + }).getValue(this.curBp), }) .alignItems(HorizontalAlign.Start) @@ -90,11 +106,11 @@ export struct MailContent { Column() { SymbolGlyph(item.src) .fontColor([$r('sys.color.ohos_id_color_text_secondary')]) - .fontSize(24) + .fontSize($r('sys.float.Title_M')) Text(item.name) .fontColor($r('sys.color.ohos_id_color_text_secondary')) - .fontSize(10) - .lineHeight(12) + .fontSize($r('sys.float.Caption_M')) + .lineHeight($r('app.float.line_height_12')) } }, (item: OperateTabs, index: number) => { return index + JSON.stringify(item); @@ -102,16 +118,15 @@ export struct MailContent { } .justifyContent(FlexAlign.SpaceAround) .width('100%') - .height(56) - .backgroundColor($r('sys.color.background_secondary')) + .height($r('app.float.item_height')) } - .padding({ - bottom: px2vp(this.bottomRectHeight), top: px2vp(this.topRectHeight) - }) - .backgroundColor($r('sys.color.background_secondary')) .width('100%') .height('100%') } + .padding({ + top: this.statusBarHeight === 0 ? Constants.PADDING_16 : this.statusBarHeight + Constants.PADDING_CUSTOM, + bottom: this.navIndicatorHeight, + }) .backgroundColor($r('sys.color.background_secondary')) .width('100%') .height('100%') @@ -122,7 +137,7 @@ export struct MailContent { @Extend(Text) function fancyText() { .fontColor($r('sys.color.font_primary')) - .fontSize(16) + .fontSize($r('sys.float.Body_L')) .fontWeight(FontWeight.Regular) - .lineHeight(25) + .lineHeight($r('app.float.line_height_25')) } \ No newline at end of file diff --git a/multicolumnslibrary/src/main/ets/common/MailNavigation.ets b/multicolumnslibrary/src/main/ets/component/MailNavigation.ets similarity index 38% rename from multicolumnslibrary/src/main/ets/common/MailNavigation.ets rename to multicolumnslibrary/src/main/ets/component/MailNavigation.ets index a7576f786cc1f10e7daba269cce703b6b2b8a1fd..d8841fd0e35f03079cfe68228cb7e78f426baf6d 100644 --- a/multicolumnslibrary/src/main/ets/common/MailNavigation.ets +++ b/multicolumnslibrary/src/main/ets/component/MailNavigation.ets @@ -13,35 +13,39 @@ * limitations under the License. */ -import { BreakpointType } from '../utils/BreakpointSystem'; +import { Constants } from '../common/Constants'; +import { BreakpointType, BreakpointTypeEnum } from '../utils/BreakpointSystem'; import { MailContent } from './MailContent'; @Component export struct MailNavigation { @State pathInfo: NavPathStack = new NavPathStack(); @State mailList: string[] = ['1', '1', '1', '1', '1', '1']; - @LocalStorageProp('currentBreakPoint') currentBreakPoint: string = 'md'; - @StorageProp('topRectHeight') topRectHeight: number = 0; + @StorageProp(Constants.KEY_BREAKPOINT) currentBreakPoint: string = BreakpointTypeEnum.MD; + @StorageProp(Constants.KEY_STATUS_BAR_HEIGHT) statusBarHeight: number = 0; @Builder - myRouter() { - MailContent() + myRouter(name: string) { + if (name === 'mailContent') { + MailContent() + } } @Builder NavigationMenus() { - if (this.currentBreakPoint !== 'md') { + if (this.currentBreakPoint !== BreakpointTypeEnum.MD) { Row() { SymbolGlyph($r('sys.symbol.plus')) .fontColor([$r('sys.color.icon_primary')]) - .fontSize(24) + .fontSize($r('sys.float.Title_M')) SymbolGlyph($r('sys.symbol.dot_grid_2x2')) .fontColor([$r('sys.color.icon_primary')]) - .fontSize(24) - .margin({ left: 24 }) + .fontSize($r('sys.float.Title_M')) + .margin({ left: $r('sys.float.padding_level12') }) } - .height(56) - .padding({ top: px2vp(this.topRectHeight), right: 16 }) + .alignItems(VerticalAlign.Center) + .height($r('app.float.item_height')) + .padding({ top: this.statusBarHeight + Constants.PADDING_CUSTOM, right: Constants.PADDING_16 }) } } @@ -50,25 +54,33 @@ export struct MailNavigation { Column() { Text($r('app.string.recvBox')) .fontColor($r('sys.color.font_primary')) - .fontSize(30) + .fontSize($r('sys.float.Title_L')) .fontWeight(FontWeight.Medium) - Text('xxxxxxxxxxxxx') + Text($r('app.string.inboxSubtitle')) .fontColor($r('sys.color.font_tertiary')) - .fontSize(14) - .margin({ top: 4, left: 2 }) + .fontSize($r('sys.float.Subtitle_S')) + .margin({ top: $r('sys.float.padding_level2'), left: $r('sys.float.padding_level1') }) } .alignItems(HorizontalAlign.Start) - .height(140) + .height($r('app.float.mail_inbox_height')) .width('100%') .padding({ - top: 80, - left: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.currentBreakPoint), - right: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.currentBreakPoint) + top: $r('app.float.mail_inbox_margin_top'), + left: new BreakpointType({ + sm: $r('sys.float.padding_level8'), + md: $r('sys.float.padding_level12'), + lg: $r('sys.float.padding_level16') + }).getValue(this.currentBreakPoint), + right: new BreakpointType({ + sm: $r('sys.float.padding_level8'), + md: $r('sys.float.padding_level12'), + lg: $r('sys.float.padding_level16') + }).getValue(this.currentBreakPoint), }) } aboutToAppear() { - this.pathInfo.pushPath({ name: 'one' }) + this.pathInfo.pushPath({ name: 'mailContent' }) } build() { @@ -81,33 +93,42 @@ export struct MailNavigation { ListItem() { Column() { Row() { - Text($r('app.string.nonSense')).fontSize(16).lineHeight(22).fontColor('#1818a') + Text($r('app.string.nonSense')) + .fontSize($r('sys.float.Body_L')) + .lineHeight($r('app.float.line_height_22')) + .fontColor($r('sys.color.font_primary')) Blank() - Text('4/12').fontSize(12).opacity(0.6) + Text($r('app.string.date')) + .fontSize($r('sys.float.Body_S')) + .opacity(0.6) }.width('100%') Column() { - Text($r('app.string.textPartOne')).lineHeight(19).fontSize(14).fontColor('#1818a') + Text($r('app.string.textPartOne')) + .lineHeight($r('app.float.line_height_19')) + .fontSize($r('sys.float.Body_M')) + .fontColor($r('sys.color.font_primary')) Text($r('app.string.textPartTwo')) - .fontSize(14) - .fontColor('#1818a') - .opacity(0.6) - .lineHeight(19) + .fontSize($r('sys.float.Body_M')) + .fontColor($r('sys.color.font_tertiary')) + .lineHeight($r('app.float.line_height_19')) } - .width('100%').alignItems(HorizontalAlign.Start) + .width('100%') + .alignItems(HorizontalAlign.Start) } - .height(96).justifyContent(FlexAlign.Center) + .height($r('app.float.mail_mail_height')) + .justifyContent(FlexAlign.Center) } - .padding({ left: 12, right: 12 }) - .backgroundColor(index === 2 ? '#19254ff7' : '') - .borderRadius(10) + .padding({ left: $r('sys.float.padding_level6'), right: $r('sys.float.padding_level6') }) + .backgroundColor(index === 2 ? $r('app.color.item_selected_color') : undefined) + .borderRadius($r('sys.float.corner_radius_level5')) }, (item: string) => item.toString()) } .scrollBar(BarState.Off) .divider({ strokeWidth: 0.5, - startMargin: 12, - endMargin: 12, + startMargin: $r('sys.float.padding_level6'), + endMargin: $r('sys.float.padding_level6'), color: $r('sys.color.comp_divider') }) .height('100%') @@ -116,20 +137,35 @@ export struct MailNavigation { } .height('100%').width('100%') .padding({ - left: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.currentBreakPoint), - right: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.currentBreakPoint) + left: new BreakpointType({ + sm: $r('sys.float.padding_level8'), + md: $r('sys.float.padding_level12'), + lg: $r('sys.float.padding_level16') + }).getValue(this.currentBreakPoint), + right: new BreakpointType({ + sm: $r('sys.float.padding_level8'), + md: $r('sys.float.padding_level12'), + lg: $r('sys.float.padding_level16') + }).getValue(this.currentBreakPoint), }) - if (this.currentBreakPoint !== 'lg') { - Image($r('app.media.ic_public_list_add_light')).width(48).height(48).position({ x: 240, y: 549 }) + if (this.currentBreakPoint !== BreakpointTypeEnum.LG && this.currentBreakPoint !== BreakpointTypeEnum.XL) { + Image($r('app.media.ic_public_list_add_light')) + .width($r('app.float.image_size_48')) + .height($r('app.float.image_size_48')) + .position({ x: 240, y: 549 }) } } } - .navBarWidth(new BreakpointType({ sm: 321, md: 321, lg: 390 }).getValue(this.currentBreakPoint) as number | Length) + .navBarWidth(new BreakpointType({ + sm: Constants.NAV_BAR_WIDTH_SM, + md: Constants.NAV_BAR_WIDTH_MD, + lg: Constants.NAV_BAR_WIDTH_LG + }).getValue(this.currentBreakPoint)) .navDestination(this.myRouter) .menus(this.NavigationMenus) .width('100%') - .title({ builder: this.NavigationTitle, height: 162 }) + .title({ builder: this.NavigationTitle, height: $r('app.float.mail_title_height') }) .hideBackButton(true) } } \ No newline at end of file diff --git a/multicolumnslibrary/src/main/ets/common/MailSideBar.ets b/multicolumnslibrary/src/main/ets/component/MailSideBar.ets similarity index 55% rename from multicolumnslibrary/src/main/ets/common/MailSideBar.ets rename to multicolumnslibrary/src/main/ets/component/MailSideBar.ets index 5a816798f133d38c570503aa5362fd94a41ba215..337b78a8d9d8d788ba265a06dca0dde8f9ce561e 100644 --- a/multicolumnslibrary/src/main/ets/common/MailSideBar.ets +++ b/multicolumnslibrary/src/main/ets/component/MailSideBar.ets @@ -12,15 +12,15 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { Constants } from '../common/Constants'; import { MailType } from '../model/dataType'; -import { BreakpointType } from '../utils/BreakpointSystem'; -import { CommonConstants } from './CommonConstants'; +import { BreakpointType, BreakpointTypeEnum } from '../utils/BreakpointSystem'; @Extend(Text) function textStyle() { - .backgroundColor('#254ff7') - .fontColor('#fff') - .fontSize(10) + .backgroundColor($r('app.color.mail_side_bg_color')) + .fontColor($r('app.color.mail_side_font_color')) + .fontSize($r('sys.float.Caption_M')) .textAlign(TextAlign.Center) } @@ -30,7 +30,8 @@ export struct MailSideBar { Column() { AccountInfo() MailStatusList() - }.width('100%') + } + .width('100%') } } @@ -40,26 +41,26 @@ struct AccountInfo { 'xxxxxxxxxxxxx', 'xxxxxxxxxxxxx', ] - @StorageProp('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM; + @StorageProp(Constants.KEY_BREAKPOINT) curBp: string = BreakpointTypeEnum.SM; @Builder accountInfo() { Column() { Row() { Text($r('app.string.account')) - .fontSize(16) + .fontSize($r('sys.float.Body_L')) .fontColor($r('sys.color.font_primary')) .fontWeight(FontWeight.Medium) Blank() Text($r('app.string.addAccount')) - .fontSize(16) + .fontSize($r('sys.float.Body_L')) .fontColor($r('sys.color.brand')) .fontWeight(FontWeight.Medium) } .width('100%') - .height(48) + .height($r('app.float.item_height_48')) } - .margin({ top: 78 }) + .margin({ top: $r('app.float.mail_account_margin_top') }) } build() { @@ -70,27 +71,28 @@ struct AccountInfo { ListItem() { Row() { Text() - .width(12) - .height(12) - .borderRadius(8) + .width($r('app.float.tag_circle_size')) + .height($r('app.float.tag_circle_size')) + .borderRadius($r('sys.float.corner_radius_level4')) .backgroundColor(index === 0 ? '#61cfbe' : '#fec700') Text(item) - .fontSize(16) + .fontSize($r('sys.float.Body_L')) .fontColor($r('sys.color.font_primary')) - .margin({ left: 13 }) + .margin({ left: $r('sys.float.padding_level6') }) Blank() if (index === 0) { SymbolGlyph($r('sys.symbol.checkmark')) - .fontSize(18) + .fontSize($r('sys.float.Subtitle_L')) .fontColor([$r('sys.color.brand')]) } else { Text('9') - .width(18) - .height(18) - .borderRadius(18) + .width($r('app.float.text_circle_size')) + .height($r('app.float.text_circle_size')) + .borderRadius($r('sys.float.corner_radius_level9')) .textStyle() } - }.width('100%').height(56) + }.width('100%') + .height($r('app.float.item_height')) } }, (item: string) => item.toString()) } @@ -99,8 +101,16 @@ struct AccountInfo { .divider({ strokeWidth: 0.5, color: $r('sys.color.comp_divider') }) } .padding({ - left: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.curBp), - right: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.curBp) + left: new BreakpointType({ + sm: $r('sys.float.padding_level8'), + md: $r('sys.float.padding_level12'), + lg: $r('sys.float.padding_level16') + }).getValue(this.curBp), + right: new BreakpointType({ + sm: $r('sys.float.padding_level8'), + md: $r('sys.float.padding_level12'), + lg: $r('sys.float.padding_level16') + }).getValue(this.curBp), }) } } @@ -118,17 +128,17 @@ struct MailStatusList { accountInfo() { Row() { Text($r('app.string.account')) - .fontSize(14) + .fontSize($r('sys.float.Body_M')) .fontColor($r('sys.color.font_tertiary')) Text($r('app.string.addAccount')) - .fontSize(14) + .fontSize($r('sys.float.Body_M')) .fontColor($r('sys.color.brand')) } .backgroundColor(Color.Red) .justifyContent(FlexAlign.SpaceBetween) .width('100%') - .height(48) + .height($r('app.float.item_height_48')) } build() { @@ -141,34 +151,37 @@ struct MailStatusList { ListItem() { Row() { Image(item.src) - .width(24) - .height(24) + .width($r('app.float.button_height_small')) + .height($r('app.float.button_height_small')) Text(item.type) - .fontSize(16) - .margin({ left: 16 }) + .fontSize($r('sys.float.Body_L')) + .margin({ left: $r('sys.float.padding_level8') }) .fontColor(index === 0 ? '#000' : '#e5000000') .fontWeight(FontWeight.Medium) Blank() if (index === this.mailState.length - 1) { - Image($r('app.media.ic_settings_arrow')).width(12).height(24).rotate({ angle: 90 }) + Image($r('app.media.ic_settings_arrow')) + .width($r('app.float.button_height_small')) + .height($r('app.float.button_height_small')) + .rotate({ angle: 90 }) } else { Text(item.num.toString()) - .fontColor('#18181a') - .fontSize(14) + .fontColor($r('app.color.text_color')) + .fontSize($r('sys.float.Body_M')) } }.width('100%') - }.padding({ left: 14, right: 24 }) - .height(56) - .backgroundColor(index === 0 ? '#19254ff7' : '') - .borderRadius(16) + }.padding({ left: $r('sys.float.padding_level8'), right: $r('sys.float.padding_level12') }) + .height($r('app.float.item_height')) + .backgroundColor(index === 0 ? $r('app.color.item_selected_color') : undefined) + .borderRadius($r('sys.float.corner_radius_level8')) }, (item: MailType, index: number) => { return index + JSON.stringify(item); }) } .width('100%') .height('100%') - .padding({ left: 7, right: 7 }) - .margin({ top: 8 }) - .divider({ strokeWidth: 1, startMargin: 12, endMargin: 12 }) + .padding({ left: $r('sys.float.padding_level4'), right: $r('sys.float.padding_level4') }) + .margin({ top: $r('sys.float.padding_level4') }) + .divider({ strokeWidth: 1, startMargin: $r('sys.float.padding_level6'), endMargin: $r('sys.float.padding_level6') }) } } \ No newline at end of file diff --git a/multicolumnslibrary/src/main/ets/common/PhotoContent.ets b/multicolumnslibrary/src/main/ets/component/PhotoContent.ets similarity index 54% rename from multicolumnslibrary/src/main/ets/common/PhotoContent.ets rename to multicolumnslibrary/src/main/ets/component/PhotoContent.ets index 6c46b0ecaa834ad3f93d73548abc2d93c2de0c8c..d4c327161a960c32be8f86336099e8072bf2b65e 100644 --- a/multicolumnslibrary/src/main/ets/common/PhotoContent.ets +++ b/multicolumnslibrary/src/main/ets/component/PhotoContent.ets @@ -13,9 +13,9 @@ * limitations under the License. */ +import { Constants } from '../common/Constants'; import { PhotoType } from '../model/dataType'; -import { BreakpointType } from '../utils/BreakpointSystem'; -import { CommonConstants } from './CommonConstants'; +import { BreakpointType, BreakpointTypeEnum } from '../utils/BreakpointSystem'; @Component export struct PhotoContent { @@ -31,38 +31,42 @@ export struct PhotoContent { ] @State columnsTemplate: string = '1fr 1fr 1fr'; @Link @Watch('onStateChange') sideBarStatus: boolean; - @StorageProp('currentBreakpoint') currentBreakPoint: string = CommonConstants.BREAK_POINT_SM; - @StorageProp('topRectHeight') topRectHeight: number = 0; + @StorageProp(Constants.KEY_BREAKPOINT) currentBreakPoint: string = BreakpointTypeEnum.SM; + @StorageProp(Constants.KEY_STATUS_BAR_HEIGHT) statusBarHeight: number = 0; aboutToAppear() { - if (this.sideBarStatus === true && this.currentBreakPoint === 'md') { + if (this.sideBarStatus === true && this.currentBreakPoint === BreakpointTypeEnum.MD) { this.columnsTemplate = '1fr 1fr 1fr'; - } else if (this.sideBarStatus === true && this.currentBreakPoint === 'lg') { + } else if (this.sideBarStatus === true && + (this.currentBreakPoint === BreakpointTypeEnum.LG || this.currentBreakPoint === BreakpointTypeEnum.XL)) { this.columnsTemplate = '1fr 1fr 1fr 1fr 1fr 1fr'; - } else if (this.sideBarStatus === false && this.currentBreakPoint === 'lg') { + } else if (this.sideBarStatus === false && + (this.currentBreakPoint === BreakpointTypeEnum.LG || this.currentBreakPoint === BreakpointTypeEnum.XL)) { this.columnsTemplate = '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr'; - } else if (this.sideBarStatus === false && this.currentBreakPoint === 'md') { + } else if (this.sideBarStatus === false && this.currentBreakPoint === BreakpointTypeEnum.MD) { this.columnsTemplate = '1fr 1fr 1fr 1fr'; - } else if (this.sideBarStatus === true && this.currentBreakPoint === 'sm') { + } else if (this.sideBarStatus === true && this.currentBreakPoint === BreakpointTypeEnum.SM) { this.columnsTemplate = '1fr 1fr 1fr 1fr'; - } else if (this.sideBarStatus === false && this.currentBreakPoint === 'sm') { + } else if (this.sideBarStatus === false && this.currentBreakPoint === BreakpointTypeEnum.SM) { this.columnsTemplate = '1fr 1fr 1fr 1fr'; } } onStateChange() { - animateTo({ duration: 300 }, () => { - if (this.sideBarStatus === true && this.currentBreakPoint === 'md') { + this.getUIContext().animateTo({ duration: 300 }, () => { + if (this.sideBarStatus === true && this.currentBreakPoint === BreakpointTypeEnum.MD) { this.columnsTemplate = '1fr 1fr 1fr'; - } else if (this.sideBarStatus === true && this.currentBreakPoint === 'lg') { + } else if (this.sideBarStatus === true && + (this.currentBreakPoint === BreakpointTypeEnum.LG || this.currentBreakPoint === BreakpointTypeEnum.XL)) { this.columnsTemplate = '1fr 1fr 1fr 1fr 1fr 1fr'; - } else if (this.sideBarStatus === false && this.currentBreakPoint === 'lg') { + } else if (this.sideBarStatus === false && + (this.currentBreakPoint === BreakpointTypeEnum.LG || this.currentBreakPoint === BreakpointTypeEnum.XL)) { this.columnsTemplate = '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr'; - } else if (this.sideBarStatus === false && this.currentBreakPoint === 'md') { + } else if (this.sideBarStatus === false && this.currentBreakPoint === BreakpointTypeEnum.MD) { this.columnsTemplate = '1fr 1fr 1fr 1fr'; - } else if (this.sideBarStatus === true && this.currentBreakPoint === 'sm') { + } else if (this.sideBarStatus === true && this.currentBreakPoint === BreakpointTypeEnum.SM) { this.columnsTemplate = '1fr 1fr 1fr 1fr'; - } else if (this.sideBarStatus === false && this.currentBreakPoint === 'sm') { + } else if (this.sideBarStatus === false && this.currentBreakPoint === BreakpointTypeEnum.SM) { this.columnsTemplate = '1fr 1fr 1fr 1fr'; } }) @@ -71,32 +75,41 @@ export struct PhotoContent { build() { Column() { Row() { - Text($r('app.string.album')).fontSize(20).fontWeight(FontWeight.Medium) - .margin({ left: this.sideBarStatus ? 0 : 36 }) + Text($r('app.string.album')) + .fontSize($r('sys.float.Title_S')) + .fontWeight(FontWeight.Medium) + .margin({ left: this.sideBarStatus ? 0 : Constants.ALBUMS_PADDING_LEFT + Constants.BACK_SIZE }) Row() { SymbolGlyph($r('sys.symbol.plus')) - .fontSize(24) + .fontSize($r('sys.float.Title_M')) .fontColor([$r('sys.color.font_primary')]) .margin({ right: $r('sys.float.padding_level4') }) SymbolGlyph($r('sys.symbol.dot_grid_2x2')) - .fontSize(24) + .fontSize($r('sys.float.Title_M')) .fontColor([$r('sys.color.font_primary')]) } } .justifyContent(FlexAlign.SpaceBetween) - .padding({ top: px2vp(this.topRectHeight) }) - .height(56) + .padding({ top: this.statusBarHeight + Constants.PADDING_CUSTOM }) + .height($r('app.float.item_height')) .width('100%') Grid() { ForEach(this.photoList, (item: PhotoType) => { GridItem() { Column() { - Image(item.src).width('100%').aspectRatio(1).borderRadius(12) + Image(item.src).width('100%').aspectRatio(1).borderRadius($r('sys.float.corner_radius_level6')) Column() { - Text(item.name).margin({ top: 8 }).fontSize(14).fontWeight(FontWeight.Regular) - Text(item.count.toString()).fontSize(12).fontWeight(FontWeight.Regular) - }.width('100%').alignItems(HorizontalAlign.Start).padding({ left: 8, right: 8 }) + Text(item.name) + .margin({ top: $r('sys.float.padding_level4') }) + .fontSize($r('sys.float.Body_M')) + .fontWeight(FontWeight.Regular) + Text(item.count.toString()).fontSize($r('sys.float.Body_S')) + .fontWeight(FontWeight.Regular) + } + .width('100%') + .alignItems(HorizontalAlign.Start) + .padding({ left: $r('sys.float.padding_level4'), right: $r('sys.float.padding_level4') }) } } }, (item: PhotoType, index: number) => { @@ -106,13 +119,21 @@ export struct PhotoContent { .height('85%') .scrollBar(BarState.Off) .columnsTemplate(this.columnsTemplate) - .columnsGap(22) - .rowsGap(17) - .margin({ top: 24 }) + .columnsGap($r('app.float.albums_image_column_gap')) + .rowsGap($r('app.float.albums_image_row_gap')) + .margin({ top: $r('sys.float.padding_level12') }) } .padding({ - left: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.currentBreakPoint), - right: new BreakpointType({ sm: 16, md: 24, lg: 32 }).getValue(this.currentBreakPoint) + left: new BreakpointType({ + sm: $r('sys.float.padding_level8'), + md: $r('sys.float.padding_level12'), + lg: $r('sys.float.padding_level16') + }).getValue(this.currentBreakPoint), + right: new BreakpointType({ + sm: $r('sys.float.padding_level8'), + md: $r('sys.float.padding_level12'), + lg: $r('sys.float.padding_level16') + }).getValue(this.currentBreakPoint) }) } } \ No newline at end of file diff --git a/multicolumnslibrary/src/main/ets/common/PhotoSideBar.ets b/multicolumnslibrary/src/main/ets/component/PhotoSideBar.ets similarity index 63% rename from multicolumnslibrary/src/main/ets/common/PhotoSideBar.ets rename to multicolumnslibrary/src/main/ets/component/PhotoSideBar.ets index d7879088dc68e62caf5a6532d6f01b746ad99b52..f8dd21081331884d0b8fcd35aada0ef005199045 100644 --- a/multicolumnslibrary/src/main/ets/common/PhotoSideBar.ets +++ b/multicolumnslibrary/src/main/ets/component/PhotoSideBar.ets @@ -13,9 +13,9 @@ * limitations under the License. */ +import { Constants } from '../common/Constants'; import { PhotoType } from '../model/dataType'; -import { BreakpointType } from '../utils/BreakpointSystem'; -import { CommonConstants } from './CommonConstants'; +import { BreakpointType, BreakpointTypeEnum } from '../utils/BreakpointSystem'; @Component export struct PhotoSideBar { @@ -30,8 +30,8 @@ export struct PhotoSideBar { new PhotoType($r('app.string.pictureType'), 22), new PhotoType($r('app.string.hidden'), 1), ]; - @StorageProp('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM; - @StorageProp('topRectHeight') topRectHeight: number = 0; + @StorageProp(Constants.KEY_BREAKPOINT) curBp: string = BreakpointTypeEnum.SM; + @StorageProp(Constants.KEY_STATUS_BAR_HEIGHT) statusBarHeight: number = 0; build() { Column() { @@ -45,40 +45,41 @@ export struct PhotoSideBar { ListItem() { Row() { SymbolGlyph($r('sys.symbol.picture_2')) - .fontSize(24) + .fontSize($r('sys.float.Title_M')) .fontColor([$r('sys.color.icon_primary')]) .aspectRatio(1) Text($r('app.string.photo')) .fontColor($r('sys.color.font_primary')) - .fontSize(16) + .fontSize($r('sys.float.Body_L')) .fontWeight(FontWeight.Medium) .opacity(0.9) - .height(48) - .margin({ left: 8 }) + .height($r('app.float.item_height_48')) + .margin({ left: $r('sys.float.padding_level4') }) } - .padding({ left: 8 }).width('100%') + .width('100%') + .padding({ left: $r('sys.float.padding_level4') }) } ListItem() { Row() { SymbolGlyph($r('sys.symbol.picture_2_fill')) - .fontSize(24) + .fontSize($r('sys.float.Title_M')) .fontColor([$r('sys.color.brand')]) .aspectRatio(1) Text($r('app.string.album')) - .fontSize(16) + .fontSize($r('sys.float.Body_L')) .fontWeight(FontWeight.Medium) .opacity(0.9) - .height(48) - .margin({ left: 8 }) + .height($r('app.float.item_height_48')) + .margin({ left: $r('sys.float.padding_level4') }) .fontColor($r('sys.color.brand')) Blank() SymbolGlyph($r('sys.symbol.checkmark')) .fontColor([$r('sys.color.brand')]) - .fontSize(24) - }.padding({ left: 8, right: 8 }).width('100%') - .backgroundColor('#19254ff7') - .borderRadius(10) + .fontSize($r('sys.float.Title_M')) + }.padding({ left: $r('sys.float.padding_level4'), right: $r('sys.float.padding_level4') }).width('100%') + .backgroundColor($r('app.color.item_selected_color')) + .borderRadius($r('sys.float.corner_radius_level5')) } ForEach(this.photoList, (item: PhotoType, index: number | undefined) => { @@ -86,22 +87,22 @@ export struct PhotoSideBar { Row() { Text(item.name) .fontColor($r('sys.color.font_secondary')) - .fontSize(14) + .fontSize($r('sys.float.Body_M')) .fontWeight(FontWeight.Medium) - .height(48) + .height($r('app.float.item_height_48')) Blank() if (index === this.photoList.length - 1) { SymbolGlyph($r('sys.symbol.lock')) - .fontSize(18) + .fontSize($r('sys.float.Subtitle_L')) .fontColor([$r('sys.color.font_secondary')]) } else { Text(item.count.toString()) - .fontSize(14) + .fontSize($r('sys.float.Body_M')) .fontWeight(FontWeight.Regular) .fontColor($r('sys.color.font_secondary')) } } - .padding({ left: 14, right: 14 }) + .padding({ left: $r('sys.float.corner_radius_level7'), right: $r('sys.float.corner_radius_level7') }) .width('100%') } }, (item: PhotoType, index: number) => { @@ -112,9 +113,17 @@ export struct PhotoSideBar { } .width('100%').height('100%') .padding({ - top: px2vp(this.topRectHeight), - left: new BreakpointType({sm:16,md: 24,lg: 32}).getValue(this.curBp), - right: new BreakpointType({sm:16,md: 24,lg: 32}).getValue(this.curBp) + top: Constants.BACK_SIZE, + left: new BreakpointType({ + sm: $r('sys.float.padding_level8'), + md: $r('sys.float.padding_level12'), + lg: $r('sys.float.padding_level16') + }).getValue(this.curBp), + right: new BreakpointType({ + sm: $r('sys.float.padding_level8'), + md: $r('sys.float.padding_level12'), + lg: $r('sys.float.padding_level16') + }).getValue(this.curBp), }) } } \ No newline at end of file diff --git a/multicolumnslibrary/src/main/ets/common/SettingItem.ets b/multicolumnslibrary/src/main/ets/component/SettingItem.ets similarity index 60% rename from multicolumnslibrary/src/main/ets/common/SettingItem.ets rename to multicolumnslibrary/src/main/ets/component/SettingItem.ets index e53a4dcd846451bd2fdba0ad7bb17e745486cca6..a8e2f362c5e5f3337adba3da598694943c5fd9b0 100644 --- a/multicolumnslibrary/src/main/ets/common/SettingItem.ets +++ b/multicolumnslibrary/src/main/ets/component/SettingItem.ets @@ -22,38 +22,41 @@ export struct MainItem { build() { Row() { - Image(this.src).width(32).aspectRatio(1) - + Image(this.src) + .width($r('app.float.image_size_32')) + .aspectRatio(1) if (this.isUserItem) { Column() { - Text($r('app.string.userInfo')).fontSize(16).fontWeight(FontWeight.Medium) + Text($r('app.string.userInfo')) + .fontSize($r('sys.float.Body_L')) + .fontWeight(FontWeight.Medium) Text($r('app.string.aboutUserInfo')) - .fontSize(14) + .fontSize($r('sys.float.Body_M')) .fontWeight(FontWeight.Regular) .opacity(0.6) .maxLines(1) .textOverflow({ overflow: TextOverflow.Ellipsis }) - }.alignItems(HorizontalAlign.Start).margin({ left: 12 }).flexShrink(1) + }.alignItems(HorizontalAlign.Start).margin({ left: $r('sys.float.padding_level6') }).flexShrink(1) } else { Text(this.itemDesc) - .fontSize(16) - .lineHeight(22) + .fontSize($r('sys.float.Body_L')) + .lineHeight($r('app.float.line_height_22')) .fontWeight(FontWeight.Medium) .fontFamily('HarmonyHeiTi') .fontColor($r('sys.color.ohos_id_color_text_primary')) .align(Alignment.Start) - .margin({ left: 16 }) + .margin({ left: $r('sys.float.padding_level8') }) } Blank() Image($r('app.media.ic_settings_arrow')) - .width(12) - .height(24) + .width($r('app.float.right_icon_width')) + .height($r('app.float.button_height_small')) .fillColor($r('sys.color.ohos_id_color_fourth')) - .margin({ left: 4 }) - }.padding({ left: 12, right: 12 }) - .height(56) - .borderRadius(20) + .margin({ left: $r('sys.float.padding_level2') }) + }.padding({ left: $r('sys.float.padding_level6'), right: $r('sys.float.padding_level6') }) + .height($r('app.float.item_height')) + .borderRadius($r('sys.float.corner_radius_level10')) .width('100%') } } @@ -72,8 +75,8 @@ export struct SubItem { Row() { Column() { Text(this.itemDesc) - .fontSize(16) - .lineHeight(22) + .fontSize($r('sys.float.Body_L')) + .lineHeight($r('app.float.line_height_22')) .fontWeight(FontWeight.Medium) .fontFamily('HarmonyHeiTi') .fontColor(this.isLinkAddress ? $r('sys.color.brand') : $r('sys.color.font_primary')) @@ -81,8 +84,9 @@ export struct SubItem { if (this.content) { Text(this.content) .fontWeight(FontWeight.Regular) - .fontSize(14) - .fontColor($r('sys.color.font_tertiary')).margin({ top: 1.5 }) + .fontSize($r('sys.float.Body_M')) + .fontColor($r('sys.color.font_tertiary')) + .margin({ top: $r('sys.float.padding_level1') }) } }.alignItems(HorizontalAlign.Start) @@ -91,30 +95,32 @@ export struct SubItem { if (this.isShowButton) { Toggle({ type: ToggleType.Switch, isOn: true }) .id('ToggleSwitch') - .width(36) - .height(20) + .width($r('app.float.setting_toggle_width')) + .height($r('app.float.setting_toggle_height')) .selectedColor($r('sys.color.brand')) } else if (this.isShowRightArrow) { if (this.itemStatusDesc) { - Text(this.itemStatusDesc).fontWeight(FontWeight.Regular).fontSize(14) + Text(this.itemStatusDesc) + .fontWeight(FontWeight.Regular) + .fontSize($r('sys.float.Body_M')) } Image($r('app.media.ic_settings_arrow')) - .width(12) - .height(24) + .width($r('app.float.right_icon_width')) + .height($r('app.float.button_height_small')) .fillColor($r('sys.color.ohos_id_color_fourth')) .margin({ - left: 4 + left: $r('sys.float.padding_level2') }) } else { Image(this.src) - .width(24) - .height(24) + .width($r('app.float.button_height_small')) + .height($r('app.float.button_height_small')) .fillColor($r('sys.color.ohos_id_color_primary')) } } - .height(56) - .borderRadius(20) + .height($r('app.float.item_height')) + .borderRadius($r('sys.float.corner_radius_level10')) .width('100%') - .padding({ left: 12, right: 12 }) + .padding({ left: $r('sys.float.padding_level6'), right: $r('sys.float.padding_level6') }) } } \ No newline at end of file diff --git a/multicolumnslibrary/src/main/ets/common/WlanItem.ets b/multicolumnslibrary/src/main/ets/component/WlanItem.ets similarity index 62% rename from multicolumnslibrary/src/main/ets/common/WlanItem.ets rename to multicolumnslibrary/src/main/ets/component/WlanItem.ets index 3c5db643bc3489dcf0c8ff2ddf5c8a0311b850f4..7c8a4c7e9504aaf25a0f9f75402361e4d3214f4b 100644 --- a/multicolumnslibrary/src/main/ets/common/WlanItem.ets +++ b/multicolumnslibrary/src/main/ets/component/WlanItem.ets @@ -13,58 +13,60 @@ * limitations under the License. */ +import { Constants } from '../common/Constants'; +import { BreakpointTypeEnum } from '../utils/BreakpointSystem'; import { SubItem } from './SettingItem'; -import { BreakpointType } from '../utils/BreakpointSystem'; @Component export struct WlanItem { @State netWorkStatus: Resource = $r('app.string.closed'); - @LocalStorageProp('currentBreakPoint') currentBreakPoint: string = 'md'; - @StorageProp('topRectHeight') topRectHeight: number = 0; - @Consume('pathStack') pageStack: NavPathStack; + @StorageProp(Constants.KEY_BREAKPOINT) currentBreakPoint: string = BreakpointTypeEnum.MD; + @StorageProp(Constants.KEY_STATUS_BAR_HEIGHT) statusBarHeight: number = 0; + @StorageProp(Constants.KEY_NAV_INDICATOR_HEIGHT) navIndicatorHeight: number = 0; + @Consume(Constants.KEY_PATH_STACK) pageStack: NavPathStack; @Builder CustomDivider() { Divider() .strokeWidth('1px') .color($r('sys.color.ohos_id_color_list_separator')) - .margin({ left: 8, right: 8 }) + .margin({ left: $r('sys.float.padding_level4'), right: $r('sys.float.padding_level4') }) } build() { NavDestination() { Row() { - if (this.currentBreakPoint === 'sm') { + if (this.currentBreakPoint === BreakpointTypeEnum.SM) { Button({ type: ButtonType.Circle }) { SymbolGlyph($r('sys.symbol.chevron_backward')) .fontColor([$r('sys.color.icon_primary')]) .fontSize($r('sys.float.Title_M')) } - .height(40) + .height($r('app.float.button_height')) .aspectRatio(1) .backgroundColor($r('sys.color.comp_background_tertiary')) .onClick(() => { - this.pageStack.pop() + this.pageStack.pop(); }) } - Text('WLAN') + Text($r('app.string.WLAN')) .margin({ left: $r('sys.float.padding_level4') }) - .font({ size: 20, weight: 700 }) + .font({ size: $r('sys.float.Title_S'), weight: FontWeight.Bold }) .fontColor($r('sys.color.font_primary')) } .width('100%') - .height(56) + .height($r('app.float.item_height')) .zIndex(2) - List({ space: 20 }) { + List({ space: Constants.LIST_SPACE }) { ListItem() { SubItem({ itemDesc: $r('app.string.WLAN'), isShowButton: true }) } .width('100%') - .borderRadius(16) + .borderRadius($r('sys.float.corner_radius_level8')) .backgroundColor($r('sys.color.comp_background_primary')) - .padding({ top: 4, bottom: 4 }) - .margin({ top: 16 }) + .padding({ top: $r('sys.float.padding_level2'), bottom: $r('sys.float.padding_level2') }) + .margin({ top: $r('sys.float.padding_level8') }) ListItem() { SubItem({ @@ -73,35 +75,35 @@ export struct WlanItem { itemStatusDesc: this.netWorkStatus }) }.width('100%') - .borderRadius(16) + .borderRadius($r('sys.float.corner_radius_level8')) .backgroundColor($r('sys.color.comp_background_primary')) - .padding({ top: 4, bottom: 4 }) + .padding({ top: $r('sys.float.padding_level2'), bottom: $r('sys.float.padding_level2') }) ListItem() { SubItem({ itemDesc: $r('app.string.moreWLANSettings'), isShowRightArrow: true }) }.width('100%') - .borderRadius(16) + .borderRadius($r('sys.float.corner_radius_level8')) .backgroundColor($r('sys.color.comp_background_primary')) - .padding({ top: 4, bottom: 4 }) + .padding({ top: $r('sys.float.padding_level2'), bottom: $r('sys.float.padding_level2') }) ListItem() { Column() { Text($r('app.string.wlanConnected')) - .fontSize(12) + .fontSize($r('sys.float.Body_S')) .fontColor($r('sys.color.font_secondary')) .width('100%') - .padding({ left: 12 }) + .padding({ left: $r('sys.float.padding_level6') }) SubItem({ itemDesc: $r('app.string.wifiName'), content: $r('app.string.connected'), src: $r('app.media.wlan2'), isLinkAddress: true }) - .margin({ top: 8 }) + .margin({ top: $r('sys.float.padding_level4') }) .width('100%') - .borderRadius(16) + .borderRadius($r('sys.float.corner_radius_level8')) .backgroundColor($r('sys.color.comp_background_primary')) - .padding({ top: 4, bottom: 4 }) + .padding({ top: $r('sys.float.padding_level2'), bottom: $r('sys.float.padding_level2') }) } } @@ -109,10 +111,10 @@ export struct WlanItem { Column() { Row() { Text($r('app.string.wlanUseful')) - .fontSize(14) + .fontSize($r('sys.float.Body_M')) .fontColor($r('sys.color.font_secondary')) .width('100%') - .padding({ left: 12 }) + .padding({ left: $r('sys.float.padding_level6') }) } Column() { @@ -135,19 +137,21 @@ export struct WlanItem { }) } .width('100%') - .borderRadius(16) + .borderRadius($r('sys.float.corner_radius_level8')) .backgroundColor($r('sys.color.comp_background_primary')) - .padding({ top: 4, bottom: 4 }) - .margin({ top: 8 }) + .padding({ top: $r('sys.float.padding_level2'), bottom: $r('sys.float.padding_level2') }) + .margin({ top: $r('sys.float.padding_level4') }) } } ListItem() { SubItem({ itemDesc: $r('app.string.addNetWork'), isLinkAddress: true }) - }.width('100%') - .borderRadius(16) + } + .width('100%') + .borderRadius($r('sys.float.corner_radius_level8')) .backgroundColor($r('sys.color.comp_background_primary')) - .padding({ top: 4, bottom: 4 }) + .padding({ top: $r('sys.float.padding_level2'), bottom: $r('sys.float.padding_level2') }) + .margin({ bottom: this.navIndicatorHeight }) } .scrollBar(BarState.Off) @@ -155,12 +159,11 @@ export struct WlanItem { .height('92%') } .padding({ - left: new BreakpointType({ sm: 16, md: 16, lg: 16 }).getValue(this.currentBreakPoint), - right: new BreakpointType({ sm: 16, md: 16, lg: 16 }).getValue(this.currentBreakPoint), - top: px2vp(this.topRectHeight) + left: $r('sys.float.padding_level8'), + right: $r('sys.float.padding_level8'), }) .hideTitleBar(true) - .title('WLAN') + .title($r('app.string.WLAN')) .hideTitleBar(true) .backgroundColor($r('sys.color.background_secondary')) } diff --git a/multicolumnslibrary/src/main/ets/utils/BreakpointSystem.ets b/multicolumnslibrary/src/main/ets/utils/BreakpointSystem.ets index f1c87347334c3abc307130bc0f7405016735ac95..49904a9af421b6194e9af98c4b5ef992cdf818c1 100644 --- a/multicolumnslibrary/src/main/ets/utils/BreakpointSystem.ets +++ b/multicolumnslibrary/src/main/ets/utils/BreakpointSystem.ets @@ -16,6 +16,7 @@ import { window } from '@kit.ArkUI'; import type { BusinessError } from '@kit.BasicServicesKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; +import { Constants } from '../common/Constants'; const TAG: string = '[BreakpointSystem]'; @@ -78,6 +79,7 @@ export class BreakpointSystem { public static getInstance(): BreakpointSystem { if (!BreakpointSystem.instance) { BreakpointSystem.instance = new BreakpointSystem(); + AppStorage.setOrCreate(Constants.KEY_BREAKPOINT, BreakpointTypeEnum.MD); } return BreakpointSystem.instance; } @@ -85,7 +87,7 @@ export class BreakpointSystem { public updateCurrentBreakpoint(breakpoint: BreakpointTypeEnum): void { if (this.currentBreakpoint !== breakpoint) { this.currentBreakpoint = breakpoint; - AppStorage.setOrCreate('currentBreakpoint', this.currentBreakpoint); + AppStorage.setOrCreate(Constants.KEY_BREAKPOINT, this.currentBreakpoint); } } diff --git a/multicolumnslibrary/src/main/ets/utils/WindowUtils.ets b/multicolumnslibrary/src/main/ets/utils/WindowUtils.ets index e059b5d42a30b23c32d1a60fc6c899fb809a72d2..36fe5de99bb57e6b7312aaea4f0161015cda728b 100644 --- a/multicolumnslibrary/src/main/ets/utils/WindowUtils.ets +++ b/multicolumnslibrary/src/main/ets/utils/WindowUtils.ets @@ -15,56 +15,71 @@ import { window } from '@kit.ArkUI'; import type { BusinessError } from '@kit.BasicServicesKit'; -import { BreakpointSystem } from './BreakpointSystem'; import { hilog } from '@kit.PerformanceAnalysisKit'; +import { Constants } from '../common/Constants'; +import { BreakpointSystem } from './BreakpointSystem'; const TAG: string = '[WindowUtil]'; export class WindowUtil { - public static requestFullScreen(windowStage: window.WindowStage): void { - windowStage.getMainWindow((err: BusinessError, data: window.Window) => { - if (err.code) { - return; - } - const windowClass: window.Window = data; - // Realize the immersive effect. - try { - const promise: Promise = windowClass.setWindowLayoutFullScreen(true); - promise.then(() => { - hilog.info(0x0000, TAG, 'Succeeded in setting the window layout to full-screen mode.'); - }).catch((err: BusinessError) => { - hilog.info(0x0000, TAG, - `Failed to set the window layout to full-screen mode. Cause: ${err.code}, ${err.message}`); - }); - } catch { - hilog.error(0x0000, TAG, 'Failed to set the window layout to full-screen mode. '); - } - }); + private static windowClass: window.Window; + + public static initialize(windowStage: window.WindowStage) { + try { + WindowUtil.windowClass = windowStage.getMainWindowSync(); + const uiContext: UIContext = WindowUtil.windowClass.getUIContext(); + AppStorage.setOrCreate(Constants.KEY_UI_CONTEXT, uiContext); + WindowUtil.requestFullScreen(WindowUtil.windowClass); + WindowUtil.registerBreakPoint(WindowUtil.windowClass); + } catch (err) { + const error = err as BusinessError; + hilog.error(0x0000, TAG, `Initialize failed. Cause code: ${error.code}, message: ${error.message}`); + } } - public static registerBreakPoint(windowStage: window.WindowStage) { - windowStage.getMainWindow((err: BusinessError, data: window.Window) => { - if (err.code) { - hilog.error(0x0000, TAG, `Failed to get main window: ${err.message}`); - return; - } + public static requestFullScreen(windowClass: window.Window): void { + // Realize the immersive effect. + try { + const promise: Promise = windowClass.setWindowLayoutFullScreen(true); + promise.then(() => { + hilog.info(0x0000, TAG, 'Succeeded in setting the window layout to full-screen mode.'); + }).catch((err: BusinessError) => { + hilog.error(0x0000, TAG, + `Failed to set the window layout to full-screen mode. Cause: ${err.code}, ${err.message}`); + }); + } catch (err) { + const error = err as BusinessError; + hilog.error(0x0000, TAG, + `Failed to set the window layout to full-screen mode.Cause code: ${error.code}, message: ${error.message}.`); + } + } + + public static registerBreakPoint(data: window.Window) { + try { BreakpointSystem.getInstance().updateWidthBp(data); + const systemAvoidArea: window.AvoidArea = data.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM); + const navIndicatorAvoidArea: window.AvoidArea = + data.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR); + WindowUtil.setAvoidArea(window.AvoidAreaType.TYPE_SYSTEM, systemAvoidArea); + WindowUtil.setAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR, navIndicatorAvoidArea); data.on('windowSizeChange', () => BreakpointSystem.getInstance().onWindowSizeChange(data)); data.on('avoidAreaChange', (avoidAreaOption) => { - if (avoidAreaOption.type === window.AvoidAreaType.TYPE_SYSTEM || - avoidAreaOption.type === window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) { - WindowUtil.setAvoidArea(avoidAreaOption.type, avoidAreaOption.area); - } + WindowUtil.setAvoidArea(avoidAreaOption.type, avoidAreaOption.area); }); - }) + } catch (err) { + const error = err as BusinessError; + hilog.error(0x0000, TAG, + `Register avoidAreaChange or windowSizeChange failed. code: ${error.code}, message: ${error.message}`); + } } // Get status bar height and indicator height. - public static setAvoidArea(type: window.AvoidAreaType, area: window.AvoidArea) { + private static setAvoidArea(type: window.AvoidAreaType, area: window.AvoidArea) { + const context = AppStorage.get(Constants.KEY_UI_CONTEXT); if (type === window.AvoidAreaType.TYPE_SYSTEM) { - AppStorage.setOrCreate('topRectHeight', px2vp(area.topRect.height)); - } else { - AppStorage.setOrCreate('bottomRectHeight', px2vp(area.bottomRect.height)); + AppStorage.setOrCreate(Constants.KEY_STATUS_BAR_HEIGHT, context?.px2vp(area.topRect.height)); + } else if (type === window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) { + AppStorage.setOrCreate(Constants.KEY_NAV_INDICATOR_HEIGHT, context?.px2vp(area.bottomRect.height)); } } } \ No newline at end of file diff --git a/multicolumnslibrary/src/main/ets/view/MailBoxView.ets b/multicolumnslibrary/src/main/ets/view/MailBoxView.ets new file mode 100644 index 0000000000000000000000000000000000000000..aa7fb587793333f9a4e0bd28031f271eaf49faf4 --- /dev/null +++ b/multicolumnslibrary/src/main/ets/view/MailBoxView.ets @@ -0,0 +1,126 @@ +/* + * 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 { Constants } from '../common/Constants'; +import { MailNavigation } from '../component/MailNavigation'; +import { MailSideBar } from '../component/MailSideBar'; +import { BreakpointType, BreakpointTypeEnum } from '../utils/BreakpointSystem'; + +@Builder +export function MailBoxBuilder() { + MailBoxView(); +} + +@Component +export struct MailBoxView { + @State isFold: boolean = false; + @State sideBarWidth: number = 304; + @StorageProp(Constants.KEY_BREAKPOINT) currentBreakPoint: string = BreakpointTypeEnum.MD; + @StorageProp(Constants.KEY_STATUS_BAR_HEIGHT) statusBarHeight: number = 0; + @StorageProp('isShowMailSideBar') isShowMailSideBar: boolean = + this.currentBreakPoint === BreakpointTypeEnum.LG || this.currentBreakPoint === BreakpointTypeEnum.XL ? true : false; + private pageStack: NavPathStack = new NavPathStack(); + + aboutToAppear(): void { + this.isShowMailSideBar = + this.currentBreakPoint === BreakpointTypeEnum.LG || this.currentBreakPoint === BreakpointTypeEnum.XL ? true : + false; + } + + build() { + NavDestination() { + GridRow() { + GridCol({ span: Constants.GRID_SPACE }) { + Stack({ alignContent: Alignment.TopStart }) { + SideBarContainer(SideBarContainerType.AUTO) { + // Area A + Column() { + MailSideBar() + } + .borderWidth({ right: 0.5 }) + .borderColor({ right: $r('sys.color.comp_divider') }) + .width('100%') + .height('100%') + .backgroundColor($r('sys.color.background_primary')) + + // Area B+C + Column() { + Stack() { + MailNavigation() + if (this.isFold && this.currentBreakPoint !== BreakpointTypeEnum.LG && + this.currentBreakPoint !== BreakpointTypeEnum.XL) { + Column() + .width('100%') + .height('100%') + .backgroundColor($r('app.color.detail_background')) + } + } + }.height('100%').width('100%') + } + .divider({ color: $r('sys.color.comp_divider'), strokeWidth: 0 }) + .sideBarWidth(this.sideBarWidth) + .minSideBarWidth(Constants.SIDE_BAR_WIDTH_MIN) + .minContentWidth(this.currentBreakPoint === BreakpointTypeEnum.SM ? '100%' : + Constants.SIDE_BAR_WIDTH_CONTENT_MIN) + .controlButton({ + left: new BreakpointType({ + sm: Constants.PADDING_16 + Constants.BACK_SIZE, + md: Constants.PADDING_24 + Constants.BACK_SIZE, + lg: Constants.PADDING_32 + Constants.BACK_SIZE, + }).getValue(this.currentBreakPoint), + top: this.statusBarHeight === 0 ? Constants.PADDING_16 : + this.statusBarHeight + Constants.PADDING_CUSTOM, + width: Constants.IMAGE_SIZE_SMALL, + height: Constants.IMAGE_SIZE_SMALL + }) + .showSideBar(this.isShowMailSideBar) + .onChange((value: boolean) => { + this.isShowMailSideBar = value; + this.isFold = value; + }) + + Button({ type: ButtonType.Circle }) { + SymbolGlyph($r('sys.symbol.chevron_backward')) + .fontColor([$r('sys.color.icon_primary')]) + .fontSize($r('sys.float.Title_M')) + } + .margin({ + left: new BreakpointType({ + sm: $r('sys.float.padding_level8'), + md: $r('sys.float.padding_level12'), + lg: $r('sys.float.padding_level16') + }).getValue(this.currentBreakPoint), + top: this.statusBarHeight === 0 ? Constants.PADDING_16 : + this.statusBarHeight + Constants.PADDING_CUSTOM + }) + .backgroundColor(Color.Transparent) + .height($r('app.float.button_height_small')) + .aspectRatio(1) + .onClick(() => { + this.pageStack.pop(); + }) + } + } + } + } + .hideTitleBar(true) + .onReady((context: NavDestinationContext) => { + this.pageStack = context.pathStack; + }) + } +} + + + diff --git a/multicolumnslibrary/src/main/ets/pages/MultiColumnsPage.ets b/multicolumnslibrary/src/main/ets/view/MultiColumnsView.ets similarity index 63% rename from multicolumnslibrary/src/main/ets/pages/MultiColumnsPage.ets rename to multicolumnslibrary/src/main/ets/view/MultiColumnsView.ets index 7aa4c730b61776a96e51a52658409c70c01bca3e..614b1e3181886fe280cfcc11bf1122bc711a3fed 100644 --- a/multicolumnslibrary/src/main/ets/pages/MultiColumnsPage.ets +++ b/multicolumnslibrary/src/main/ets/view/MultiColumnsView.ets @@ -13,17 +13,18 @@ * limitations under the License. */ -import { hilog } from '@kit.PerformanceAnalysisKit'; import { BusinessError } from '@kit.BasicServicesKit'; -import { CommonConstants, Route } from '../common/CommonConstants'; +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { Constants, Route } from '../common/Constants'; +import { BreakpointTypeEnum } from '../utils/BreakpointSystem'; @Component -export struct MultiColumnsPage { - @StorageProp('currentBreakpoint') curBp: string = CommonConstants.BREAK_POINT_SM; - @StorageProp('bottomRectHeight') bottomRectHeight: number = 0; - @StorageProp('topRectHeight') topRectHeight: number = 0; - @Provide('pathStack') pathStack: NavPathStack = new NavPathStack(); - private routes: Route[] = CommonConstants.ROUTES; +export struct MultiColumnsView { + @StorageProp(Constants.KEY_BREAKPOINT) curBp: string = BreakpointTypeEnum.SM; + @StorageProp(Constants.KEY_NAV_INDICATOR_HEIGHT) navIndicatorHeight: number = 0; + @StorageProp(Constants.KEY_STATUS_BAR_HEIGHT) statusBarHeight: number = 0; + @Provide(Constants.KEY_PATH_STACK) pathStack: NavPathStack = new NavPathStack(); + private routes: Route[] = Constants.ROUTES; build() { Navigation(this.pathStack) { @@ -34,44 +35,42 @@ export struct MultiColumnsPage { .fontSize($r('sys.float.Title_L')) .alignSelf(ItemAlign.Start) .margin({ - left: this.curBp === 'sm' ? $r('sys.float.padding_level0') : - this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8') + left: this.curBp === BreakpointTypeEnum.SM ? $r('sys.float.padding_level0') : + this.curBp === BreakpointTypeEnum.MD ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8') }) Column() { ForEach(this.routes, (item: Route) => { Button(item.text) .fontSize($r('sys.float.Subtitle_M')) .fontColor($r('sys.color.font_on_primary')) - .width(this.curBp === 'sm' ? '100%' : $r('app.float.index_button_width_lg')) + .width(this.curBp === BreakpointTypeEnum.SM ? '100%' : $r('app.float.index_button_width_lg')) .height($r('app.float.button_height')) .margin({ top: $r('sys.float.padding_level6') }) .backgroundColor($r('sys.color.comp_background_emphasize')) .onClick(() => { try { - hilog.info(0x0000, '1111111111', `Push url fail. Cause: ${item.to}`); - - this.pathStack.pushPathByName(item.to, null) + this.pathStack.pushPathByName(item.to, null); } catch (error) { hilog.error(0x0000, 'testTag', `Push url fail. Cause: ${(error as BusinessError).message}`); } }) }, (item: Route) => JSON.stringify(item)) } - .width(CommonConstants.FULL_WIDTH) + .width(Constants.FULL_WIDTH) } .backgroundColor($r('sys.color.background_primary')) - .width(CommonConstants.FULL_WIDTH) - .height(CommonConstants.FULL_HEIGHT) + .width(Constants.FULL_WIDTH) + .height(Constants.FULL_HEIGHT) .alignItems(HorizontalAlign.Center) .justifyContent(FlexAlign.SpaceBetween) .padding({ left: $r('sys.float.padding_level8'), right: $r('sys.float.padding_level8'), - top: CommonConstants.PADDING_TOP_INDEX + px2vp(this.topRectHeight), - bottom: CommonConstants.PADDING_BOTTOM_INDEX + px2vp(this.bottomRectHeight) + top: Constants.PADDING_TOP_INDEX + this.statusBarHeight, + bottom: Constants.PADDING_BOTTOM_INDEX + this.navIndicatorHeight }) } + .mode(NavigationMode.Stack) .hideTitleBar(true) - .padding({ top: this.topRectHeight }) } } \ No newline at end of file diff --git a/multicolumnslibrary/src/main/ets/view/PhotoAlbumView.ets b/multicolumnslibrary/src/main/ets/view/PhotoAlbumView.ets new file mode 100644 index 0000000000000000000000000000000000000000..7889935853bacb1f0af889a826ba9d5b2f0e6c0d --- /dev/null +++ b/multicolumnslibrary/src/main/ets/view/PhotoAlbumView.ets @@ -0,0 +1,91 @@ +/* + * 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 { Constants } from '../common/Constants'; +import { PhotoContent } from '../component/PhotoContent'; +import { PhotoSideBar } from '../component/PhotoSideBar'; +import { BreakpointType, BreakpointTypeEnum } from '../utils/BreakpointSystem'; + +@Builder +export function PhotoAlbumBuilder() { + PhotoAlbumView(); +} + +@Component +export struct PhotoAlbumView { + @StorageProp(Constants.KEY_BREAKPOINT) curBp: string = BreakpointTypeEnum.SM; + @StorageProp(Constants.KEY_STATUS_BAR_HEIGHT) statusBarHeight: number = 0; + @State sideBarStatus: boolean = this.curBp !== BreakpointTypeEnum.SM; + private pageStack: NavPathStack = new NavPathStack(); + + build() { + NavDestination() { + GridRow() { + GridCol({ span: Constants.GRID_SPACE }) { + Stack({ alignContent: Alignment.TopStart }) { + SideBarContainer(SideBarContainerType.AUTO) { + Column() { + PhotoSideBar() + } + .backgroundColor($r('sys.color.comp_background_primary')) + + Column() { + PhotoContent({ sideBarStatus: $sideBarStatus }) + } + .backgroundColor($r('sys.color.background_secondary')) + } + .divider({ strokeWidth: 0.5, color: $r('sys.color.comp_divider') }) + .controlButton({ + left: Constants.PADDING_16 + Constants.BACK_SIZE, + top: this.statusBarHeight === 0 ? Constants.PADDING_16 : + this.statusBarHeight + Constants.PADDING_CUSTOM, + width: Constants.IMAGE_SIZE_SMALL, + height: Constants.IMAGE_SIZE_SMALL + }) + .showSideBar(this.curBp !== BreakpointTypeEnum.SM) + .onChange((value: boolean) => { + this.sideBarStatus = value; + }) + + Button({ type: ButtonType.Circle }) { + SymbolGlyph($r('sys.symbol.chevron_backward')) + .fontColor([$r('sys.color.icon_primary')]) + .fontSize($r('sys.float.Title_M')) + } + .margin({ + left: new BreakpointType({ + sm: $r('sys.float.padding_level8'), + md: $r('sys.float.padding_level12'), + lg: $r('sys.float.padding_level16') + }).getValue(this.curBp), + top: this.statusBarHeight === 0 ? $r('sys.float.padding_level8') : + this.statusBarHeight + Constants.PADDING_CUSTOM, + }) + .backgroundColor(Color.Transparent) + .height($r('app.float.button_height_small')) + .aspectRatio(1) + .onClick(() => { + this.pageStack.pop(); + }) + } + } + } + } + .hideTitleBar(true) + .onReady((context: NavDestinationContext) => { + this.pageStack = context.pathStack; + }) + } +} \ No newline at end of file diff --git a/multicolumnslibrary/src/main/ets/application/Settings.ets b/multicolumnslibrary/src/main/ets/view/SettingsView.ets similarity index 68% rename from multicolumnslibrary/src/main/ets/application/Settings.ets rename to multicolumnslibrary/src/main/ets/view/SettingsView.ets index d6057851b7748ab5555f1d08bb5e869b5e10515b..4f450ae7fe5dcf494e78a94043ac006ece61090d 100644 --- a/multicolumnslibrary/src/main/ets/application/Settings.ets +++ b/multicolumnslibrary/src/main/ets/view/SettingsView.ets @@ -13,27 +13,28 @@ * limitations under the License. */ -import { BreakpointType } from '../utils/BreakpointSystem'; -import { MainItem } from '../common/SettingItem'; -import { WlanItem } from '../common/WlanItem'; - -let storage = LocalStorage.getShared(); +import { Constants } from '../common/Constants'; +import { MainItem } from '../component/SettingItem'; +import { WlanItem } from '../component/WlanItem'; +import { BreakpointTypeEnum } from '../utils/BreakpointSystem'; @Builder export function SettingsBuilder() { - Settings(); + SettingsView(); } -@Entry(storage) @Component -struct Settings { +export struct SettingsView { @State pathInfo: NavPathStack = new NavPathStack(); - @LocalStorageLink('currentBreakPoint') currentBreakPoint: string = 'md'; - @StorageProp('topRectHeight') topRectHeight: number = 0; + @StorageProp(Constants.KEY_BREAKPOINT) currentBreakPoint: string = BreakpointTypeEnum.MD; + @StorageProp(Constants.KEY_STATUS_BAR_HEIGHT) statusBarHeight: number = 0; + @StorageProp(Constants.KEY_NAV_INDICATOR_HEIGHT) navIndicatorHeight: number = 0; @Builder - myRouter(name: string, param?: number | undefined) { - WlanItem() + myRouter(name: string) { + if (name === 'wlan') { + WlanItem() + } } @Builder @@ -41,31 +42,31 @@ struct Settings { Divider() .strokeWidth(0.5) .color($r('sys.color.ohos_id_color_list_separator')) - .margin({ left: 8, right: 8 }) + .margin({ left: $r('sys.float.padding_level4'), right: $r('sys.float.padding_level4') }) } aboutToAppear() { - this.pathInfo.pushPath({ name: 'one' }); + this.pathInfo.pushPath({ name: 'wlan' }); } build() { NavDestination() { GridRow() { - GridCol({ span: { sm: 12, md: 12, lg: 12 } }) { + GridCol({ span: Constants.GRID_SPACE }) { Navigation(this.pathInfo) { - List({ space: 12 }) { + List({ space: Constants.GRID_SPACE }) { ListItem() { Search({ placeholder: $r('app.string.search') }) .backgroundColor($r('sys.color.comp_background_primary')) - .margin({ top: 16 }) + .margin({ top: $r('sys.float.padding_level8') }) } .width('100%') ListItem() { MainItem({ isUserItem: true, src: $r('app.media.ic_mine_normal') }) .backgroundColor($r('sys.color.comp_background_primary')) - .borderRadius(16) - .padding({ top: 12, bottom: 12 }) + .borderRadius($r('sys.float.corner_radius_level8')) + .padding({ top: $r('sys.float.padding_level6'), bottom: $r('sys.float.padding_level6') }) } ListItem() { @@ -89,9 +90,9 @@ struct Settings { src: $r('app.media.ic_settings_more_connections') }) }.width('100%') - .borderRadius(16) + .borderRadius($r('sys.float.corner_radius_level8')) .backgroundColor($r('sys.color.comp_background_primary')) - .padding({ top: 4, bottom: 4 }) + .padding({ top: $r('sys.float.padding_level2'), bottom: $r('sys.float.padding_level2') }) } ListItem() { @@ -103,9 +104,9 @@ struct Settings { src: $r('app.media.displayAndBrightness') }) }.width('100%') - .borderRadius(16) + .borderRadius($r('sys.float.corner_radius_level8')) .backgroundColor($r('sys.color.comp_background_primary')) - .padding({ top: 4, bottom: 4 }) + .padding({ top: $r('sys.float.padding_level2'), bottom: $r('sys.float.padding_level2') }) } ListItem() { @@ -120,9 +121,9 @@ struct Settings { this.CustomDivider() MainItem({ itemDesc: $r('app.string.privacy'), src: $r('app.media.privacy') }) }.width('100%') - .borderRadius(24) + .borderRadius($r('sys.float.corner_radius_level12')) .backgroundColor($r('sys.color.comp_background_primary')) - .padding({ top: 4, bottom: 4 }) + .padding({ top: $r('sys.float.padding_level2'), bottom: $r('sys.float.padding_level2') }) } ListItem() { @@ -133,21 +134,25 @@ struct Settings { this.CustomDivider() MainItem({ itemDesc: $r('app.string.aboutDevice'), src: $r('app.media.aboutDevice') }) }.width('100%') - .borderRadius(16) + .borderRadius($r('sys.float.corner_radius_level8')) .backgroundColor($r('sys.color.comp_background_primary')) - .padding(4) + .padding($r('sys.float.padding_level2')) } + .margin({ + bottom: this.navIndicatorHeight === 0 ? Constants.PADDING_BOTTOM_INDEX : this.navIndicatorHeight + }) } .scrollBar(BarState.Off) .width('100%') .height('100%') .padding({ - left: new BreakpointType({ sm: 16, md: 16, lg: 16 }).getValue(this.currentBreakPoint), - right: new BreakpointType({ sm: 16, md: 16, lg: 16 }).getValue(this.currentBreakPoint) + left: $r('sys.float.padding_level8'), + right: $r('sys.float.padding_level8') }) } - .navBarWidth(293) + .navBarWidth($r('app.float.setting_navBar_width')) .title($r('app.string.settings')) + .titleMode(NavigationTitleMode.Mini) .backgroundColor($r('sys.color.background_secondary')) .width('100%') .height('100%') @@ -156,12 +161,9 @@ struct Settings { } .borderWidth({ right: 0.5 }) .borderColor({ right: $r('sys.color.comp_divider') }) - .backgroundColor($r('sys.color.background_secondary')) - .onBreakpointChange((breakpoint: string) => { - this.currentBreakPoint = breakpoint; - }) } .hideTitleBar(true) - .padding({ top: px2vp(this.topRectHeight) }) + .padding({ top: this.statusBarHeight }) + .backgroundColor($r('sys.color.background_secondary')) } } \ No newline at end of file diff --git a/multicolumnslibrary/src/main/resources/base/element/color.json b/multicolumnslibrary/src/main/resources/base/element/color.json index 3c712962da3c2751c2b9ddb53559afcbd2b54a02..cf371e72227388b32106d7c67ced9f0c6e2abd64 100644 --- a/multicolumnslibrary/src/main/resources/base/element/color.json +++ b/multicolumnslibrary/src/main/resources/base/element/color.json @@ -1,8 +1,24 @@ { "color": [ { - "name": "start_window_background", - "value": "#FFFFFF" + "name": "detail_background", + "value": "#33000000" + }, + { + "name": "text_color", + "value": "#18181a" + }, + { + "name": "item_selected_color", + "value": "#19254ff7" + }, + { + "name": "mail_side_bg_color", + "value": "#254ff7" + }, + { + "name": "mail_side_font_color", + "value": "#fff" } ] } \ No newline at end of file diff --git a/multicolumnslibrary/src/main/resources/base/element/float.json b/multicolumnslibrary/src/main/resources/base/element/float.json index 6d2c7b40903578cfafbf41ff058dc2797666d166..506c8e9531bd2195a3bdb460da5a1dda02f79a0c 100644 --- a/multicolumnslibrary/src/main/resources/base/element/float.json +++ b/multicolumnslibrary/src/main/resources/base/element/float.json @@ -7,6 +7,106 @@ { "name": "button_height", "value": "40vp" + }, + { + "name": "button_height_small", + "value": "24vp" + }, + { + "name": "image_size", + "value": "24vp" + }, + { + "name": "image_size_32", + "value": "32vp" + }, + { + "name": "image_size_48", + "value": "48vp" + }, + { + "name": "right_icon_width", + "value": "12vp" + }, + { + "name": "tag_circle_size", + "value": "12vp" + }, + { + "name": "text_circle_size", + "value": "18vp" + }, + { + "name": "setting_toggle_width", + "value": "36vp" + }, + { + "name": "setting_toggle_height", + "value": "20vp" + }, + { + "name": "item_height", + "value": "56vp" + }, + { + "name": "item_height_48", + "value": "48vp" + }, + { + "name": "mail_account_margin_top", + "value": "78vp" + }, + { + "name": "mail_inbox_height", + "value": "140vp" + }, + { + "name": "mail_inbox_margin_top", + "value": "80vp" + }, + { + "name": "mail_mail_height", + "value": "96vp" + }, + { + "name": "mail_title_height", + "value": "162vp" + }, + { + "name": "content_image_height", + "value": "166vp" + }, + { + "name": "albums_image_column_gap", + "value": "22vp" + }, + { + "name": "albums_image_row_gap", + "value": "17vp" + }, + { + "name": "setting_navBar_width", + "value": "293vp" + }, + { + "name": "line_height_12", + "value": "12fp" + }, + { + "name": "line_height_19", + "value": "19fp" + }, + { + "name": "line_height_22", + "value": "22fp" + }, + { + "name": "line_height_23", + "value": "23fp" + }, + { + "name": "line_height_25", + "value": "25fp" } ] } \ No newline at end of file diff --git a/multicolumnslibrary/src/main/resources/base/element/string.json b/multicolumnslibrary/src/main/resources/base/element/string.json index cc78618ece223a84d52973e1710d5de58db25a90..45578cbd1b53ff1302c3fae20eed5e49fc34f97f 100644 --- a/multicolumnslibrary/src/main/resources/base/element/string.json +++ b/multicolumnslibrary/src/main/resources/base/element/string.json @@ -1,17 +1,5 @@ { "string": [ - { - "name": "module_desc", - "value": "module description" - }, - { - "name": "EntryAbility_desc", - "value": "description" - }, - { - "name": "EntryAbility_label", - "value": "MultiColumns" - }, { "name": "account", "value": "Account" @@ -28,10 +16,30 @@ "name": "nonSense", "value": "xxxx" }, + { + "name": "date", + "value": "4/12" + }, { "name": "recvBox", "value": "Inbox" }, + { + "name": "inboxSubtitle", + "value": "xxxxxxxxxxxxx" + }, + { + "name": "mailDetailTitle", + "value": "HHHxx UXD" + }, + { + "name": "postMaster", + "value": "PostMaster" + }, + { + "name": "postTime", + "value": "09:42" + }, { "name": "album", "value": "Albums" diff --git a/multicolumnslibrary/src/main/resources/base/profile/route_map.json b/multicolumnslibrary/src/main/resources/base/profile/route_map.json index d7fe41757e7a2ec9165d3ef2526ef7e21278d443..0ff59e94e137f26bad0a68b03fc0586abbd5c5e5 100644 --- a/multicolumnslibrary/src/main/resources/base/profile/route_map.json +++ b/multicolumnslibrary/src/main/resources/base/profile/route_map.json @@ -2,7 +2,7 @@ "routerMap": [ { "name": "MailBox", - "pageSourceFile": "src/main/ets/application/MailBox.ets", + "pageSourceFile": "src/main/ets/view/MailBoxView.ets", "buildFunction": "MailBoxBuilder", "data": { "description": "this is MailBox" @@ -10,7 +10,7 @@ }, { "name": "PhotoAlbum", - "pageSourceFile": "src/main/ets/application/PhotoAlbum.ets", + "pageSourceFile": "src/main/ets/view/PhotoAlbumView.ets", "buildFunction": "PhotoAlbumBuilder", "data": { "description": "this is PhotoAlbum" @@ -18,7 +18,7 @@ }, { "name": "Settings", - "pageSourceFile": "src/main/ets/application/Settings.ets", + "pageSourceFile": "src/main/ets/view/SettingsView.ets", "buildFunction": "SettingsBuilder", "data": { "description": "this is Settings" diff --git a/multicolumnslibrary/src/main/resources/en_US/element/string.json b/multicolumnslibrary/src/main/resources/en_US/element/string.json index cc78618ece223a84d52973e1710d5de58db25a90..98ab07236ef4a065e0d87ecda461d5f7412dc1a7 100644 --- a/multicolumnslibrary/src/main/resources/en_US/element/string.json +++ b/multicolumnslibrary/src/main/resources/en_US/element/string.json @@ -1,17 +1,5 @@ { "string": [ - { - "name": "module_desc", - "value": "module description" - }, - { - "name": "EntryAbility_desc", - "value": "description" - }, - { - "name": "EntryAbility_label", - "value": "MultiColumns" - }, { "name": "account", "value": "Account" @@ -24,10 +12,30 @@ "name": "recUser", "value": "Recipient：" }, + { + "name": "inboxSubtitle", + "value": "xxxxxxxxxxxxx" + }, + { + "name": "mailDetailTitle", + "value": "HHHxx UXD" + }, + { + "name": "postMaster", + "value": "PostMaster" + }, + { + "name": "postTime", + "value": "09:42" + }, { "name": "nonSense", "value": "xxxx" }, + { + "name": "date", + "value": "4/12" + }, { "name": "recvBox", "value": "Inbox" diff --git a/multicolumnslibrary/src/main/resources/zh_CN/element/string.json b/multicolumnslibrary/src/main/resources/zh_CN/element/string.json index 8cfea631c8a2622a0b5f9341c2d291e48876b992..db71744d5cc9dc7b7e319a14a80598f30bf75783 100644 --- a/multicolumnslibrary/src/main/resources/zh_CN/element/string.json +++ b/multicolumnslibrary/src/main/resources/zh_CN/element/string.json @@ -1,17 +1,5 @@ { "string": [ - { - "name": "module_desc", - "value": "模块描述" - }, - { - "name": "EntryAbility_desc", - "value": "description" - }, - { - "name": "EntryAbility_label", - "value": "MultiColumns" - }, { "name": "account", "value": "账户" @@ -28,10 +16,30 @@ "name": "nonSense", "value": "xxxx" }, + { + "name": "date", + "value": "4/12" + }, { "name": "recvBox", "value": "收件箱" }, + { + "name": "inboxSubtitle", + "value": "xxxxxxxxxxxxx" + }, + { + "name": "mailDetailTitle", + "value": "HHHxx UXD" + }, + { + "name": "postMaster", + "value": "PostMaster" + }, + { + "name": "postTime", + "value": "09:42" + }, { "name": "album", "value": "相册" diff --git a/multicolumnssample/obfuscation-rules.txt b/multicolumnssample/obfuscation-rules.txt index a1dfa0bd175984dc49e641436aa67b1de1b8abeb..835187d7041cb70b39b532a5db921e6b79be72f8 100644 --- a/multicolumnssample/obfuscation-rules.txt +++ b/multicolumnssample/obfuscation-rules.txt @@ -16,7 +16,7 @@ # Keep options: # -keep-property-name: specifies property names that you want to keep # -keep-global-name: specifies names that you want to keep in the global scope --enable-property-obfuscation +#-enable-property-obfuscation -enable-toplevel-obfuscation --enable-filename-obfuscation +#-enable-filename-obfuscation -enable-export-obfuscation \ No newline at end of file diff --git a/multicolumnssample/oh-package.json5 b/multicolumnssample/oh-package.json5 index 6a0600f62db748f2cc5d602b901bfd2eed709e61..c44c3652c2453ad1253038806ed634f0d946d074 100644 --- a/multicolumnssample/oh-package.json5 +++ b/multicolumnssample/oh-package.json5 @@ -7,6 +7,6 @@ "main": "", "version": "1.0.0", "dependencies": { - "multicolumnslibrary": "file:../multicolumnslibrary" + "@ohos_samples/multicolumnslibrary": "file:../multicolumnslibrary" } } \ No newline at end of file diff --git a/multicolumnssample/src/main/ets/entryability/EntryAbility.ets b/multicolumnssample/src/main/ets/entryability/EntryAbility.ets index 0570d52a61a2ede9158ebe4bb8d7383013ce9138..70f2510e634793f4df926690be67b95e1014ca96 100644 --- a/multicolumnssample/src/main/ets/entryability/EntryAbility.ets +++ b/multicolumnssample/src/main/ets/entryability/EntryAbility.ets @@ -14,13 +14,12 @@ */ import { ConfigurationConstant, UIAbility } from '@kit.AbilityKit'; -import { window } from '@kit.ArkUI'; -import { hilog } from '@kit.PerformanceAnalysisKit'; +import { window } from '@kit.ArkUI'; import { BusinessError } from '@kit.BasicServicesKit'; -import { WindowUtil } from 'multicolumnslibrary'; +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { MultiColumnController } from '@ohos_samples/multicolumnslibrary'; export default class EntryAbility extends UIAbility { - onCreate(): void { hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET); @@ -33,14 +32,12 @@ export default class EntryAbility extends UIAbility { onWindowStageCreate(windowStage: window.WindowStage): void { // Main window is created, set main page for this ability hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); - WindowUtil.requestFullScreen(windowStage) - windowStage.loadContent('pages/Index', (err: BusinessError) => { if (err.code) { hilog.error(0x0000, 'testTag', `Failed to load the content. Cause: ${err.message}`); return; } - WindowUtil.registerBreakPoint(windowStage) + MultiColumnController.initWindowConfig(windowStage); }); } diff --git a/multicolumnssample/src/main/ets/pages/Index.ets b/multicolumnssample/src/main/ets/pages/Index.ets index 07aa7f74fbe8e87de6e67783707d40f2d0397304..69c3d6ab9b07f98935fad5e1d09cd795a537b312 100644 --- a/multicolumnssample/src/main/ets/pages/Index.ets +++ b/multicolumnssample/src/main/ets/pages/Index.ets @@ -13,14 +13,14 @@ * limitations under the License. */ -import { MultiColumnsPage } from 'multicolumnslibrary' +import { MultiColumnsView } from '@ohos_samples/multicolumnslibrary'; @Entry @Component struct Index { build() { Stack() { - MultiColumnsPage() + MultiColumnsView() } } } \ No newline at end of file diff --git a/multicolumnssample/src/main/module.json5 b/multicolumnssample/src/main/module.json5 index 816e32151292dd2049128df542b51fa3bf0769f6..1fcb880e44e19e4c9584a07b69ada8cebc543bbe 100644 --- a/multicolumnssample/src/main/module.json5 +++ b/multicolumnssample/src/main/module.json5 @@ -17,7 +17,7 @@ "name": "MulticolumnssampleAbility", "srcEntry": "./ets/entryability/EntryAbility.ets", "description": "$string:EntryAbility_desc", - "icon": "$media:icon", + "icon": "$media:layered_image", "label": "$string:EntryAbility_label", "startWindowIcon": "$media:icon", "startWindowBackground": "$color:start_window_background", diff --git a/multicolumnssample/src/main/resources/base/element/color.json b/multicolumnssample/src/main/resources/base/element/color.json new file mode 100644 index 0000000000000000000000000000000000000000..3c712962da3c2751c2b9ddb53559afcbd2b54a02 --- /dev/null +++ b/multicolumnssample/src/main/resources/base/element/color.json @@ -0,0 +1,8 @@ +{ + "color": [ + { + "name": "start_window_background", + "value": "#FFFFFF" + } + ] +} \ No newline at end of file diff --git a/multicolumnssample/src/main/resources/base/element/string.json b/multicolumnssample/src/main/resources/base/element/string.json new file mode 100644 index 0000000000000000000000000000000000000000..b32df04202bba4c703e4824229ec34c7f2f102b6 --- /dev/null +++ b/multicolumnssample/src/main/resources/base/element/string.json @@ -0,0 +1,16 @@ +{ + "string": [ + { + "name": "module_desc", + "value": "module description" + }, + { + "name": "EntryAbility_desc", + "value": "description" + }, + { + "name": "EntryAbility_label", + "value": "MultiColumns" + } + ] +} \ No newline at end of file diff --git a/multicolumnssample/src/main/resources/base/media/background.png b/multicolumnssample/src/main/resources/base/media/background.png new file mode 100644 index 0000000000000000000000000000000000000000..f939c9fa8cc8914832e602198745f592a0dfa34d Binary files /dev/null and b/multicolumnssample/src/main/resources/base/media/background.png differ diff --git a/multicolumnssample/src/main/resources/base/media/foreground.png b/multicolumnssample/src/main/resources/base/media/foreground.png new file mode 100644 index 0000000000000000000000000000000000000000..4483ddad1f079e1089d685bd204ee1cfe1d01902 Binary files /dev/null and b/multicolumnssample/src/main/resources/base/media/foreground.png differ diff --git a/multicolumnssample/src/main/resources/base/media/layered_image.json b/multicolumnssample/src/main/resources/base/media/layered_image.json new file mode 100644 index 0000000000000000000000000000000000000000..fb49920440fb4d246c82f9ada275e26123a2136a --- /dev/null +++ b/multicolumnssample/src/main/resources/base/media/layered_image.json @@ -0,0 +1,7 @@ +{ + "layered-image": + { + "background" : "$media:background", + "foreground" : "$media:foreground" + } +} \ No newline at end of file diff --git a/multicolumnssample/src/main/resources/base/media/startIcon.png b/multicolumnssample/src/main/resources/base/media/startIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c Binary files /dev/null and b/multicolumnssample/src/main/resources/base/media/startIcon.png differ diff --git a/multicolumnssample/src/main/resources/en_US/element/string.json b/multicolumnssample/src/main/resources/en_US/element/string.json new file mode 100644 index 0000000000000000000000000000000000000000..b32df04202bba4c703e4824229ec34c7f2f102b6 --- /dev/null +++ b/multicolumnssample/src/main/resources/en_US/element/string.json @@ -0,0 +1,16 @@ +{ + "string": [ + { + "name": "module_desc", + "value": "module description" + }, + { + "name": "EntryAbility_desc", + "value": "description" + }, + { + "name": "EntryAbility_label", + "value": "MultiColumns" + } + ] +} \ No newline at end of file diff --git a/multicolumnssample/src/main/resources/zh_CN/element/string.json b/multicolumnssample/src/main/resources/zh_CN/element/string.json new file mode 100644 index 0000000000000000000000000000000000000000..26f3ed8d6a716f0d623794713b93743d1454ff72 --- /dev/null +++ b/multicolumnssample/src/main/resources/zh_CN/element/string.json @@ -0,0 +1,16 @@ +{ + "string": [ + { + "name": "module_desc", + "value": "模块描述" + }, + { + "name": "EntryAbility_desc", + "value": "描述" + }, + { + "name": "EntryAbility_label", + "value": "一多分栏控件" + } + ] +} \ No newline at end of file