Merge pull request #3176 from fieldOfView/fix_dark_sidebar

Fix sidebar theming (for Ultimaker Dark theme)

resources/qml/Settings/SettingComboBox.qml

@@ -86,13 +86,34 @@ SettingItem
             verticalAlignment: Text.AlignVCenter
         }
 
+        popup: Popup {
+            y: control.height - UM.Theme.getSize("default_lining").height
+            width: control.width
+            implicitHeight: contentItem.implicitHeight
+            padding: UM.Theme.getSize("default_lining").width
+
+            contentItem: ListView {
+                clip: true
+                implicitHeight: contentHeight
+                model: control.popup.visible ? control.delegateModel : null
+                currentIndex: control.highlightedIndex
+
+                ScrollIndicator.vertical: ScrollIndicator { }
+            }
+
+            background: Rectangle {
+                color: UM.Theme.getColor("setting_control")
+                border.color: UM.Theme.getColor("setting_control_border")
+            }
+        }
+
         delegate: ItemDelegate
         {
-            width: control.width
+            width: control.width - 2 * UM.Theme.getSize("default_lining").width
             height: control.height
             highlighted: control.highlightedIndex == index
 
-            contentItem: Text
+            contentItem: Label
             {
                 text: modelData.value
                 color: control.contentItem.color
@@ -100,6 +121,12 @@ SettingItem
                 elide: Text.ElideRight
                 verticalAlignment: Text.AlignVCenter
             }
+
+            background: Rectangle
+            {
+                color: parent.highlighted ? UM.Theme.getColor("setting_control_highlight") : "transparent"
+                border.color: parent.highlighted ? UM.Theme.getColor("setting_control_border_highlight") : "transparent"
+            }
         }
 
         onActivated:

resources/qml/Settings/SettingExtruder.qml

@@ -108,33 +108,28 @@ SettingItem
             }
         }
 
-        contentItem: Item
+        contentItem: Label
         {
-            Label
+            anchors.verticalCenter: parent.verticalCenter
-            {
+            anchors.left: parent.left
-                id: extruderText
+            anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width
+            anchors.right: downArrow.left
+            rightPadding: swatch.width + UM.Theme.getSize("setting_unit_margin").width
 
-                anchors.verticalCenter: parent.verticalCenter
+            text: control.currentText
-                anchors.left: parent.left
+            font: UM.Theme.getFont("default")
-                anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width
+            color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text")
-                anchors.right: swatch.left
 
-                text: control.currentText
+            elide: Text.ElideLeft
-                font: UM.Theme.getFont("default")
+            verticalAlignment: Text.AlignVCenter
-                color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text")
 
-                elide: Text.ElideLeft
+            background: Rectangle
-                verticalAlignment: Text.AlignVCenter
-            }
-
-            Rectangle
             {
                 id: swatch
                 height: UM.Theme.getSize("setting_control").height / 2
                 width: height
 
                 anchors.right: parent.right
-                anchors.rightMargin: downArrow.width + UM.Theme.getSize("setting_unit_margin").width
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.margins: UM.Theme.getSize("default_margin").width / 4
 
@@ -146,19 +141,64 @@ SettingItem
             }
         }
 
+        popup: Popup {
+            y: control.height - UM.Theme.getSize("default_lining").height
+            width: control.width
+            implicitHeight: contentItem.implicitHeight
+            padding: UM.Theme.getSize("default_lining").width
+
+            contentItem: ListView {
+                clip: true
+                implicitHeight: contentHeight
+                model: control.popup.visible ? control.delegateModel : null
+                currentIndex: control.highlightedIndex
+
+                ScrollIndicator.vertical: ScrollIndicator { }
+            }
+
+            background: Rectangle {
+                color: UM.Theme.getColor("setting_control")
+                border.color: UM.Theme.getColor("setting_control_border")
+            }
+        }
+
         delegate: ItemDelegate
         {
-            width: control.width
+            width: control.width - 2 * UM.Theme.getSize("default_lining").width
             height: control.height
             highlighted: control.highlightedIndex == index
 
-            contentItem: Text
+            contentItem: Label
             {
                 text: model.name
                 color: UM.Theme.getColor("setting_control_text")
                 font: UM.Theme.getFont("default")
                 elide: Text.ElideRight
                 verticalAlignment: Text.AlignVCenter
+                rightPadding: swatch.width + UM.Theme.getSize("setting_unit_margin").width
+
+                background: Rectangle
+                {
+                    id: swatch
+                    height: UM.Theme.getSize("setting_control").height / 2
+                    width: height
+
+                    anchors.right: parent.right
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.margins: UM.Theme.getSize("default_margin").width / 4
+
+                    border.width: UM.Theme.getSize("default_lining").width
+                    border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border")
+                    radius: width / 2
+
+                    color: control.model.getItem(index).color
+                }
+            }
+
+            background: Rectangle
+            {
+                color: parent.highlighted ? UM.Theme.getColor("setting_control_highlight") : "transparent"
+                border.color: parent.highlighted ? UM.Theme.getColor("setting_control_border_highlight") : "transparent"
             }
         }
     }

resources/qml/Settings/SettingOptionalExtruder.qml

@@ -127,33 +127,28 @@ SettingItem
             }
         }
 
-        contentItem: Item
+        contentItem: Label
         {
-            Label
+            anchors.verticalCenter: parent.verticalCenter
-            {
+            anchors.left: parent.left
-                id: extruderText
+            anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width
+            anchors.right: downArrow.left
+            rightPadding: swatch.width + UM.Theme.getSize("setting_unit_margin").width
 
-                anchors.verticalCenter: parent.verticalCenter
+            text: control.currentText
-                anchors.left: parent.left
+            font: UM.Theme.getFont("default")
-                anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width
+            color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text")
-                anchors.right: swatch.left
 
-                text: control.currentText
+            elide: Text.ElideRight
-                font: UM.Theme.getFont("default")
+            verticalAlignment: Text.AlignVCenter
-                color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text")
 
-                elide: Text.ElideRight
+            background: Rectangle
-                verticalAlignment: Text.AlignVCenter
-            }
-
-            Rectangle
             {
                 id: swatch
                 height: UM.Theme.getSize("setting_control").height / 2
                 width: height
 
                 anchors.right: parent.right
-                anchors.rightMargin: downArrow.width + UM.Theme.getSize("setting_unit_margin").width
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.margins: UM.Theme.getSize("default_margin").width / 4
 
@@ -165,19 +160,64 @@ SettingItem
             }
         }
 
+        popup: Popup {
+            y: control.height - UM.Theme.getSize("default_lining").height
+            width: control.width
+            implicitHeight: contentItem.implicitHeight
+            padding: UM.Theme.getSize("default_lining").width
+
+            contentItem: ListView {
+                clip: true
+                implicitHeight: contentHeight
+                model: control.popup.visible ? control.delegateModel : null
+                currentIndex: control.highlightedIndex
+
+                ScrollIndicator.vertical: ScrollIndicator { }
+            }
+
+            background: Rectangle {
+                color: UM.Theme.getColor("setting_control")
+                border.color: UM.Theme.getColor("setting_control_border")
+            }
+        }
+
         delegate: ItemDelegate
         {
-            width: control.width
+            width: control.width - 2 * UM.Theme.getSize("default_lining").width
             height: control.height
             highlighted: control.highlightedIndex == index
 
-            contentItem: Text
+            contentItem: Label
             {
                 text: model.name
                 color: UM.Theme.getColor("setting_control_text")
                 font: UM.Theme.getFont("default")
                 elide: Text.ElideRight
                 verticalAlignment: Text.AlignVCenter
+                rightPadding: swatch.width + UM.Theme.getSize("setting_unit_margin").width
+
+                background: Rectangle
+                {
+                    id: swatch
+                    height: UM.Theme.getSize("setting_control").height / 2
+                    width: height
+
+                    anchors.right: parent.right
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.margins: UM.Theme.getSize("default_margin").width / 4
+
+                    border.width: UM.Theme.getSize("default_lining").width
+                    border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border")
+                    radius: width / 2
+
+                    color: control.model.getItem(index).color
+                }
+            }
+
+            background: Rectangle
+            {
+                color: parent.highlighted ? UM.Theme.getColor("setting_control_highlight") : "transparent"
+                border.color: parent.highlighted ? UM.Theme.getColor("setting_control_border_highlight") : "transparent"
             }
         }
     }

resources/qml/Sidebar.qml

@@ -214,6 +214,18 @@ Rectangle
                     horizontalAlignment: Text.AlignHCenter
                     verticalAlignment: Text.AlignVCenter
                     elide: Text.ElideRight
+                    color:
+                    {
+                        if(control.pressed)
+                        {
+                            return UM.Theme.getColor("action_button_active_text");
+                        }
+                        else if(control.hovered)
+                        {
+                            return UM.Theme.getColor("action_button_hovered_text");
+                        }
+                        return UM.Theme.getColor("action_button_text");
+                    }
                 }
             }
         }