From 8e1a70891d802b40ea35779cc877ac64e4b785bf Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Thu, 12 Jan 2017 10:59:28 -0800 Subject: [PATCH 1/2] Checkpoint after cherry-picking from existing PR --- interface/resources/qml/controls-uit/CheckBox.qml | 1 - interface/resources/qml/controls-uit/Table.qml | 4 ++-- interface/resources/qml/hifi/LetterboxMessage.qml | 6 +++--- interface/resources/qml/hifi/NameCard.qml | 8 ++++---- interface/resources/qml/hifi/Pal.qml | 1 + 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/interface/resources/qml/controls-uit/CheckBox.qml b/interface/resources/qml/controls-uit/CheckBox.qml index d3cbb87e5b..09a0e04148 100644 --- a/interface/resources/qml/controls-uit/CheckBox.qml +++ b/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 diff --git a/interface/resources/qml/controls-uit/Table.qml b/interface/resources/qml/controls-uit/Table.qml index 8e685dc253..3054c496bc 100644 --- a/interface/resources/qml/controls-uit/Table.qml +++ b/interface/resources/qml/controls-uit/Table.qml @@ -109,7 +109,7 @@ TableView { handle: Item { id: scrollbarHandle - implicitWidth: 6 + implicitWidth: 9 Rectangle { anchors { fill: parent @@ -124,7 +124,7 @@ TableView { } scrollBarBackground: Item { - implicitWidth: 9 + implicitWidth: 12 Rectangle { anchors { fill: parent diff --git a/interface/resources/qml/hifi/LetterboxMessage.qml b/interface/resources/qml/hifi/LetterboxMessage.qml index 290cff6634..c8adcdcb74 100644 --- a/interface/resources/qml/hifi/LetterboxMessage.qml +++ b/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 diff --git a/interface/resources/qml/hifi/NameCard.qml b/interface/resources/qml/hifi/NameCard.qml index 0ad8bfd57e..b6448fa23c 100644 --- a/interface/resources/qml/hifi/NameCard.qml +++ b/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" @@ -128,9 +127,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" } } } } diff --git a/interface/resources/qml/hifi/Pal.qml b/interface/resources/qml/hifi/Pal.qml index 7ad322bfa4..51e3eac7f2 100644 --- a/interface/resources/qml/hifi/Pal.qml +++ b/interface/resources/qml/hifi/Pal.qml @@ -425,6 +425,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); } From b7e95a348690cb6084f200ca8bc712704808b6b0 Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Thu, 12 Jan 2017 14:14:28 -0800 Subject: [PATCH 2/2] Updates from Alan --- .../resources/qml/controls-uit/Table.qml | 29 ++++++++---- interface/resources/qml/hifi/NameCard.qml | 8 +++- interface/resources/qml/hifi/Pal.qml | 47 ++++++++++++++----- .../qml/styles-uit/HifiConstants.qml | 20 +++++--- 4 files changed, 74 insertions(+), 30 deletions(-) diff --git a/interface/resources/qml/controls-uit/Table.qml b/interface/resources/qml/controls-uit/Table.qml index 3054c496bc..c7e0809b29 100644 --- a/interface/resources/qml/controls-uit/Table.qml +++ b/interface/resources/qml/controls-uit/Table.qml @@ -109,35 +109,46 @@ TableView { handle: Item { id: scrollbarHandle - implicitWidth: 9 + 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: 12 + 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 } diff --git a/interface/resources/qml/hifi/NameCard.qml b/interface/resources/qml/hifi/NameCard.qml index b6448fa23c..a0dde8bacc 100644 --- a/interface/resources/qml/hifi/NameCard.qml +++ b/interface/resources/qml/hifi/NameCard.qml @@ -67,6 +67,8 @@ Row { size: thisNameCard.displayTextHeight // Text Positioning verticalAlignment: Text.AlignVCenter + // Style + color: hifi.colors.darkGray } // UserName Text @@ -82,6 +84,8 @@ Row { size: thisNameCard.usernameTextHeight // Text Positioning verticalAlignment: Text.AlignVCenter + // Style + color: hifi.colors.baseGray } // Spacer @@ -104,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 @@ -113,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 diff --git a/interface/resources/qml/hifi/Pal.qml b/interface/resources/qml/hifi/Pal.qml index 51e3eac7f2..66dce622ff 100644 --- a/interface/resources/qml/hifi/Pal.qml +++ b/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; diff --git a/interface/resources/qml/styles-uit/HifiConstants.qml b/interface/resources/qml/styles-uit/HifiConstants.qml index cb99dc6005..7eca1aa725 100644 --- a/interface/resources/qml/styles-uit/HifiConstants.qml +++ b/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 {