[keyboardq] rewrite keyboard.qml

no longer use extra qml files
better highlighting, updated text, fewer buttons

src/modules/keyboardq/ListItemDelegate.qml

@@ -1,63 +0,0 @@
-import io.calamares.ui 1.0
-
-import QtQuick 2.10
-import QtQuick.Controls 2.10
-import QtQuick.Layouts 1.3
-import org.kde.kirigami 2.7 as Kirigami
-
-ItemDelegate {
-
-    id: control
-
-
-    property alias label1 : _label1
-    property alias label2 : _label2
-
-    hoverEnabled: true
-
-    property bool isCurrentItem: ListView.isCurrentItem
-    background: Rectangle {
-
-        color: isCurrentItem || hovered ? Kirigami.Theme.highlightColor : Kirigami.Theme.backgroundColor
-        opacity: isCurrentItem || hovered ? 0.8 : 0.5
-    }
-
-    width: 490 //parent.width
-    height: 36
-
-    contentItem: RowLayout {
-
-        anchors.fill: parent
-        anchors.margins: Kirigami.Units.smallSpacing
-
-        Label {
-
-            id: _label1
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-            horizontalAlignment: Qt.AlignLeft
-            color: isCurrentItem ? Kirigami.Theme.highlightedTextColor : Kirigami.Theme.textColor
-        }
-
-          Label {
-
-            id: _label2
-            visible: text.length
-            Layout.fillHeight: true
-            Layout.maximumWidth: parent.width * 0.4
-            horizontalAlignment: Qt.AlignRight
-            color: isCurrentItem ? Kirigami.Theme.highlightedTextColor : Kirigami.Theme.textColor
-            opacity: isCurrentItem ? 1 : 0.7
-            font.weight: Font.Light
-        }
-
-        Kirigami.Icon {
-
-            source: "checkmark"
-            Layout.preferredWidth: 22
-            Layout.preferredHeight: 22
-            color: Kirigami.Theme.highlightedTextColor
-            visible: isCurrentItem
-        }
-    }
-}

src/modules/keyboardq/ListViewTemplate.qml

@@ -1,22 +0,0 @@
-import QtQuick 2.10
-import QtQuick.Controls 2.10
-import QtQuick.Layouts 1.3
-import org.kde.kirigami 2.7 as Kirigami
-
-ListView {
-
-    id: control
-
-    spacing: Kirigami.Units.smallSpacing
-    clip: true
-    boundsBehavior: Flickable.StopAtBounds
-
-    Rectangle {
-
-        z: parent.z - 1
-        anchors.fill: parent
-        color: "#BDC3C7"
-        radius: 5
-        opacity: 0.7
-    }
-}

src/modules/keyboardq/ResponsiveBase.qml

@@ -1,83 +0,0 @@
-import QtQuick 2.10
-import QtQuick.Controls 2.10
-import QtQuick.Layouts 1.3
-import org.kde.kirigami 2.7 as Kirigami
-import QtGraphicalEffects 1.0
-
-import io.calamares.ui 1.0
-import io.calamares.core 1.0
-
-Page {
-
-    id: control
-    width: 800 //parent.width
-    height: 550 //parent.height
-
-    Kirigami.Theme.backgroundColor: "#FAFAFA"
-    Kirigami.Theme.textColor: "#1F1F1F"
-
-    property string subtitle
-    property string message
-
-    default property alias content : _content.data
-    property alias stackView: _stackView
-
-    ColumnLayout {
-
-        id: _content
-
-        anchors.fill: parent
-        spacing:  Kirigami.Units.smallSpacing * 5
-        anchors.margins: Kirigami.Units.smallSpacing * 5
-        anchors.bottomMargin: 20
-
-        Label {
-            
-            Layout.fillWidth: true
-            Layout.preferredHeight: Math.min(implicitHeight, 200)
-            horizontalAlignment: Qt.AlignHCenter
-            wrapMode: Text.NoWrap
-            elide: Text.ElideMiddle
-            text: control.title
-            color: Kirigami.Theme.textColor
-            font.bold: true
-            font.weight: Font.Bold
-            font.pointSize: 24
-        }
-
-        Label {
-
-            Layout.fillWidth: true
-            Layout.preferredHeight: Math.min(implicitHeight, 200)
-            horizontalAlignment: Qt.AlignHCenter
-            wrapMode: Text.Wrap
-            elide: Text.ElideMiddle
-            text: control.subtitle
-            color: Kirigami.Theme.textColor
-            font.weight: Font.Light
-            font.pointSize: 12
-        }
-
-        Label {
-
-            Layout.fillWidth: true
-            Layout.preferredHeight: Math.min(implicitHeight, 200)
-            horizontalAlignment: Qt.AlignHCenter
-            wrapMode: Text.Wrap
-            elide: Text.ElideMiddle
-            text: control.message
-            color: Kirigami.Theme.textColor
-            font.weight: Font.Light
-            font.pointSize: 10
-        }
-
-        StackView {
-
-            id: _stackView
-            Layout.fillHeight: true
-            Layout.preferredWidth: parent.width
-            clip: true
-        }
-        
-    }
-}

src/modules/keyboardq/keyboardq.qml

@@ -1,102 +1,240 @@
+/* === This file is part of Calamares - <https://github.com/calamares> ===
+ *
+ *   SPDX-FileCopyrightText: 2020 Anke Boersma <demm@kaosx.us>
+ *   SPDX-License-Identifier: GPL-3.0-or-later
+ *
+ *   Calamares is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU General Public License as published by
+ *   the Free Software Foundation, either version 3 of the License, or
+ *   (at your option) any later version.
+ *
+ *   Calamares is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *   GNU General Public License for more details.
+ *
+ *   You should have received a copy of the GNU General Public License
+ *   along with Calamares. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import io.calamares.core 1.0
 import io.calamares.ui 1.0
 
 import QtQuick 2.10
 import QtQuick.Controls 2.10
+import QtQuick.Window 2.14
 import QtQuick.Layouts 1.3
+
 import org.kde.kirigami 2.7 as Kirigami
 
-ResponsiveBase {
+Page {
+    width: 800 //parent.width
+    height: 500
 
-    id: control
+     StackView {
+        id: stack
+        anchors.fill: parent
+        clip: true
 
-    title: stackView.currentItem.title
+        initialItem: Item {
-    subtitle: stackView.currentItem.subtitle
 
+            Label {
 
-    stackView.initialItem:  Item {
+                id: header
+                anchors.horizontalCenter: parent.horizontalCenter
+                text: qsTr("Keyboard Model")
+                color: Kirigami.Theme.textColor
+                font.bold: true
+                font.weight: Font.Bold
+                font.pointSize: 24
+            }
 
-        id: _keyboardModelsComponet
+            Label {
 
-        property string title: qsTr("Keyboard Model")
+                anchors.horizontalCenter: parent.horizontalCenter
-        property string subtitle: qsTr("Pick your preferred keyboard model or use the default one based on the detected hardware")
+                anchors.top: header.bottom
+                color: Kirigami.Theme.textColor
+                horizontalAlignment: Text.AlignHCenter
+                width: parent.width / 1.5
+                wrapMode: Text.WordWrap
+                text: qsTr("Click your preferred keyboard model to select layout and variant, or use the default one based on the detected hardware.")
+            }
 
-        ListViewTemplate {
+            ListView {
 
-            id: _keyboardModelListView
+                id: list1
 
+                ScrollBar.vertical: ScrollBar {
+
+                    active: true
+                }
+
+                width: parent.width / 2
+                height: 250
                 anchors.centerIn: parent
-            implicitWidth: Math.min(parent.width, 500)
+                anchors.verticalCenterOffset: -30
-            implicitHeight: Math.min(contentHeight, 300)
+                focus: true
-            currentIndex: model.currentIndex
+                clip: true
+                boundsBehavior: Flickable.StopAtBounds
+                spacing: 2
+
+                Rectangle {
+
+                    z: parent.z - 1
+                    anchors.fill: parent
+                    color: "#BDC3C7"
+                    radius: 5
+                    opacity: 0.7
+                }
 
                 model: config.keyboardModelsModel
+                //model: ["Africa", "America", "Antarctica", "Arctic", "Asia", "Atlantic", "Australia", "Europe", "Indian", "Pacific"]
 
-            delegate: ListItemDelegate {
+                currentIndex: model.currentIndex
+                delegate: ItemDelegate {
+
+                    hoverEnabled: true
+                    width: parent.width
+                    highlighted: ListView.isCurrentItem
+
+                    RowLayout {
+                        anchors.fill: parent
+
+                        Label {
+
+                            text: model.label // modelData
+                            Layout.fillHeight: true
+                            Layout.fillWidth: true
+                            width: parent.width
+                            height: 32
+                            color: highlighted ? Kirigami.Theme.highlightedTextColor : Kirigami.Theme.textColor
+
+                            background: Rectangle {
+
+                                color: highlighted || hovered ? Kirigami.Theme.highlightColor : "white" //Kirigami.Theme.backgroundColor
+                                opacity: highlighted || hovered ? 0.5 : 0.3
+                            }
+                        }
+
+                        Kirigami.Icon {
+
+                            source: "checkmark"
+                            Layout.preferredWidth: 22
+                            Layout.preferredHeight: 22
+                            color: Kirigami.Theme.highlightedTextColor
+                            visible: highlighted
+                        }
+                    }
 
-                id: _delegate
-                label1.text: model.label
                     onClicked: {
 
-                    _keyboardModelListView.model.currentIndex = index
+                        list1.model.currentIndex = index
-                    control.stackView.push(_keyboardLayoutsComponent)
+                        stack.push(layoutsList)
+                        list1.positionViewAtIndex(index, ListView.Center)
                     }
                 }
             }
-
-        ColumnLayout{
-
-            spacing: 2
-            anchors.verticalCenter: parent.verticalCenter
-
-            Button {
-
-                icon.name: "view-refresh"
-                width: parent.width
-                onClicked: control.stackView.pop()
-                text: qsTr("Refresh")
-            }
-
-            Button {
-
-                Layout.fillWidth: true
-                text: qsTr("Layouts")
-                icon.name: "go-next"
-                onClicked: control.stackView.push(_keyboardLayoutsComponent)
-            }
-        }
         }
 
         Component {
-
+            id: layoutsList
-        id: _keyboardLayoutsComponent
 
             Item {
 
-            property string title: qsTr("Keyboard Layout")
+                Label {
-            property string subtitle: config.prettyStatus
 
-            ListViewTemplate {
+                id: header
+                anchors.horizontalCenter: parent.horizontalCenter
+                text: qsTr("Keyboard Layout")
+                color: Kirigami.Theme.textColor
+                font.bold: true
+                font.weight: Font.Bold
+                font.pointSize: 24
+                }
 
-                id: _layoutsListView
+                Label {
 
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.top: header.bottom
+                    color: Kirigami.Theme.textColor
+                    horizontalAlignment: Text.AlignHCenter
+                    width: parent.width / 1.5
+                    wrapMode: Text.WordWrap
+                    text: config.prettyStatus
+                    //text: qsTr("Set keyboard model or use the default one based on the detected hardware.")
+                }
+
+                ListView {
+
+                    id: list2
+
+                    ScrollBar.vertical: ScrollBar {
+
+                        active: true
+                    }
+
+                    width: parent.width / 2
+                    height: 250
                     anchors.centerIn: parent
+                    anchors.verticalCenterOffset: -30
+                    focus: true
+                    clip: true
+                    boundsBehavior: Flickable.StopAtBounds
+                    spacing: 2
 
-                implicitWidth: Math.min(parent.width, 500)
+                    Rectangle {
-                implicitHeight: Math.min(contentHeight, 300)
 
-                currentIndex: model.currentIndex
+                        z: parent.z - 1
+                        anchors.fill: parent
+                        color: "#BDC3C7"
+                        radius: 5
+                        opacity: 0.7
+                    }
 
                     model: config.keyboardLayoutsModel
+                    //model: ["Brussels", "London", "Madrid", "New York", "Melbourne", "London", "Madrid", "New York", "Brussels", "London", "Madrid", "New York", "Brussels", "London", "Madrid", "New York"]
 
-                delegate: ListItemDelegate {
+                    currentIndex: model.currentIndex
+                    delegate: ItemDelegate {
+
+                        hoverEnabled: true
+                        width: parent.width
+                        highlighted: ListView.isCurrentItem
+
+                        RowLayout {
+                        anchors.fill: parent
+
+                            Label {
+
+                                text: model.label // modelData
+                                Layout.fillHeight: true
+                                Layout.fillWidth: true
+                                width: parent.width
+                                height: 30
+                                color: highlighted ? Kirigami.Theme.highlightedTextColor : Kirigami.Theme.textColor
+
+                                background: Rectangle {
+
+                                    color: highlighted || hovered ? Kirigami.Theme.highlightColor : "white" //Kirigami.Theme.backgroundColor
+                                    opacity: highlighted || hovered ? 0.5 : 0.3
+                                }
+                            }
+
+                            Kirigami.Icon {
+
+                                source: "checkmark"
+                                Layout.preferredWidth: 22
+                                Layout.preferredHeight: 22
+                                color: Kirigami.Theme.highlightedTextColor
+                                visible: highlighted
+                            }
+                        }
 
-                    id: _delegate
-                    label1.text: model.label
                         onClicked: {
 
-                        _layoutsListView.model.currentIndex = index
+                            list2.model.currentIndex = index
-                        _layoutsListView.positionViewAtIndex(index, ListView.Center)
+                            stack.push(variantsList)
-                        control.stackView.push(_keyboardVariantsComponent)
+                            list2.positionViewAtIndex(index, ListView.Center)
                         }
                     }
                 }
@@ -105,91 +243,161 @@ ResponsiveBase {
 
                     spacing: 2
                     anchors.verticalCenter: parent.verticalCenter
+                    anchors.verticalCenterOffset: -30
+                    anchors.left: parent.left 
+                    anchors.leftMargin: parent.width / 15
 
                     Button {
 
-                    Layout.fillWidth: true
                         icon.name: "go-previous"
                         text: qsTr("Models")
-                    onClicked: control.stackView.pop()
+                        onClicked: stack.pop()
                     }
 
                     Button {
 
-                    Layout.fillWidth: true
                         icon.name: "go-next"
                         text: qsTr("Variants")
-                    onClicked: control.stackView.push(_keyboardVariantsComponent)
+                        onClicked: stack.push(variantsList)
                     }
                 }
             }
         }
 
         Component {
-
+            id: variantsList
-        id: _keyboardVariantsComponent
 
             Item {
 
-            property string title: qsTr("Keyboard Layout")
+                Label {
-            property string subtitle: config.prettyStatus
 
-            ListViewTemplate {
+                    id: header
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    text: qsTr("Keyboard Variant")
+                    color: Kirigami.Theme.textColor
+                    font.bold: true
+                    font.weight: Font.Bold
+                    font.pointSize: 24
+                }
 
-                id: _variantsListView
+                Label {
 
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.top: header.bottom
+                    color: Kirigami.Theme.textColor
+                    horizontalAlignment: Text.AlignHCenter
+                    width: parent.width / 1.5
+                    wrapMode: Text.WordWrap
+                    text: config.prettyStatus
+                    //text: qsTr("Variant keyboard model or use the default one based on the detected hardware.")
+                }
+
+                ListView {
+
+                    id: list3
+
+                    ScrollBar.vertical: ScrollBar {
+
+                        active: true
+                    }
+
+                    width: parent.width / 2
+                    height: 250
                     anchors.centerIn: parent
+                    anchors.verticalCenterOffset: -30
+                    focus: true
+                    clip: true
+                    boundsBehavior: Flickable.StopAtBounds
+                    spacing: 2
 
-                implicitWidth: Math.min(parent.width, 500)
+                    Rectangle {
-                implicitHeight: Math.min(contentHeight, 300)
 
-                currentIndex: model.currentIndex
+                        z: parent.z - 1
+                        anchors.fill: parent
+                        color: "#BDC3C7"
+                        radius: 5
+                        opacity: 0.7
+                    }
 
                     model: config.keyboardVariantsModel
+                    //model: ["Brussels", "London", "Madrid", "New York", "Melbourne", "London", "Madrid", "New York", "Brussels", "London", "Madrid", "New York", "Brussels", "London", "Madrid", "New York"]
 
-                delegate: ListItemDelegate {
+                    currentIndex: model.currentIndex
+                    delegate: ItemDelegate {
+
+                        hoverEnabled: true
+                        width: parent.width
+                        highlighted: ListView.isCurrentItem
+
+                        RowLayout {
+                        anchors.fill: parent
+
+                            Label {
+
+                                text: model.label //modelData
+                                Layout.fillHeight: true
+                                Layout.fillWidth: true
+                                width: parent.width
+                                height: 30
+                                color: highlighted ? Kirigami.Theme.highlightedTextColor : Kirigami.Theme.textColor
+
+                                background: Rectangle {
+
+                                    color: highlighted || hovered ? Kirigami.Theme.highlightColor : "white" //Kirigami.Theme.backgroundColor
+                                    opacity: highlighted || hovered ? 0.5 : 0.3
+                                }
+                            }
+
+                            Kirigami.Icon {
+
+                                source: "checkmark"
+                                Layout.preferredWidth: 22
+                                Layout.preferredHeight: 22
+                                color: Kirigami.Theme.highlightedTextColor
+                                visible: highlighted
+                            }
+                        }
 
-                    id: _delegate
-                    label1.text: model.label
                         onClicked: {
 
-                        _variantsListView.model.currentIndex = index
+                            list3.model.currentIndex = index
-                        _variantsListView.positionViewAtIndex(index, ListView.Center)
+                            list3.positionViewAtIndex(index, ListView.Center)
                         }
                     }
                 }
                 
-            ColumnLayout{
-
-                anchors.verticalCenter: parent.verticalCenter
-            
                 Button {
 
                     Layout.fillWidth: true
-                    text: qsTr("Layouts")
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.verticalCenterOffset: -30
+                    anchors.left: parent.left 
+                    anchors.leftMargin: parent.width / 15
                     icon.name: "go-previous"
-                    onClicked: control.stackView.pop()
+                    text: qsTr("Layouts")
+                    onClicked: stack.pop()
                 }
             }
         }
-
     }
 
     TextField {
 
         placeholderText: qsTr("Test your keyboard")
-        Layout.preferredHeight: 48
+        height: 48
-        Layout.maximumWidth:  500
+        width: parent.width / 1.5
-        Layout.fillWidth: true
+        horizontalAlignment: TextInput.AlignHCenter
-        Layout.alignment: Qt.AlignCenter
+        anchors.horizontalCenter: parent.horizontalCenter
-        color: control.Kirigami.Theme.textColor
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: parent.height / 10
+        color: "#1F1F1F"
 
         background:Rectangle {
 
             z: parent.z - 1
             anchors.fill: parent
             color: "#BDC3C7"
-            radius: 5
+            radius: 2
             opacity: 0.3
         }
     }

src/modules/keyboardq/keyboardq.qrc

@@ -3,8 +3,5 @@
         <file alias="kbd-model-map">../keyboard/kbd-model-map</file>
         <file alias="images/restore.png">../keyboard/images/restore.png</file>
         <file>keyboardq.qml</file>
-        <file>ListItemDelegate.qml</file>
-        <file>ListViewTemplate.qml</file>
-        <file>ResponsiveBase.qml</file>
     </qresource>
 </RCC>