improve placement and design of ComboBoxButton

declarativeimports/components/ComboBox.qml

@@ -45,6 +45,7 @@ T.ComboBox {
     property bool blankSpaceForEmptyIcons: false
     property bool forcePressed: false
     property int minimumPopUpWidth: 150
+    property int popUpRelativeX: 0
     property string iconRole
 
     delegate: ItemDelegate {
@@ -254,7 +255,7 @@ T.ComboBox {
     }
 
     popup: T.Popup {
-        x: control.mirrored ? control.width - width : 0
+        x: control.mirrored ? control.width - width : popUpRelativeX
         y: control.height
         width: Math.max(control.width, control.minimumPopUpWidth)
         implicitHeight: contentItem.implicitHeight

declarativeimports/components/ComboBoxButton.qml

@@ -18,6 +18,7 @@
 */
 
 import QtQuick 2.1
+import QtQuick.Layouts 1.3
 
 import org.kde.plasma.components 2.0 as PlasmaComponents
 import org.kde.plasma.components 3.0 as PlasmaComponents3
@@ -25,9 +26,12 @@ import org.kde.plasma.components 3.0 as PlasmaComponents3
 import org.kde.latte 0.2 as Latte
 import org.kde.latte.components 1.0 as LatteComponents
 
-PlasmaComponents.Button {
+Rectangle {
     id: root
-    text: " "
+    color: "transparent"
+
+    implicitWidth: buttonMetrics.implicitWidth
+    implicitHeight: buttonMetrics.implicitHeight
 
     readonly property Item comboBox: mainComboBox
     readonly property Item button: mainButton
@@ -48,21 +52,6 @@ PlasmaComponents.Button {
     property string comboBoxTextRole: ""
     property string comboBoxIconRole: ""
 
-    LatteComponents.ComboBox {
-        id: mainComboBox
-        anchors.fill: parent
-        enabled: comboBoxEnabled
-
-        iconRole: comboBoxIconRole
-        textRole: comboBoxTextRole
-
-        blankSpaceForEmptyIcons: comboBoxBlankSpaceForEmptyIcons
-        forcePressed: comboBoxForcePressed
-
-        minimumPopUpWidth: comboBoxMinimumPopUpWidth
-    }
-
-    //overlayed button
     PlasmaComponents.Button {
         id: mainButton
         anchors.left: Qt.application.layoutDirection === Qt.RightToLeft ? undefined : parent.left
@@ -73,20 +62,42 @@ PlasmaComponents.Button {
         checkable: root.checkable
         exclusiveGroup: buttonExclusiveGroup
 
-        width: parent.width - units.iconSizes.medium + 2*units.smallSpacing
+        width: parent.width
         height: mainComboBox.height
 
-        text: checkable && !labelMetrics.exceeds? "" : buttonText
+        text: checkable ?  " " : buttonText
         iconSource: buttonIconSource
         tooltip: buttonToolTip
     }
 
+    //overlayed combobox
+    LatteComponents.ComboBox {
+        id: mainComboBox
+        anchors.right: mainButton.right
+        anchors.top: parent.top
+
+        width:  units.iconSizes.medium - units.smallSpacing
+        height: parent.height
+
+        enabled: comboBoxEnabled
+
+        iconRole: comboBoxIconRole
+        textRole: comboBoxTextRole
+
+        blankSpaceForEmptyIcons: comboBoxBlankSpaceForEmptyIcons
+        forcePressed: comboBoxForcePressed
+        popUpRelativeX: -(parent.width - width)
+
+        minimumPopUpWidth: Math.max(comboBoxMinimumPopUpWidth, root.width)
+    }
+
     Label{
-        anchors.fill: parent
-        visible: mainButton.checkable && !labelMetrics.exceeds
+        width: labelMetrics.exceeds ? parent.width-mainComboBox.width :  parent.width
+        height: parent.height
         text: buttonText
         font: mainButton.font
         color: theme.buttonTextColor
+        visible: root.checkable
 
         elide: Text.ElideRight
         horizontalAlignment: Text.AlignHCenter
@@ -101,6 +112,6 @@ PlasmaComponents.Button {
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
 
-        readonly property bool exceeds: width>mainButton.width
+        readonly property bool exceeds: width>(mainButton.width-mainComboBox.width)
     }
 }

shell/package/contents/configuration/LatteDockConfiguration.qml

@@ -464,8 +464,9 @@ FocusScope {
 
             LatteComponents.ComboBoxButton {
                 id: actionsComboBtn
-                Layout.alignment: Qt.AlignLeft
                 Layout.fillWidth: true
+                implicitWidth: removeView.implicitWidth
+                implicitHeight: removeView.implicitHeight
 
                 buttonEnabled: true
                 buttonText: i18n("New Dock")
@@ -554,9 +555,7 @@ FocusScope {
 
             PlasmaComponents.Button {
                 id: removeView
-
                 Layout.fillWidth: true
-                Layout.alignment: Qt.AlignHCenter
 
                 text: i18n("Remove")
                 iconSource: "delete"
@@ -568,9 +567,7 @@ FocusScope {
 
             PlasmaComponents.Button {
                 id: closeButton
-
                 Layout.fillWidth: true
-                Layout.alignment: Qt.AlignRight
 
                 text: i18n("Close")
                 iconSource: "dialog-close"

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

@@ -491,6 +491,7 @@ PlasmaComponents.Page {
                     }
 
                     PlasmaComponents.Button {
+                        id: latteBtn
                         Layout.fillWidth: true
                         text: i18nc("latte indicator style", "Latte")
                         checked: parent.type === type
@@ -515,6 +516,9 @@ PlasmaComponents.Page {
                     LatteExtraControls.CustomIndicatorButton {
                         id: customIndicator
                         Layout.fillWidth: true
+                        implicitWidth: latteBtn.implicitWidth
+                        implicitHeight: latteBtn.implicitHeight
+
                         checked: parent.type === type
                         checkable: true
                         buttonExclusiveGroup:  indicatorStyleGroup