From 050d3438493b6a5e6e37017a1ac6b23e2881d2c9 Mon Sep 17 00:00:00 2001 From: howard-stearns Date: Wed, 16 Nov 2016 15:54:11 -0800 Subject: [PATCH] styling changes --- .../{address-bar.svg => address-bar-856.svg} | 16 +++--- interface/resources/images/concurrency.svg | 53 ------------------- .../resources/images/info-icon-2-state.svg | 24 +++++++++ interface/resources/images/snap-icon.svg | 14 +++++ interface/resources/images/snapshot.svg | 33 ------------ interface/resources/images/swipe-chevron.svg | 39 ++++++++++++++ interface/resources/qml/AddressBarDialog.qml | 31 ++++++----- interface/resources/qml/hifi/Card.qml | 40 +++++++++----- interface/resources/qml/hifi/TextButton.qml | 4 +- 9 files changed, 133 insertions(+), 121 deletions(-) rename interface/resources/images/{address-bar.svg => address-bar-856.svg} (52%) delete mode 100644 interface/resources/images/concurrency.svg create mode 100644 interface/resources/images/info-icon-2-state.svg create mode 100644 interface/resources/images/snap-icon.svg delete mode 100644 interface/resources/images/snapshot.svg create mode 100644 interface/resources/images/swipe-chevron.svg diff --git a/interface/resources/images/address-bar.svg b/interface/resources/images/address-bar-856.svg similarity index 52% rename from interface/resources/images/address-bar.svg rename to interface/resources/images/address-bar-856.svg index 39926b017d..678e1aaf95 100644 --- a/interface/resources/images/address-bar.svg +++ b/interface/resources/images/address-bar-856.svg @@ -2,17 +2,17 @@ + xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 856 100" + style="enable-background:new 0 0 856 100;" xml:space="preserve"> - - - + + + diff --git a/interface/resources/images/concurrency.svg b/interface/resources/images/concurrency.svg deleted file mode 100644 index b9e76e7d55..0000000000 --- a/interface/resources/images/concurrency.svg +++ /dev/null @@ -1,53 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/interface/resources/images/info-icon-2-state.svg b/interface/resources/images/info-icon-2-state.svg new file mode 100644 index 0000000000..cb6c802315 --- /dev/null +++ b/interface/resources/images/info-icon-2-state.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + diff --git a/interface/resources/images/snap-icon.svg b/interface/resources/images/snap-icon.svg new file mode 100644 index 0000000000..8c6c042bec --- /dev/null +++ b/interface/resources/images/snap-icon.svg @@ -0,0 +1,14 @@ + + + + + + + + + diff --git a/interface/resources/images/snapshot.svg b/interface/resources/images/snapshot.svg deleted file mode 100644 index 7b3da80f3c..0000000000 --- a/interface/resources/images/snapshot.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/interface/resources/images/swipe-chevron.svg b/interface/resources/images/swipe-chevron.svg new file mode 100644 index 0000000000..b70c8c31e2 --- /dev/null +++ b/interface/resources/images/swipe-chevron.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + diff --git a/interface/resources/qml/AddressBarDialog.qml b/interface/resources/qml/AddressBarDialog.qml index 5d60821ce0..bfb5295512 100644 --- a/interface/resources/qml/AddressBarDialog.qml +++ b/interface/resources/qml/AddressBarDialog.qml @@ -93,14 +93,14 @@ Window { ListView { id: scroll - width: backgroundImage.width; height: cardHeight + scroll.stackedCardShadowHeight - property int stackedCardShadowHeight: 20; + property int stackedCardShadowHeight: 10; spacing: gap; clip: true; anchors { + left: backgroundImage.left + right: swipe.left bottom: backgroundImage.top - horizontalCenter: backgroundImage.horizontalCenter } model: suggestions; orientation: ListView.Horizontal; @@ -123,15 +123,20 @@ Window { } highlightMoveDuration: -1; highlightMoveVelocity: -1; - highlight: Rectangle { color: "transparent"; border.width: 4; border.color: "#1DB5ED"; z: 1; } + highlight: Rectangle { color: "transparent"; border.width: 4; border.color: hifiStyleConstants.colors.blueHighlight; z: 1; } } Image { // Just a visual indicator that the user can swipe the cards over to see more. - source: "../images/Swipe-Icon-single.svg" - width: 50; + id: swipe; + source: "../images/swipe-chevron.svg"; + width: 72; visible: suggestions.count > 3; anchors { - right: scroll.right; - verticalCenter: scroll.verticalCenter; + right: backgroundImage.right; + top: scroll.top; + } + MouseArea { + anchors.fill: parent + onClicked: scroll.currentIndex = (scroll.currentIndex < 0) ? 3 : (scroll.currentIndex + 3) } } @@ -146,21 +151,21 @@ Window { property var selected: allTab; TextButton { id: allTab; - text: "All"; + text: "ALL"; property string includeActions: 'snapshot,concurrency'; selected: allTab === selectedTab; action: tabSelect; } TextButton { id: placeTab; - text: "Places"; + text: "PLACES"; property string includeActions: 'concurrency'; selected: placeTab === selectedTab; action: tabSelect; } TextButton { id: snapsTab; - text: "Snaps"; + text: "SNAPS"; property string includeActions: 'snapshot'; selected: snapsTab === selectedTab; action: tabSelect; @@ -169,8 +174,8 @@ Window { Image { id: backgroundImage - source: "../images/address-bar.svg" - width: 720 + source: "../images/address-bar-856.svg" + width: 856 height: 100 anchors { bottom: parent.keyboardEnabled ? keyboard.top : parent.bottom; diff --git a/interface/resources/qml/hifi/Card.qml b/interface/resources/qml/hifi/Card.qml index 11a2901661..9e9b1dff51 100644 --- a/interface/resources/qml/hifi/Card.qml +++ b/interface/resources/qml/hifi/Card.qml @@ -18,6 +18,7 @@ import "toolbars" import "../styles-uit" Rectangle { + id: root; property string userName: ""; property string placeName: ""; property string action: ""; @@ -29,16 +30,18 @@ Rectangle { property bool drillDownToPlace: false; property bool showPlace: isConcurrency; - property string messageColor: "#1DB5ED"; + property string messageColor: hifi.colors.blueAccent; property string timePhrase: pastTime(timestamp); property int onlineUsers: 0; property bool isConcurrency: action === 'concurrency'; property bool isStacked: !isConcurrency && drillDownToPlace; property int textPadding: 10; + property int smallMargin: 4; property int messageHeight: 40; property int textSize: 24; property int textSizeSmall: 18; + property int stackShadowNarrowing: 5; property string defaultThumbnail: Qt.resolvedUrl("../../images/default-domain.gif"); property int shadowHeight: 20; HifiConstants { id: hifi } @@ -66,15 +69,15 @@ Rectangle { Image { id: lobby; - width: parent.width - (isConcurrency ? 0 : 8); - height: parent.height - messageHeight - (isConcurrency ? 0 : 4); + width: parent.width - (isConcurrency ? 0 : (2 * smallMargin)); + height: parent.height - messageHeight - (isConcurrency ? 0 : smallMargin); source: thumbnail || defaultThumbnail; fillMode: Image.PreserveAspectCrop; // source gets filled in later anchors { horizontalCenter: parent.horizontalCenter; top: parent.top; - topMargin: isConcurrency ? 0 : 4; + topMargin: isConcurrency ? 0 : smallMargin; } onStatusChanged: { if (status == Image.Error) { @@ -86,7 +89,7 @@ Rectangle { Rectangle { id: shadow1; visible: isStacked; - width: parent.width - 5; + width: parent.width - stackShadowNarrowing; height: shadowHeight / 2; anchors { top: parent.bottom; @@ -100,7 +103,7 @@ Rectangle { Rectangle { id: shadow2; visible: isStacked; - width: shadow1.width - 5; + width: shadow1.width - stackShadowNarrowing; height: shadowHeight / 2; anchors { top: shadow1.bottom; @@ -133,9 +136,11 @@ Rectangle { text: placeName; color: hifi.colors.white; size: textSize; + elide: Text.ElideRight; // requires constrained width anchors { top: parent.top; left: parent.left; + right: parent.right; margins: textPadding; } } @@ -148,11 +153,23 @@ Rectangle { color: messageColor; anchors.verticalCenter: message.verticalCenter; } - RalewaySemiBold { + Image { + id: icon; + source: "../../images/snap-icon.svg" + width: 40; + height: 40; + visible: action === 'snapshot'; + } + RalewayRegular { id: message; text: isConcurrency ? ((onlineUsers === 1) ? "person" : "people") : (drillDownToPlace ? "snapshots" : ("by " + userName)); size: textSizeSmall; color: messageColor; + elide: Text.ElideRight; // requires a width to be specified` + width: root.width - textPadding + - (users.visible ? users.width + parent.spacing : 0) + - (icon.visible ? icon.width + parent.spacing : 0) + - (actionIcon.width + (2 * smallMargin)); anchors { bottom: parent.bottom; bottomMargin: parent.spacing; @@ -181,16 +198,17 @@ Rectangle { } StateImage { id: actionIcon; - imageURL: "../../images/" + action + ".svg"; + imageURL: "../../images/info-icon-2-state.svg"; size: 32; - buttonState: 1; + buttonState: messageArea.containsMouse ? 1 : 0; anchors { bottom: parent.bottom; right: parent.right; - margins: 4; + margins: smallMargin; } } MouseArea { + id: messageArea; width: parent.width; height: messageHeight; anchors { @@ -199,7 +217,5 @@ Rectangle { acceptedButtons: Qt.LeftButton; onClicked: goFunction(drillDownToPlace ? ("/places/" + placeName) : ("/user_stories/" + storyId)); hoverEnabled: true; - onEntered: actionIcon.buttonState = 0; - onExited: actionIcon.buttonState = 1; } } diff --git a/interface/resources/qml/hifi/TextButton.qml b/interface/resources/qml/hifi/TextButton.qml index 613ff617e1..1000e7c588 100644 --- a/interface/resources/qml/hifi/TextButton.qml +++ b/interface/resources/qml/hifi/TextButton.qml @@ -17,11 +17,11 @@ Rectangle { property bool selected: false; property int spacing: 2; property var action: function () { }; - property string highlightColor: "#1DB5ED"; + property string highlightColor: hifi.colors.blueHighlight; width: label.width + 64; height: 32; radius: height / 2; - border.width: (clickArea.containsMouse && !clickArea.containsPress) ? 4 : 0; + border.width: (clickArea.containsMouse && !clickArea.containsPress) ? 3 : 0; border.color: highlightColor; color: clickArea.containsPress ? hifi.colors.darkGray : (selected ? highlightColor : "transparent"); HifiConstants { id: hifi; }