Lots of progress today

This commit is contained in:
Zach Fox 2016-12-20 17:18:28 -08:00
parent 0be4db1e68
commit 630fb8696f
5 changed files with 100 additions and 106 deletions

View file

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

View file

@ -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" }
}
}
}

View file

@ -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];

View file

@ -17,6 +17,7 @@
#include "Menu.h"
HIFI_QML_DEF(AvatarInputs)
HIFI_QML_DEF(AvatarInputs2)
static AvatarInputs* INSTANCE{ nullptr };

View file

@ -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 {