Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-08-09 05:17:02 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

simplifiedUI UIT switch

Browse source
This commit is contained in:
Zach Fox 2019-05-13 13:04:12 -07:00
parent feb5021372
commit f799f96fba
5 changed files with 80 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
interface/resources/qml/hifi/simplifiedUI/settingsApp/audio/Audio.qml
View file

@ -165,7 +165,7 @@ Flickable {
SimplifiedControls.Switch { SimplifiedControls.Switch {
id: muteMicrophoneSwitch id: muteMicrophoneSwitch
width: parent.width width: parent.width
height: simplifiedUI.sizes.controls.simplifiedSwitch.switchBackgroundHeight height: 18
labelTextOn: "Mute Microphone" labelTextOn: "Mute Microphone"
checked: AudioScriptingInterface.mutedDesktop checked: AudioScriptingInterface.mutedDesktop
onClicked: { onClicked: {
@ -176,7 +176,7 @@ Flickable {
SimplifiedControls.Switch { SimplifiedControls.Switch {
id: pushToTalkSwitch id: pushToTalkSwitch
width: parent.width width: parent.width
height: simplifiedUI.sizes.controls.simplifiedSwitch.switchBackgroundHeight height: 18
labelTextOn: "Push to Talk - Press and Hold \"T\" to Talk" labelTextOn: "Push to Talk - Press and Hold \"T\" to Talk"
checked: AudioScriptingInterface.pushToTalkDesktop checked: AudioScriptingInterface.pushToTalkDesktop
onClicked: { onClicked: {

4
interface/resources/qml/hifi/simplifiedUI/settingsApp/vr/VR.qml
View file

@ -178,7 +178,7 @@ Flickable {
SimplifiedControls.Switch { SimplifiedControls.Switch {
id: muteMicrophoneSwitch id: muteMicrophoneSwitch
width: parent.width width: parent.width
height: simplifiedUI.sizes.controls.simplifiedSwitch.switchBackgroundHeight height: 18
labelTextOn: "Mute Microphone" labelTextOn: "Mute Microphone"
checked: AudioScriptingInterface.mutedHMD checked: AudioScriptingInterface.mutedHMD
onClicked: { onClicked: {
@ -189,7 +189,7 @@ Flickable {
SimplifiedControls.Switch { SimplifiedControls.Switch {
id: pushToTalkSwitch id: pushToTalkSwitch
width: parent.width width: parent.width
height: simplifiedUI.sizes.controls.simplifiedSwitch.switchBackgroundHeight height: 18
labelTextOn: "Push to Talk - Press and Hold Grip Triggers to Talk" labelTextOn: "Push to Talk - Press and Hold Grip Triggers to Talk"
checked: AudioScriptingInterface.pushToTalkHMD checked: AudioScriptingInterface.pushToTalkHMD
onClicked: { onClicked: {

28
interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml
View file

@ -65,16 +65,20 @@ QtObject {
} }
readonly property QtObject simplifiedSwitch: QtObject { readonly property QtObject simplifiedSwitch: QtObject {
readonly property QtObject background: QtObject { readonly property QtObject background: QtObject {
readonly property color off: "#252525" readonly property color disabled: "#616161"
readonly property color hover: "#00b4ef" readonly property color off: "#616161"
readonly property color pressed: "#ffffff" readonly property color hover: "#616161"
readonly property color pressed: "#616161"
readonly property color on: "#ffffff" readonly property color on: "#ffffff"
} }
readonly property QtObject handle: QtObject { readonly property QtObject handle: QtObject {
readonly property color off: "#6A6A6A" readonly property color disabled: "#616161"
readonly property color hover: "#00b4ef" readonly property color off: "#E6E6E6"
readonly property color pressed: "#0093C5" readonly property color hover: "#48C7F4"
readonly property color on: "#0093C5" 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 QtObject text: QtObject {
readonly property color off: "#8F8F8F" readonly property color off: "#8F8F8F"
@ -144,9 +148,6 @@ QtObject {
readonly property QtObject radioButton: QtObject { readonly property QtObject radioButton: QtObject {
readonly property int labelLeftMargin: 6 readonly property int labelLeftMargin: 6
} }
readonly property QtObject simplifiedSwitch: QtObject {
readonly property int handleMargins: 2
}
} }
readonly property QtObject settings: QtObject { readonly property QtObject settings: QtObject {
@ -168,8 +169,11 @@ QtObject {
readonly property int innerBorderWidth: 1 readonly property int innerBorderWidth: 1
} }
readonly property QtObject simplifiedSwitch: QtObject { readonly property QtObject simplifiedSwitch: QtObject {
readonly property int switchBackgroundHeight: 18 readonly property int switchBackgroundHeight: 8
readonly property int switchBackgroundWidth: 47 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 labelTextSize: 14
readonly property int labelGlyphSize: 32 readonly property int labelGlyphSize: 32
} }

2
interface/resources/qml/hifi/simplifiedUI/simplifiedControls/Slider.qml
View file

@ -51,6 +51,7 @@ Item {
id: sliderControl id: sliderControl
height: simplifiedUI.sizes.controls.slider.height height: simplifiedUI.sizes.controls.slider.height
width: root.width * 0.6 width: root.width * 0.6
enabled: root.enabled
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -86,6 +87,7 @@ Item {
} }
handle: Rectangle { handle: Rectangle {
visible: root.enabled
width: sliderControl.height width: sliderControl.height
height: sliderControl.height height: sliderControl.height
x: sliderControl.visualPosition * (sliderControl.width - width) x: sliderControl.visualPosition * (sliderControl.width - width)

86
interface/resources/qml/hifi/simplifiedUI/simplifiedControls/Switch.qml
View file

@ -34,51 +34,57 @@ Item {
property string backgroundOnColor: "#252525" property string backgroundOnColor: "#252525"
signal clicked 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: { onClicked: {
Tablet.playSound(TabletEnums.ButtonClick); Tablet.playSound(TabletEnums.ButtonClick);
} }
Original.Switch { Original.Switch {
id: originalSwitch id: originalSwitch
enabled: root.enabled
focusPolicy: Qt.ClickFocus focusPolicy: Qt.ClickFocus
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: labelOff.text === "" ? undefined : parent.horizontalCenter anchors.horizontalCenter: labelOff.text === "" ? undefined : parent.horizontalCenter
anchors.left: labelOff.text === "" ? parent.left : undefined anchors.left: labelOff.text === "" ? parent.left : undefined
anchors.leftMargin: (outerSwitchHandle.width - innerSwitchHandle.width) / 2
width: simplifiedUI.sizes.controls.simplifiedSwitch.switchBackgroundWidth width: simplifiedUI.sizes.controls.simplifiedSwitch.switchBackgroundWidth
hoverEnabled: true 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: { onCheckedChanged: {
root.checkedChanged(); root.checkedChanged();
Tablet.playSound(TabletEnums.ButtonClick); Tablet.playSound(TabletEnums.ButtonClick);
root.changeColor(); originalSwitch.changeColor();
} }
onClicked: { onClicked: {
root.clicked(); root.clicked();
root.changeColor(); originalSwitch.changeColor();
} }
onHoveredChanged: { onHoveredChanged: {
if (hovered) { if (hovered) {
Tablet.playSound(TabletEnums.ButtonHover); Tablet.playSound(TabletEnums.ButtonHover);
} }
root.changeColor(); originalSwitch.changeColor();
} }
background: Rectangle { background: Rectangle {
@ -86,23 +92,47 @@ Item {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: originalSwitch.checked ? simplifiedUI.colors.controls.simplifiedSwitch.background.on : simplifiedUI.colors.controls.simplifiedSwitch.background.off color: originalSwitch.checked ? simplifiedUI.colors.controls.simplifiedSwitch.background.on : simplifiedUI.colors.controls.simplifiedSwitch.background.off
width: originalSwitch.width width: originalSwitch.width
height: root.height height: simplifiedUI.sizes.controls.simplifiedSwitch.switchBackgroundHeight
radius: height/2 radius: height/2
} }
indicator: Rectangle { indicator: Item {
id: switchHandle
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
width: switchBackground.height - (2 * simplifiedUI.margins.controls.simplifiedSwitch.handleMargins) width: simplifiedUI.sizes.controls.simplifiedSwitch.switchHandleOuterWidth
height: switchHandle.width height: width
radius: switchHandle.width/2 x: originalSwitch.visualPosition * switchBackground.width - (innerSwitchHandle.width * (originalSwitch.checked ? 1 : 0)) - ((outerSwitchHandle.width - innerSwitchHandle.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
Behavior on x { Behavior on x {
enabled: !originalSwitch.down enabled: !originalSwitch.down
SmoothedAnimation { velocity: 200 } 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();
}
}
} }
} }