[vlc-commits] [Git][videolan/vlc][master] 8 commits: qml: fix focus state handling in SpinBox

Steve Lhomme (@robUx4) gitlab at videolan.org
Fri Oct 20 08:29:57 UTC 2023



Steve Lhomme pushed to branch master at VideoLAN / VLC


Commits:
57ba4b49 by Prince Gupta at 2023-10-20T08:11:48+00:00
qml: fix focus state handling in SpinBox

removes invalid property accesses

- - - - -
b25306c4 by Prince Gupta at 2023-10-20T08:11:48+00:00
qml: use template for SpinBoxExt base

- - - - -
475ecf50 by Prince Gupta at 2023-10-20T08:11:48+00:00
qt: add chevron icons

- - - - -
625095e4 by Prince Gupta at 2023-10-20T08:11:48+00:00
qml: use chevron icons instead of unicode

- - - - -
b9ffe46a by Prince Gupta at 2023-10-20T08:11:48+00:00
qml: improve visual focus handling in SpinBox

- - - - -
acbc28d1 by Prince Gupta at 2023-10-20T08:11:48+00:00
qml: improve key handling in SpinBox

allow normal SpinBox shortcut (up and down) key when TextInput has focus

- - - - -
374f376f by Prince Gupta at 2023-10-20T08:11:48+00:00
qml: fix overlap between up down controls and background in SpinBox

- - - - -
3d0845df by Prince Gupta at 2023-10-20T08:11:48+00:00
qml: fix color assignment in SpinBox

- - - - -


7 changed files:

- modules/gui/qt/Makefile.am
- modules/gui/qt/pixmaps/VLCIcons.json
- modules/gui/qt/pixmaps/VLCIcons.ttf
- + modules/gui/qt/pixmaps/icons/ic_fluent_chevron_down.svg
- + modules/gui/qt/pixmaps/icons/ic_fluent_chevron_up.svg
- modules/gui/qt/style/VLCIcons.qml
- modules/gui/qt/widgets/qml/SpinBoxExt.qml


Changes:

=====================================
modules/gui/qt/Makefile.am
=====================================
@@ -711,6 +711,8 @@ libqt_plugin_la_RES = \
 	gui/qt/pixmaps/icons/ic_fluent_wifi_1.svg \
 	gui/qt/pixmaps/icons/ic_fluent_arrow_sort.svg \
 	gui/qt/pixmaps/icons/ic_fluent_filmstrip.svg \
+	gui/qt/pixmaps/icons/ic_fluent_chevron_up.svg \
+	gui/qt/pixmaps/icons/ic_fluent_chevron_down.svg \
 	gui/qt/pixmaps/icons/tv.svg \
 	gui/qt/pixmaps/icons/tvtelx.svg \
 	gui/qt/pixmaps/icons/visualization.svg \


=====================================
modules/gui/qt/pixmaps/VLCIcons.json
=====================================
@@ -67,6 +67,8 @@
         {"key":"topbar_network", "path": "./icons/ic_fluent_wifi_1.svg"},
         {"key":"topbar_sort", "path": "./icons/ic_fluent_arrow_sort.svg"},
         {"key":"topbar_video", "path": "./icons/ic_fluent_filmstrip.svg"},
+        {"key":"chevron_up", "path": "./icons/ic_fluent_chevron_up.svg"},
+        {"key":"chevron_down", "path": "./icons/ic_fluent_chevron_down.svg"},
         {"key":"tv", "path": "./icons/tv.svg"},
         {"key":"tvtelx", "path": "./icons/tvtelx.svg"},
         {"key":"transparency", "path": "./icons/transparency.svg"},


=====================================
modules/gui/qt/pixmaps/VLCIcons.ttf
=====================================
Binary files a/modules/gui/qt/pixmaps/VLCIcons.ttf and b/modules/gui/qt/pixmaps/VLCIcons.ttf differ


=====================================
modules/gui/qt/pixmaps/icons/ic_fluent_chevron_down.svg
=====================================
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.36612 16.1161C7.87796 16.6043 7.87796 17.3957 8.36612 17.8839L23.1161 32.6339C23.6043 33.122 24.3957 33.122 24.8839 32.6339L39.6339 17.8839C40.122 17.3957 40.122 16.6043 39.6339 16.1161C39.1457 15.628 38.3543 15.628 37.8661 16.1161L24 29.9822L10.1339 16.1161C9.64573 15.628 8.85427 15.628 8.36612 16.1161Z" fill="#212121"/>
+</svg>


=====================================
modules/gui/qt/pixmaps/icons/ic_fluent_chevron_up.svg
=====================================
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.6339 31.8839C39.1457 32.372 38.3543 32.372 37.8661 31.8839L24 18.0178L10.1339 31.8839C9.64573 32.372 8.85427 32.372 8.36612 31.8839C7.87796 31.3957 7.87796 30.6043 8.36612 30.1161L23.1161 15.3661C23.6043 14.878 24.3957 14.878 24.8839 15.3661L39.6339 30.1161C40.122 30.6043 40.122 31.3957 39.6339 31.8839Z" fill="#212121"/>
+</svg>


=====================================
modules/gui/qt/style/VLCIcons.qml
=====================================
@@ -76,19 +76,21 @@ QtObject {
     readonly property string topbar_network : "\ue03c"
     readonly property string topbar_sort : "\ue03d"
     readonly property string topbar_video : "\ue03e"
-    readonly property string tv : "\ue03f"
-    readonly property string tvtelx : "\ue040"
-    readonly property string transparency : "\ue041"
-    readonly property string circle : "\ue042"
-    readonly property string visualization : "\ue043"
-    readonly property string volume_high : "\ue044"
-    readonly property string volume_low : "\ue045"
-    readonly property string volume_medium : "\ue046"
-    readonly property string volume_muted : "\ue047"
-    readonly property string volume_zero : "\ue048"
-    readonly property string window_close : "\ue049"
-    readonly property string window_maximize : "\ue04a"
-    readonly property string window_minimize : "\ue04b"
-    readonly property string window_restore : "\ue04c"
+    readonly property string chevron_up : "\ue03f"
+    readonly property string chevron_down : "\ue040"
+    readonly property string tv : "\ue041"
+    readonly property string tvtelx : "\ue042"
+    readonly property string transparency : "\ue043"
+    readonly property string circle : "\ue044"
+    readonly property string visualization : "\ue045"
+    readonly property string volume_high : "\ue046"
+    readonly property string volume_low : "\ue047"
+    readonly property string volume_medium : "\ue048"
+    readonly property string volume_muted : "\ue049"
+    readonly property string volume_zero : "\ue04a"
+    readonly property string window_close : "\ue04b"
+    readonly property string window_maximize : "\ue04c"
+    readonly property string window_minimize : "\ue04d"
+    readonly property string window_restore : "\ue04e"
 
 }


=====================================
modules/gui/qt/widgets/qml/SpinBoxExt.qml
=====================================
@@ -18,18 +18,14 @@
 
 import QtQuick 2.12
 import QtQuick.Controls 2.12
+import QtQuick.Templates 2.12 as T
 
 import org.videolan.vlc 0.1
 
 import "qrc:///style/"
 
-SpinBox {
+T.SpinBox {
     id: control
-    font.pixelSize: VLCStyle.fontSize_large
-
-    padding: 0
-    leftPadding: padding + (control.mirrored ? up.indicator.width : 0)
-    rightPadding: padding + (control.mirrored ? 0 : up.indicator.width)
 
     property color textColor: theme.fg.primary
     property color bgColor: theme.bg.primary
@@ -41,10 +37,28 @@ SpinBox {
         colorSet: ColorContext.SpinBox
 
         enabled: control.enabled
-        focused: control.visualFocus
+        focused: (control.visualFocus || textInput.activeFocus)
         hovered: control.hovered
     }
 
+    font.pixelSize: VLCStyle.fontSize_large
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                              contentItem.implicitWidth + 2 * padding +
+                              up.implicitIndicatorWidth +
+                              down.implicitIndicatorWidth)
+
+    implicitHeight: Math.max(implicitContentHeight + topPadding + bottomPadding,
+                           implicitBackgroundHeight,
+                           up.implicitIndicatorHeight,
+                           down.implicitIndicatorHeight)
+
+    padding: VLCStyle.margin_xxsmall
+    leftPadding: padding + (control.mirrored ? up.indicator.width : 0) + control.borderWidth
+    rightPadding: padding + (control.mirrored ? 0 : up.indicator.width) + control.borderWidth
+    topPadding: padding + control.borderWidth
+    bottomPadding: padding + control.borderWidth
+
     Keys.priority: Keys.AfterItem
     Keys.onPressed: Navigation.defaultKeyAction(event)
 
@@ -65,6 +79,8 @@ SpinBox {
     }
 
     contentItem: TextInput {
+        id: textInput
+
         // NOTE: This is required for InterfaceWindowHandler::applyKeyEvent.
         property bool visualFocus: control.activeFocus
 
@@ -85,33 +101,33 @@ SpinBox {
 
         Keys.priority: Keys.AfterItem
 
-        Keys.onPressed: Navigation.defaultKeyAction(event)
-        Keys.onReleased: Navigation.defaultKeyReleaseAction(event)
-
         Navigation.parentItem: control
-
     }
+
     up.indicator: Rectangle {
-        x: control.mirrored ? 0: parent.width - width
+        x: control.mirrored ? control.borderWidth : parent.width - width - control.borderWidth
         height: parent.height / 2
         implicitWidth: VLCStyle.dp(15, VLCStyle.scale)
         implicitHeight: VLCStyle.dp(10, VLCStyle.scale)
         anchors.top: parent.top
+        anchors.topMargin: control.borderWidth
 
-        color: downTheme.bg.primary
+        color: upTheme.bg.primary
 
         ColorContext {
             id: upTheme
             colorSet: ColorContext.ButtonStandard
 
             enabled: control.enabled
-            focused: control.up.visualFocus
             hovered: control.up.hovered
             pressed: control.up.pressed
+
+            // root control handles focused state
+            focused: false
         }
 
-        Text {
-            text: "\u2227" // ^ logical AND
+        IconLabel {
+            text: VLCIcons.chevron_up
             font.pixelSize: control.font.pixelSize * 2
             color: upTheme.fg.primary
             font.bold: true
@@ -123,11 +139,12 @@ SpinBox {
     }
 
     down.indicator: Rectangle {
-        x: control.mirrored ? 0 : parent.width - width
+        x: control.mirrored ? control.borderWidth : parent.width - width - control.borderWidth
         height: parent.height / 2
         implicitWidth: VLCStyle.dp(15, VLCStyle.scale)
         implicitHeight: VLCStyle.dp(10, VLCStyle.scale)
         anchors.bottom: parent.bottom
+        anchors.bottomMargin: control.borderWidth
         color: downTheme.bg.primary
 
         ColorContext {
@@ -135,13 +152,15 @@ SpinBox {
             colorSet: ColorContext.ButtonStandard
 
             enabled: control.enabled
-            focused: control.down.visualFocus
             hovered: control.down.hovered
             pressed: control.down.pressed
+
+            // root control handles focused state
+            focused: false
         }
 
-        Text {
-            text: "\u2228" // ^ logical OR
+        IconLabel {
+            text: VLCIcons.chevron_down
             font.pixelSize: control.font.pixelSize * 2
             color: downTheme.fg.primary
             font.bold: true



View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/c576d84c3ceab8fd350f7fba0c1ca8392f515352...3d0845dfd6371f94671bf72f7bf1aa1764b04c52

-- 
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/c576d84c3ceab8fd350f7fba0c1ca8392f515352...3d0845dfd6371f94671bf72f7bf1aa1764b04c52
You're receiving this email because of your account on code.videolan.org.


VideoLAN code repository instance


More information about the vlc-commits mailing list