QmlDesigner: Add switch to StudioControls

* Add switch control
* Add additional color to all themes

Task-number: QDS-6146
Change-Id: I75c8aa2dc0dd75cf5b3ac1e025b05ad5110d5b9e
Reviewed-by: Brook Cronin <brook.cronin@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Switch.qml

@@ -0,0 +1,225 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Templates 2.15 as T
+import StudioTheme 1.0 as StudioTheme
+
+T.Switch {
+    id: root
+
+    property alias actionIndicator: actionIndicator
+
+    // This property is used to indicate the global hover state
+    property bool hover: root.hovered && root.enabled
+    property bool edit: false
+
+    property alias actionIndicatorVisible: actionIndicator.visible
+    property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth
+    property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight
+
+    property alias labelVisible: switchLabel.visible
+    property alias labelColor: switchLabel.color
+
+    property alias fontFamily: switchLabel.font.family
+    property alias fontPixelSize: switchLabel.font.pixelSize
+
+    font.pixelSize: StudioTheme.Values.myFontSize
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    spacing: StudioTheme.Values.switchSpacing
+    hoverEnabled: true
+    activeFocusOnTab: false
+
+    ActionIndicator {
+        id: actionIndicator
+        myControl: root
+        width: actionIndicator.visible ? root.__actionIndicatorWidth : 0
+        height: actionIndicator.visible ? root.__actionIndicatorHeight : 0
+    }
+
+    indicator: Rectangle {
+        id: switchBackground
+        x: actionIndicator.width
+        y: 0
+        z: 5
+        implicitWidth: StudioTheme.Values.height * 2
+        implicitHeight: StudioTheme.Values.height
+        radius: StudioTheme.Values.height * 0.5
+        color: StudioTheme.Values.themeControlBackground
+        border.width: StudioTheme.Values.border
+        border.color: StudioTheme.Values.themeControlOutline
+
+        Rectangle {
+            id: switchIndicator
+
+            readonly property real gap: 5
+            property real size: switchBackground.implicitHeight - switchIndicator.gap * 2
+
+            x: root.checked ? parent.width - width - switchIndicator.gap
+                            : switchIndicator.gap
+            y: switchIndicator.gap
+            width: switchIndicator.size
+            height: switchIndicator.size
+            radius: switchIndicator.size * 0.5
+            color: StudioTheme.Values.themeTextColor
+            border.width: 0
+        }
+    }
+
+    contentItem: T.Label {
+        id: switchLabel
+        leftPadding: switchBackground.x + switchBackground.width + root.spacing
+        rightPadding: 0
+        verticalAlignment: Text.AlignVCenter
+        text: root.text
+        font: root.font
+        color: StudioTheme.Values.themeTextColor
+        visible: text !== ""
+    }
+
+    property bool __default: root.enabled && !root.hover && !actionIndicator.hover && !root.pressed
+    property bool __globalHover: root.enabled && actionIndicator.hover && !root.pressed
+    property bool __hover: root.hover && !actionIndicator.hover && !root.pressed
+    property bool __press: root.hover && root.pressed
+
+    states: [
+        State {
+            name: "default"
+            when: root.__default && !root.checked
+            PropertyChanges {
+                target: switchBackground
+                color: StudioTheme.Values.themeControlBackground
+                border.color: StudioTheme.Values.themeControlOutline
+            }
+            PropertyChanges {
+                target: switchIndicator
+                color: StudioTheme.Values.themeTextColor
+            }
+        },
+        State {
+            name: "globalHover"
+            when: root.__globalHover && !root.checked
+            PropertyChanges {
+                target: switchBackground
+                color: StudioTheme.Values.themeControlBackgroundGlobalHover
+                border.color: StudioTheme.Values.themeControlOutline
+            }
+            PropertyChanges {
+                target: switchIndicator
+                color: StudioTheme.Values.themeTextColor
+            }
+        },
+        State {
+            name: "hover"
+            when: root.__hover && !root.checked
+            PropertyChanges {
+                target: switchBackground
+                color: StudioTheme.Values.themeControlBackgroundHover
+                border.color: StudioTheme.Values.themeControlOutline
+            }
+            PropertyChanges {
+                target: switchIndicator
+                color: StudioTheme.Values.themeTextColor
+            }
+        },
+        State {
+            name: "press"
+            when: root.__press && !root.checked
+            PropertyChanges {
+                target: switchBackground
+                color: StudioTheme.Values.themeControlBackgroundInteraction
+                border.color: StudioTheme.Values.themeControlOutlineInteraction
+            }
+            PropertyChanges {
+                target: switchIndicator
+                color: StudioTheme.Values.themeInteraction
+            }
+        },
+        State {
+            name: "disable"
+            when: !root.enabled && !root.checked
+            PropertyChanges {
+                target: switchBackground
+                color: StudioTheme.Values.themeControlBackgroundDisabled
+                border.color: StudioTheme.Values.themeControlOutlineDisabled
+            }
+            PropertyChanges {
+                target: switchIndicator
+                color: StudioTheme.Values.themeTextColorDisabled
+            }
+            PropertyChanges {
+                target: switchLabel
+                color: StudioTheme.Values.themeTextColorDisabled
+            }
+        },
+
+        State {
+            name: "defaultChecked"
+            when: root.__default && root.checked
+            extend: "default"
+            PropertyChanges {
+                target: switchBackground
+                color: StudioTheme.Values.themeInteraction
+                border.color: StudioTheme.Values.themeInteraction
+            }
+        },
+        State {
+            name: "globalHoverChecked"
+            when: root.__globalHover && root.checked
+            extend: "globalHover"
+            PropertyChanges {
+                target: switchBackground
+                color: StudioTheme.Values.themeInteractionHover
+                border.color: StudioTheme.Values.themeInteractionHover
+            }
+        },
+        State {
+            name: "hoverChecked"
+            when: root.__hover && root.checked
+            extend: "hover"
+            PropertyChanges {
+                target: switchBackground
+                color: StudioTheme.Values.themeInteractionHover
+                border.color: StudioTheme.Values.themeInteractionHover
+            }
+        },
+        State {
+            name: "pressChecked"
+            when: root.__press && root.checked
+            extend: "press"
+        },
+        State {
+            name: "disableChecked"
+            when: !root.enabled && root.checked
+            extend: "disable"
+        }
+    ]
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml

@@ -72,6 +72,8 @@ QtObject {
     property real radioButtonIndicatorWidth: 14
     property real radioButtonIndicatorHeight: 14
 
+    property real switchSpacing: values.checkBoxSpacing
+
     property real columnWidth: 225 + (175 * (values.scaleFactor * 2))
 
     property real marginTopBottom: 4
@@ -214,6 +216,8 @@ QtObject {
     property string themeWarning: Theme.color(Theme.DSwarningColor)
     property string themeDisabled: Theme.color(Theme.DSdisabledColor)
 
+    property string themeInteractionHover: Theme.color(Theme.DSinteractionHover)
+
     property string themeAliasIconChecked: Theme.color(Theme.DSnavigatorAliasIconChecked)
 
     // Control colors

share/qtcreator/themes/dark.creatortheme

@@ -35,6 +35,8 @@ DSerrorColor=ffdf3a3a
 DSwarningColor=warning
 DSdisabledColor=ff707070
 
+DSinteractionHover=ff74cbfc
+
 DScontrolBackground=ff2e2f30
 DScontrolBackgroundInteraction=ff3d3d3d
 DScontrolBackgroundDisabled=ff2e2f30

share/qtcreator/themes/default.creatortheme

@@ -26,6 +26,8 @@ DSerrorColor=ffdf3a3a
 DSwarningColor=warning
 DSdisabledColor=ff8e8e8e
 
+DSinteractionHover=ff74cbfc
+
 DScontrolBackground=ffeaeaea
 DScontrolBackgroundInteraction=ffc9c9c9
 DScontrolBackgroundDisabled=ffeaeaea

share/qtcreator/themes/design-light.creatortheme

@@ -40,6 +40,8 @@ DSerrorColor=ffdf3a3a
 DSwarningColor=warning
 DSdisabledColor=ff8e8e8e
 
+DSinteractionHover=ff74cbfc
+
 DScontrolBackground=ffeaeaea
 DScontrolBackgroundInteraction=ffc9c9c9
 DScontrolBackgroundDisabled=ffeaeaea

share/qtcreator/themes/design.creatortheme

@@ -37,6 +37,8 @@ DSerrorColor=ffdf3a3a
 DSwarningColor=warning
 DSdisabledColor=ff707070
 
+DSinteractionHover=ff74cbfc
+
 DScontrolBackground=ff2e2f30
 DScontrolBackgroundInteraction=ff3d3d3d
 DScontrolBackgroundDisabled=ff2e2f30

share/qtcreator/themes/flat-dark.creatortheme

@@ -39,6 +39,8 @@ DSerrorColor=ffdf3a3a
 DSwarningColor=warning
 DSdisabledColor=ff707070
 
+DSinteractionHover=ff74cbfc
+
 DScontrolBackground=ff2e2f30
 DScontrolBackgroundInteraction=ff3d3d3d
 DScontrolBackgroundDisabled=ff2e2f30

share/qtcreator/themes/flat-light.creatortheme

@@ -35,6 +35,8 @@ DSerrorColor=ffdf3a3a
 DSwarningColor=warning
 DSdisabledColor=ff8e8e8e
 
+DSinteractionHover=ff74cbfc
+
 DScontrolBackground=ffeaeaea
 DScontrolBackgroundInteraction=ffc9c9c9
 DScontrolBackgroundDisabled=ffeaeaea

share/qtcreator/themes/flat.creatortheme

@@ -33,6 +33,8 @@ DSerrorColor=ffdf3a3a
 DSwarningColor=warning
 DSdisabledColor=ff707070
 
+DSinteractionHover=ff74cbfc
+
 DScontrolBackground=ff2e2f30
 DScontrolBackgroundInteraction=ff3d3d3d
 DScontrolBackgroundDisabled=ff2e2f30