[vlc-commits] [Git][videolan/vlc][master] 15 commits: qml: update night theme

Jean-Baptiste Kempf (@jbk) gitlab at videolan.org
Sat Jul 31 14:41:14 UTC 2021



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


Commits:
526cd114 by Prince Gupta at 2021-07-31T14:22:03+00:00
qml: update night theme

- - - - -
136839ed by Prince Gupta at 2021-07-31T14:22:03+00:00
qml/PlaylistListView: update background color

use 'bgAlt' constant for background color

- - - - -
f8da545c by Prince Gupta at 2021-07-31T14:22:03+00:00
qml: update day theme

update banner and bgAlt contants

- - - - -
64900282 by Prince Gupta at 2021-07-31T14:22:03+00:00
qml/VLCColors: rename 'banner' to 'topBanner'

- - - - -
0e6f0318 by Prince Gupta at 2021-07-31T14:22:03+00:00
qml/VLCColors: introduce 'lowerBanner' color constant

defines background color for local toolbar section of
BannerSources

- - - - -
fb1fd83a by Prince Gupta at 2021-07-31T14:22:03+00:00
qml/BannerSources: use 'lowerBanner' color constant

- - - - -
8ce09501 by Prince Gupta at 2021-07-31T14:22:03+00:00
qml/VLCColors: rename 'bannerBorder' to 'border'

this will be reused in different parts as well

- - - - -
2700ed65 by Prince Gupta at 2021-07-31T14:22:03+00:00
qml/MainDisplay: add left border in PlaylistListView column

- - - - -
3f12e672 by Prince Gupta at 2021-07-31T14:22:03+00:00
qml/MusicArtistAlbums: add left border in artists list

- - - - -
fe941e85 by Prince Gupta at 2021-07-31T14:22:03+00:00
qml/MusicAlbumsGridExpandDelegate: use 'border' color constant

- - - - -
cbb464bc by Prince Gupta at 2021-07-31T14:22:03+00:00
qml/VideoInfoExpandPanel: use 'border' color constant

- - - - -
6bd29341 by Prince Gupta at 2021-07-31T14:22:03+00:00
qml/VLCColors: add 'expandDelegate' color constant

- - - - -
84b568ee by Prince Gupta at 2021-07-31T14:22:03+00:00
qml/VideoInfoExpandPanel: use 'expandDelegate' color constant for background

- - - - -
f917cea7 by Prince Gupta at 2021-07-31T14:22:03+00:00
qml/MusicAlbumsGridExpandDelegate: use 'expandDelegate' color constant for background

- - - - -
4733f33e by Prince Gupta at 2021-07-31T14:22:03+00:00
qml/MiniPlayer: update tint color

- - - - -


16 changed files:

- modules/gui/qt/dialogs/dialogs/qml/CustomDialog.qml
- modules/gui/qt/dialogs/dialogs/qml/Dialogs.qml
- modules/gui/qt/dialogs/dialogs/qml/ModalDialog.qml
- modules/gui/qt/dialogs/help/qml/About.qml
- modules/gui/qt/maininterface/qml/BannerSources.qml
- modules/gui/qt/maininterface/qml/MainDisplay.qml
- modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
- modules/gui/qt/medialibrary/qml/MusicArtistsAlbums.qml
- modules/gui/qt/medialibrary/qml/VideoInfoExpandPanel.qml
- modules/gui/qt/player/qml/MiniPlayer.qml
- modules/gui/qt/player/qml/Player.qml
- modules/gui/qt/playlist/qml/PlaylistListView.qml
- modules/gui/qt/style/VLCColors.qml
- modules/gui/qt/widgets/qml/BannerTabButton.qml
- modules/gui/qt/widgets/qml/FrostedGlassEffect.qml
- modules/gui/qt/widgets/qml/LocalTabBar.qml


Changes:

=====================================
modules/gui/qt/dialogs/dialogs/qml/CustomDialog.qml
=====================================
@@ -78,7 +78,7 @@ ModalDialog {
         implicitHeight: VLCStyle.icon_normal
 
         Rectangle {
-            color: VLCStyle.colors.banner
+            color: VLCStyle.colors.topBanner
             anchors.fill: parent
             anchors.leftMargin: VLCStyle.margin_xxsmall
             anchors.rightMargin: VLCStyle.margin_xxsmall


=====================================
modules/gui/qt/dialogs/dialogs/qml/Dialogs.qml
=====================================
@@ -257,7 +257,7 @@ Item {
             implicitHeight: VLCStyle.icon_normal
 
             Rectangle {
-                color: VLCStyle.colors.banner
+                color: VLCStyle.colors.topBanner
                 anchors.fill: parent
 
                 RowLayout {
@@ -342,7 +342,7 @@ Item {
             implicitHeight: VLCStyle.icon_normal
 
             Rectangle {
-                color: VLCStyle.colors.banner
+                color: VLCStyle.colors.topBanner
                 anchors.fill: parent
                 anchors.leftMargin: VLCStyle.margin_xxsmall
                 anchors.rightMargin: VLCStyle.margin_xxsmall


=====================================
modules/gui/qt/dialogs/dialogs/qml/ModalDialog.qml
=====================================
@@ -51,7 +51,7 @@ Dialog {
     }
 
     background: Rectangle {
-        color: VLCStyle.colors.banner
+        color: VLCStyle.colors.topBanner
     }
 
     header: Label {
@@ -65,7 +65,7 @@ Dialog {
             x: 1; y: 1
             width: parent.width - 2
             height: parent.height - 1
-            color: VLCStyle.colors.banner
+            color: VLCStyle.colors.topBanner
         }
     }
 


=====================================
modules/gui/qt/dialogs/help/qml/About.qml
=====================================
@@ -48,7 +48,7 @@ FocusScope {
 
             Layout.preferredWidth: columnLayout.implicitWidth
             Layout.fillHeight: true
-            color: VLCStyle.colors.banner
+            color: VLCStyle.colors.topBanner
 
             ColumnLayout {
                 id: columnLayout


=====================================
modules/gui/qt/maininterface/qml/BannerSources.qml
=====================================
@@ -64,10 +64,11 @@ FocusScope {
     Rectangle {
         id: pLBannerSources
 
+        property alias model: globalMenuGroup.model
+
         anchors.fill: parent
 
-        color: VLCStyle.colors.banner
-        property alias model: globalMenuGroup.model
+        color: VLCStyle.colors.topBanner
 
         Column {
             id: col
@@ -202,8 +203,9 @@ FocusScope {
 
                 Rectangle {
                     id: localToolbarBg
-                    color: VLCStyle.colors.bg
+
                     anchors.fill: parent
+                    color: VLCStyle.colors.lowerBanner
                 }
 
                 Rectangle {
@@ -213,7 +215,7 @@ FocusScope {
 
                     height: VLCStyle.border
 
-                    color: VLCStyle.colors.bannerBorder
+                    color: VLCStyle.colors.border
                 }
 
                 Widgets.NavigableRow {


=====================================
modules/gui/qt/maininterface/qml/MainDisplay.qml
=====================================
@@ -332,6 +332,16 @@ FocusScope {
                                 stackView.forceActiveFocus()
                             }
 
+                            Rectangle {
+                                // id: playlistLeftBorder
+
+                                anchors.top: parent.top
+                                anchors.bottom: parent.bottom
+                                anchors.left: parent.left
+
+                                width: VLCStyle.border
+                                color: VLCStyle.colors.border
+                            }
 
                             Widgets.HorizontalResizeHandle {
                                 id: resizeHandle


=====================================
modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
=====================================
@@ -52,7 +52,7 @@ FocusScope {
 
     Rectangle {
         anchors.fill: parent
-        color: VLCStyle.colors.bgAlt
+        color: VLCStyle.colors.expandDelegate
 
         Rectangle {
             anchors {
@@ -60,7 +60,7 @@ FocusScope {
                 left: parent.left
                 right: parent.right
             }
-            color: VLCStyle.colors.buttonBorder
+            color: VLCStyle.colors.border
             height: VLCStyle.expandDelegate_border
         }
 
@@ -70,7 +70,7 @@ FocusScope {
                 left: parent.left
                 right: parent.right
             }
-            color: VLCStyle.colors.buttonBorder
+            color: VLCStyle.colors.border
             height: VLCStyle.expandDelegate_border
         }
     }
@@ -243,7 +243,7 @@ FocusScope {
             Layout.fillHeight: true
 
             rowHeight: VLCStyle.tableRow_height
-            headerColor: VLCStyle.colors.bgAlt
+            headerColor: VLCStyle.colors.expandDelegate
 
             parentId: Helpers.get(root.model, "id")
             onParentIdChanged: {


=====================================
modules/gui/qt/medialibrary/qml/MusicArtistsAlbums.qml
=====================================
@@ -249,6 +249,18 @@ FocusScope {
                     }
                 }
 
+                Rectangle {
+                    // id: musicArtistLeftBorder
+
+                    anchors.top: parent.top
+                    anchors.bottom: parent.bottom
+                    anchors.right: parent.right
+
+                    width: VLCStyle.border
+                    color: VLCStyle.colors.border
+                }
+
+
                 Widgets.HorizontalResizeHandle {
                     id: resizeHandle
 


=====================================
modules/gui/qt/medialibrary/qml/VideoInfoExpandPanel.qml
=====================================
@@ -44,7 +44,7 @@ FocusScope {
 
         implicitHeight: contentLayout.implicitHeight + ( VLCStyle.margin_normal * 2 )
         width: parent.width
-        color: VLCStyle.colors.bgAlt
+        color: VLCStyle.colors.expandDelegate
 
         Rectangle {
             anchors {
@@ -52,7 +52,7 @@ FocusScope {
                 left: parent.left
                 right: parent.right
             }
-            color: VLCStyle.colors.buttonBorder
+            color: VLCStyle.colors.border
             height: VLCStyle.expandDelegate_border
         }
 
@@ -62,7 +62,7 @@ FocusScope {
                 left: parent.left
                 right: parent.right
             }
-            color: VLCStyle.colors.buttonBorder
+            color: VLCStyle.colors.border
             height: VLCStyle.expandDelegate_border
         }
 


=====================================
modules/gui/qt/player/qml/MiniPlayer.qml
=====================================
@@ -67,7 +67,7 @@ FocusScope {
         source: mainContent
         sourceRect: Qt.rect(root.x, root.y, root.width, root.height)
 
-        tint: VLCStyle.colors.blendColors(VLCStyle.colors.bg, VLCStyle.colors.banner, 0.85)
+        tint: VLCStyle.colors.lowerBanner
     }
 
     ControlBar {


=====================================
modules/gui/qt/player/qml/Player.qml
=====================================
@@ -561,7 +561,7 @@ FocusScope {
         edge: Widgets.DrawerExt.Edges.Right
         state: showPlaylist && mainInterface.playlistDocked ? "visible" : "hidden"
         component: Rectangle {
-            color: rootPlayer.colors.setColorAlpha(rootPlayer.colors.banner, 0.8)
+            color: rootPlayer.colors.setColorAlpha(rootPlayer.colors.topBanner, 0.8)
             width: rootPlayer.width/4
             height: playlistpopup.height
 


=====================================
modules/gui/qt/playlist/qml/PlaylistListView.qml
=====================================
@@ -103,8 +103,7 @@ FocusScope {
     Rectangle {
         id: parentRect
         anchors.fill: parent
-        color: colors.banner
-
+        color: colors.topBanner
         onActiveFocusChanged: {
             if (activeFocus)
                 listView.forceActiveFocus()


=====================================
modules/gui/qt/style/VLCColors.qml
=====================================
@@ -71,7 +71,7 @@ Item {
 
     // Banner
 
-    property color bannerBorder: (isThemeDark) ? "#303030" : "#e0e0e0"
+    property color border: (isThemeDark) ? "#303030" : "#e0e0e0"
 
     // Button
 
@@ -127,8 +127,11 @@ Item {
 
     property color textActiveSource: "red";
 
-    property color banner: systemPalette.window;
-    property color bannerHover: systemPalette.highlight;
+    property color topBanner: systemPalette.window
+    property color topBannerHover: systemPalette.highlight
+
+    property color lowerBanner: bg
+
     property color volsliderbg: "#bdbebf"
     property color volbelowmid: "#99d299"
     property color volabovemid: "#14d214"
@@ -146,7 +149,7 @@ Item {
     property color roundPlayCoverBorder: "#979797"
 
     // playlist
-    property color plItemHovered:  bannerHover
+    property color plItemHovered:  topBannerHover
     property color plItemSelected: blendColors(plItemHovered, plItemFocused, 0.5)
     property color plItemFocused: isThemeDark ? "#1E1E1E" : "#EDEDED"
 
@@ -156,7 +159,7 @@ Item {
 
     // glow colors:
     property color glowColor: setColorAlpha(blendColors(bg, black, 0.8), 0.35)
-    property color glowColorBanner: setColorAlpha(blendColors(banner, black, isThemeDark ? 0.25 : 0.35), 0.25)
+    property color glowColorBanner: setColorAlpha(blendColors(topBanner, black, isThemeDark ? 0.25 : 0.35), 0.25)
 
     property color sliderBarMiniplayerBgColor: isThemeDark ? "#FF929292" : "#FFEEEEEE"
 
@@ -178,6 +181,8 @@ Item {
     property color windowCSDButtonLightBg: "#80DADADA"
     property color windowCSDButtonBg: isThemeDark ? windowCSDButtonDarkBg : windowCSDButtonLightBg
 
+    property color expandDelegate
+
     state: {
         switch (mainInterface.colorScheme.scheme) {
         case ColorSchemeModel.System:
@@ -204,8 +209,8 @@ Item {
                 bg: "#fcfdfc"
                 bgInactive: "#fcfdfc"
 
-                bgAlt: "#eff0f1"
-                bgAltInactive: "#eff0f1"
+                bgAlt: "#ededed"
+                bgAltInactive: "#ededed"
 
                 bgHover: "#ededed"
                 bgHoverText: text
@@ -219,8 +224,9 @@ Item {
 
                 textActiveSource: "#ff950d";
 
-                banner: "#d8d8d8";
-                bannerHover: "#DDDDDD";
+                topBanner: "#ededed"
+                topBannerHover: "#f2f2f2"
+                lowerBanner: "#ffffff"
 
                 accent: "#ff610a";
                 alert: "#ff0000";
@@ -228,6 +234,8 @@ Item {
 
                 playerControlBarFg: "#333333"
 
+                expandDelegate: "#ffffff"
+
                 isThemeDark: false;
             }
         },
@@ -238,10 +246,10 @@ Item {
 
                 text: "#eff0f1"
                 textInactive: "#bdc3c7"
-                bg: "#232629"
+                bg: "#1a1a1a"
                 bgInactive: "#232629"
-                bgAlt: "#31363b"
-                bgAltInactive: "#31363b"
+                bgAlt: "#242424"
+                bgAltInactive: "#212121"
                 bgHover: "#303030"
                 bgHoverText: text
                 bgHoverInactive: "#3daee9"
@@ -251,13 +259,16 @@ Item {
                 buttonText: "#eff0f1"
                 buttonBorder: "#575b5f"
                 textActiveSource: "#ff950d"
-                banner: "#31363b"
-                bannerHover: "#272727"
+                topBanner: "#242424"
+                topBannerHover: "#272727"
+                lowerBanner: "#000000"
                 accent: "#ff8800"
                 alert: "#ff0000"
                 separator: "#2d2d2d"
                 playerControlBarFg: "#ffffff"
 
+                expandDelegate: "#000000"
+
                 isThemeDark: true
             }
         },
@@ -286,13 +297,17 @@ Item {
                 buttonBorder: blendColors(button, buttonText, 0.8)
 
                 textActiveSource: accent
-                banner: systemPalette.window
-                bannerHover: systemPalette.highlight
+
+                topBanner: systemPalette.window
+                topBannerHover: systemPalette.highlight
+                lowerBanner: systemPalette.base
 
                 separator: blendColors(bg, text, .95)
 
                 playerControlBarFg: systemPalette.text
 
+                expandDelegate: bg
+
                 isThemeDark: systemPalette.isDark
             }
         }


=====================================
modules/gui/qt/widgets/qml/BannerTabButton.qml
=====================================
@@ -38,7 +38,7 @@ T.TabButton {
     property bool showText: true
     property bool showCurrentIndicator: true
 
-    property color color: VLCStyle.colors.banner
+    property color color: VLCStyle.colors.topBanner
 
     // Settings
 


=====================================
modules/gui/qt/widgets/qml/FrostedGlassEffect.qml
=====================================
@@ -31,7 +31,7 @@ Rectangle {
 
     color: tint
 
-    property color tint: VLCStyle.colors.banner
+    property color tint: VLCStyle.colors.topBanner
     property real tintStrength: 0.7
     property real noiseStrength: 0.02
     property real exclusionStrength: 0.09


=====================================
modules/gui/qt/widgets/qml/LocalTabBar.qml
=====================================
@@ -33,7 +33,7 @@ NavigableRow {
         selected: model.name === row.currentView
         showCurrentIndicator: false
         height: VLCStyle.localToolbar_height
-        color: VLCStyle.colors.bg
+        color: VLCStyle.colors.lowerBanner
         onClicked: row.clicked(index)
     }
 }



View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/bb3350b78ca64c2941d360c34da9dc6e6b2d8937...4733f33e6dac5fe93f930de277b4dbe97c6dc176

-- 
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/bb3350b78ca64c2941d360c34da9dc6e6b2d8937...4733f33e6dac5fe93f930de277b4dbe97c6dc176
You're receiving this email because of your account on code.videolan.org.




More information about the vlc-commits mailing list