calamares/src/modules/keyboardq/keyboardq.qml
demmm 7876cdc71a [keyboardq] Move to using a Drawer
no longer use a ComboBox or stack view
if accepted, other QML models using a ComboBox will move to Drawer too
2022-08-23 18:56:49 +02:00

357 lines
13 KiB
QML

/* === This file is part of Calamares - <https://calamares.io> ===
*
* SPDX-FileCopyrightText: 2020 - 2022 Anke Boersma <demm@kaosx.us>
* SPDX-License-Identifier: GPL-3.0-or-later
*
* Calamares is Free Software: see the License-Identifier above.
*
*/
import io.calamares.core 1.0
import io.calamares.ui 1.0
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.3
import org.kde.kirigami 2.7 as Kirigami
import "data"
Item {
width: 800 //parent.width
height: 600
readonly property color backgroundColor: "#E6E9EA" //Kirigami.Theme.backgroundColor
readonly property color listBackgroundColor: "white"
readonly property color textFieldColor: "#121212"
readonly property color textFieldBackgroundColor: "#F8F8F8"
readonly property color textColor: Kirigami.Theme.textColor
readonly property color highlightedTextColor: Kirigami.Theme.highlightedTextColor
readonly property color highlightColor: Kirigami.Theme.highlightColor
property var langXml: ["de", "en", "es", "fr", "ru",]
property var arXml: ["Arabic"]
property var ruXml: ["Azerba", "Belaru", "Kazakh", "Kyrgyz", "Mongol",
"Russia", "Tajik", "Ukrain"]
property var frXml: ["Bambar", "Belgia","French", "Wolof"]
property var enXml: ["Bikol", "Chines", "Englis", "Irish", "Lithua", "Maori"]
property var esXml: ["Spanis"]
property var deXml: ["German"]
property var ptXml: ["Portug"]
property var scanXml: ["Danish", "Finnis", "Norweg", "Swedis"]
property var afganiXml: ["Afghan"]
property var genericXml: ["Armeni", "Bulgar", "Dutch", "Estoni", "Icelan",
"Indone", "Italia", "Latvia", "Maltes", "Moldav", "Romani", "Swahil", "Turkis"]
property var genericQzXml: ["Albani", "Bosnia", "Croati", "Czech", "Hungar",
"Luxemb", "Monten", "Polish", "Serbia", "Sloven", "Slovak"]
property var genericAzXml: []
property var keyIndex: []
Rectangle {
id: backgroundItem
anchors.fill: parent
width: 800
color: backgroundColor
Label {
id: header
anchors.horizontalCenter: parent.horizontalCenter
text: qsTr("To activate keyboard preview, select a layout.")
color: textColor
font.bold: true
}
Drawer {
id: drawer
width: 0.4 * backgroundItem.width
height: backgroundItem.height
edge: Qt.RightEdge
ScrollView {
id: scroll1
anchors.fill: parent
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ListView {
id: models
focus: true
clip: true
boundsBehavior: Flickable.StopAtBounds
width: parent.width
model: config.keyboardModelsModel
Component.onCompleted: positionViewAtIndex(model.currentIndex, ListView.Center)
currentIndex: model.currentIndex
delegate: ItemDelegate {
property variant currentModel: model
hoverEnabled: true
width: 0.4 * backgroundItem.width
implicitHeight: 24
highlighted: ListView.isCurrentItem
Label {
Layout.fillHeight: true
Layout.fillWidth: true
horizontalAlignment: Text.AlignHCenter
width: parent.width
height: 24
color: highlighted ? "#eff0f1" : "#1F1F1F"
text: model.label
background: Rectangle {
color: highlighted || hovered ? "#3498DB" : "#ffffff"
opacity: highlighted || hovered ? 0.5 : 0.9
}
MouseArea {
hoverEnabled: true
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
models.currentIndex = index
drawer.close()
}
}
}
}
onCurrentItemChanged: { config.keyboardModels = model[currentIndex] } /* This works because model is a stringlist */
}
}
}
Rectangle {
id: modelLabel
anchors.top: header.bottom
anchors.topMargin: 10
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width / 1.5
height: 36
color: mouseBar.containsMouse ? "#eff0f1" : "transparent";
MouseArea {
id: mouseBar
anchors.fill: parent;
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onClicked: {
drawer.open()
}
Text {
anchors.centerIn: parent
text: qsTr("<b>Keyboard Model:&nbsp;&nbsp;</b>") + models.currentItem.currentModel.label
color: textColor
}
Image {
source: "data/pan-end-symbolic.svg"
anchors.centerIn: parent
anchors.horizontalCenterOffset : parent.width / 2.5
fillMode: Image.PreserveAspectFit
height: 22
}
}
}
RowLayout {
id: stack
anchors.top: modelLabel.bottom
anchors.topMargin: 10
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width / 1.1
spacing: 10
ListView {
id: layouts
ScrollBar.vertical: ScrollBar {
active: true
}
Layout.preferredWidth: parent.width / 2
height: 220
focus: true
clip: true
boundsBehavior: Flickable.StopAtBounds
spacing: 2
headerPositioning: ListView.OverlayHeader
header: Rectangle{
height: 24
width: parent.width
z: 2
color:backgroundColor
Text {
text: qsTr("Layout")
anchors.centerIn: parent
color: textColor
font.bold: true
}
}
Rectangle {
z: parent.z - 1
anchors.fill: parent
color: listBackgroundColor
opacity: 0.7
}
model: config.keyboardLayoutsModel
currentIndex: model.currentIndex
Component.onCompleted: positionViewAtIndex(model.currentIndex, ListView.Center)
delegate: ItemDelegate {
hoverEnabled: true
width: parent.width
implicitHeight: 24
highlighted: ListView.isCurrentItem
RowLayout {
anchors.fill: parent
Label {
id: label1
text: model.label
horizontalAlignment: Text.AlignHCenter
Layout.fillHeight: true
Layout.fillWidth: true
width: parent.width
height: 24
color: highlighted ? highlightedTextColor : textColor
background: Rectangle {
color: highlighted || hovered ? highlightColor : listBackgroundColor
opacity: highlighted || hovered ? 0.5 : 0.3
}
}
}
onClicked: {
layouts.model.currentIndex = index
keyIndex = label1.text.substring(0,6)
layouts.positionViewAtIndex(index, ListView.Center)
}
}
}
ListView {
id: variants
ScrollBar.vertical: ScrollBar {
active: true
}
Layout.preferredWidth: parent.width / 2
height: 220
focus: true
clip: true
boundsBehavior: Flickable.StopAtBounds
spacing: 2
headerPositioning: ListView.OverlayHeader
header: Rectangle{
height: 24
width: parent.width
z: 2
color:backgroundColor
Text {
text: qsTr("Variant")
anchors.centerIn: parent
color: textColor
font.bold: true
}
}
Rectangle {
z: parent.z - 1
anchors.fill: parent
color: listBackgroundColor
opacity: 0.7
}
model: config.keyboardVariantsModel
currentIndex: model.currentIndex
Component.onCompleted: positionViewAtIndex(model.currentIndex, ListView.Center)
delegate: ItemDelegate {
hoverEnabled: true
width: parent.width
implicitHeight: 24
highlighted: ListView.isCurrentItem
RowLayout {
anchors.fill: parent
Label {
text: model.label
horizontalAlignment: Text.AlignHCenter
Layout.fillHeight: true
Layout.fillWidth: true
width: parent.width
height: 24
color: highlighted ? highlightedTextColor : textColor
background: Rectangle {
color: highlighted || hovered ? highlightColor : listBackgroundColor
opacity: highlighted || hovered ? 0.5 : 0.3
}
}
}
onClicked: {
variants.model.currentIndex = index
variants.positionViewAtIndex(index, ListView.Center)
}
}
}
}
TextField {
id: textInput
placeholderText: qsTr("Type here to test your keyboard")
height: 36
width: parent.width / 1.6
horizontalAlignment: TextInput.AlignHCenter
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: keyboard.top
anchors.bottomMargin: parent.height / 25
color: textFieldColor
background:Rectangle {
z: parent.z - 1
anchors.fill: parent
color: textFieldBackgroundColor
radius: 2
}
}
Keyboard {
id: keyboard
width: parent.width
height: parent.height / 3
anchors.bottom: parent.bottom
source: langXml.includes(keyIndex) ? (keyIndex + ".xml") :
afganiXml.includes(keyIndex) ? "afgani.xml" :
scanXml.includes(keyIndex) ? "scan.xml" :
genericXml.includes(keyIndex) ? "generic.xml" :
genericQzXml.includes(keyIndex) ? "generic_qz.xml" :
arXml.includes(keyIndex) ? "ar.xml" :
deXml.includes(keyIndex) ? "de.xml" :
enXml.includes(keyIndex) ? "en.xml" :
esXml.includes(keyIndex) ? "es.xml" :
frXml.includes(keyIndex) ? "fr.xml" :
ptXml.includes(keyIndex) ? "pt.xml" :
ruXml.includes(keyIndex) ? "ru.xml" :"empty.xml"
rows: 4
columns: 10
keyColor: "transparent"
keyPressedColorOpacity: 0.2
keyImageLeft: "button_bkg_left.png"
keyImageRight: "button_bkg_right.png"
keyImageCenter: "button_bkg_center.png"
target: textInput
onEnterClicked: console.log("Enter!")
}
}
}