Style checkbox control

interface/resources/qml/controls-uit/CheckBox.qml

@@ -0,0 +1,70 @@
+//
+//  CheckBox.qml
+//
+//  Created by David Rowe on 26 Feb 2016
+//  Copyright 2016 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+import QtQuick 2.5
+import QtQuick.Controls 1.4 as Original
+import QtQuick.Controls.Styles 1.4
+
+import "../styles-uit"
+
+Original.CheckBox {
+    id: checkBox
+    HifiConstants { id: hifi }
+
+    property int colorScheme: hifi.colorSchemes.light
+    readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light
+
+    readonly property int boxSize: 14
+    readonly property int boxRadius: 3
+    readonly property int checkSize: 10
+    readonly property int checkRadius: 2
+
+    style: CheckBoxStyle {
+        indicator: Rectangle {
+            id: box
+            width: boxSize
+            height: boxSize
+            radius: boxRadius
+            gradient: Gradient {
+                GradientStop {
+                    position: 0.2
+                    color: pressed || hovered
+                           ? (checkBox.isLightColorScheme ? hifi.colors.checkboxDarkStart : hifi.colors.checkboxLightStart)
+                           : (checkBox.isLightColorScheme ? hifi.colors.checkboxLightStart : hifi.colors.checkboxDarkStart)
+                }
+                GradientStop {
+                    position: 1.0
+                    color: pressed || hovered
+                           ? (checkBox.isLightColorScheme ? hifi.colors.checkboxDarkFinish : hifi.colors.checkboxLightFinish)
+                           : (checkBox.isLightColorScheme ? hifi.colors.checkboxLightFinish : hifi.colors.checkboxDarkFinish)
+                }
+            }
+
+            Rectangle {
+                id: check
+                width: checkSize
+                height: checkSize
+                radius: checkRadius
+                anchors.centerIn: parent
+                color: hifi.colors.checkboxChecked
+                border.width: 1
+                border.color: hifi.colors.checkboxCheckedBorder
+                visible: checked && !pressed || !checked && pressed
+            }
+        }
+
+        label: RalewaySemibold {
+            text: control.text
+            size: hifi.fontSizes.inputLabel
+            color: isLightColorScheme ? hifi.colors.lightGray : hifi.colors.lightGrayText
+            x: checkBox.boxSize / 2
+        }
+    }
+}

interface/resources/qml/dialogs/preferences/ButtonPreference.qml

@@ -1,5 +1,5 @@
 //
-//  BrowsablePreference.qml
+//  ButtonPreference.qml
 //
 //  Created by Bradley Austin Davis on 18 Jan 2016
 //  Copyright 2016 High Fidelity, Inc.

interface/resources/qml/dialogs/preferences/CheckBoxPreference.qml

@@ -1,6 +1,16 @@
+//
+//  CheckBoxPreference.qml
+//
+//  Created by Bradley Austin Davis on 18 Jan 2016
+//  Copyright 2016 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
 import QtQuick 2.5
-import QtQuick.Controls 1.4
-import "../../controls"
+
+import "../../controls-uit"
 
 Preference {
     id: root
@@ -20,5 +30,6 @@ Preference {
         id: checkBox
         anchors.fill: parent
         text: root.label
+        colorScheme: hifi.colorSchemes.dark
     }
 }

interface/resources/qml/styles-uit/HifiConstants.qml

@@ -61,6 +61,12 @@ Item {
         readonly property color tableRowDarkEven: "#a6181818"
         readonly property color tableScrollHandle: "#707070"
         readonly property color tableScrollBackground: "#323232"
+        readonly property color checkboxLightStart: "#ffffff"
+        readonly property color checkboxLightFinish: "#afafaf"
+        readonly property color checkboxDarkStart: "#7d7d7d"
+        readonly property color checkboxDarkFinish: "#6b6a6b"
+        readonly property color checkboxChecked: primaryHighlight
+        readonly property color checkboxCheckedBorder: "#36cdff"
     }
 
     Item {