[vlc-devel] [PATCH 02/14] qml: add ContextButton, VideoQualityLabel, VideoProgress and RoundImage

Abel Tesfaye abeltesfaye45 at gmail.com
Tue Aug 6 11:18:36 CEST 2019


From: Abel Tesfaye <Abeltesfaye45 at gmail.com>

---
 modules/gui/qt/Makefile.am                    |  4 ++
 .../qt/qml/mediacenter/MCVideoProgressBar.qml | 36 +++++++++++++
 .../qml/mediacenter/MCVideoQualityLabel.qml   | 37 +++++++++++++
 modules/gui/qt/qml/utils/ContextButton.qml    | 52 +++++++++++++++++++
 modules/gui/qt/qml/utils/RoundImage.qml       | 38 ++++++++++++++
 modules/gui/qt/vlc.qrc                        |  4 ++
 6 files changed, 171 insertions(+)
 create mode 100644 modules/gui/qt/qml/mediacenter/MCVideoProgressBar.qml
 create mode 100644 modules/gui/qt/qml/mediacenter/MCVideoQualityLabel.qml
 create mode 100644 modules/gui/qt/qml/utils/ContextButton.qml
 create mode 100644 modules/gui/qt/qml/utils/RoundImage.qml

diff --git a/modules/gui/qt/Makefile.am b/modules/gui/qt/Makefile.am
index eb80e6ea42..ad905c9ed1 100644
--- a/modules/gui/qt/Makefile.am
+++ b/modules/gui/qt/Makefile.am
@@ -564,6 +564,7 @@ libqt_plugin_la_QML = \
 	gui/qt/qml/utils/ToolTipArea.qml \
 	gui/qt/qml/utils/DrawerExt.qml \
 	gui/qt/qml/utils/GridItem.qml \
+	gui/qt/qml/utils/ContextButton.qml \
 	gui/qt/qml/utils/IconToolButton.qml \
 	gui/qt/qml/utils/ImageToolButton.qml \
 	gui/qt/qml/utils/TextToolButton.qml \
@@ -583,6 +584,7 @@ libqt_plugin_la_QML = \
 	gui/qt/qml/utils/ScanProgressBar.qml \
 	gui/qt/qml/utils/LabelSeparator.qml \
 	gui/qt/qml/utils/RoundButton.qml \
+	gui/qt/qml/utils/RoundImage.qml \
         gui/qt/qml/utils/SearchBox.qml \
         gui/qt/qml/utils/SortControl.qml \
 	gui/qt/qml/menus/CheckableModelSubMenu.qml \
@@ -601,6 +603,8 @@ libqt_plugin_la_QML = \
 	gui/qt/qml/mediacenter/MCMainDisplay.qml \
 	gui/qt/qml/mediacenter/MCMusicDisplay.qml \
 	gui/qt/qml/mediacenter/MCVideoDisplay.qml \
+	gui/qt/qml/mediacenter/MCVideoQualityLabel.qml \
+	gui/qt/qml/mediacenter/MCVideoProgressBar.qml \
 	gui/qt/qml/mediacenter/MCNetworkDisplay.qml \
 	gui/qt/qml/mediacenter/MusicAlbumsDisplay.qml \
 	gui/qt/qml/mediacenter/MusicAlbumsGridExpandDelegate.qml \
diff --git a/modules/gui/qt/qml/mediacenter/MCVideoProgressBar.qml b/modules/gui/qt/qml/mediacenter/MCVideoProgressBar.qml
new file mode 100644
index 0000000000..f554ec21e3
--- /dev/null
+++ b/modules/gui/qt/qml/mediacenter/MCVideoProgressBar.qml
@@ -0,0 +1,36 @@
+/*****************************************************************************
+ * 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
+import QtQuick.Controls 2.4
+
+import "qrc:///style/"
+
+ProgressBar {
+    id: progressBar
+    background: Rectangle {
+        implicitHeight: 2 * VLCStyle.scale
+        color: VLCStyle.colors.text
+    }
+    contentItem: Item {
+        Rectangle {
+            width: progressBar.visualPosition * parent.width
+            height: parent.height
+            color: VLCStyle.colors.accent
+        }
+    }
+}
diff --git a/modules/gui/qt/qml/mediacenter/MCVideoQualityLabel.qml b/modules/gui/qt/qml/mediacenter/MCVideoQualityLabel.qml
new file mode 100644
index 0000000000..7ae151e13a
--- /dev/null
+++ b/modules/gui/qt/qml/mediacenter/MCVideoQualityLabel.qml
@@ -0,0 +1,37 @@
+/*****************************************************************************
+ * 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
+import QtQuick.Controls 2.4
+
+import "qrc:///style/"
+
+Label {
+    id: label
+    color: "white"
+    bottomPadding: VLCStyle.margin_xxxsmall
+    topPadding: VLCStyle.margin_xxxsmall
+    leftPadding: VLCStyle.margin_xxxsmall
+    rightPadding: VLCStyle.margin_xxxsmall
+    font.pixelSize: VLCStyle.fontSize_normal
+    background: Rectangle {
+        anchors.fill: label
+        color: "black"
+        opacity: 0.5
+        radius: 3
+    }
+}
diff --git a/modules/gui/qt/qml/utils/ContextButton.qml b/modules/gui/qt/qml/utils/ContextButton.qml
new file mode 100644
index 0000000000..c571cef2c9
--- /dev/null
+++ b/modules/gui/qt/qml/utils/ContextButton.qml
@@ -0,0 +1,52 @@
+/*****************************************************************************
+ * 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
+import QtQuick.Controls 2.4
+
+import "qrc:///utils/" as Utils
+import "qrc:///style/"
+
+
+Button {
+    id: contextButton
+    width: VLCStyle.icon_normal
+    height: VLCStyle.icon_normal
+    text: VLCIcons.ellipsis
+    font.family: VLCIcons.fontFamily
+    font.pointSize: VLCStyle.icon_small
+
+    property alias color: contextButtonContent.color
+
+    hoverEnabled: true
+    background: Rectangle {
+        anchors.fill: contextButton
+        color: "transparent"
+    }
+    contentItem: Text {
+        id: contextButtonContent
+        text: contextButton.text
+        font: contextButton.font
+        color: VLCStyle.colors.text
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        //                                layer.enabled: true
+        //                                layer.effect: DropShadow {
+        //                                    color: VLCStyle.colors.text
+        //                                }
+    }
+}
diff --git a/modules/gui/qt/qml/utils/RoundImage.qml b/modules/gui/qt/qml/utils/RoundImage.qml
new file mode 100644
index 0000000000..d45b9c5e1e
--- /dev/null
+++ b/modules/gui/qt/qml/utils/RoundImage.qml
@@ -0,0 +1,38 @@
+/*****************************************************************************
+ * 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
+import QtQuick.Controls 2.4
+import QtGraphicalEffects 1.0
+
+import "qrc:///style/"
+
+Image {
+    id: cover
+    property real radius: 3
+    fillMode: Image.PreserveAspectCrop
+    sourceSize: Qt.size(width, height)
+    layer.enabled: true
+    layer.effect: OpacityMask {
+        maskSource: Rectangle {
+            radius: cover.radius
+            width: cover.width
+            height: cover.height
+            visible: false
+        }
+    }
+}
diff --git a/modules/gui/qt/vlc.qrc b/modules/gui/qt/vlc.qrc
index 1325024318..41b130791e 100644
--- a/modules/gui/qt/vlc.qrc
+++ b/modules/gui/qt/vlc.qrc
@@ -200,6 +200,8 @@
         <file alias="SortControl.qml">qml/utils/SortControl.qml</file>
         <file alias="RoundButton.qml">qml/utils/RoundButton.qml</file>
         <file alias="LabelSeparator.qml">qml/utils/LabelSeparator.qml</file>
+        <file alias="ContextButton.qml">qml/utils/ContextButton.qml</file>
+        <file alias="RoundImage.qml">qml/utils/RoundImage.qml</file>
     </qresource>
     <qresource prefix="/mediacenter">
         <file alias="MCMusicDisplay.qml">qml/mediacenter/MCMusicDisplay.qml</file>
@@ -217,6 +219,8 @@
         <file alias="NetworkFileDisplay.qml">qml/mediacenter/NetworkFileDisplay.qml</file>
         <file alias="NetworkListItem.qml">qml/mediacenter/NetworkListItem.qml</file>
         <file alias="VideoExpandableGrid.qml">qml/mediacenter/VideoExpandableGrid.qml</file>
+        <file alias="MCVideoQualityLabel.qml">qml/mediacenter/MCVideoQualityLabel.qml</file>
+        <file alias="MCVideoProgressBar.qml">qml/mediacenter/MCVideoProgressBar.qml</file>
     </qresource>
     <qresource prefix="/style">
         <file alias="qmldir">qml/style/qmldir</file>
-- 
2.21.0



More information about the vlc-devel mailing list