From aed762e986ba38fd42de41274050725e842e6c7e Mon Sep 17 00:00:00 2001 From: howard-stearns Date: Thu, 27 Apr 2017 17:16:03 -0700 Subject: [PATCH 1/2] ux --- interface/resources/qml/hifi/Card.qml | 70 ++++++----- interface/resources/qml/hifi/Feed.qml | 34 +++-- .../qml/hifi/tablet/TabletAddressDialog.qml | 116 ++++++++++-------- 3 files changed, 127 insertions(+), 93 deletions(-) diff --git a/interface/resources/qml/hifi/Card.qml b/interface/resources/qml/hifi/Card.qml index 59fa66af0b..0b34a8f9ac 100644 --- a/interface/resources/qml/hifi/Card.qml +++ b/interface/resources/qml/hifi/Card.qml @@ -17,7 +17,7 @@ import QtGraphicalEffects 1.0 import "toolbars" import "../styles-uit" -Rectangle { +Item { id: root; property string userName: ""; property string placeName: ""; @@ -45,7 +45,7 @@ Rectangle { property int textSizeSmall: 18; property int stackShadowNarrowing: 5; property string defaultThumbnail: Qt.resolvedUrl("../../images/default-domain.gif"); - property int shadowHeight: 20; + property int shadowHeight: 10; HifiConstants { id: hifi } function pastTime(timestamp) { // Answer a descriptive string @@ -70,6 +70,40 @@ Rectangle { } property bool hasGif: imageUrl.indexOf('.gif') === (imageUrl.length - 4); + + DropShadow { + visible: isStacked; + anchors.fill: shadow1; + source: shadow1; + verticalOffset: 2; + radius: 4; + samples: 9; + color: hifi.colors.baseGrayShadow; + } + Rectangle { + id: shadow1; + visible: isStacked; + width: parent.width - stackShadowNarrowing; + height: shadowHeight; + anchors { + top: parent.bottom; + horizontalCenter: parent.horizontalCenter; + } + } + DropShadow { + anchors.fill: base; + source: base; + verticalOffset: 2; + radius: 4; + samples: 9; + color: hifi.colors.baseGrayShadow; + } + Rectangle { + id: base; + color: "white"; + anchors.fill: parent; + } + AnimatedImage { id: animation; // Always visible, to drive loading, but initially covered up by lobby during load. @@ -96,34 +130,6 @@ Rectangle { } } } - Rectangle { - id: shadow1; - visible: isStacked; - width: parent.width - stackShadowNarrowing; - height: shadowHeight / 2; - anchors { - top: parent.bottom; - horizontalCenter: parent.horizontalCenter; - } - gradient: Gradient { - GradientStop { position: 0.0; color: "gray" } - GradientStop { position: 1.0; color: "white" } - } - } - Rectangle { - id: shadow2; - visible: isStacked; - width: shadow1.width - stackShadowNarrowing; - height: shadowHeight / 2; - anchors { - top: shadow1.bottom; - horizontalCenter: parent.horizontalCenter; - } - gradient: Gradient { - GradientStop { position: 0.0; color: "gray" } - GradientStop { position: 1.0; color: "white" } - } - } property int dropHorizontalOffset: 0; property int dropVerticalOffset: 1; property int dropRadius: 2; @@ -168,7 +174,7 @@ Rectangle { source: "../../images/snap-icon.svg" width: 40; height: 40; - visible: action === 'snapshot'; + visible: (action === 'snapshot') && (messageHeight >= 40); } RalewayRegular { id: message; @@ -209,7 +215,7 @@ Rectangle { StateImage { id: actionIcon; imageURL: "../../images/info-icon-2-state.svg"; - size: 32; + size: 30; buttonState: messageArea.containsMouse ? 1 : 0; anchors { bottom: parent.bottom; diff --git a/interface/resources/qml/hifi/Feed.qml b/interface/resources/qml/hifi/Feed.qml index d95518b891..8cae42f21c 100644 --- a/interface/resources/qml/hifi/Feed.qml +++ b/interface/resources/qml/hifi/Feed.qml @@ -23,7 +23,15 @@ Column { property int cardWidth: 212; property int cardHeight: 152; - property int stackedCardShadowHeight: 10; + 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 int stackedCardShadowHeight: 4; + property int labelSize: 20; + property string metaverseServerUrl: ''; property string actions: 'snapshot'; onActionsChanged: fillDestinations(); @@ -161,25 +169,27 @@ Column { root.visible = !!suggestions.count; } - RalewayLight { + RalewayBold { id: label; text: labelText; - color: hifi.colors.white; - size: 28; + color: hifi.colors.blueAccent; + size: labelSize; } ListView { id: scroll; - clip: true; + //fixme clip: true; model: suggestions; orientation: ListView.Horizontal; highlightMoveDuration: -1; highlightMoveVelocity: -1; - highlight: Rectangle { color: "transparent"; border.width: 4; border.color: hifiStyleConstants.colors.blueHighlight; z: 1; } + highlight: Rectangle { color: "transparent"; border.width: 4; border.color: hifiStyleConstants.colors.primaryHighlight; z: 1; } + currentIndex: -1; - spacing: 14; + spacing: 12; width: parent.width; height: cardHeight + stackedCardShadowHeight; delegate: Card { + id: card; width: cardWidth; height: cardHeight; goFunction: root.goFunction; @@ -193,7 +203,15 @@ Column { onlineUsers: model.online_users; storyId: model.metaverseId; drillDownToPlace: model.drillDownToPlace; - shadowHeight: stackedCardShadowHeight; + + textPadding: root.textPadding; + smallMargin: root.smallMargin; + messageHeight: root.messageHeight; + textSize: root.textSize; + textSizeSmall: root.textSizeSmall; + stackShadowNarrowing: root.stackShadowNarrowing; + shadowHeight: root.stackedCardShadowHeight; + hoverThunk: function () { scroll.currentIndex = index; } unhoverThunk: function () { scroll.currentIndex = -1; } } diff --git a/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml b/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml index 5578b94168..3ccdd93542 100644 --- a/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml +++ b/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml @@ -154,7 +154,7 @@ StackView { left: parent.left; } - HifiStyles.RalewayLight { + HifiStyles.RalewayRegular { id: notice; font.pixelSize: hifi.fonts.pixelSize * 0.7; anchors { @@ -224,63 +224,73 @@ StackView { Rectangle { id: bgMain; - color: hifiStyleConstants.colors.faintGray50; anchors { top: addressBar.bottom; bottom: parent.keyboardEnabled ? keyboard.top : parent.bottom; left: parent.left; right: parent.right; } - ScrollView { - anchors.fill: bgMain; - horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff; - verticalScrollBarPolicy: Qt.ScrollBarAsNeeded; - Rectangle { // Column margins require QtQuick 2.7, which we don't use yet. - id: column; - property real pad: 10; - width: bgMain.width - column.pad; - height: stack.height; - color: "transparent"; - anchors { - left: parent.left; - leftMargin: column.pad; - topMargin: column.pad; + Rectangle { + id: addressShadow; + width: parent.width; + height: 42 - 33; + gradient: Gradient { + GradientStop { position: 0.0; color: "gray" } + GradientStop { position: 1.0; color: "white" } + } + } + Rectangle { // Column margins require QtQuick 2.7, which we don't use yet. + id: column; + property real pad: 10; + width: bgMain.width - column.pad; + height: stack.height; + color: "transparent"; + anchors { + left: parent.left; + leftMargin: column.pad; + top: addressShadow.bottom; + topMargin: column.pad; + } + Column { + id: stack; + width: column.width; + spacing: 33 - places.labelSize; + Feed { + id: happeningNow; + width: parent.width; + cardWidth: 312 + (2 * 4); + cardHeight: 163 + (2 * 4); + metaverseServerUrl: addressBarDialog.metaverseServerUrl; + labelText: 'HAPPENING NOW'; + actions: 'concurrency,snapshot'; // uncomment this line instead of next to produce fake announcement data for testing. + //actions: 'announcement'; + filter: addressLine.text; + goFunction: goCard; } - Column { - id: stack; - width: column.width; - spacing: column.pad; - Feed { - id: happeningNow; - width: parent.width; - property real cardScale: 1.5; - cardWidth: places.cardWidth * happeningNow.cardScale; - cardHeight: places.cardHeight * happeningNow.cardScale; - metaverseServerUrl: addressBarDialog.metaverseServerUrl; - labelText: 'Happening Now'; - //actions: 'concurrency,snapshot'; // uncomment this line instead of next to produce fake announcement data for testing. - actions: 'announcement'; - filter: addressLine.text; - goFunction: goCard; - } - Feed { - id: places; - width: parent.width; - metaverseServerUrl: addressBarDialog.metaverseServerUrl; - labelText: 'Places'; - actions: 'concurrency'; - filter: addressLine.text; - goFunction: goCard; - } - Feed { - id: snapshots; - width: parent.width; - metaverseServerUrl: addressBarDialog.metaverseServerUrl; - labelText: 'Recent Activity'; - actions: 'snapshot'; - filter: addressLine.text; - goFunction: goCard; - } + Feed { + id: places; + width: parent.width; + cardWidth: 210; + cardHeight: 110 + messageHeight; + messageHeight: 44; + metaverseServerUrl: addressBarDialog.metaverseServerUrl; + labelText: 'PLACES'; + actions: 'concurrency'; + filter: addressLine.text; + goFunction: goCard; + } + Feed { + id: snapshots; + width: parent.width; + cardWidth: 143 + (2 * 4); + cardHeight: 75 + messageHeight + 4; + messageHeight: 32; + textPadding: 6; + metaverseServerUrl: addressBarDialog.metaverseServerUrl; + labelText: 'RECENT SNAPS'; + actions: 'snapshot'; + filter: addressLine.text; + goFunction: goCard; } } } @@ -369,8 +379,8 @@ StackView { notice.text = "Go To a place, @user, path, or network address:"; notice.color = hifiStyleConstants.colors.baseGrayHighlight; } else { - notice.text = AddressManager.isConnected ? "Your location:" : "Not Connected"; - notice.color = AddressManager.isConnected ? hifiStyleConstants.colors.baseGrayHighlight : hifiStyleConstants.colors.redHighlight; + notice.text = AddressManager.isConnected ? "YOUR LOCATION" : "NOT CONNECTED"; + notice.color = AddressManager.isConnected ? hifiStyleConstants.colors.blueHighlight : hifiStyleConstants.colors.redHighlight; // Display hostname, which includes ip address, localhost, and other non-placenames. location.text = (AddressManager.placename || AddressManager.hostname || '') + (AddressManager.pathname ? AddressManager.pathname.match(/\/[^\/]+/)[0] : ''); } From 0ad8f4d985ed7727f9d8cf76bf5d7fec5935c439 Mon Sep 17 00:00:00 2001 From: Howard Stearns Date: Fri, 28 Apr 2017 07:15:22 -0700 Subject: [PATCH 2/2] remove debugging --- interface/resources/qml/hifi/Feed.qml | 3 +-- interface/resources/qml/hifi/tablet/TabletAddressDialog.qml | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/interface/resources/qml/hifi/Feed.qml b/interface/resources/qml/hifi/Feed.qml index 8cae42f21c..b03144644a 100644 --- a/interface/resources/qml/hifi/Feed.qml +++ b/interface/resources/qml/hifi/Feed.qml @@ -126,7 +126,7 @@ Column { } function makeFilteredStoryProcessor() { // answer a function(storyData) that adds it to suggestions if it matches var words = filter.toUpperCase().split(/\s+/).filter(identity); - function suggestable(story) { // fixme add to makeFilteredStoryProcessor + function suggestable(story) { if (story.action === 'snapshot') { return true; } @@ -177,7 +177,6 @@ Column { } ListView { id: scroll; - //fixme clip: true; model: suggestions; orientation: ListView.Horizontal; highlightMoveDuration: -1; diff --git a/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml b/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml index 3ccdd93542..9689583649 100644 --- a/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml +++ b/interface/resources/qml/hifi/tablet/TabletAddressDialog.qml @@ -262,8 +262,8 @@ StackView { cardHeight: 163 + (2 * 4); metaverseServerUrl: addressBarDialog.metaverseServerUrl; labelText: 'HAPPENING NOW'; - actions: 'concurrency,snapshot'; // uncomment this line instead of next to produce fake announcement data for testing. - //actions: 'announcement'; + //actions: 'concurrency,snapshot'; // uncomment this line instead of next to produce fake announcement data for testing. + actions: 'announcement'; filter: addressLine.text; goFunction: goCard; }