vlc | branch: master | Adrien Maglo <[email protected]> | 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 <[email protected]> > 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> _______________________________________________ vlc-commits mailing list [email protected] https://mailman.videolan.org/listinfo/vlc-commits
