[vlc-devel] [RFC 60/82] qml: provide common color and size definitions
Pierre Lamot
pierre at videolabs.io
Fri Feb 1 14:02:04 CET 2019
---
modules/gui/qt/Makefile.am | 3 +
modules/gui/qt/pixmaps/VLCIcons.json | 3 +-
modules/gui/qt/pixmaps/VLCIcons.ttf | Bin 21684 -> 21752 bytes
modules/gui/qt/qml/style/VLCColors.qml | 162 +++++++++++++++++++++++++
modules/gui/qt/qml/style/VLCIcons.qml | 152 +++++++++++++++++++++++
modules/gui/qt/qml/style/VLCStyle.qml | 109 +++++++++++++++++
modules/gui/qt/qml/style/qmldir | 2 +
modules/gui/qt/vlc.qrc | 6 +
8 files changed, 436 insertions(+), 1 deletion(-)
create mode 100644 modules/gui/qt/qml/style/VLCColors.qml
create mode 100644 modules/gui/qt/qml/style/VLCIcons.qml
create mode 100644 modules/gui/qt/qml/style/VLCStyle.qml
create mode 100644 modules/gui/qt/qml/style/qmldir
diff --git a/modules/gui/qt/Makefile.am b/modules/gui/qt/Makefile.am
index 39c5804214..edcd74e6b8 100644
--- a/modules/gui/qt/Makefile.am
+++ b/modules/gui/qt/Makefile.am
@@ -522,7 +522,10 @@ libqt_plugin_la_RES = \
gui/qt/pixmaps/valid.svg \
gui/qt/pixmaps/search_clear.svg \
gui/qt/pixmaps/lock.svg \
+ gui/qt/qml/style/qmldir \
gui/qt/qml/style/VLCIcons.qml \
+ gui/qt/qml/style/VLCStyle.qml \
+ gui/qt/qml/style/VLCColors.qml
EXTRA_DIST += gui/qt/vlc.qrc $(libqt_plugin_la_RES)
diff --git a/modules/gui/qt/pixmaps/VLCIcons.json b/modules/gui/qt/pixmaps/VLCIcons.json
index d5a8e8639f..7834917e59 100644
--- a/modules/gui/qt/pixmaps/VLCIcons.json
+++ b/modules/gui/qt/pixmaps/VLCIcons.json
@@ -120,6 +120,7 @@
{"key":"help", "path": "./menus/help_16px.svg"},
{"key":"stream", "path": "./menus/stream_16px.svg"},
{"key":"valid", "path": "./valid.svg"},
- {"key":"search_clear", "path": "./search_clear.svg"}
+ {"key":"search_clear", "path": "./search_clear.svg"},
+ {"key":"menu", "path": "./menu.svg"}
]
}
diff --git a/modules/gui/qt/pixmaps/VLCIcons.ttf b/modules/gui/qt/pixmaps/VLCIcons.ttf
index 9bbececbccd0fd835f25a622bcc99ca7ca681a8a..4a8362d3d6d1697ab815fc242f10bfc9a67be812 100644
GIT binary patch
delta 577
zcmdn8lJUn%#(D-u1_lORh6V;^h5$FW5Z|`r)`|=aA$NeHGXBB(My54Bu?!515kP)I
za&BV5+f|=WGcYi10Aju5vJwRbMW#vy29^gvd6x9V;)4JGfhIA8TmkYq(sL@)9ycmZ
zVqjne@;ziSQWI17e^`74%7M%`%g9KrPh at 8K(*(3Y1Sp`Aky}!6zU1_OAb$st|1Bp!
zIq at 48hZWH5CqVv(+{B6kh9^vHKzR!wUm-6sH?`oewF3i#?+2iRBn$G3OXjz&2C5I>
z0qQvc_8icIOZ#SCjOVxc%D~P10;rGSM$WG-5Sr=NmPw4ZjOCN<7-JbrH_u at dU^Ms-
zGMfS94KS7go5H}T0px)KONN1k5okIC3lIYN4 at xKBVEWBiw)qk>JLBZ*ET5TF_%@$m
zed%t<3^Zs9!wDuAphk8EZUzQ*Q$<l#C_ceB;a>p+Z%Ij+21b)N`I at S$GTek%2sECP
zQ5ec*We{MrhqBoiI2e;A^ZDtjdolEa9L2&3R4c>)3V9Hll|g|~7RqJ=>I;~h<fqJN
zIl0YG6G(3GYv9ynFk&!ZFl4ZtZ0)bas%vCmXgN9AKaY`N at _BzHU|@Xmf5XIBzWH9j
YdS*^gEEZ%K8k$d at 5F*J954c}j0P0SSy8r+H
delta 533
zcmeydl5xvQ#(D-u1_lORh6V;^h5$FW5Z^Yniir#iAv1uYGXBB(My54BF$@fh5kP)I
za&BV5hpiu685o$>0I^PTS&0IJB2y&;1IrDdJWG0Fal!xpK$93kCII;y={c2Y=a1OE
zU|?W9!@%JFA|o|1g+IJ36)1NHh|MxGQtK0$S^hKuEf4_;sAS}pR9vt*{U6BR0px$l
z$xlxF#`#1CXf{a0yWGTz0*1#-Y(RMnAYUObF*nsS*1np7!FLPLK{5sT#U%{M=aw at t
z_+J3(*$eg@(1W45S##t0ZN4&aGXovNz;HumW)6gAnwc|+(U!4nvK?bAW69<@i~@{6
z+dy6bV;Qgs42)_(9w?w>7+4s&fHVsb0{IV0Cf{NDz4<0H8{_1MEFYN|7&c#Fed#{=
zqpy*=8pCafW}s3|MlmRxl|g{f3Cd<;;9yLh?B%Dc?!(XvvVesXs8)!P3Cd<=P+(Mm
zve|(8f+x at OQ)aZ7e8^7|NWSrF;5KB?WiVneU@&B`m|W_w#Ac{#WMF79d5(YHWZnP;
mps(}--fWf$T+gfybTbez0%Hg0NQnJc- at 1YV87VMk<^TXCPk0po
diff --git a/modules/gui/qt/qml/style/VLCColors.qml b/modules/gui/qt/qml/style/VLCColors.qml
new file mode 100644
index 0000000000..46bd93a53d
--- /dev/null
+++ b/modules/gui/qt/qml/style/VLCColors.qml
@@ -0,0 +1,162 @@
+/*****************************************************************************
+ * Copyright (C) 2019 VLC authors and VideoLAN
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * ( at your option ) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
+ *****************************************************************************/
+import QtQuick 2.11
+
+Item {
+ id: colors_id
+
+ SystemPalette { id: activePalette; colorGroup: SystemPalette.Active }
+ SystemPalette { id: inactivePalette; colorGroup: SystemPalette.Inactive }
+
+ function blendColors( a, b, blend ) {
+ return Qt.rgba( a.r * blend + b.r * (1. - blend),
+ a.g * blend + b.g * (1. - blend),
+ a.b * blend + b.b * (1. - blend),
+ a.a * blend + b.a * (1. - blend))
+ }
+
+ function setColorAlpha( c, alpha )
+ {
+ return Qt.rgba(c.r, c.g, c.b, alpha)
+ }
+
+ function getBgColor(selected, hovered, focus)
+ {
+ if (focus)
+ return accent
+ if ( selected )
+ return bgHoverInactive
+ else if (hovered)
+ return bgHoverInactive
+ else
+ return "transparent"
+ }
+
+ property color text: activePalette.text;
+ property color textInactive: inactivePalette.text;
+
+ property color bg: activePalette.base;
+ property color bgInactive: inactivePalette.base;
+
+ //for alternate rows
+ property color bgAlt: activePalette.alternateBase;
+ property color bgAltInactive: inactivePalette.alternateBase;
+
+ property color bgHover: activePalette.highlight;
+ property color bgHoverInactive: inactivePalette.highlight;
+
+ property color button: activePalette.button;
+ property color buttonText: activePalette.buttonText;
+ property color buttonBorder: blendColors(activePalette.button, activePalette.buttonText, 0.8);
+
+ property color textActiveSource: "red";
+
+ property color banner: activePalette.window;
+ property color bannerHover: activePalette.highlight;
+
+ //vlc orange
+ property color accent: "#FFFF950D";
+
+ property color alert: "red";
+
+ property var colorSchemes: ["system", "day", "night"]
+
+ state: "system"
+ states: [
+ //other styles are provided for testing purpose
+ State {
+ name: "day"
+ PropertyChanges {
+ target: colors_id
+
+ text: "#232627"
+ textInactive: "#7f8c8d"
+
+ bg: "#fcfdfc"
+ bgInactive: "#fcfdfc"
+
+ bgAlt: "#eff0f1"
+ bgAltInactive: "#eff0f1"
+
+ bgHover: "#3daee9"
+ bgHoverInactive: "#3daee9"
+
+ button: "#eff0f1";
+ buttonText: "#232627";
+ buttonBorder: blendColors(activePalette.button, activePalette.buttonText, 0.8);
+
+ textActiveSource: "#ff950d";
+
+ banner: "#eff0f1";
+ bannerHover: "#3daee9";
+
+ accent: "#ff950d";
+ alert: "#ff0000";
+ }
+ },
+ State {
+ name: "night"
+ PropertyChanges {
+ target: colors_id
+
+ text: "#eff0f1"
+ textInactive: "#bdc3c7"
+ bg: "#232629"
+ bgInactive: "#232629"
+ bgAlt: "#31363b"
+ bgAltInactive: "#31363b"
+ bgHover: "#3daee9"
+ bgHoverInactive: "#3daee9"
+ button: "#31363b"
+ buttonText: "#eff0f1"
+ buttonBorder: "#575b5f"
+ textActiveSource: "#ff950d"
+ banner: "#31363b"
+ bannerHover: "#3daee9"
+ accent: "#ff950d"
+ alert: "#ff0000"
+ }
+ },
+ State {
+ name: "system"
+ PropertyChanges {
+ target: colors_id
+
+ bg: activePalette.base
+ bgInactive: inactivePalette.base
+
+ bgAlt: activePalette.alternateBase
+ bgAltInactive: inactivePalette.alternateBase
+
+ bgHover: activePalette.highlight
+ bgHoverInactive: inactivePalette.highlight
+
+ text: activePalette.text
+ textInactive: inactivePalette.text
+
+ button: activePalette.button
+ buttonText: activePalette.buttonText
+ buttonBorder: blendColors(button, buttonText, 0.8)
+
+ textActiveSource: accent
+ banner: activePalette.window
+ bannerHover: activePalette.highlight
+ }
+ }
+ ]
+}
diff --git a/modules/gui/qt/qml/style/VLCIcons.qml b/modules/gui/qt/qml/style/VLCIcons.qml
new file mode 100644
index 0000000000..54d34f3682
--- /dev/null
+++ b/modules/gui/qt/qml/style/VLCIcons.qml
@@ -0,0 +1,152 @@
+/*****************************************************************************
+ * Copyright (C) 2019 VLC authors and VideoLAN
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * ( at your option ) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
+ *****************************************************************************/
+
+/**
+ * This file is generated, please do not edit by hand
+ */
+pragma Singleton
+import QtQuick 2.11
+
+Item {
+ FontLoader {
+ source: "qrc:///VLCIcons.ttf"
+ }
+
+ property string fontFamily: "VLCIcons"
+
+ // Icons
+ property string eject : "\ue000"
+ property string stop : "\ue001"
+ property string faster : "\ue002"
+ property string go_next : "\ue003"
+ property string update : "\ue004"
+ property string extended : "\ue005"
+ property string renderer : "\ue006"
+ property string tvtelx : "\ue007"
+ property string visu : "\ue008"
+ property string defullscreen : "\ue009"
+ property string tv : "\ue00a"
+ property string skip_for : "\ue00b"
+ property string skip_back : "\ue00c"
+ property string frame_by_frame : "\ue00d"
+ property string atob_nob : "\ue00e"
+ property string atob : "\ue00f"
+ property string atob_noa : "\ue010"
+ property string volume_low : "\ue011"
+ property string dvd_prev : "\ue012"
+ property string volume_medium : "\ue013"
+ property string dvd_next : "\ue014"
+ property string audiosub : "\ue015"
+ property string volume_slider_outside : "\ue016"
+ property string arrows : "\ue017"
+ property string aspect_ratio : "\ue018"
+ property string fullscreen : "\ue019"
+ property string dvd_menu : "\ue01a"
+ property string play_reverse : "\ue01b"
+ property string record : "\ue01c"
+ property string snapshot : "\ue01d"
+ property string volume_high : "\ue01e"
+ property string volume_slider_inside : "\ue01f"
+ property string volume_muted : "\ue020"
+ property string previous : "\ue021"
+ property string type_node : "\ue022"
+ property string type_unknown : "\ue023"
+ property string file_asym : "\ue024"
+ property string folder_grey : "\ue025"
+ property string type_file : "\ue026"
+ property string file_wide : "\ue027"
+ property string harddisk : "\ue028"
+ property string type_playlist : "\ue029"
+ property string folder_blue : "\ue02a"
+ property string capture_card : "\ue02b"
+ property string tape : "\ue02c"
+ property string type_stream : "\ue02d"
+ property string type_directory : "\ue02e"
+ property string disc : "\ue02f"
+ property string repeat_one : "\ue030"
+ property string repeat_off : "\ue031"
+ property string dropzone : "\ue032"
+ property string remove : "\ue033"
+ property string add : "\ue034"
+ property string shuffle_on : "\ue035"
+ property string appletrailers : "\ue036"
+ property string metachannels : "\ue037"
+ property string assembleenationale : "\ue038"
+ property string fmc : "\ue039"
+ property string jamendo : "\ue03a"
+ property string icecast : "\ue03b"
+ property string katsomo : "\ue03c"
+ property string frenchtv : "\ue03d"
+ property string mtp : "\ue03e"
+ property string network : "\ue03f"
+ property string movie : "\ue040"
+ property string pictures : "\ue041"
+ property string screen : "\ue042"
+ property string library : "\ue043"
+ property string music : "\ue044"
+ property string lan : "\ue045"
+ property string capture : "\ue046"
+ property string podcast : "\ue047"
+ property string playlist : "\ue048"
+ property string repeat_all : "\ue049"
+ property string lock : "\ue04a"
+ property string slower : "\ue04b"
+ property string clear : "\ue04c"
+ property string profile_new : "\ue04d"
+ property string addon_green : "\ue04e"
+ property string addon_broken : "\ue04f"
+ property string addon_magenta : "\ue050"
+ property string addon_cyan : "\ue051"
+ property string score : "\ue052"
+ property string addon_yellow : "\ue053"
+ property string addon_blue : "\ue054"
+ property string addon : "\ue055"
+ property string addon_red : "\ue056"
+ property string advprefs_playlist : "\ue057"
+ property string advprefs_audio : "\ue058"
+ property string advprefs_video : "\ue059"
+ property string advprefs_extended : "\ue05a"
+ property string advprefs_codec : "\ue05b"
+ property string advprefs_intf : "\ue05c"
+ property string advprefs_sout : "\ue05d"
+ property string win7thumbnail_next : "\ue05e"
+ property string win7thumbnail_play : "\ue05f"
+ property string win7thumbnail_pause : "\ue060"
+ property string win7thumbnail_prev : "\ue061"
+ property string next : "\ue062"
+ property string play : "\ue063"
+ property string space : "\ue064"
+ property string pause : "\ue065"
+ property string faster2 : "\ue066"
+ property string wait1 : "\ue067"
+ property string wait2 : "\ue068"
+ property string wait3 : "\ue069"
+ property string wait4 : "\ue06a"
+ property string slower2 : "\ue06b"
+ property string messages : "\ue06c"
+ property string settings : "\ue06d"
+ property string info : "\ue06e"
+ property string preferences : "\ue06f"
+ property string exit : "\ue070"
+ property string help : "\ue071"
+ property string stream : "\ue072"
+ property string valid : "\ue073"
+ property string search_clear : "\ue074"
+ property string menu : "\ue075"
+
+}
diff --git a/modules/gui/qt/qml/style/VLCStyle.qml b/modules/gui/qt/qml/style/VLCStyle.qml
new file mode 100644
index 0000000000..0cab88326f
--- /dev/null
+++ b/modules/gui/qt/qml/style/VLCStyle.qml
@@ -0,0 +1,109 @@
+/*****************************************************************************
+ * Copyright (C) 2019 VLC authors and VideoLAN
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * ( at your option ) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
+ *****************************************************************************/
+pragma Singleton
+import QtQuick 2.11
+
+Item {
+ id: vlc_style
+
+ property double scale: 1.0
+
+ 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"}
+
+ 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 int fontSize_xsmall: fontMetrics_xxsmall.font.pixelSize
+ property int fontSize_small: fontMetrics_small.font.pixelSize
+ property int fontSize_normal: fontMetrics_normal.font.pixelSize
+ property int fontSize_large: fontMetrics_large.font.pixelSize
+ property int fontSize_xlarge: fontMetrics_xlarge.font.pixelSize
+ property int fontSize_xxlarge: fontMetrics_xxlarge.font.pixelSize
+ property int fontSize_xxxlarge: fontMetrics_xxxlarge.font.pixelSize
+
+ property int fontHeight_xsmall: Math.ceil(fontMetrics_xxsmall.height)
+ property int fontHeight_small: Math.ceil(fontMetrics_small.height)
+ property int fontHeight_normal: Math.ceil(fontMetrics_normal.height)
+ property int fontHeight_large: Math.ceil(fontMetrics_large.height)
+ property int fontHeight_xlarge: Math.ceil(fontMetrics_xlarge.height)
+ property int fontHeight_xxlarge: Math.ceil(fontMetrics_xxlarge.height)
+ 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 icon_xsmall: 8 * scale;
+ property int icon_small: 16 * scale;
+ property int icon_normal: 32 * scale;
+ property int icon_large: 64 * scale;
+ property int icon_xlarge: 128 * 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_xsmall: 8 * scale;
+ property int heightBar_small: 16 * scale;
+ property int heightBar_normal: 32 * scale;
+ property int heightBar_large: 64 * scale;
+ property int heightBar_xlarge: 128 * scale;
+ property int heightBar_xxlarge: 256 * scale;
+
+ property int minWidthMediacenter: 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;
+
+
+ //timings
+ property int delayToolTipAppear: 500;
+ property int timingPlaylistClose: 1000;
+ property int timingPlaylistOpen: 1000;
+ property int timingGridExpandOpen: 200;
+ property int timingListExpandOpen: 200;
+
+ //default arts
+ property url noArtCover: "qrc:///noart.png";
+
+
+}
diff --git a/modules/gui/qt/qml/style/qmldir b/modules/gui/qt/qml/style/qmldir
new file mode 100644
index 0000000000..0e6c86782b
--- /dev/null
+++ b/modules/gui/qt/qml/style/qmldir
@@ -0,0 +1,2 @@
+singleton VLCStyle 1.0 VLCStyle.qml
+singleton VLCIcons 1.0 VLCIcons.qml
diff --git a/modules/gui/qt/vlc.qrc b/modules/gui/qt/vlc.qrc
index 8c7eca1ded..a9f053f4db 100644
--- a/modules/gui/qt/vlc.qrc
+++ b/modules/gui/qt/vlc.qrc
@@ -158,4 +158,10 @@
<file alias="addon_red.svg">pixmaps/addons/addon_red.svg</file>
<file alias="addon_yellow.svg">pixmaps/addons/addon_yellow.svg</file>
</qresource>
+ <qresource prefix="/style">
+ <file alias="qmldir">qml/style/qmldir</file>
+ <file alias="VLCStyle.qml">qml/style/VLCStyle.qml</file>
+ <file alias="VLCColors.qml">qml/style/VLCColors.qml</file>
+ <file alias="VLCIcons.qml">qml/style/VLCIcons.qml</file>
+ </qresource>
</RCC>
--
2.19.1
More information about the vlc-devel
mailing list