修改按钮样式以及添加图片逻辑

Signed-off-by: @two-thousand-or-three-thousand <lisiquan1@huawei.com>

common/resources/src/main/resources/rawfile/editor.html

@@ -18,7 +18,7 @@
     id="editorjs"
     contenteditable="true">
   </div>
-  <div class="button-box">
+  <div class="button-box" id="buttonBox">
     <div id="addToDo">
       <img id="img1" src="../base/media/todo1.svg">
       <span id="lable1">清单</span>

common/resources/src/main/resources/rawfile/editor_style.css

@@ -39,11 +39,12 @@ body {
   opacity: 0.9;
   font-size: 16vp;
   overflow: scroll;
+  user-select: none;
 }
 
 #editorjs[placeholder]:empty:not(:focus):before {
   content: attr(placeholder);
-  font-size: 16vp;
+  font-size: 24px;
   color: #9b9b9b;
 }
 
@@ -91,6 +92,7 @@ body {
 }
 
 .edit-box {
+  overflow: hidden;
   width: 100%;
   height: 100%;
   display: flex;
@@ -101,7 +103,7 @@ body {
   width: 100%;
   height: auto;
   background-color: white;
-  display: flex;
+  display: none;
   justify-content: space-around;
   padding-bottom: 6px;
 }
@@ -113,11 +115,9 @@ body {
 }
 
 .button-box img {
-  width: 40px;
-  height: 40px;
   margin-bottom: 6px;
 }
 
 .button-box span {
-  font-size: 16px;
+  font-size: 20px;
 }

common/resources/src/main/resources/rawfile/rich_editor.js

@@ -455,15 +455,15 @@ function changeSizeToRk() {
 
 function changeSizeToPhone() {
     document.getElementById('editorjs').style.fontSize = '16px';
-    document.getElementById('img1').style.fontSize = '30px';
+    document.getElementById('img1').style.fontSize = '24px';
-    document.getElementById('img1').style.fontSize = '30px';
+    document.getElementById('img1').style.fontSize = '24px';
-    document.getElementById('img2').style.fontSize = '30px';
+    document.getElementById('img2').style.fontSize = '24px';
-    document.getElementById('img2').style.fontSize = '30px';
+    document.getElementById('img2').style.fontSize = '24px';
-    document.getElementById('img3').style.fontSize = '30px';
+    document.getElementById('img3').style.fontSize = '24px';
-    document.getElementById('img3').style.fontSize = '30px';
+    document.getElementById('img3').style.fontSize = '24px';
-    document.getElementById('lable1').style.fontSize = '14px';
+    document.getElementById('lable1').style.fontSize = '12px';
-    document.getElementById('lable2').style.fontSize = '14px';
+    document.getElementById('lable2').style.fontSize = '12px';
-    document.getElementById('lable3').style.fontSize = '14px';
+    document.getElementById('lable3').style.fontSize = '12px';
 }
 
 function changeSizeToTablet() {
@@ -478,3 +478,17 @@ function changeSizeToTablet() {
     document.getElementById('lable2').style.fontSize = '12px';
     document.getElementById('lable3').style.fontSize = '12px';
 }
+
+function hiddenButton() {
+    document.getElementById('buttonBox').style.display = 'none';
+}
+
+RICH_EDITOR.getFocus = function() {
+    return document.GetElementById('editorjs').focus();
+}
+
+document.getElementById('editorjs').addEventListener('click', () => {
+    if (callBackToApp.getBreakPoint() === 'sm') {
+        document.getElementById('buttonBox').style.display = 'flex';
+    }
+})

features/src/main/ets/components/NoteContent.ets

@@ -52,16 +52,6 @@ export struct NoteContent {
   controllerShow: WebController
   private editContentFlag = false
   @StorageLink('ScrollTopPercent') scrollTopPercent: number = 0.0
-  editContentDialogCtl: CustomDialogController = new CustomDialogController({
-    builder: EditContentDialog({ confirm: this.confirm.bind(this) }),
-    alignment: DialogAlignment.Bottom,
-    autoCancel: true,
-    customStyle: true,
-  })
-
-  confirm(excuteJs: string) {
-    this.controllerShow.runJavaScript({ script: excuteJs })
-  }
 
   storeScrollTop(scrollTop: number) {
     if (scrollTop < 0) {
@@ -177,55 +167,6 @@ export struct NoteContent {
       } else if (fontSize === 48) {
         this.selectedNoteData.slider_value = 16
       }
-    },
-    addToDo: () => {
-      // 退出键盘
-      // @ts-ignore
-      inputMethod.getController().stopInputSession();
-      // 清单
-      this.controllerShow.runJavaScript({ script: "javascript:RICH_EDITOR.setTodo()" })
-    },
-    chooseStyle: () => {
-      // 退出键盘
-      // @ts-ignore
-      inputMethod.getController().stopInputSession();
-      LogUtil.info(TAG, 'editContentDialogCtl start')
-      this.editContentDialogCtl.open()
-    },
-    openAlbum: async () => {
-      // 退出键盘
-      // @ts-ignore
-      inputMethod.getController().stopInputSession();
-      LogUtil.info(TAG, 'startAbility start')
-      await globalThis.noteContext.startAbilityForResult({
-        parameters: { uri: "singleselect" },
-        bundleName: "com.ohos.photos",
-        abilityName: "com.ohos.photos.MainAbility",
-      })
-        .then(v => {
-          let want = v['want'];
-          if (want != null && want != undefined) {
-            let param = want['parameters'];
-            let imageUri = ""
-            if (param != null && param != undefined) {
-              let uri = param['select-item-list'];
-              imageUri = uri;
-            }
-            // 拷贝
-            if (imageUri != null && imageUri != "") {
-              OperationUtils.copy(imageUri).then((uriPath) => {
-                var path = "file://" + uriPath
-                LogUtil.info(TAG, 'image uri is:' + path)
-                this.controllerShow.runJavaScript({
-                  script: "javascript:RICH_EDITOR.insertImage('" + path + "')"
-                })
-                this.issave = 1
-                // 保存笔记信息到数据库
-                this.controllerShow.runJavaScript({ script: "getHtmlContent()" })
-              })
-            }
-          }
-        });
     }
   }
 
@@ -245,7 +186,7 @@ export struct NoteContent {
             .javaScriptProxy({
               object: this.noteContent,
               name: "callBackToApp", // html-->  name.method
-              methodList: ["callbackhtml", "callbackScheduledSave", "callbackPasteImage", "callbackImagePath", "callbackGetSize", "addToDo", "chooseStyle", "openAlbum"],
+              methodList: ["callbackhtml", "callbackScheduledSave", "callbackPasteImage", "callbackImagePath", "callbackGetSize"],
               controller: this.controllerShow
             })
             .onPageEnd((e) => {
@@ -256,6 +197,7 @@ export struct NoteContent {
               } else {
                 this.controllerShow.runJavaScript({ script: "changeSizeToTablet()" })
               }
+              this.controllerShow.runJavaScript({ script: "hiddenButton()" })
               LogUtil.info(TAG, "finish loadurl")
               if (this.selectedNoteData) {
                 let self = this
@@ -320,6 +262,16 @@ export struct ToolBarComp {
   @Consume('Issave') issave: number
   @Consume('EditModel') editModel: boolean
   controllerShow: WebController
+  editContentDialogCtl: CustomDialogController = new CustomDialogController({
+    builder: EditContentDialog({ confirm: this.confirm.bind(this) }),
+    alignment: DialogAlignment.Bottom,
+    autoCancel: true,
+    customStyle: true,
+  })
+
+  confirm(excuteJs: string) {
+    this.controllerShow.runJavaScript({ script: excuteJs })
+  }
 
   build() {
     Flex({ direction: FlexDirection.Row, wrap: FlexWrap.NoWrap,
@@ -360,6 +312,80 @@ export struct ToolBarComp {
         .visibility(this.selectedNoteData.is_deleted == Delete.Yes ? Visibility.None : Visibility.Visible)
       } else {
         Row({ space: StyleConstants.SPACE_6 }) {
+          Button({ type: ButtonType.Normal, stateEffect: true }) {
+            Image($r('app.media.circle_tick1'))
+              .height(24)
+              .width(24)
+              .onClick(() => {
+                // 退出键盘
+                // @ts-ignore
+                inputMethod.getController().stopInputSession();
+                // 清单
+                this.controllerShow.runJavaScript({ script: "javascript:RICH_EDITOR.setTodo()" })
+              })
+          }.width(42)
+          .height(42)
+          .borderRadius(8)
+          .backgroundColor($r('app.color.color_fffffB'))
+
+          Button({ type: ButtonType.Normal, stateEffect: true }) {
+            Image($r('app.media.font_style'))
+              .height(24)
+              .width(24)
+              .onClick(() => {
+                // 退出键盘
+                // @ts-ignore
+                inputMethod.getController().stopInputSession();
+                LogUtil.info(TAG, 'editContentDialogCtl start')
+                this.editContentDialogCtl.open()
+              })
+          }.width(42)
+          .height(42)
+          .borderRadius(8)
+          .backgroundColor($r('app.color.color_fffffB'))
+
+          Button({ type: ButtonType.Normal, stateEffect: true }) {
+            Image($r('app.media.picture_white')).height(24).width(24)
+              .onClick(async () => {
+                // 退出键盘
+                // @ts-ignore
+                inputMethod.getController().stopInputSession();
+                LogUtil.info(TAG, 'startAbility start')
+                await globalThis.noteContext.startAbilityForResult({
+                  parameters: { uri: "singleselect" },
+                  bundleName: "com.ohos.photos",
+                  abilityName: "com.ohos.photos.MainAbility",
+                })
+                  .then(v => {
+                    let want = v['want'];
+                    if (want != null && want != undefined) {
+                      let param = want['parameters'];
+                      let imageUri = ""
+                      if (param != null && param != undefined) {
+                        let uri = param['select-item-list'];
+                        imageUri = uri;
+                      }
+                      // 拷贝
+                      if (imageUri != null && imageUri != "") {
+                        OperationUtils.copy(imageUri).then((uriPath) => {
+                          var path = "file://" + uriPath
+                          LogUtil.info(TAG, 'image uri is:' + path)
+                          this.controllerShow.runJavaScript({
+                            script: "javascript:RICH_EDITOR.insertImage('" + path + "')"
+                          })
+                          this.issave = 1
+                          // 保存笔记信息到数据库
+                          this.controllerShow.runJavaScript({script:"getHtmlContent()"})
+                        })
+                      }
+                    }
+                  });
+              })
+          }.width(42)
+          .height(42)
+          .borderRadius(8)
+          .backgroundColor($r('app.color.color_fffffB'))
+
           Button({ type: ButtonType.Normal, stateEffect: true }) {
             Image($r('app.media.undo'))
               .height(24)

features/src/main/ets/components/NoteContentComp.ets

@@ -62,16 +62,7 @@ export struct NoteContentComp {
   @StorageLink('ScrollTopPercent') scrollTopPercent: number = 0.0
   @StorageLink('isUpdate') isUpdate: boolean = false
   @StorageLink('refreshCurrentNote') @Watch('isDataChange') refreshCurrentNote: boolean = false
-  editContentDialogCtl: CustomDialogController = new CustomDialogController({
-    builder: EditContentDialog({ confirm: this.confirm.bind(this) }),
-    alignment: DialogAlignment.Bottom,
-    autoCancel: true,
-    customStyle: true,
-  })
 
-  confirm(excuteJs: string) {
-    this.controllerShow.runJavaScript({ script: excuteJs })
-  }
   isDataChange() {
     if (!this.refreshCurrentNote) {
       return
@@ -211,55 +202,6 @@ export struct NoteContentComp {
       } else if (fontSize === 48) {
         this.selectedNoteData.slider_value = 16
       }
-    },
-    addToDo: () => {
-      // 清单
-      this.controllerShow.runJavaScript({ script: "javascript:RICH_EDITOR.setTodo()" })
-      // 退出键盘
-      // @ts-ignore
-      inputMethod.getController().stopInputSession();
-    },
-    chooseStyle: () => {
-      // 退出键盘
-      // @ts-ignore
-      inputMethod.getController().stopInputSession();
-      this.editContentDialogCtl.open()
-    },
-    openAlbum: async () => {
-      // 退出键盘
-      // @ts-ignore
-      inputMethod.getController().stopInputSession();
-      LogUtil.info(TAG, 'startAbility start')
-      await globalThis.noteContext.startAbilityForResult({
-        parameters: { uri: "singleselect" },
-        bundleName: "com.ohos.photos",
-        abilityName: "com.ohos.photos.MainAbility",
-      })
-        .then(v => {
-          let want = v['want'];
-          if (want != null && want != undefined) {
-            let param = want['parameters'];
-            let imageUri = ""
-            if (param != null && param != undefined) {
-              let uri = param['select-item-list'];
-              imageUri = uri;
-            }
-            // 拷贝
-            if (imageUri != null && imageUri != "") {
-              OperationUtils.copy(imageUri).then((uriPath) => {
-                var path = "file://" + uriPath
-                LogUtil.info(TAG, 'image uri is:' + path)
-                this.controllerShow.runJavaScript({
-                  script: "javascript:RICH_EDITOR.insertImage('" + path + "')"
-                })
-                this.issave = 1
-                // 保存笔记信息到数据库
-                this.controllerShow.runJavaScript({ script: "getHtmlContent()" })
-              })
-            }
-          }
-          NoteUtil.refreshAll()
-        });
     }
   }
 
@@ -282,7 +224,7 @@ export struct NoteContentComp {
             .javaScriptProxy({
               object: this.noteContent,
               name: "callBackToApp", // html-->  name.method
-              methodList: ["callbackhtml", "callbackhtmlSave", "callbackScheduledSave", "callbackGetSize", "callbackPasteImage", "callbackImagePath", "addToDo", "chooseStyle", "openAlbum"],
+              methodList: ["callbackhtml", "callbackhtmlSave", "callbackScheduledSave", "callbackGetSize", "callbackPasteImage", "callbackImagePath"],
               controller: this.controllerShow
             })
             .onPageEnd((e) => {
@@ -293,6 +235,7 @@ export struct NoteContentComp {
               } else {
                 this.controllerShow.runJavaScript({ script: "changeSizeToTablet()" })
               }
+              this.controllerShow.runJavaScript({ script: "hiddenButton()" })
               LogUtil.info(TAG, "finish loadurl")
               if (this.selectedNoteData) {
                 let self = this
@@ -530,6 +473,16 @@ export struct ToolBarComp {
     autoCancel: false,
     customStyle: true,
   })
+  editContentDialogCtl: CustomDialogController = new CustomDialogController({
+    builder: EditContentDialog({ confirm: this.confirm.bind(this) }),
+    alignment: DialogAlignment.Bottom,
+    autoCancel: true,
+    customStyle: true,
+  })
+
+  confirm(excuteJs: string) {
+    this.controllerShow.runJavaScript({ script: excuteJs })
+  }
 
   onDeleteConfirm() {
     if (this.selectedFolderData.uuid != SysDefFolderUuid.RecentDeletes) {
@@ -644,6 +597,82 @@ export struct ToolBarComp {
           }.width(72)
         } else if (this.editModel == true) {
           Row({ space: StyleConstants.SPACE_6 }) {
+            Button({ type: ButtonType.Normal, stateEffect: true }) {
+              Image($r('app.media.circle_tick1'))
+                .height(24)
+                .width(24)
+                .onClick(() => {
+                  // 清单
+                  this.controllerShow.runJavaScript({ script: "javascript:RICH_EDITOR.setTodo()" })
+                  // 退出键盘
+                  // @ts-ignore
+                  inputMethod.getController().stopInputSession();
+                })
+            }.width(42)
+            .height(42)
+            .borderRadius(8)
+            .backgroundColor($r('app.color.color_fffffB'))
+
+            Button({ type: ButtonType.Normal, stateEffect: true }) {
+              Image($r('app.media.styles'))
+                .height(24)
+                .width(24)
+                .onClick(() => {
+                  // 退出键盘
+                  // @ts-ignore
+                  inputMethod.getController().stopInputSession();
+                  this.editContentDialogCtl.open()
+                })
+            }.width(42)
+            .height(42)
+            .borderRadius(8)
+            .backgroundColor($r('app.color.color_fffffB'))
+
+            Button({ type: ButtonType.Normal, stateEffect: true }) {
+              Image($r('app.media.picture_white'))
+                .height(24)
+                .width(24)
+                .onClick(async () => {
+                  // 退出键盘
+                  // @ts-ignore
+                  inputMethod.getController().stopInputSession();
+                  LogUtil.info(TAG, 'startAbility start')
+                  await globalThis.noteContext.startAbilityForResult({
+                    parameters: { uri: "singleselect" },
+                    bundleName: "com.ohos.photos",
+                    abilityName: "com.ohos.photos.MainAbility",
+                  })
+                    .then(v => {
+                      let want = v['want'];
+                      if (want != null && want != undefined) {
+                        let param = want['parameters'];
+                        let imageUri = ""
+                        if (param != null && param != undefined) {
+                          let uri = param['select-item-list'];
+                          imageUri = uri;
+                        }
+                        // 拷贝
+                        if (imageUri != null && imageUri != "") {
+                          OperationUtils.copy(imageUri).then((uriPath) => {
+                            var path = "file://" + uriPath
+                            LogUtil.info(TAG, 'image uri is:' + path)
+                            this.controllerShow.runJavaScript({
+                              script: "javascript:RICH_EDITOR.insertImage('" + path + "')"
+                            })
+                            this.issave = 1
+                            // 保存笔记信息到数据库
+                            this.controllerShow.runJavaScript({script:"getHtmlContent()"})
+                          })
+                        }
+                      }
+                      NoteUtil.refreshAll()
+                    });
+                })
+            }.width(42)
+            .height(42)
+            .borderRadius(8)
+            .backgroundColor($r('app.color.color_fffffB'))
+
             Button({ type: ButtonType.Normal, stateEffect: true }) {
               Image($r('app.media.undo'))
                 .height(24)

features/src/main/ets/components/NoteContentCompPortrait.ets

@@ -70,6 +70,7 @@ export struct NoteContentCompPortrait {
   confirm(excuteJs: string) {
     this.controllerShow.runJavaScript({ script: excuteJs })
   }
+
   storeScrollTop(scrollTop: number) {
     if (scrollTop < 0) {
       return
@@ -209,11 +210,15 @@ export struct NoteContentCompPortrait {
             OperationUtils.copy(imageUri).then((uriPath) => {
               var path = "file://" + uriPath
               LogUtil.info(TAG, 'image uri is:' + path)
+              this.controllerShow.runJavaScript({ script: "RICH_EDITOR.getFocus()" })
               this.controllerShow.runJavaScript({ script: "javascript:RICH_EDITOR.insertImage('" + path + "')" })
             })
           }
         }
       });
+    },
+    getBreakPoint: () => {
+      return AppStorage.Get('breakPoint');
     }
   }
 
@@ -232,7 +237,7 @@ export struct NoteContentCompPortrait {
             .javaScriptProxy({
               object: this.noteContent,
               name: "callBackToApp", // html-->  name.method
-              methodList: ["callbackhtml", "callbackScheduledSave", "callbackPasteImage", "callbackImagePath", "callbackGetSize", "addToDo", "chooseStyle", "openAlbum"],
+              methodList: ["callbackhtml", "callbackScheduledSave", "callbackPasteImage", "callbackImagePath", "addToDo", "chooseStyle", "openAlbum", "callbackGetSize", "getBreakPoint"],
               controller: this.controllerShow
             })
             .onPageEnd((e) => {