From 7c08f9a03316ea10f44b8fb08f3ab431da2997c5 Mon Sep 17 00:00:00 2001 From: demmm Date: Wed, 26 Aug 2020 13:32:56 +0200 Subject: [PATCH] [keyboardq] rewrite keyboard.qml no longer use extra qml files better highlighting, updated text, fewer buttons --- src/modules/keyboardq/ListItemDelegate.qml | 63 --- src/modules/keyboardq/ListViewTemplate.qml | 22 - src/modules/keyboardq/ResponsiveBase.qml | 83 ---- src/modules/keyboardq/keyboardq.qml | 486 +++++++++++++++------ src/modules/keyboardq/keyboardq.qrc | 3 - 5 files changed, 347 insertions(+), 310 deletions(-) delete mode 100644 src/modules/keyboardq/ListItemDelegate.qml delete mode 100644 src/modules/keyboardq/ListViewTemplate.qml delete mode 100644 src/modules/keyboardq/ResponsiveBase.qml diff --git a/src/modules/keyboardq/ListItemDelegate.qml b/src/modules/keyboardq/ListItemDelegate.qml deleted file mode 100644 index 2ad10144c..000000000 --- a/src/modules/keyboardq/ListItemDelegate.qml +++ /dev/null @@ -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 - } - } -} diff --git a/src/modules/keyboardq/ListViewTemplate.qml b/src/modules/keyboardq/ListViewTemplate.qml deleted file mode 100644 index 4564b887b..000000000 --- a/src/modules/keyboardq/ListViewTemplate.qml +++ /dev/null @@ -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 - } -} diff --git a/src/modules/keyboardq/ResponsiveBase.qml b/src/modules/keyboardq/ResponsiveBase.qml deleted file mode 100644 index 38fa15d1b..000000000 --- a/src/modules/keyboardq/ResponsiveBase.qml +++ /dev/null @@ -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 - } - - } -} diff --git a/src/modules/keyboardq/keyboardq.qml b/src/modules/keyboardq/keyboardq.qml index 613223a1c..8f8bf05d1 100644 --- a/src/modules/keyboardq/keyboardq.qml +++ b/src/modules/keyboardq/keyboardq.qml @@ -1,195 +1,403 @@ +/* === This file is part of Calamares - === + * + * SPDX-FileCopyrightText: 2020 Anke Boersma + * 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 . + */ + +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 - subtitle: stackView.currentItem.subtitle + initialItem: Item { + 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") - property string subtitle: qsTr("Pick your preferred keyboard model or use the default one based on the detected hardware") + anchors.horizontalCenter: parent.horizontalCenter + 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 - anchors.centerIn: parent - implicitWidth: Math.min(parent.width, 500) - implicitHeight: Math.min(contentHeight, 300) - currentIndex: model.currentIndex + ScrollBar.vertical: ScrollBar { - model: config.keyboardModelsModel - - delegate: ListItemDelegate { - - id: _delegate - label1.text: model.label - onClicked: { - - _keyboardModelListView.model.currentIndex = index - control.stackView.push(_keyboardLayoutsComponent) + active: true } - } - } - - 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: _keyboardLayoutsComponent - - Item { - - property string title: qsTr("Keyboard Layout") - property string subtitle: config.prettyStatus - - ListViewTemplate { - - id: _layoutsListView + width: parent.width / 2 + height: 250 anchors.centerIn: parent - - implicitWidth: Math.min(parent.width, 500) - implicitHeight: Math.min(contentHeight, 300) - - currentIndex: model.currentIndex - - model: config.keyboardLayoutsModel - - delegate: ListItemDelegate { - - id: _delegate - label1.text: model.label - onClicked: { - - _layoutsListView.model.currentIndex = index - _layoutsListView.positionViewAtIndex(index, ListView.Center) - control.stackView.push(_keyboardVariantsComponent) - } - } - } - - ColumnLayout{ - + anchors.verticalCenterOffset: -30 + focus: true + clip: true + boundsBehavior: Flickable.StopAtBounds spacing: 2 - anchors.verticalCenter: parent.verticalCenter - Button { + Rectangle { - Layout.fillWidth: true - icon.name: "go-previous" - text: qsTr("Models") - onClicked: control.stackView.pop() + z: parent.z - 1 + anchors.fill: parent + color: "#BDC3C7" + radius: 5 + opacity: 0.7 } - Button { - - Layout.fillWidth: true - icon.name: "go-next" - text: qsTr("Variants") - onClicked: control.stackView.push(_keyboardVariantsComponent) - } - } - } - } - - Component { - - id: _keyboardVariantsComponent - - Item { - - property string title: qsTr("Keyboard Layout") - property string subtitle: config.prettyStatus - - ListViewTemplate { - - id: _variantsListView - - anchors.centerIn: parent - - implicitWidth: Math.min(parent.width, 500) - implicitHeight: Math.min(contentHeight, 300) + model: config.keyboardModelsModel + //model: ["Africa", "America", "Antarctica", "Arctic", "Asia", "Atlantic", "Australia", "Europe", "Indian", "Pacific"] currentIndex: model.currentIndex + delegate: ItemDelegate { - model: config.keyboardVariantsModel + hoverEnabled: true + width: parent.width + highlighted: ListView.isCurrentItem - delegate: ListItemDelegate { + 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: { - _variantsListView.model.currentIndex = index - _variantsListView.positionViewAtIndex(index, ListView.Center) + list1.model.currentIndex = index + stack.push(layoutsList) + list1.positionViewAtIndex(index, ListView.Center) } } } + } - ColumnLayout{ + Component { + id: layoutsList - anchors.verticalCenter: parent.verticalCenter - - Button { + Item { - Layout.fillWidth: true - text: qsTr("Layouts") - icon.name: "go-previous" - onClicked: control.stackView.pop() + Label { + + id: header + anchors.horizontalCenter: parent.horizontalCenter + text: qsTr("Keyboard Layout") + color: Kirigami.Theme.textColor + font.bold: true + font.weight: Font.Bold + font.pointSize: 24 + } + + 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 + + Rectangle { + + 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"] + + 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 + } + } + + onClicked: { + + list2.model.currentIndex = index + stack.push(variantsList) + list2.positionViewAtIndex(index, ListView.Center) + } + } + } + + ColumnLayout { + + spacing: 2 + anchors.verticalCenter: parent.verticalCenter + anchors.verticalCenterOffset: -30 + anchors.left: parent.left + anchors.leftMargin: parent.width / 15 + + Button { + + icon.name: "go-previous" + text: qsTr("Models") + onClicked: stack.pop() + } + + Button { + + icon.name: "go-next" + text: qsTr("Variants") + onClicked: stack.push(variantsList) + } } } } + Component { + id: variantsList + + Item { + + Label { + + id: header + anchors.horizontalCenter: parent.horizontalCenter + text: qsTr("Keyboard Variant") + color: Kirigami.Theme.textColor + font.bold: true + font.weight: Font.Bold + font.pointSize: 24 + } + + 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 + + Rectangle { + + 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"] + + 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 + } + } + + onClicked: { + + list3.model.currentIndex = index + list3.positionViewAtIndex(index, ListView.Center) + } + } + } + + Button { + + Layout.fillWidth: true + anchors.verticalCenter: parent.verticalCenter + anchors.verticalCenterOffset: -30 + anchors.left: parent.left + anchors.leftMargin: parent.width / 15 + icon.name: "go-previous" + text: qsTr("Layouts") + onClicked: stack.pop() + } + } + } } TextField { placeholderText: qsTr("Test your keyboard") - Layout.preferredHeight: 48 - Layout.maximumWidth: 500 - Layout.fillWidth: true - Layout.alignment: Qt.AlignCenter - color: control.Kirigami.Theme.textColor + height: 48 + width: parent.width / 1.5 + horizontalAlignment: TextInput.AlignHCenter + anchors.horizontalCenter: parent.horizontalCenter + 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 } } diff --git a/src/modules/keyboardq/keyboardq.qrc b/src/modules/keyboardq/keyboardq.qrc index b2ee36ee5..492f6e213 100644 --- a/src/modules/keyboardq/keyboardq.qrc +++ b/src/modules/keyboardq/keyboardq.qrc @@ -3,8 +3,5 @@ ../keyboard/kbd-model-map ../keyboard/images/restore.png keyboardq.qml - ListItemDelegate.qml - ListViewTemplate.qml - ResponsiveBase.qml