Mirrors/overte-JulianGro
3
0
Fork 0
mirror of https://github.com/JulianGro/overte.git synced 2025-04-15 19:08:17 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #10315 from howard-stearns/address-bar-ux

Browse source 
address bar ux
This commit is contained in:
Howard Stearns 2017-04-28 07:21:53 -07:00 committed by GitHub
commit e0282f63f3
3 changed files with 127 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
interface/resources/qml/hifi/Card.qml
View file

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

35
interface/resources/qml/hifi/Feed.qml
View file

@ -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();
@ -118,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;
}
@ -161,25 +169,26 @@ 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;
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 +202,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; }
}

116
interface/resources/qml/hifi/tablet/TabletAddressDialog.qml
View file

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