examples/qml/example.qml

0001 /*
0002     SPDX-FileCopyrightText: 2021 Volker Krause <vkrause@kde.org>
0003
0004     SPDX-License-Identifier: MIT
0005 */
0006
0007 import QtQuick
0008 import QtQuick.Controls
0009 import QtQuick.Layouts
0010 import org.kde.kirigami as Kirigami
0011 import org.kde.syntaxhighlighting
0012
0013 ApplicationWindow {
0014     visible: true
0015     width: 1024
0016     height: 720
0017
0018     ColumnLayout {
0019         anchors.fill: parent
0020         spacing: Kirigami.Units.smallSpacing
0021         RowLayout {
0022             spacing: Kirigami.Units.smallSpacing
0023             Layout.fillWidth: true
0024             Layout.topMargin: Kirigami.Units.smallSpacing
0025             Layout.leftMargin: Kirigami.Units.smallSpacing
0026             Layout.rightMargin: Kirigami.Units.smallSpacing
0027             Label { text: "Syntax" }
0028             ComboBox {
0029                 Layout.fillWidth: true
0030                 model: Repository.definitions
0031                 displayText: currentValue.translatedName + " (" + currentValue.translatedSection + ")"
0032                 textRole: "translatedName"
0033                 onCurrentIndexChanged: highlighter.definition = currentValue
0034             }
0035         }
0036         RowLayout {
0037             spacing: Kirigami.Units.smallSpacing
0038             Layout.fillWidth: true
0039             Layout.leftMargin: Kirigami.Units.smallSpacing
0040             Layout.rightMargin: Kirigami.Units.smallSpacing
0041             Label { text: "Theme" }
0042             ComboBox {
0043                 Layout.fillWidth: true
0044                 model: Repository.themes
0045                 displayText: currentValue.translatedName
0046                 textRole: "translatedName"
0047                 onCurrentIndexChanged: highlighter.theme = currentValue
0048             }
0049             Button {
0050                 text: "Light"
0051                 onClicked: highlighter.theme = Repository.defaultTheme(Repository.LightTheme).name
0052             }
0053             Button {
0054                 text: "Dark"
0055                 onClicked: highlighter.theme = Repository.DarkTheme
0056             }
0057         }
0058         ScrollView {
0059             Layout.fillHeight: true
0060             Layout.fillWidth: true
0061
0062             TextArea {
0063                 id: myText
0064
0065                 font.family: "monospace"
0066                 wrapMode: TextEdit.Wrap
0067                 text: `\
0068 Text {
0069     text: "Hello World!"
0070     width: 42
0071 }\
0072 `
0073                 Kirigami.SpellCheck.enabled: false
0074
0075                 SyntaxHighlighter {
0076                     id: highlighter
0077                     textEdit: myText
0078                     repository: Repository
0079                 }
0080             }
0081         }
0082         Label {
0083             Layout.fillWidth: true
0084             Layout.margins: Kirigami.Units.smallSpacing
0085             Layout.topMargin: 0
0086             elide: Text.ElideRight
0087             text: `Syntax: ${highlighter.definition.translatedSection}/${highlighter.definition.translatedName}. Theme: ${highlighter.theme.translatedName}`
0088         }
0089     }
0090
0091     Component.onCompleted: {
0092         highlighter.definition = Repository.definitionForFileName("example.qml")
0093     }
0094 }