improve appearance of dock type buttons area

shell/package/contents/configuration/LatteDockConfiguration.qml

@@ -49,6 +49,9 @@ FocusScope {
     property bool panelIsVertical: plasmoid.formFactor === PlasmaCore.Types.Vertical
     property int subGroupSpacing: units.largeSpacing + units.smallSpacing * 1.5
 
+    property color bC: theme.backgroundColor
+    property color transparentBackgroundColor: Qt.rgba(bC.r, bC.g, bC.b, 0.7)
+
     PlasmaCore.FrameSvgItem{
         anchors.fill: parent
         imagePath: "dialogs/background"
@@ -56,7 +59,7 @@ FocusScope {
 
     TypeSelection{
         x: dialog.width/2 - width/2
-        y: plasmoid.configuration.advanced ? 0 : -height-18
+        y: plasmoid.configuration.advanced ? -marginHeight : -height
 
         Behavior on y {
             NumberAnimation { duration: plasmoid.configuration.durationTime*units.longDuration }
@@ -319,11 +322,7 @@ FocusScope {
             width: maxWidth - units.smallSpacing
             height: behaviorPage.Layout.maximumHeight + units.smallSpacing * 4
 
-            property color bC: theme.backgroundColor
-            property color transparentBack: Qt.rgba(bC.r, bC.g, bC.b, 0.7)
-
-            color: transparentBack
-
+            color: transparentBackgroundColor
             border.width: 1
             border.color: theme.backgroundColor
 

shell/package/contents/configuration/TypeSelection.qml

@@ -29,71 +29,86 @@ import org.kde.plasma.plasmoid 2.0
 
 import org.kde.latte 0.1 as Latte
 
-Row {
-    id: typeRow
-    spacing: 1
+Rectangle {
+    width: typeRow.width + 2*marginWidth
+    height: typeRow.height + 2*marginHeight
 
-    readonly property bool isPanel: (plasmoid.configuration.panelPosition === Latte.Dock.Justify)
-                                    && (plasmoid.configuration.useThemePanel) && (plasmoid.configuration.panelSize===100)
-                                    && (plasmoid.configuration.zoomLevel === 0) && !plasmoid.configuration.autoDecreaseIconSize
+    property int marginHeight: 0.3 * typeRow.height
+    property int marginWidth: 0.5 * typeRow.height
 
-    layer.enabled: true
+    color: transparentBackgroundColor
+    border.width: 1
+    border.color: theme.backgroundColor
+
+    Row {
+        id: typeRow
+        anchors.centerIn: parent
+
+        spacing: 1
+
+        readonly property bool isPanel: (plasmoid.configuration.panelPosition === Latte.Dock.Justify)
+                                        && (plasmoid.configuration.useThemePanel) && (plasmoid.configuration.panelSize===100)
+                                        && (plasmoid.configuration.zoomLevel === 0) && !plasmoid.configuration.autoDecreaseIconSize
+
+        /*layer.enabled: true
     layer.effect: DropShadow {
-        radius: 6
-        samples: 2 * radius
-        color: "#000000"
+        radius: dockTypeButton.height / 10
+        samples: radius
+        color: "#0a0a0a"
         horizontalOffset: -1
-    }
+        //opacity: 0.5
+    }*/
 
-    ExclusiveGroup {
-        id: dockTypeGroup
-    }
+        ExclusiveGroup {
+            id: dockTypeGroup
+        }
+
+        PlasmaComponents.Button {
+            id: dockTypeButton
+            width: dialog.width / 6
+            checkable: true
+            checked: !typeRow.isPanel
+            text: i18nc("dock type","Dock")
+            exclusiveGroup: dockTypeGroup
+            tooltip: i18n("Change the behavior and appearance to Dock type")
 
-    PlasmaComponents.Button {
-        id: dockTypeButton
-         width: dialog.width / 6
-        checkable: true
-        checked: !typeRow.isPanel
-        text: i18nc("dock type","Dock")
-        exclusiveGroup: dockTypeGroup
-        tooltip: i18n("Change the behavior and appearance to Dock type")
-
-        onPressedChanged: {
-            if (pressed && !checked) {
-                dock.visibility.mode = Latte.Dock.DodgeActive;
-                plasmoid.configuration.panelPosition = Latte.Dock.Center;
-                plasmoid.configuration.useThemePanel = true;
-                plasmoid.configuration.solidPanel = false;
-                plasmoid.configuration.panelSize = 0;
-                plasmoid.configuration.shadows = 2;
-                plasmoid.configuration.zoomLevel = 16;
-                plasmoid.configuration.autoDecreaseIconSize = true;
-                plasmoid.configuration.shrinkThickMargins = false;
+            onPressedChanged: {
+                if (pressed && !checked) {
+                    dock.visibility.mode = Latte.Dock.DodgeActive;
+                    plasmoid.configuration.panelPosition = Latte.Dock.Center;
+                    plasmoid.configuration.useThemePanel = true;
+                    plasmoid.configuration.solidPanel = false;
+                    plasmoid.configuration.panelSize = 0;
+                    plasmoid.configuration.shadows = 2;
+                    plasmoid.configuration.zoomLevel = 16;
+                    plasmoid.configuration.autoDecreaseIconSize = true;
+                    plasmoid.configuration.shrinkThickMargins = false;
+                }
             }
         }
-    }
 
-    PlasmaComponents.Button {
-        id: panelTypeButton
-        width: dockTypeButton.width
-        checkable: true
-        checked: typeRow.isPanel
-        text: i18nc("panel type","Panel")
-        exclusiveGroup: dockTypeGroup
-        tooltip: i18n("Change the behavior and appearance to Panel type")
-
-        onPressedChanged: {
-            if (pressed && !checked) {
-                dock.visibility.mode = Latte.Dock.AlwaysVisible;
-                plasmoid.configuration.panelPosition = Latte.Dock.Justify;
-                plasmoid.configuration.useThemePanel = true;
-                plasmoid.configuration.solidPanel = false;
-                plasmoid.configuration.panelSize = 100;
-                plasmoid.configuration.panelShadows = true;
-                plasmoid.configuration.shadows = 0;
-                plasmoid.configuration.zoomLevel = 0;
-                plasmoid.configuration.autoDecreaseIconSize = false;
-                plasmoid.configuration.shrinkThickMargins = true;
+        PlasmaComponents.Button {
+            id: panelTypeButton
+            width: dockTypeButton.width
+            checkable: true
+            checked: typeRow.isPanel
+            text: i18nc("panel type","Panel")
+            exclusiveGroup: dockTypeGroup
+            tooltip: i18n("Change the behavior and appearance to Panel type")
+
+            onPressedChanged: {
+                if (pressed && !checked) {
+                    dock.visibility.mode = Latte.Dock.AlwaysVisible;
+                    plasmoid.configuration.panelPosition = Latte.Dock.Justify;
+                    plasmoid.configuration.useThemePanel = true;
+                    plasmoid.configuration.solidPanel = false;
+                    plasmoid.configuration.panelSize = 100;
+                    plasmoid.configuration.panelShadows = true;
+                    plasmoid.configuration.shadows = 0;
+                    plasmoid.configuration.zoomLevel = 0;
+                    plasmoid.configuration.autoDecreaseIconSize = false;
+                    plasmoid.configuration.shrinkThickMargins = true;
+                }
             }
         }
     }