[vlc-commits] qml: scale interface using user scale factor

Pierre Lamot git at videolan.org
Fri Jun 19 09:54:12 CEST 2020


vlc | branch: master | Pierre Lamot <pierre at videolabs.io> | Mon May 11 11:53:55 2020 +0200| [52febc5c3f822346196fdecb3d0db78fe4308af6] | committer: Pierre Lamot

qml: scale interface using user scale factor

> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=52febc5c3f822346196fdecb3d0db78fe4308af6
---

 .../qt/dialogs/toolbar/qml/EditorDNDDelegate.qml   |   2 +-
 .../gui/qt/dialogs/toolbar/qml/EditorDNDView.qml   |   2 +-
 .../qt/medialibrary/qml/VideoInfoExpandPanel.qml   |   2 +-
 modules/gui/qt/player/qml/SliderBar.qml            |  12 +-
 modules/gui/qt/player/qml/TeletextWidget.qml       |   2 +-
 modules/gui/qt/player/qml/VolumeWidget.qml         |  18 +--
 modules/gui/qt/style/VLCStyle.qml                  | 175 +++++++++++----------
 modules/gui/qt/widgets/qml/SpinBoxExt.qml          |  12 +-
 modules/gui/qt/widgets/qml/VideoProgressBar.qml    |   2 +-
 9 files changed, 117 insertions(+), 110 deletions(-)

diff --git a/modules/gui/qt/dialogs/toolbar/qml/EditorDNDDelegate.qml b/modules/gui/qt/dialogs/toolbar/qml/EditorDNDDelegate.qml
index c3ac8f657b..fab0acc51f 100644
--- a/modules/gui/qt/dialogs/toolbar/qml/EditorDNDDelegate.qml
+++ b/modules/gui/qt/dialogs/toolbar/qml/EditorDNDDelegate.qml
@@ -39,7 +39,7 @@ MouseArea {
 
     Rectangle {
         z: 1
-        width: 2 * scale
+        width: VLCStyle.dp(2)
         height: parent.height
         anchors {
             left: parent.left
diff --git a/modules/gui/qt/dialogs/toolbar/qml/EditorDNDView.qml b/modules/gui/qt/dialogs/toolbar/qml/EditorDNDView.qml
index 997148833a..6d907ce5f6 100644
--- a/modules/gui/qt/dialogs/toolbar/qml/EditorDNDView.qml
+++ b/modules/gui/qt/dialogs/toolbar/qml/EditorDNDView.qml
@@ -46,7 +46,7 @@ ListView {
         property bool dropVisible: false
         Rectangle {
             z: 2
-            width: 2 * scale
+            width: VLCStyle.dp(2)
             height: parent.height
             anchors {
                 left: parent.left
diff --git a/modules/gui/qt/medialibrary/qml/VideoInfoExpandPanel.qml b/modules/gui/qt/medialibrary/qml/VideoInfoExpandPanel.qml
index 45e8002124..544004b8ce 100644
--- a/modules/gui/qt/medialibrary/qml/VideoInfoExpandPanel.qml
+++ b/modules/gui/qt/medialibrary/qml/VideoInfoExpandPanel.qml
@@ -222,7 +222,7 @@ Widgets.NavigableFocusScope {
                     Rectangle {
                         z: 2
                         anchors.fill: parent
-                        border.width: 2 * VLCStyle.scale
+                        border.width: VLCStyle.dp(2)
                         border.color: VLCStyle.colors.accent
                         color: "transparent"
                         visible: infoPanel.activeFocus
diff --git a/modules/gui/qt/player/qml/SliderBar.qml b/modules/gui/qt/player/qml/SliderBar.qml
index f1c89d95cc..d4e5d11b0b 100644
--- a/modules/gui/qt/player/qml/SliderBar.qml
+++ b/modules/gui/qt/player/qml/SliderBar.qml
@@ -44,13 +44,13 @@ Slider {
         property real location: 0
         property real position: location/control.width
 
-        y: -35 * VLCStyle.scale
+        y: VLCStyle.dp(-35)
         x: location - (timeIndicatorRect.width / 2)
         visible: control.hovered
 
         Rectangle {
-            width: 10 * VLCStyle.scale
-            height: 10 * VLCStyle.scale
+            width: VLCStyle.dp(10)
+            height: VLCStyle.dp(10)
 
             anchors.horizontalCenter: timeIndicatorRect.horizontalCenter
             anchors.verticalCenter: timeIndicatorRect.bottom
@@ -62,7 +62,7 @@ Slider {
         Rectangle {
             id: timeIndicatorRect
             width: childrenRect.width
-            height: 20 * VLCStyle.scale
+            height: VLCStyle.dp(20)
             color: VLCStyle.colors.bgAlt
 
             Text {
@@ -142,7 +142,7 @@ Slider {
 
         Rectangle {
             id: bufferRect
-            property int bufferAnimWidth: 100 * VLCStyle.scale
+            property int bufferAnimWidth: VLCStyle.dp(100)
             property int bufferAnimPosition: 0
             property int bufferFrames: 1000
             property alias animateLoading: loadingAnim.running
@@ -225,7 +225,7 @@ Slider {
                     property real position: model.position === undefined ? 0.0 : model.position
 
                     color: VLCStyle.colors.seekpoint
-                    width: 1 * VLCStyle.scale
+                    width: VLCStyle.dp(1)
                     height: control.barHeight
                     x: sliderRect.width * seekpointsRect.position
                 }
diff --git a/modules/gui/qt/player/qml/TeletextWidget.qml b/modules/gui/qt/player/qml/TeletextWidget.qml
index 6f64447664..f0c5fa36a2 100644
--- a/modules/gui/qt/player/qml/TeletextWidget.qml
+++ b/modules/gui/qt/player/qml/TeletextWidget.qml
@@ -42,7 +42,7 @@ FocusScope{
 
     RowLayout{
         id: teleWidget
-        width: autohide ? 0 : VLCStyle.widthTeletext * scale
+        width: autohide ? 0 : VLCStyle.widthTeletext
 
         spacing: 0
 
diff --git a/modules/gui/qt/player/qml/VolumeWidget.qml b/modules/gui/qt/player/qml/VolumeWidget.qml
index 4b73f38d15..4cd0ddb9b0 100644
--- a/modules/gui/qt/player/qml/VolumeWidget.qml
+++ b/modules/gui/qt/player/qml/VolumeWidget.qml
@@ -62,10 +62,10 @@ FocusScope{
         Slider
         {
             id: volControl
-            width: 100 * VLCStyle.scale
+            width: VLCStyle.dp(100)
             height: parent.height
 
-            anchors.margins: 5 * VLCStyle.scale
+            anchors.margins: VLCStyle.dp(5)
             from: 0
             to: maxvolpos
             stepSize: 0.05
@@ -118,10 +118,10 @@ FocusScope{
                 x: volControl.leftPadding
                 y: volControl.topPadding + volControl.availableHeight / 2 - height / 2
                 implicitWidth: parent.width
-                implicitHeight: 4 * VLCStyle.scale
+                implicitHeight: VLCStyle.dp(4)
                 height: implicitHeight
                 width: volControl.availableWidth
-                radius: 4 * VLCStyle.scale
+                radius: VLCStyle.dp(4)
                 color: VLCStyle.colors.volsliderbg
 
                 MouseArea {
@@ -129,7 +129,7 @@ FocusScope{
                     property bool isEntered: false
 
                     width: parent.width
-                    height: parent.height + 60
+                    height: parent.height + VLCStyle.dp(60)
                     anchors.verticalCenter: parent.verticalCenter
                     hoverEnabled: true
 
@@ -152,7 +152,7 @@ FocusScope{
                     id: filled
                     width: volControl.visualPosition * sliderBg.width
                     height: parent.height
-                    radius: 4 * VLCStyle.scale
+                    radius: VLCStyle.dp(4)
                     color: widgetfscope.color
                     layer.enabled: (volControl.hovered || volControl.activeFocus)
                     layer.effect: LinearGradient {
@@ -169,9 +169,9 @@ FocusScope{
                 Rectangle{
                     id: tickmark
                     x : parent.width * volControl.fullvolpos
-                    width: 1 * VLCStyle.scale
+                    width: VLCStyle.dp(1)
                     height: parent.height
-                    radius: 2 * VLCStyle.scale
+                    radius: VLCStyle.dp(2)
                     color: widgetfscope.color
                 }
             }
@@ -180,7 +180,7 @@ FocusScope{
                 x: volControl.leftPadding + volControl.visualPosition * (volControl.availableWidth - width)
                 y: volControl.topPadding + volControl.availableHeight / 2 - height / 2
 
-                implicitWidth: 8 * VLCStyle.scale
+                implicitWidth: VLCStyle.dp(8)
                 implicitHeight: implicitWidth
                 radius: width * 0.5
                 visible: (volControl.hovered || volControl.activeFocus)
diff --git a/modules/gui/qt/style/VLCStyle.qml b/modules/gui/qt/style/VLCStyle.qml
index 1a010b769b..e951ea8506 100644
--- a/modules/gui/qt/style/VLCStyle.qml
+++ b/modules/gui/qt/style/VLCStyle.qml
@@ -21,27 +21,27 @@ import QtQuick 2.11
 Item {
     id: vlc_style
 
-    property double scale: 1.0
+    readonly property real scale: mainInterface.intfScaleFactor
 
-    TextMetrics { id: fontMetrics_xxsmall; font.pixelSize: 6 * scale;  text: "lq"}
-    TextMetrics { id: fontMetrics_xsmall;  font.pixelSize: 8 * scale;  text: "lq"}
-    TextMetrics { id: fontMetrics_small;   font.pixelSize: 10 * scale; text: "lq"}
-    TextMetrics { id: fontMetrics_normal;  font.pixelSize: 12 * scale; text: "lq"}
-    TextMetrics { id: fontMetrics_large;   font.pixelSize: 14 * scale; text: "lq"}
-    TextMetrics { id: fontMetrics_xlarge;  font.pixelSize: 16 * scale; text: "lq"}
-    TextMetrics { id: fontMetrics_xxlarge;  font.pixelSize: 20 * scale; text: "lq"}
-    TextMetrics { id: fontMetrics_xxxlarge;  font.pixelSize: 30 * scale; text: "lq"}
+    TextMetrics { id: fontMetrics_xxsmall; font.pixelSize: dp(6, scale);  text: "lq"}
+    TextMetrics { id: fontMetrics_xsmall;  font.pixelSize: dp(8, scale);  text: "lq"}
+    TextMetrics { id: fontMetrics_small;   font.pixelSize: dp(10, scale); text: "lq"}
+    TextMetrics { id: fontMetrics_normal;  font.pixelSize: dp(12, scale); text: "lq"}
+    TextMetrics { id: fontMetrics_large;   font.pixelSize: dp(14, scale); text: "lq"}
+    TextMetrics { id: fontMetrics_xlarge;  font.pixelSize: dp(16, scale); text: "lq"}
+    TextMetrics { id: fontMetrics_xxlarge;  font.pixelSize: dp(20, scale); text: "lq"}
+    TextMetrics { id: fontMetrics_xxxlarge;  font.pixelSize: dp(30, scale); text: "lq"}
 
     property VLCColors colors: VLCColors {}
 
     // Sizes
-    property double margin_xxxsmall: 2 * scale;
-    property double margin_xxsmall: 4 * scale;
-    property double margin_xsmall: 8 * scale;
-    property double margin_small: 12 * scale;
-    property double margin_normal: 16 * scale;
-    property double margin_large: 24 * scale;
-    property double margin_xlarge: 32 * scale;
+    property double margin_xxxsmall: dp(2, scale);
+    property double margin_xxsmall: dp(4, scale);
+    property double margin_xsmall: dp(8, scale);
+    property double margin_small: dp(12, scale);
+    property double margin_normal: dp(16, scale);
+    property double margin_large: dp(24, scale);
+    property double margin_xlarge: dp(32, scale);
 
     property int fontSize_xsmall: fontMetrics_xsmall.font.pixelSize
     property int fontSize_small:  fontMetrics_small.font.pixelSize
@@ -60,86 +60,86 @@ Item {
     property int fontHeight_xxxlarge: Math.ceil(fontMetrics_xxxlarge.height)
 
 
-    property int heightAlbumCover_xsmall: 32 * scale;
-    property int heightAlbumCover_small: 64 * scale;
-    property int heightAlbumCover_normal: 128 * scale;
-    property int heightAlbumCover_large: 255 * scale;
-    property int heightAlbumCover_xlarge: 512 * scale;
+    property int heightAlbumCover_xsmall: dp(32, scale);
+    property int heightAlbumCover_small: dp(64, scale);
+    property int heightAlbumCover_normal: dp(128, scale);
+    property int heightAlbumCover_large: dp(255, scale);
+    property int heightAlbumCover_xlarge: dp(512, scale);
 
-    property int listAlbumCover_height: 32 * scale
+    property int listAlbumCover_height: dp(32, scale)
     property int listAlbumCover_width: listAlbumCover_height * 16.0/9
-    property int trackListAlbumCover_width: 32 * scale
-    property int trackListAlbumCover_heigth: 32 * scale
-
-    property int icon_xsmall: 8 * scale;
-    property int icon_small: 16 * scale;
-    property int icon_normal: 32 * scale;
-    property int icon_medium: 48 * scale;
-    property int icon_large: 64 * scale;
-    property int icon_xlarge: 128 * scale;
-
-    property int icon_topbar: 38 * scale
-
-    property int play_cover_small: 24 * scale
-
-    property int cover_xxsmall: 32 * scale;
-    property int cover_xsmall: 64 * scale;
-    property int cover_small: 96 * scale;
-    property int cover_normal: 128 * scale;
-    property int cover_large: 160 * scale;
-    property int cover_xlarge: 192 * scale;
-
-    property int heightBar_xxxsmall: 2 * scale;
-    property int heightBar_xxsmall: 4 * scale;
-    property int heightBar_xsmall: 8 * scale;
-    property int heightBar_small: 16 * scale;
-    property int heightBar_normal: 32 * scale;
-    property int heightBar_medium: 48 * scale;
-    property int heightBar_large: 64 * scale;
-    property int heightBar_xlarge: 128 * scale;
-    property int heightBar_xxlarge: 256 * scale;
-
-    property int minWindowWidth: 500 * scale;
-    property int maxWidthPlaylist: 400 * scale;
-    property int defaultWidthPlaylist: 300 * scale;
-    property int closedWidthPlaylist: 20 * scale;
-
-    property int widthSearchInput: 200 * scale;
-    property int widthSortBox: 150 * scale;
-    property int widthTeletext: 280 * scale;
-    property int widthExtendedSpacer: 128 * scale;
-    property int heightInput: 22 * scale;
-
-    property int scrollbarWidth: 4 * scale;
-    property int scrollbarHeight: 100 * scale;
+    property int trackListAlbumCover_width: dp(32, scale)
+    property int trackListAlbumCover_heigth: dp(32, scale)
+
+    property int icon_xsmall: dp(8, scale);
+    property int icon_small: dp(16, scale);
+    property int icon_normal: dp(32, scale);
+    property int icon_medium: dp(48, scale);
+    property int icon_large: dp(64, scale);
+    property int icon_xlarge: dp(128, scale);
+
+    property int icon_topbar: dp(38, scale)
+
+    property int play_cover_small: dp(24, scale)
+
+    property int cover_xxsmall: dp(32, scale);
+    property int cover_xsmall: dp(64, scale);
+    property int cover_small: dp(96, scale);
+    property int cover_normal: dp(128, scale);
+    property int cover_large: dp(160, scale);
+    property int cover_xlarge: dp(192, scale);
+
+    property int heightBar_xxxsmall: dp(2, scale);
+    property int heightBar_xxsmall: dp(4, scale);
+    property int heightBar_xsmall: dp(8, scale);
+    property int heightBar_small: dp(16, scale);
+    property int heightBar_normal: dp(32, scale);
+    property int heightBar_medium: dp(48, scale);
+    property int heightBar_large: dp(64, scale);
+    property int heightBar_xlarge: dp(128, scale);
+    property int heightBar_xxlarge: dp(256, scale);
+
+    property int minWindowWidth: dp(500, scale);
+    property int maxWidthPlaylist: dp(400, scale);
+    property int defaultWidthPlaylist: dp(300, scale);
+    property int closedWidthPlaylist: dp(20, scale);
+
+    property int widthSearchInput: dp(200, scale);
+    property int widthSortBox: dp(150, scale);
+    property int widthTeletext: dp(280, scale);
+    property int widthExtendedSpacer: dp(128, scale);
+    property int heightInput: dp(22, scale);
+
+    property int scrollbarWidth: dp(4, scale);
+    property int scrollbarHeight: dp(100, scale);
 
     property int selectedBorder: 2
-    property real video_normal_height: 90 * scale;
-    property real video_large_height: 120 * scale;
-    property real video_small_height: 70 * scale;
+    property real video_normal_height: dp(90, scale);
+    property real video_large_height:  dp(120, scale);
+    property real video_small_height:  dp(70, scale);
     property real video_normal_width: video_normal_height * (16/10);
     property real video_large_width: video_large_height * (16/10);
     property real video_small_width: video_small_height * (16/10);
 
-    property real network_normal: 100 * scale;
+    property real network_normal: dp(100, scale)
 
-    property int miniPlayerHeight: 60 * scale;
+    property int miniPlayerHeight: dp(60, scale)
 
-    property int expandAlbumTracksHeight: 200 * scale;
+    property int expandAlbumTracksHeight: dp(200, scale)
 
     //combobox
-    property int combobox_width_small: 64 * scale
-    property int combobox_width_normal: 96 * scale
-    property int combobox_width_large: 128 * scale
+    property int combobox_width_small: dp(64, scale)
+    property int combobox_width_normal: dp(96, scale)
+    property int combobox_width_large: dp(128, scale)
 
-    property int combobox_height_small: 16 * scale
-    property int combobox_height_normal: 24 * scale
-    property int combobox_height_large: 30 * scale
+    property int combobox_height_small: dp(16, scale)
+    property int combobox_height_normal: dp(24, scale)
+    property int combobox_height_large: dp(30, scale)
 
     //button
-    property int button_width_small: 64 * scale
-    property int button_width_normal: 96 * scale
-    property int button_width_large: 128 * scale
+    property int button_width_small: dp(64, scale)
+    property int button_width_normal: dp(96, scale)
+    property int button_width_large: dp(128, scale)
 
     //GridItem
     property int gridItem_network_height: VLCStyle.network_normal + VLCStyle.fontHeight_normal + VLCStyle.fontHeight_small + VLCStyle.margin_xxsmall * 4
@@ -151,10 +151,10 @@ Item {
     property int gridItem_video_height: VLCStyle.video_normal_height + VLCStyle.fontHeight_normal + VLCStyle.fontHeight_small  + VLCStyle.margin_xxsmall * 4
     property int gridItem_video_width: VLCStyle.video_normal_width + VLCStyle.margin_xxsmall * 4
 
-    property int column_width: 114 * scale
-    property int column_margin_width: 32 * scale
+    property int column_width: dp(114, scale)
+    property int column_margin_width: dp(32, scale)
 
-    property int table_cover_border: 2 * scale
+    property int table_cover_border: dp(2, scale)
 
     //global application margin "safe area"
     property int applicationHorizontalMargin: 0
@@ -174,6 +174,13 @@ Item {
     property url noArtArtist: "qrc:///noart_artist.svg";
     property url noArtArtistSmall: "qrc:///noart_artist_small.svg";
 
+    //device pixel
+    function dp(px, scale) {
+        if (typeof scale === "undefined")
+            scale = mainInterface.intfScaleFactor
+        return Math.max(1, Math.round(px * scale))
+    }
+
     function colWidth(nb) {
       return nb * VLCStyle.column_width + ( nb - 1 ) * VLCStyle.column_margin_width;
     }
diff --git a/modules/gui/qt/widgets/qml/SpinBoxExt.qml b/modules/gui/qt/widgets/qml/SpinBoxExt.qml
index 06fbe252de..6ec44ec83e 100644
--- a/modules/gui/qt/widgets/qml/SpinBoxExt.qml
+++ b/modules/gui/qt/widgets/qml/SpinBoxExt.qml
@@ -30,8 +30,8 @@ SpinBox{
     property color borderColor:  VLCStyle.colors.buttonBorder
 
     background: Rectangle {
-        implicitWidth: 4 * scale
-        implicitHeight: 32 * scale
+        implicitWidth: VLCStyle.dp(4)
+        implicitHeight: VLCStyle.dp(32)
         border.color: control.borderColor
         color: control.bgColor
     }
@@ -52,8 +52,8 @@ SpinBox{
     up.indicator: Rectangle {
         x: parent.width - width
         height: parent.height / 2
-        implicitWidth: 15 * scale
-        implicitHeight: 10 * scale
+        implicitWidth: VLCStyle.dp(15)
+        implicitHeight: VLCStyle.dp(10)
         anchors.top: parent.top
         color: control.up.pressed ? VLCStyle.colors.bgHover : control.bgColor
         border.color: control.borderColor
@@ -72,8 +72,8 @@ SpinBox{
     down.indicator: Rectangle {
         x: parent.width - width
         height: parent.height / 2
-        implicitWidth: 15 * scale
-        implicitHeight: 10 * scale
+        implicitWidth: VLCStyle.dp(15)
+        implicitHeight: VLCStyle.dp(10)
         anchors.bottom: parent.bottom
         color: control.down.pressed ? VLCStyle.colors.bgHover : control.bgColor
         border.color: control.borderColor
diff --git a/modules/gui/qt/widgets/qml/VideoProgressBar.qml b/modules/gui/qt/widgets/qml/VideoProgressBar.qml
index 464f2092e0..f078912fac 100644
--- a/modules/gui/qt/widgets/qml/VideoProgressBar.qml
+++ b/modules/gui/qt/widgets/qml/VideoProgressBar.qml
@@ -23,7 +23,7 @@ import "qrc:///style/"
 ProgressBar {
     id: progressBar
     background: Rectangle {
-        implicitHeight: 2 * VLCStyle.scale
+        implicitHeight: VLCStyle.dp(2)
         color: VLCStyle.colors.text
     }
     contentItem: Item {



More information about the vlc-commits mailing list