285 lines
9.5 KiB
QML
285 lines
9.5 KiB
QML
|
/****************************************************************************
|
||
|
|
**
|
||
|
|
** Copyright (C) 2016 The Qt Company Ltd.
|
||
|
|
** Contact: http://www.qt.io/licensing/
|
||
|
|
**
|
||
|
|
** This file is part of the examples of the Qt Toolkit.
|
||
|
|
**
|
||
|
|
** $QT_BEGIN_LICENSE:BSD$
|
||
|
|
** You may use this file under the terms of the BSD license as follows:
|
||
|
|
**
|
||
|
|
** "Redistribution and use in source and binary forms, with or without
|
||
|
|
** modification, are permitted provided that the following conditions are
|
||
|
|
** met:
|
||
|
|
** * Redistributions of source code must retain the above copyright
|
||
|
|
** notice, this list of conditions and the following disclaimer.
|
||
|
|
** * Redistributions in binary form must reproduce the above copyright
|
||
|
|
** notice, this list of conditions and the following disclaimer in
|
||
|
|
** the documentation and/or other materials provided with the
|
||
|
|
** distribution.
|
||
|
|
** * Neither the name of The Qt Company Ltd nor the names of its
|
||
|
|
** contributors may be used to endorse or promote products derived
|
||
|
|
** from this software without specific prior written permission.
|
||
|
|
**
|
||
|
|
**
|
||
|
|
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
|
||
|
|
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
|
||
|
|
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
|
||
|
|
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
|
||
|
|
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
||
|
|
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
|
||
|
|
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
|
||
|
|
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
|
||
|
|
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||
|
|
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
||
|
|
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
|
||
|
|
**
|
||
|
|
** $QT_END_LICENSE$
|
||
|
|
**
|
||
|
|
****************************************************************************/
|
||
|
|
|
||
|
|
import QtGraphicalEffects 1.0
|
||
|
|
import QtQuick 2.8
|
||
|
|
import QtQuick.Controls 2.1
|
||
|
|
import QtQuick.Controls.Material 2.1
|
||
|
|
import QtQuick.Layouts 1.3
|
||
|
|
import QtQuick.Window 2.0
|
||
|
|
|
||
|
|
import io.qt.examples.texteditor 1.0
|
||
|
|
|
||
|
|
// TODO:
|
||
|
|
// - make designer-friendly
|
||
|
|
|
||
|
|
ApplicationWindow {
|
||
|
|
id: window
|
||
|
|
visible: true
|
||
|
|
title: document.fileName + " - Text Editor Example"
|
||
|
|
|
||
|
|
header: ToolBar {
|
||
|
|
leftPadding: 5
|
||
|
|
|
||
|
|
RowLayout {
|
||
|
|
anchors.fill: parent
|
||
|
|
spacing: 0
|
||
|
|
|
||
|
|
ToolButton {
|
||
|
|
id: doneEditingButton
|
||
|
|
font.family: "fontello"
|
||
|
|
text: "\uE80A" // icon-ok
|
||
|
|
opacity: !textArea.readOnly ? 1 : 0
|
||
|
|
onClicked: textArea.readOnly = true
|
||
|
|
|
||
|
|
Material.foreground: Material.accent
|
||
|
|
}
|
||
|
|
|
||
|
|
Label {
|
||
|
|
text: qsTr("Text Editor Example")
|
||
|
|
font.bold: true
|
||
|
|
font.pixelSize: 20
|
||
|
|
}
|
||
|
|
|
||
|
|
Item {
|
||
|
|
Layout.fillWidth: true
|
||
|
|
}
|
||
|
|
|
||
|
|
ToolButton {
|
||
|
|
font.family: "fontello"
|
||
|
|
text: "\uF142" // icon-ellipsis-vert
|
||
|
|
onClicked: menu.open()
|
||
|
|
|
||
|
|
Menu {
|
||
|
|
id: menu
|
||
|
|
|
||
|
|
MenuItem {
|
||
|
|
text: qsTr("About")
|
||
|
|
onTriggered: aboutDialog.open()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
DocumentHandler {
|
||
|
|
id: document
|
||
|
|
document: textArea.textDocument
|
||
|
|
cursorPosition: textArea.cursorPosition
|
||
|
|
selectionStart: textArea.selectionStart
|
||
|
|
selectionEnd: textArea.selectionEnd
|
||
|
|
// textColor: TODO
|
||
|
|
Component.onCompleted: document.load("qrc:/texteditor.html")
|
||
|
|
onLoaded: {
|
||
|
|
textArea.text = text
|
||
|
|
}
|
||
|
|
onError: {
|
||
|
|
errorDialog.text = message
|
||
|
|
errorDialog.visible = true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Flickable {
|
||
|
|
id: flickable
|
||
|
|
flickableDirection: Flickable.VerticalFlick
|
||
|
|
anchors.fill: parent
|
||
|
|
|
||
|
|
TextArea.flickable: TextArea {
|
||
|
|
id: textArea
|
||
|
|
textFormat: Qt.RichText
|
||
|
|
wrapMode: TextArea.Wrap
|
||
|
|
readOnly: true
|
||
|
|
persistentSelection: true
|
||
|
|
// Different styles have different padding and background
|
||
|
|
// decorations, but since this editor is almost taking up the
|
||
|
|
// entire window, we don't need them.
|
||
|
|
leftPadding: 6
|
||
|
|
rightPadding: 6
|
||
|
|
topPadding: 0
|
||
|
|
bottomPadding: 0
|
||
|
|
background: null
|
||
|
|
|
||
|
|
onLinkActivated: Qt.openUrlExternally(link)
|
||
|
|
}
|
||
|
|
|
||
|
|
ScrollBar.vertical: ScrollBar {}
|
||
|
|
}
|
||
|
|
|
||
|
|
footer: ToolBar {
|
||
|
|
visible: !textArea.readOnly && textArea.activeFocus
|
||
|
|
|
||
|
|
Material.primary: "#E0E0E0"
|
||
|
|
Material.elevation: 0
|
||
|
|
|
||
|
|
Flickable {
|
||
|
|
anchors.fill: parent
|
||
|
|
contentWidth: rowLayout.implicitWidth
|
||
|
|
contentHeight: rowLayout.height
|
||
|
|
flickableDirection: Qt.Horizontal
|
||
|
|
boundsBehavior: Flickable.StopAtBounds
|
||
|
|
|
||
|
|
RowLayout {
|
||
|
|
id: rowLayout
|
||
|
|
height: parent.height
|
||
|
|
|
||
|
|
RowLayout {
|
||
|
|
ToolButton {
|
||
|
|
id: boldButton
|
||
|
|
text: "\uE800" // icon-bold
|
||
|
|
font.family: "fontello"
|
||
|
|
// Don't want to close the virtual keyboard when this is clicked.
|
||
|
|
focusPolicy: Qt.NoFocus
|
||
|
|
checkable: true
|
||
|
|
checked: document.bold
|
||
|
|
onClicked: document.bold = !document.bold
|
||
|
|
}
|
||
|
|
ToolButton {
|
||
|
|
id: italicButton
|
||
|
|
text: "\uE801" // icon-italic
|
||
|
|
font.family: "fontello"
|
||
|
|
focusPolicy: Qt.NoFocus
|
||
|
|
checkable: true
|
||
|
|
checked: document.italic
|
||
|
|
onClicked: document.italic = !document.italic
|
||
|
|
}
|
||
|
|
ToolButton {
|
||
|
|
id: underlineButton
|
||
|
|
text: "\uF0CD" // icon-underline
|
||
|
|
font.family: "fontello"
|
||
|
|
focusPolicy: Qt.NoFocus
|
||
|
|
checkable: true
|
||
|
|
checked: document.underline
|
||
|
|
onClicked: document.underline = !document.underline
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
ToolSeparator {}
|
||
|
|
|
||
|
|
RowLayout {
|
||
|
|
ToolButton {
|
||
|
|
id: alignLeftButton
|
||
|
|
text: "\uE803" // icon-align-left
|
||
|
|
font.family: "fontello"
|
||
|
|
focusPolicy: Qt.NoFocus
|
||
|
|
checkable: true
|
||
|
|
checked: document.alignment == Qt.AlignLeft
|
||
|
|
onClicked: document.alignment = Qt.AlignLeft
|
||
|
|
}
|
||
|
|
ToolButton {
|
||
|
|
id: alignCenterButton
|
||
|
|
text: "\uE804" // icon-align-center
|
||
|
|
font.family: "fontello"
|
||
|
|
focusPolicy: Qt.NoFocus
|
||
|
|
checkable: true
|
||
|
|
checked: document.alignment == Qt.AlignHCenter
|
||
|
|
onClicked: document.alignment = Qt.AlignHCenter
|
||
|
|
}
|
||
|
|
ToolButton {
|
||
|
|
id: alignRightButton
|
||
|
|
text: "\uE805" // icon-align-right
|
||
|
|
font.family: "fontello"
|
||
|
|
focusPolicy: Qt.NoFocus
|
||
|
|
checkable: true
|
||
|
|
checked: document.alignment == Qt.AlignRight
|
||
|
|
onClicked: document.alignment = Qt.AlignRight
|
||
|
|
}
|
||
|
|
ToolButton {
|
||
|
|
id: alignJustifyButton
|
||
|
|
text: "\uE806" // icon-align-justify
|
||
|
|
font.family: "fontello"
|
||
|
|
focusPolicy: Qt.NoFocus
|
||
|
|
checkable: true
|
||
|
|
checked: document.alignment == Qt.AlignJustify
|
||
|
|
onClicked: document.alignment = Qt.AlignJustify
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Button {
|
||
|
|
id: editButton
|
||
|
|
font.family: "fontello"
|
||
|
|
text: "\uE809" // icon-pencil
|
||
|
|
width: 48
|
||
|
|
height: width
|
||
|
|
// Don't want to use anchors for the y position, because it will anchor
|
||
|
|
// to the footer, leaving a large vertical gap.
|
||
|
|
y: parent.height - height - 12
|
||
|
|
anchors.right: parent.right
|
||
|
|
anchors.margins: 12
|
||
|
|
visible: textArea.readOnly
|
||
|
|
|
||
|
|
Material.foreground: "white"
|
||
|
|
|
||
|
|
onClicked: {
|
||
|
|
textArea.readOnly = false
|
||
|
|
// Force focus on the text area so the cursor and footer show up.
|
||
|
|
textArea.forceActiveFocus()
|
||
|
|
}
|
||
|
|
|
||
|
|
background: Rectangle {
|
||
|
|
implicitWidth: parent.width
|
||
|
|
implicitHeight: parent.height
|
||
|
|
radius: width / 2
|
||
|
|
color: parent.down ? Qt.darker(Material.accent) : Material.accent
|
||
|
|
|
||
|
|
layer.enabled: editButton.enabled
|
||
|
|
layer.effect: DropShadow {
|
||
|
|
color: "#44000000"
|
||
|
|
verticalOffset: 2
|
||
|
|
samples: 16
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Dialog {
|
||
|
|
id: aboutDialog
|
||
|
|
standardButtons: Dialog.Ok
|
||
|
|
modal: true
|
||
|
|
x: parent.width / 2 - width / 2
|
||
|
|
y: parent.height / 2 - height / 2
|
||
|
|
|
||
|
|
contentItem: Label {
|
||
|
|
text: qsTr("Qt Quick Controls 2 - Text Editor Example")
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|