From d9684b7c2f75c6051bb019c415fc0c16f7390af2 Mon Sep 17 00:00:00 2001 From: "@two-thousand-or-three-thousand" Date: Tue, 20 Dec 2022 15:44:11 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E7=89=B9=E6=95=88?= =?UTF-8?q?=E5=92=8C=E6=81=A2=E5=A4=8D=E9=BB=98=E8=AE=A4=E6=96=87=E5=AD=97?= =?UTF-8?q?=E5=A4=A7=E5=B0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: @two-thousand-or-three-thousand --- .../main/resources/rawfile/editor_style.css | 1 - .../src/main/resources/rawfile/rich_editor.js | 3 --- .../main/ets/components/FolderListComp.ets | 25 ++++++++----------- .../main/ets/components/NoteContentComp.ets | 5 ++++ .../src/main/ets/components/NoteListComp.ets | 8 ++++-- .../default/src/main/ets/pages/NoteHome.ets | 24 ++++++++++++------ .../src/main/ets/pages/NoteHomePortrait.ets | 20 +++++++++++---- product/default/src/main/module.json5 | 3 +++ 8 files changed, 55 insertions(+), 34 deletions(-) diff --git a/common/resources/src/main/resources/rawfile/editor_style.css b/common/resources/src/main/resources/rawfile/editor_style.css index 47fbaf0..d296b94 100644 --- a/common/resources/src/main/resources/rawfile/editor_style.css +++ b/common/resources/src/main/resources/rawfile/editor_style.css @@ -37,7 +37,6 @@ body { background-size: cover; color: #182431; opacity: 0.9; - font-size: 24px; overflow: scroll; user-select: none; } diff --git a/common/resources/src/main/resources/rawfile/rich_editor.js b/common/resources/src/main/resources/rawfile/rich_editor.js index 5a4fd93..be51ea8 100644 --- a/common/resources/src/main/resources/rawfile/rich_editor.js +++ b/common/resources/src/main/resources/rawfile/rich_editor.js @@ -448,7 +448,6 @@ document.getElementById('openAlbum').addEventListener('click', () => { }) function changeSizeToRk() { - document.getElementById('editorjs').style.fontSize = '24px'; document.getElementById('img1').style.width = '40px'; document.getElementById('img1').style.height = '40px'; document.getElementById('img2').style.width = '40px'; @@ -461,7 +460,6 @@ function changeSizeToRk() { } function changeSizeToPhone() { - document.getElementById('editorjs').style.fontSize = '16px'; document.getElementById('img1').style.width = '24px'; document.getElementById('img1').style.height = '24px'; document.getElementById('img2').style.width = '24px'; @@ -474,7 +472,6 @@ function changeSizeToPhone() { } function changeSizeToTablet() { - document.getElementById('editorjs').style.fontSize = '16px'; document.getElementById('img1').style.width = '28px'; document.getElementById('img1').style.height = '28px'; document.getElementById('img2').style.width = '28px'; diff --git a/features/src/main/ets/components/FolderListComp.ets b/features/src/main/ets/components/FolderListComp.ets index d13908a..40433ef 100644 --- a/features/src/main/ets/components/FolderListComp.ets +++ b/features/src/main/ets/components/FolderListComp.ets @@ -40,6 +40,7 @@ export struct FolderListComp { @StorageLink('breakPoint') breakPoints: string = 'lg' controllerShow: WebController TAG = "FolderListComp" + @Consume('AsideWidth') asideWidth: number build() { Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween }) { @@ -51,8 +52,11 @@ export struct FolderListComp { .responseRegion({ x: -15.0, y: -15.0, width: 54, height: 54 }) .onClick(() => { if (this.breakPoints == 'sm' || this.breakPoints == 'md') { - this.expandStatus = !this.expandStatus + animateTo({ duration: 200 }, () => { + this.expandStatus = !this.expandStatus + }) } else { + this.asideWidth = 0 this.sectionStatus = (this.sectionStatus == 3 ? 2 : 3) // save continue data AppStorage.SetOrCreate('ContinueSection', this.sectionStatus) @@ -76,7 +80,9 @@ export struct FolderListComp { } } }, folderItem => folderItem.name.toString()) - }.width('100%').height(500) + } + .width('100%') + .height(500) .margin({ bottom: 120 }) .padding({ left: 12, right: 12 }) .flexGrow(1) @@ -99,6 +105,8 @@ export struct FolderListComp { .padding({ left: 12, right: 12, bottom: 24 }) } .height("100%") + .backgroundColor($r('app.color.folder_color_d6d6d6')) + .backgroundBlurStyle(BlurStyle.Thick) } aboutToAppear(): void { @@ -504,17 +512,4 @@ struct FolderItemComp { ) ) } -} - - -@Component -export struct FolderListBackGround { - build() { - Column() { - } - .width("100%") - .height("100%") - .backgroundColor($r('app.color.folder_color_d6d6d6')) - .backgroundBlurStyle(BlurStyle.Thick) - } } \ No newline at end of file diff --git a/features/src/main/ets/components/NoteContentComp.ets b/features/src/main/ets/components/NoteContentComp.ets index abcc67e..85ffc53 100644 --- a/features/src/main/ets/components/NoteContentComp.ets +++ b/features/src/main/ets/components/NoteContentComp.ets @@ -62,6 +62,7 @@ export struct NoteContentComp { @StorageLink('ScrollTopPercent') scrollTopPercent: number = 0.0 @StorageLink('isUpdate') isUpdate: boolean = false @StorageLink('refreshCurrentNote') @Watch('isDataChange') refreshCurrentNote: boolean = false + @Consume('AsideWidth') asideWidth: number isDataChange() { if (!this.refreshCurrentNote) { @@ -278,6 +279,7 @@ export struct NoteContentComp { LogUtil.info(TAG, "isContinue : " + isContinue) // 点击第三屏进入全屏编辑模式 if (this.sectionStatus != 1 || isContinue) { + this.asideWidth = 0 this.lastSectionStatus = this.sectionStatus this.sectionStatus = 1 this.controllerShow.runJavaScript({ script: "RICH_EDITOR.setInputEnabled(true)" }) @@ -475,6 +477,7 @@ export struct ToolBarComp { autoCancel: false, customStyle: true, }) + @Consume('AsideWidth') asideWidth: number onDeleteConfirm() { if (this.selectedFolderData.uuid != SysDefFolderUuid.RecentDeletes) { @@ -523,9 +526,11 @@ export struct ToolBarComp { if (this.sectionStatus != 1) { this.lastSectionStatus = this.sectionStatus this.sectionStatus = 1 + this.asideWidth = 0 this.controllerShow.runJavaScript({ script: "RICH_EDITOR.setInputEnabled(true)" }) } else { if (this.lastSectionStatus != undefined) { + this.asideWidth = 200 // 切换为小屏预览模式 this.controllerShow.runJavaScript({ script: "RICH_EDITOR.setInputEnabled(false)" }) this.sectionStatus = this.lastSectionStatus diff --git a/features/src/main/ets/components/NoteListComp.ets b/features/src/main/ets/components/NoteListComp.ets index f8c7cb0..60a2894 100644 --- a/features/src/main/ets/components/NoteListComp.ets +++ b/features/src/main/ets/components/NoteListComp.ets @@ -57,10 +57,10 @@ export struct NoteListComp { @Consume('SelectedFolderData') selectedFolderData: FolderData @Consume('Search') search: boolean controllerShow: WebController + @Consume('AsideWidth') asideWidth: number build() { Flex({ direction: FlexDirection.Column }) { - Flex({ direction: FlexDirection.Column }) { NoteOverViewComp({ controllerShow: this.controllerShow }) Column() { @@ -106,6 +106,7 @@ struct NoteOverViewComp { controllerShow: WebController @State noteNumber: any = undefined @StorageLink('isUpdate') isUpdate: boolean = false + @Consume('AsideWidth') asideWidth: number build() { Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { @@ -124,8 +125,11 @@ struct NoteOverViewComp { .visibility(this.breakPoints == 'lg' && this.sectionStatus == 3 ? Visibility.None : Visibility.Visible) .onClick(() => { if (this.breakPoints == 'sm' || this.breakPoints == 'md') { - this.expandStatus = !this.expandStatus + animateTo({ duration: 200 }, () => { + this.expandStatus = !this.expandStatus + }) } else { + this.asideWidth = 200 this.sectionStatus = (this.sectionStatus == 3 ? 2 : 3) // save continue data AppStorage.SetOrCreate('ContinueSection', this.sectionStatus) diff --git a/product/default/src/main/ets/pages/NoteHome.ets b/product/default/src/main/ets/pages/NoteHome.ets index 14388e7..7499153 100644 --- a/product/default/src/main/ets/pages/NoteHome.ets +++ b/product/default/src/main/ets/pages/NoteHome.ets @@ -13,7 +13,7 @@ * limitations under the License. */ -import { FolderListComp, FolderListBackGround } from '@ohos/component/src/main/ets/components/FolderListComp' +import { FolderListComp } from '@ohos/component/src/main/ets/components/FolderListComp' import { NoteListComp } from '@ohos/component/src/main/ets/components/NoteListComp' import { NoteContentComp } from '@ohos/component/src/main/ets/components/NoteContentComp' import StyleConstants from '@ohos/utils/src/main/ets/default/constants/StyleConstants' @@ -47,6 +47,7 @@ export struct NoteHomeComp { @StorageLink('breakPoint') breakPoints: string = 'lg' controllerShow: WebController TAG = "NoteHomeComp_Tablet" + @Provide('AsideWidth') asideWidth: number = 200 build() { Flex({ justifyContent: FlexAlign.Start }) { @@ -57,11 +58,9 @@ export struct NoteHomeComp { } .flexShrink(0) .backgroundColor($r("app.color.folderlist_bgcolor_f1f3f5")) - .width(200) + .width(this.asideWidth) .height(StyleConstants.PERCENTAGE_100) - .visibility( - LayoutUtil.getWidthWeightMessage(this.sectionStatus) - .folderListVisibility == 0 ? Visibility.None : Visibility.Visible) + .animation({ duration: 200 }) .enabled(this.search ? false : true) // Note list display area @@ -133,14 +132,23 @@ export struct NoteHomeComp { .enabled(this.longpress || this.search && this.inputKeyword.length == 0 ? false : true) } + // 蒙层 + if (this.expandStatus) { + Column() + .width('100%') + .height('100%') + .position({ x: 0, y: 0 }) + .backgroundColor(Color.Black) + .opacity(0.2) + .transition({ opacity: 0 }) + } //Folder list display area - Stack() { - FolderListBackGround() + Column() { FolderListComp() } .width(200) .height(StyleConstants.PERCENTAGE_100) - .visibility(this.expandStatus == false ? Visibility.None : Visibility.Visible) + .translate({ x: this.expandStatus ? 0 : '-200', y: 0 }) } .width(StyleConstants.PERCENTAGE_100).height(StyleConstants.PERCENTAGE_100) } diff --git a/product/default/src/main/ets/pages/NoteHomePortrait.ets b/product/default/src/main/ets/pages/NoteHomePortrait.ets index e5ab098..66e9356 100644 --- a/product/default/src/main/ets/pages/NoteHomePortrait.ets +++ b/product/default/src/main/ets/pages/NoteHomePortrait.ets @@ -13,7 +13,7 @@ * limitations under the License. */ -import { FolderListComp, FolderListBackGround } from '@ohos/component/src/main/ets/components/FolderListComp' +import { FolderListComp } from '@ohos/component/src/main/ets/components/FolderListComp' import { NoteListComp } from '@ohos/component/src/main/ets/components/NoteListComp' import { NoteContentCompPortrait } from '@ohos/component/src/main/ets/components/NoteContentCompPortrait' import StyleConstants from '@ohos/utils/src/main/ets/default/constants/StyleConstants' @@ -46,10 +46,10 @@ export struct NoteHomePortraitComp { @Provide('SelectedAll') selectedAll: boolean = false; @Provide('EditModel') editModel: boolean = false TAG = "NoteHomePortraitComp_Phone" + @Provide('AsideWidth') asideWidth: number = 200 build() { Stack({ alignContent: Alignment.Start }) { - // Note list display area Flex({ direction: FlexDirection.Column, wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Start }) { NoteListComp() @@ -59,14 +59,24 @@ export struct NoteHomePortraitComp { .enabled(this.expandStatus ? false : true) .backgroundColor($r("app.color.notelist_bgcolor_f1f3f5")) + // 蒙层 + if (this.expandStatus) { + Column() + .width('100%') + .height('100%') + .position({ x: 0, y: 0 }) + .backgroundColor(Color.Black) + .opacity(0.2) + .transition({ opacity: 0 }) + } //Folder list display area - Stack() { - FolderListBackGround() + Column() { FolderListComp() } .width(200) .height(StyleConstants.PERCENTAGE_100) - .visibility(this.expandStatus == false ? Visibility.None : Visibility.Visible) + .position({ x: 0, y: 0 }) + .translate({ x: this.expandStatus ? 0 : '-200', y: 0 }) } .width(StyleConstants.PERCENTAGE_100).height(StyleConstants.PERCENTAGE_100) } diff --git a/product/default/src/main/module.json5 b/product/default/src/main/module.json5 index def5ff9..90ee051 100644 --- a/product/default/src/main/module.json5 +++ b/product/default/src/main/module.json5 @@ -45,6 +45,9 @@ "name": "ohos.permission.DISTRIBUTED_DATASYNC", "reason": "$string:distributed_dataSync_permission" }, + { + "name": "ohos.permission.START_ABILITIES_FROM_BACKGROUND" + } ], "deliveryWithInstall": true, "installationFree": false, -- Gitee