mirror of
https://github.com/AleziaKurdis/overte.git
synced 2025-04-08 07:32:10 +02:00
DEV-142 & DEV-140: Scrollbars in Your Profile and Settings
This commit is contained in:
parent
723b4ac30f
commit
1d2ed1985f
9 changed files with 200 additions and 55 deletions
|
@ -58,6 +58,7 @@ Windows.Window {
|
|||
}
|
||||
QmlSurface.load(source, contentHolder, function(newObject) {
|
||||
dynamicContent = newObject;
|
||||
updateInteractiveWindowSizeForMode();
|
||||
if (dynamicContent && dynamicContent.anchors) {
|
||||
dynamicContent.anchors.fill = contentHolder;
|
||||
}
|
||||
|
@ -81,10 +82,12 @@ Windows.Window {
|
|||
}
|
||||
|
||||
function updateInteractiveWindowSizeForMode() {
|
||||
if (presentationMode === Desktop.PresentationMode.VIRTUAL) {
|
||||
width = interactiveWindowSize.width;
|
||||
height = interactiveWindowSize.height;
|
||||
} else if (presentationMode === Desktop.PresentationMode.NATIVE && nativeWindow) {
|
||||
root.width = interactiveWindowSize.width;
|
||||
root.height = interactiveWindowSize.height;
|
||||
contentHolder.width = interactiveWindowSize.width;
|
||||
contentHolder.height = interactiveWindowSize.height;
|
||||
|
||||
if (presentationMode === Desktop.PresentationMode.NATIVE && nativeWindow) {
|
||||
nativeWindow.width = interactiveWindowSize.width;
|
||||
nativeWindow.height = interactiveWindowSize.height;
|
||||
}
|
||||
|
@ -134,6 +137,9 @@ Windows.Window {
|
|||
|
||||
Window {
|
||||
id: root;
|
||||
width: interactiveWindowSize.width
|
||||
height: interactiveWindowSize.height
|
||||
|
||||
Rectangle {
|
||||
color: hifi.colors.baseGray
|
||||
anchors.fill: parent
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
import QtQuick 2.10
|
||||
import "../simplifiedConstants" as SimplifiedConstants
|
||||
import "../simplifiedControls" as SimplifiedControls
|
||||
import "./components" as AvatarAppComponents
|
||||
import stylesUit 1.0 as HifiStylesUit
|
||||
import TabletScriptingInterface 1.0
|
||||
|
@ -245,6 +246,10 @@ Rectangle {
|
|||
verticalAlignment: Text.AlignVCenter
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
|
||||
SimplifiedControls.VerticalScrollBar {
|
||||
parent: inventoryContentsList
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -9,7 +9,9 @@
|
|||
//
|
||||
|
||||
import QtQuick 2.10
|
||||
import QtQuick.Controls 2.3
|
||||
import "../simplifiedConstants" as SimplifiedConstants
|
||||
import "../simplifiedControls" as SimplifiedControls
|
||||
import stylesUit 1.0 as HifiStylesUit
|
||||
import "./audio" as AudioSettings
|
||||
import "./general" as GeneralSettings
|
||||
|
@ -129,9 +131,7 @@ Rectangle {
|
|||
id: tabViewContainers
|
||||
anchors.top: tabContainer.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 26
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 26
|
||||
anchors.bottom: parent.bottom
|
||||
|
||||
|
||||
|
@ -162,24 +162,20 @@ Rectangle {
|
|||
visible: activeTabView === "devTabView"
|
||||
anchors.fill: parent
|
||||
}
|
||||
}
|
||||
|
||||
Image {
|
||||
source: {
|
||||
if (root.activeTabView === "generalTabView") {
|
||||
"images/accent1.svg"
|
||||
} else if (root.activeTabView === "audioTabView") {
|
||||
"images/accent2.svg"
|
||||
} else if (root.activeTabView === "vrTabView") {
|
||||
"images/accent3.svg"
|
||||
} else {
|
||||
"images/accent3.svg"
|
||||
SimplifiedControls.VerticalScrollBar {
|
||||
parent: {
|
||||
if (activeTabView === "generalTabView") {
|
||||
generalTabViewContainer
|
||||
} else if (activeTabView === "audioTabView") {
|
||||
audioTabViewContainer
|
||||
} else if (activeTabView === "vrTabView") {
|
||||
vrTabViewContainer
|
||||
} else if (activeTabView === "devTabView") {
|
||||
devTabViewContainer
|
||||
}
|
||||
}
|
||||
}
|
||||
anchors.right: parent.right
|
||||
anchors.top: tabContainer.bottom
|
||||
width: 106
|
||||
height: 200
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -19,8 +19,6 @@ Flickable {
|
|||
id: root
|
||||
contentWidth: parent.width
|
||||
contentHeight: audioColumnLayout.height
|
||||
topMargin: 24
|
||||
bottomMargin: 24
|
||||
clip: true
|
||||
|
||||
function changePeakValuesEnabled(enabled) {
|
||||
|
@ -33,7 +31,7 @@ Flickable {
|
|||
AudioScriptingInterface.devices.input.peakValuesEnabled = visible;
|
||||
if (visible) {
|
||||
root.contentX = 0;
|
||||
root.contentY = -root.topMargin;
|
||||
root.contentY = 0;
|
||||
AudioScriptingInterface.devices.input.peakValuesEnabledChanged.connect(changePeakValuesEnabled);
|
||||
} else {
|
||||
AudioScriptingInterface.devices.input.peakValuesEnabledChanged.disconnect(changePeakValuesEnabled);
|
||||
|
@ -45,16 +43,35 @@ Flickable {
|
|||
id: simplifiedUI
|
||||
}
|
||||
|
||||
|
||||
Image {
|
||||
id: accent
|
||||
source: "../images/accent2.svg"
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
width: 83
|
||||
height: 156
|
||||
transform: Scale {
|
||||
xScale: -1
|
||||
origin.x: accent.width / 2
|
||||
origin.y: accent.height / 2
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ColumnLayout {
|
||||
id: audioColumnLayout
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 26
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 26
|
||||
anchors.top: parent.top
|
||||
spacing: simplifiedUI.margins.settings.spacingBetweenSettings
|
||||
|
||||
ColumnLayout {
|
||||
id: volumeControlsContainer
|
||||
Layout.preferredWidth: parent.width
|
||||
Layout.topMargin: 24
|
||||
spacing: 0
|
||||
|
||||
HifiStylesUit.GraphikSemiBold {
|
||||
|
@ -289,6 +306,7 @@ Flickable {
|
|||
ColumnLayout {
|
||||
id: outputDeviceContainer
|
||||
Layout.preferredWidth: parent.width
|
||||
Layout.bottomMargin: 24
|
||||
spacing: 0
|
||||
|
||||
HifiStylesUit.GraphikSemiBold {
|
||||
|
|
|
@ -19,14 +19,12 @@ Flickable {
|
|||
id: root
|
||||
contentWidth: parent.width
|
||||
contentHeight: devColumnLayout.height
|
||||
topMargin: 24
|
||||
bottomMargin: 24
|
||||
clip: true
|
||||
|
||||
onVisibleChanged: {
|
||||
if (visible) {
|
||||
root.contentX = 0;
|
||||
root.contentY = -root.topMargin;
|
||||
root.contentY = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -35,16 +33,36 @@ Flickable {
|
|||
id: simplifiedUI
|
||||
}
|
||||
|
||||
|
||||
Image {
|
||||
id: accent
|
||||
source: "../images/accent3.svg"
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
width: 83
|
||||
height: 156
|
||||
transform: Scale {
|
||||
xScale: -1
|
||||
origin.x: accent.width / 2
|
||||
origin.y: accent.height / 2
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ColumnLayout {
|
||||
id: devColumnLayout
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 26
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 26
|
||||
anchors.top: parent.top
|
||||
spacing: simplifiedUI.margins.settings.spacingBetweenSettings
|
||||
|
||||
ColumnLayout {
|
||||
id: uiControlsContainer
|
||||
Layout.preferredWidth: parent.width
|
||||
Layout.topMargin: 24
|
||||
Layout.bottomMargin: 24
|
||||
spacing: 0
|
||||
|
||||
HifiStylesUit.GraphikSemiBold {
|
||||
|
|
|
@ -9,6 +9,7 @@
|
|||
//
|
||||
|
||||
import QtQuick 2.10
|
||||
import QtQuick.Controls 2.3
|
||||
import "../../simplifiedConstants" as SimplifiedConstants
|
||||
import "../../simplifiedControls" as SimplifiedControls
|
||||
import stylesUit 1.0 as HifiStylesUit
|
||||
|
@ -20,8 +21,6 @@ Flickable {
|
|||
id: root
|
||||
contentWidth: parent.width
|
||||
contentHeight: generalColumnLayout.height
|
||||
topMargin: 24
|
||||
bottomMargin: 24
|
||||
clip: true
|
||||
|
||||
onAvatarNametagModeChanged: {
|
||||
|
@ -31,7 +30,7 @@ Flickable {
|
|||
onVisibleChanged: {
|
||||
if (visible) {
|
||||
root.contentX = 0;
|
||||
root.contentY = -root.topMargin;
|
||||
root.contentY = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -39,16 +38,35 @@ Flickable {
|
|||
id: simplifiedUI
|
||||
}
|
||||
|
||||
|
||||
Image {
|
||||
id: accent
|
||||
source: "../images/accent1.svg"
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
width: 83
|
||||
height: 156
|
||||
transform: Scale {
|
||||
xScale: -1
|
||||
origin.x: accent.width / 2
|
||||
origin.y: accent.height / 2
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ColumnLayout {
|
||||
id: generalColumnLayout
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 26
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 26
|
||||
anchors.top: parent.top
|
||||
spacing: simplifiedUI.margins.settings.spacingBetweenSettings
|
||||
|
||||
ColumnLayout {
|
||||
id: avatarNameTagsContainer
|
||||
Layout.preferredWidth: parent.width
|
||||
Layout.topMargin: 24
|
||||
spacing: 0
|
||||
|
||||
HifiStylesUit.GraphikSemiBold {
|
||||
|
@ -193,29 +211,36 @@ Flickable {
|
|||
}
|
||||
}
|
||||
|
||||
HifiStylesUit.GraphikRegular {
|
||||
id: logoutText
|
||||
text: (AccountServices.username === "Unknown user" ? "Log In" : "Logout " + AccountServices.username)
|
||||
wrapMode: Text.Wrap
|
||||
width: paintedWidth
|
||||
height: paintedHeight
|
||||
size: 14
|
||||
color: simplifiedUI.colors.text.lightBlue
|
||||
ColumnLayout {
|
||||
id: logoutContainer
|
||||
Layout.preferredWidth: parent.width
|
||||
Layout.bottomMargin: 24
|
||||
spacing: 0
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onEntered: {
|
||||
parent.color = simplifiedUI.colors.text.lightBlueHover;
|
||||
}
|
||||
onExited: {
|
||||
parent.color = simplifiedUI.colors.text.lightBlue;
|
||||
}
|
||||
onClicked: {
|
||||
if (Account.loggedIn) {
|
||||
AccountServices.logOut();
|
||||
} else {
|
||||
DialogsManager.showLoginDialog();
|
||||
HifiStylesUit.GraphikRegular {
|
||||
id: logoutText
|
||||
text: (AccountServices.username === "Unknown user" ? "Log In" : "Logout " + AccountServices.username)
|
||||
wrapMode: Text.Wrap
|
||||
width: paintedWidth
|
||||
height: paintedHeight
|
||||
size: 14
|
||||
color: simplifiedUI.colors.text.lightBlue
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onEntered: {
|
||||
parent.color = simplifiedUI.colors.text.lightBlueHover;
|
||||
}
|
||||
onExited: {
|
||||
parent.color = simplifiedUI.colors.text.lightBlue;
|
||||
}
|
||||
onClicked: {
|
||||
if (Account.loggedIn) {
|
||||
AccountServices.logOut();
|
||||
} else {
|
||||
DialogsManager.showLoginDialog();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -19,8 +19,6 @@ Flickable {
|
|||
id: root
|
||||
contentWidth: parent.width
|
||||
contentHeight: vrColumnLayout.height
|
||||
topMargin: 24
|
||||
bottomMargin: 24
|
||||
clip: true
|
||||
|
||||
function changePeakValuesEnabled(enabled) {
|
||||
|
@ -33,7 +31,7 @@ Flickable {
|
|||
AudioScriptingInterface.devices.input.peakValuesEnabled = visible;
|
||||
if (visible) {
|
||||
root.contentX = 0;
|
||||
root.contentY = -root.topMargin;
|
||||
root.contentY = 0;
|
||||
AudioScriptingInterface.devices.input.peakValuesEnabledChanged.connect(changePeakValuesEnabled);
|
||||
} else {
|
||||
AudioScriptingInterface.devices.input.peakValuesEnabledChanged.disconnect(changePeakValuesEnabled);
|
||||
|
@ -45,16 +43,35 @@ Flickable {
|
|||
id: simplifiedUI
|
||||
}
|
||||
|
||||
|
||||
Image {
|
||||
id: accent
|
||||
source: "../images/accent3.svg"
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
width: 83
|
||||
height: 156
|
||||
transform: Scale {
|
||||
xScale: -1
|
||||
origin.x: accent.width / 2
|
||||
origin.y: accent.height / 2
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ColumnLayout {
|
||||
id: vrColumnLayout
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 26
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 26
|
||||
anchors.top: parent.top
|
||||
spacing: simplifiedUI.margins.settings.spacingBetweenSettings
|
||||
|
||||
ColumnLayout {
|
||||
id: controlsContainer
|
||||
Layout.preferredWidth: parent.width
|
||||
Layout.topMargin: 24
|
||||
spacing: 0
|
||||
|
||||
HifiStylesUit.GraphikSemiBold {
|
||||
|
@ -278,6 +295,7 @@ Flickable {
|
|||
ColumnLayout {
|
||||
id: outputDeviceContainer
|
||||
Layout.preferredWidth: parent.width
|
||||
Layout.bottomMargin: 24
|
||||
spacing: 0
|
||||
|
||||
HifiStylesUit.GraphikSemiBold {
|
||||
|
|
|
@ -144,6 +144,10 @@ QtObject {
|
|||
readonly property color hover: "#FFFFFF"
|
||||
readonly property color focus: "#FFFFFF"
|
||||
}
|
||||
readonly property QtObject scrollBar: QtObject {
|
||||
readonly property color background: "#474747"
|
||||
readonly property color contentItem: "#0198CB"
|
||||
}
|
||||
}
|
||||
|
||||
readonly property color darkSeparator: "#595959"
|
||||
|
@ -219,6 +223,10 @@ QtObject {
|
|||
readonly property QtObject textField: QtObject {
|
||||
readonly property int editPencilPadding: 6
|
||||
}
|
||||
readonly property QtObject scrollBar: QtObject {
|
||||
readonly property int backgroundWidth: 9
|
||||
readonly property int contentItemWidth: 7
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,51 @@
|
|||
//
|
||||
// VerticalScrollBar.qml
|
||||
//
|
||||
// Created by Zach Fox on 2019-06-17
|
||||
// Copyright 2019 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.10
|
||||
import QtQuick.Controls 2.3
|
||||
import "../simplifiedConstants" as SimplifiedConstants
|
||||
|
||||
ScrollBar {
|
||||
SimplifiedConstants.SimplifiedConstants {
|
||||
id: simplifiedUI
|
||||
}
|
||||
|
||||
orientation: Qt.Vertical
|
||||
policy: ScrollBar.AlwaysOn
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 4
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 4
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 4
|
||||
width: simplifiedUI.sizes.controls.scrollBar.backgroundWidth
|
||||
visible: parent.contentHeight > parent.parent.height
|
||||
position: parent.contentY / parent.contentHeight
|
||||
size: parent.parent.height / parent.contentHeight
|
||||
minimumSize: 0.1
|
||||
background: Rectangle {
|
||||
color: simplifiedUI.colors.controls.scrollBar.background
|
||||
anchors.fill: parent
|
||||
}
|
||||
contentItem: Rectangle {
|
||||
width: simplifiedUI.sizes.controls.scrollBar.contentItemWidth
|
||||
color: simplifiedUI.colors.controls.scrollBar.contentItem
|
||||
anchors {
|
||||
horizontalCenter: parent.horizontalCenter
|
||||
topMargin: 1
|
||||
bottomMargin: 1
|
||||
}
|
||||
}
|
||||
onPositionChanged: {
|
||||
if (pressed) {
|
||||
parent.contentY = position * parent.contentHeight;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue