Merge pull request #9373 from zfox23/PAL_ScrollbarRefinement

PAL: Scrollbar refinement & visual updates

interface/resources/qml/controls-uit/CheckBox.qml

@@ -16,7 +16,6 @@ import "../styles-uit"
 
 Original.CheckBox {
     id: checkBox
-    HifiConstants { id: hifi }
 
     property int colorScheme: hifi.colorSchemes.light
     readonly property bool isLightColorScheme: colorScheme == hifi.colorSchemes.light

interface/resources/qml/controls-uit/Table.qml

@@ -109,35 +109,46 @@ TableView {
 
         handle: Item {
             id: scrollbarHandle
-            implicitWidth: 6
+            implicitWidth: hifi.dimensions.scrollbarHandleWidth
             Rectangle {
                 anchors {
                     fill: parent
                     topMargin: 3
                     bottomMargin: 3     // ""
-                    leftMargin: 2       // Move it right
-                    rightMargin: -2     // ""
+                    leftMargin: 1       // Move it right
+                    rightMargin: -1     // ""
                 }
-                radius: 3
+                radius: hifi.dimensions.scrollbarHandleWidth/2
                 color: isLightColorScheme ? hifi.colors.tableScrollHandleLight : hifi.colors.tableScrollHandleDark
             }
         }
 
         scrollBarBackground: Item {
-            implicitWidth: 9
+            implicitWidth: hifi.dimensions.scrollbarBackgroundWidth
             Rectangle {
                 anchors {
                     fill: parent
                     margins: -1     // Expand
-                    topMargin: headerVisible ? -hifi.dimensions.tableHeaderHeight : -1
+                    topMargin: -1
+                }
+                color: isLightColorScheme ? hifi.colors.tableScrollBackgroundLight : hifi.colors.tableScrollBackgroundDark
+                
+                // Extend header color above scrollbar background
+                Rectangle {
+                    anchors {
+                        top: parent.top
+                        topMargin: -hifi.dimensions.tableHeaderHeight
+                        left: parent.left
+                        right: parent.right
+                    }
+                    height: hifi.dimensions.tableHeaderHeight
+                    color: tableView.isLightColorScheme ? hifi.colors.tableBackgroundLight : hifi.colors.tableBackgroundDark
+                    visible: headerVisible
                 }
-                color: isLightColorScheme ? hifi.colors.tableBackgroundLight : hifi.colors.tableBackgroundDark
-
                 Rectangle {
                     // Extend header bottom border
                     anchors {
                         top: parent.top
-                        topMargin: hifi.dimensions.tableHeaderHeight - 1
                         left: parent.left
                         right: parent.right
                     }

interface/resources/qml/hifi/LetterboxMessage.qml

@@ -15,7 +15,7 @@ import "../styles-uit"
 
 Item {
     property alias text: popupText.text
-    property real radius: hifi.dimensions.borderRadius
+    property real popupRadius: hifi.dimensions.borderRadius
     visible: false
     id: letterbox
     anchors.fill: parent
@@ -23,13 +23,13 @@ Item {
         anchors.fill: parent
         color: "black"
         opacity: 0.5
-        radius: radius
+        radius: popupRadius
     }
     Rectangle {
         width: Math.max(parent.width * 0.75, 400)
         height: popupText.contentHeight*1.5
         anchors.centerIn: parent
-        radius: radius
+        radius: popupRadius
         color: "white"
         FiraSansSemiBold {
             id: popupText

interface/resources/qml/hifi/NameCard.qml

@@ -9,7 +9,6 @@
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
 
-import Hifi 1.0 as Hifi
 import QtQuick 2.5
 import QtGraphicalEffects 1.0
 import "../styles-uit"
@@ -68,6 +67,8 @@ Row {
             size: thisNameCard.displayTextHeight
             // Text Positioning
             verticalAlignment: Text.AlignVCenter
+            // Style
+            color: hifi.colors.darkGray
         }
 
         // UserName Text
@@ -83,6 +84,8 @@ Row {
             size: thisNameCard.usernameTextHeight
             // Text Positioning
             verticalAlignment: Text.AlignVCenter
+            // Style
+            color: hifi.colors.baseGray
         }
 
         // Spacer
@@ -105,7 +108,7 @@ Row {
                 // Anchors
                 anchors.fill: parent
                 // Style
-                color: "#dbdbdb" // Very appropriate hex value here
+                color: "#c5c5c5"
                 radius: parent.radius
             }
             // Rectangle for the VU meter audio level
@@ -114,7 +117,7 @@ Row {
                 // Size
                 width: (thisNameCard.audioLevel) * parent.width
                 // Style
-                color: "#dbdbdb" // Very appropriate hex value here
+                color: "#c5c5c5"
                 radius: parent.radius
                 // Anchors
                 anchors.bottom: parent.bottom
@@ -128,9 +131,10 @@ Row {
                 start: Qt.point(0, 0)
                 end: Qt.point(parent.width, 0)
                 gradient: Gradient {
-                    GradientStop { position: 0.05; color: "#00CFEF" }
-                    GradientStop { position: 0.5; color: "#9450A5" }
-                    GradientStop { position: 0.95; color: "#EA4C5F" }
+                    GradientStop { position: 0.0; color: "#2c8e72" }
+                    GradientStop { position: 0.9; color: "#1fc6a6" }
+                    GradientStop { position: 0.91; color: "#ea4c5f" }
+                    GradientStop { position: 1.0; color: "#ea4c5f" }
                 }
             }
         }

interface/resources/qml/hifi/Pal.qml

@@ -16,29 +16,46 @@ import QtQuick.Controls 1.4
 import "../styles-uit"
 import "../controls-uit" as HifiControls
 
-Item {
+Rectangle {
     id: pal
     // Size
     width: parent.width
     height: parent.height
+    // Style
+    color: "#E3E3E3"
     // Properties
     property int myCardHeight: 70
     property int rowHeight: 70
     property int actionButtonWidth: 75
-    property int nameCardWidth: width - actionButtonWidth*(iAmAdmin ? 4 : 2) - 4
+    property int nameCardWidth: palContainer.width - actionButtonWidth*(iAmAdmin ? 4 : 2) - 4 - hifi.dimensions.scrollbarBackgroundWidth
     property var myData: ({displayName: "", userName: "", audioLevel: 0.0}) // valid dummy until set
     property var ignored: ({}); // Keep a local list of ignored avatars & their data. Necessary because HashMap is slow to respond after ignoring.
     property var userModelData: [] // This simple list is essentially a mirror of the userModel listModel without all the extra complexities.
     property bool iAmAdmin: false
 
+    // This is the container for the PAL
+    Rectangle {
+        id: palContainer
+        // Size
+        width: pal.width - 50
+        height: pal.height - 50
+        // Style
+        color: pal.color
+        // Anchors
+        anchors.centerIn: pal
+        // Properties
+        radius: hifi.dimensions.borderRadius
+
     // This contains the current user's NameCard and will contain other information in the future
     Rectangle {
         id: myInfo
         // Size
-        width: pal.width
+        width: palContainer.width
         height: myCardHeight + 20
+        // Style
+        color: pal.color
         // Anchors
-        anchors.top: pal.top
+        anchors.top: palContainer.top
         // Properties
         radius: hifi.dimensions.borderRadius
         // This NameCard refers to the current user's NameCard (the one above the table)
@@ -57,15 +74,15 @@ Item {
     }
     // Rectangles used to cover up rounded edges on bottom of MyInfo Rectangle
     Rectangle {
-        color: "#FFFFFF"
-        width: pal.width
+        color: pal.color
+        width: palContainer.width
         height: 10
         anchors.top: myInfo.bottom
         anchors.left: parent.left
     }
     Rectangle {
-        color: "#FFFFFF"
-        width: pal.width
+        color: pal.color
+        width: palContainer.width
         height: 10
         anchors.bottom: table.top
         anchors.left: parent.left
@@ -74,7 +91,7 @@ Item {
     Rectangle {
         id: adminTab
         // Size
-        width: actionButtonWidth * 2 + 2
+        width: 2*actionButtonWidth + hifi.dimensions.scrollbarBackgroundWidth + 2
         height: 40
         // Anchors
         anchors.bottom: myInfo.bottom
@@ -98,6 +115,7 @@ Item {
             anchors.topMargin: 8
             anchors.left: parent.left
             anchors.right: parent.right
+            anchors.rightMargin: hifi.dimensions.scrollbarBackgroundWidth
             // Style
             font.capitalization: Font.AllUppercase
             color: hifi.colors.redHighlight
@@ -110,8 +128,8 @@ Item {
     HifiControls.Table {
         id: table
         // Size
-        height: pal.height - myInfo.height - 4
-        width: pal.width - 4
+        height: palContainer.height - myInfo.height - 4
+        width: palContainer.width - 4
         // Anchors
         anchors.left: parent.left
         anchors.top: myInfo.bottom
@@ -154,6 +172,8 @@ Item {
         TableViewColumn {
             visible: iAmAdmin
             role: "kick"
+            // The hacky spaces used to center text over the button, since I don't know how to apply a margin
+            // to column header text.
             title: "BAN"
             width: actionButtonWidth
             movable: false
@@ -168,7 +188,7 @@ Item {
             // Size
             height: rowHeight
             color: styleData.selected
-                   ? "#afafaf"
+                   ? hifi.colors.orangeHighlight
                    : styleData.alternate ? hifi.colors.tableRowLightEven : hifi.colors.tableRowLightOdd
         }
 
@@ -353,7 +373,7 @@ Item {
         width: 20
         height: 28
         anchors.right: adminTab.right
-        anchors.rightMargin: 31
+        anchors.rightMargin: 31 + hifi.dimensions.scrollbarBackgroundWidth
         anchors.top: adminTab.top
         anchors.topMargin: 2
         RalewayRegular {
@@ -379,6 +399,7 @@ Item {
     LetterboxMessage {
         id: letterboxMessage
     }
+    }
 
     function findSessionIndex(sessionId, optionalData) { // no findIndex in .qml
         var data = optionalData || userModelData, length = data.length;
@@ -425,6 +446,7 @@ Item {
                 if (selected) {
                     table.selection.clear(); // for now, no multi-select
                     table.selection.select(userIndex);
+                    table.positionViewAtRow(userIndex, ListView.Visible);
                 } else {
                     table.selection.deselect(userIndex);
                 }

interface/resources/qml/styles-uit/HifiConstants.qml

@@ -59,11 +59,17 @@ Item {
         readonly property color faintGray: "#e3e3e3"
         readonly property color primaryHighlight: "#00b4ef"
         readonly property color blueHighlight: "#00b4ef"
-        readonly property color blueAccent: "#1080b8"
-        readonly property color redHighlight: "#e2334d"
-        readonly property color redAccent: "#b70a37"
+        readonly property color blueAccent: "#0093C5"
+        readonly property color redHighlight: "#EA4C5F"
+        readonly property color redAccent: "#C62147"
         readonly property color greenHighlight: "#1ac567"
-        readonly property color greenShadow: "#2c8e72"
+        readonly property color greenShadow: "#359D85"
+        readonly property color orangeHighlight: "#FFC49C"
+        readonly property color orangeAccent: "#FF6309"
+        readonly property color indigoHighlight: "#C0D2FF"
+        readonly property color indigoAccent: "#9495FF"
+        readonly property color magentaHighlight: "#EF93D1"
+        readonly property color magentaAccent: "#A2277C"
         // Semitransparent
         readonly property color darkGray30: "#4d121212"
         readonly property color darkGray0: "#00121212"
@@ -95,9 +101,9 @@ Item {
         readonly property color tableRowDarkEven: "#1c1c1c"  // Equivalent to "#a6181818" over #404040 background
         readonly property color tableBackgroundLight: tableRowLightEven
         readonly property color tableBackgroundDark: tableRowDarkEven
-        readonly property color tableScrollHandleLight: "#8F8F8F"
+        readonly property color tableScrollHandleLight: "#DDDDDD"
         readonly property color tableScrollHandleDark: "#707070"
-        readonly property color tableScrollBackgroundLight: tableRowLightEven
+        readonly property color tableScrollBackgroundLight: tableRowLightOdd
         readonly property color tableScrollBackgroundDark: "#323232"
         readonly property color checkboxLightStart: "#ffffff"
         readonly property color checkboxLightFinish: "#afafaf"
@@ -151,6 +157,8 @@ Item {
         readonly property real controlLineHeight: 28  // Height of spinbox control on 1920 x 1080 monitor
         readonly property real controlInterlineHeight: 21  // 75% of controlLineHeight
         readonly property vector2d menuPadding: Qt.vector2d(14, 12)
+        readonly property real scrollbarBackgroundWidth: 18
+        readonly property real scrollbarHandleWidth: scrollbarBackgroundWidth - 2
     }
 
     Item {