From f799f96fba4821709c49ed55c2e8d9d17d9b84ee Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Mon, 13 May 2019 13:04:12 -0700 Subject: [PATCH] simplifiedUI UIT switch --- .../simplifiedUI/settingsApp/audio/Audio.qml | 4 +- .../hifi/simplifiedUI/settingsApp/vr/VR.qml | 4 +- .../SimplifiedConstants.qml | 28 +++--- .../simplifiedControls/Slider.qml | 2 + .../simplifiedControls/Switch.qml | 86 +++++++++++++------ 5 files changed, 80 insertions(+), 44 deletions(-) diff --git a/interface/resources/qml/hifi/simplifiedUI/settingsApp/audio/Audio.qml b/interface/resources/qml/hifi/simplifiedUI/settingsApp/audio/Audio.qml index a5c884c6ac..2cbe0d0bc8 100644 --- a/interface/resources/qml/hifi/simplifiedUI/settingsApp/audio/Audio.qml +++ b/interface/resources/qml/hifi/simplifiedUI/settingsApp/audio/Audio.qml @@ -165,7 +165,7 @@ Flickable { SimplifiedControls.Switch { id: muteMicrophoneSwitch width: parent.width - height: simplifiedUI.sizes.controls.simplifiedSwitch.switchBackgroundHeight + height: 18 labelTextOn: "Mute Microphone" checked: AudioScriptingInterface.mutedDesktop onClicked: { @@ -176,7 +176,7 @@ Flickable { SimplifiedControls.Switch { id: pushToTalkSwitch width: parent.width - height: simplifiedUI.sizes.controls.simplifiedSwitch.switchBackgroundHeight + height: 18 labelTextOn: "Push to Talk - Press and Hold \"T\" to Talk" checked: AudioScriptingInterface.pushToTalkDesktop onClicked: { diff --git a/interface/resources/qml/hifi/simplifiedUI/settingsApp/vr/VR.qml b/interface/resources/qml/hifi/simplifiedUI/settingsApp/vr/VR.qml index 96323f7cae..dc224f7daa 100644 --- a/interface/resources/qml/hifi/simplifiedUI/settingsApp/vr/VR.qml +++ b/interface/resources/qml/hifi/simplifiedUI/settingsApp/vr/VR.qml @@ -178,7 +178,7 @@ Flickable { SimplifiedControls.Switch { id: muteMicrophoneSwitch width: parent.width - height: simplifiedUI.sizes.controls.simplifiedSwitch.switchBackgroundHeight + height: 18 labelTextOn: "Mute Microphone" checked: AudioScriptingInterface.mutedHMD onClicked: { @@ -189,7 +189,7 @@ Flickable { SimplifiedControls.Switch { id: pushToTalkSwitch width: parent.width - height: simplifiedUI.sizes.controls.simplifiedSwitch.switchBackgroundHeight + height: 18 labelTextOn: "Push to Talk - Press and Hold Grip Triggers to Talk" checked: AudioScriptingInterface.pushToTalkHMD onClicked: { diff --git a/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml b/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml index 8157407f0f..a2f1c9f189 100644 --- a/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml +++ b/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml @@ -65,16 +65,20 @@ QtObject { } readonly property QtObject simplifiedSwitch: QtObject { readonly property QtObject background: QtObject { - readonly property color off: "#252525" - readonly property color hover: "#00b4ef" - readonly property color pressed: "#ffffff" + readonly property color disabled: "#616161" + readonly property color off: "#616161" + readonly property color hover: "#616161" + readonly property color pressed: "#616161" readonly property color on: "#ffffff" } readonly property QtObject handle: QtObject { - readonly property color off: "#6A6A6A" - readonly property color hover: "#00b4ef" - readonly property color pressed: "#0093C5" - readonly property color on: "#0093C5" + readonly property color disabled: "#616161" + readonly property color off: "#E6E6E6" + readonly property color hover: "#48C7F4" + readonly property color active: "#48C7F4" + readonly property color activeBorder: "#00B4EF" + readonly property color on: "#00B4EF" + readonly property color checkedBorder: "#36CDFF" } readonly property QtObject text: QtObject { readonly property color off: "#8F8F8F" @@ -144,9 +148,6 @@ QtObject { readonly property QtObject radioButton: QtObject { readonly property int labelLeftMargin: 6 } - readonly property QtObject simplifiedSwitch: QtObject { - readonly property int handleMargins: 2 - } } readonly property QtObject settings: QtObject { @@ -168,8 +169,11 @@ QtObject { readonly property int innerBorderWidth: 1 } readonly property QtObject simplifiedSwitch: QtObject { - readonly property int switchBackgroundHeight: 18 - readonly property int switchBackgroundWidth: 47 + readonly property int switchBackgroundHeight: 8 + readonly property int switchBackgroundWidth: 30 + readonly property int switchHandleInnerWidth: 12 + readonly property int switchHandleOuterWidth: 16 + readonly property int switchHandleBorderSize: 1 readonly property int labelTextSize: 14 readonly property int labelGlyphSize: 32 } diff --git a/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/Slider.qml b/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/Slider.qml index 20e150340e..8799136553 100644 --- a/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/Slider.qml +++ b/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/Slider.qml @@ -51,6 +51,7 @@ Item { id: sliderControl height: simplifiedUI.sizes.controls.slider.height width: root.width * 0.6 + enabled: root.enabled anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter @@ -86,6 +87,7 @@ Item { } handle: Rectangle { + visible: root.enabled width: sliderControl.height height: sliderControl.height x: sliderControl.visualPosition * (sliderControl.width - width) diff --git a/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/Switch.qml b/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/Switch.qml index 9002218230..e734cd65fe 100644 --- a/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/Switch.qml +++ b/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/Switch.qml @@ -34,51 +34,57 @@ Item { property string backgroundOnColor: "#252525" signal clicked - function changeColor() { - if (originalSwitch.checked) { - if (originalSwitch.hovered) { - switchHandle.color = simplifiedUI.colors.controls.simplifiedSwitch.handle.hover; - } else { - switchHandle.color = simplifiedUI.colors.controls.simplifiedSwitch.handle.on; - } - } else { - if (originalSwitch.hovered) { - switchHandle.color = simplifiedUI.colors.controls.simplifiedSwitch.handle.hover; - } else { - switchHandle.color = simplifiedUI.colors.controls.simplifiedSwitch.handle.off; - } - } - } - onClicked: { Tablet.playSound(TabletEnums.ButtonClick); } Original.Switch { id: originalSwitch + enabled: root.enabled focusPolicy: Qt.ClickFocus anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: labelOff.text === "" ? undefined : parent.horizontalCenter anchors.left: labelOff.text === "" ? parent.left : undefined + anchors.leftMargin: (outerSwitchHandle.width - innerSwitchHandle.width) / 2 width: simplifiedUI.sizes.controls.simplifiedSwitch.switchBackgroundWidth hoverEnabled: true + function changeColor() { + if (!originalSwitch.enabled) { + innerSwitchHandle.color = simplifiedUI.colors.controls.simplifiedSwitch.handle.disabled; + return; + } + if (originalSwitch.checked) { + if (originalSwitch.hovered) { + innerSwitchHandle.color = simplifiedUI.colors.controls.simplifiedSwitch.handle.hover; + } else { + innerSwitchHandle.color = simplifiedUI.colors.controls.simplifiedSwitch.handle.on; + } + } else { + if (originalSwitch.hovered) { + innerSwitchHandle.color = simplifiedUI.colors.controls.simplifiedSwitch.handle.hover; + } else { + innerSwitchHandle.color = simplifiedUI.colors.controls.simplifiedSwitch.handle.off; + } + } + } + onCheckedChanged: { root.checkedChanged(); Tablet.playSound(TabletEnums.ButtonClick); - root.changeColor(); + originalSwitch.changeColor(); } onClicked: { root.clicked(); - root.changeColor(); + originalSwitch.changeColor(); } onHoveredChanged: { if (hovered) { Tablet.playSound(TabletEnums.ButtonHover); } - root.changeColor(); + originalSwitch.changeColor(); } background: Rectangle { @@ -86,23 +92,47 @@ Item { anchors.verticalCenter: parent.verticalCenter color: originalSwitch.checked ? simplifiedUI.colors.controls.simplifiedSwitch.background.on : simplifiedUI.colors.controls.simplifiedSwitch.background.off width: originalSwitch.width - height: root.height + height: simplifiedUI.sizes.controls.simplifiedSwitch.switchBackgroundHeight radius: height/2 } - indicator: Rectangle { - id: switchHandle + indicator: Item { anchors.verticalCenter: parent.verticalCenter - width: switchBackground.height - (2 * simplifiedUI.margins.controls.simplifiedSwitch.handleMargins) - height: switchHandle.width - radius: switchHandle.width/2 - color: originalSwitch.checked ? simplifiedUI.colors.controls.simplifiedSwitch.handle.on : simplifiedUI.colors.controls.simplifiedSwitch.handle.off - x: originalSwitch.visualPosition * switchBackground.width - (switchHandle.width / 2) + (originalSwitch.checked ? -5 * simplifiedUI.margins.controls.simplifiedSwitch.handleMargins : 5 * simplifiedUI.margins.controls.simplifiedSwitch.handleMargins) - y: simplifiedUI.margins.controls.simplifiedSwitch.handleMargins + width: simplifiedUI.sizes.controls.simplifiedSwitch.switchHandleOuterWidth + height: width + x: originalSwitch.visualPosition * switchBackground.width - (innerSwitchHandle.width * (originalSwitch.checked ? 1 : 0)) - ((outerSwitchHandle.width - innerSwitchHandle.width) / 2) + Behavior on x { enabled: !originalSwitch.down SmoothedAnimation { velocity: 200 } } + + Rectangle { + id: outerSwitchHandle + visible: originalSwitch.hovered + anchors.centerIn: parent + width: simplifiedUI.sizes.controls.simplifiedSwitch.switchHandleOuterWidth + height: width + radius: width/2 + color: "transparent" + border.width: simplifiedUI.sizes.controls.simplifiedSwitch.switchHandleBorderSize + border.color: simplifiedUI.colors.controls.simplifiedSwitch.handle.activeBorder + } + + Rectangle { + id: innerSwitchHandle + anchors.centerIn: parent + width: simplifiedUI.sizes.controls.simplifiedSwitch.switchHandleInnerWidth + height: width + radius: width/2 + color: simplifiedUI.colors.controls.simplifiedSwitch.handle.off + border.width: originalSwitch.pressed || originalSwitch.checked ? simplifiedUI.sizes.controls.simplifiedSwitch.switchHandleBorderSize : 0 + border.color: originalSwitch.pressed ? simplifiedUI.colors.controls.simplifiedSwitch.handle.activeBorder : simplifiedUI.colors.controls.simplifiedSwitch.handle.checkedBorder + + Component.onCompleted: { + originalSwitch.changeColor(); + } + } } }