197 lines
6.2 KiB
QML
197 lines
6.2 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"
|
|
property string contentMd: ""
|
|
property bool isEditing: false
|
|
property bool isEditable: false
|
|
Layout.fillWidth: true
|
|
|
|
FluScrollablePage {
|
|
id: edit_page
|
|
anchors.fill: parent
|
|
leftPadding: 5
|
|
topPadding: 5
|
|
rightPadding: 5
|
|
bottomPadding: 0
|
|
|
|
Component.onCompleted: {
|
|
|
|
textArea_edit.text = edit_area.contentMd
|
|
edit_area.contentMd = Qt.binding(
|
|
function() {
|
|
return textArea_edit.text
|
|
})
|
|
textArea_preview.text = Qt.binding(
|
|
function() {
|
|
return edit_area.contentMd
|
|
})
|
|
}
|
|
|
|
Item {
|
|
Layout.fillWidth: true
|
|
implicitHeight: 30
|
|
|
|
FluIconButton {
|
|
id: button_edit
|
|
iconSource: FluentIcons.Edit
|
|
iconSize: 12
|
|
visible: edit_area.isEditable
|
|
anchors {
|
|
right: parent.right
|
|
verticalCenter: parent.verticalCenter
|
|
}
|
|
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
|
|
iconSize: 12
|
|
text: "取消"
|
|
visible: false
|
|
anchors {
|
|
right: parent.right
|
|
verticalCenter: parent.verticalCenter
|
|
}
|
|
onClicked: {
|
|
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
|
|
}
|
|
}
|
|
|
|
FluIconButton {
|
|
id: button_save
|
|
iconSource: FluentIcons.Save
|
|
iconSize: 12
|
|
text: "保存"
|
|
visible: false
|
|
anchors {
|
|
right: button_cancel.left
|
|
verticalCenter: parent.verticalCenter
|
|
}
|
|
}
|
|
|
|
FluIconButton {
|
|
id: button_preview
|
|
iconSource: FluentIcons.PreviewLink
|
|
iconSize: 12
|
|
text: "预览"
|
|
visible: false
|
|
onClicked: {
|
|
md_show_view.isEditShowing = false
|
|
md_show_view.isPreviewShowing = true
|
|
}
|
|
|
|
anchors {
|
|
right: button_save.left
|
|
verticalCenter: parent.verticalCenter
|
|
}
|
|
}
|
|
|
|
FluIconButton {
|
|
id: button_subfield
|
|
iconSource: md_show_view.isPreviewShowing ? FluentIcons.ClosePane: FluentIcons.OpenPane
|
|
iconSize: 12
|
|
text: "分栏"
|
|
visible: false
|
|
onClicked: {
|
|
if(md_show_view.isEditShowing ^ md_show_view.isPreviewShowing) {
|
|
md_show_view.isEditShowing = true
|
|
md_show_view.isPreviewShowing = true
|
|
} else {
|
|
md_show_view.isEditShowing = true
|
|
md_show_view.isPreviewShowing = false
|
|
}
|
|
}
|
|
anchors {
|
|
right: button_preview.left
|
|
verticalCenter: parent.verticalCenter
|
|
}
|
|
}
|
|
|
|
FluIconButton {
|
|
id: button_editing
|
|
iconSource: FluentIcons.ClipboardList
|
|
iconSize: 12
|
|
text: "编辑"
|
|
visible: false
|
|
onClicked: {
|
|
md_show_view.isEditShowing = true
|
|
md_show_view.isPreviewShowing = false
|
|
}
|
|
anchors {
|
|
right: button_subfield.left
|
|
verticalCenter: parent.verticalCenter
|
|
}
|
|
}
|
|
}
|
|
SplitView {
|
|
id: md_show_view
|
|
property bool isEditShowing: false
|
|
property bool isPreviewShowing: true
|
|
|
|
Layout.fillWidth: true
|
|
implicitHeight: width * 8/16
|
|
|
|
ScrollView {
|
|
id: edit_show_view
|
|
implicitWidth: parent.width / 2
|
|
height: parent.height
|
|
visible: md_show_view.isEditShowing
|
|
TextArea {
|
|
id: textArea_edit
|
|
wrapMode: TextEdit.Wrap
|
|
background: Rectangle {
|
|
color: customTextArea.focus ? "#E0E0E0" : "white"
|
|
border.color: FluColors.Grey30
|
|
radius: 10
|
|
}
|
|
}
|
|
}
|
|
|
|
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
|
|
background: Rectangle {
|
|
color: customTextArea.focus ? "#E0E0E0" : "white"
|
|
border.color: FluColors.Grey30
|
|
radius: 10
|
|
}
|
|
readOnly: true
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
enabled: false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|