[vlc-commits] [Git][videolan/vlc][master] 13 commits: qml/VLCStyle: Add focus_border and remove selectBorder
Jean-Baptiste Kempf
gitlab at videolan.org
Sun Jun 13 12:22:22 UTC 2021
Jean-Baptiste Kempf pushed to branch master at VideoLAN / VLC
Commits:
af478692 by Benjamin Arnaud at 2021-06-13T11:48:21+00:00
qml/VLCStyle: Add focus_border and remove selectBorder
- - - - -
2a2c9a3d by Benjamin Arnaud at 2021-06-13T11:48:21+00:00
qml/VLCColors: Add button, dropdown and update colors
Modifications based on the design guidelines
- - - - -
3673535b by Benjamin Arnaud at 2021-06-13T11:48:21+00:00
qml: Create BackgroundFocus
- - - - -
5a7236a6 by Benjamin Arnaud at 2021-06-13T11:48:21+00:00
qml/FocusBackground: Update implementation and improve color animation
- - - - -
03569a1b by Benjamin Arnaud at 2021-06-13T11:48:21+00:00
qml/GridItem: Update focus implementation
- - - - -
8b18c4d1 by Benjamin Arnaud at 2021-06-13T11:48:21+00:00
qml/TableViewDelegate: Update focus implementation
- - - - -
fdf83dfd by Benjamin Arnaud at 2021-06-13T11:48:21+00:00
qml/BannerTabButton: Update focus and colors
- - - - -
c1a33f25 by Benjamin Arnaud at 2021-06-13T11:48:21+00:00
qml/IconToolButton: Update focus implementation
- - - - -
8a9d7f16 by Benjamin Arnaud at 2021-06-13T11:48:21+00:00
qml/DiscoverUrlDisplay: Update border colors
- - - - -
6c578f3d by Benjamin Arnaud at 2021-06-13T11:48:21+00:00
qml/TabButtonExt: Update focus implementation
- - - - -
c1ab779a by Benjamin Arnaud at 2021-06-13T11:48:21+00:00
qml/TextToolButton: Update focus implementation
- - - - -
7818244d by Benjamin Arnaud at 2021-06-13T11:48:21+00:00
qml/SortControl: Update focus and colors
- - - - -
7c295ee3 by Benjamin Arnaud at 2021-06-13T11:48:21+00:00
qml: Rename FocusBackground to BackgroundHover
- - - - -
17 changed files:
- modules/gui/qt/Makefile.am
- modules/gui/qt/network/qml/DiscoverUrlDisplay.qml
- modules/gui/qt/player/qml/ControlButtons.qml
- modules/gui/qt/player/qml/PlaybackSpeed.qml
- modules/gui/qt/player/qml/PlayerMenuItem.qml
- modules/gui/qt/style/VLCColors.qml
- modules/gui/qt/style/VLCStyle.qml
- modules/gui/qt/vlc.qrc
- + modules/gui/qt/widgets/qml/BackgroundFocus.qml
- modules/gui/qt/widgets/qml/FocusBackground.qml → modules/gui/qt/widgets/qml/BackgroundHover.qml
- modules/gui/qt/widgets/qml/BannerTabButton.qml
- modules/gui/qt/widgets/qml/GridItem.qml
- modules/gui/qt/widgets/qml/IconToolButton.qml
- modules/gui/qt/widgets/qml/SortControl.qml
- modules/gui/qt/widgets/qml/TabButtonExt.qml
- modules/gui/qt/widgets/qml/TableViewDelegate.qml
- modules/gui/qt/widgets/qml/TextToolButton.qml
Changes:
=====================================
modules/gui/qt/Makefile.am
=====================================
@@ -751,6 +751,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/BackgroundFocus.qml \
+ gui/qt/widgets/qml/BackgroundHover.qml \
gui/qt/widgets/qml/BannerTabButton.qml \
gui/qt/widgets/qml/BusyIndicatorExt.qml \
gui/qt/widgets/qml/CaptionLabel.qml \
@@ -766,7 +768,6 @@ libqt_plugin_la_QML = \
gui/qt/widgets/qml/DragItem.qml \
gui/qt/widgets/qml/DrawerExt.qml \
gui/qt/widgets/qml/ExpandGridView.qml \
- gui/qt/widgets/qml/FocusBackground.qml \
gui/qt/widgets/qml/GridItem.qml \
gui/qt/widgets/qml/GridShadows.qml \
gui/qt/widgets/qml/HorizontalResizeHandle.qml \
=====================================
modules/gui/qt/network/qml/DiscoverUrlDisplay.qml
=====================================
@@ -31,6 +31,24 @@ Widgets.NavigableFocusScope {
readonly property bool isViewMultiView: false
+ //---------------------------------------------------------------------------------------------
+ // Functions
+ //---------------------------------------------------------------------------------------------
+ // Private
+
+ function _getColor() {
+ if (searchField.activeFocus) {
+ return VLCStyle.colors.accent;
+ } else if (searchField.hovered) {
+ return VLCStyle.colors.textFieldHover;
+ } else
+ return VLCStyle.colors.textField;
+ }
+
+ //---------------------------------------------------------------------------------------------
+ // Childs
+ //---------------------------------------------------------------------------------------------
+
Column {
anchors.fill: parent
@@ -61,9 +79,7 @@ Widgets.NavigableFocusScope {
background: Rectangle {
color: VLCStyle.colors.bg
border.width: VLCStyle.dp(2, VLCStyle.scale)
- border.color: searchField.activeFocus || searchField.hovered
- ? VLCStyle.colors.accent
- : VLCStyle.colors.setColorAlpha(VLCStyle.colors.text, .4)
+ border.color: _getColor()
}
onAccepted: {
=====================================
modules/gui/qt/player/qml/ControlButtons.qml
=====================================
@@ -807,7 +807,7 @@ Item{
Component {
id: artworkInfoDelegate
- Widgets.FocusBackground {
+ Widgets.BackgroundHover {
id: artworkInfoItem
property bool paintOnly: false
@@ -1016,7 +1016,7 @@ Item{
anchors.centerIn: parent
font.pixelSize: VLCStyle.fontSize_normal
text: !playbackSpeedButton.paintOnly ? i18n.qtr("%1x").arg(+player.rate.toFixed(2)) : i18n.qtr("1x")
- color: playbackSpeedButton.background.foregroundColor // IconToolButton.background is a FocusBackground
+ color: playbackSpeedButton.background.foregroundColor // IconToolButton.background is a BackgroundHover
}
}
}
=====================================
modules/gui/qt/player/qml/PlaybackSpeed.qml
=====================================
@@ -151,7 +151,7 @@ Popup {
anchors.centerIn: parent
font.pixelSize: VLCStyle.fontSize_normal
text: i18n.qtr("1x")
- color: resetButton.background.foregroundColor // IconToolButton.background is a FocusBackground
+ color: resetButton.background.foregroundColor // IconToolButton.background is a BackgroundHover
}
}
=====================================
modules/gui/qt/player/qml/PlayerMenuItem.qml
=====================================
@@ -104,7 +104,7 @@ T.MenuItem {
}
- background: Widgets.FocusBackground {
+ background: Widgets.BackgroundHover {
implicitHeight: VLCStyle.fontHeight_normal
active: control.highlighted
}
=====================================
modules/gui/qt/style/VLCColors.qml
=====================================
@@ -65,11 +65,37 @@ Item {
property color bgHoverInactive: systemPalette.highlightInactive;
property color bgHoverTextInactive: systemPalette.highlightTextInactive;
- property color button: systemPalette.button;
- property color buttonText: systemPalette.buttonText;
- property color buttonBorder: blendColors(systemPalette.button, systemPalette.buttonText, 0.8);
+ property color bgFocus: (isThemeDark) ? white : black
- property color icon: isThemeDark ? white : "#666666"
+ //---------------------------------------------------------------------------------------------
+ // Button
+
+ property color button: systemPalette.button
+
+ property color buttonHover: (isThemeDark) ? "#303030" : "#f2f2f2"
+
+ property color buttonText : systemPalette.buttonText
+ property color buttonTextHover: bgFocus
+
+ property color buttonBorder: blendColors(systemPalette.button, systemPalette.buttonText, 0.8)
+
+ //---------------------------------------------------------------------------------------------
+ // DropDown
+
+ property color dropDown: (isThemeDark) ? "#272727" : "#e9e9e9"
+
+ // FIXME: We might want another color for this.
+ property color dropDownBorder: text
+
+ //---------------------------------------------------------------------------------------------
+ // TextField
+
+ property color textField : (isThemeDark) ? "#6f6f6f" : "#999999"
+ property color textFieldHover: (isThemeDark) ? "#b7b7b7" : "#4c4c4c"
+
+ //---------------------------------------------------------------------------------------------
+
+ property color icon: isThemeDark ? white : "#616161"
property color textActiveSource: "red";
@@ -110,7 +136,8 @@ Item {
property color tooltipColor: systemPalette.tooltip
//vlc orange
- property color accent: "#FFFF950D";
+ property color accent: (isThemeDark) ? "ff8800" : "#ff610a"
+
property color accentText: "#ffffff";
property color alert: "red";
@@ -159,7 +186,7 @@ Item {
banner: "#d8d8d8";
bannerHover: "#DDDDDD";
- accent: "#ff950d";
+ accent: "#ff610a";
alert: "#ff0000";
separator: "#ededed";
@@ -179,7 +206,7 @@ Item {
bgInactive: "#232629"
bgAlt: "#31363b"
bgAltInactive: "#31363b"
- bgHover: "#2d2d2d"
+ bgHover: "#303030"
bgHoverText: text
bgHoverInactive: "#3daee9"
bgHoverTextInactive: text
@@ -189,7 +216,7 @@ Item {
textActiveSource: "#ff950d"
banner: "#31363b"
bannerHover: "#272727"
- accent: "#ff950d"
+ accent: "#ff8800"
alert: "#ff0000"
separator: "#2d2d2d"
playerControlBarFg: "#ffffff"
=====================================
modules/gui/qt/style/VLCStyle.qml
=====================================
@@ -51,6 +51,8 @@ Item {
property double margin_xlarge: dp(32, scale);
property double margin_xxlarge: dp(36, scale);
+ property int focus_border: dp(2, scale)
+
property int fontSize_xsmall: fontMetrics_xsmall.font.pixelSize
property int fontSize_small: fontMetrics_small.font.pixelSize
property int fontSize_normal: fontMetrics_normal.font.pixelSize
@@ -128,8 +130,6 @@ Item {
property int scrollbarWidth: dp(4, scale);
property int scrollbarHeight: dp(100, scale);
- property int selectedBorder: 2
-
property real network_normal: dp(100, scale)
property int miniPlayerHeight: dp(76, scale)
=====================================
modules/gui/qt/vlc.qrc
=====================================
@@ -190,6 +190,8 @@
<file alias="MiniPlayerBottomMargin.qml">maininterface/qml/MiniPlayerBottomMargin.qml</file>
</qresource>
<qresource prefix="/widgets">
+ <file alias="BackgroundFocus.qml">widgets/qml/BackgroundFocus.qml</file>
+ <file alias="BackgroundHover.qml">widgets/qml/BackgroundHover.qml</file>
<file alias="BannerTabButton.qml">widgets/qml/BannerTabButton.qml</file>
<file alias="BusyIndicatorExt.qml">widgets/qml/BusyIndicatorExt.qml</file>
<file alias="CSDWindowButton.qml">widgets/qml/CSDWindowButton.qml</file>
@@ -208,7 +210,6 @@
<file alias="TableColumns.qml">widgets/qml/TableColumns.qml</file>
<file alias="TransparentSpinBox.qml">widgets/qml/TransparentSpinBox.qml</file>
<file alias="NavigableFocusScope.qml">widgets/qml/NavigableFocusScope.qml</file>
- <file alias="FocusBackground.qml">widgets/qml/FocusBackground.qml</file>
<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>
=====================================
modules/gui/qt/widgets/qml/BackgroundFocus.qml
=====================================
@@ -0,0 +1,34 @@
+/*****************************************************************************
+ * 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/"
+
+Rectangle {
+ //---------------------------------------------------------------------------------------------
+ // Settings
+ //---------------------------------------------------------------------------------------------
+
+ color: "transparent"
+
+ border.color: VLCStyle.colors.bgFocus
+ border.width: VLCStyle.focus_border
+}
=====================================
modules/gui/qt/widgets/qml/FocusBackground.qml → modules/gui/qt/widgets/qml/BackgroundHover.qml
=====================================
@@ -1,6 +1,8 @@
/*****************************************************************************
* 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
@@ -23,56 +25,52 @@ import "qrc:///style/"
Rectangle {
id: root
+ //---------------------------------------------------------------------------------------------
+ // Properties
+ //---------------------------------------------------------------------------------------------
+
property bool active: activeFocus
- property bool selected: false
- property color defaultForeground: VLCStyle.colors.text
- property color foregroundColor: VLCStyle.colors.text
-
- states: [
- State {
- name: "selected"
-
- PropertyChanges {
- target: root
- color: VLCStyle.colors.bgHoverInactive
- foregroundColor: VLCStyle.colors.bgHoverTextInactive
- }
- },
- State {
- name: "active"
-
- PropertyChanges {
- target: root
- color: VLCStyle.colors.accent
- foregroundColor: VLCStyle.colors.accentText
- }
- },
- State {
- name: "normal"
-
- PropertyChanges {
- target: root
- color: "transparent"
- foregroundColor: root.defaultForeground
- }
+
+ property color foregroundColor: foregroundColorBase
+
+ //---------------------------------------------------------------------------------------------
+ // Style
+
+ property int durationAnimation: 100
+
+ property color backgroundColor: VLCStyle.colors.buttonHover
+
+ property color foregroundColorBase : VLCStyle.colors.text
+ property color foregroundColorActive: VLCStyle.colors.buttonTextHover
+
+ //---------------------------------------------------------------------------------------------
+ // Settings
+ //---------------------------------------------------------------------------------------------
+
+ // NOTE: We want the set the proper transparent color to avoid animating from black.
+ color: VLCStyle.colors.setColorAlpha(backgroundColor, 0)
+
+ states: State {
+ name: "active"
+
+ when: (active || activeFocus)
+
+ PropertyChanges {
+ target: root
+
+ color: backgroundColor
+
+ foregroundColor: foregroundColorActive
}
- ]
+ }
transitions: Transition {
- to: "*"
-
ColorAnimation {
property: "color"
- duration: 100
+
+ duration: durationAnimation
+
easing.type: Easing.InOutSine
}
}
-
- state: {
- if (active || activeFocus)
- return "active"
- if (selected)
- return "selected"
- return "normal"
- }
}
=====================================
modules/gui/qt/widgets/qml/BannerTabButton.qml
=====================================
@@ -44,7 +44,7 @@ T.TabButton {
background: Rectangle {
height: control.height
width: control.width
- color: (control.activeFocus || control.hovered) ? VLCStyle.colors.accent
+ color: (control.activeFocus || control.hovered) ? VLCStyle.colors.buttonHover
: control.color
Behavior on color {
ColorAnimation {
@@ -68,8 +68,8 @@ T.TabButton {
text: control.iconTxt
font.pixelSize: VLCIcons.pixelSize(VLCStyle.banner_icon_size)
- color: (control.activeFocus || control.hovered) ? VLCStyle.colors.accentText
- : ((control.selected) ? VLCStyle.colors.accent : VLCStyle.colors.text)
+ color: (control.activeFocus || control.hovered || control.selected) ? VLCStyle.colors.accent
+ : VLCStyle.colors.text
}
Label {
@@ -78,7 +78,7 @@ T.TabButton {
visible: showText
font.pixelSize: VLCStyle.fontSize_normal
font.weight: (control.activeFocus || control.hovered || control.selected) ? Font.DemiBold : Font.Normal
- color: (control.activeFocus || control.hovered) ? VLCStyle.colors.accentText
+ color: (control.activeFocus || control.hovered) ? VLCStyle.colors.buttonTextHover
: ((control.selected) ? VLCStyle.colors.text : VLCStyle.colors.menuCaption)
text: control.text
}
@@ -90,5 +90,11 @@ T.TabButton {
margin: VLCStyle.dp(3, VLCStyle.scale)
visible: control.showCurrentIndicator && control.selected
}
+
+ BackgroundFocus {
+ anchors.fill: parent
+
+ visible: control.activeFocus
+ }
}
}
=====================================
modules/gui/qt/widgets/qml/GridItem.qml
=====================================
@@ -210,7 +210,7 @@ MouseArea {
width: root.width + ( root.selectedBorderWidth * 2 )
height: root.height + ( root.selectedBorderWidth * 2 )
color: VLCStyle.colors.bgHover
- visible: root.selected || root.highlighted
+ visible: root.selected
}
Loader {
@@ -280,4 +280,10 @@ MouseArea {
: VLCStyle.colors.menuCaption
}
}
+
+ BackgroundFocus {
+ anchors.fill: selectionRect
+
+ visible: root.activeFocus
+ }
}
=====================================
modules/gui/qt/widgets/qml/IconToolButton.qml
=====================================
@@ -29,12 +29,12 @@ ToolButton {
padding: 0
property string iconText: ""
- property alias color: focusBackground.defaultForeground
+ property alias color: backgroundHover.foregroundColor
property color colorDisabled: VLCStyle.colors.textInactive
property color colorOverlay: "transparent"
property string textOverlay: ""
property bool borderEnabled: false
- property bool backgroundVisible: focusBackground.active
+ property bool backgroundVisible: backgroundHover.active
enabled: !paintOnly
@@ -58,7 +58,7 @@ ToolButton {
Label {
id: text
text: control.iconText
- color: control.enabled ? focusBackground.foregroundColor : control.colorDisabled
+ color: control.enabled ? backgroundHover.foregroundColor : control.colorDisabled
anchors.centerIn: parent
@@ -89,7 +89,7 @@ ToolButton {
Label {
text: VLCIcons.active_indicator
- color: control.enabled ? focusBackground.foregroundColor : control.colorDisabled
+ color: control.enabled ? backgroundHover.foregroundColor : control.colorDisabled
visible: !control.paintOnly && control.checked
anchors.centerIn: parent
@@ -104,14 +104,23 @@ ToolButton {
}
}
+
+ BackgroundFocus {
+ anchors.fill: parent
+
+ visible: control.activeFocus
+ }
}
- background: FocusBackground {
- id: focusBackground
+ background: BackgroundHover {
+ id: backgroundHover
+
+ active: control.hovered
+
+ foregroundColor: (control.highlighted) ? VLCStyle.colors.accent
+ : VLCStyle.colors.icon
- active: control.activeFocus || control.hovered
- defaultForeground: control.highlighted ? VLCStyle.colors.accent : VLCStyle.colors.icon
implicitHeight: control.size
- implicitWidth: control.size
+ implicitWidth : control.size
}
}
=====================================
modules/gui/qt/widgets/qml/SortControl.qml
=====================================
@@ -180,11 +180,13 @@ Widgets.NavigableFocusScope {
readonly property bool isActive: (delegateSortKey === sortKey)
- background: Rectangle {
- color: colors.accent
- visible: !closeAnimation.running &&
- (itemDelegate.hovered || (!listView.containsMouse && itemDelegate.activeFocus))
- opacity: 0.8
+ background: BackgroundHover {
+ active: (closeAnimation.running === false && itemDelegate.hovered)
+
+ // NOTE: We don't want animations here, because it looks sluggish.
+ durationAnimation: 0
+
+ backgroundColor: VLCStyle.colors.dropDown
}
onHoveredChanged: {
@@ -255,6 +257,12 @@ Widgets.NavigableFocusScope {
popup.close()
}
+
+ BackgroundFocus {
+ anchors.fill: parent
+
+ visible: itemDelegate.activeFocus
+ }
}
}
@@ -262,7 +270,7 @@ Widgets.NavigableFocusScope {
id: bgRect
border.width: VLCStyle.dp(1)
- border.color: colors.accent
+ border.color: colors.dropDownBorder
Loader {
id: effectLoader
=====================================
modules/gui/qt/widgets/qml/TabButtonExt.qml
=====================================
@@ -38,17 +38,18 @@ T.TabButton {
property string iconTxt: ""
property int iconSize: VLCStyle.icon_normal
property bool selected: false
- property alias color: focusBackground.defaultForeground
+ property alias color: backgroundHover.foregroundColor
property bool busy: false
font.pixelSize: VLCStyle.fontSize_normal
- background: FocusBackground {
- id: focusBackground
+ background: BackgroundHover {
+ id: backgroundHover
height: control.height
- width: control.width
- active: (control.activeFocus || control.hovered)
+ width : control.width
+
+ active: control.hovered
}
contentItem: Item {
@@ -93,7 +94,7 @@ T.TabButton {
Widgets.ListLabel {
text: control.text
- color: focusBackground.foregroundColor
+ color: backgroundHover.foregroundColor
}
}
@@ -108,5 +109,11 @@ T.TabButton {
color: "transparent"
border.color: VLCStyle.colors.accent
}
+
+ BackgroundFocus {
+ anchors.fill: parent
+
+ visible: control.activeFocus
+ }
}
}
=====================================
modules/gui/qt/widgets/qml/TableViewDelegate.qml
=====================================
@@ -217,5 +217,11 @@ Rectangle {
onClicked: root.contextMenuButtonClicked(this, delegate.rowModel)
}
+
+ BackgroundFocus {
+ anchors.fill: parent
+
+ visible: delegate.activeFocus
+ }
}
}
=====================================
modules/gui/qt/widgets/qml/TextToolButton.qml
=====================================
@@ -54,9 +54,15 @@ T.ToolButton {
visible: control.checked
color: control.activeFocus ? VLCStyle.colors.accent : VLCStyle.colors.bgHover
}
+
+ BackgroundFocus {
+ anchors.fill: parent
+
+ visible: control.activeFocus
+ }
}
- background: FocusBackground {
- active: (control.activeFocus || control.hovered)
+ background: BackgroundHover {
+ active: control.hovered
}
}
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/145a112e7f5def891f54dd4c0ed1fb6bd052116c...7c295ee33d52e23e3741f50f7bc9e8ae36b622bb
--
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/145a112e7f5def891f54dd4c0ed1fb6bd052116c...7c295ee33d52e23e3741f50f7bc9e8ae36b622bb
You're receiving this email because of your account on code.videolan.org.
More information about the vlc-commits
mailing list