diff --git a/common/resources/src/main/resources/rawfile/editor.html b/common/resources/src/main/resources/rawfile/editor.html index eaca8ce..c0a36c3 100644 --- a/common/resources/src/main/resources/rawfile/editor.html +++ b/common/resources/src/main/resources/rawfile/editor.html @@ -18,7 +18,7 @@ id="editorjs" contenteditable="true"> -
+
清单 diff --git a/common/resources/src/main/resources/rawfile/editor_style.css b/common/resources/src/main/resources/rawfile/editor_style.css index 89c7f1e..008c4d4 100644 --- a/common/resources/src/main/resources/rawfile/editor_style.css +++ b/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; } \ No newline at end of file diff --git a/common/resources/src/main/resources/rawfile/rich_editor.js b/common/resources/src/main/resources/rawfile/rich_editor.js index 9137a54..c18920a 100644 --- a/common/resources/src/main/resources/rawfile/rich_editor.js +++ b/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 = '30px'; - document.getElementById('img2').style.fontSize = '30px'; - document.getElementById('img2').style.fontSize = '30px'; - document.getElementById('img3').style.fontSize = '30px'; - document.getElementById('img3').style.fontSize = '30px'; - document.getElementById('lable1').style.fontSize = '14px'; - document.getElementById('lable2').style.fontSize = '14px'; - document.getElementById('lable3').style.fontSize = '14px'; + document.getElementById('img1').style.fontSize = '24px'; + document.getElementById('img1').style.fontSize = '24px'; + document.getElementById('img2').style.fontSize = '24px'; + document.getElementById('img2').style.fontSize = '24px'; + document.getElementById('img3').style.fontSize = '24px'; + document.getElementById('img3').style.fontSize = '24px'; + document.getElementById('lable1').style.fontSize = '12px'; + document.getElementById('lable2').style.fontSize = '12px'; + document.getElementById('lable3').style.fontSize = '12px'; } function changeSizeToTablet() { @@ -477,4 +477,18 @@ function changeSizeToTablet() { document.getElementById('lable1').style.fontSize = '12px'; document.getElementById('lable2').style.fontSize = '12px'; document.getElementById('lable3').style.fontSize = '12px'; -} \ No newline at end of file +} + +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'; + } +}) \ No newline at end of file diff --git a/features/src/main/ets/components/NoteContent.ets b/features/src/main/ets/components/NoteContent.ets index 636d2e5..cb5f256 100644 --- a/features/src/main/ets/components/NoteContent.ets +++ b/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) diff --git a/features/src/main/ets/components/NoteContentComp.ets b/features/src/main/ets/components/NoteContentComp.ets index 6ee7529..5fee10b 100644 --- a/features/src/main/ets/components/NoteContentComp.ets +++ b/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) diff --git a/features/src/main/ets/components/NoteContentCompPortrait.ets b/features/src/main/ets/components/NoteContentCompPortrait.ets index 1c46a31..3a269ce 100644 --- a/features/src/main/ets/components/NoteContentCompPortrait.ets +++ b/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) => {