[vlc-devel] [PATCH 2/2] qml: scale interface using user scale factor
Pierre Lamot
pierre at videolabs.io
Tue Jun 9 18:51:29 CEST 2020
---
.../dialogs/toolbar/qml/EditorDNDDelegate.qml | 2 +-
.../qt/dialogs/toolbar/qml/EditorDNDView.qml | 2 +-
.../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 +-
.../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 {
--
2.25.1
More information about the vlc-devel
mailing list