[vlc-commits] qml: update the style of NetworkDriveDisplay and NetworkFileDisplay

Adrien Maglo git at videolan.org
Thu Jun 13 13:11:03 CEST 2019


vlc | branch: master | Adrien Maglo <magsoft at videolan.org> | Wed May 22 16:26:19 2019 +0200| [4e0e23943016cac924924de04f3a9040b2052b80] | committer: Thomas Guillem

qml: update the style of NetworkDriveDisplay and NetworkFileDisplay

Signed-off-by: Thomas Guillem <thomas at gllm.fr>

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

 modules/gui/qt/Makefile.am                         |   2 +
 modules/gui/qt/pixmaps/types/file_black.svg        |  84 +++++++++++
 .../gui/qt/pixmaps/types/type_directory_black.svg  | 153 +++++++++++++++++++++
 .../gui/qt/qml/mediacenter/NetworkDriveDisplay.qml |   4 +-
 .../gui/qt/qml/mediacenter/NetworkFileDisplay.qml  |   2 +-
 modules/gui/qt/qml/style/VLCColors.qml             |   6 +
 modules/gui/qt/qml/style/VLCStyle.qml              |   4 +-
 modules/gui/qt/qml/utils/ListItem.qml              |  21 ++-
 modules/gui/qt/vlc.qrc                             |   2 +
 9 files changed, 267 insertions(+), 11 deletions(-)

diff --git a/modules/gui/qt/Makefile.am b/modules/gui/qt/Makefile.am
index 075288808e..92373b4b22 100644
--- a/modules/gui/qt/Makefile.am
+++ b/modules/gui/qt/Makefile.am
@@ -491,12 +491,14 @@ libqt_plugin_la_RES = \
 	gui/qt/pixmaps/types/disc_16px.svg \
 	gui/qt/pixmaps/types/file-asym_16px.svg \
 	gui/qt/pixmaps/types/file-wide_16px.svg \
+	gui/qt/pixmaps/types/file_black.svg \
 	gui/qt/pixmaps/types/folder-blue_16px.svg \
 	gui/qt/pixmaps/types/folder-grey_16px.svg \
 	gui/qt/pixmaps/types/harddisk_16px.svg \
 	gui/qt/pixmaps/types/network_16px.svg \
 	gui/qt/pixmaps/types/tape_16px.svg \
 	gui/qt/pixmaps/types/type_directory.svg \
+	gui/qt/pixmaps/types/type_directory_black.svg \
 	gui/qt/pixmaps/types/type_file.svg \
 	gui/qt/pixmaps/types/type_stream.svg \
 	gui/qt/pixmaps/types/type_node.svg \
diff --git a/modules/gui/qt/pixmaps/types/file_black.svg b/modules/gui/qt/pixmaps/types/file_black.svg
new file mode 100644
index 0000000000..cef981401a
--- /dev/null
+++ b/modules/gui/qt/pixmaps/types/file_black.svg
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="48"
+   height="48"
+   viewBox="0 0 48 48"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="file_black.svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1031"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="19.666666"
+     inkscape:cx="30.498333"
+     inkscape:cy="16.364707"
+     inkscape:window-x="1920"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     showguides="true"
+     inkscape:guide-bbox="true">
+    <sodipodi:guide
+       position="0,24.017661"
+       orientation="1,0"
+       id="guide2390"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="23.59322,0"
+       orientation="0,1"
+       id="guide2392"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Master"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-384,-1004.3622)"
+     style="display:inline">
+    <path
+       sodipodi:nodetypes="cccc"
+       inkscape:connector-curvature="0"
+       id="path11037-0-9"
+       d="m 402.57825,1039.901 11.96633,-7.3639 -11.96633,-7.3639 z"
+       style="display:inline;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:2.454633;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       inkscape:connector-curvature="0"
+       style="display:inline;fill:#000000;fill-opacity:1;stroke-width:2"
+       d="m 395.99999,1008.3622 c -2.2,0 -3.98047,1.8 -3.98047,4 l -0.0195,32 c 0,2.2 1.78047,4 3.98047,4 h 24.01949 c 2.2,0 4,-1.8 4,-4 v -24 l -12,-12 z m -1,3 h 15 2 v 9 h 9 v 2 23 h -26 z"
+       id="path12846" />
+  </g>
+</svg>
diff --git a/modules/gui/qt/pixmaps/types/type_directory_black.svg b/modules/gui/qt/pixmaps/types/type_directory_black.svg
new file mode 100644
index 0000000000..684e05e765
--- /dev/null
+++ b/modules/gui/qt/pixmaps/types/type_directory_black.svg
@@ -0,0 +1,153 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="48"
+   height="48"
+   viewBox="0 0 48 48"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="type_directory_black.svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1031"
+     id="namedview6"
+     showgrid="true"
+     inkscape:zoom="13.906433"
+     inkscape:cx="26.056668"
+     inkscape:cy="25.842596"
+     inkscape:window-x="1920"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     showguides="true"
+     inkscape:guide-bbox="true">
+    <sodipodi:guide
+       position="0,24.017661"
+       orientation="1,0"
+       id="guide2390"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="23.59322,0"
+       orientation="0,1"
+       id="guide2392"
+       inkscape:locked="false" />
+    <inkscape:grid
+       type="xygrid"
+       id="grid815" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Master"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-384,-1004.3622)"
+     style="display:inline">
+    <g
+       id="g892"
+       transform="matrix(0.92857143,0,0,0.92857143,29.142857,72.990164)">
+      <path
+         inkscape:connector-curvature="0"
+         id="path819"
+         d="m 388,1016.3622 v 25"
+         style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         sodipodi:nodetypes="cccc"
+         inkscape:connector-curvature="0"
+         id="path821"
+         d="m 392,1012.3622 h 11 l 4.99999,5 H 424"
+         style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         sodipodi:nodetypes="cc"
+         inkscape:connector-curvature="0"
+         id="path823"
+         d="m 428,1021.3622 v 20"
+         style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path825"
+         d="M 424,1045.3622 H 392"
+         style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         d="m 392,1045.3622 a 4,4 0 0 1 -2.82843,-1.1716 A 4,4 0 0 1 388,1041.3622"
+         sodipodi:open="true"
+         sodipodi:end="3.1415927"
+         sodipodi:start="1.5707963"
+         sodipodi:ry="4"
+         sodipodi:rx="4"
+         sodipodi:cy="1041.3622"
+         sodipodi:cx="392"
+         sodipodi:type="arc"
+         id="path827"
+         style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+      <path
+         transform="scale(1,-1)"
+         d="m 392,-1012.3622 a 4,4 0 0 1 -2.82843,-1.1716 4,4 0 0 1 -1.17157,-2.8284"
+         sodipodi:open="true"
+         sodipodi:end="3.1415927"
+         sodipodi:start="1.5707963"
+         sodipodi:ry="4"
+         sodipodi:rx="4"
+         sodipodi:cy="-1016.3622"
+         sodipodi:cx="392"
+         sodipodi:type="arc"
+         id="path827-3"
+         style="display:inline;fill:none;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+      <path
+         transform="matrix(0,1,1,0,0,0)"
+         d="m 1021.3622,428 a 4,4 0 0 1 -2.8284,-1.17157 A 4,4 0 0 1 1017.3622,424"
+         sodipodi:open="true"
+         sodipodi:end="3.1415927"
+         sodipodi:start="1.5707963"
+         sodipodi:ry="4"
+         sodipodi:rx="4"
+         sodipodi:cy="424"
+         sodipodi:cx="1021.3622"
+         sodipodi:type="arc"
+         id="path827-3-6"
+         style="display:inline;fill:none;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+      <path
+         transform="scale(-1,1)"
+         d="m -424,1045.3622 a 4,4 0 0 1 -2.82843,-1.1716 4,4 0 0 1 -1.17157,-2.8284"
+         sodipodi:open="true"
+         sodipodi:end="3.1415927"
+         sodipodi:start="1.5707963"
+         sodipodi:ry="4"
+         sodipodi:rx="4"
+         sodipodi:cy="1041.3622"
+         sodipodi:cx="-424"
+         sodipodi:type="arc"
+         id="path827-3-7"
+         style="display:inline;fill:none;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>
diff --git a/modules/gui/qt/qml/mediacenter/NetworkDriveDisplay.qml b/modules/gui/qt/qml/mediacenter/NetworkDriveDisplay.qml
index 4e2633ee97..8156bd5d10 100644
--- a/modules/gui/qt/qml/mediacenter/NetworkDriveDisplay.qml
+++ b/modules/gui/qt/qml/mediacenter/NetworkDriveDisplay.qml
@@ -38,11 +38,11 @@ Utils.ListItem {
     cover: Image {
         id: cover_obj
         fillMode: Image.PreserveAspectFit
-        source: model.type == MLNetworkModel.TYPE_SHARE ?
-            "qrc:///type/network.svg" : "qrc:///type/directory.svg";
+        source: "qrc:///type/directory_black.svg";
     }
     line1: model.name || qsTr("Unknown share")
     line2: model.mrl
+    imageText: model.type === MLNetworkModel.TYPE_SHARE ? model.protocol : ""
 
     onItemClicked : {
         delegateModel.updateSelection( modifier, view.currentIndex, index )
diff --git a/modules/gui/qt/qml/mediacenter/NetworkFileDisplay.qml b/modules/gui/qt/qml/mediacenter/NetworkFileDisplay.qml
index 7a59c90601..98c8ef9e15 100644
--- a/modules/gui/qt/qml/mediacenter/NetworkFileDisplay.qml
+++ b/modules/gui/qt/qml/mediacenter/NetworkFileDisplay.qml
@@ -35,7 +35,7 @@ Utils.ListItem {
     cover: Image {
         id: cover_obj
         fillMode: Image.PreserveAspectFit
-        source: "qrc:///type/file-asym.svg"
+        source: "qrc:///type/file_black.svg"
     }
     line1: model.name || qsTr("Unknown share")
     line2: model.mrl
diff --git a/modules/gui/qt/qml/style/VLCColors.qml b/modules/gui/qt/qml/style/VLCColors.qml
index 228eac0285..c8d645db76 100644
--- a/modules/gui/qt/qml/style/VLCColors.qml
+++ b/modules/gui/qt/qml/style/VLCColors.qml
@@ -75,6 +75,9 @@ Item {
 
     property color alert: "red";
 
+    property color lightText: "#747474";
+
+
     property var colorSchemes: ["system", "day", "night"]
 
     state: "system"
@@ -108,6 +111,8 @@ Item {
 
                 accent: "#ff950d";
                 alert: "#ff0000";
+
+                lightText: "#747474";
             }
         },
         State {
@@ -131,6 +136,7 @@ Item {
                 bannerHover: "#3daee9"
                 accent: "#ff950d"
                 alert: "#ff0000"
+                lightText: "#8b8b8b";
             }
         },
         State {
diff --git a/modules/gui/qt/qml/style/VLCStyle.qml b/modules/gui/qt/qml/style/VLCStyle.qml
index 8156dd73f0..79974b5d08 100644
--- a/modules/gui/qt/qml/style/VLCStyle.qml
+++ b/modules/gui/qt/qml/style/VLCStyle.qml
@@ -43,7 +43,7 @@ Item {
     property double margin_large: 24 * scale;
     property double margin_xlarge: 32 * scale;
 
-    property int fontSize_xsmall: fontMetrics_xxsmall.font.pixelSize
+    property int fontSize_xsmall: fontMetrics_xsmall.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
@@ -51,7 +51,7 @@ Item {
     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_xsmall: Math.ceil(fontMetrics_xsmall.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)
diff --git a/modules/gui/qt/qml/utils/ListItem.qml b/modules/gui/qt/qml/utils/ListItem.qml
index e1bea726ad..5a1192b4ca 100644
--- a/modules/gui/qt/qml/utils/ListItem.qml
+++ b/modules/gui/qt/qml/utils/ListItem.qml
@@ -33,6 +33,7 @@ NavigableFocusScope {
     property Component cover: Item {}
     property alias line1: line1_text.text
     property alias line2: line2_text.text
+    property alias imageText: cover_text.text
 
     property alias color: linerect.color
 
@@ -89,10 +90,19 @@ NavigableFocusScope {
         RowLayout {
             anchors.fill: parent
 
-            Loader {
+            Item {
                 Layout.preferredWidth: VLCStyle.icon_normal
                 Layout.preferredHeight: VLCStyle.icon_normal
-                sourceComponent: root.cover
+                Loader {
+                    anchors.fill: parent
+                    sourceComponent: root.cover
+                }
+                Text {
+                    id: cover_text
+                    anchors.centerIn: parent
+                    color: VLCStyle.colors.lightText
+                    font.pixelSize: VLCStyle.fontSize_xsmall
+                }
             }
             FocusScope {
                 id: presentation
@@ -107,7 +117,7 @@ NavigableFocusScope {
                         verticalCenter: parent.verticalCenter
                     }
 
-                    Text{
+                    Text {
                         id: line1_text
                         width: parent.width
 
@@ -116,12 +126,11 @@ NavigableFocusScope {
                         font.pixelSize: VLCStyle.fontSize_normal
                         enabled: text !== ""
                     }
-                    Text{
+                    Text {
                         id: line2_text
                         width: parent.width
-                        text: ""
                         elide: Text.ElideRight
-                        color: VLCStyle.colors.text
+                        color: VLCStyle.colors.lightText
                         font.pixelSize: VLCStyle.fontSize_small
                         visible: text !== ""
                         enabled: text !== ""
diff --git a/modules/gui/qt/vlc.qrc b/modules/gui/qt/vlc.qrc
index 01f88048d9..4cd4e3068d 100644
--- a/modules/gui/qt/vlc.qrc
+++ b/modules/gui/qt/vlc.qrc
@@ -84,6 +84,8 @@
         <file alias="stream.svg">pixmaps/types/type_stream.svg</file>
         <file alias="node.svg">pixmaps/types/type_node.svg</file>
         <file alias="playlist.svg">pixmaps/types/type_playlist.svg</file>
+        <file alias="directory_black.svg">pixmaps/types/type_directory_black.svg</file>
+        <file alias="file_black.svg">pixmaps/types/file_black.svg</file>
     </qresource>
     <qresource prefix="/">
         <file alias="update.svg">pixmaps/update.svg</file>



More information about the vlc-commits mailing list