From 14c859ac2e3e6ba7ed4f540c3e990bbbd1f9c124 Mon Sep 17 00:00:00 2001 From: zhanghongchuan33 Date: Wed, 8 Jun 2022 16:51:33 +0800 Subject: [PATCH 1/3] fix ux Signed-off-by: zhanghongchuan33 --- .../src/main/ets/components/NoteContentComp.ets | 4 ++-- .../src/main/ets/components/NoteListComp.ets | 3 ++- .../src/main/resources/base/element/color.json | 4 ++-- .../src/main/resources/rawfile/editor_style.css | 16 +++++++++------- .../src/main/resources/rawfile/rich_editor.js | 2 +- .../default/model/databaseModel/SysDefData.ets | 12 ++++++------ 6 files changed, 22 insertions(+), 19 deletions(-) diff --git a/common/component/src/main/ets/components/NoteContentComp.ets b/common/component/src/main/ets/components/NoteContentComp.ets index 0acc11b..38ce695 100644 --- a/common/component/src/main/ets/components/NoteContentComp.ets +++ b/common/component/src/main/ets/components/NoteContentComp.ets @@ -268,7 +268,7 @@ export struct NoteContentOverViewComp { Row() { Text(this.selectedNoteData.title) .fontSize(30) - .margin({ left: 12, right: 24 }) + .margin({ left: 0, right: 24 }) .onClick(() => { this.editModel = true this.sectionStatus = 1 @@ -285,7 +285,7 @@ export struct NoteContentOverViewComp { .fontSize(12) .padding({ top: 4, bottom: 4 }) .fontColor($r("app.color.modified_time_font_color")) - .margin({ left: 12 }) + .margin({ left: 0 }) Row() { Text(FolderUtil.getFolderText(FolderUtil.getFolderData(AppStorage.Get('AllFolderArray'), this.selectedNoteData.folder_uuid)) == folderTextMap["sys_def_myFavorites_uuid"] ? folderTextMap["sys_def_unClassified_uuid"] : diff --git a/common/component/src/main/ets/components/NoteListComp.ets b/common/component/src/main/ets/components/NoteListComp.ets index f8a159e..5f45fc6 100644 --- a/common/component/src/main/ets/components/NoteListComp.ets +++ b/common/component/src/main/ets/components/NoteListComp.ets @@ -378,7 +378,8 @@ export struct NoteItemListComp { } .padding({ bottom: this.selectedFolderData.uuid == SysDefFolderUuid.RecentDeletes ? 12 : 0 }) .width('100%') - .visibility(this.selectedFolderData.uuid == SysDefFolderUuid.RecentDeletes ? Visibility.Visible : Visibility.None) + .visibility(this.selectedFolderData.uuid == SysDefFolderUuid.RecentDeletes + && FolderUtil.getNoteCount(AppStorage.Get('AllNoteArray'), this.selectedFolderData.uuid) > 0 ? Visibility.Visible : Visibility.None) Column() { List({ initialIndex: 0 }) { diff --git a/common/resources/src/main/resources/base/element/color.json b/common/resources/src/main/resources/base/element/color.json index 416d7d4..de3abcb 100644 --- a/common/resources/src/main/resources/base/element/color.json +++ b/common/resources/src/main/resources/base/element/color.json @@ -2,11 +2,11 @@ "color": [ { "name": "color_ffffff", - "value": "#ffffff" + "value": "#F1F3F5" }, { "name": "color_fffffB", - "value": "#FFFBFBFB" + "value": "#ffffff" }, { "name": "delete_color_fa2a2d", diff --git a/common/resources/src/main/resources/rawfile/editor_style.css b/common/resources/src/main/resources/rawfile/editor_style.css index 4a0563c..a28d7ab 100644 --- a/common/resources/src/main/resources/rawfile/editor_style.css +++ b/common/resources/src/main/resources/rawfile/editor_style.css @@ -51,7 +51,7 @@ body { .note-checkbox:checked { background: #F88805; - border: 2px solid #F88805; + border: 1px solid #F88805; outline: none; margin-left: 0px; margin-right: 0px; @@ -59,10 +59,12 @@ body { } .note-checkbox { - width: 20px; - height: 20px; + width: 18px; + height: 18px; + line-height: 22.4px; background-color: #ffffff; - border: 2px solid #555555; + border: 2px solid #182431; + opacity: 0.6; -webkit-border-radius: 50%; -webkit-appearance: none; -webkit-user-select: none; @@ -70,8 +72,8 @@ body { font-size: 0.8rem; margin-left: 0px; margin-top: 0px; - margin-right: 4px; - margin-bottom: 9px; + margin-right: 10px; + margin-bottom: 6px; outline: none; padding: 0; position: relative; @@ -85,7 +87,7 @@ body { .note-checkbox:checked+span { text-decoration: line-through; - margin-left: 12px; + margin-left: 10px; color: #F88805; opacity: 0.4; } diff --git a/common/resources/src/main/resources/rawfile/rich_editor.js b/common/resources/src/main/resources/rawfile/rich_editor.js index 012da17..96f99e8 100644 --- a/common/resources/src/main/resources/rawfile/rich_editor.js +++ b/common/resources/src/main/resources/rawfile/rich_editor.js @@ -297,7 +297,7 @@ RICH_EDITOR.setTodo = function () { var parent = document.getElementById('editorjs'); var isContentEmpty = parent.innerHTML.trim().length === 0 || parent.innerHTML === '
'; var html = (isContentEmpty ? '' : '
') - + '' + + '' + ' '; document.execCommand('insertHTML', false, html); }; diff --git a/common/utils/src/main/ets/default/model/databaseModel/SysDefData.ets b/common/utils/src/main/ets/default/model/databaseModel/SysDefData.ets index 78fd18e..e792def 100644 --- a/common/utils/src/main/ets/default/model/databaseModel/SysDefData.ets +++ b/common/utils/src/main/ets/default/model/databaseModel/SysDefData.ets @@ -162,14 +162,14 @@ export default { "title": "蛋糕做法", "uuid": "note4_uuid", "folder_uuid": SysDefFolderUuid.Life, - "content_text": '
' + + "content_text": '
' + '' + - '  糖60g
' + + '糖60g
' + '' + - '  玉米油40g
' + - '
    1. 添加鸡蛋、盐、糖、蛋糕粉
' + - '    2. 加入玉米油、牛奶，烤箱预热15分钟
' + - '    3. 加入葡萄干、核桃仁，烤箱定时40分钟

', + '玉米油40g
' + + '
 1.   添加鸡蛋、盐、糖、蛋糕粉
' + + ' 2.   加入玉米油、牛奶，烤箱预热15分钟
' + + ' 3.   加入葡萄干、核桃仁，烤箱定时40分钟

', "content_img": "", "note_type": NoteType.CusDef, "is_top": Top.No, -- Gitee From 9483a530a20528964fe20e0a9619c78d3d5a6b49 Mon Sep 17 00:00:00 2001 From: zhanghongchuan33 Date: Thu, 9 Jun 2022 10:22:49 +0800 Subject: [PATCH 2/3] fix ux Signed-off-by: zhanghongchuan33 --- .../src/main/ets/components/CusDialogComp.ets | 21 ++++++++++------ .../main/ets/components/NoteContentComp.ets | 24 +++++++++++++------ .../src/main/ets/components/NoteListComp.ets | 3 ++- .../main/ets/default/model/NoteBaseData.ets | 8 +++---- .../model/databaseModel/SysDefData.ets | 2 +- 5 files changed, 38 insertions(+), 20 deletions(-) diff --git a/common/component/src/main/ets/components/CusDialogComp.ets b/common/component/src/main/ets/components/CusDialogComp.ets index 9520cf6..bda7a85 100644 --- a/common/component/src/main/ets/components/CusDialogComp.ets +++ b/common/component/src/main/ets/components/CusDialogComp.ets @@ -41,12 +41,13 @@ export struct NewOrEditFolderDialog { .fontSize(20) .height(56) .margin({ left: 24 }) + .fontWeight(FontWeight.Medium) // folder color choose Flex({ wrap: FlexWrap.NoWrap, justifyContent: FlexAlign.SpaceBetween }) { ForEach(circleColorArray, (colorStr: string) => { ColorCircleComp({ circleColor: colorStr }) }, colorStr => colorStr) - }.margin({ bottom: 24, left: 24, right: 24 }) + }.margin({ bottom: 12, left: 24, right: 24 }) // folder name input Flex({ wrap: FlexWrap.NoWrap, justifyContent: FlexAlign.SpaceBetween }) { Image($r("app.media.folder")) @@ -61,6 +62,7 @@ export struct NewOrEditFolderDialog { .borderRadius(15) .backgroundColor($r("app.color.New_folder_input_box_color")) .width('100%') + .padding({left: 12, bottom: -12}) .onChange((value: string) => { this.inputName = value FolderUtil.duplicateDetection(this.inputName, this.AllFolderArray).then(result => { @@ -73,12 +75,17 @@ export struct NewOrEditFolderDialog { .height(1) .margin({ left: 64, right: 24 }) .color((this.isExisted && this.inputName != this.oriInputName) ? $r("app.color.category_already_exist_divider_color") : $r("app.color.divider_color_182431")) - - Text($r("app.string.category_already_exist")) - .fontSize(10) - .margin({ left: 64, top: 4 }) - .fontColor($r("app.color.category_already_exist_font_color")) - .visibility((this.isExisted && this.inputName != this.oriInputName) ? Visibility.Visible : Visibility.None) + if(this.isExisted && this.inputName != this.oriInputName){ + Text($r("app.string.category_already_exist")) + .fontSize(10) + .margin({ left: 64, top: 4 }) + .fontColor($r("app.color.category_already_exist_font_color")) + .visibility((this.isExisted && this.inputName != this.oriInputName) ? Visibility.Visible : Visibility.None) + }else{ + Column(){} + .height(16) + .width("100%") + } // button group Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween }) { diff --git a/common/component/src/main/ets/components/NoteContentComp.ets b/common/component/src/main/ets/components/NoteContentComp.ets index 38ce695..5959c0f 100644 --- a/common/component/src/main/ets/components/NoteContentComp.ets +++ b/common/component/src/main/ets/components/NoteContentComp.ets @@ -46,6 +46,7 @@ export struct NoteContentComp { @Consume('SectionStatus') sectionStatus: number @Consume('LastSectionStatus') lastSectionStatus: number @Consume('Issave') issave: number + @Consume('Search') search: boolean controllerShow: WebController private editContentFlag = false @State uri1: string = "" @@ -177,6 +178,13 @@ export struct NoteContentComp { } .height(StyleConstants.PERCENTAGE_100) .visibility(FolderUtil.getNoteCount(AppStorage.Get('AllNoteArray'), this.selectedFolderData.uuid) == 0 ? Visibility.Hidden : Visibility.Visible) + Column() { + } + .height("100%") + .width("100%") + .backgroundColor("#18181A") + .opacity(0.1) + .visibility(this.search ? Visibility.Visible : Visibility.Hidden) } .height(StyleConstants.PERCENTAGE_100) .width(StyleConstants.PERCENTAGE_100) @@ -292,6 +300,7 @@ export struct NoteContentOverViewComp { FolderUtil.getFolderText(FolderUtil.getFolderData(AppStorage.Get('AllFolderArray'), this.selectedNoteData.folder_uuid))) .fontSize(12) .fontColor($r("app.color.list_modified_time_font_color")) + .padding({ top: 1 }) Image($r('app.media.triangle')) .width(6) .height(12) @@ -451,7 +460,7 @@ export struct ToolBarComp { }.width(42) .height(42) .borderRadius(8) - .backgroundColor($r('app.color.color_ffffff')) + .backgroundColor($r('app.color.color_fffffB')) Button({ type: ButtonType.Normal, stateEffect: true }) { Image($r('app.media.styles')) @@ -465,7 +474,7 @@ export struct ToolBarComp { }.width(42) .height(42) .borderRadius(8) - .backgroundColor($r('app.color.color_ffffff')) + .backgroundColor($r('app.color.color_fffffB')) Button({ type: ButtonType.Normal, stateEffect: true }) { Image($r('app.media.picture_white')) @@ -503,7 +512,7 @@ export struct ToolBarComp { }.width(42) .height(42) .borderRadius(8) - .backgroundColor($r('app.color.color_ffffff')) + .backgroundColor($r('app.color.color_fffffB')) Button({ type: ButtonType.Normal, stateEffect: true }) { @@ -518,7 +527,7 @@ export struct ToolBarComp { }.width(42) .height(42) .borderRadius(8) - .backgroundColor($r('app.color.color_ffffff')) + .backgroundColor($r('app.color.color_fffffB')) Button({ type: ButtonType.Normal, stateEffect: true }) { Image($r('app.media.todo')) @@ -532,11 +541,11 @@ export struct ToolBarComp { }.width(42) .height(42) .borderRadius(8) - .backgroundColor($r('app.color.color_ffffff')) + .backgroundColor($r('app.color.color_fffffB')) Button({ type: ButtonType.Normal, stateEffect: true }) { - Image($r('app.media.tick_thick')) + Image($r('app.media.tick_thin')) .height(24) .width(24) .fillColor(this.issave == 0 ? Color.Black : Color.Grey) @@ -551,7 +560,7 @@ export struct ToolBarComp { }.width(42) .height(42) .borderRadius(8) - .backgroundColor($r('app.color.color_ffffff')) + .backgroundColor($r('app.color.color_fffffB')) }.width(274) } else { Row({ space: StyleConstants.SPACE_24 }) { @@ -611,6 +620,7 @@ struct NoteDataMoveItemCompTablet { Column() { Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.NoWrap, justifyContent: FlexAlign.SpaceBetween }) { Text(FolderUtil.getFolderText(this.folderItem)) + .padding({ top: 3 }) .fontSize(16) .fontColor(FolderUtil.getFolderIconColor(this.AllFolderArray, this.folderItem.uuid == this.uuid ? this.folderItem.uuid : '', this.folderItem.uuid == this.uuid)) .textAlign(TextAlign.Center) diff --git a/common/component/src/main/ets/components/NoteListComp.ets b/common/component/src/main/ets/components/NoteListComp.ets index 5f45fc6..61f4dfd 100644 --- a/common/component/src/main/ets/components/NoteListComp.ets +++ b/common/component/src/main/ets/components/NoteListComp.ets @@ -124,7 +124,7 @@ struct NoteOverViewComp { Text(FolderUtil.getFolderText(this.selectedFolderData)) .fontSize(30) .fontColor($r("app.color.all_notes_font_color")) - .fontWeight(FontWeight.Bold) + .fontWeight(FontWeight.Medium) .textOverflow({ overflow: TextOverflow.Ellipsis }) Row() { Text(FolderUtil.getNoteCount(AppStorage.Get('AllNoteArray'), this.selectedFolderData.uuid).toString()) @@ -674,6 +674,7 @@ export struct SearchComp { .backgroundColor(this.longpress ? $r("app.color.search_longpress_bgcolor_f7f8f9") : $r("app.color.color_ffffff")) .caretColor($r("app.color.search_note_caret_color")) .enabled(this.longpress ? false : true) + .padding({ left:6, top:1 }) .padding({left:6}) .onEditChange((isEditing: boolean) => { this.search = isEditing diff --git a/common/utils/src/main/ets/default/model/NoteBaseData.ets b/common/utils/src/main/ets/default/model/NoteBaseData.ets index b5a09b7..3c2de8f 100644 --- a/common/utils/src/main/ets/default/model/NoteBaseData.ets +++ b/common/utils/src/main/ets/default/model/NoteBaseData.ets @@ -16,7 +16,7 @@ import NoteData from '../model/databaseModel/NoteData' export const circleColorArray: string[] = [ - "#e84026", // 深红 + "#f86d05", // 深红 "#ff7500", // 浅红 "#ffbf00", // 黄色 "#41ba41", // 绿色 @@ -27,7 +27,7 @@ export const circleColorArray: string[] = [ ] export const fontColorArray: string[] = [ - "#e84026", // 深红 + "#f86d05", // 深红 "#ffbf00", // 黄色 "#41ba41", // 绿色 "#00aaee", // 中蓝 @@ -37,7 +37,7 @@ export const fontColorArray: string[] = [ ] export const unSelectedNoteBgColorMap = { - "#e84026": "#eecfcc", + "#f86d05": "#fff8eceb", "#ff7500": "#f3d9c4", "#ffbf00": "#f3e8c4", "#41ba41": "#cde7d1", @@ -49,7 +49,7 @@ export const unSelectedNoteBgColorMap = { } export const selectedNoteBgColorMap = { - "#e84026": "#eec4b8", + "#f86d05": "#eec4b8", "#ff7500": "#f1d8c7", "#ffbf00": "#f3cdb1", "#41ba41": "#d1dabc", diff --git a/common/utils/src/main/ets/default/model/databaseModel/SysDefData.ets b/common/utils/src/main/ets/default/model/databaseModel/SysDefData.ets index e792def..d88fbad 100644 --- a/common/utils/src/main/ets/default/model/databaseModel/SysDefData.ets +++ b/common/utils/src/main/ets/default/model/databaseModel/SysDefData.ets @@ -99,7 +99,7 @@ export default { "id": 7, "name": "工作", "uuid": SysDefFolderUuid.Work, - "color": "#e84026", + "color": "#f86d05", "folder_type": FolderType.CusDef, "is_deleted": Delete.No, "created_time": 1641636508000, -- Gitee From 98699e9dde70be3671b9adf81047d57c013501bb Mon Sep 17 00:00:00 2001 From: zhanghongchuan33 Date: Thu, 9 Jun 2022 11:16:42 +0800 Subject: [PATCH 3/3] fix ux Signed-off-by: zhanghongchuan33 --- common/component/src/main/ets/components/FolderListComp.ets | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/common/component/src/main/ets/components/FolderListComp.ets b/common/component/src/main/ets/components/FolderListComp.ets index a1ec2db..c135109 100644 --- a/common/component/src/main/ets/components/FolderListComp.ets +++ b/common/component/src/main/ets/components/FolderListComp.ets @@ -54,6 +54,7 @@ export struct FolderListComp { .width("100%") .margin({ top: 28 }) .padding({ left: 24 }) + .flexGrow(1) NoteAndCreateComp() // center @@ -65,8 +66,9 @@ export struct FolderListComp { } } }, folderItem => folderItem.name.toString()) - }.width('100%') + }.width('100%').height(450) .padding({ left: 12, right: 12 }) + .flexGrow(1) } @@ -80,6 +82,7 @@ export struct FolderListComp { controllerShow: this.controllerShow }) } + .flexGrow(0) .width("100%") .padding({ left: 12, right: 12 }) } -- Gitee