[vlc-commits] [Git][videolan/vlc][master] 19 commits: qml/VLCColors: Conform to the VLC color palette
Jean-Baptiste Kempf (@jbk)
gitlab at videolan.org
Sun Jul 11 11:14:57 UTC 2021
Jean-Baptiste Kempf pushed to branch master at VideoLAN / VLC
Commits:
21ce906b by Benjamin Arnaud at 2021-07-11T11:04:05+00:00
qml/VLCColors: Conform to the VLC color palette
- - - - -
77a2719a by Benjamin Arnaud at 2021-07-11T11:04:05+00:00
qml/PlaylistDelegate: Update look and feel and fix focus
- - - - -
cccb54b6 by Benjamin Arnaud at 2021-07-11T11:04:05+00:00
qml/GridItem: Update look and feel
- - - - -
d75be09c by Benjamin Arnaud at 2021-07-11T11:04:05+00:00
qml/TableViewDelegate: Update look and feel
- - - - -
7ed1cf82 by Benjamin Arnaud at 2021-07-11T11:04:05+00:00
qml/IconToolButton: Update look and feel
- - - - -
5f36677e by Benjamin Arnaud at 2021-07-11T11:04:05+00:00
qml/IconControlButton: Update look and feel
- - - - -
ecf031b6 by Benjamin Arnaud at 2021-07-11T11:04:05+00:00
qml: Create IconTrackButton
- - - - -
0821843c by Benjamin Arnaud at 2021-07-11T11:04:05+00:00
qml/ControlButtons: Update play button look and feel
- - - - -
f7105b4d by Benjamin Arnaud at 2021-07-11T11:04:05+00:00
qml/BannerTabButton: Update look and feel
- - - - -
c2380669 by Benjamin Arnaud at 2021-07-11T11:04:05+00:00
qml/TabButtonExt: Update look and feel
- - - - -
ec179a62 by Benjamin Arnaud at 2021-07-11T11:04:05+00:00
qml: Create ActionButtonPrimary
- - - - -
60b979d2 by Benjamin Arnaud at 2021-07-11T11:04:05+00:00
qml: Create ActionButtonOverlay
- - - - -
490f8bd6 by Benjamin Arnaud at 2021-07-11T11:04:05+00:00
qml/ArtistTopBanner: Update look and feel
- - - - -
ca4ad0b6 by Benjamin Arnaud at 2021-07-11T11:04:05+00:00
qml/MusicAlbumsGridExpandDelegate: Update look and feel
- - - - -
fdc89c30 by Benjamin Arnaud at 2021-07-11T11:04:05+00:00
qml/VideoInfoExpandPanel: Update look and feel
- - - - -
bd031e7e by Benjamin Arnaud at 2021-07-11T11:04:05+00:00
qml/ButtonsLayout: Remove 'legacy color forcing'
- - - - -
ecfb0ac5 by Benjamin Arnaud at 2021-07-11T11:04:05+00:00
qml/LanguageMenu: Update look and feel
- - - - -
d36d6a21 by Benjamin Arnaud at 2021-07-11T11:04:05+00:00
qml/CheckedDelegate: Update look and feel
- - - - -
736be1eb by Benjamin Arnaud at 2021-07-11T11:04:05+00:00
qml/SortControl: Update look and feel
- - - - -
23 changed files:
- modules/gui/qt/Makefile.am
- modules/gui/qt/medialibrary/qml/ArtistTopBanner.qml
- modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
- modules/gui/qt/medialibrary/qml/VideoInfoExpandPanel.qml
- modules/gui/qt/player/qml/ButtonsLayout.qml
- modules/gui/qt/player/qml/ControlButtons.qml
- modules/gui/qt/player/qml/LanguageMenu.qml
- modules/gui/qt/player/qml/Player.qml
- modules/gui/qt/player/qml/VolumeWidget.qml
- modules/gui/qt/playlist/qml/PlaylistDelegate.qml
- modules/gui/qt/style/VLCColors.qml
- modules/gui/qt/vlc.qrc
- + modules/gui/qt/widgets/qml/ActionButtonOverlay.qml
- + modules/gui/qt/widgets/qml/ActionButtonPrimary.qml
- modules/gui/qt/widgets/qml/BannerTabButton.qml
- modules/gui/qt/widgets/qml/CheckedDelegate.qml
- modules/gui/qt/widgets/qml/GridItem.qml
- modules/gui/qt/widgets/qml/IconControlButton.qml
- modules/gui/qt/widgets/qml/IconToolButton.qml
- + modules/gui/qt/widgets/qml/IconTrackButton.qml
- modules/gui/qt/widgets/qml/SortControl.qml
- modules/gui/qt/widgets/qml/TabButtonExt.qml
- modules/gui/qt/widgets/qml/TableViewDelegate.qml
Changes:
=====================================
modules/gui/qt/Makefile.am
=====================================
@@ -754,6 +754,8 @@ libqt_plugin_la_QML = \
gui/qt/util/qml/Helpers.js \
gui/qt/util/qml/KeyHelper.js \
gui/qt/util/qml/SelectableDelegateModel.qml \
+ gui/qt/widgets/qml/ActionButtonOverlay.qml \
+ gui/qt/widgets/qml/ActionButtonPrimary.qml \
gui/qt/widgets/qml/BannerTabButton.qml \
gui/qt/widgets/qml/BusyIndicatorExt.qml \
gui/qt/widgets/qml/CaptionLabel.qml \
@@ -777,6 +779,7 @@ libqt_plugin_la_QML = \
gui/qt/widgets/qml/IconButton.qml \
gui/qt/widgets/qml/IconControlButton.qml \
gui/qt/widgets/qml/IconToolButton.qml \
+ gui/qt/widgets/qml/IconTrackButton.qml \
gui/qt/widgets/qml/ImageToolButton.qml \
gui/qt/widgets/qml/KeyNavigableGridView.qml \
gui/qt/widgets/qml/KeyNavigableListView.qml \
=====================================
modules/gui/qt/medialibrary/qml/ArtistTopBanner.qml
=====================================
@@ -122,20 +122,18 @@ FocusScope {
Layout.topMargin: VLCStyle.margin_large
model: ObjectModel {
- Widgets.TabButtonExt {
+ Widgets.ActionButtonPrimary {
id: playActionBtn
iconTxt: VLCIcons.play
text: i18n.qtr("Play all")
- color: "white"
focus: true
onClicked: medialib.addAndPlay( artist.id )
}
- Widgets.TabButtonExt {
+ Widgets.ActionButtonOverlay {
id: enqueueActionBtn
iconTxt: VLCIcons.enqueue
text: i18n.qtr("Enqueue all")
- color: "white"
onClicked: medialib.addToPlaylist( artist.id )
}
}
=====================================
modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
=====================================
@@ -130,7 +130,7 @@ FocusScope {
Layout.alignment: Qt.AlignCenter
model: ObjectModel {
- Widgets.TabButtonExt {
+ Widgets.ActionButtonPrimary {
id: playActionBtn
iconTxt: VLCIcons.play_outline
=====================================
modules/gui/qt/medialibrary/qml/VideoInfoExpandPanel.qml
=====================================
@@ -118,7 +118,7 @@ FocusScope {
spacing: VLCStyle.margin_large
model: ObjectModel {
- Widgets.TabButtonExt {
+ Widgets.ActionButtonPrimary {
id: playActionBtn
iconTxt: VLCIcons.play_outline
=====================================
modules/gui/qt/player/qml/ButtonsLayout.qml
=====================================
@@ -90,20 +90,8 @@ FocusScope {
buttonloader.item.size = Qt.binding(function() { return defaultSize; })
// force colors:
- if (!!colors) {
- if (!!buttonloader.item.colors)
- buttonloader.item.colors = Qt.binding(function() { return colors; })
- else
- // legacy color forcing for IconToolButton etc. :
- if (!!buttonloader.item.color)
- buttonloader.item.color = Qt.binding(function() { return colors.playerFg; })
- if (!!buttonloader.item.bgColor)
- buttonloader.item.bgColor = Qt.binding(function() {
- return VLCStyle.colors.setColorAlpha(colors.playerBg, 0.8); })
- if (!!buttonloader.item.borderColor)
- buttonloader.item.borderColor = Qt.binding(function() { return colors.playerBorder; })
- if (!!buttonloader.item.colorFocus)
- buttonloader.item.colorFocus = Qt.binding(function() { return colors.bgFocus; })
+ if (!!colors && !!buttonloader.item.colors) {
+ buttonloader.item.colors = Qt.binding(function() { return colors; })
}
buttonloader.item.Navigation.parentItem = buttonsLayout
=====================================
modules/gui/qt/player/qml/ControlButtons.qml
=====================================
@@ -155,11 +155,13 @@ Item{
width: VLCStyle.icon_medium
height: width
- property bool isOpaque: history.current.view === "player"
+ scale: (playBtnMouseArea.pressed) ? 0.95 : 1.0
property VLCColors colors: VLCStyle.colors
- property color color: isOpaque ? colors.buttonText : "#303030"
- property color colorDisabled: isOpaque ? colors.textInactive : "#7f8c8d"
+
+ property color color: colors.buttonPlayIcon
+
+ property color colorDisabled: colors.textInactive
property bool paintOnly: false
@@ -181,11 +183,6 @@ Item{
name: "hovered"
when: interactionIndicator
- PropertyChanges {
- target: contentLabel
- color: "#FF610A"
- }
-
PropertyChanges {
target: hoverShadow
radius: VLCStyle.dp(24, VLCStyle.scale)
@@ -223,30 +220,6 @@ Item{
}
}
- Behavior on text {
- SequentialAnimation {
- NumberAnimation {
- target: contentLabel
- property: "font.pixelSize"
- to: 0
- easing.type: Easing.OutSine
- duration: 75
- }
-
- // this blank PropertyAction triggers the
- // text (icon) change amidst the size animation
- PropertyAction { }
-
- NumberAnimation {
- target: contentLabel
- property: "font.pixelSize"
- to: VLCIcons.pixelSize(VLCStyle.icon_normal)
- easing.type: Easing.InSine
- duration: 75
- }
- }
- }
-
font.pixelSize: VLCIcons.pixelSize(VLCStyle.icon_normal)
font.family: VLCIcons.fontFamily
@@ -257,8 +230,8 @@ Item{
background: Item {
Gradient {
id: playBtnGradient
- GradientStop { position: 0.0; color: "#f89a06" }
- GradientStop { position: 1.0; color: "#e25b01" }
+ GradientStop { position: 0.0; color: VLCStyle.colors.buttonPlayA }
+ GradientStop { position: 1.0; color: VLCStyle.colors.buttonPlayB }
}
MouseArea {
@@ -332,7 +305,6 @@ Item{
anchors.margins: VLCStyle.dp(1, VLCStyle.scale)
color: VLCStyle.colors.white
- opacity: playBtn.isOpaque ? 0.4 : 1.0
}
Rectangle {
=====================================
modules/gui/qt/player/qml/LanguageMenu.qml
=====================================
@@ -147,17 +147,15 @@ T.Popup {
"component": undefined
}]
- delegate: Widgets.IconToolButton {
- id: btn
-
+ delegate: Widgets.IconTrackButton {
iconText: modelData.icon
- color: "white"
+
size: VLCStyle.dp(40, VLCStyle.scale)
x: (btnsCol.width - width) / 2
highlighted: index === 3
&& player.subtitleTracks.multiSelect
- ToolTip.visible: btn.hovered || btn.activeFocus
+ ToolTip.visible: (hovered || activeFocus)
ToolTip.text: modelData.tooltip
ToolTip.delay: 1000
ToolTip.toolTip.z: 2
@@ -217,7 +215,7 @@ T.Popup {
x: 0
y: 0
- width: VLCStyle.dp(2, VLCStyle.scale)
+ width: VLCStyle.margin_xxxsmall
height: tracksListContainer.height
color: "white"
@@ -246,12 +244,11 @@ T.Popup {
- parent.leftPadding - parent.rightPadding
}
- Widgets.IconToolButton {
+ Widgets.IconTrackButton {
id: addBtn
iconText: VLCIcons.add
size: VLCStyle.icon_normal
- color: "white"
focus: true
onClicked: {
switch (index) {
@@ -293,7 +290,7 @@ T.Popup {
focus: true
text: model.display
- width: tracksListContainer.width
+ width: tracksListContainer.width - VLCStyle.margin_xxxsmall
height: VLCStyle.dp(40, VLCStyle.scale)
opacity: hovered || activeFocus || checked ? 1 : .6
font.weight: hovered
@@ -332,13 +329,12 @@ T.Popup {
Layout.topMargin: VLCStyle.margin_large
Layout.fillHeight: true
- Widgets.IconToolButton {
+ Widgets.IconTrackButton {
id: backBtn
anchors.horizontalCenter: parent.horizontalCenter
size: VLCStyle.dp(36, VLCStyle.scale)
iconText: VLCIcons.back
- color: "white"
onClicked: {
control._updateWidth(true)
@@ -349,7 +345,7 @@ T.Popup {
}
Rectangle {
- Layout.preferredWidth: VLCStyle.dp(2, VLCStyle.scale)
+ Layout.preferredWidth: VLCStyle.margin_xxxsmall
Layout.fillHeight: true
color: "white"
opacity: .1
@@ -426,11 +422,10 @@ T.Popup {
Navigation.rightItem: audioDelaySpinReset
}
- Widgets.TabButtonExt {
+ Widgets.ActionButtonOverlay {
id: audioDelaySpinReset
text: i18n.qtr("Reset")
- color: "white"
onClicked: audioDelaySpin.value = 0
Navigation.leftItem: audioDelaySpin
@@ -492,11 +487,10 @@ T.Popup {
Navigation.rightItem: primarySubSpinReset
}
- Widgets.TabButtonExt {
+ Widgets.ActionButtonOverlay {
id: primarySubSpinReset
text: i18n.qtr("Reset")
- color: "white"
focus: true
onClicked: primarySubSpin.value = 0
Navigation.leftItem: primarySubSpin
@@ -552,11 +546,10 @@ T.Popup {
Navigation.rightItem: secondarySubSpinReset
}
- Widgets.TabButtonExt {
+ Widgets.ActionButtonOverlay {
id: secondarySubSpinReset
text: i18n.qtr("Reset")
- color: "white"
onClicked: secondarySubSpin.value = 0
Navigation.leftItem: secondarySubSpin
Navigation.upItem: primarySubSpinReset
@@ -583,13 +576,12 @@ T.Popup {
Layout.topMargin: VLCStyle.margin_large
Layout.fillHeight: true
- Widgets.IconToolButton {
+ Widgets.IconTrackButton {
id: backBtn
anchors.horizontalCenter: parent.horizontalCenter
size: VLCStyle.dp(36, VLCStyle.scale)
iconText: VLCIcons.back
- color: "white"
onClicked: {
control._updateWidth(true)
@@ -600,7 +592,7 @@ T.Popup {
}
Rectangle {
- Layout.preferredWidth: VLCStyle.dp(2, VLCStyle.scale)
+ Layout.preferredWidth: VLCStyle.margin_xxxsmall
Layout.fillHeight: true
color: "white"
opacity: .1
@@ -678,11 +670,10 @@ T.Popup {
Navigation.rightItem: subSpeedSpinReset
}
- Widgets.TabButtonExt {
+ Widgets.ActionButtonOverlay {
id: subSpeedSpinReset
text: i18n.qtr("Reset")
- color: "white"
onClicked: subSpeedSpin.value = 10
=====================================
modules/gui/qt/player/qml/Player.qml
=====================================
@@ -466,6 +466,7 @@ FocusScope {
onClicked: player.jumpBwd()
text: i18n.qtr("Step back")
color: rootPlayer.colors.playerFg
+ colorHover: rootPlayer.colors.buttonTextHover
colorFocus: rootPlayer.colors.bgFocus
}
@@ -475,6 +476,7 @@ FocusScope {
onClicked: player.toggleVisualization()
text: i18n.qtr("Visualization")
color: rootPlayer.colors.playerFg
+ colorHover: rootPlayer.colors.buttonTextHover
colorFocus: rootPlayer.colors.bgFocus
}
@@ -484,6 +486,7 @@ FocusScope {
onClicked: player.jumpFwd()
text: i18n.qtr("Step forward")
color: rootPlayer.colors.playerFg
+ colorHover: rootPlayer.colors.buttonTextHover
colorFocus: rootPlayer.colors.bgFocus
}
}
=====================================
modules/gui/qt/player/qml/VolumeWidget.qml
=====================================
@@ -68,6 +68,7 @@ FocusScope{
VLCIcons.volume_high
text: i18n.qtr("Mute")
color: widgetfscope.color
+ colorHover: colors.buttonTextHover
colorFocus: colors.bgFocus
onClicked: player.muted = !player.muted
=====================================
modules/gui/qt/playlist/qml/PlaylistDelegate.qml
=====================================
@@ -38,26 +38,20 @@ Rectangle {
property alias hovered: mouseArea.containsMouse
- border.width: VLCStyle.dp(1)
- border.color: {
- if (activeFocus && (listView.mode === PlaylistListView.Mode.Select))
- colors.caption
- else
- "transparent"
- }
+ height: artworkItem.height * 1.5
color: {
- if ((selected && activeFocus && listView.mode !== PlaylistListView.Mode.Select) || (hovered && selected))
- colors.plItemFocused
+ if (selected)
+ return colors.gridSelect;
else if (hovered)
- colors.plItemHovered
- else if (selected)
- colors.plItemSelected
+ return colors.listHover;
else
- "transparent"
+ return "transparent";
}
- height: artworkItem.height * 1.5
+ border.width: (activeFocus) ? VLCStyle.focus_border : 0
+
+ border.color: VLCStyle.colors.bgFocus
onHoveredChanged: {
if(hovered)
=====================================
modules/gui/qt/style/VLCColors.qml
=====================================
@@ -67,34 +67,56 @@ Item {
property color bgFocus: (isThemeDark) ? white : black
- //---------------------------------------------------------------------------------------------
// Button
property color button: systemPalette.button
property color buttonHover: (isThemeDark) ? "#303030" : "#f2f2f2"
- property color buttonText : systemPalette.buttonText
+ property color buttonText: systemPalette.buttonText
property color buttonTextHover: bgFocus
property color buttonBorder: blendColors(systemPalette.button, systemPalette.buttonText, 0.8)
- //---------------------------------------------------------------------------------------------
- // DropDown
+ // ButtonBanner (BannerTabButton)
- property color dropDown: (isThemeDark) ? "#272727" : "#e9e9e9"
+ property color buttonBannerDark: "#a6a6a6"
- // FIXME: We might want another color for this.
- property color dropDownBorder: text
+ property color buttonBanner: (isThemeDark) ? buttonBannerDark : "#666666"
+
+ // ButtonPrimary (ActionButtonPrimary)
+
+ property color buttonPrimaryHover: (isThemeDark) ? "#e67A00" : "#e65609"
+
+ // ButtonPlayer (IconControlButton)
+
+ property color buttonPlayer: (isThemeDark) ? "#e5e5e5" : "#484848"
+
+ // ButtonPlay (ControlButtons)
+
+ property color buttonPlayA: "#f89a06"
+ property color buttonPlayB: "#e25b01"
+
+ property color buttonPlayIcon: "#333333"
+
+ // GridItem
+
+ property color gridSelect: (isThemeDark) ? "#303030" : "#e5e5e5"
+
+ // ListItem
+
+ property color listHover: (isThemeDark) ? "#272727" : "#e9e9e9"
+
+ // TrackItem (CheckedDelegate)
+
+ property color trackItem: "#303030"
+ property color trackItemHover: "#2a2a2a"
- //---------------------------------------------------------------------------------------------
// TextField
- property color textField : (isThemeDark) ? "#6f6f6f" : "#999999"
+ property color textField: (isThemeDark) ? "#6f6f6f" : "#999999"
property color textFieldHover: (isThemeDark) ? "#b7b7b7" : "#4c4c4c"
- //---------------------------------------------------------------------------------------------
-
property color icon: isThemeDark ? white : "#616161"
property color textActiveSource: "red";
@@ -136,7 +158,7 @@ Item {
property color tooltipColor: systemPalette.tooltip
//vlc orange
- property color accent: (isThemeDark) ? "ff8800" : "#ff610a"
+ property color accent: (isThemeDark) ? "#ff8800" : "#ff610a"
property color accentText: "#ffffff";
=====================================
modules/gui/qt/vlc.qrc
=====================================
@@ -190,6 +190,8 @@
<file alias="MiniPlayerBottomMargin.qml">maininterface/qml/MiniPlayerBottomMargin.qml</file>
</qresource>
<qresource prefix="/widgets">
+ <file alias="ActionButtonOverlay.qml">widgets/qml/ActionButtonOverlay.qml</file>
+ <file alias="ActionButtonPrimary.qml">widgets/qml/ActionButtonPrimary.qml</file>
<file alias="BannerTabButton.qml">widgets/qml/BannerTabButton.qml</file>
<file alias="BusyIndicatorExt.qml">widgets/qml/BusyIndicatorExt.qml</file>
<file alias="AnimatedBackground.qml">widgets/qml/AnimatedBackground.qml</file>
@@ -211,6 +213,7 @@
<file alias="ImageToolButton.qml">widgets/qml/ImageToolButton.qml</file>
<file alias="TextToolButton.qml">widgets/qml/TextToolButton.qml</file>
<file alias="IconToolButton.qml">widgets/qml/IconToolButton.qml</file>
+ <file alias="IconTrackButton.qml">widgets/qml/IconTrackButton.qml</file>
<file alias="StackViewExt.qml">widgets/qml/StackViewExt.qml</file>
<file alias="ComboBoxExt.qml">widgets/qml/ComboBoxExt.qml</file>
<file alias="SpinBoxExt.qml">widgets/qml/SpinBoxExt.qml</file>
=====================================
modules/gui/qt/widgets/qml/ActionButtonOverlay.qml
=====================================
@@ -0,0 +1,31 @@
+/*****************************************************************************
+ * Copyright (C) 2019 VLC authors and VideoLAN
+ *
+ * Authors: Benjamin Arnaud <bunjee at omega.gg>
+ *
+ * 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 "qrc:///style/"
+
+TabButtonExt {
+ // Style
+ foregroundColor: (hovered) ? VLCStyle.colors.white
+ : VLCStyle.colors.buttonBannerDark
+
+ colorFocus: VLCStyle.colors.white
+}
=====================================
modules/gui/qt/widgets/qml/ActionButtonPrimary.qml
=====================================
@@ -0,0 +1,34 @@
+/*****************************************************************************
+ * Copyright (C) 2019 VLC authors and VideoLAN
+ *
+ * Authors: Benjamin Arnaud <bunjee at omega.gg>
+ *
+ * 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 "qrc:///style/"
+
+TabButtonExt {
+ // Style
+
+ backgroundColor: (hovered) ? VLCStyle.colors.buttonPrimaryHover
+ : VLCStyle.colors.accent
+
+ foregroundColor: "white"
+
+ colorFocus: VLCStyle.colors.white
+}
=====================================
modules/gui/qt/widgets/qml/BannerTabButton.qml
=====================================
@@ -29,32 +29,65 @@ import "qrc:///style/"
T.TabButton {
id: control
- property color color: VLCStyle.colors.banner
+ // Properties
+
+ property bool selected: false
+
+ property string iconTxt: ""
+
property bool showText: true
property bool showCurrentIndicator: true
- text: model.displayText
- padding: 0
- width: control.showText ? VLCStyle.bannerTabButton_width_large : VLCStyle.banner_icon_size
+ property color color: VLCStyle.colors.banner
+
+ // Settings
+
+ width: control.showText ? VLCStyle.bannerTabButton_width_large
+ : VLCStyle.banner_icon_size
+
height: implicitHeight
+
implicitWidth: contentItem.implicitWidth
implicitHeight: contentItem.implicitHeight
- property string iconTxt: ""
- property bool selected: false
+ padding: 0
+
+ text: model.displayText
+
+ // Keys
Keys.priority: Keys.AfterItem
+
Keys.onPressed: Navigation.defaultKeyAction(event)
+ // Private functions
+
+ function _getBackground() {
+ if (activeFocus || hovered)
+ return VLCStyle.colors.buttonHover;
+ else
+ return color;
+ }
+
+ function _getForeground() {
+ if (activeFocus || hovered || selected)
+ return VLCStyle.colors.buttonTextHover;
+ else
+ return VLCStyle.colors.buttonBanner;
+ }
+
+ // Childs
+
background: Widgets.AnimatedBackground {
height: control.height
width: control.width
+
active: control.activeFocus
+
animationDuration: 140
- foregroundColor: (control.activeFocus || control.hovered) ? VLCStyle.colors.buttonTextHover
- : ((control.selected) ? VLCStyle.colors.text : VLCStyle.colors.menuCaption)
- backgroundColor: (control.activeFocus || control.hovered) ? VLCStyle.colors.buttonHover
- : control.color
+
+ backgroundColor: _getBackground()
+ foregroundColor: _getForeground()
}
contentItem: Item {
@@ -65,33 +98,44 @@ T.TabButton {
id: tabRow
anchors.centerIn: parent
+
spacing: VLCStyle.margin_xsmall
Widgets.IconLabel {
- id: icon
-
text: control.iconTxt
+
+ color: (control.activeFocus ||
+ control.hovered ||
+ control.selected) ? VLCStyle.colors.accent
+ : VLCStyle.colors.text
+
font.pixelSize: VLCIcons.pixelSize(VLCStyle.banner_icon_size)
- color: (control.activeFocus || control.hovered || control.selected) ? VLCStyle.colors.accent
- : VLCStyle.colors.text
}
Label {
- id: txt
-
visible: showText
- font.pixelSize: VLCStyle.fontSize_normal
- font.weight: (control.activeFocus || control.hovered || control.selected) ? Font.DemiBold : Font.Normal
+
text: control.text
+
color: control.background.foregroundColor
+
+ font.pixelSize: VLCStyle.fontSize_normal
+
+ font.weight: (control.activeFocus ||
+ control.hovered ||
+ control.selected) ? Font.DemiBold
+ : Font.Normal
}
}
Widgets.CurrentIndicator {
width: tabRow.width
+
orientation: Qt.Horizontal
+
margin: VLCStyle.dp(3, VLCStyle.scale)
- visible: control.showCurrentIndicator && control.selected
+
+ visible: (control.showCurrentIndicator && control.selected)
}
}
}
=====================================
modules/gui/qt/widgets/qml/CheckedDelegate.qml
=====================================
@@ -26,38 +26,68 @@ import "qrc:///util/KeyHelper.js" as KeyHelper
T.ItemDelegate {
id: control
- checkable: true
- font.pixelSize: VLCStyle.fontSize_large
+ // Settings
+
leftPadding: VLCStyle.margin_xlarge
rightPadding: VLCStyle.margin_xsmall
- background: Rectangle {
- color: control.hovered || control.activeFocus ? "#2A2A2A" : "transparent"
+ checkable: true
+
+ font.pixelSize: VLCStyle.fontSize_large
+
+ // Childs
+
+ background: AnimatedBackground {
+ active: control.activeFocus
+
+ backgroundColor: {
+ if (control.hovered) {
+ if (control.checked)
+ return VLCStyle.colors.trackItemHover;
+ else
+ return VLCStyle.colors.trackItem;
+ } else if (control.checked)
+ return VLCStyle.colors.trackItem;
+ else
+ return "transparent"
+ }
+
+ activeBorderColor: VLCStyle.colors.white
}
contentItem: Item { // don't use a row, it will move text when control is unchecked
IconLabel {
id: checkIcon
- text: VLCIcons.check
- visible: control.checked
height: parent.height
- font.pixelSize: VLCIcons.pixelSize(VLCStyle.icon_checkedDelegate)
- color: "white"
+
verticalAlignment: Text.AlignVCenter
+
+ visible: control.checked
+
+ text: VLCIcons.check
+
+ color: "white"
+
+ font.pixelSize: VLCIcons.pixelSize(VLCStyle.icon_checkedDelegate)
}
MenuLabel {
id: text
anchors.left: checkIcon.right
+
height: parent.height
- font: control.font
+ width: parent.width - checkIcon.width
+
+ leftPadding: VLCStyle.margin_normal
+
+ verticalAlignment: Text.AlignVCenter
+
text: control.text
+ font: control.font
+
color: "white"
- verticalAlignment: Text.AlignVCenter
- leftPadding: VLCStyle.margin_normal
- width: parent.width - checkIcon.width
}
}
}
=====================================
modules/gui/qt/widgets/qml/GridItem.qml
=====================================
@@ -191,8 +191,8 @@ MouseArea {
active: root.activeFocus
backgroundColor: root.selected
- ? VLCStyle.colors.bgHover
- : VLCStyle.colors.setColorAlpha(VLCStyle.colors.bgHover, 0)
+ ? VLCStyle.colors.gridSelect
+ : VLCStyle.colors.setColorAlpha(VLCStyle.colors.gridSelect, 0)
visible: backgroundAnimationRunning || borderColorAnimationRunning || background.active || root.selected
}
=====================================
modules/gui/qt/widgets/qml/IconControlButton.qml
=====================================
@@ -15,22 +15,22 @@
* 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/"
IconToolButton {
- id: control
+ // Properties
property VLCColors colors: VLCStyle.colors
- backgroundColor: "transparent"
- backgroundColorHover: "transparent"
+ // Style
- color: colors.playerControlBarFg
- colorHover: colors.playerControlBarFg
+ color: colors.buttonPlayer
+ colorHover: colors.buttonTextHover
colorHighlighted: colors.accent
- colorDisabled: colors.blendColors(control.colors.playerBg, control.colors.playerControlBarFg, .75)
+ colorDisabled: colors.blendColors(colors.playerBg, colors.playerControlBarFg, 0.75)
+
colorFocus: colors.bgFocus
}
=====================================
modules/gui/qt/widgets/qml/IconToolButton.qml
=====================================
@@ -15,8 +15,10 @@
* 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 org.videolan.vlc 0.1
import "qrc:///style/"
@@ -24,15 +26,20 @@ import "qrc:///style/"
ToolButton {
id: control
+ // Properties
+
property bool paintOnly: false
property int size: VLCStyle.icon_normal
property string iconText: ""
+ // Style
+
// background colors
+ // NOTE: We want the background to be transparent for IconToolButton(s).
property color backgroundColor: "transparent"
- property color backgroundColorHover: VLCStyle.colors.buttonHover
+ property color backgroundColorHover: "transparent"
// foreground colors based on state
property color color: VLCStyle.colors.icon
@@ -40,79 +47,92 @@ ToolButton {
property color colorHighlighted: VLCStyle.colors.accent
property color colorDisabled: VLCStyle.colors.textInactive
+ // Aliases
+
// active border color
- property color colorFocus: VLCStyle.colors.bgFocus
+ property alias colorFocus: background.activeBorderColor
- enabled: !paintOnly
+ // Settings
padding: 0
- ToolTip.text: control.text
+ enabled: !paintOnly
+
+ ToolTip.text: text
ToolTip.delay: 500
- contentItem: Label {
- id: text
+ // Keys
- text: control.iconText
- color: background.foregroundColor
+ Keys.priority: Keys.AfterItem
- anchors.centerIn: parent
+ Keys.onPressed: Navigation.defaultKeyAction(event)
- font.pixelSize: VLCIcons.pixelSize(control.size)
- font.family: VLCIcons.fontFamily
- font.underline: control.font.underline
+ // Childs
+
+ background: AnimatedBackground {
+ id: background
+
+ implicitWidth: size
+ implicitHeight: size
+
+ active: control.activeFocus
+
+ backgroundColor: {
+ if (control.hovered)
+ return control.backgroundColorHover;
+ // if base color is transparent, animation starts with black color
+ else if (control.backgroundColor.a === 0)
+ return VLCStyle.colors.setColorAlpha(control.backgroundColorHover, 0);
+ else
+ return control.backgroundColor;
+ }
+
+ foregroundColor: {
+ if (control.highlighted)
+ return control.colorHighlighted;
+ else if (control.hovered)
+ return control.colorHover;
+ else if (!control.enabled)
+ return control.colorDisabled;
+ else
+ return control.color;
+ }
+
+ activeBorderColor: VLCStyle.colors.bgFocus
+ }
+
+ contentItem: Label {
+ anchors.centerIn: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
+ text: iconText
+
+ color: background.foregroundColor
+
+ font.pixelSize: VLCIcons.pixelSize(size)
+ font.family: VLCIcons.fontFamily
+ font.underline: control.font.underline
+
Accessible.ignored: true
Label {
- text: VLCIcons.active_indicator
- color: background.foregroundColor
- visible: !control.paintOnly && control.checked
-
anchors.centerIn: parent
- font.pixelSize: VLCIcons.pixelSize(control.size)
- font.family: VLCIcons.fontFamily
-
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
- Accessible.ignored: true
- }
- }
+ visible: !paintOnly && control.checked
- background: AnimatedBackground {
- id: background
+ text: VLCIcons.active_indicator
- active: control.activeFocus
+ color: background.foregroundColor
- backgroundColor: {
- if (control.hovered)
- return control.backgroundColorHover
- if (control.backgroundColor.a === 0) // if base color is transparent, animation starts with black color
- return VLCStyle.colors.setColorAlpha(control.backgroundColorHover, 0)
- return control.backgroundColor
- }
+ font.pixelSize: VLCIcons.pixelSize(size)
+ font.family: VLCIcons.fontFamily
- foregroundColor: {
- if (control.hovered)
- return control.colorHover
- if (control.highlighted)
- return control.colorHighlighted
- if (!control.enabled)
- return control.colorDisabled
- return control.color
+ Accessible.ignored: true
}
-
- activeBorderColor: control.colorFocus
-
- implicitHeight: control.size
- implicitWidth : control.size
}
-
- Keys.priority: Keys.AfterItem
- Keys.onPressed: Navigation.defaultKeyAction(event)
}
=====================================
modules/gui/qt/widgets/qml/IconTrackButton.qml
=====================================
@@ -0,0 +1,30 @@
+/*****************************************************************************
+ * Copyright (C) 2021 VLC authors and VideoLAN
+ *
+ * Authors: Benjamin Arnaud <bunjee at omega.gg>
+ *
+ * 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 "qrc:///style/"
+
+IconToolButton {
+ // Style
+ color: VLCStyle.colors.white
+ colorHover: VLCStyle.colors.buttonBannerDark
+ colorFocus: VLCStyle.colors.white
+}
=====================================
modules/gui/qt/widgets/qml/SortControl.qml
=====================================
@@ -191,7 +191,7 @@ FocusScope {
animationDuration: 0
backgroundColor: (closeAnimation.running === false && itemDelegate.hovered)
- ? VLCStyle.colors.dropDown
+ ? VLCStyle.colors.listHover
: "transparent"
}
@@ -270,7 +270,9 @@ FocusScope {
id: bgRect
border.width: VLCStyle.dp(1)
- border.color: colors.dropDownBorder
+
+ // FIXME: We might want another color for this.
+ border.color: VLCStyle.colors.text
Loader {
id: effectLoader
=====================================
modules/gui/qt/widgets/qml/TabButtonExt.qml
=====================================
@@ -28,39 +28,60 @@ import "qrc:///style/"
T.TabButton {
id: control
- text: model.displayText
- padding: 0
+ // Properties
+
+ property bool selected: false
+
+ property bool busy: false
+
+ property string iconTxt: ""
+
+ property int iconSize: VLCStyle.icon_normal
+
+ property color color: VLCStyle.colors.text
+
+ // Aliases
+
+ property alias backgroundColor: background.backgroundColor
+ property alias foregroundColor: background.foregroundColor
+
+ property alias colorFocus: background.activeBorderColor
+
+ // Settings
width: implicitWidth
height: implicitHeight
+
implicitWidth: contentItem.implicitWidth
implicitHeight: contentItem.implicitHeight
- property string iconTxt: ""
- property int iconSize: VLCStyle.icon_normal
- property bool selected: false
- property color color: VLCStyle.colors.text
- property bool busy: false
+ padding: 0
+
+ text: model.displayText
font.pixelSize: VLCStyle.fontSize_normal
+ // Keys
+
Keys.priority: Keys.AfterItem
+
Keys.onPressed: Navigation.defaultKeyAction(event)
+ // Childs
+
background: Widgets.AnimatedBackground {
id: background
height: control.height
- width : control.width
+ width: control.width
active: control.activeFocus
- backgroundColor: control.hovered ? VLCStyle.colors.buttonHover
- : VLCStyle.colors.setColorAlpha(VLCStyle.colors.buttonHover, 0)
+ foregroundColor: (hovered) ? VLCStyle.colors.buttonTextHover
+ : VLCStyle.colors.buttonBanner
- foregroundColor: control.hovered ? VLCStyle.colors.buttonTextHover
- : control.color
+ activeBorderColor: VLCStyle.colors.bgFocus
}
contentItem: Item {
@@ -70,7 +91,7 @@ T.TabButton {
Row {
id: tabRow
- anchors.fill: parent
+ anchors.fill: parent
padding: VLCStyle.margin_xsmall
spacing: VLCStyle.margin_xsmall
@@ -78,19 +99,24 @@ T.TabButton {
Item {
width: implicitWidth
height: implicitHeight
+
implicitWidth: VLCStyle.fontHeight_normal
implicitHeight: VLCStyle.fontHeight_normal
- visible: control.iconTxt !== ""
+
+ visible: (control.iconTxt !== "")
Widgets.IconLabel {
id: icon
anchors.fill: parent
+
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
- visible: !control.busy
+
+ visible: (!control.busy)
text: control.iconTxt
+
color: background.foregroundColor
font.pixelSize: VLCIcons.pixelSize(control.iconSize)
@@ -98,26 +124,29 @@ T.TabButton {
BusyIndicator {
anchors.centerIn: parent
+
running: control.busy
}
}
-
Widgets.ListLabel {
text: control.text
+
color: background.foregroundColor
}
}
Rectangle {
- anchors {
- left: tabRow.left
- right: tabRow.right
- bottom: tabRow.bottom
- }
+ anchors.left: tabRow.left
+ anchors.right: tabRow.right
+ anchors.bottom: tabRow.bottom
+
height: 2
+
visible: control.selected
+
color: "transparent"
+
border.color: VLCStyle.colors.accent
}
}
=====================================
modules/gui/qt/widgets/qml/TableViewDelegate.qml
=====================================
@@ -25,9 +25,7 @@ import "qrc:///style/"
Widgets.AnimatedBackground {
id: delegate
- //---------------------------------------------------------------------------------------------
// Properties
- //---------------------------------------------------------------------------------------------
property var rowModel: model
@@ -37,9 +35,7 @@ Widgets.AnimatedBackground {
property int _modifiersOnLastPress: Qt.NoModifier
- //---------------------------------------------------------------------------------------------
// Settings
- //---------------------------------------------------------------------------------------------
width: view.width
@@ -50,14 +46,15 @@ Widgets.AnimatedBackground {
animationDuration: 140
backgroundColor: {
- if (delegate.selected || hoverArea.containsMouse)
- return VLCStyle.colors.bgHover
- return VLCStyle.colors.setColorAlpha(VLCStyle.colors.bgHover)
+ if (delegate.selected)
+ return VLCStyle.colors.gridSelect;
+ else if (hoverArea.containsMouse)
+ return VLCStyle.colors.listHover;
+ else
+ return VLCStyle.colors.setColorAlpha(VLCStyle.colors.listHover, 0);
}
- //---------------------------------------------------------------------------------------------
// Connections
- //---------------------------------------------------------------------------------------------
Connections {
target: selectionDelegateModel
@@ -69,14 +66,11 @@ Widgets.AnimatedBackground {
}
}
- //---------------------------------------------------------------------------------------------
// Childs
- //---------------------------------------------------------------------------------------------
MouseArea {
id: hoverArea
- //-----------------------------------------------------------------------------------------
// Settings
anchors.fill: parent
@@ -91,7 +85,6 @@ Widgets.AnimatedBackground {
drag.axis: Drag.XAndYAxis
- //-----------------------------------------------------------------------------------------
// Events
onPressed: _modifiersOnLastPress = mouse.modifiers
@@ -146,7 +139,6 @@ Widgets.AnimatedBackground {
root.dragItem.Drag.active = drag.active;
}
- //-----------------------------------------------------------------------------------------
// Childs
Row {
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/786e351ab9aa45431881a189caf673ae454d74e6...736be1eb0c4f9a6debd5ca77fc36cdb04f2e967b
--
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/786e351ab9aa45431881a189caf673ae454d74e6...736be1eb0c4f9a6debd5ca77fc36cdb04f2e967b
You're receiving this email because of your account on code.videolan.org.
More information about the vlc-commits
mailing list