Merge pull request #1740 from Ultimaker/feature_extruder_buttons

Add Extruder selection buttons to the Toolbar

plugins/PerObjectSettingsTool/PerObjectSettingsPanel.qml

@@ -26,129 +26,6 @@ Item {
 
         spacing: UM.Theme.getSize("default_margin").height
 
-        Row
-        {
-            spacing: UM.Theme.getSize("default_margin").width
-            Label
-            {
-                text: catalog.i18nc("@label Followed by extruder selection drop-down.", "Print model with")
-                anchors.verticalCenter: extruderSelector.verticalCenter
-
-                color: UM.Theme.getColor("setting_control_text")
-                font: UM.Theme.getFont("default")
-                visible: extruderSelector.visible
-            }
-            ComboBox
-            {
-                id: extruderSelector
-
-                model: Cura.ExtrudersModel
-                {
-                    id: extrudersModel
-                    onModelChanged: extruderSelector.color = extrudersModel.getItem(extruderSelector.currentIndex).color
-                }
-                property string color: extrudersModel.getItem(extruderSelector.currentIndex).color
-                visible: machineExtruderCount.properties.value > 1
-                textRole: "name"
-                width: UM.Theme.getSize("setting_control").width
-                height: UM.Theme.getSize("section").height
-                MouseArea
-                {
-                    anchors.fill: parent
-                    acceptedButtons: Qt.NoButton
-                    onWheel: wheel.accepted = true;
-                }
-
-                style: ComboBoxStyle
-                {
-                    background: Rectangle
-                    {
-                        color:
-                        {
-                            if(extruderSelector.hovered || base.activeFocus)
-                            {
-                                return UM.Theme.getColor("setting_control_highlight");
-                            }
-                            else
-                            {
-                                return UM.Theme.getColor("setting_control");
-                            }
-                        }
-                        border.width: UM.Theme.getSize("default_lining").width
-                        border.color: UM.Theme.getColor("setting_control_border")
-                    }
-                    label: Item
-                    {
-                        Rectangle
-                        {
-                            id: swatch
-                            height: UM.Theme.getSize("setting_control").height / 2
-                            width: height
-                            anchors.left: parent.left
-                            anchors.leftMargin: UM.Theme.getSize("default_lining").width
-                            anchors.verticalCenter: parent.verticalCenter
-
-                            color: extruderSelector.color
-                            border.width: UM.Theme.getSize("default_lining").width
-                            border.color: !enabled ? UM.Theme.getColor("setting_control_disabled_border") : UM.Theme.getColor("setting_control_border")
-                        }
-                        Label
-                        {
-                            anchors.left: swatch.right
-                            anchors.leftMargin: UM.Theme.getSize("default_lining").width
-                            anchors.right: downArrow.left
-                            anchors.rightMargin: UM.Theme.getSize("default_lining").width
-                            anchors.verticalCenter: parent.verticalCenter
-
-                            text: extruderSelector.currentText
-                            font: UM.Theme.getFont("default")
-                            color: !enabled ? UM.Theme.getColor("setting_control_disabled_text") : UM.Theme.getColor("setting_control_text")
-
-                            elide: Text.ElideRight
-                            verticalAlignment: Text.AlignVCenter
-                        }
-
-                        UM.RecolorImage
-                        {
-                            id: downArrow
-                            anchors.right: parent.right
-                            anchors.rightMargin: UM.Theme.getSize("default_lining").width * 2
-                            anchors.verticalCenter: parent.verticalCenter
-
-                            source: UM.Theme.getIcon("arrow_bottom")
-                            width: UM.Theme.getSize("standard_arrow").width
-                            height: UM.Theme.getSize("standard_arrow").height
-                            sourceSize.width: width + 5
-                            sourceSize.height: width + 5
-
-                            color: UM.Theme.getColor("setting_control_text")
-                        }
-                    }
-                }
-
-                onActivated:
-                {
-                    UM.ActiveTool.setProperty("SelectedActiveExtruder", extrudersModel.getItem(index).id);
-                    extruderSelector.color = extrudersModel.getItem(index).color;
-                }
-                onModelChanged: updateCurrentIndex();
-
-                function updateCurrentIndex()
-                {
-                    for(var i = 0; i < extrudersModel.rowCount(); ++i)
-                    {
-                        if(extrudersModel.getItem(i).id == UM.ActiveTool.properties.getValue("SelectedActiveExtruder"))
-                        {
-                            extruderSelector.currentIndex = i;
-                            extruderSelector.color = extrudersModel.getItem(i).color;
-                            return;
-                        }
-                    }
-                    extruderSelector.currentIndex = -1;
-                }
-            }
-        }
-
         Column
         {
             // This is to ensure that the panel is first increasing in size up to 200 and then shows a scrollbar.

plugins/PerObjectSettingsTool/PerObjectSettingsTool.py

@@ -112,4 +112,4 @@ class PerObjectSettingsTool(Tool):
             self._single_model_selected = False # Group is selected, so tool needs to be disabled
         else:
             self._single_model_selected = True
-        Application.getInstance().getController().toolEnabledChanged.emit(self._plugin_id, (self._advanced_mode or self._multi_extrusion) and self._single_model_selected)
+        Application.getInstance().getController().toolEnabledChanged.emit(self._plugin_id, self._advanced_mode and self._single_model_selected)

resources/qml/ExtruderButton.qml

@@ -0,0 +1,80 @@
+// Copyright (c) 2017 Ultimaker B.V.
+// Cura is released under the terms of the AGPLv3 or higher.
+
+import QtQuick 2.2
+import QtQuick.Controls 1.1
+
+import UM 1.2 as UM
+import Cura 1.0 as Cura
+
+Button
+{
+    id: base
+
+    property var extruder;
+
+    text: catalog.i18ncp("@label", "Print Selected Model with %1", "Print Selected Models With %1", UM.Selection.selectionCount).arg(extruder.name)
+
+    style: UM.Theme.styles.tool_button;
+    iconSource: checked ? UM.Theme.getIcon("material_selected") : UM.Theme.getIcon("material_not_selected");
+
+    checked: ExtruderManager.selectedObjectExtruders.indexOf(extruder.id) != -1
+    enabled: UM.Selection.hasSelection
+
+    property color customColor: base.hovered ? UM.Theme.getColor("button_hover") : UM.Theme.getColor("button");
+
+    Rectangle
+    {
+        anchors.fill: parent
+        anchors.margins: UM.Theme.getSize("default_lining").width;
+
+        color: "transparent"
+
+        border.width: base.checked ? UM.Theme.getSize("default_lining").width : 0;
+        border.color: UM.Theme.getColor("button_text")
+    }
+
+    Item
+    {
+        anchors
+        {
+            right: parent.right;
+            top: parent.top;
+            margins: UM.Theme.getSize("default_lining").width * 3
+        }
+        width: UM.Theme.getSize("default_margin").width
+        height: UM.Theme.getSize("default_margin").height
+
+        Text
+        {
+            anchors.centerIn: parent;
+            text: index + 1;
+            color: parent.enabled ? UM.Theme.getColor("button_text") : UM.Theme.getColor("button_disabled_text")
+            font: UM.Theme.getFont("default_bold");
+        }
+    }
+
+    Rectangle
+    {
+        anchors
+        {
+            left: parent.left;
+            top: parent.top;
+            margins: UM.Theme.getSize("default_lining").width * 3
+        }
+
+        color: model.color
+
+        width: UM.Theme.getSize("default_margin").width
+        height: UM.Theme.getSize("default_margin").height
+
+        border.width: UM.Theme.getSize("default_lining").width
+        border.color: UM.Theme.getColor("lining");
+    }
+
+    onClicked:
+    {
+        forceActiveFocus() //First grab focus, so all the text fields are updated
+        CuraActions.setExtruderForSelection(extruder.id);
+    }
+}

resources/qml/Toolbar.qml

@@ -6,28 +6,33 @@ import QtQuick.Controls 1.1
 import QtQuick.Controls.Styles 1.1
 import QtQuick.Layouts 1.1
 
-import UM 1.0 as UM
+import UM 1.2 as UM
+import Cura 1.0 as Cura
 
-Item {
+Item
+{
     id: base;
 
     width: buttons.width;
     height: buttons.height
     property int activeY
 
-    ColumnLayout {
+    Column
+    {
         id: buttons;
 
         anchors.bottom: parent.bottom;
         anchors.left: parent.left;
         spacing: UM.Theme.getSize("button_lining").width
 
-        Repeater {
+        Repeater
+        {
             id: repeat
 
             model: UM.ToolModel { }
 
-            Button {
+            Button
+            {
                 text: model.name
                 iconSource: UM.Theme.getIcon(model.icon);
 
@@ -45,9 +50,11 @@ Item {
                 }
                 //Workaround since using ToolButton"s onClicked would break the binding of the checked property, instead
                 //just catch the click so we do not trigger that behaviour.
-                MouseArea {
+                MouseArea
+                {
                     anchors.fill: parent;
-                    onClicked: {
+                    onClicked:
+                    {
                         forceActiveFocus() //First grab focus, so all the text fields are updated
                         if(parent.checked)
                         {
@@ -61,9 +68,19 @@ Item {
                 }
             }
         }
+
+        Item { height: UM.Theme.getSize("default_margin").height; width: 1; visible: extruders.count > 0 }
+
+        Repeater
+        {
+            id: extruders
+            model: Cura.ExtrudersModel { id: extrudersModel }
+            ExtruderButton { extruder: model }
+        }
     }
 
-    UM.PointingRectangle {
+    UM.PointingRectangle
+    {
         id: panelBorder;
 
         anchors.left: parent.right;
@@ -75,7 +92,8 @@ Item {
         target: Qt.point(parent.right, base.activeY +  UM.Theme.getSize("button").height/2)
         arrowSize: UM.Theme.getSize("default_arrow").width
 
-        width: {
+        width:
+        {
             if (panel.item && panel.width > 0){
                  return Math.max(panel.width + 2 * UM.Theme.getSize("default_margin").width)
             }
@@ -90,7 +108,8 @@ Item {
 
         color: UM.Theme.getColor("lining");
 
-        UM.PointingRectangle {
+        UM.PointingRectangle
+        {
             id: panelBackground;
 
             color: UM.Theme.getColor("tool_panel_background");
@@ -105,7 +124,8 @@ Item {
             }
         }
 
-        Loader {
+        Loader
+        {
             id: panel
 
             x: UM.Theme.getSize("default_margin").width;
@@ -116,6 +136,8 @@ Item {
         }
     }
 
+    // This rectangle displays the information about the current angle etc. when
+    // dragging a tool handle.
     Rectangle
     {
         x: -base.x + base.mouseX + UM.Theme.getSize("default_margin").width

resources/themes/cura/icons/material_not_selected.svg

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="30"
+   height="30"
+   viewBox="0 0 30 30"
+   version="1.1"
+   id="svg4668"
+   sodipodi:docname="material_not_selected.svg"
+   inkscape:version="0.92.1 r">
+  <metadata
+     id="metadata4672">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Artboard 3</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1266"
+     inkscape:window-height="1411"
+     id="namedview4670"
+     showgrid="false"
+     inkscape:pagecheckerboard="true"
+     inkscape:zoom="9.0769231"
+     inkscape:cx="-5.7118644"
+     inkscape:cy="13"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg4668" />
+  <!-- Generator: Sketch 43.1 (39012) - http://www.bohemiancoding.com/sketch -->
+  <title
+     id="title4657">Artboard 3</title>
+  <desc
+     id="desc4659">Created with Sketch.</desc>
+  <defs
+     id="defs4661" />
+  <g
+     id="Feature-apply-material-to-model"
+     style="fill:none;fill-rule:evenodd;stroke:none;stroke-width:1"
+     transform="translate(0,2)">
+    <g
+       id="Artboard-3"
+       style="fill:#ffffff">
+      <g
+         id="Group-19">
+        <path
+           d="m 13,26 h 1.000227 C 22.844516,26 30,18.836556 30,10 h -1 c 0,8.284271 -6.717306,15 -14.999491,15 H 13 Z"
+           id="Combined-Shape-Copy-64"
+           inkscape:connector-curvature="0" />
+        <path
+           d="M 0,13 C 0,5.8202982 5.8187196,0 13,0 20.179702,0 26,5.8187196 26,13 26,20.179702 20.18128,26 13,26 5.8202982,26 0,20.18128 0,13 Z m 1.2380952,0 C 1.2380952,19.497349 6.5040794,24.761905 13,24.761905 19.497349,24.761905 24.761905,19.495921 24.761905,13 24.761905,6.5026511 19.495921,1.2380952 13,1.2380952 6.5026511,1.2380952 1.2380952,6.5040794 1.2380952,13 Z M 1.8,12.866667 C 1.8,12.384683 2.1844415,12 2.6586742,12 H 6.1413258 C 6.6091548,12 7,12.38802 7,12.866667 7,13.348651 6.6155584,13.733333 6.1413258,13.733333 H 2.6586742 C 2.1908452,13.733333 1.8,13.345313 1.8,12.866667 Z m 17,0 C 18.8,12.384683 19.184442,12 19.658674,12 h 3.482652 C 23.609155,12 24,12.38802 24,12.866667 c 0,0.481984 -0.384442,0.866666 -0.858674,0.866666 H 19.658674 C 19.190845,13.733333 18.8,13.345313 18.8,12.866667 Z m 1.943614,8.064088 c -0.338454,0.338455 -0.889195,0.336457 -1.22,0.0057 L 17.061008,18.4738 c -0.335334,-0.335333 -0.335163,-0.879186 0.0057,-1.22 0.338454,-0.338455 0.889195,-0.336457 1.22,-0.0057 l 2.462607,2.462607 c 0.335333,0.335333 0.335162,0.879186 -0.0057,1.22 z M 7.5236141,8.9364067 5.0610076,6.4738002 C 4.7256744,6.138467 4.7258451,5.594614 5.0666591,5.2537999 5.4051135,4.9153455 5.9558542,4.9173433 6.2866593,5.2481484 L 8.7492659,7.7107549 C 9.084599,8.0460881 9.0844284,8.5899412 8.7436144,8.9307552 8.40516,9.2692096 7.8544192,9.2672118 7.5236141,8.9364067 Z M 5.0666591,20.930755 c -0.340814,-0.340814 -0.3409847,-0.884667 -0.00565,-1.22 l 2.4626065,-2.462607 c 0.3308051,-0.330805 0.8815459,-0.332803 1.2200003,0.0057 0.340814,0.340814 0.3409846,0.884667 0.00565,1.22 L 6.2866593,20.936407 C 5.9558542,21.267212 5.4051135,21.26921 5.0666591,20.930755 Z M 17.066659,8.9307552 c -0.340814,-0.340814 -0.340985,-0.8846671 -0.0057,-1.2200003 l 2.462606,-2.4626065 c 0.330805,-0.3308051 0.881546,-0.3328029 1.22,0.00565 0.340814,0.3408141 0.340985,0.8846671 0.0057,1.2200003 l -2.462607,2.4626065 c -0.330805,0.3308051 -0.881546,0.3328029 -1.219999,-0.00565 z M 13.133333,2 C 13.615317,2 14,2.3844416 14,2.8586742 V 6.3413258 C 14,6.8091548 13.61198,7.2 13.133333,7.2 12.65135,7.2 12.266667,6.8155584 12.266667,6.3413258 V 2.8586742 C 12.266667,2.3908452 12.654687,2 13.133333,2 Z m 0,17 C 13.615317,19 14,19.384442 14,19.858674 v 3.482652 C 14,23.809155 13.61198,24.2 13.133333,24.2 12.65135,24.2 12.266667,23.815558 12.266667,23.341326 V 19.858674 C 12.266667,19.390845 12.654687,19 13.133333,19 Z M 8.6666667,13 c 0,-2.393234 1.9449693,-4.3333333 4.3333333,-4.3333333 2.393234,0 4.333333,1.9449693 4.333333,4.3333333 0,2.393234 -1.944969,4.333333 -4.333333,4.333333 -2.393234,0 -4.3333333,-1.944969 -4.3333333,-4.333333 z m 1.2380952,0 c 0,1.705974 1.3857851,3.095238 3.0952381,3.095238 1.705974,0 3.095238,-1.385785 3.095238,-3.095238 0,-1.705974 -1.385785,-3.0952381 -3.095238,-3.0952381 -1.705974,0 -3.0952381,1.3857851 -3.0952381,3.0952381 z"
+           id="Combined-Shape-Copy-60"
+           inkscape:connector-curvature="0" />
+      </g>
+    </g>
+  </g>
+</svg>

resources/themes/cura/icons/material_selected.svg

@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="30"
+   height="30"
+   viewBox="0 0 30 30"
+   version="1.1"
+   id="svg4595"
+   sodipodi:docname="material_selected.svg"
+   inkscape:version="0.92.1 r">
+  <metadata
+     id="metadata4599">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Artboard 3 Copy</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2502"
+     inkscape:window-height="1411"
+     id="namedview4597"
+     showgrid="false"
+     inkscape:pagecheckerboard="true"
+     inkscape:zoom="23.442308"
+     inkscape:cx="18.780195"
+     inkscape:cy="17.941232"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg4595" />
+  <!-- Generator: Sketch 43.1 (39012) - http://www.bohemiancoding.com/sketch -->
+  <title
+     id="title4584">Artboard 3 Copy</title>
+  <desc
+     id="desc4586">Created with Sketch.</desc>
+  <defs
+     id="defs4588" />
+  <g
+     id="Feature-apply-material-to-model"
+     style="fill:none;fill-rule:evenodd;stroke:none;stroke-width:1"
+     transform="translate(0,2)">
+    <g
+       id="Artboard-3-Copy"
+       style="fill:#ffffff">
+      <g
+         id="Group-20-Copy">
+        <path
+           d="M 13,26 C 5.8202982,26 0,20.179702 0,13 0,5.8202982 5.8202982,0 13,0 c 7.179702,0 13,5.8202982 13,13 0,7.179702 -5.820298,13 -13,13 z m 0,-8.666667 c 2.393234,0 4.333333,-1.940099 4.333333,-4.333333 0,-2.393234 -1.940099,-4.3333333 -4.333333,-4.3333333 -2.393234,0 -4.3333333,1.9400993 -4.3333333,4.3333333 0,2.393234 1.9400993,4.333333 4.3333333,4.333333 z m 0,1.733334 c -0.481984,0 -0.866667,0.384441 -0.866667,0.858674 v 3.482651 c 0,0.467829 0.38802,0.858675 0.866667,0.858675 0.481984,0 0.866667,-0.384442 0.866667,-0.858675 v -3.482651 c 0,-0.467829 -0.38802,-0.858674 -0.866667,-0.858674 z M 13,1.7333333 c -0.481984,0 -0.866667,0.3844416 -0.866667,0.8586743 v 3.4826515 c 0,0.4678291 0.38802,0.8586742 0.866667,0.8586742 0.481984,0 0.866667,-0.3844415 0.866667,-0.8586742 V 2.5920076 C 13.866667,2.1241785 13.478647,1.7333333 13,1.7333333 Z M 8.6231145,8.6231145 C 8.9639285,8.2823004 8.9640991,7.7384474 8.628766,7.4031142 L 6.1661595,4.9405077 C 5.8353543,4.6097026 5.2846136,4.6077048 4.9461592,4.9461592 4.6053452,5.2869732 4.6051746,5.8308263 4.9405077,6.1661595 L 7.4031142,8.628766 C 7.7339193,8.9595711 8.2846601,8.9615689 8.6231145,8.623116 Z M 20.756448,20.756448 c 0.340814,-0.340814 0.340984,-0.884667 0.0057,-1.22 l -2.462606,-2.462607 c -0.330805,-0.330805 -0.881546,-0.332803 -1.220001,0.0057 -0.340814,0.340815 -0.340984,0.884668 -0.0057,1.220001 l 2.462607,2.462606 c 0.330805,0.330805 0.881545,0.332803 1.22,-0.0057 z M 18.299493,8.628766 20.762099,6.1661595 c 0.335333,-0.3353332 0.335163,-0.8791863 -0.0057,-1.2200003 -0.338455,-0.3384544 -0.889195,-0.3364566 -1.22,-0.00565 l -2.462607,2.4626065 c -0.335333,0.3353332 -0.335163,0.8791862 0.0057,1.2200003 0.338455,0.3384544 0.889196,0.3364566 1.220001,0.00565 z M 4.9461592,20.756448 c 0.3384544,0.338454 0.8891951,0.336456 1.2200003,0.0057 L 8.628766,18.299493 C 8.9640991,17.96416 8.9639285,17.420307 8.6231145,17.079492 8.2846601,16.741038 7.7339193,16.743036 7.4031142,17.073841 l -2.4626065,2.462607 c -0.3353331,0.335333 -0.3351625,0.879186 0.00565,1.22 z M 6.9333333,13 c 0,-0.481984 -0.3844415,-0.866667 -0.8586742,-0.866667 H 2.5920076 c -0.4678291,0 -0.8586743,0.38802 -0.8586743,0.866667 0,0.481984 0.3844416,0.866667 0.8586743,0.866667 h 3.4826515 c 0.4678291,0 0.8586742,-0.38802 0.8586742,-0.866667 z m 17.3333337,0 c 0,-0.481984 -0.384442,-0.866667 -0.858675,-0.866667 h -3.482651 c -0.467829,0 -0.858674,0.38802 -0.858674,0.866667 0,0.481984 0.384441,0.866667 0.858674,0.866667 h 3.482651 c 0.467829,0 0.858675,-0.38802 0.858675,-0.866667 z"
+           id="Combined-Shape-Copy-58"
+           transform="rotate(-90,13,13)"
+           inkscape:connector-curvature="0" />
+        <path
+           d="m 13,26 h 1.000227 C 22.844516,26 30,18.836556 30,10 h -1 c 0,8.284271 -6.717306,15 -14.999491,15 H 13 Z"
+           id="Combined-Shape-Copy-59"
+           inkscape:connector-curvature="0" />
+      </g>
+    </g>
+  </g>
+</svg>

resources/themes/cura/styles.qml

@@ -206,7 +206,9 @@ QtObject {
                     property bool down: control.pressed || (control.checkable && control.checked);
 
                     color: {
-                        if(control.checkable && control.checked && control.hovered) {
+                        if(control.customColor !== undefined && control.customColor !== null) {
+                            return control.customColor
+                        } else if(control.checkable && control.checked && control.hovered) {
                             return Theme.getColor("button_active_hover");
                         } else if(control.pressed || (control.checkable && control.checked)) {
                             return Theme.getColor("button_active");