Separator; Switch.qml updates; etc

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

@@ -0,0 +1,38 @@
+//
+//  Separator.qml
+//
+//  Created by Zach Fox on 2017-06-06
+//  Copyright 2017 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 "../styles-uit"
+
+Item {
+    // Size
+    height: 2;
+    Rectangle {
+        // Size
+        width: parent.width;
+        height: 1;
+        // Anchors
+        anchors.left: parent.left;
+        anchors.bottom: parent.bottom;
+        anchors.bottomMargin: height;
+        // Style
+        color: hifi.colors.baseGrayShadow;
+    }
+    Rectangle {
+        // Size
+        width: parent.width;
+        height: 1;
+        // Anchors
+        anchors.left: parent.left;
+        anchors.bottom: parent.bottom;
+        // Style
+        color: hifi.colors.baseGrayHighlight;
+    }
+}

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

@@ -19,42 +19,138 @@ Item {
 
     property int colorScheme: hifi.colorSchemes.light;
     readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light;
-    property int switchWidth: 100;
+    property int switchWidth: 70;
-    readonly property int switchRadius: 3;
+    readonly property int switchRadius: height/2;
-    property string offLabelText: "";
+    property string labelTextOff: "";
-    property string onLabelText: "";
+    property string labelGlyphOffText: "";
-    property string switchLabelText: "";
+    property int labelGlyphOffSize: 32;
+    property string labelTextOn: "";
+    property string labelGlyphOnText: "";
+    property int labelGlyphOnSize: 32;
+    property alias checked: originalSwitch.checked;
+    signal onCheckedChanged;
+    signal clicked;
 
     Original.Switch {
         id: originalSwitch;
         activeFocusOnPress: true;
         anchors.top: rootSwitch.top;
-        anchors.left: switchLabel.right;
+        anchors.left: rootSwitch.left;
-        anchors.leftMargin: 4;
+        anchors.leftMargin: rootSwitch.width/2 - rootSwitch.switchWidth/2;
+        onCheckedChanged: rootSwitch.onCheckedChanged();
+        onClicked: rootSwitch.clicked();
 
         style: SwitchStyle {
+
+            padding {
+                top: 3;
+                left: 3;
+                right: 3;
+                bottom: 3;
+            }
+
             groove: Rectangle {
+                color: hifi.colors.darkGray;
                 implicitWidth: rootSwitch.switchWidth;
                 implicitHeight: rootSwitch.height;
                 radius: rootSwitch.switchRadius;
-                border.color: control.activeFocus ? "darkblue" : "gray";
-                border.width: 1;
             }
 
             handle: Rectangle {
-                opacity: rootSwitch.enabled ? 1.0 : 0.5
+                id: switchHandle;
-                implicitWidth: rootSwitch.height - 5;
+                implicitWidth: rootSwitch.height - padding.top - padding.bottom;
                 implicitHeight: implicitWidth;
                 radius: implicitWidth/2;
-                border.color: hifi.colors.primaryHighlight;
+                border.color: hifi.colors.lightGrayText;
+                color: hifi.colors.lightGray;
+        
+                MouseArea {
+                    anchors.fill: parent;
+                    hoverEnabled: true;
+                    onEntered: parent.color = hifi.colors.blueHighlight;
+                    onExited: parent.color = hifi.colors.lightGray;
+                }
             }
         }
     }
 
-    MouseArea {
+    // OFF Label
-        anchors.fill: parent;
+    Item {
-        onClicked: {
+        anchors.right: originalSwitch.left;
-            originalSwitch.checked = !originalSwitch.checked;
+        anchors.rightMargin: 10;
+        anchors.top: rootSwitch.top;
+        height: rootSwitch.height;
+
+        RalewaySemiBold {
+            id: labelOff;
+            text: labelTextOff;
+            size: hifi.fontSizes.inputLabel;
+            color: hifi.colors.lightGrayText;
+            anchors.top: parent.top;
+            anchors.right: parent.right;
+            width: paintedWidth;
+            height: parent.height;
+            verticalAlignment: Text.AlignVCenter;
+        }
+
+        HiFiGlyphs {
+            id: labelGlyphOff;
+            text: labelGlyphOffText;
+            size: labelGlyphOffSize;
+            color: hifi.colors.lightGrayText;
+            anchors.top: parent.top;
+            anchors.topMargin: 2;
+            anchors.right: labelOff.left;
+            anchors.rightMargin: 4;
+        }
+
+        MouseArea {
+            anchors.top: parent.top;
+            anchors.bottom: parent.bottom;
+            anchors.left: labelGlyphOff.left;
+            anchors.right: labelOff.right;
+            onClicked: {
+                originalSwitch.checked = false;
+            }
+        }
+    }
+
+    // ON Label
+    Item {
+        anchors.left: originalSwitch.right;
+        anchors.leftMargin: 10;
+        anchors.top: rootSwitch.top;
+        height: rootSwitch.height;
+
+        RalewaySemiBold {
+            id: labelOn;
+            text: labelTextOn;
+            size: hifi.fontSizes.inputLabel;
+            color: hifi.colors.lightGrayText;
+            anchors.top: parent.top;
+            anchors.left: parent.left;
+            width: paintedWidth;
+            height: parent.height;
+            verticalAlignment: Text.AlignVCenter;
+        }
+
+        HiFiGlyphs {
+            id: labelGlyphOn;
+            text: labelGlyphOnText;
+            size: labelGlyphOnSize;
+            color: hifi.colors.lightGrayText;
+            anchors.top: parent.top;
+            anchors.left: labelOn.right;
+        }
+
+        MouseArea {
+            anchors.top: parent.top;
+            anchors.bottom: parent.bottom;
+            anchors.left: labelOn.left;
+            anchors.right: labelGlyphOn.right;
+            onClicked: {
+                originalSwitch.checked = true;
+            }
         }
     }
 }

interface/resources/qml/hifi/SpectatorCamera.qml

@@ -23,7 +23,6 @@ Rectangle {
     HifiConstants { id: hifi; }
 
     id: spectatorCamera;
-    // Size
     // Style
     color: hifi.colors.baseGray;
     
@@ -40,7 +39,7 @@ Rectangle {
         anchors.top: parent.top;
 
         // "Spectator" text
-        RalewayRegular {
+        RalewaySemiBold {
             id: titleBarText;
             text: "Spectator";
             // Text size
@@ -56,15 +55,10 @@ Rectangle {
         }
 
         // Separator
-        Rectangle {
+        HifiControlsUit.Separator {
-            // Size
-            width: parent.width;
-            height: 1;
-            // Anchors
             anchors.left: parent.left;
+            anchors.right: parent.right;
             anchors.bottom: parent.bottom;
-            // Style
-            color: hifi.colors.faintGray;
         }
     }
     //
@@ -113,7 +107,7 @@ Rectangle {
             height: paintedHeight;
             // Anchors
             anchors.top: parent.top;
-            anchors.topMargin: 10;
+            anchors.topMargin: 15;
             anchors.left: spectatorDescriptionGlyph.right;
             anchors.leftMargin: 40;
             // Style
@@ -158,16 +152,11 @@ Rectangle {
         }
 
         // Separator
-        Rectangle {
+        HifiControlsUit.Separator {
-            // Size
-            width: parent.width;
-            height: 1;
-            // Anchors
             anchors.left: parent.left;
+            anchors.right: parent.right;
             anchors.top: spectatorLearnMoreText.bottom;
             anchors.topMargin: spectatorDescriptionText.anchors.topMargin;
-            // Style
-            color: hifi.colors.faintGray;
         }
     }
     //
@@ -193,10 +182,11 @@ Rectangle {
         // "Camera On" Checkbox
         HifiControlsUit.CheckBox {
             id: cameraToggleCheckBox;
+            colorScheme: hifi.colorSchemes.dark;
             anchors.left: parent.left;
             anchors.top: parent.top;
             text: "Camera On";
-            boxSize: 30;
+            boxSize: 24;
             onClicked: {
                 sendToScript({method: (checked ? 'enableSpectatorCamera' : 'disableSpectatorCamera')});
             }
@@ -205,7 +195,7 @@ Rectangle {
         // Spectator Camera Preview
         Image {
             id: spectatorCameraPreview;
-            height: 300;
+            height: 250;
             anchors.left: parent.left;
             anchors.top: cameraToggleCheckBox.bottom;
             anchors.topMargin: 20;
@@ -216,13 +206,24 @@ Rectangle {
             source: "http://1.bp.blogspot.com/-1GABEq__054/T03B00j_OII/AAAAAAAAAa8/jo55LcvEPHI/s1600/Winning.jpg";
         }
         
+        // "Monitor Shows" Switch Label Glyph
+        HiFiGlyphs {
+            id: monitorShowsSwitchLabelGlyph;
+            text: hifi.glyphs.screen;
+            size: 32;
+            color: hifi.colors.blueHighlight;
+            anchors.top: spectatorCameraPreview.bottom;
+            anchors.topMargin: 12;
+            anchors.left: parent.left;
+        }
         // "Monitor Shows" Switch Label
         RalewayLight {
             id: monitorShowsSwitchLabel;
-            text: "MONITOR SHOWS";
+            text: "MONITOR SHOWS:";
             anchors.top: spectatorCameraPreview.bottom;
             anchors.topMargin: 20;
-            anchors.left: parent.left;
+            anchors.left: monitorShowsSwitchLabelGlyph.right;
+            anchors.leftMargin: 6;
             size: 16;
             width: paintedWidth;
             height: paintedHeight;
@@ -232,25 +233,30 @@ Rectangle {
         // "Monitor Shows" Switch
         HifiControlsUit.Switch {
             id: monitorShowsSwitch;
-            height: 34;
+            height: 30;
             anchors.left: parent.left;
             anchors.right: parent.right;
             anchors.top: monitorShowsSwitchLabel.bottom;
             anchors.topMargin: 10;
-            switchLabelText: "Monitor Shows:";
+            labelTextOff: "HMD Preview";
-            //onClicked: {
+            labelGlyphOffText: hifi.glyphs.hmd;
-            //    sendToScript({method: (checked ? 'showCameraViewOnMonitor' : 'showMyViewOnMonitor')});
+            labelGlyphOffSize: 26;
-            //}
+            labelTextOn: "Camera View";
+            labelGlyphOnText: hifi.glyphs.alert;
+            onCheckedChanged: {
+                sendToScript({method: (checked ? 'showCameraViewOnMonitor' : 'showMyViewOnMonitor')});
+            }
         }
 
         // "Switch View From Controller" Checkbox
         HifiControlsUit.CheckBox {
             id: switchViewFromControllerCheckBox;
+            colorScheme: hifi.colorSchemes.dark;
             anchors.left: parent.left;
             anchors.top: monitorShowsSwitch.bottom;
-            anchors.topMargin: 20;
+            anchors.topMargin: 25;
             text: "Pressing Vive's Left Thumbpad Switches Monitor View";
-            boxSize: 30;
+            boxSize: 24;
             onClicked: {
                 sendToScript({method: 'changeSwitchViewFromControllerPreference', params: checked});
             }