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] : ''); }