From 1d6870b156241496af56caf736fe611a7ec5467e Mon Sep 17 00:00:00 2001 From: Marco Martin Date: Thu, 9 Jan 2020 12:49:55 +0100 Subject: [PATCH] Consistency: colored selected buttons Summary: color selected buttons to the highlight color when it has keyboard focus. This makes the behavior much more similar to the Breeze desktop style Test Plan: selected buttons look blue on Breeze, old themes still work as they did Before {F7872340} After {F7872341} QWidget {F7872344} Reviewers: #plasma, #vdg, #goal_consistency, ngraham Reviewed By: #vdg, ngraham Subscribers: davidedmundson, ngraham, kde-frameworks-devel Tags: #frameworks Differential Revision: https://phabricator.kde.org/D26540 --- .../plasmacomponents3/Button.qml | 9 +- .../plasmastyle/ButtonStyle.qml | 10 +- src/desktoptheme/breeze/widgets/button.svg | 580 ++++++++++++++++-- 3 files changed, 558 insertions(+), 41 deletions(-) diff --git a/src/declarativeimports/plasmacomponents3/Button.qml b/src/declarativeimports/plasmacomponents3/Button.qml index 7ec761595..83ff82276 100644 --- a/src/declarativeimports/plasmacomponents3/Button.qml +++ b/src/declarativeimports/plasmacomponents3/Button.qml @@ -50,6 +50,7 @@ T.Button { colorGroup: PlasmaCore.Theme.ButtonColorGroup visible: source.length > 0 source: control.icon ? (control.icon.name || control.icon.source) : "" + status: buttonSvg.hasElement("hint-focus-highlighted-background") && control.activeFocus && !control.pressed && !control.checked ? PlasmaCore.Svg.Selected : PlasmaCore.Svg.Normal } Label { Layout.fillWidth: true @@ -58,7 +59,7 @@ T.Button { text: control.Kirigami.MnemonicData.richTextLabel font: control.font opacity: enabled || control.highlighted || control.checked ? 1 : 0.4 - color: theme.buttonTextColor + color: buttonSvg.hasElement("hint-focus-highlighted-background") && control.activeFocus && !control.down ? theme.highlightedTextColor : theme.buttonTextColor horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter elide: Text.ElideRight @@ -83,11 +84,15 @@ T.Button { } } } + PlasmaCore.Svg { + id: buttonSvg + imagePath: "widgets/button" + } PlasmaCore.FrameSvgItem { id: surfaceNormal anchors.fill: parent imagePath: "widgets/button" - prefix: "normal" + prefix: control.activeFocus ? ["focus-background", "normal"] : "normal" opacity: (!control.flat || control.hovered) && (!control.pressed || !control.checked) ? 1 : 0 Behavior on opacity { OpacityAnimator { diff --git a/src/declarativeimports/plasmastyle/ButtonStyle.qml b/src/declarativeimports/plasmastyle/ButtonStyle.qml index 88860dca9..3d82c3ec7 100644 --- a/src/declarativeimports/plasmastyle/ButtonStyle.qml +++ b/src/declarativeimports/plasmastyle/ButtonStyle.qml @@ -67,6 +67,7 @@ QtQuickControlStyle.ButtonStyle { Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter active: control.hovered colorGroup: PlasmaCore.Theme.ButtonColorGroup + status: buttonSvg.hasElement("hint-focus-highlighted-background") && control.activeFocus && !control.pressed && !control.checked ? PlasmaCore.Svg.Selected : PlasmaCore.Svg.Normal } PlasmaComponents.Label { @@ -78,10 +79,14 @@ QtQuickControlStyle.ButtonStyle { font: control.font || theme.defaultFont visible: control.text != "" Layout.fillWidth: true - color: theme.buttonTextColor + color: buttonSvg.hasElement("hint-focus-highlighted-background") && control.activeFocus && !control.pressed && !control.checked ? theme.highlightedTextColor : theme.buttonTextColor horizontalAlignment: icon.valid ? Text.AlignLeft : Text.AlignHCenter verticalAlignment: Text.AlignVCenter elide: Text.ElideRight + PlasmaCore.Svg { + id: buttonSvg + imagePath: "widgets/button" + } } PlasmaExtras.ConditionalLoader { @@ -136,14 +141,13 @@ QtQuickControlStyle.ButtonStyle { } } - //This code is duplicated here and Button and ToolButton //maybe we can make an AbstractButton class? PlasmaCore.FrameSvgItem { id: surfaceNormal anchors.fill: parent imagePath: "widgets/button" - prefix: "normal" + prefix: control.activeFocus ? ["focus-background", "normal"] : "normal" } PlasmaCore.FrameSvgItem { diff --git a/src/desktoptheme/breeze/widgets/button.svg b/src/desktoptheme/breeze/widgets/button.svg index 112f6df68..25144bcb2 100644 --- a/src/desktoptheme/breeze/widgets/button.svg +++ b/src/desktoptheme/breeze/widgets/button.svg @@ -13,17 +13,17 @@ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="svg2" sodipodi:version="0.32" - inkscape:version="0.91 r13725" + inkscape:version="0.92.2 5c3e80d, 2017-08-06" width="220" height="212" - sodipodi:docname="button.svgz" + sodipodi:docname="button.svg" inkscape:output_extension="org.inkscape.output.svgz.inkscape" inkscape:export-filename="/home/diau/svn/playground-plasma/desktoptheme/air/widgets/button.png" inkscape:export-xdpi="90" inkscape:export-ydpi="90" version="1.0"> + + + + + + + + @@ -146,26 +168,6 @@ y1="-159" x2="160" y2="-138" /> - - + id="linearGradient4455-3"> + + style="opacity:0.01000001;fill:none;fill-opacity:0.39215686;stroke:none" /> + style="opacity:0.01000001;fill:none;fill-opacity:1;stroke:none" /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +