[vlc-commits] [Git][videolan/vlc][master] qml/IconToolButton: Improve focus rectangle visibility

[Jean-Baptiste Kempf]

Jean-Baptiste Kempf pushed to branch master at VideoLAN / VLC


Commits:
7d83226e by Benjamin Arnaud at 2021-06-24T15:31:58+00:00
qml/IconToolButton: Improve focus rectangle visibility

And refactor color settings.

- - - - -


6 changed files:

- modules/gui/qt/player/qml/ButtonsLayout.qml
- modules/gui/qt/player/qml/Player.qml
- modules/gui/qt/player/qml/TopBar.qml
- modules/gui/qt/player/qml/VolumeWidget.qml
- modules/gui/qt/style/VLCColors.qml
- modules/gui/qt/widgets/qml/IconToolButton.qml


Changes:

=====================================
modules/gui/qt/player/qml/ButtonsLayout.qml
=====================================
@@ -108,6 +108,8 @@ Widgets.NavigableFocusScope {
                                     return VLCStyle.colors.setColorAlpha(colors.playerBg, 0.8); })
                             if (!!buttonloader.item.borderColor)
                                 buttonloader.item.borderColor = Qt.binding(function() { return colors.playerBorder; })
+                            if (!!buttonloader.item.colorFocus)
+                                buttonloader.item.colorFocus = Qt.binding(function() { return colors.bgFocus; })
                     }
 
                     if (index > 0)


=====================================
modules/gui/qt/player/qml/Player.qml
=====================================
@@ -465,6 +465,7 @@ Widgets.NavigableFocusScope {
                         onClicked: player.jumpBwd()
                         text: i18n.qtr("Step back")
                         color: rootPlayer.colors.playerFg
+                        colorFocus: rootPlayer.colors.bgFocus
                     }
 
                     Widgets.IconToolButton {
@@ -473,6 +474,7 @@ Widgets.NavigableFocusScope {
                         onClicked: player.toggleVisualization()
                         text: i18n.qtr("Visualization")
                         color: rootPlayer.colors.playerFg
+                        colorFocus: rootPlayer.colors.bgFocus
                     }
 
                     Widgets.IconToolButton{
@@ -481,6 +483,7 @@ Widgets.NavigableFocusScope {
                         onClicked: player.jumpFwd()
                         text: i18n.qtr("Step forward")
                         color: rootPlayer.colors.playerFg
+                        colorFocus: rootPlayer.colors.bgFocus
                     }
                 }
             }


=====================================
modules/gui/qt/player/qml/TopBar.qml
=====================================
@@ -147,6 +147,7 @@ Widgets.NavigableFocusScope{
             iconText: VLCIcons.topbar_previous
             text: i18n.qtr("Back")
             color: topFocusScope.colors.playerFg
+            colorFocus: topFocusScope.colors.bgFocus
             focus: true
             KeyNavigation.right: menuSelector
             onClicked: {
@@ -253,6 +254,7 @@ Widgets.NavigableFocusScope{
             iconText: VLCIcons.ellipsis
             text: i18n.qtr("Menu")
             color: rootPlayer.colors.playerFg
+            colorFocus: rootPlayer.colors.bgFocus
             property bool acceptFocus: true
 
             onClicked: contextMenu.popup(this.mapToGlobal(0, height))
@@ -278,6 +280,7 @@ Widgets.NavigableFocusScope{
             iconText: VLCIcons.playlist
             text: i18n.qtr("Playlist")
             color: rootPlayer.colors.playerFg
+            colorFocus: rootPlayer.colors.bgFocus
             focus: false
 
             property bool acceptFocus: true


=====================================
modules/gui/qt/player/qml/VolumeWidget.qml
=====================================
@@ -68,6 +68,7 @@ FocusScope{
                     VLCIcons.volume_high
             text: i18n.qtr("Mute")
             color: widgetfscope.color
+            colorFocus: colors.bgFocus
             onClicked: player.muted = !player.muted
             KeyNavigation.right: volControl
 


=====================================
modules/gui/qt/style/VLCColors.qml
=====================================
@@ -176,6 +176,7 @@ Item {
                 bgHoverText: text
                 bgHoverInactive: "#3daee9"
                 bgHoverTextInactive: text
+                bgFocus: "black"
 
                 button: "#eff0f1";
                 buttonText: "#232627";
@@ -210,6 +211,7 @@ Item {
                 bgHoverText: text
                 bgHoverInactive: "#3daee9"
                 bgHoverTextInactive: text
+                bgFocus: "white"
                 button: "#31363b"
                 buttonText: "#eff0f1"
                 buttonBorder: "#575b5f"


=====================================
modules/gui/qt/widgets/qml/IconToolButton.qml
=====================================
@@ -32,6 +32,7 @@ ToolButton {
     property alias color: backgroundHover.foregroundColor
     property color colorDisabled: VLCStyle.colors.textInactive
     property color colorOverlay: "transparent"
+    property color colorFocus: VLCStyle.colors.bgFocus
     property string textOverlay: ""
     property bool borderEnabled: false
     property bool backgroundVisible: backgroundHover.active
@@ -58,7 +59,7 @@ ToolButton {
         Label {
             id: text
             text: control.iconText
-            color: control.enabled ? backgroundHover.foregroundColor : control.colorDisabled
+            color: (control.enabled) ? control.color : control.colorDisabled
 
             anchors.centerIn: parent
 
@@ -89,7 +90,7 @@ ToolButton {
 
             Label {
                 text: VLCIcons.active_indicator
-                color: control.enabled ? backgroundHover.foregroundColor : control.colorDisabled
+                color: (control.enabled) ? control.color : control.colorDisabled
                 visible: !control.paintOnly && control.checked
 
                 anchors.centerIn: parent
@@ -109,6 +110,10 @@ ToolButton {
             anchors.fill: parent
 
             visible: control.activeFocus
+
+            // NOTE: This ensures the focus rectangle stays visible when switching between light
+            //       and dark theme on the player view.
+            border.color: control.colorFocus
         }
     }
 



View it on GitLab: https://code.videolan.org/videolan/vlc/-/commit/7d83226e5ff3f9b5a0c9a9b6bb8ffa95eaac784d

-- 
View it on GitLab: https://code.videolan.org/videolan/vlc/-/commit/7d83226e5ff3f9b5a0c9a9b6bb8ffa95eaac784d
You're receiving this email because of your account on code.videolan.org.