!30 Add search mask, fix folder text weight and some file indent

Merge pull request !30 from guozejun/master
2026-07-18 18:24:27 -04:00 · 2022-05-03 07:38:17 +00:00
parent 9fa514aa21 1018c9e21f
commit 155d0ae342
8 changed files with 202 additions and 160 deletions
@@ -299,8 +299,14 @@ struct NoteDataMoveItemComp {
 export struct NoteDataMoveDialog {
  noteDataMoveDialogCtl: CustomDialogController
  onConfirm: (folderUuid: string) => void
+  NoteDataMoveArray: FolderData[]
  @StorageLink('AllFolderArray') AllFolderArray: FolderData[]  = []

+  aboutToAppear() {
+    this.NoteDataMoveArray = this.AllFolderArray.slice(2, this.AllFolderArray.length);
+    this.NoteDataMoveArray.push(this.AllFolderArray[1]);
+  }
+
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, wrap: FlexWrap.NoWrap }) {
      Flex({ alignItems: ItemAlign.Center }) {
@@ -311,7 +317,7 @@ export struct NoteDataMoveDialog {
      .width(288)

      List() {
-        ForEach(this.AllFolderArray, (item) => {
+        ForEach(this.NoteDataMoveArray, (item) => {
          ListItem() {
            NoteDataMoveItemComp({ folderItem: item })
          }
@@ -327,12 +327,13 @@ struct FolderItemComp {
      Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.NoWrap, justifyContent: FlexAlign.SpaceBetween }) {
        Row() {
          Image(FolderUtil.getFolderIcon(this.folderItem.uuid))
-            .objectFit(ImageFit.ScaleDown)
+            .objectFit(ImageFit.Fill)
            .width(24)
            .height(24)
            .fillColor(FolderUtil.getFolderIconColor(this.AllFolderArray, this.folderItem.uuid, this.selectedFolderData.uuid == this.folderItem.uuid))
            .margin({ right: 16 })
          Text(FolderUtil.getFolderText(this.folderItem))
+            .fontWeight(FontWeight.Medium)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .maxLines(1)
@@ -344,6 +345,7 @@ struct FolderItemComp {
        }.width(118)

        Text(FolderUtil.getNoteCount(AppStorage.Get('AllNoteArray'), this.folderItem.uuid).toString())
+          .fontWeight(FontWeight.Regular)
          .fontSize(14)
          .textAlign(TextAlign.Center)
      }
@@ -16,15 +16,16 @@
 import DateUtil from '@ohos/utils/src/main/ets/default/baseUtil/DateUtil'
 import FolderData from '@ohos/utils/src/main/ets/default/model/databaseModel/FolderData'
 import NoteData from '@ohos/utils/src/main/ets/default/model/databaseModel/NoteData'
-import {TableName, NoteTableColumn, SysDefFolderUuid, Favorite, Delete, Top, NoteType} from '@ohos/utils/src/main/ets/default/model/databaseModel/EnumData'
-import {NoteDataMoveDialog, DeleteDialog} from './CusDialogComp'
+import { TableName, NoteTableColumn, SysDefFolderUuid, Favorite, Delete, Top, NoteType
+} from '@ohos/utils/src/main/ets/default/model/databaseModel/EnumData'
+import { NoteDataMoveDialog, DeleteDialog } from './CusDialogComp'
 import RdbStoreUtil from '@ohos/utils/src/main/ets/default/baseUtil/RdbStoreUtil'
 import prompt from '@system.prompt'
 import NoteUtil from '@ohos/utils/src/main/ets/default/baseUtil/NoteUtil'
 import FolderUtil from '@ohos/utils/src/main/ets/default/baseUtil/FolderUtil'
 import StyleConstants from '@ohos/utils/src/main/ets/default/constants/StyleConstants'
 import SearchModel from '@ohos/utils/src/main/ets/default/model/searchModel/SearchModel'
-import {LogUtil} from '@ohos/utils/src/main/ets/default/baseUtil/LogUtil'
+import { LogUtil } from '@ohos/utils/src/main/ets/default/baseUtil/LogUtil'
 import router from '@system.router';

 const TAG = "NoteListComp"
@@ -49,15 +50,20 @@ export struct NoteListComp {
  controllerShow: WebController

  build() {
-    Flex({direction: FlexDirection.Column}) {
+    Flex({ direction: FlexDirection.Column }) {

-      Flex({direction: FlexDirection.Column}) {
+      Flex({ direction: FlexDirection.Column }) {
        NoteOverViewComp({ controllerShow: this.controllerShow })
+        Column() {
+        }
+        .backgroundColor($r('app.color.notelist_bgcolor_f1f3f5'))
+        .height(this.search ? 15 : 0)
+
        NoteItemListComp({ controllerShow: this.controllerShow })
      }
-      .padding({ top: this.search ? 15 : 0 })
+      .backgroundColor($r('app.color.notelist_bgcolor_f1f3f5'))
      .width('100%')
-      .flexShrink(1)
+      .flexGrow(1)

      Column() {
        OperateNoteCompForPortrait()
@@ -76,7 +82,6 @@ export struct NoteListComp {
  aboutToDisappear(): void{
    LogUtil.info(TAG, "aboutToDisappear")
  }
-
 }

@Component
@@ -112,6 +117,7 @@ struct NoteOverViewComp {
              }
            })
        }.alignItems(HorizontalAlign.Center)
+
        Flex({
          direction: FlexDirection.Column,
          wrap: FlexWrap.Wrap,
@@ -160,7 +166,8 @@ struct NoteOverViewComp {
      Text(this.refreshFlag.toString()).visibility(Visibility.None)
    }
    .backgroundColor($r('app.color.notelist_bgcolor_f1f3f5'))
-    .width('100%').height(82)
+    .width('100%')
+    .height(82)
    .padding({ left: this.sectionStatus == 2 ? 24 : 36, right: 24 }) // 两分栏时缩进图标与左侧不需要间距
    .visibility(this.search ? Visibility.None : Visibility.Visible)
  }
@@ -180,7 +187,7 @@ export struct NoteItemComp {
  @Consume('RefreshFlag') refreshFlag: number
  @Consume('Search') search: boolean
  @Consume('selectedAll') selectedAll: boolean
-  @Consume('PortraitModel') portraitModel:boolean
+  @Consume('PortraitModel') portraitModel: boolean

  build() {
    Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
@@ -198,9 +205,15 @@ export struct NoteItemComp {
              }), item => {

                if (item.data.type == 0) {
-                  Span(item.data.text).fontColor($r("app.color.note_title_font_color")).fontSize(16).fontWeight(FontWeight.Medium)
+                  Span(item.data.text)
+                    .fontColor($r("app.color.note_title_font_color"))
+                    .fontSize(16)
+                    .fontWeight(FontWeight.Medium)
                } else if (item.data.type == 1) {
-                  Span(item.data.text).fontColor($r("app.color.note_title_font_color_blue")).fontSize(16).fontWeight(FontWeight.Medium)
+                  Span(item.data.text)
+                    .fontColor($r("app.color.note_title_font_color_blue"))
+                    .fontSize(16)
+                    .fontWeight(FontWeight.Medium)
                }
              },
                item => item.index)
@@ -224,17 +237,18 @@ export struct NoteItemComp {
          }
          .padding({ left: 12 })
        }.alignItems(HorizontalAlign.Start)
-      }.width(240)
+      }.flexShrink(1)

      Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
        Stack({ alignContent: Alignment.Center }) {
          Image(this.noteItem.content_img)
-            .height(48)
-            .width(48)
+            .height(47)
+            .width(47)
            .borderRadius(12)
            .border({ width: 0.5, color: '#19182431' })
            .visibility(this.noteItem.content_img ? Visibility.Visible : Visibility.None)
        }
+
        Stack({ alignContent: Alignment.Center }) {
          Image($r("app.media.unChecked"))
            .height(24)
@@ -246,7 +260,9 @@ export struct NoteItemComp {
        }.width(24)
        .height(24)
        .visibility(this.longpress ? Visibility.Visible : Visibility.None)
-      }.height(48)
+      }
+      .flexShrink(0)
+      .height(48)
      .width(this.longpress ? 80 : 48)
    }
    .width('100%')
@@ -279,10 +295,12 @@ export struct NoteItemComp {
        AppStorage.SetOrCreate<string>('ContinueNote', continueNote)
        LogUtil.info(TAG, "NoteItemComp, set continue note success")
      }
-      if(this.portraitModel == false) {
-        this.controllerShow.runJavaScript({script:"RICH_EDITOR.setHtml('" + this.selectedNoteData.content_text + "')" })
+      if (this.portraitModel == false) {
+        this.controllerShow.runJavaScript({
+          script: "RICH_EDITOR.setHtml('" + this.selectedNoteData.content_text + "')"
+        })
      }
-      if(this.portraitModel == true) {
+      if (this.portraitModel == true) {
        AppStorage.SetOrCreate<NoteData>('NewNote', this.selectedNoteData)
        AppStorage.SetOrCreate<FolderData>('NewFolder', this.selectedFolderData)
        routePage()
@@ -317,7 +335,7 @@ export struct NoteItemListComp {
  @Consume @Watch('doSearch') inputKeyword: string
  @Consume('SearchResultList') searchResultList: NoteData[]
  @Consume('SelectedNoteData') selectedNoteData: NoteData
-  @Consume('PortraitModel') portraitModel:boolean
+  @Consume('PortraitModel') portraitModel: boolean
  controllerShow: WebController

  doSearch() {
@@ -330,8 +348,10 @@ export struct NoteItemListComp {
        } else {
          this.selectedNoteData = NoteUtil.getFirstNoteData(AppStorage.Get('AllNoteArray'), this.selectedFolderData.uuid)
        }
-        if(this.portraitModel == false) {
-          this.controllerShow.runJavaScript({script:"RICH_EDITOR.setHtml('" + this.selectedNoteData.content_text + "')" })
+        if (this.portraitModel == false) {
+          this.controllerShow.runJavaScript({
+            script: "RICH_EDITOR.setHtml('" + this.selectedNoteData.content_text + "')"
+          })
        }
        // save continue data
        let continueNote: string = JSON.stringify(this.selectedNoteData.toNoteObject())
@@ -342,7 +362,7 @@ export struct NoteItemListComp {
  }

  build() {
-    Flex({direction: FlexDirection.Column}) {
+    Flex({ direction: FlexDirection.Column }) {
      Text(this.refreshFlag.toString()).visibility(Visibility.None)
      Flex() {
        SearchComp()
@@ -352,60 +372,72 @@ export struct NoteItemListComp {
      .backgroundColor($r("app.color.notelist_bgcolor_f1f3f5"))
      .visibility((FolderUtil.getNoteCount(AppStorage.Get('AllNoteArray'), this.selectedFolderData.uuid) == 0) ? Visibility.None : Visibility.Visible)

-      Flex({ justifyContent: FlexAlign.Center }) {
-        Text($r("app.string.permanently_delete_tips"))
-          .fontSize(12)
-          .fontColor($r("app.color.Recently_delete_prompt_font_color"))
-      }
-      .padding({ bottom: this.selectedFolderData.uuid == SysDefFolderUuid.RecentDeletes ? 12 : 0 })
-      .backgroundColor($r("app.color.notelist_bgcolor_f1f3f5"))
-      .width('100%')
-      .visibility(this.selectedFolderData.uuid == SysDefFolderUuid.RecentDeletes ? Visibility.Visible : Visibility.None)
+      Stack() {
+        Flex({ justifyContent: FlexAlign.Center }) {
+          Text($r("app.string.permanently_delete_tips"))
+            .fontSize(12)
+            .fontColor($r("app.color.Recently_delete_prompt_font_color"))
+        }
+        .padding({ bottom: this.selectedFolderData.uuid == SysDefFolderUuid.RecentDeletes ? 12 : 0 })
+        .backgroundColor($r("app.color.notelist_bgcolor_f1f3f5"))
+        .width('100%')
+        .visibility(this.selectedFolderData.uuid == SysDefFolderUuid.RecentDeletes ? Visibility.Visible : Visibility.None)

-      Column() {
-        List({ initialIndex: 0 }) {
-          ListItem() {
-            Column({ space: 8 }) {
-              Image($r('app.media.emptyPage'))
-                .width(120)
-                .height(120)
-              Text($r("app.string.Empty_page"))
-                .fontSize(12)
-                .fontColor($r("app.color.Empty_page_font_color"))
-            }
-          }
-          .backgroundColor($r("app.color.notelist_bgcolor_f1f3f5"))
-          .width('100%')
-          .height('100%')
-          .padding({ bottom: 120 })
-          .visibility((FolderUtil.getNoteCount(AppStorage.Get('AllNoteArray'), this.selectedFolderData.uuid) == 0) ? Visibility.Visible : Visibility.None)
-
-          ForEach(this.inputKeyword.length == 0 ?
-          NoteUtil.getNoteDataArray(AppStorage.Get('AllNoteArray'), this.selectedFolderData.uuid) : this.searchResultList, (noteItem) => {
+        Column() {
+          List({ initialIndex: 0 }) {
            ListItem() {
-              Column() {
-                NoteItemComp({
-                  noteItem: noteItem,
-                  spans: SearchModel.splitToHighlightText(noteItem.title, this.inputKeyword),
-                  controllerShow: this.controllerShow
-                })
+              Column({ space: 8 }) {
+                Image($r('app.media.emptyPage'))
+                  .width(120)
+                  .height(120)
+                Text($r("app.string.Empty_page"))
+                  .fontSize(12)
+                  .fontColor($r("app.color.Empty_page_font_color"))
              }
-              .padding({ left: 24, right: 24, bottom: 12 })
            }
            .backgroundColor($r("app.color.notelist_bgcolor_f1f3f5"))
-          }, noteItem => noteItem.uuid.toString())
+            .width('100%')
+            .height('100%')
+            .padding({ bottom: 120 })
+            .visibility((FolderUtil.getNoteCount(AppStorage.Get('AllNoteArray'), this.selectedFolderData.uuid) == 0) ? Visibility.Visible : Visibility.None)
+
+            ForEach(this.inputKeyword.length == 0 ?
+            NoteUtil.getNoteDataArray(AppStorage.Get('AllNoteArray'), this.selectedFolderData.uuid) : this.searchResultList, (noteItem) => {
+              ListItem() {
+                Column() {
+                  NoteItemComp({
+                    noteItem: noteItem,
+                    spans: SearchModel.splitToHighlightText(noteItem.title, this.inputKeyword),
+                    controllerShow: this.controllerShow
+                  })
+                }
+                .padding({ left: 24, right: 24, bottom: 12 })
+              }
+              .backgroundColor($r("app.color.notelist_bgcolor_f1f3f5"))
+            }, noteItem => noteItem.uuid.toString())
+          }
+          .height("100%")
+          .backgroundColor($r("app.color.notelist_bgcolor_f1f3f5"))
+          .listDirection(Axis.Vertical)
+          .edgeEffect(EdgeEffect.Spring)
+        }
+        .backgroundColor($r("app.color.notelist_bgcolor_f1f3f5"))
+        .flexGrow(1)
+        .margin({ top: this.search ? 8 : 0 })
+
+        Column() {
        }
        .height("100%")
-        .backgroundColor($r("app.color.notelist_bgcolor_f1f3f5"))
-        .listDirection(Axis.Vertical)
-        .edgeEffect(EdgeEffect.Spring)
+        .width("100%")
+        .backgroundColor("#18181A")
+        .opacity(0.1)
+        .visibility(this.search ? Visibility.Visible : Visibility.Hidden)
      }
      .backgroundColor($r("app.color.notelist_bgcolor_f1f3f5"))
      .flexGrow(1)
    }
    .backgroundColor($r("app.color.notelist_bgcolor_f1f3f5"))
    .flexGrow(1)
-    .padding({ bottom: 1 })
    .onClick(() => {
      this.search = false
    })
@@ -443,8 +475,8 @@ export struct OperateNoteComp {
    let continueNote: string = JSON.stringify(this.selectedNoteData.toNoteObject())
    AppStorage.SetOrCreate<string>('ContinueNote', continueNote)
    LogUtil.info(TAG, "onMoveConfirm, set continue note success")
-    if(this.portraitModel == false) {
-      this.controllerShow.runJavaScript({script:"RICH_EDITOR.setHtml('" + this.selectedNoteData.content_text + "')" })
+    if (this.portraitModel == false) {
+      this.controllerShow.runJavaScript({ script: "RICH_EDITOR.setHtml('" + this.selectedNoteData.content_text + "')" })
    }
    this.longpress = false
    this.refreshFlag = (this.refreshFlag == 0 ? 1 : 0)
@@ -481,8 +513,8 @@ export struct OperateNoteComp {
    this.refreshFlag = (this.refreshFlag == 0 ? 1 : 0)
    this.longpress = false
    this.selectedNoteData = NoteUtil.getFirstNoteData(AppStorage.Get('AllNoteArray'), this.selectedFolderData.uuid)
-    if(this.portraitModel == false) {
-      this.controllerShow.runJavaScript({script:"RICH_EDITOR.setHtml('" + this.selectedNoteData.content_text + "')" })
+    if (this.portraitModel == false) {
+      this.controllerShow.runJavaScript({ script: "RICH_EDITOR.setHtml('" + this.selectedNoteData.content_text + "')" })
    }
    // save continue data
    let continueNote: string = JSON.stringify(this.selectedNoteData.toNoteObject())
@@ -647,8 +679,8 @@ export struct SearchComp {
            LogUtil.info(TAG, "Search value: " + value)
            this.inputKeyword = value
          })
-          .onClick(() => {
-            this.search = true
+          .onEditChange((isEditing: boolean) => {
+            this.search = isEditing
          })
      }
      .height(40)
@@ -658,6 +690,7 @@ export struct SearchComp {
      .border({ width: 1.5, color: $r("app.color.divider_color_e4e4e4") })
      .margin({ right: this.search ? 40 : 0 })
    }
+    .backgroundColor($r('app.color.notelist_bgcolor_f1f3f5'))
  }
 }

@@ -44,6 +44,10 @@
      "name": "folder_color_182431",
      "value": "#182431"
    },
+    {
+      "name": "folder_color_99182431",
+      "value": "#99182431"
+    },
    {
      "name": "folder_color_f86d05",
      "value": "#f86d05"
@@ -1 +1,15 @@
-<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>删除</title><path d="M12.125,1.875a3.25,3.25,0,0,1,3.24911,3.17329L15.375,5.125h5.75a.75.75,0,0,1,.04407,1.49873L21.125,6.625h-6.5a.75.75,0,0,1-.74873-.70593L13.875,5.875v-.75a1.75,1.75,0,0,0-3.499-.06016l-.001.06016v.75a.75.75,0,0,1-.70593.74873L9.625,6.625H2.875a.75.75,0,0,1-.04407-1.49873L2.875,5.125h6A3.25,3.25,0,0,1,12.125,1.875Zm1.75,10a.75.75,0,0,1,.75.75v6a.75.75,0,0,1-1.5,0v-6A.75.75,0,0,1,13.875,11.875Zm-3.5,0a.75.75,0,0,1,.75.75v6a.75.75,0,0,1-1.5,0v-6A.75.75,0,0,1,10.375,11.875ZM5.754,7.625,6.85113,18.59888A2.25,2.25,0,0,0,9.02349,20.624l.06647.001h6.06927a2.25,2.25,0,0,0,2.23134-1.96071l.00756-.06607.91929-9.22048L18.494,7.625h1.508l-.19209,1.90263-.91918,9.2194a3.75,3.75,0,0,1-3.64911,3.37708l-.08239.00089H9.09a3.75,3.75,0,0,1-3.7223-3.295l-.00909-.08187L4.246,7.625Z"/></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#182431;}
+</style>
+<title>删除</title>
+<path class="st0" d="M5.6,7.5l1.1,11c0.1,1.1,1,2,2.2,2l0.1,0H15c1.1,0,2.1-0.8,2.2-2l0-0.1l0.9-9.2l0.2-1.8h1.5l-0.2,1.9l-0.9,9.2
+	C18.6,20.5,17,22,15.1,22L15,22H9c-1.9,0-3.5-1.4-3.7-3.3l0-0.1L4.1,7.5H5.6z M10.2,11.7c0.4,0,0.8,0.3,0.8,0.8v6
+	c0,0.4-0.3,0.8-0.8,0.8s-0.8-0.3-0.8-0.8v-6C9.5,12.1,9.8,11.7,10.2,11.7z M13.8,11.7c0.4,0,0.8,0.3,0.8,0.8v6
+	c0,0.4-0.3,0.8-0.8,0.8S13,18.9,13,18.5v-6C13,12.1,13.3,11.7,13.8,11.7z M12,1.7c1.8,0,3.2,1.4,3.2,3.2l0,0.1H21
+	c0.4,0,0.8,0.3,0.8,0.8c0,0.4-0.3,0.7-0.7,0.7l0,0h-6.5c-0.4,0-0.7-0.3-0.7-0.7l0,0V5c0-1-0.8-1.7-1.8-1.7c-0.9,0-1.7,0.8-1.7,1.7
+	l0,0.1v0.8c0,0.4-0.3,0.7-0.7,0.7l0,0H2.8C2.3,6.5,2,6.2,2,5.7C2,5.4,2.3,5,2.7,5l0,0h6C8.8,3.2,10.2,1.7,12,1.7z"/>
+</svg>
@@ -14,76 +14,76 @@
 */

 html {
-  height: 100%;
-  font-family: sans-serif;
-webkit-text-size-adjust: 100%;
+    height: 100%;
+    font-family: sans-serif;
+    webkit-text-size-adjust: 100%;
 }

 body {
-  overflow: scroll;
-  display: table;
-  table-layout: fixed;
-  width: 100%;
-  min-height:100%;
-  color: #333333;
-  margin: 0;
+    overflow: scroll;
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    min-height: 100%;
+    color: #333333;
+    margin: 0;
 }

 #editorjs {
-  padding-left: 24px;
-  padding-right: 24px;
-  width:100%;
-  display: table-cell;
-  outline: 0px solid transparent;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
-  color: #333333;
-  font-size:40px;
+    padding-left: 24px;
+    padding-right: 24px;
+    width: 100%;
+    display: table-cell;
+    outline: 0px solid transparent;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    color: #333333;
+    font-size: 40px;
 }

 #editorjs[placeholder]:empty:not(:focus):before {
-  content: attr(placeholder);
-  font-size:40px;
-  color: #9b9b9b;
+    content: attr(placeholder);
+    font-size: 40px;
+    color: #9b9b9b;
 }

 .note-checkbox:checked {
-  background: #F88805;
-  border: 2px solid #F88805;
-  outline: none;
-  margin-left:0px;
-  margin-right:0px;
-  opacity: 1;
+    background: #F88805;
+    border: 2px solid #F88805;
+    outline: none;
+    margin-left: 0px;
+    margin-right: 0px;
+    opacity: 1;
 }

 .note-checkbox {
-  width: 23px;
-  height: 23px;
-  background-color: #ffffff;
-  border: 2px solid #555555;
-webkit-border-radius: 50%;
-webkit-appearance: none;
-webkit-user-select: none;
-  border-radius: 50%;
-  font-size: 0.8rem;
-  margin-left:0px;
-  margin-top:10px;
-  margin-right:0px;
-  margin-bottom:0px;
-  outline: none;
-  padding: 0;
-  position: relative;
-  display: inline-block;
-webkit-transition: background-color ease 0.1s;
-  transition: background-color ease 0.1s;
-  vertical-align: top;
-  cursor: default;
-  user-select: none;
+    width: 23px;
+    height: 23px;
+    background-color: #ffffff;
+    border: 2px solid #555555;
+    webkit-border-radius: 50%;
+    webkit-appearance: none;
+    webkit-user-select: none;
+    border-radius: 50%;
+    font-size: 0.8rem;
+    margin-left: 0px;
+    margin-top: 10px;
+    margin-right: 0px;
+    margin-bottom: 0px;
+    outline: none;
+    padding: 0;
+    position: relative;
+    display: inline-block;
+    webkit-transition: background-color ease 0.1s;
+    transition: background-color ease 0.1s;
+    vertical-align: top;
+    cursor: default;
+    user-select: none;
 }

-.note-checkbox:checked+span{
-  text-decoration: line-through;
-  color:#F88805;
-  opacity: 0.4;
+.note-checkbox:checked+span {
+    text-decoration: line-through;
+    color: #F88805;
+    opacity: 0.4;
 }
@@ -68,11 +68,11 @@ export class FolderUtil {
    let folderData: FolderData = this.getFolderData(folderDataArray, selectFolderUuid)
    if (folderData == undefined) {
      LogUtil.info(TAG, "FolderIconColor is 182431")
-      return $r("app.color.folder_color_182431")
+      return $r("app.color.folder_color_99182431")
    }
    LogUtil.info(TAG, "folderData uuid " + folderData.uuid + " isSelected " + isSelected)
    if (folderData.folder_type == FolderType.SysDef || folderData.folder_type == FolderType.FeatureDef) {
-      return isSelected ? $r("app.color.folder_color_f86d05") : $r("app.color.folder_color_182431")
+      return isSelected ? $r("app.color.folder_color_f86d05") : $r("app.color.folder_color_99182431")
    }
    return folderData.color
  }