Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-08-10 04:06:41 +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 width: addressBarDialog.implicitWidth
height: addressBarDialog.implicitHeight height: addressBarDialog.implicitHeight
property int gap: 14
onShownChanged: { onShownChanged: {
addressBarDialog.keyboardEnabled = HMD.active; addressBarDialog.keyboardEnabled = HMD.active;
@ -65,7 +66,7 @@ Window {
clearAddressLineTimer.start(); clearAddressLineTimer.start();
} }
property var allStories: []; property var allStories: [];
property int cardWidth: 200; property int cardWidth: 212;
property int cardHeight: 152; property int cardHeight: 152;
property string metaverseBase: addressBarDialog.metaverseServerUrl + "/api/v1/"; property string metaverseBase: addressBarDialog.metaverseServerUrl + "/api/v1/";
property bool isCursorVisible: false // Override default cursor visibility. property bool isCursorVisible: false // Override default cursor visibility.
@ -78,7 +79,7 @@ Window {
property bool punctuationMode: false property bool punctuationMode: false
implicitWidth: backgroundImage.width 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 // 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; onBackEnabledChanged: backArrow.buttonState = addressBarDialog.backEnabled ? 1 : 0;
@ -93,8 +94,9 @@ Window {
ListView { ListView {
id: scroll id: scroll
width: backgroundImage.width; width: backgroundImage.width;
height: cardHeight; height: cardHeight + scroll.stackedCardShadowHeight
spacing: hifi.layout.spacing; property int stackedCardShadowHeight: 20;
spacing: gap;
clip: true; clip: true;
anchors { anchors {
bottom: backgroundImage.top bottom: backgroundImage.top
@ -115,6 +117,7 @@ Window {
onlineUsers: model.online_users; onlineUsers: model.online_users;
storyId: model.metaverseId; storyId: model.metaverseId;
drillDownToPlace: model.drillDownToPlace; drillDownToPlace: model.drillDownToPlace;
shadowHeight: scroll.stackedCardShadowHeight;
hoverThunk: function () { ListView.view.currentIndex = index; } hoverThunk: function () { ListView.view.currentIndex = index; }
unhoverThunk: function () { ListView.view.currentIndex = -1; } unhoverThunk: function () { ListView.view.currentIndex = -1; }
} }
@ -137,7 +140,7 @@ Window {
anchors { anchors {
top: parent.top; top: parent.top;
left: parent.left; left: parent.left;
leftMargin: 75; leftMargin: 150;
topMargin: -35; topMargin: -35;
} }
property var selected: allTab; property var selected: allTab;

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

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