Focus: override activeFocus item

- add an outline on the item that have the active focus
- override only after a tab key press

GitLab: #1082

Change-Id: Ib549052e0fa2fe6d781df6980ce662919925c473

src/app/MainApplicationWindow.qml

@@ -44,6 +44,37 @@ ApplicationWindow {
         None
     }
 
+    onActiveFocusItemChanged: {
+        focusOverlay.margin = -5;
+        if (activeFocusItem && ((activeFocusItem.focusReason === Qt.TabFocusReason) || (activeFocusItem.focusReason === Qt.BacktabFocusReason))) {
+            if (activeFocusItem.focusOnChild) {
+                focusOverlay.parent = activeFocusItem.parent;
+            } else if (activeFocusItem.dontShowFocusState) {
+                focusOverlay.parent = null;
+            } else {
+                if (activeFocusItem.showFocusMargin)
+                    focusOverlay.margin = 0;
+                focusOverlay.parent = activeFocusItem;
+            }
+        } else {
+            focusOverlay.parent = null;
+        }
+    }
+
+    Rectangle {
+        id: focusOverlay
+        objectName: "focusOverlay"
+        property real margin: -5
+        z: -2
+        anchors.fill: parent
+        anchors.margins: margin
+        visible: true
+        color: "transparent"
+        radius: parent ? parent.radius ? parent.radius : 0 : 0
+        border.width: 2
+        border.color: JamiTheme.tintedBlue
+    }
+
     property ApplicationWindow appWindow: root
     property LayoutManager layoutManager: LayoutManager {
         appContainer: appContainer

src/app/commoncomponents/JamiSwitch.qml

@@ -23,9 +23,13 @@ Switch {
     id: root
 
     property alias toolTipText: toolTip.text
+    property alias radius: handleBackground.radius
 
     hoverEnabled: true
 
+    focusPolicy: Qt.StrongFocus
+    useSystemFocusVisuals: false
+
     MaterialToolTip {
         id: toolTip
 

src/app/commoncomponents/MarkdownPopup.qml

@@ -59,6 +59,7 @@ Popup {
 
             toolTipText: modelData.toolTip
             source: modelData.iconSrc
+            focusPolicy: Qt.TabFocus
 
             normalColor: JamiTheme.chatViewFooterListColor
             imageColor: JamiTheme.chatViewFooterImgColor

src/app/commoncomponents/MaterialButton.qml

@@ -34,14 +34,13 @@ AbstractButton {
     property alias toolTipText: toolTip.text
     property alias iconSource: icon.source_
     property alias animatedIconSource: icon.animatedSource_
+    property alias radius: background.radius
     property real iconSize: 18
     property var color: JamiTheme.buttonTintedBlue
     property var hoveredColor: JamiTheme.buttonTintedBlueHovered
     property var secHoveredColor: JamiTheme.secAndTertiHoveredBackgroundColor
     property var pressedColor: JamiTheme.buttonTintedBluePressed
-    property var keysNavigationFocusColor: Qt.darker(hoveredColor, 2)
     property bool hasIcon: animatedIconSource.length !== 0 || iconSource.length !== 0
-
     property var preferredWidth
     property real textLeftPadding
     property real textRightPadding
@@ -68,7 +67,7 @@ AbstractButton {
     }
 
     hoverEnabled: true
-    focusPolicy: Qt.TabFocus
+    focusPolicy: Qt.StrongFocus
 
     Accessible.role: Accessible.Button
     Accessible.name: root.text
@@ -180,16 +179,16 @@ AbstractButton {
     }
 
     background: Rectangle {
-
+        id: background
         color: {
-            var baseColor = root.focus ? root.keysNavigationFocusColor : root.color;
+            var baseColor = root.color;
             if (root.primary) {
                 if (root.hovered && root.hoverEnabled)
                     return root.hoveredColor;
                 return baseColor;
             }
             if (root.secondary || root.tertiary) {
-                if ((root.hovered && root.hoverEnabled) || root.focus)
+                if (root.hovered && root.hoverEnabled)
                     return root.secHoveredColor;
                 return JamiTheme.transparentColor;
             }
@@ -209,7 +208,7 @@ AbstractButton {
                 return JamiTheme.secondaryButtonBorderColor;
             if (root.down)
                 return root.pressedColor;
-            return root.focus ? root.keysNavigationFocusColor : root.color;
+            return root.color;
         }
 
         radius: JamiTheme.primaryRadius

src/app/commoncomponents/MaterialRadioButton.qml

@@ -26,6 +26,7 @@ RadioButton {
 
     property string color: JamiTheme.textColor
     property string bgColor: ""
+    useSystemFocusVisuals: false
 
     indicator: Rectangle {
         id: rect

src/app/commoncomponents/MaterialTextField.qml

@@ -27,6 +27,7 @@ TextField {
     property bool isActive: activeFocus || contextMenu.active
     property bool isSettings: false
     property bool isSwarmDetail: false
+    property bool dontShowFocusState: !readOnly
 
     onActiveFocusChanged: {
         if (!activeFocus && !contextMenu.active) {

src/app/commoncomponents/PasswordTextEdit.qml

@@ -23,7 +23,6 @@ ModalTextEdit {
     id: modalTextEditRoot
 
     property bool firstEntry: false
-
     signal icoClicked
 
     prefixIconSrc: firstEntry ? JamiResources.lock_svg : JamiResources.round_edit_24dp_svg

src/app/commoncomponents/PushButton.qml

@@ -79,7 +79,7 @@ AbstractButton {
     checkable: false
     checked: false
     hoverEnabled: true
-    focusPolicy: Qt.TabFocus
+    focusPolicy: Qt.StrongFocus
 
     property bool forceHovered: false
 
@@ -169,7 +169,7 @@ AbstractButton {
             },
             State {
                 name: "hovered"
-                when: hovered || root.activeFocus
+                when: hovered
                 PropertyChanges {
                     target: background
                     color: hoveredColor
@@ -177,7 +177,7 @@ AbstractButton {
             },
             State {
                 name: "forceHovered"
-                when: forceHovered || root.activeFocus
+                when: forceHovered
                 PropertyChanges {
                     target: background
                     color: hoveredColor

src/app/mainview/components/ContactSearchBar.qml

@@ -67,6 +67,8 @@ Rectangle {
     TextField {
         id: contactSearchBar
 
+        property bool dontShowFocusState: true
+
         anchors.verticalCenter: root.verticalCenter
         anchors.left: searchIconImage.right
         anchors.right: contactSearchBar.text.length ? clearTextButton.left : root.right

src/app/mainview/components/MessageBar.qml

@@ -382,7 +382,7 @@ ColumnLayout {
 
                         Behavior on width  {
                             NumberAnimation {
-                                duration: JamiTheme.longFadeDuration
+                                duration: JamiTheme.longFadeDuration / 2
                             }
                         }
 
@@ -447,6 +447,7 @@ ColumnLayout {
 
                             toolTipText: modelData.toolTip
                             source: modelData.iconSrc
+                            focusPolicy: Qt.TabFocus
 
                             normalColor: JamiTheme.chatViewFooterListColor
                             imageColor: JamiTheme.chatViewFooterImgColor
@@ -466,7 +467,7 @@ ColumnLayout {
 
                         Behavior on width  {
                             NumberAnimation {
-                                duration: JamiTheme.longFadeDuration
+                                duration: JamiTheme.longFadeDuration / 2
                             }
                         }
 
@@ -541,7 +542,7 @@ ColumnLayout {
 
                         Behavior on width  {
                             NumberAnimation {
-                                duration: JamiTheme.longFadeDuration
+                                duration: JamiTheme.longFadeDuration / 2
                             }
                         }
 
@@ -613,6 +614,7 @@ ColumnLayout {
 
                             toolTipText: modelData.toolTip
                             source: modelData.iconSrc
+                            focusPolicy: Qt.TabFocus
 
                             normalColor: JamiTheme.chatViewFooterListColor
                             imageColor: JamiTheme.chatViewFooterImgColor
@@ -634,7 +636,7 @@ ColumnLayout {
 
                     Behavior on width  {
                         NumberAnimation {
-                            duration: JamiTheme.longFadeDuration
+                            duration: JamiTheme.longFadeDuration / 2
                         }
                     }
 

src/app/mainview/components/NewSwarmPage.qml

@@ -32,8 +32,8 @@ DualPaneView {
 
     onVisibleChanged: {
         UtilsAdapter.setTempCreationImageFromString();
-        title.clear();
-        description.clear();
+        title.staticText = "";
+        description.staticText = "";
     }
 
     property var members: []
@@ -137,68 +137,52 @@ DualPaneView {
                 avatarSize: 180
             }
 
-            EditableLineEdit {
+            ModalTextEdit {
                 id: title
                 objectName: "titleLineEdit"
-                Layout.alignment: Qt.AlignCenter
-                Layout.topMargin: JamiTheme.preferredMarginSize
-                Layout.preferredWidth: JamiTheme.preferredFieldWidth
 
-                font.pointSize: JamiTheme.titleFontSize
+                maxCharacters: JamiTheme.maximumCharacters
 
-                verticalAlignment: Text.AlignVCenter
+                Layout.minimumHeight: JamiTheme.preferredFieldHeight
+                Layout.topMargin: JamiTheme.preferredMarginSize
+                Layout.preferredWidth: JamiTheme.preferredFieldWidth
 
+                staticText: ""
                 placeholderText: JamiStrings.swarmName
-                tooltipText: JamiStrings.swarmName
-                backgroundColor: root.color
-                color: UtilsAdapter.luma(backgroundColor) ? JamiTheme.chatviewTextColorLight : JamiTheme.chatviewTextColorDark
-                placeholderTextColor: {
-                    if (editable) {
-                        if (UtilsAdapter.luma(root.color)) {
-                            return JamiTheme.placeholderTextColorWhite;
-                        } else {
-                            return JamiTheme.placeholderTextColor;
-                        }
+
+                textColor: {
+                    if (UtilsAdapter.luma(root.color)) {
+                        return JamiTheme.placeholderTextColorWhite;
                     } else {
-                        if (UtilsAdapter.luma(root.color)) {
-                            return JamiTheme.chatviewTextColorLight;
-                        } else {
-                            return JamiTheme.chatviewTextColorDark;
-                        }
+                        return JamiTheme.placeholderTextColor;
                     }
                 }
+
+                onAccepted: description.forceActiveFocus()
             }
 
-            EditableLineEdit {
+            ModalTextEdit {
                 id: description
                 objectName: "descriptionLineEdit"
-                Layout.alignment: Qt.AlignCenter
-                Layout.topMargin: JamiTheme.preferredMarginSize
-                Layout.preferredWidth: JamiTheme.preferredFieldWidth
 
-                font.pointSize: JamiTheme.menuFontSize
+                maxCharacters: JamiTheme.maximumCharacters
 
-                verticalAlignment: Text.AlignVCenter
+                Layout.minimumHeight: JamiTheme.preferredFieldHeight
+                Layout.topMargin: JamiTheme.preferredMarginSize
+                Layout.preferredWidth: JamiTheme.preferredFieldWidth
 
+                staticText: ""
                 placeholderText: JamiStrings.addADescription
-                tooltipText: JamiStrings.addADescription
-                backgroundColor: root.color
-                color: UtilsAdapter.luma(backgroundColor) ? JamiTheme.chatviewTextColorLight : JamiTheme.chatviewTextColorDark
-                placeholderTextColor: {
-                    if (editable) {
-                        if (UtilsAdapter.luma(root.color)) {
-                            return JamiTheme.placeholderTextColorWhite;
-                        } else {
-                            return JamiTheme.placeholderTextColor;
-                        }
+
+                textColor: {
+                    if (UtilsAdapter.luma(root.color)) {
+                        return JamiTheme.placeholderTextColorWhite;
                     } else {
-                        if (UtilsAdapter.luma(root.color)) {
-                            return JamiTheme.chatviewTextColorLight;
-                        } else {
-                            return JamiTheme.chatviewTextColorDark;
-                        }
+                        return JamiTheme.placeholderTextColor;
                     }
                 }
+
+                onAccepted: btnCreateSwarm.forceActiveFocus()
             }
 
             MaterialButton {
@@ -221,7 +205,7 @@ DualPaneView {
                 primary: true
                 text: JamiStrings.createTheSwarm
 
-                onClicked: createSwarmClicked(title.text, description.text, UtilsAdapter.tempCreationImage())
+                onClicked: createSwarmClicked(title.dynamicText, description.dynamicText, UtilsAdapter.tempCreationImage())
             }
         }
     }

src/app/mainview/components/Searchbar.qml

@@ -69,6 +69,7 @@ RowLayout {
 
         TextField {
             id: textArea
+            property bool dontShowFocusState: true
 
             background.visible: false
             anchors.right: clearTextButton.left

src/app/settingsview/SettingsSidePanel.qml

@@ -172,6 +172,7 @@ SidePanelBase {
                         PushButton {
                             id: btn
                             property var sprite: null
+                            property bool showFocusMargin: true
 
                             property var isChildren: {
                                 var ob = base[modelData];

src/app/settingsview/components/AppearenceSettingsPage.qml

@@ -200,6 +200,7 @@ SettingsPageBase {
                     MaterialRadioButton {
                         id: lightThemeButton
 
+                        property bool focusOnChild: true
                         anchors.fill: parent
                         anchors.leftMargin: 19
 
@@ -230,6 +231,7 @@ SettingsPageBase {
                     MaterialRadioButton {
                         id: darkThemeButton
 
+                        property bool focusOnChild: true
                         anchors.fill: parent
                         anchors.leftMargin: 19
 
@@ -260,6 +262,7 @@ SettingsPageBase {
                     MaterialRadioButton {
                         id: sysThemeButton
 
+                        property bool focusOnChild: true
                         anchors.fill: parent
                         anchors.leftMargin: 19
 
@@ -314,6 +317,7 @@ SettingsPageBase {
                 to: 200
                 stepSize: 10
                 snapMode: Slider.SnapAlways
+                useSystemFocusVisuals: false
 
                 onMoved: {
                     UtilsAdapter.setAppValue(Settings.BaseZoom, value / 100.0);

src/app/settingsview/components/CallRecordingSettingsPage.qml

@@ -166,6 +166,7 @@ SettingsPageBase {
                     Layout.fillHeight: true
 
                     value: AVModel.getRecordQuality() / 100
+                    useSystemFocusVisuals: false
 
                     from: 0
                     to: 500

src/app/settingsview/components/LocationSharingSettingsPage.qml

@@ -122,6 +122,7 @@ SettingsPageBase {
 
             property bool isMax: UtilsAdapter.getAppValue(Settings.PositionShareDuration) < 0.05
             value: isMax ? Math.log(600) : Math.log(UtilsAdapter.getAppValue(Settings.PositionShareDuration))
+            useSystemFocusVisuals: false
 
             function valueLabel() {
                 if (value != Math.log(600)) {

src/app/settingsview/components/MediaCodecDelegate.qml

@@ -54,6 +54,9 @@ ItemDelegate {
             tristate: false
             checkState: isEnabled ? Qt.Checked : Qt.Unchecked
 
+            focusPolicy: Qt.StrongFocus
+            useSystemFocusVisuals: false
+
             text: ""
             indicator: Image {
                 anchors.centerIn: parent
@@ -94,9 +97,9 @@ ItemDelegate {
             Layout.rightMargin: JamiTheme.preferredMarginSize / 2
 
             text: {
-                if (mediaType == MediaSettings.VIDEO)
+                if (mediaType === MediaSettings.VIDEO)
                     return mediaCodecName;
-                else if (mediaType == MediaSettings.AUDIO)
+                else if (mediaType === MediaSettings.AUDIO)
                     return mediaCodecName + " " + samplerRate + " Hz";
             }
             color: JamiTheme.textColor

src/app/wizardview/components/AdvancedAccountSettings.qml

@@ -35,6 +35,25 @@ Rectangle {
     property bool icon1Hovered: false
     property bool icon2Hovered: false
 
+    onActiveFocusChanged: {
+        if (activeFocus) {
+            openedPassword = false;
+            openedNickname = false;
+            forcePasswordActiveFocus();
+        }
+    }
+
+    function forcePasswordActiveFocus() {
+        openedPassword = true;
+        passwordEdit.forceActiveFocus();
+    }
+
+    function forceProfileActiveFocus() {
+        openedPassword = false;
+        openedNickname = true;
+        displayNameLineEdit.forceActiveFocus();
+    }
+
     color: JamiTheme.secondaryBackgroundColor
     opacity: 0.93
 
@@ -192,8 +211,8 @@ Rectangle {
                                 Layout.alignment: Qt.AlignLeft
                                 Layout.fillWidth: true
 
-                                KeyNavigation.tab: passwordConfirmEdit
-                                KeyNavigation.down: passwordConfirmEdit
+                                KeyNavigation.up: passwordConfirmEdit
+                                KeyNavigation.down: KeyNavigation.up
                             }
 
                             PasswordTextEdit {
@@ -207,9 +226,15 @@ Rectangle {
                                 Layout.alignment: Qt.AlignLeft
                                 Layout.fillWidth: true
 
-                                KeyNavigation.tab: passwordEdit
                                 KeyNavigation.up: passwordEdit
-                                KeyNavigation.down: setButton
+                                KeyNavigation.down: KeyNavigation.up
+
+                                onActiveFocusChanged: {
+                                    if (!activeFocus) {
+                                        if (!setButton.enabled)
+                                            forceProfileActiveFocus();
+                                    }
+                                }
                             }
 
                             Text {
@@ -263,6 +288,15 @@ Rectangle {
                                     root.validatedPassword = passwordConfirmEdit.dynamicText;
                                     text = JamiStrings.setPasswordSuccess;
                                 }
+
+                                onActiveFocusChanged: {
+                                    if (!activeFocus) {
+                                        forceProfileActiveFocus();
+                                    }
+                                }
+
+                                KeyNavigation.up: passwordConfirmEdit
+                                KeyNavigation.down: passwordEdit
                             }
 
                             RowLayout {
@@ -559,6 +593,8 @@ Rectangle {
                         root.saveButtonClicked();
                         root.alias = displayNameLineEdit.dynamicText;
                     }
+
+                    //KeyNavigation.up: openedNickname ? displayNameLineEdit : passwordConfirmEdit
                 }
             }
         }

src/app/wizardview/components/CreateAccountPage.qml

@@ -370,10 +370,9 @@ Rectangle {
         anchors.top: parent.top
         anchors.margins: JamiTheme.wizardViewPageBackButtonMargins
 
-        KeyNavigation.tab: usernameEdit
+        KeyNavigation.tab: adviceBox
         KeyNavigation.up: advancedAccountSettingsPage
-
-        KeyNavigation.down: usernameEdit
+        KeyNavigation.down: KeyNavigation.tab
 
         onClicked: {
             adviceBox.checked = false;
@@ -416,6 +415,10 @@ Rectangle {
             advancedAccountSettingsPage.openedPassword = false;
             advancedAccountSettingsPage.openedNickname = false;
         }
+
+        KeyNavigation.tab: !createAccountStack.currentIndex ? usernameEdit : advancedAccountSettingsPage
+        KeyNavigation.up: backButton
+        KeyNavigation.down: KeyNavigation.tab
     }
 
     Item {

src/app/wizardview/components/CreateSIPAccountPage.qml

@@ -260,8 +260,7 @@ Rectangle {
                 spacing: JamiTheme.wizardViewPageLayoutSpacing
 
                 anchors.horizontalCenter: parent.horizontalCenter
-                anchors.top: parent.top
-                anchors.topMargin: JamiTheme.wizardViewLayoutTopMargin
+                anchors.verticalCenter: parent.verticalCenter
 
                 width: Math.max(508, root.width - 100)
 
@@ -288,6 +287,10 @@ Rectangle {
                     newItem: true
                     imageId: visible ? "temp" : ""
                     avatarSize: 150
+
+                    KeyNavigation.up: backButton
+                    KeyNavigation.down: displayNameLineEdit
+                    KeyNavigation.tab: KeyNavigation.down
                 }
 
                 ModalTextEdit {
@@ -297,6 +300,10 @@ Rectangle {
                     Layout.preferredWidth: Math.min(300, root.width - JamiTheme.preferredMarginSize * 2)
                     Layout.topMargin: 30
                     placeholderText: JamiStrings.enterNickname
+
+                    KeyNavigation.up: currentAccountAvatar
+                    KeyNavigation.down: backButton
+                    KeyNavigation.tab: KeyNavigation.down
                 }
 
                 Text {
@@ -328,8 +335,8 @@ Rectangle {
 
         preferredSize: JamiTheme.wizardViewPageBackButtonSize
 
-        KeyNavigation.up: personalizeAccount
-        KeyNavigation.down: sipServernameEdit
+        KeyNavigation.up: createAccountStack.currentIndex !== 0 ? displayNameLineEdit : personalizeAccount
+        KeyNavigation.down: createAccountStack.currentIndex !== 0 ? currentAccountAvatar : sipServernameEdit
         KeyNavigation.tab: KeyNavigation.down
 
         onClicked: {