From 1d2ed1985f098dd5d8953ef1b6a82edcaba720a3 Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Mon, 17 Jun 2019 12:35:45 -0700 Subject: [PATCH] DEV-142 & DEV-140: Scrollbars in Your Profile and Settings --- interface/resources/qml/InteractiveWindow.qml | 14 +++- .../hifi/simplifiedUI/avatarApp/AvatarApp.qml | 5 ++ .../simplifiedUI/settingsApp/SettingsApp.qml | 30 ++++---- .../simplifiedUI/settingsApp/audio/Audio.qml | 24 +++++- .../hifi/simplifiedUI/settingsApp/dev/Dev.qml | 24 +++++- .../settingsApp/general/General.qml | 75 ++++++++++++------- .../hifi/simplifiedUI/settingsApp/vr/VR.qml | 24 +++++- .../SimplifiedConstants.qml | 8 ++ .../simplifiedControls/VerticalScrollBar.qml | 51 +++++++++++++ 9 files changed, 200 insertions(+), 55 deletions(-) create mode 100644 interface/resources/qml/hifi/simplifiedUI/simplifiedControls/VerticalScrollBar.qml diff --git a/interface/resources/qml/InteractiveWindow.qml b/interface/resources/qml/InteractiveWindow.qml index da1e9ec2bf..df3475ea7b 100644 --- a/interface/resources/qml/InteractiveWindow.qml +++ b/interface/resources/qml/InteractiveWindow.qml @@ -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 diff --git a/interface/resources/qml/hifi/simplifiedUI/avatarApp/AvatarApp.qml b/interface/resources/qml/hifi/simplifiedUI/avatarApp/AvatarApp.qml index ef9a3cbe24..d52dd3f3d7 100644 --- a/interface/resources/qml/hifi/simplifiedUI/avatarApp/AvatarApp.qml +++ b/interface/resources/qml/hifi/simplifiedUI/avatarApp/AvatarApp.qml @@ -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 + } } diff --git a/interface/resources/qml/hifi/simplifiedUI/settingsApp/SettingsApp.qml b/interface/resources/qml/hifi/simplifiedUI/settingsApp/SettingsApp.qml index 60703a8062..adb8344902 100644 --- a/interface/resources/qml/hifi/simplifiedUI/settingsApp/SettingsApp.qml +++ b/interface/resources/qml/hifi/simplifiedUI/settingsApp/SettingsApp.qml @@ -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 } diff --git a/interface/resources/qml/hifi/simplifiedUI/settingsApp/audio/Audio.qml b/interface/resources/qml/hifi/simplifiedUI/settingsApp/audio/Audio.qml index 4dc5e973fc..68a8fa49da 100644 --- a/interface/resources/qml/hifi/simplifiedUI/settingsApp/audio/Audio.qml +++ b/interface/resources/qml/hifi/simplifiedUI/settingsApp/audio/Audio.qml @@ -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 { diff --git a/interface/resources/qml/hifi/simplifiedUI/settingsApp/dev/Dev.qml b/interface/resources/qml/hifi/simplifiedUI/settingsApp/dev/Dev.qml index a8c0a8f158..fe623e5d78 100644 --- a/interface/resources/qml/hifi/simplifiedUI/settingsApp/dev/Dev.qml +++ b/interface/resources/qml/hifi/simplifiedUI/settingsApp/dev/Dev.qml @@ -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 { diff --git a/interface/resources/qml/hifi/simplifiedUI/settingsApp/general/General.qml b/interface/resources/qml/hifi/simplifiedUI/settingsApp/general/General.qml index f56d0f33bd..af7e9ba4ae 100644 --- a/interface/resources/qml/hifi/simplifiedUI/settingsApp/general/General.qml +++ b/interface/resources/qml/hifi/simplifiedUI/settingsApp/general/General.qml @@ -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(); + } } } } diff --git a/interface/resources/qml/hifi/simplifiedUI/settingsApp/vr/VR.qml b/interface/resources/qml/hifi/simplifiedUI/settingsApp/vr/VR.qml index 9f5ed3ff8f..c1dc3888e2 100644 --- a/interface/resources/qml/hifi/simplifiedUI/settingsApp/vr/VR.qml +++ b/interface/resources/qml/hifi/simplifiedUI/settingsApp/vr/VR.qml @@ -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 { diff --git a/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml b/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml index 5aa94d798e..fb09a7ae1d 100644 --- a/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml +++ b/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml @@ -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 + } } } diff --git a/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/VerticalScrollBar.qml b/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/VerticalScrollBar.qml new file mode 100644 index 0000000000..ab3c0a3f72 --- /dev/null +++ b/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/VerticalScrollBar.qml @@ -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; + } + } +} \ No newline at end of file