[vlc-commits] [Git][videolan/vlc][master] 2 commits: qt: update record icon

Jean-Baptiste Kempf (@jbk) gitlab at videolan.org
Tue Mar 29 17:53:18 UTC 2022



Jean-Baptiste Kempf pushed to branch master at VideoLAN / VLC


Commits:
d4b33b6a by Pierre Lamot at 2022-03-29T17:38:38+00:00
qt: update record icon

- - - - -
3f314c04 by Pierre Lamot at 2022-03-29T17:38:38+00:00
qml: make the record button red and animate it

It is a common design language to have the record button red.

The animation provides a visual feedback when the user is currently recording.

- - - - -


4 changed files:

- modules/gui/qt/pixmaps/VLCIcons.ttf
- modules/gui/qt/pixmaps/toolbar/record_16px.svg
- modules/gui/qt/player/qml/controlbarcontrols/RecordButton.qml
- modules/gui/qt/style/VLCColors.qml


Changes:

=====================================
modules/gui/qt/pixmaps/VLCIcons.ttf
=====================================
Binary files a/modules/gui/qt/pixmaps/VLCIcons.ttf and b/modules/gui/qt/pixmaps/VLCIcons.ttf differ


=====================================
modules/gui/qt/pixmaps/toolbar/record_16px.svg
=====================================
@@ -1,74 +1,3 @@
-<?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.2 (5c3e80d, 2017-08-06)"
-   sodipodi:docname="record_16px.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="956"
-     inkscape:window-height="1021"
-     id="namedview6"
-     showgrid="false"
-     inkscape:zoom="4.9166667"
-     inkscape:cx="46.487889"
-     inkscape:cy="40.793321"
-     inkscape:window-x="2560"
-     inkscape:window-y="30"
-     inkscape:window-maximized="0"
-     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: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">
-    <circle
-       style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#f00000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:15;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:4.19999981;stroke-opacity:1;marker:none;enable-background:accumulate"
-       id="path11039"
-       cx="408"
-       cy="1028.3622"
-       r="16" />
-  </g>
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 37C31.1797 37 37 31.1797 37 24C37 16.8203 31.1797 11 24 11C16.8203 11 11 16.8203 11 24C11 31.1797 16.8203 37 24 37ZM24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4ZM6.5 24C6.5 14.335 14.335 6.5 24 6.5C33.665 6.5 41.5 14.335 41.5 24C41.5 33.665 33.665 41.5 24 41.5C14.335 41.5 6.5 33.665 6.5 24Z" fill="#FF0000"/>
 </svg>


=====================================
modules/gui/qt/player/qml/controlbarcontrols/RecordButton.qml
=====================================
@@ -16,6 +16,7 @@
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
  *****************************************************************************/
 import QtQuick 2.11
+import QtQuick.Templates 2.4 as T
 
 import org.videolan.vlc 0.1
 
@@ -23,12 +24,45 @@ import "qrc:///widgets/" as Widgets
 import "qrc:///style/"
 
 
-Widgets.IconControlButton {
-    id: recordBtn
+Widgets.IconToolButton {
+    id: control
+
+    enabled: !paintOnly && Player.isPlaying
+
     size: VLCStyle.icon_medium
-    iconText: VLCIcons.record
-    enabled: Player.isPlaying
-    checked: Player.isRecording
-    onClicked: Player.toggleRecord()
+    color: VLCStyle.colors.record
     text: I18n.qtr("record")
+
+    onClicked: Player.toggleRecord()
+
+    contentItem: T.Label {
+        id: content
+
+        anchors.centerIn: parent
+
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+
+        text: VLCIcons.record
+        color: control.color
+
+        ColorAnimation on color {
+            from:  "transparent"
+            to: control.color
+            duration: VLCStyle.ms1000
+            loops: Animation.Infinite
+            easing.type: Easing.InOutSine
+            running: control.enabled && Player.recording
+
+            onStopped: {
+                content.color = control.color
+            }
+        }
+
+        font.pixelSize: VLCIcons.pixelSize(size)
+        font.family: VLCIcons.fontFamily
+        font.underline: control.font.underline
+
+        Accessible.ignored: true
+    }
 }


=====================================
modules/gui/qt/style/VLCColors.qml
=====================================
@@ -179,6 +179,7 @@ Item {
     property color buffer: "#696969";
 
     property color seekpoint: "red";
+    property color record: "red";
 
     property color windowCSDButtonDarkBg:  "#80484848"
     property color windowCSDButtonLightBg: "#80DADADA"



View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/85357e2d60e528d1b5d204f7a17b50123d1df27d...3f314c04fa15af2c5bde3b5375555865423942eb

-- 
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/85357e2d60e528d1b5d204f7a17b50123d1df27d...3f314c04fa15af2c5bde3b5375555865423942eb
You're receiving this email because of your account on code.videolan.org.


VideoLAN code repository instance


More information about the vlc-commits mailing list