Mirrors/overte-JulianGro
3
0
Fork 0
mirror of https://github.com/JulianGro/overte.git synced 2025-04-15 08:57:19 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

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 {
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: {

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

@ -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: {

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

@ -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
}

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

@ -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)

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

@ -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();
}
}
}
}