diff --git a/src/modules/keyboardq/ListItemDelegate.qml b/src/modules/keyboardq/ListItemDelegate.qml new file mode 100644 index 000000000..2ad10144c --- /dev/null +++ b/src/modules/keyboardq/ListItemDelegate.qml @@ -0,0 +1,63 @@ +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 new file mode 100644 index 000000000..eb160afab --- /dev/null +++ b/src/modules/keyboardq/ListViewTemplate.qml @@ -0,0 +1,22 @@ +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: Kirigami.Theme.backgroundColor + radius: 5 + opacity: 0.7 + } +} diff --git a/src/modules/keyboardq/ResponsiveBase.qml b/src/modules/keyboardq/ResponsiveBase.qml new file mode 100644 index 000000000..c9f5c7091 --- /dev/null +++ b/src/modules/keyboardq/ResponsiveBase.qml @@ -0,0 +1,116 @@ +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: "#333" + + property string subtitle + property string message + + default property alias content : _content.data + property alias stackView: _stackView + + background: Item { + + id: _background + + Image { + + id: _wallpaper + height: parent.height + width: parent.width + + sourceSize.width: 800 + sourceSize.height: 550 + + fillMode: Image.PreserveAspectCrop + antialiasing: false + smooth: false + asynchronous: true + cache: true + + source: "keyboard.jpg" + } + + FastBlur { + + id: fastBlur + anchors.fill: parent + source: _wallpaper + radius: 32 + transparentBorder: false + cached: true + } + } + + 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: "white" + 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: "white" + 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: "white" + 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/keyboard.jpg b/src/modules/keyboardq/keyboard.jpg new file mode 100644 index 000000000..9c0600fac Binary files /dev/null and b/src/modules/keyboardq/keyboard.jpg differ diff --git a/src/modules/keyboardq/keyboardq.qml b/src/modules/keyboardq/keyboardq.qml index a093fe31f..7474fbdd1 100644 --- a/src/modules/keyboardq/keyboardq.qml +++ b/src/modules/keyboardq/keyboardq.qml @@ -1,4 +1,3 @@ -import io.calamares.modules 1.0 as Modules import io.calamares.ui 1.0 import QtQuick 2.10 @@ -6,199 +5,191 @@ import QtQuick.Controls 2.10 import QtQuick.Layouts 1.3 import org.kde.kirigami 2.7 as Kirigami -ResponsiveBase -{ - id: control - Modules.Keyboard //locale handler - { - id: _keyboard - } +ResponsiveBase { - title: stackView.currentItem.title - subtitle: stackView.currentItem.subtitle + id: control + + title: stackView.currentItem.title + subtitle: stackView.currentItem.subtitle - stackView.initialItem: Item - { - id: _keyboardModelsComponet + stackView.initialItem: Item { - 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") + id: _keyboardModelsComponet - ListViewTemplate - { - id: _keyboardModelListView + 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.centerIn: parent - implicitWidth: Math.min(parent.width, 500) - implicitHeight: Math.min(contentHeight, 500) - currentIndex: model.currentIndex + ListViewTemplate { - header: ToolButton - { - icon.name: "view-refresh" - onClicked: model.refresh() - text: qsTr("Refresh") - } - footer: RowLayout - { - width: parent.width - z: 99999 + id: _keyboardModelListView - Button - { - Layout.fillWidth: true - text: qsTr("Layouts") - icon.name: "go-previous" - onClicked: control.stackView.push(_keyboardLayoutsComponent) - } - } + anchors.centerIn: parent + implicitWidth: Math.min(parent.width, 500) + implicitHeight: Math.min(contentHeight, 300) + currentIndex: model.currentIndex - model: _keyboard.Config.keyboardModelsModel + model: config.keyboardModelsModel - delegate: ListItemDelegate - { - id: _delegate - label1.text: model.label - onClicked: - { - _keyboardModelListView.model.currentIndex = index - control.stackView.push(_keyboardLayoutsComponent) - } - } - } + delegate: ListItemDelegate { - } + id: _delegate + label1.text: model.label + onClicked: { - Component - { - id: _keyboardLayoutsComponent + _keyboardModelListView.model.currentIndex = index + control.stackView.push(_keyboardLayoutsComponent) + } + } + } - Item - { - property string title: qsTr("Keyboard Layout") - property string subtitle: _keyboard.Config.prettyStatus + ColumnLayout{ - ListViewTemplate - { - id: _layoutsListView + spacing: 2 + anchors.verticalCenter: parent.verticalCenter - anchors.centerIn: parent + Button { - implicitWidth: Math.min(parent.width, 500) - implicitHeight: Math.min(contentHeight, 500) + icon.name: "view-refresh" + width: parent.width + onClicked: control.stackView.pop() + text: qsTr("Refresh") + } - currentIndex: model.currentIndex - footer: RowLayout - { - width: parent.width - z: 99999 + Button { - Button - { - Layout.fillWidth: true - icon.name: "go-previous" - text: qsTr("Models") - onClicked: control.stackView.pop() - } + Layout.fillWidth: true + text: qsTr("Layouts") + icon.name: "go-next" + onClicked: control.stackView.push(_keyboardLayoutsComponent) + } + } + } - Button - { - Layout.fillWidth: true - icon.name: "go-next" - text: qsTr("Variants") - onClicked: control.stackView.push(_keyboardVariantsComponent) - } - } + Component { - model: _keyboard.Config.keyboardLayoutsModel + id: _keyboardLayoutsComponent - delegate: ListItemDelegate - { - id: _delegate - label1.text: model.label - onClicked: - { - _layoutsListView.model.currentIndex = index - _layoutsListView.positionViewAtIndex(index, ListView.Center) - control.stackView.push(_keyboardVariantsComponent) - } - } - } - } + Item { + + property string title: qsTr("Keyboard Layout") + property string subtitle: config.prettyStatus + ListViewTemplate { - } + id: _layoutsListView - Component - { - id: _keyboardVariantsComponent + anchors.centerIn: parent - Item - { - property string title: qsTr("Keyboard Layout") - property string subtitle: _keyboard.Config.prettyStatus + implicitWidth: Math.min(parent.width, 500) + implicitHeight: Math.min(contentHeight, 300) - ListViewTemplate - { - id: _variantsListView + currentIndex: model.currentIndex - anchors.centerIn: parent + model: config.keyboardLayoutsModel - implicitWidth: Math.min(parent.width, 500) - implicitHeight: Math.min(contentHeight, 500) + delegate: ListItemDelegate { - currentIndex: model.currentIndex + id: _delegate + label1.text: model.label + onClicked: { - footerPositioning: ListView.OverlayFooter + _layoutsListView.model.currentIndex = index + _layoutsListView.positionViewAtIndex(index, ListView.Center) + control.stackView.push(_keyboardVariantsComponent) + } + } + } - footer: RowLayout - { - z: 99999 - width: parent.width + ColumnLayout{ - Button - { - Layout.fillWidth: true - text: qsTr("Layouts") - icon.name: "go-previous" - onClicked: control.stackView.pop() - } - } + spacing: 2 + anchors.verticalCenter: parent.verticalCenter - model: _keyboard.Config.keyboardVariantsModel + Button { - delegate: ListItemDelegate - { - id: _delegate - label1.text: model.label - onClicked: - { - _variantsListView.model.currentIndex = index - _variantsListView.positionViewAtIndex(index, ListView.Center) - } - } - } - } + Layout.fillWidth: true + icon.name: "go-previous" + text: qsTr("Models") + onClicked: control.stackView.pop() + } - } + Button { + Layout.fillWidth: true + icon.name: "go-next" + text: qsTr("Variants") + onClicked: control.stackView.push(_keyboardVariantsComponent) + } + } + } + } - TextField - { - placeholderText: qsTr("Test your keyboard") - Layout.preferredHeight: 60 - Layout.maximumWidth: 500 - Layout.fillWidth: true - Layout.alignment: Qt.AlignCenter + Component { - background: Rectangle - { - color: Kirigami.Theme.backgroundColor - radius: 5 - opacity: 0.3 - } - } + 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) + + currentIndex: model.currentIndex + + model: config.keyboardVariantsModel + + delegate: ListItemDelegate { + + id: _delegate + label1.text: model.label + onClicked: { + + _variantsListView.model.currentIndex = index + _variantsListView.positionViewAtIndex(index, ListView.Center) + } + } + } + + ColumnLayout{ + + anchors.verticalCenter: parent.verticalCenter + + Button { + + Layout.fillWidth: true + text: qsTr("Layouts") + icon.name: "go-previous" + onClicked: control.stackView.pop() + } + } + } + + } + + TextField { + + placeholderText: qsTr("Test your keyboard") + Layout.preferredHeight: 48 + Layout.maximumWidth: 500 + Layout.fillWidth: true + Layout.alignment: Qt.AlignCenter + + background:Rectangle { + + z: parent.z - 1 + anchors.fill: parent + color: control.Kirigami.Theme.backgroundColor + radius: 5 + opacity: 0.8 + } + } } diff --git a/src/modules/keyboardq/keyboardq.qrc b/src/modules/keyboardq/keyboardq.qrc index 492f6e213..69fdb715f 100644 --- a/src/modules/keyboardq/keyboardq.qrc +++ b/src/modules/keyboardq/keyboardq.qrc @@ -3,5 +3,9 @@ ../keyboard/kbd-model-map ../keyboard/images/restore.png keyboardq.qml + ListItemDelegate.qml + ListViewTemplate.qml + ResponsiveBase.qml + keyboard.jpg