mirror of
https://github.com/overte-org/overte.git
synced 2025-08-04 01:03:38 +02:00
Separator; Switch.qml updates; etc
This commit is contained in:
Zach Fox
parent
557d1c65a3
commit
afb7e72b25
3 changed files with 184 additions and 44 deletions
38
interface/resources/qml/controls-uit/Separator.qml
Normal file
38
interface/resources/qml/controls-uit/Separator.qml
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -19,42 +19,138 @@ Item {
|
|||
|
||||
property int colorScheme: hifi.colorSchemes.light;
|
||||
readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light;
|
||||
property int switchWidth: 100;
|
||||
readonly property int switchRadius: 3;
|
||||
property string offLabelText: "";
|
||||
property string onLabelText: "";
|
||||
property string switchLabelText: "";
|
||||
property int switchWidth: 70;
|
||||
readonly property int switchRadius: height/2;
|
||||
property string labelTextOff: "";
|
||||
property string labelGlyphOffText: "";
|
||||
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.leftMargin: 4;
|
||||
anchors.left: rootSwitch.left;
|
||||
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
|
||||
implicitWidth: rootSwitch.height - 5;
|
||||
id: switchHandle;
|
||||
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 {
|
||||
anchors.fill: parent;
|
||||
onClicked: {
|
||||
originalSwitch.checked = !originalSwitch.checked;
|
||||
// OFF Label
|
||||
Item {
|
||||
anchors.right: originalSwitch.left;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
// Size
|
||||
width: parent.width;
|
||||
height: 1;
|
||||
// Anchors
|
||||
HifiControlsUit.Separator {
|
||||
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 {
|
||||
// Size
|
||||
width: parent.width;
|
||||
height: 1;
|
||||
// Anchors
|
||||
HifiControlsUit.Separator {
|
||||
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:";
|
||||
//onClicked: {
|
||||
// sendToScript({method: (checked ? 'showCameraViewOnMonitor' : 'showMyViewOnMonitor')});
|
||||
//}
|
||||
labelTextOff: "HMD Preview";
|
||||
labelGlyphOffText: hifi.glyphs.hmd;
|
||||
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});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue