[keyboard] fully functional QML module

added missing components listed as ResponsiveBase, ListItemDelegate & ListViewTemplate
parts of which were on nitrux
keyboard.qml no longer uses buttons within ListView, can't work as buttons and have them visible
see https://doc.qt.io/qt-5/qml-qtquick-listview.html#footerPositioning-prop
set ListView as actually visible within a normal calamares window size
This commit is contained in:
demmm 2020-06-19 17:05:29 +02:00
parent 5da2012465
commit ccff4edd91
6 changed files with 352 additions and 156 deletions

View File

@ -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
}
}
}

View File

@ -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
}
}

View File

@ -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
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 101 KiB

View File

@ -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 {
Component
{
id: _keyboardVariantsComponent
id: _layoutsListView
Item
{
property string title: qsTr("Keyboard Layout")
property string subtitle: _keyboard.Config.prettyStatus
anchors.centerIn: parent
ListViewTemplate
{
id: _variantsListView
implicitWidth: Math.min(parent.width, 500)
implicitHeight: Math.min(contentHeight, 300)
anchors.centerIn: parent
currentIndex: model.currentIndex
implicitWidth: Math.min(parent.width, 500)
implicitHeight: Math.min(contentHeight, 500)
model: config.keyboardLayoutsModel
currentIndex: model.currentIndex
delegate: ListItemDelegate {
footerPositioning: ListView.OverlayFooter
id: _delegate
label1.text: model.label
onClicked: {
footer: RowLayout
{
z: 99999
width: parent.width
_layoutsListView.model.currentIndex = index
_layoutsListView.positionViewAtIndex(index, ListView.Center)
control.stackView.push(_keyboardVariantsComponent)
}
}
}
Button
{
Layout.fillWidth: true
text: qsTr("Layouts")
icon.name: "go-previous"
onClicked: control.stackView.pop()
}
}
ColumnLayout{
model: _keyboard.Config.keyboardVariantsModel
spacing: 2
anchors.verticalCenter: parent.verticalCenter
delegate: ListItemDelegate
{
id: _delegate
label1.text: model.label
onClicked:
{
_variantsListView.model.currentIndex = index
_variantsListView.positionViewAtIndex(index, ListView.Center)
}
}
}
}
Button {
}
Layout.fillWidth: true
icon.name: "go-previous"
text: qsTr("Models")
onClicked: control.stackView.pop()
}
Button {
TextField
{
placeholderText: qsTr("Test your keyboard")
Layout.preferredHeight: 60
Layout.maximumWidth: 500
Layout.fillWidth: true
Layout.alignment: Qt.AlignCenter
Layout.fillWidth: true
icon.name: "go-next"
text: qsTr("Variants")
onClicked: control.stackView.push(_keyboardVariantsComponent)
}
}
}
}
background: Rectangle
{
color: Kirigami.Theme.backgroundColor
radius: 5
opacity: 0.3
}
}
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)
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
}
}
}

View File

@ -3,5 +3,9 @@
<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>
<file>keyboard.jpg</file>
</qresource>
</RCC>