vlc | branch: master | Pierre Lamot <pie...@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 { _______________________________________________ vlc-commits mailing list vlc-commits@videolan.org https://mailman.videolan.org/listinfo/vlc-commits