From 78a4caa47eb6cbb819f0d650864861cc6b268645 Mon Sep 17 00:00:00 2001 From: Cyril Anisimov Date: Fri, 20 Sep 2024 00:22:14 +0200 Subject: [PATCH] fixed language selector --- .../qml/Components/SelectLanguageDrawer.qml | 255 ++++++++++-------- client/ui/qml/Controls2/DrawerType2.qml | 23 -- 2 files changed, 138 insertions(+), 140 deletions(-) diff --git a/client/ui/qml/Components/SelectLanguageDrawer.qml b/client/ui/qml/Components/SelectLanguageDrawer.qml index 3124445e8..337c59879 100644 --- a/client/ui/qml/Components/SelectLanguageDrawer.qml +++ b/client/ui/qml/Components/SelectLanguageDrawer.qml @@ -24,11 +24,11 @@ DrawerType2 { target: root enabled: !GC.isMobile() function onOpened() { - FocusController.setRoot(root) + FocusController.setRootItem(root) } function onClosed() { - FocusController.setRoot(null) + FocusController.setRootItem(null) } } @@ -42,166 +42,187 @@ DrawerType2 { BackButtonType { id: backButton + + Layout.fillWidth: true + Layout.topMargin: 16 + Layout.rightMargin: 16 + Layout.leftMargin: 16 + backButtonImage: "qrc:/images/controls/arrow-left.svg" backButtonFunction: function() { root.closeTriggered() } } + + Header2Type { + id: header + + Layout.fillWidth: true + Layout.topMargin: 16 + Layout.rightMargin: 16 + Layout.leftMargin: 16 + + headerText: qsTr("Choose language") + } } - FlickableType { + ListView { + id: listView + anchors.top: backButtonLayout.bottom anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom - contentHeight: content.implicitHeight - ColumnLayout { - id: content + clip: true + interactive: true - anchors.fill: parent + property bool isFocusable: true - Header2Type { - id: header - Layout.fillWidth: true - Layout.topMargin: 16 - Layout.rightMargin: 16 - Layout.leftMargin: 16 + model: LanguageModel + currentIndex: LanguageModel.currentLanguageIndex - headerText: qsTr("Choose language") - } + ButtonGroup { + id: buttonGroup + } - ListView { - id: listView + // activeFocusOnTab: true + // onActiveFocusChanged: { + // if (activeFocus) { + // this.currentFocusIndex = 0 + // this.itemAtIndex(currentFocusIndex).forceActiveFocus() + // } + // } - Layout.fillWidth: true - height: listView.contentItem.height + // Keys.onTabPressed: { + // if (currentFocusIndex < this.count - 1) { + // currentFocusIndex += 1 + // this.itemAtIndex(currentFocusIndex).forceActiveFocus() + // } else { + // listViewFocusItem.forceActiveFocus() + // focusItem.forceActiveFocus() + // } + // } - clip: true - interactive: false + // Item { + // id: listViewFocusItem // TODO: delete? + // Keys.onTabPressed: { + // root.forceActiveFocus() + // } + // } - model: LanguageModel - currentIndex: LanguageModel.currentLanguageIndex + // onVisibleChanged: { + // if (visible) { + // listViewFocusItem.forceActiveFocus() + // focusItem.forceActiveFocus() + // } + // } - ButtonGroup { - id: buttonGroup - } + delegate: Item { + implicitWidth: root.width + implicitHeight: delegateContent.implicitHeight - property int currentFocusIndex: 0 + // onActiveFocusChanged: { + // if (activeFocus) { + // radioButton.forceActiveFocus() + // } + // } - activeFocusOnTab: true - onActiveFocusChanged: { - if (activeFocus) { - this.currentFocusIndex = 0 - this.itemAtIndex(currentFocusIndex).forceActiveFocus() - } - } + ColumnLayout { + id: delegateContent - // Keys.onTabPressed: { - // if (currentFocusIndex < this.count - 1) { - // currentFocusIndex += 1 - // this.itemAtIndex(currentFocusIndex).forceActiveFocus() - // } else { - // listViewFocusItem.forceActiveFocus() - // focusItem.forceActiveFocus() - // } - // } + anchors.fill: parent + + RadioButton { + id: radioButton + + implicitWidth: parent.width + implicitHeight: radioButtonContent.implicitHeight + + hoverEnabled: true + + property bool isFocusable: true - Item { - id: listViewFocusItem Keys.onTabPressed: { - root.forceActiveFocus() + FocusController.nextKeyTabItem() } - } - onVisibleChanged: { - if (visible) { - listViewFocusItem.forceActiveFocus() - focusItem.forceActiveFocus() + Keys.onBacktabPressed: { + FocusController.previousKeyTabItem() } - } - delegate: Item { - implicitWidth: root.width - implicitHeight: delegateContent.implicitHeight + Keys.onUpPressed: { + FocusController.nextKeyUpItem() + } - onActiveFocusChanged: { - if (activeFocus) { - radioButton.forceActiveFocus() + Keys.onDownPressed: { + FocusController.nextKeyDownItem() + } + + Keys.onLeftPressed: { + FocusController.nextKeyLeftItem() + } + + Keys.onRightPressed: { + FocusController.nextKeyRightItem() + } + + indicator: Rectangle { + width: parent.width - 1 + height: parent.height + color: radioButton.hovered ? AmneziaStyle.color.slateGray : AmneziaStyle.color.onyxBlack + border.color: radioButton.focus ? AmneziaStyle.color.paleGray : AmneziaStyle.color.transparent + border.width: radioButton.focus ? 1 : 0 + + Behavior on color { + PropertyAnimation { duration: 200 } + } + Behavior on border.color { + PropertyAnimation { duration: 200 } } } - ColumnLayout { - id: delegateContent - + RowLayout { + id: radioButtonContent anchors.fill: parent - RadioButton { - id: radioButton + anchors.rightMargin: 16 + anchors.leftMargin: 16 - implicitWidth: parent.width - implicitHeight: radioButtonContent.implicitHeight + spacing: 0 - hoverEnabled: true + z: 1 - indicator: Rectangle { - width: parent.width - 1 - height: parent.height - color: radioButton.hovered ? AmneziaStyle.color.slateGray : AmneziaStyle.color.onyxBlack - border.color: radioButton.focus ? AmneziaStyle.color.paleGray : AmneziaStyle.color.transparent - border.width: radioButton.focus ? 1 : 0 + ParagraphTextType { + Layout.fillWidth: true + Layout.topMargin: 20 + Layout.bottomMargin: 20 - Behavior on color { - PropertyAnimation { duration: 200 } - } - Behavior on border.color { - PropertyAnimation { duration: 200 } - } - } + text: languageName + } - RowLayout { - id: radioButtonContent - anchors.fill: parent + Image { + source: "qrc:/images/controls/check.svg" + visible: radioButton.checked - anchors.rightMargin: 16 - anchors.leftMargin: 16 + width: 24 + height: 24 - spacing: 0 - - z: 1 - - ParagraphTextType { - Layout.fillWidth: true - Layout.topMargin: 20 - Layout.bottomMargin: 20 - - text: languageName - } - - Image { - source: "qrc:/images/controls/check.svg" - visible: radioButton.checked - - width: 24 - height: 24 - - Layout.rightMargin: 8 - } - } - - ButtonGroup.group: buttonGroup - checked: listView.currentIndex === index - - onClicked: { - listView.currentIndex = index - LanguageModel.changeLanguage(languageIndex) - root.closeTriggered() - } + Layout.rightMargin: 8 } } - Keys.onEnterPressed: radioButton.clicked() - Keys.onReturnPressed: radioButton.clicked() + ButtonGroup.group: buttonGroup + checked: listView.currentIndex === index + + onClicked: { + listView.currentIndex = index + LanguageModel.changeLanguage(languageIndex) + root.closeTriggered() + } } } + + Keys.onEnterPressed: radioButton.clicked() + Keys.onReturnPressed: radioButton.clicked() } } } diff --git a/client/ui/qml/Controls2/DrawerType2.qml b/client/ui/qml/Controls2/DrawerType2.qml index df07c52ff..5e4803279 100644 --- a/client/ui/qml/Controls2/DrawerType2.qml +++ b/client/ui/qml/Controls2/DrawerType2.qml @@ -56,8 +56,6 @@ Item { target: PageController function onCloseTopDrawer() { - console.debug("===>> onCloseTopDrawer function") - if (depthIndex === PageController.getDrawerDepth()) { if (isCollapsedStateActive()) { return @@ -76,8 +74,6 @@ Item { target: root function onCloseTriggered() { - console.debug("***>> onClose root connection") - if (isCollapsedStateActive()) { return } @@ -88,8 +84,6 @@ Item { } function onClosed() { - console.debug("***>> onClosed root connection") - drawerContent.state = root.drawerCollapsedStateName if (root.isCollapsedStateActive()) { @@ -105,8 +99,6 @@ Item { } function onOpenTriggered() { - console.debug("===>> onOpen root connection") - if (root.isExpandedStateActive()) { return } @@ -119,10 +111,7 @@ Item { function onOpened() { drawerContent.state = root.drawerExpandedStateName - console.debug("===>> onOpened root connection") - if (isExpandedStateActive()) { - console.error("new state - extended") if (PageController.getInitialPageNavigationBarColor() !== 0xFF1C1D21) { PageController.updateNavigationBarColor(0xFF1C1D21) } @@ -130,7 +119,6 @@ Item { depthIndex = PageController.incrementDrawerDepth() FocusController.setRootItem(root) - console.debug("===>> Root item has changed to ", root) } } @@ -150,7 +138,6 @@ Item { anchors.fill: parent onClicked: { - console.debug("===>> onClicked emptyArea") root.closeTriggered() } } @@ -171,8 +158,6 @@ Item { /** If drag area is released at any point other than min or max y, transition to the other state */ onReleased: { - console.debug("===>> onReleased dragArea") - if (isCollapsedStateActive() && drawerContent.y < dragArea.drag.maximumY) { root.openTriggered() return @@ -184,24 +169,16 @@ Item { } onEntered: { - console.debug("===>> onEntered dragArea") - root.cursorEntered() } onExited: { - console.debug("===>> onExited dragArea") - root.cursorExited() } onPressedChanged: { - console.debug("===>> onPressedChanged dragArea") - root.pressed(pressed, entered) } onClicked: { - console.debug("===>> onClicked dragArea") - if (isCollapsedStateActive()) { root.openTriggered() }