From 630fb8696f8c32da8138c4a1731e53ca0e2aeb22 Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Tue, 20 Dec 2016 17:18:28 -0800 Subject: [PATCH] Lots of progress today --- .../resources/qml/controls-uit/CheckBox.qml | 22 ++- interface/resources/qml/hifi/NameCard.qml | 168 ++++++++---------- interface/resources/qml/hifi/Pal.qml | 13 +- interface/src/ui/AvatarInputs.cpp | 1 + scripts/system/pal.js | 2 +- 5 files changed, 100 insertions(+), 106 deletions(-) diff --git a/interface/resources/qml/controls-uit/CheckBox.qml b/interface/resources/qml/controls-uit/CheckBox.qml index a3050df22a..aec579755a 100644 --- a/interface/resources/qml/controls-uit/CheckBox.qml +++ b/interface/resources/qml/controls-uit/CheckBox.qml @@ -23,7 +23,7 @@ Original.CheckBox { property int boxSize: 14 readonly property int boxRadius: 3 - readonly property int checkSize: 10 + readonly property int checkSize: Math.max(boxSize - 8, 10) readonly property int checkRadius: 2 style: CheckBoxStyle { @@ -32,21 +32,35 @@ Original.CheckBox { width: boxSize height: boxSize radius: boxRadius + border.width: 1 + border.color: pressed || hovered + ? hifi.colors.checkboxCheckedBorder + : (checkBox.isLightColorScheme ? hifi.colors.checkboxLightFinish : hifi.colors.checkboxDarkFinish) gradient: Gradient { GradientStop { position: 0.2 color: pressed || hovered - ? (checkBox.isLightColorScheme ? hifi.colors.checkboxDarkStart : hifi.colors.checkboxLightStart) + ? (checkBox.isLightColorScheme ? hifi.colors.checkboxChecked : hifi.colors.checkboxLightStart) : (checkBox.isLightColorScheme ? hifi.colors.checkboxLightStart : hifi.colors.checkboxDarkStart) } GradientStop { position: 1.0 color: pressed || hovered - ? (checkBox.isLightColorScheme ? hifi.colors.checkboxDarkFinish : hifi.colors.checkboxLightFinish) + ? (checkBox.isLightColorScheme ? hifi.colors.checkboxChecked : hifi.colors.checkboxLightFinish) : (checkBox.isLightColorScheme ? hifi.colors.checkboxLightFinish : hifi.colors.checkboxDarkFinish) } } + Rectangle { + visible: pressed || hovered + anchors.centerIn: parent + id: innerBox + width: checkSize - 4 + height: width + radius: checkRadius + color: hifi.colors.checkboxCheckedBorder + } + Rectangle { id: check width: checkSize @@ -54,7 +68,7 @@ Original.CheckBox { radius: checkRadius anchors.centerIn: parent color: hifi.colors.checkboxChecked - border.width: 1 + border.width: 2 border.color: hifi.colors.checkboxCheckedBorder visible: checked && !pressed || !checked && pressed } diff --git a/interface/resources/qml/hifi/NameCard.qml b/interface/resources/qml/hifi/NameCard.qml index 56fa0521ae..4304c407c0 100644 --- a/interface/resources/qml/hifi/NameCard.qml +++ b/interface/resources/qml/hifi/NameCard.qml @@ -11,138 +11,124 @@ import Hifi 1.0 as Hifi import QtQuick 2.5 +import QtGraphicalEffects 1.0 import "../styles-uit" Row { - id: thisNameCard; + id: thisNameCard // Spacing - spacing: 10; + spacing: 10 // Anchors - anchors.top: parent.top; + anchors.top: parent.top anchors { - topMargin: (parent.height - contentHeight)/2; - bottomMargin: (parent.height - contentHeight)/2; - leftMargin: 10; - rightMargin: 10; + topMargin: (parent.height - contentHeight)/2 + bottomMargin: (parent.height - contentHeight)/2 + leftMargin: 10 + rightMargin: 10 } // Properties - property int contentHeight: 50; - property string displayName: ""; - property string userName: ""; - property int displayTextHeight: 18; - property int usernameTextHeight: 12; + property int contentHeight: 50 + property string displayName: "" + property string userName: "" + property int displayTextHeight: 18 + property int usernameTextHeight: 12 Column { - id: avatarImage; + id: avatarImage // Size - height: contentHeight; - width: height; + height: contentHeight + width: height Image { - id: userImage; + id: userImage source: "../../icons/defaultNameCardUser.png" // Anchors - width: parent.width; - height: parent.height; + width: parent.width + height: parent.height } } Column { - id: textContainer; + id: textContainer // Size - width: parent.width - avatarImage.width - parent.anchors.leftMargin - parent.anchors.rightMargin - parent.spacing; - height: contentHeight; + width: parent.width - avatarImage.width - parent.anchors.leftMargin - parent.anchors.rightMargin - parent.spacing + height: contentHeight // DisplayName Text FiraSansSemiBold { - id: displayNameText; + id: displayNameText // Properties - text: thisNameCard.displayName; - elide: Text.ElideRight; + text: thisNameCard.displayName + elide: Text.ElideRight // Size - width: parent.width; + width: parent.width // Text Size - size: thisNameCard.displayTextHeight; + size: thisNameCard.displayTextHeight // Text Positioning - verticalAlignment: Text.AlignVCenter; + verticalAlignment: Text.AlignVCenter } // UserName Text FiraSansRegular { - id: userNameText; + id: userNameText // Properties - text: thisNameCard.userName; - elide: Text.ElideRight; - visible: thisNameCard.displayName; + text: thisNameCard.userName + elide: Text.ElideRight + visible: thisNameCard.displayName // Size - width: parent.width; + width: parent.width // Text Size - size: thisNameCard.usernameTextHeight; + size: thisNameCard.usernameTextHeight // Text Positioning - verticalAlignment: Text.AlignVCenter; + verticalAlignment: Text.AlignVCenter } // Spacer Item { - height: 7; - width: parent.width; + height: 4 + width: parent.width } // VU Meter - Rectangle { - id: nameCardVUMeter; - objectName: "AvatarInputs"; - width: parent.width; - height: 4; - // Avatar Audio VU Meter - Item { - id: controls; - width: nameCardVUMeter.width; - - Rectangle { - anchors.fill: parent; - color: nameCardVUMeter.audioClipping ? "red" : "#696969"; - - Item { - id: audioMeter - anchors.verticalCenter: parent.verticalCenter - anchors.left: parent.left - anchors.leftMargin: nameCardVUMeter.iconPadding - anchors.right: parent.right - anchors.rightMargin: nameCardVUMeter.iconPadding - height: 8 - Rectangle { - id: blueRect - color: "blue" - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.left: parent.left - width: parent.width / 4 - } - Rectangle { - id: greenRect - color: "green" - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.left: blueRect.right - anchors.right: redRect.left - } - Rectangle { - id: redRect - color: "red" - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.right: parent.right - width: parent.width / 5 - } - Rectangle { - z: 100 - anchors.top: parent.top - anchors.bottom: parent.bottom - anchors.right: parent.right - width: (1.0 - nameCardVUMeter.audioLevel) * parent.width - color: "#dddddd"; - } - } + Rectangle { // CHANGEME to the appropriate type! + id: nameCardVUMeter + objectName: "AvatarInputs" + // Size + width: parent.width + height: 8 + // Style + radius: 4 + // Rectangle for the VU meter base + Rectangle { + id: vuMeterBase + // Anchors + anchors.fill: parent + // Style + color: "#eeeeee" + radius: parent.radius + } + // Rectangle for the VU meter audio level + Rectangle { + id: vuMeterLevel + // Size + width: (nameCardVUMeter.audioLevel) * parent.width + // Style + color: "#E3E3E3" + radius: parent.radius + // Anchors + anchors.bottom: parent.bottom + anchors.top: parent.top + anchors.left: parent.left + } + // Gradient for the VU meter audio level + LinearGradient { + anchors.fill: vuMeterLevel + source: vuMeterLevel + 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" } } } } diff --git a/interface/resources/qml/hifi/Pal.qml b/interface/resources/qml/hifi/Pal.qml index 3a7c3d45b7..b62c721ead 100644 --- a/interface/resources/qml/hifi/Pal.qml +++ b/interface/resources/qml/hifi/Pal.qml @@ -142,15 +142,9 @@ Item { rowDelegate: Rectangle { // The only way I know to specify a row height. // Size height: rowHeight; - // The rest of this is cargo-culted to restore the default styling - SystemPalette { - id: myPalette; - colorGroup: SystemPalette.Active - } - color: { - var baseColor = styleData.alternate?myPalette.alternateBase:myPalette.base - return styleData.selected?myPalette.highlight:baseColor - } + color: styleData.selected + ? "#afafaf" + : styleData.alternate ? hifi.colors.tableRowLightEven : hifi.colors.tableRowLightOdd } // This Item refers to the contents of each Cell @@ -177,7 +171,6 @@ Item { HifiControls.CheckBox { visible: isCheckBox && !isSeparator; anchors.centerIn: parent; - colorScheme: hifi.colorSchemes.dark; boxSize: 22; onClicked: { var newValue = !model[styleData.role]; diff --git a/interface/src/ui/AvatarInputs.cpp b/interface/src/ui/AvatarInputs.cpp index b09289c78a..8b940e8178 100644 --- a/interface/src/ui/AvatarInputs.cpp +++ b/interface/src/ui/AvatarInputs.cpp @@ -17,6 +17,7 @@ #include "Menu.h" HIFI_QML_DEF(AvatarInputs) +HIFI_QML_DEF(AvatarInputs2) static AvatarInputs* INSTANCE{ nullptr }; diff --git a/scripts/system/pal.js b/scripts/system/pal.js index 916556fdd7..9d419e5a0f 100644 --- a/scripts/system/pal.js +++ b/scripts/system/pal.js @@ -140,7 +140,7 @@ function populateUserList() { function usernameFromIDReply(id, username, machineFingerprint) { var data; // If the ID we've received is our ID... - if (AvatarList.getAvatar('').sessionUUID === id) { + if (MyAvatar.sessionUUID === id) { // Set the data to contain specific strings. data = ['', username] } else {