From d1bf80b50cc6ad15e4d389b1f718fa236374ca38 Mon Sep 17 00:00:00 2001 From: Alexander Ivash Date: Fri, 11 May 2018 00:47:55 +0300 Subject: [PATCH] update UI based on the latest zeplin mockups --- interface/resources/qml/hifi/AvatarApp.qml | 24 ++++++++++--------- .../qml/hifi/avatarapp/AdjustWearables.qml | 1 + .../qml/hifi/avatarapp/AvatarAppHeader.qml | 5 ++-- .../qml/hifi/avatarapp/BlueButton.qml | 2 ++ .../qml/hifi/avatarapp/ShadowRectangle.qml | 1 + .../qml/hifi/avatarapp/SquareLabel.qml | 13 +++++++--- .../qml/hifi/avatarapp/TextStyle8.qml | 2 +- .../qml/hifi/avatarapp/WhiteButton.qml | 2 ++ 8 files changed, 32 insertions(+), 18 deletions(-) diff --git a/interface/resources/qml/hifi/AvatarApp.qml b/interface/resources/qml/hifi/AvatarApp.qml index 87b2452a33..ff0dfde425 100644 --- a/interface/resources/qml/hifi/AvatarApp.qml +++ b/interface/resources/qml/hifi/AvatarApp.qml @@ -252,7 +252,7 @@ Rectangle { anchors.left: parent.left anchors.leftMargin: 30 anchors.top: parent.top - anchors.topMargin: 34 + anchors.topMargin: 25 text: 'Display Name' } @@ -262,7 +262,7 @@ Rectangle { anchors.leftMargin: 30 anchors.verticalCenter: displayNameLabel.verticalCenter anchors.right: parent.right - anchors.rightMargin: 36 + anchors.rightMargin: 30 width: 232 property bool error: text === ''; @@ -327,8 +327,8 @@ Rectangle { Row { id: star - anchors.top: parent.top - anchors.topMargin: 119 + anchors.top: avatarImage.top + anchors.topMargin: 11 anchors.left: avatarImage.right anchors.leftMargin: 30.5 @@ -369,8 +369,8 @@ Rectangle { text: avatarName anchors.left: avatarImage.right anchors.leftMargin: 30 - anchors.top: parent.top - anchors.topMargin: 154 + anchors.top: star.bottom + anchors.topMargin: 11 } TextStyle3 { @@ -379,6 +379,7 @@ Rectangle { anchors.leftMargin: 30 anchors.top: avatarNameLabel.bottom anchors.topMargin: 16 + color: 'black' text: 'Wearables' } @@ -431,6 +432,7 @@ Rectangle { anchors.verticalCenter: wearablesLabel.verticalCenter font.underline: true text: "Add" + color: 'black' visible: avatarWearablesCount === 0 MouseArea { @@ -490,7 +492,7 @@ Rectangle { Rectangle { id: favoritesBlock - height: 369 + height: 407 anchors.left: parent.left anchors.right: parent.right @@ -501,7 +503,7 @@ Rectangle { TextStyle1 { id: favoritesLabel anchors.top: parent.top - anchors.topMargin: 9 + anchors.topMargin: 15 anchors.left: parent.left anchors.leftMargin: 30 text: "Favorites" @@ -510,7 +512,7 @@ Rectangle { TextStyle8 { id: manageLabel anchors.top: parent.top - anchors.topMargin: 9 + anchors.topMargin: 20 anchors.right: parent.right anchors.rightMargin: 30 text: isInManageState ? "Back" : "Manage" @@ -529,7 +531,7 @@ Rectangle { anchors.rightMargin: 0 anchors.top: favoritesLabel.bottom - anchors.topMargin: 9 + anchors.topMargin: 20 anchors.bottom: parent.bottom GridView { @@ -868,7 +870,7 @@ Rectangle { } anchors.bottom: parent.bottom - anchors.bottomMargin: 19 + anchors.bottomMargin: 20 } } diff --git a/interface/resources/qml/hifi/avatarapp/AdjustWearables.qml b/interface/resources/qml/hifi/avatarapp/AdjustWearables.qml index ce51b497d0..810fce7f6d 100644 --- a/interface/resources/qml/hifi/avatarapp/AdjustWearables.qml +++ b/interface/resources/qml/hifi/avatarapp/AdjustWearables.qml @@ -292,6 +292,7 @@ Rectangle { } HifiControlsUit.Button { + fontSize: 18 anchors.right: parent.right color: hifi.buttons.red; colorScheme: hifi.colorSchemes.dark; diff --git a/interface/resources/qml/hifi/avatarapp/AvatarAppHeader.qml b/interface/resources/qml/hifi/avatarapp/AvatarAppHeader.qml index 474ceb5f59..3ad4489b39 100644 --- a/interface/resources/qml/hifi/avatarapp/AvatarAppHeader.qml +++ b/interface/resources/qml/hifi/avatarapp/AvatarAppHeader.qml @@ -6,7 +6,7 @@ ShadowRectangle { id: header anchors.left: parent.left anchors.right: parent.right - height: 84 + height: 60 property alias pageTitle: title.text property alias avatarIconVisible: avatarIcon.visible @@ -24,8 +24,7 @@ ShadowRectangle { id: avatarIcon anchors.left: parent.left anchors.leftMargin: 23 - anchors.top: parent.top - anchors.topMargin: 29 + anchors.verticalCenter: header.verticalCenter size: 38 text: "<" diff --git a/interface/resources/qml/hifi/avatarapp/BlueButton.qml b/interface/resources/qml/hifi/avatarapp/BlueButton.qml index a86f7cdee7..e668951517 100644 --- a/interface/resources/qml/hifi/avatarapp/BlueButton.qml +++ b/interface/resources/qml/hifi/avatarapp/BlueButton.qml @@ -7,6 +7,8 @@ HifiControlsUit.Button { id: hifi } + width: Math.max(hifi.dimensions.buttonWidth, implicitTextWidth + 20) + fontSize: 18 color: hifi.buttons.blue; colorScheme: hifi.colorSchemes.light; height: 40 diff --git a/interface/resources/qml/hifi/avatarapp/ShadowRectangle.qml b/interface/resources/qml/hifi/avatarapp/ShadowRectangle.qml index 5dc89d5227..b843e295e3 100644 --- a/interface/resources/qml/hifi/avatarapp/ShadowRectangle.qml +++ b/interface/resources/qml/hifi/avatarapp/ShadowRectangle.qml @@ -4,6 +4,7 @@ import QtGraphicalEffects 1.0 Item { property alias color: rectangle.color + property alias gradient: rectangle.gradient property alias border: rectangle.border property alias radius: rectangle.radius diff --git a/interface/resources/qml/hifi/avatarapp/SquareLabel.qml b/interface/resources/qml/hifi/avatarapp/SquareLabel.qml index 5c4bebd1c4..3c5463e1dd 100644 --- a/interface/resources/qml/hifi/avatarapp/SquareLabel.qml +++ b/interface/resources/qml/hifi/avatarapp/SquareLabel.qml @@ -5,17 +5,24 @@ import QtGraphicalEffects 1.0 ShadowRectangle { width: 44 height: 28 - color: 'white' + AvatarAppStyle { + id: style + } + + gradient: Gradient { + GradientStop { position: 0.0; color: style.colors.blueHighlight } + GradientStop { position: 1.0; color: style.colors.blueAccent } + } + property alias glyphText: glyph.text property alias glyphRotation: glyph.rotation property alias glyphSize: glyph.size radius: 3 - border.color: 'black' - border.width: 1.5 HiFiGlyphs { id: glyph + color: 'white' anchors.centerIn: parent size: 30 } diff --git a/interface/resources/qml/hifi/avatarapp/TextStyle8.qml b/interface/resources/qml/hifi/avatarapp/TextStyle8.qml index 794f066276..9f71451f59 100644 --- a/interface/resources/qml/hifi/avatarapp/TextStyle8.qml +++ b/interface/resources/qml/hifi/avatarapp/TextStyle8.qml @@ -5,6 +5,6 @@ RalewaySemiBold { AvatarAppStyle { id: style } - color: style.colors.blueHightlight + color: style.colors.blueHighlight size: 20; } diff --git a/interface/resources/qml/hifi/avatarapp/WhiteButton.qml b/interface/resources/qml/hifi/avatarapp/WhiteButton.qml index 838af9354c..dc729ae097 100644 --- a/interface/resources/qml/hifi/avatarapp/WhiteButton.qml +++ b/interface/resources/qml/hifi/avatarapp/WhiteButton.qml @@ -7,6 +7,8 @@ HifiControlsUit.Button { id: hifi } + width: Math.max(hifi.dimensions.buttonWidth, implicitTextWidth + 20) + fontSize: 18 color: hifi.buttons.noneBorderlessGray; colorScheme: hifi.colorSchemes.light; height: 40