update Indicators buttons style in effects page

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")

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

shell/package/contents/configuration/pages/EffectsConfig.qml

@@ -426,66 +426,74 @@ 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 {
+                        PlasmaComponents.TabButton {
                             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")
-
                             readonly property string type: "org.kde.latte.default"
 
-                        onPressedChanged: {
-                            if (pressed) {
+                            onCheckedChanged: {
+                                if (checked) {
                                     latteView.indicator.type = type;
                                 }
                             }
                         }
-
-                    PlasmaComponents.Button {
-                        Layout.fillWidth: true
+                        PlasmaComponents.TabButton {
+                            id: plasmaBtn
                             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) {
+                            onCheckedChanged: {
+                                if (checked) {
                                     latteView.indicator.type = type;
                                 }
                             }
                         }
 
+                        PlasmaComponents.TabButton {
+                            id: customBtn
+
+                            onCheckedChanged: {
+                                if (checked) {
+                                    customIndicator.onButtonIsPressed();
+                                }
+                            }
+
                             LatteExtraControls.CustomIndicatorButton {
                                 id: customIndicator
-                        Layout.fillWidth: true
+                                anchors.fill: parent
                                 implicitWidth: latteBtn.implicitWidth
                                 implicitHeight: latteBtn.implicitHeight
 
-                        checked: parent.type === type
-                        exclusiveGroup:  indicatorStyleGroup
+                                checked: parent.checked
                                 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
+                    }
+                }
 
                 //! BEGIN: Indicator specific sub-options
                 ColumnLayout {

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"
@@ -70,14 +73,7 @@ LatteComponents.ComboBoxButton{
 
     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");