DEV-142 & DEV-140: Scrollbars in Your Profile and Settings

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) {
+        root.width = interactiveWindowSize.width;
-            width = interactiveWindowSize.width;
+        root.height = interactiveWindowSize.height;
-            height = interactiveWindowSize.height;
+        contentHolder.width = interactiveWindowSize.width;
-        } else if (presentationMode === Desktop.PresentationMode.NATIVE && nativeWindow) {
+        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

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

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 {
+        SimplifiedControls.VerticalScrollBar {
-        source: {
+            parent: {
-            if (root.activeTabView === "generalTabView") {
+                if (activeTabView === "generalTabView") {
-                "images/accent1.svg"
+                    generalTabViewContainer
-            } else if (root.activeTabView === "audioTabView") {
+                } else if (activeTabView === "audioTabView") {
-                "images/accent2.svg"
+                    audioTabViewContainer
-            } else if (root.activeTabView === "vrTabView") {
+                } else if (activeTabView === "vrTabView") {
-                "images/accent3.svg"
+                    vrTabViewContainer
-            } else {
+                } else if (activeTabView === "devTabView") {
-                "images/accent3.svg"
+                    devTabViewContainer
+                }
             }
         }
-        anchors.right: parent.right
-        anchors.top: tabContainer.bottom
-        width: 106
-        height: 200
     }
 
 

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 {

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 {

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 {
+        ColumnLayout {
-            id: logoutText
+            id: logoutContainer
-            text: (AccountServices.username === "Unknown user" ? "Log In" : "Logout " + AccountServices.username)
+            Layout.preferredWidth: parent.width
-            wrapMode: Text.Wrap
+            Layout.bottomMargin: 24
-            width: paintedWidth
+            spacing: 0
-            height: paintedHeight
-            size: 14
-            color: simplifiedUI.colors.text.lightBlue
 
-            MouseArea {
+            HifiStylesUit.GraphikRegular {
-                anchors.fill: parent
+                id: logoutText
-                hoverEnabled: true
+                text: (AccountServices.username === "Unknown user" ? "Log In" : "Logout " + AccountServices.username)
-                onEntered: {
+                wrapMode: Text.Wrap
-                    parent.color = simplifiedUI.colors.text.lightBlueHover;
+                width: paintedWidth
-                }
+                height: paintedHeight
-                onExited: {
+                size: 14
-                    parent.color = simplifiedUI.colors.text.lightBlue;
+                color: simplifiedUI.colors.text.lightBlue
-                }
+
-                onClicked: {
+                MouseArea {
-                    if (Account.loggedIn) {
+                    anchors.fill: parent
-                        AccountServices.logOut();
+                    hoverEnabled: true
-                    } else {
+                    onEntered: {
-                        DialogsManager.showLoginDialog();
+                        parent.color = simplifiedUI.colors.text.lightBlueHover;
+                    }
+                    onExited: {
+                        parent.color = simplifiedUI.colors.text.lightBlue;
+                    }
+                    onClicked: {
+                        if (Account.loggedIn) {
+                            AccountServices.logOut();
+                        } else {
+                            DialogsManager.showLoginDialog();
+                        }
                     }
                 }
             }

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 {

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

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;
+        }
+    }
+}