AicsKnowledgeBase_client/AicsKnowledgeBase/qml/page/NoteEditPage.qml

165 lines
4.9 KiB
QML

import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Controls.Basic
import QtWebEngine 1.2
import FluentUI
FluArea {
id: edit_area
paddings: 0
backgroundColor: "#f9f9f9"
property string noteId: "234"
FluScrollablePage {
id: edit_page
anchors.fill: parent
leftPadding: 10
topPadding: 10
rightPadding: 10
bottomPadding: 0
property string contentMd: "**ssijfdijgo**\ndfdgfdggggggggggggggggggggggggggggggggggggggggggggggggggg"
property bool isEditing: false
property bool isEditable: false
Component.onCompleted: {
edit_page.isEditable = true
textArea_edit.text = edit_page.contentMd
edit_page.contentMd = Qt.binding(
function() {
return textArea_edit.text
})
textArea_preview.text = Qt.binding(
function() {
return edit_page.contentMd
})
}
Item {
Layout.fillWidth: true
implicitHeight: 50
FluIconButton {
id: button_edit
iconSource: FluentIcons.Edit
visible: true
anchors {
right: parent.right
}
onClicked: {
button_edit.visible = false
button_save.visible = true
button_preview.visible = true
button_subfield.visible = true
button_editing.visible = true
button_cancel.visible = true
}
}
FluIconButton {
id: button_cancel
iconSource: FluentIcons.Cancel
text: "取消"
visible: false
anchors {
right: parent.right
}
onClicked: {
button_edit.visible = edit_page.isEditable
button_save.visible = false
button_preview.visible = false
button_subfield.visible = false
button_editing.visible = false
button_cancel.visible = false
}
}
FluIconButton {
id: button_save
iconSource: FluentIcons.Save
text: "保存"
visible: false
anchors {
right: button_cancel.left
}
}
FluIconButton {
id: button_preview
iconSource: FluentIcons.PreviewLink
text: "预览"
visible: false
onClicked: {
md_show_view.isEditShowing = false
md_show_view.isPreviewShowing = true
}
anchors {
right: button_save.left
}
}
FluIconButton {
id: button_subfield
iconSource: md_show_view.isPreviewShowing ? FluentIcons.ClosePane: FluentIcons.OpenPane
text: "分栏"
visible: false
onClicked: {
md_show_view.isEditShowing = true
md_show_view.isPreviewShowing = !md_show_view.isPreviewShowing
}
anchors {
right: button_preview.left
}
}
FluIconButton {
id: button_editing
iconSource: FluentIcons.ClipboardList
text: "编辑"
visible: false
onClicked: {
md_show_view.isEditShowing = true
md_show_view.isPreviewShowing = false
}
anchors {
right: button_subfield.left
}
}
}
SplitView {
id: md_show_view
property bool isEditShowing: false
property bool isPreviewShowing: true
Layout.fillWidth: true
implicitHeight: 300
ScrollView {
id: edit_show_view
implicitWidth: parent.width / 2
height: parent.height
visible: md_show_view.isEditShowing
TextArea {
id: textArea_edit
wrapMode: TextEdit.Wrap
}
}
ScrollView {
id: preview_show_view
implicitWidth: parent.width / 2
height: parent.height
visible: md_show_view.isPreviewShowing
TextArea {
id: textArea_preview
wrapMode: TextEdit.Wrap
textFormat: TextEdit.MarkdownText
}
}
}
}
}