Merge pull request #10041 from druiz17/tablet-improve-goto

added left out design elements to the tablet goto page
This commit is contained in:
Seth Alves 2017-03-28 17:19:50 -07:00 committed by GitHub
commit 8dcbf33e16
2 changed files with 72 additions and 49 deletions

View file

@ -80,7 +80,7 @@ Rectangle {
id: lobby; id: lobby;
visible: !hasGif || (animation.status !== Image.Ready); visible: !hasGif || (animation.status !== Image.Ready);
width: parent.width - (isConcurrency ? 0 : (2 * smallMargin)); width: parent.width - (isConcurrency ? 0 : (2 * smallMargin));
height: parent.height - messageHeight - (isConcurrency ? 0 : smallMargin); height: parent.height - (isConcurrency ? 0 : smallMargin);
source: thumbnail || defaultThumbnail; source: thumbnail || defaultThumbnail;
fillMode: Image.PreserveAspectCrop; fillMode: Image.PreserveAspectCrop;
anchors { anchors {
@ -153,45 +153,57 @@ Rectangle {
margins: textPadding; margins: textPadding;
} }
} }
Rectangle {
id: rectRow
z: 1
width: message.width + (users.visible ? users.width + bottomRow.spacing : 0)
+ (icon.visible ? icon.width + bottomRow.spacing: 0) + bottomRow.spacing;
height: messageHeight + 1;
radius: 25
Row { anchors {
FiraSansRegular { bottom: parent.bottom
id: users; left: parent.left
visible: isConcurrency; leftMargin: textPadding
text: onlineUsers; bottomMargin: textPadding
size: textSize;
color: messageColor;
anchors.verticalCenter: message.verticalCenter;
} }
Image {
id: icon; Row {
source: "../../images/snap-icon.svg" id: bottomRow
width: 40; FiraSansRegular {
height: 40; id: users;
visible: action === 'snapshot'; visible: isConcurrency;
} text: onlineUsers;
RalewayRegular { size: textSize;
id: message; color: messageColor;
text: isConcurrency ? ((onlineUsers === 1) ? "person" : "people") : (drillDownToPlace ? "snapshots" : ("by " + userName)); anchors.verticalCenter: message.verticalCenter;
size: textSizeSmall; }
color: messageColor; Image {
elide: Text.ElideRight; // requires a width to be specified` id: icon;
width: root.width - textPadding source: "../../images/snap-icon.svg"
- (users.visible ? users.width + parent.spacing : 0) width: 40;
- (icon.visible ? icon.width + parent.spacing : 0) height: 40;
- (actionIcon.width + (2 * smallMargin)); 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`
anchors {
bottom: parent.bottom;
bottomMargin: parent.spacing;
}
}
spacing: textPadding;
height: messageHeight;
anchors { anchors {
bottom: parent.bottom; bottom: parent.bottom;
bottomMargin: parent.spacing; left: parent.left;
leftMargin: 4
} }
} }
spacing: textPadding;
height: messageHeight;
anchors {
bottom: parent.bottom;
left: parent.left;
leftMargin: textPadding;
}
} }
// These two can be supplied to provide hover behavior. // These two can be supplied to provide hover behavior.
// For example, AddressBarDialog provides functions that set the current list view item // For example, AddressBarDialog provides functions that set the current list view item
@ -206,15 +218,29 @@ Rectangle {
onEntered: hoverThunk(); onEntered: hoverThunk();
onExited: unhoverThunk(); onExited: unhoverThunk();
} }
StateImage { Rectangle {
id: actionIcon; id: rectIcon
imageURL: "../../images/info-icon-2-state.svg"; z: 1
size: 32; width: 32
buttonState: messageArea.containsMouse ? 1 : 0; height: 32
radius: 15
anchors { anchors {
bottom: parent.bottom; bottom: parent.bottom;
right: parent.right; right: parent.right;
margins: smallMargin; bottomMargin: textPadding;
rightMargin: textPadding;
}
StateImage {
id: actionIcon;
imageURL: "../../images/info-icon-2-state.svg";
size: 32;
buttonState: messageArea.containsMouse ? 1 : 0;
anchors {
bottom: parent.bottom;
right: parent.right;
//margins: smallMargin;
}
} }
} }
DropShadow { DropShadow {
@ -225,11 +251,9 @@ Rectangle {
} }
MouseArea { MouseArea {
id: messageArea; id: messageArea;
width: parent.width; width: rectIcon.width;
height: messageHeight; height: rectIcon.height;
anchors { anchors.fill: rectIcon
top: lobby.bottom;
}
acceptedButtons: Qt.LeftButton; acceptedButtons: Qt.LeftButton;
onClicked: goFunction(drillDownToPlace ? ("/places/" + placeName) : ("/user_stories/" + storyId)); onClicked: goFunction(drillDownToPlace ? ("/places/" + placeName) : ("/user_stories/" + storyId));
hoverEnabled: true; hoverEnabled: true;

View file

@ -137,12 +137,11 @@ StackView {
id: addressBar id: addressBar
width: 480 width: 480
height: 70 height: 70
color: hifiStyleConstants.colors.white
anchors { anchors {
top: navBar.bottom top: navBar.bottom
right: parent.right right: parent.right
rightMargin: 16
left: parent.left left: parent.left
leftMargin: 16
} }
property int inputAreaHeight: 70 property int inputAreaHeight: 70
@ -174,8 +173,8 @@ StackView {
bottom: parent.bottom bottom: parent.bottom
left: parent.left left: parent.left
right: parent.right right: parent.right
leftMargin: 0 leftMargin: 16
rightMargin: 0 rightMargin: 16
topMargin: parent.inputAreaStep + (2 * hifi.layout.spacing) topMargin: parent.inputAreaStep + (2 * hifi.layout.spacing)
bottomMargin: parent.inputAreaStep bottomMargin: parent.inputAreaStep
} }