[vlc-devel] [PATCH 22/33] QML: update the style of NetworkDriveDisplay and NetworkFileDisplay
Adrien Maglo
magsoft at videolan.org
Wed Jun 12 14:01:29 CEST 2019
---
modules/gui/qt/Makefile.am | 2 +
modules/gui/qt/pixmaps/types/file_black.svg | 84 ++++++++++
.../qt/pixmaps/types/type_directory_black.svg | 153 ++++++++++++++++++
.../qml/mediacenter/NetworkDriveDisplay.qml | 4 +-
.../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(-)
create mode 100644 modules/gui/qt/pixmaps/types/file_black.svg
create mode 100644 modules/gui/qt/pixmaps/types/type_directory_black.svg
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>
--
2.20.1
More information about the vlc-devel
mailing list