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,8 +153,23 @@ 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
anchors {
bottom: parent.bottom
left: parent.left
leftMargin: textPadding
bottomMargin: textPadding
}
Row { Row {
id: bottomRow
FiraSansRegular { FiraSansRegular {
id: users; id: users;
visible: isConcurrency; visible: isConcurrency;
@ -176,10 +191,6 @@ Rectangle {
size: textSizeSmall; size: textSizeSmall;
color: messageColor; color: messageColor;
elide: Text.ElideRight; // requires a width to be specified` 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 { anchors {
bottom: parent.bottom; bottom: parent.bottom;
bottomMargin: parent.spacing; bottomMargin: parent.spacing;
@ -190,7 +201,8 @@ Rectangle {
anchors { anchors {
bottom: parent.bottom; bottom: parent.bottom;
left: parent.left; left: parent.left;
leftMargin: textPadding; leftMargin: 4
}
} }
} }
// These two can be supplied to provide hover behavior. // These two can be supplied to provide hover behavior.
@ -206,6 +218,19 @@ Rectangle {
onEntered: hoverThunk(); onEntered: hoverThunk();
onExited: unhoverThunk(); onExited: unhoverThunk();
} }
Rectangle {
id: rectIcon
z: 1
width: 32
height: 32
radius: 15
anchors {
bottom: parent.bottom;
right: parent.right;
bottomMargin: textPadding;
rightMargin: textPadding;
}
StateImage { StateImage {
id: actionIcon; id: actionIcon;
imageURL: "../../images/info-icon-2-state.svg"; imageURL: "../../images/info-icon-2-state.svg";
@ -214,7 +239,8 @@ Rectangle {
anchors { anchors {
bottom: parent.bottom; bottom: parent.bottom;
right: parent.right; right: parent.right;
margins: smallMargin; //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
} }