Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-04-20 03:24:00 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

styling

Browse source
This commit is contained in:
howard-stearns 2016-11-15 14:12:27 -08:00
parent 6078b833a1
commit 9809515853
3 changed files with 100 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
interface/resources/qml/AddressBarDialog.qml
View file

@ -33,6 +33,7 @@ Window {
width: addressBarDialog.implicitWidth
height: addressBarDialog.implicitHeight
property int gap: 14
onShownChanged: {
addressBarDialog.keyboardEnabled = HMD.active;
@ -65,7 +66,7 @@ Window {
clearAddressLineTimer.start();
}
property var allStories: [];
property int cardWidth: 200;
property int cardWidth: 212;
property int cardHeight: 152;
property string metaverseBase: addressBarDialog.metaverseServerUrl + "/api/v1/";
property bool isCursorVisible: false // Override default cursor visibility.
@ -78,7 +79,7 @@ Window {
property bool punctuationMode: false
implicitWidth: backgroundImage.width
implicitHeight: backgroundImage.height + (keyboardEnabled ? keyboard.height : 0) + cardHeight;
implicitHeight: scroll.height + backgroundImage.height + (keyboardEnabled ? keyboard.height : 0);
// The buttons have their button state changed on hover, so we have to manually fix them up here
onBackEnabledChanged: backArrow.buttonState = addressBarDialog.backEnabled ? 1 : 0;
@ -93,8 +94,9 @@ Window {
ListView {
id: scroll
width: backgroundImage.width;
height: cardHeight;
spacing: hifi.layout.spacing;
height: cardHeight + scroll.stackedCardShadowHeight
property int stackedCardShadowHeight: 20;
spacing: gap;
clip: true;
anchors {
bottom: backgroundImage.top
@ -115,6 +117,7 @@ Window {
onlineUsers: model.online_users;
storyId: model.metaverseId;
drillDownToPlace: model.drillDownToPlace;
shadowHeight: scroll.stackedCardShadowHeight;
hoverThunk: function () { ListView.view.currentIndex = index; }
unhoverThunk: function () { ListView.view.currentIndex = -1; }
}
@ -137,7 +140,7 @@ Window {
anchors {
top: parent.top;
left: parent.left;
leftMargin: 75;
leftMargin: 150;
topMargin: -35;
}
property var selected: allTab;

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

@ -28,13 +28,19 @@ Rectangle {
property string storyId: "";
property bool drillDownToPlace: false;
property bool showPlace: isConcurrency;
property string messageColor: "#1DB5ED";
property string timePhrase: pastTime(timestamp);
property int onlineUsers: 0;
property bool isConcurrency: action === 'concurrency';
property bool isStacked: !isConcurrency && drillDownToPlace;
property int textPadding: 10;
property int messageHeight: 40;
property int textSize: 24;
property int textSizeSmall: 18;
property string defaultThumbnail: Qt.resolvedUrl("../../images/default-domain.gif");
property int shadowHeight: 20;
HifiConstants { id: hifi }
function pastTime(timestamp) { // Answer a descriptive string
@ -60,13 +66,16 @@ Rectangle {
Image {
id: lobby;
width: parent.width;
height: parent.height;
width: parent.width - (isConcurrency ? 0 : 8);
height: parent.height - messageHeight - (isConcurrency ? 0 : 4);
source: thumbnail || defaultThumbnail;
fillMode: Image.PreserveAspectCrop;
// source gets filled in later
anchors.verticalCenter: parent.verticalCenter;
anchors.left: parent.left;
anchors {
horizontalCenter: parent.horizontalCenter;
top: parent.top;
topMargin: isConcurrency ? 0 : 4;
}
onStatusChanged: {
if (status == Image.Error) {
console.log("source: " + source + ": failed to load " + hifiUrl);
@ -74,13 +83,41 @@ Rectangle {
}
}
}
Rectangle {
id: shadow1;
visible: isStacked;
width: parent.width - 5;
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 - 5;
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;
property int dropSamples: 9;
property int dropSpread: 0;
DropShadow {
visible: desktop.gradientsSupported;
visible: showPlace && desktop.gradientsSupported;
source: place;
anchors.fill: place;
horizontalOffset: dropHorizontalOffset;
@ -90,19 +127,9 @@ Rectangle {
color: hifi.colors.black;
spread: dropSpread;
}
DropShadow {
visible: users.visible && desktop.gradientsSupported;
source: users;
anchors.fill: users;
horizontalOffset: dropHorizontalOffset;
verticalOffset: dropVerticalOffset;
radius: dropRadius;
samples: dropSamples;
color: hifi.colors.black;
spread: dropSpread;
}
RalewaySemiBold {
id: place;
visible: showPlace;
text: placeName;
color: hifi.colors.white;
size: textSize;
@ -112,15 +139,31 @@ Rectangle {
margins: textPadding;
}
}
FiraSansRegular {
id: users;
text: (action === 'concurrency') ? onlineUsers : ('snapshot' + (drillDownToPlace ? 's' : ''));
size: (action === 'concurrency') ? textSize : textSizeSmall;
color: hifi.colors.white;
Row {
FiraSansRegular {
id: users;
visible: isConcurrency;
text: onlineUsers;
size: textSize;
color: messageColor;
anchors.verticalCenter: message.verticalCenter;
}
RalewaySemiBold {
id: message;
text: isConcurrency ? ((onlineUsers === 1) ? "person" : "people") : (drillDownToPlace ? "snapshots" : ("by " + userName));
size: textSizeSmall;
color: messageColor;
anchors {
bottom: parent.bottom;
bottomMargin: parent.spacing;
}
}
spacing: textPadding;
height: messageHeight;
anchors {
verticalCenter: usersImage.verticalCenter;
right: usersImage.left;
margins: textPadding;
bottom: parent.bottom;
left: parent.left;
leftMargin: textPadding;
}
}
// These two can be supplied to provide hover behavior.
@ -129,7 +172,6 @@ Rectangle {
property var hoverThunk: function () { };
property var unhoverThunk: function () { };
MouseArea {
id: zmouseArea;
anchors.fill: parent;
acceptedButtons: Qt.LeftButton;
onClicked: goFunction("hifi://" + hifiUrl);
@ -137,18 +179,27 @@ Rectangle {
onEntered: hoverThunk();
onExited: unhoverThunk();
}
ToolbarButton {
id: usersImage;
StateImage {
id: actionIcon;
imageURL: "../../images/" + action + ".svg";
size: 32;
onClicked: goFunction(drillDownToPlace ? ("/places/" + placeName) : ("/user_stories/" + storyId));
buttonState: 0;
defaultState: 0;
hoverState: 1;
buttonState: 1;
anchors {
bottom: parent.bottom;
right: parent.right;
margins: textPadding;
margins: 4;
}
}
MouseArea {
width: parent.width;
height: messageHeight;
anchors {
top: lobby.bottom;
}
acceptedButtons: Qt.LeftButton;
onClicked: goFunction(drillDownToPlace ? ("/places/" + placeName) : ("/user_stories/" + storyId));
hoverEnabled: true;
onEntered: actionIcon.buttonState = 0;
onExited: actionIcon.buttonState = 1;
}
}

16
interface/resources/qml/hifi/TextButton.qml
View file

@ -17,27 +17,29 @@ Rectangle {
property bool selected: false;
property int spacing: 2;
property var action: function () { };
width: label.width + (4 * spacing);
height: label.height + spacing;
radius: 2 * spacing;
color: selected ? "grey" : "transparent";
property string highlightColor: "#1DB5ED";
width: label.width + 64;
height: 32;
radius: height / 2;
border.width: (clickArea.containsMouse && !clickArea.containsPress) ? 4 : 0;
border.color: highlightColor;
color: clickArea.containsPress ? hifi.colors.darkGray : (selected ? highlightColor : "transparent");
HifiConstants { id: hifi; }
RalewaySemiBold {
id: label;
color: hifi.colors.white;
font.pixelSize: 25;
font.pixelSize: 20;
anchors {
horizontalCenter: parent.horizontalCenter;
verticalCenter: parent.verticalCenter;
}
}
MouseArea {
id: clickArea;
anchors.fill: parent;
acceptedButtons: Qt.LeftButton;
onClicked: action(parent);
hoverEnabled: true;
onEntered: label.color = "#1DB5ED";
onExited: label.color = hifi.colors.white;
}
}