AicsKnowledgeBase_client/AicsKnowledgeBase/qml/page/NoteEditPage.qml

212 lines
6.8 KiB
QML
Raw Normal View History

2023-07-03 20:43:46 +08:00
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"
2023-07-06 21:36:58 +08:00
property string contentMd: ""
property bool isEditing: false
property bool isEditable: false
2023-07-06 21:21:15 +08:00
Layout.fillWidth: true
2023-07-03 20:43:46 +08:00
FluScrollablePage {
id: edit_page
anchors.fill: parent
2023-07-04 10:17:07 +08:00
leftPadding: 5
topPadding: 5
rightPadding: 5
2023-07-03 20:43:46 +08:00
bottomPadding: 0
Component.onCompleted: {
2023-07-06 22:13:13 +08:00
if (isEditing) {
button_edit.visible = false
button_save.visible = true
button_preview.visible = true
button_subfield.visible = true
button_editing.visible = true
button_cancel.visible = true
md_show_view.isEditShowing = true
md_show_view.isPreviewShowing = false
} else {
button_edit.visible = edit_area.isEditable
button_save.visible = false
button_preview.visible = false
button_subfield.visible = false
button_editing.visible = false
button_cancel.visible = false
md_show_view.isEditShowing = false
md_show_view.isPreviewShowing = true
}
2023-07-03 20:43:46 +08:00
2023-07-06 21:36:58 +08:00
textArea_edit.text = edit_area.contentMd
2023-07-06 22:13:13 +08:00
edit_area.contentMd = Qt.binding(function () {
return textArea_edit.text
})
textArea_preview.text = Qt.binding(function () {
return edit_area.contentMd
})
2023-07-03 20:43:46 +08:00
}
Item {
Layout.fillWidth: true
2023-07-04 10:17:07 +08:00
implicitHeight: 30
2023-07-03 20:43:46 +08:00
FluIconButton {
id: button_edit
iconSource: FluentIcons.Edit
2023-07-04 10:17:07 +08:00
iconSize: 12
2023-07-06 21:36:58 +08:00
visible: edit_area.isEditable
2023-07-03 20:43:46 +08:00
anchors {
right: parent.right
2023-07-04 10:17:07 +08:00
verticalCenter: parent.verticalCenter
2023-07-03 20:43:46 +08:00
}
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
2023-07-04 10:17:07 +08:00
iconSize: 12
2023-07-03 20:43:46 +08:00
text: "取消"
visible: false
anchors {
right: parent.right
2023-07-04 10:17:07 +08:00
verticalCenter: parent.verticalCenter
2023-07-03 20:43:46 +08:00
}
onClicked: {
2023-07-06 21:36:58 +08:00
button_edit.visible = edit_area.isEditable
2023-07-03 20:43:46 +08:00
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
2023-07-04 10:17:07 +08:00
iconSize: 12
2023-07-03 20:43:46 +08:00
text: "保存"
visible: false
anchors {
right: button_cancel.left
2023-07-04 10:17:07 +08:00
verticalCenter: parent.verticalCenter
2023-07-03 20:43:46 +08:00
}
}
FluIconButton {
id: button_preview
iconSource: FluentIcons.PreviewLink
2023-07-04 10:17:07 +08:00
iconSize: 12
2023-07-03 20:43:46 +08:00
text: "预览"
visible: false
onClicked: {
md_show_view.isEditShowing = false
md_show_view.isPreviewShowing = true
}
anchors {
right: button_save.left
2023-07-04 10:17:07 +08:00
verticalCenter: parent.verticalCenter
2023-07-03 20:43:46 +08:00
}
}
FluIconButton {
id: button_subfield
2023-07-06 22:13:13 +08:00
iconSource: md_show_view.isPreviewShowing ? FluentIcons.ClosePane : FluentIcons.OpenPane
2023-07-04 10:17:07 +08:00
iconSize: 12
2023-07-03 20:43:46 +08:00
text: "分栏"
visible: false
onClicked: {
2023-07-06 22:13:13 +08:00
if (md_show_view.isEditShowing ^ md_show_view.isPreviewShowing) {
2023-07-04 10:17:07 +08:00
md_show_view.isEditShowing = true
md_show_view.isPreviewShowing = true
} else {
md_show_view.isEditShowing = true
md_show_view.isPreviewShowing = false
}
2023-07-03 20:43:46 +08:00
}
anchors {
right: button_preview.left
2023-07-04 10:17:07 +08:00
verticalCenter: parent.verticalCenter
2023-07-03 20:43:46 +08:00
}
}
FluIconButton {
id: button_editing
iconSource: FluentIcons.ClipboardList
2023-07-04 10:17:07 +08:00
iconSize: 12
2023-07-03 20:43:46 +08:00
text: "编辑"
visible: false
onClicked: {
md_show_view.isEditShowing = true
md_show_view.isPreviewShowing = false
}
anchors {
right: button_subfield.left
2023-07-04 10:17:07 +08:00
verticalCenter: parent.verticalCenter
2023-07-03 20:43:46 +08:00
}
}
}
SplitView {
id: md_show_view
property bool isEditShowing: false
property bool isPreviewShowing: true
Layout.fillWidth: true
2023-07-06 22:13:13 +08:00
implicitHeight: width * 8 / 16
2023-07-04 10:17:07 +08:00
2023-07-03 20:43:46 +08:00
ScrollView {
id: edit_show_view
implicitWidth: parent.width / 2
height: parent.height
visible: md_show_view.isEditShowing
TextArea {
id: textArea_edit
wrapMode: TextEdit.Wrap
2023-07-04 10:17:07 +08:00
background: Rectangle {
2023-07-06 22:13:13 +08:00
border.color: FluColors.Grey30
radius: 10
}
2023-07-03 20:43:46 +08:00
}
}
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
2023-07-04 10:17:07 +08:00
background: Rectangle {
2023-07-06 22:13:13 +08:00
border.color: FluColors.Grey30
radius: 10
}
2023-07-04 10:17:07 +08:00
readOnly: true
MouseArea {
anchors.fill: parent
enabled: false
}
2023-07-03 20:43:46 +08:00
}
}
}
}
}