mirror of
https://gitee.com/openharmony/applications_notes
synced 2024-10-06 21:23:27 +00:00
修改按钮样式以及添加图片逻辑
Signed-off-by: @two-thousand-or-three-thousand <lisiquan1@huawei.com>
This commit is contained in:
parent
a91df23568
commit
8151ab75ba
@ -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>
|
||||
|
@ -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;
|
||||
}
|
@ -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';
|
||||
}
|
||||
}
|
||||
|
||||
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';
|
||||
}
|
||||
})
|
@ -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)
|
||||
|
@ -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)
|
||||
|
@ -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) => {
|
||||
|
Loading…
Reference in New Issue
Block a user