From 810fd7e3cdb8f593823f80539d3f967b441e0a7b Mon Sep 17 00:00:00 2001 From: Michail Vourlakos Date: Sat, 23 Jan 2021 03:46:36 +0200 Subject: [PATCH] update Indicators buttons style in effects page --- declarativeimports/components/ComboBox.qml | 14 ++- .../components/ComboBoxButton.qml | 10 +- .../configuration/pages/EffectsConfig.qml | 100 ++++++++++-------- .../controls/CustomIndicatorButton.qml | 22 ++-- 4 files changed, 86 insertions(+), 60 deletions(-) diff --git a/declarativeimports/components/ComboBox.qml b/declarativeimports/components/ComboBox.qml index aad50dcad..c45f4ed64 100644 --- a/declarativeimports/components/ComboBox.qml +++ b/declarativeimports/components/ComboBox.qml @@ -50,6 +50,7 @@ T.ComboBox { property bool blankSpaceForEmptyIcons: false property bool forcePressed: false property bool popUpAlignRight: true + property bool buttonIsTransparent: false property int minimumPopUpWidth: 150 property int popUpRelativeX: 0 property int popUpTextHorizontalAlignment: Text.AlignLeft @@ -99,7 +100,7 @@ T.ComboBox { implicitHeight: implicitWidth anchors { right: parent.right - rightMargin: surfaceNormal.margins.right + rightMargin: control.buttonIsTransparent ? 0 : surfaceNormal.margins.right verticalCenter: parent.verticalCenter } svg: PlasmaCore.Svg { @@ -323,13 +324,22 @@ T.ComboBox { id: surfaceNormal //retrocompatibility with old controls implicitWidth: units.gridUnit * 6 - anchors.fill: parent + width: parent.width + height: parent.height + + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + anchors.rightMargin: control.buttonIsTransparent ? -margins.right : 0 readonly property bool editable: control.hasOwnProperty("editable") && control.editable imagePath: editable ? "widgets/lineedit" : "widgets/button" prefix: editable ? "base" : (control.pressed || control.forcePressed ? "pressed" : "normal") + + opacity: control.buttonIsTransparent && prefix !== "pressed" && textFieldPrivate.state !== "hover" && !control.popup.visible ? 0 : 1 + Private.TextFieldFocus { + id: textFieldPrivate visible: parent.editable z: -1 state: control.activeFocus ? "focus" : (control.hovered ? "hover" : "hidden") diff --git a/declarativeimports/components/ComboBoxButton.qml b/declarativeimports/components/ComboBoxButton.qml index d267ca036..2e628ae2c 100644 --- a/declarativeimports/components/ComboBoxButton.qml +++ b/declarativeimports/components/ComboBoxButton.qml @@ -37,10 +37,11 @@ Rectangle { property bool checked: false property bool checkable: false - readonly property Item comboBox: mainComboBox - readonly property Item button: mainButton + readonly property alias comboBox: mainComboBox + readonly property alias button: mainButton property bool buttonEnabled: true + property bool buttonIsTransparent: false property string buttonText:"" property string buttonIconSource:"" property string buttonToolTip: "" @@ -49,6 +50,7 @@ Rectangle { property bool comboBoxBlankSpaceForEmptyIcons: false property bool comboBoxForcePressed: false property bool comboBoxPopUpAlignRight: true + property bool comboBoxButtonIsTransparent: false property int comboBoxMinimumPopUpWidth: 150 property int comboBoxPopupTextHorizontalAlignment: Text.AlignLeft property string comboBoxEnabledRole: "" @@ -76,6 +78,7 @@ Rectangle { LayoutMirroring.enabled: false enabled: buttonEnabled checked: root.checked + visible: buttonIsTransparent ? 0 : 1 /*workaround in order to replicate the proper Buttons Exclusive Group Behavior*/ checkable: root.checkable && !parent.exclusiveGroup @@ -106,6 +109,7 @@ Rectangle { textRole: comboBoxTextRole iconToolTipRole: comboBoxIconToolTipRole iconOnlyWhenHoveredRole: comboBoxIconOnlyWhenHoveredRole + buttonIsTransparent: comboBoxButtonIsTransparent blankSpaceForEmptyIcons: comboBoxBlankSpaceForEmptyIcons forcePressed: comboBoxForcePressed @@ -128,7 +132,7 @@ Rectangle { height: parent.height text: buttonText font: mainButton.font - color: theme.buttonTextColor + color: buttonIsTransparent ? theme.textColor : theme.buttonTextColor visible: root.checkable elide: Text.ElideRight diff --git a/shell/package/contents/configuration/pages/EffectsConfig.qml b/shell/package/contents/configuration/pages/EffectsConfig.qml index ba65360f4..11b9cd58a 100644 --- a/shell/package/contents/configuration/pages/EffectsConfig.qml +++ b/shell/package/contents/configuration/pages/EffectsConfig.qml @@ -426,64 +426,72 @@ PlasmaComponents.Page { spacing: units.smallSpacing enabled: indicatorsSwitch.checked - LatteComponents.SubHeader { + /* LatteComponents.SubHeader { text: i18n("Style") - } + }*/ - RowLayout { + Item { Layout.fillWidth: true - spacing: 2 + Layout.minimumHeight: tabBar.height - property string type: latteView.indicator.type + PlasmaComponents.TabBar { + id: tabBar + width: parent.width - ExclusiveGroup { - id: indicatorStyleGroup - } + property string type: latteView.indicator.type - PlasmaComponents.Button { - id: latteBtn - Layout.fillWidth: true - text: i18nc("latte indicator style", "Latte") - checked: parent.type === type - checkable: false - exclusiveGroup: indicatorStyleGroup - tooltip: i18n("Use Latte style for your indicators") + PlasmaComponents.TabButton { + id: latteBtn + text: i18nc("latte indicator style", "Latte") + readonly property string type: "org.kde.latte.default" - readonly property string type: "org.kde.latte.default" + onCheckedChanged: { + if (checked) { + latteView.indicator.type = type; + } + } + } + PlasmaComponents.TabButton { + id: plasmaBtn + text: i18nc("plasma indicator style", "Plasma") + readonly property string type: "org.kde.latte.plasma" - onPressedChanged: { - if (pressed) { - latteView.indicator.type = type; + onCheckedChanged: { + if (checked) { + latteView.indicator.type = type; + } + } + } + + PlasmaComponents.TabButton { + id: customBtn + + onCheckedChanged: { + if (checked) { + customIndicator.onButtonIsPressed(); + } + } + + LatteExtraControls.CustomIndicatorButton { + id: customIndicator + anchors.fill: parent + implicitWidth: latteBtn.implicitWidth + implicitHeight: latteBtn.implicitHeight + + checked: parent.checked + comboBoxMinimumPopUpWidth: 1.5 * customIndicator.width } } } - PlasmaComponents.Button { - Layout.fillWidth: true - text: i18nc("plasma indicator style", "Plasma") - checked: parent.type === type - checkable: false - exclusiveGroup: indicatorStyleGroup - tooltip: i18n("Use Plasma style for your indicators") - - readonly property string type: "org.kde.latte.plasma" - - onPressedChanged: { - if (pressed) { - latteView.indicator.type = type; - } - } - } - - LatteExtraControls.CustomIndicatorButton { - id: customIndicator - Layout.fillWidth: true - implicitWidth: latteBtn.implicitWidth - implicitHeight: latteBtn.implicitHeight - - checked: parent.type === type - exclusiveGroup: indicatorStyleGroup - comboBoxMinimumPopUpWidth: 1.5 * customIndicator.width + Rectangle { + anchors.bottom: tabBar.bottom + anchors.left: tabBar.left + anchors.leftMargin: 2 + width: tabBar.width - 2*2 + height: 2 + color: theme.textColor + opacity: 0.25 } } diff --git a/shell/package/contents/controls/CustomIndicatorButton.qml b/shell/package/contents/controls/CustomIndicatorButton.qml index c8fda4ff7..257c3412b 100644 --- a/shell/package/contents/controls/CustomIndicatorButton.qml +++ b/shell/package/contents/controls/CustomIndicatorButton.qml @@ -32,6 +32,9 @@ LatteComponents.ComboBoxButton{ buttonToolTip: custom.type === "download:" ? i18n("Download indicator styles from the internet") : i18n("Use %0 style for your indicators").arg(buttonText) + buttonIsTransparent: true + comboBoxButtonIsTransparent: true + comboBoxTextRole: "name" comboBoxIconRole: "icon" comboBoxIconToolTipRole: "iconToolTip" @@ -66,18 +69,11 @@ LatteComponents.ComboBoxButton{ custom.updateButtonInformation(); } } - } + } Connections{ target: custom.button - - onClicked: { - if (custom.type === "download:") { - latteView.indicator.downloadIndicator(); - } else { - latteView.indicator.type = custom.type; - } - } + onClicked: onButtonIsPressed(); } Connections{ @@ -119,6 +115,14 @@ LatteComponents.ComboBoxButton{ } } + function onButtonIsPressed() { + if (custom.type === "download:") { + latteView.indicator.downloadIndicator(); + } else { + latteView.indicator.type = custom.type; + } + } + function updateButtonInformation() { if (latteView.indicator.customPluginsCount === 0) { custom.buttonText = i18n("Download");