calamares-bigscreen-branding/bigscreen/keyboardq.qml

0001 /* === This file is part of Calamares - <https://calamares.io> ===
0002  *
0003  *   SPDX-FileCopyrightText: 2022 Aditya Mehra <aix.m@outlook.com>
0004  *   SPDX-FileCopyrightText: 2020 - 2022 Anke Boersma <demm@kaosx.us>
0005  *   SPDX-License-Identifier: GPL-3.0-or-later
0006  *
0007  *   Calamares is Free Software: see the License-Identifier above.
0008  *
0009  */
0010
0011 import io.calamares.core 1.0
0012 import io.calamares.ui 1.0
0013
0014 import QtQuick 2.15
0015 import QtQuick.Controls 2.15
0016 import QtQuick.Window 2.14
0017 import QtQuick.Layouts 1.3
0018
0019 import org.kde.kirigami 2.7 as Kirigami
0020 import "keyboarddata"
0021
0022 import Libfakeqevents 1.0 as LQ
0023
0024 Page {
0025     id: keyboardPage
0026     readonly property color backgroundColor: Branding.styleString(Branding.SidebarBackground)
0027     readonly property color listBackgroundColor: Branding.styleString(Branding.SidebarBackground)
0028     readonly property color textFieldColor: Branding.styleString(Branding.SidebarText)
0029     readonly property color textFieldBackgroundColor: Branding.styleString(Branding.SidebarBackground)
0030     readonly property color textColor: Branding.styleString(Branding.SidebarText)
0031     readonly property color highlightedTextColor: Branding.styleString(Branding.SidebarText)
0032     readonly property color highlightColor: Kirigami.Theme.highlightColor
0033     readonly property color accentColor: Branding.styleString(Branding.SidebarTextHighlight)
0034
0035     function onActivate(){
0036         navigationHelper.activePage = "keyboardPage"
0037         fakeCursor.moveMouseEvent(mainContentArea.x + 10, 400)
0038         delay(1000, function() {
0039             console.log("KeyboardQ: I'm printed after 1 second!")
0040             fakeCursor.mouseClickEvent()
0041         })
0042     }
0043
0044     // Cannot Depend onActivate as it never works for some modules
0045
0046     Connections {
0047         target: LQ.FakeEvent
0048         onCallerReceived: {
0049             if(sender == "Keyboard"){
0050                 keyboardPage.onActivate()
0051             }
0052         }
0053     }
0054
0055     // Helper Items For Fake Focus Event
0056     LQ.EmulatedMouse {
0057         id: fakeCursor
0058     }
0059
0060     Timer {
0061         id: timer
0062     }
0063
0064     function delay(delayTime, cb) {
0065         timer.interval = delayTime;
0066         timer.repeat = false;
0067         timer.triggered.connect(cb);
0068         timer.start();
0069     }
0070
0071     // Main Contents
0072
0073     Item {
0074         id: leftSideBar
0075         width: parent.width * 0.15
0076         anchors.top: parent.top
0077         anchors.bottom: navigationBarArea.top
0078
0079         Kirigami.Separator {
0080             id: leftSideBarLine
0081             anchors.right: parent.right
0082             height: parent.height
0083             width: 1
0084         }
0085
0086         ProgressionBarVertical {
0087             id: installProgressBar
0088             anchors.left: parent.left
0089             anchors.right: leftSideBarLine.left
0090             anchors.top: parent.top
0091             anchors.bottom: parent.bottom
0092         }
0093     }
0094
0095     MouseArea {
0096         id: mainContentArea
0097         anchors.left: leftSideBar.right
0098         anchors.right: rightSideBar.left
0099         anchors.leftMargin: Kirigami.Units.smallSpacing
0100         anchors.rightMargin: Kirigami.Units.smallSpacing
0101
0102         anchors.top: parent.top
0103         anchors.bottom: navigationBarArea.top
0104
0105         onClicked: {
0106             console.log("KeyboardQ mainContentArea has been clicked")
0107             keyboardModelChooseComboBox.forceActiveFocus()
0108         }
0109
0110         ColumnLayout {
0111             id: mainContentColumnLayout
0112             width: parent.width
0113             anchors.top: parent.top
0114             anchors.bottom: keyboard.top
0115
0116             Rectangle {
0117                 id: controlBarTopLabel
0118                 Layout.fillWidth: true
0119                 Layout.preferredHeight: Kirigami.Units.gridUnit * 3
0120                 Layout.alignment: Qt.AlignTop
0121                 color: "#ff212121"
0122
0123                 Label {
0124                     id: header
0125                     anchors.fill: parent
0126                     anchors.margins: Kirigami.Units.largeSpacing
0127                     horizontalAlignment: Text.AlignHCenter
0128                     verticalAlignment: Text.AlignVCenter
0129                     text: qsTr("To activate keyboard preview, select a layout.")
0130                     color: textColor
0131                     font.bold: true
0132                 }
0133             }
0134
0135             Rectangle {
0136                 id: controlBarComboArea
0137                 Layout.fillWidth: true
0138                 Layout.preferredHeight: Kirigami.Units.gridUnit * 3
0139                 Layout.alignment: Qt.AlignTop
0140                 color: "#ff212121"
0141                 border.width: keyboardModelChooseComboBox.focus ? 2 : 0
0142                 border.color: keyboardModelChooseComboBox.focus ? accentColor : "transparent"
0143
0144                 RowLayout {
0145                     id: models
0146                     anchors.fill: parent
0147                     anchors.margins: Kirigami.Units.largeSpacing
0148                     spacing: 10
0149
0150                     Label {
0151                         Layout.alignment: Qt.AlignCenter
0152                         text: qsTr("Keyboard Model:")
0153                         color: textColor
0154                         font.bold: true
0155                     }
0156
0157                     ComboBox {
0158                         id: keyboardModelChooseComboBox
0159                         objectName: "keyboardModelChooseComboBox"
0160
0161                         Keys.onUpPressed: {
0162                             customNavBar.forceActiveFocus()
0163                         }
0164
0165                         Keys.onDownPressed: {
0166                             localStackContainer.forceActiveFocus()
0167                         }
0168
0169                         Keys.onReturnPressed: {
0170                             keyboardModelChooseComboBox.popup.open()
0171                             keyboardModelChooseComboBox.popup.forceActiveFocus()
0172                         }
0173
0174                         delegate: ItemDelegate {
0175                             background: Rectangle {
0176                                 anchors.fill: parent
0177                                 color: "transparent"
0178                             }
0179
0180                             contentItem: Kirigami.Heading{
0181                                 level: 2
0182                                 text: model.label
0183                             }
0184                         }
0185
0186                         background: Rectangle {
0187                             anchors.fill: parent
0188                             color: keyboardModelChooseComboBox.focus ? accentColor : "transparent"
0189                         }
0190
0191                         contentItem: Kirigami.Heading {
0192                             level: 2
0193                             text: keyboardModelChooseComboBox.displayText
0194                         }
0195
0196                         popup: Popup {
0197                             y: keyboardModelChooseComboBox.height - 1
0198                             width: keyboardModelChooseComboBox.width
0199                             implicitHeight: contentItem.implicitHeight
0200                             padding: 1
0201
0202                             onVisibleChanged: {
0203                                 if(visible){
0204                                     pCView.forceActiveFocus()
0205                                 }
0206                             }
0207
0208                             contentItem: ListView {
0209                                 id: pCView
0210                                 clip: true
0211                                 implicitHeight: contentHeight
0212                                 model: keyboardModelChooseComboBox.popup.visible ? keyboardModelChooseComboBox.delegateModel : null
0213                                 currentIndex: keyboardModelChooseComboBox.highlightedIndex
0214                                 keyNavigationEnabled: true
0215                                 highlight: Rectangle {
0216                                     color: accentColor
0217                                     radius: 4
0218                                 }
0219                                 highlightFollowsCurrentItem: true
0220                                 snapMode: ListView.SnapToItem
0221
0222                                 Keys.onReturnPressed: {
0223                                     console.log(currentIndex)
0224                                     keyboardModelChooseComboBox.currentIndex = pCView.currentIndex
0225                                     keyboardModelChooseComboBox.popup.close()
0226                                     keyboardModelChooseComboBox.forceActiveFocus()
0227                                 }
0228                             }
0229
0230                             background: Rectangle {
0231                                 anchors {
0232                                     fill: parent
0233                                     margins: -1
0234                                 }
0235                                 color: Kirigami.Theme.backgroundColor
0236                                 border.color: Kirigami.Theme.backgroundColor
0237                                 radius: 2
0238                             }
0239                         }
0240
0241                         onFocusChanged: {
0242                             if(focus) {
0243                                 navigationHelper.activeFocusedElement = keyboardModelChooseComboBox.objectName
0244                             }
0245                         }
0246
0247                         Layout.fillWidth: true
0248                         textRole: "label"
0249                         model: config.keyboardModelsModel
0250                         currentIndex: model.currentIndex
0251                         onCurrentIndexChanged: config.keyboardModels = currentIndex
0252                     }
0253                 }
0254             }
0255
0256             Rectangle {
0257                 id: localStackContainer
0258                 objectName: "localStackContainer"
0259                 Layout.fillWidth: true
0260                 Layout.fillHeight: true
0261
0262                 radius: 4
0263                 border.width: localStackContainer.activeFocus ? 3 : 1
0264                 border.color: localStackContainer.activeFocus ? accentColor : Qt.lighter(Kirigami.Theme.backgroundColor, 1.5)
0265                 color: Kirigami.Theme.backgroundColor
0266
0267                 KeyNavigation.up: keyboardModelChooseComboBox
0268
0269                 Keys.onReturnPressed: {
0270                     if(stack.currentIndex == 0){
0271                         listOneButton.forceActiveFocus()
0272                     }
0273                     if(stack.currentIndex == 1){
0274                         listTwoButton.forceActiveFocus()
0275                     }
0276                 }
0277
0278                 Keys.onDownPressed: {
0279                     textInputArea.forceActiveFocus()
0280                 }
0281
0282                 onActiveFocusChanged: {
0283                     if(activeFocus) {
0284                         navigationHelper.activeFocusedElement = objectName
0285                     }
0286                 }
0287
0288                 Rectangle {
0289                     id: controlBar
0290                     anchors.top: parent.top
0291                     anchors.left: parent.left
0292                     anchors.right: parent.right
0293                     anchors.margins: Kirigami.Units.smallSpacing
0294                     height: Kirigami.Units.gridUnit * 3
0295                     color: "#ff212121"
0296
0297                     RowLayout {
0298                         id: controlBarLayout
0299                         anchors.fill: parent
0300
0301                         Rectangle {
0302                             color: listOneButton.activeFocus ? keyboardPage.accentColor : "#ff212121"
0303                             Layout.fillWidth: true
0304                             Layout.preferredHeight: Kirigami.Units.gridUnit * 3
0305                             radius: 3
0306                             border.color: Branding.styleString(Branding.SidebarText)
0307                             border.width: stack.currentIndex == 0 ? 1 : 0
0308
0309                             Button {
0310                                 id: listOneButton
0311                                 objectName: "listOneButton"
0312                                 text: "Layout Selection"
0313                                 anchors.fill: parent
0314                                 anchors.margins: 3
0315                                 highlighted: listOneButton.activeFocus ? 1 : 0
0316                                 flat: stack.currentIndex == 0
0317
0318                                 Kirigami.Theme.backgroundColor: Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 0.4)
0319                                 Kirigami.Theme.textColor: Kirigami.Theme.textColor
0320
0321                                 KeyNavigation.right: listTwoButton
0322                                 KeyNavigation.down: list
0323
0324                                 onActiveFocusChanged: {
0325                                     if(activeFocus) {
0326                                         navigationHelper.activeFocusedElement = objectName
0327                                     }
0328                                 }
0329
0330                                 Keys.onBackPressed: {
0331                                     localStackContainer.forceActiveFocus()
0332                                 }
0333
0334                                 onClicked: {
0335                                     stack.currentIndex = 0
0336                                 }
0337                             }
0338                         }
0339
0340                         Rectangle {
0341                             color: listTwoButton.activeFocus ? keyboardPage.accentColor : "#ff212121"
0342                             Layout.fillWidth: true
0343                             Layout.preferredHeight: Kirigami.Units.gridUnit * 3
0344                             radius: 3
0345                             border.color: Branding.styleString(Branding.SidebarText)
0346                             border.width: stack.currentIndex == 1 ? 1 : 0
0347
0348                             Button {
0349                                 id: listTwoButton
0350                                 objectName: "listTwoButton"
0351                                 text: "Variant Selection"
0352                                 anchors.fill: parent
0353                                 anchors.margins: 3
0354                                 highlighted: listTwoButton.activeFocus ? 1 : 0
0355                                 flat: stack.currentIndex == 1
0356
0357                                 Kirigami.Theme.backgroundColor: Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 0.4)
0358                                 Kirigami.Theme.textColor: Kirigami.Theme.textColor
0359
0360
0361                                 KeyNavigation.left: listOneButton
0362                                 KeyNavigation.down: list
0363
0364                                 onActiveFocusChanged: {
0365                                     if(activeFocus) {
0366                                         navigationHelper.activeFocusedElement = objectName
0367                                     }
0368                                 }
0369
0370                                 Keys.onBackPressed: {
0371                                     localStackContainer.forceActiveFocus()
0372                                 }
0373
0374                                 onClicked: {
0375                                     stack.currentIndex = 1
0376                                 }
0377                             }
0378                         }
0379                     }
0380                 }
0381
0382                 StackLayout {
0383                     id: stack
0384                     anchors.top: controlBar.bottom
0385                     anchors.left: parent.left
0386                     anchors.right: parent.right
0387                     anchors.bottom: parent.bottom
0388                     anchors.margins: Kirigami.Units.smallSpacing
0389                     clip: true
0390                     currentIndex: 0
0391
0392                     ColumnLayout {
0393                         implicitWidth: parent.width
0394                         implicitHeight: parent.height
0395
0396                         Rectangle {
0397                             Layout.fillWidth: true
0398                             Layout.preferredHeight: Kirigami.Units.gridUnit * 2
0399                             color: "#ff212121"
0400
0401                             Label {
0402                                 id: keyboardViewOne
0403                                 anchors.fill: parent
0404                                 anchors.margins: Kirigami.Units.largeSpacing
0405                                 verticalAlignment: Text.AlignVCenter
0406                                 horizontalAlignment: Text.AlignCenter
0407                                 color: Branding.styleString(Branding.SidebarText)
0408                                 font.pixelSize: parent.height * 0.45
0409                                 text: qsTr("Select your preferred keyboard layout.")
0410                                 maximumLineCount: 1
0411                                 elide: Text.ElideRight
0412                             }
0413                         }
0414
0415                         Kirigami.CardsListView {
0416                             id: list
0417                             objectName: "list"
0418                             Layout.fillWidth: true
0419                             Layout.fillHeight: true
0420                             boundsBehavior: Flickable.StopAtBounds
0421                             spacing: 4
0422                             model: config.keyboardLayoutsModel
0423                             currentIndex: model.currentIndex
0424                             clip: true
0425                             highlight: Rectangle {
0426                                 color: accentColor
0427                                 radius: 4
0428                             }
0429                             ScrollBar.vertical: ScrollBar {
0430                                 id: listScrollBar
0431                                 active: true
0432                             }
0433
0434                             KeyNavigation.up: listOneButton
0435                             KeyNavigation.down: adjustSettingsButton
0436
0437                             Keys.onBackPressed: {
0438                                 localStackContainer.forceActiveFocus()
0439                             }
0440
0441                             Keys.onRightPressed: {
0442                                 localStackContainer.forceActiveFocus()
0443                             }
0444
0445                             Keys.onLeftPressed: {
0446                                 localStackContainer.forceActiveFocus()
0447                             }
0448
0449                             onActiveFocusChanged: {
0450                                 if(activeFocus) {
0451                                     navigationHelper.activeFocusedElement = objectName
0452                                 }
0453                             }
0454
0455                             Component.onCompleted: positionViewAtIndex(model.currentIndex, ListView.Contain)
0456
0457                             delegate: Kirigami.BasicListItem {
0458                                 width: parent.width
0459                                 height: 40
0460                                 label: model.label
0461
0462                                 Keys.onReturnPressed: {
0463                                     clicked()
0464                                 }
0465
0466                                 onClicked: {
0467                                     list.currentIndex = index
0468                                     list.model.currentIndex = index
0469                                     keyIndex = label1.text.substring(0,6)
0470                                     stack.currentIndex = 1
0471                                     list2.forceActiveFocus()
0472                                 }
0473                             }
0474                         }
0475                     }
0476
0477                     ColumnLayout {
0478                         id: variantView
0479                         implicitWidth: parent.width
0480                         implicitHeight: parent.height
0481
0482                         Rectangle {
0483                             Layout.fillWidth: true
0484                             Layout.preferredHeight: Kirigami.Units.gridUnit * 2
0485                             color: "#ff212121"
0486
0487                             Label {
0488                                 id: variant
0489                                 anchors.fill: parent
0490                                 anchors.margins: Kirigami.Units.largeSpacing
0491                                 verticalAlignment: Text.AlignVCenter
0492                                 horizontalAlignment: Text.AlignCenter
0493                                 color: Branding.styleString(Branding.SidebarText)
0494                                 font.pixelSize: parent.height * 0.45
0495                                 text: qsTr("Select your preferred keyboard layout variant.")
0496                                 maximumLineCount: 1
0497                                 elide: Text.ElideRight
0498                             }
0499                         }
0500
0501                         Kirigami.CardsListView {
0502                             id: list2
0503                             objectName: "list2"
0504                             Layout.fillWidth: true
0505                             Layout.fillHeight: true
0506                             boundsBehavior: Flickable.StopAtBounds
0507                             spacing: 4
0508                             model: config.keyboardVariantsModel
0509                             currentIndex: model.currentIndex
0510                             clip: true
0511                             highlight: Rectangle {
0512                                 color: accentColor
0513                                 radius: 4
0514                             }
0515                             ScrollBar.vertical: ScrollBar {
0516                                 id: list2ScrollBar
0517                                 active: true
0518                             }
0519
0520                             KeyNavigation.up: listOneButton
0521                             KeyNavigation.down: adjustSettingsButton
0522
0523                             Keys.onBackPressed: {
0524                                 localStackContainer.forceActiveFocus()
0525                             }
0526
0527                             Keys.onRightPressed: {
0528                                 localStackContainer.forceActiveFocus()
0529                             }
0530
0531                             Keys.onLeftPressed: {
0532                                 localStackContainer.forceActiveFocus()
0533                             }
0534
0535                             onActiveFocusChanged: {
0536                                 if(activeFocus) {
0537                                     navigationHelper.activeFocusedElement = objectName
0538                                 }
0539                             }
0540
0541                             Component.onCompleted: positionViewAtIndex(model.currentIndex, ListView.Center)
0542
0543                             delegate: Kirigami.BasicListItem {
0544                                 width: parent.width
0545                                 height: 40
0546                                 label: model.label
0547
0548                                 Keys.onReturnPressed: {
0549                                     clicked()
0550                                 }
0551
0552                                 onClicked: {
0553                                     list2.currentIndex = index
0554                                     list2.model.currentIndex = index
0555                                     list2.positionViewAtIndex(index, ListView.Contain)
0556                                     //adjustSettingsButton.forceActiveFocus()
0557                                 }
0558                             }
0559                         }
0560                     }
0561                 }
0562             }
0563
0564             Rectangle {
0565                 id: textInputArea
0566                 Layout.fillWidth: true
0567                 Layout.preferredHeight: Kirigami.Units.gridUnit * 3
0568                 color: textInputArea.focus ? accentColor : "#ff212121"
0569                 objectName: "textInputArea"
0570
0571                 Keys.onUpPressed: {
0572                     localStackContainer.forceActiveFocus()
0573                 }
0574
0575                 Keys.onDownPressed: {
0576                     customNavBar.forceActiveFocus()
0577                 }
0578
0579                 Keys.onReturnPressed: {
0580                     textInput.forceActiveFocus()
0581                 }
0582
0583                 onActiveFocusChanged: {
0584                     if(activeFocus) {
0585                         navigationHelper.activeFocusedElement = objectName
0586                     }
0587                 }
0588
0589                 TextField {
0590                     id: textInput
0591                     placeholderText: qsTr("Type here to test your keyboard")
0592                     horizontalAlignment: TextInput.AlignHCenter
0593                     anchors.fill: parent
0594                     anchors.margins: 3
0595
0596                     onAccepted: {
0597                         textInputArea.forceActiveFocus()
0598                     }
0599
0600                     Keys.onUpPressed: {
0601                         textInputArea.forceActiveFocus()
0602                     }
0603
0604                     Keys.onDownPressed: {
0605                         customNavBar.forceActiveFocus()
0606                     }
0607                 }
0608             }
0609         }
0610
0611         Keyboard {
0612             id: keyboard
0613             anchors.left: parent.left
0614             anchors.right: parent.right
0615             anchors.bottom: parent.bottom
0616             height: parent.height * 0.25
0617             source: langXml.includes(keyIndex) ? (keyIndex + ".xml") :
0618                     afganiXml.includes(keyIndex) ? "afgani.xml" :
0619                     scanXml.includes(keyIndex) ? "scan.xml" :
0620                     genericXml.includes(keyIndex) ? "generic.xml" :
0621                     genericQzXml.includes(keyIndex) ? "generic_qz.xml" :
0622                     arXml.includes(keyIndex) ? "ar.xml" :
0623                     deXml.includes(keyIndex) ? "de.xml" :
0624                     enXml.includes(keyIndex) ? "en.xml" :
0625                     esXml.includes(keyIndex) ? "es.xml" :
0626                     frXml.includes(keyIndex) ? "fr.xml" :
0627                     ptXml.includes(keyIndex) ? "pt.xml" :
0628                     ruXml.includes(keyIndex) ? "ru.xml" :"empty.xml"
0629             rows: 4
0630             columns: 10
0631             keyColor: "transparent"
0632             keyPressedColorOpacity: 0.2
0633             keyImageLeft: "button_bkg_left.png"
0634             keyImageRight: "button_bkg_right.png"
0635             keyImageCenter: "button_bkg_center.png"
0636             target: textInput
0637             onEnterClicked: console.log("Enter!")
0638         }
0639     }
0640
0641     Item {
0642         id: rightSideBar
0643         width: parent.width * 0.15
0644         anchors.top: parent.top
0645         anchors.bottom: navigationBarArea.top
0646         anchors.right: parent.right
0647
0648         Kirigami.Separator {
0649             id: rightSideBarLine
0650             anchors.left: parent.left
0651             height: parent.height
0652             width: 1
0653         }
0654
0655         NavigationHelper {
0656             id: navigationHelper
0657             anchors.top: parent.top
0658             anchors.bottom: parent.bottom
0659             anchors.left: rightSideBarLine.right
0660             anchors.leftMargin: 1
0661             anchors.right: parent.right
0662         }
0663     }
0664
0665     Item {
0666         id: navigationBarArea
0667         width: parent.width
0668         height: Kirigami.Units.gridUnit * 3
0669         anchors.bottom: parent.bottom
0670
0671         Kirigami.Separator {
0672             id: navigationBarAreaLine
0673             anchors.top: parent.top
0674             width: parent.width
0675             height: 1
0676         }
0677
0678         CustomNavigationBar {
0679             id: customNavBar
0680             width: parent.width
0681             anchors.top: navigationBarAreaLine.bottom
0682             anchors.bottom: parent.bottom
0683             navigationReturnComponent: textInputArea
0684             navHelper: navigationHelper
0685         }
0686     }
0687 }