Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-07-23 10:03:58 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

New color scheme and button state styling

Browse source
This commit is contained in:
Faye Li Si Fi 2016-12-16 11:50:04 -08:00
parent c6d7894f52
commit 5200dd9581
2 changed files with 138 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
interface/resources/qml/hifi/tablet/Tablet.qml
View file

@ -49,17 +49,17 @@ Item {
} }
Rectangle { Rectangle {
id: bgAudio id: bgTopBar
height: 90 height: 90
gradient: Gradient { gradient: Gradient {
GradientStop { GradientStop {
position: 0 position: 0
color: "#6b6b6b" color: "#2b2b2b"
} }
GradientStop { GradientStop {
position: 1 position: 1
color: "#595959" color: "#1e1e1e"
} }
} }
anchors.right: parent.right anchors.right: parent.right
@ -80,49 +80,49 @@ Item {
anchors.right: parent.right anchors.right: parent.right
spacing: 5 spacing: 5
Rectangle { // Rectangle {
id: muteButton // id: muteButton
width: 128 // width: 128
height: 40 // height: 40
color: "#464646" // color: "#464646"
anchors.verticalCenter: parent.verticalCenter // anchors.verticalCenter: parent.verticalCenter
Text { // Text {
id: muteText // id: muteText
color: "#ffffff" // color: "#ffffff"
text: "MUTE" // text: "MUTE"
z: 1 // z: 1
verticalAlignment: Text.AlignVCenter // verticalAlignment: Text.AlignVCenter
anchors.horizontalCenter: parent.horizontalCenter // anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: 16 // font.pixelSize: 16
anchors.verticalCenter: parent.verticalCenter // anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignHCenter // horizontalAlignment: Text.AlignHCenter
font.bold: true // font.bold: true
} // }
MouseArea { // MouseArea {
anchors.fill: parent // anchors.fill: parent
hoverEnabled: true // hoverEnabled: true
onEntered: { // onEntered: {
console.log("Mute Botton Hovered!"); // console.log("Mute Botton Hovered!");
parent.color = "#2d2d2d"; // parent.color = "#2d2d2d";
parent.border.width = 2; // parent.border.width = 2;
parent.border.color = "#ffffff"; // parent.border.color = "#ffffff";
} // }
onExited: { // onExited: {
console.log("Mute Botton Unhovered!"); // console.log("Mute Botton Unhovered!");
parent.color = "#464646"; // parent.color = "#464646";
parent.border.width = 0; // parent.border.width = 0;
} // }
onClicked: { // onClicked: {
console.log("Mute Button Clicked! current tablet state: " + tablet.state ); // console.log("Mute Button Clicked! current tablet state: " + tablet.state );
if (tablet.state === "muted state") { // if (tablet.state === "muted state") {
tablet.state = "base state"; // tablet.state = "base state";
} else { // } else {
tablet.state = "muted state"; // tablet.state = "muted state";
} // }
} // }
} // }
} // }
Image { Image {
id: muteIcon id: muteIcon
@ -180,13 +180,13 @@ Item {
gradient: Gradient { gradient: Gradient {
GradientStop { GradientStop {
position: 0 position: 0
color: "#787878" color: "#2b2b2b"
} }
GradientStop { GradientStop {
position: 1 position: 1
color: "#000000" color: "#0f212e"
} }
} }
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
@ -195,12 +195,12 @@ Item {
anchors.rightMargin: 0 anchors.rightMargin: 0
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 0 anchors.leftMargin: 0
anchors.top: bgAudio.bottom anchors.top: bgTopBar.bottom
anchors.topMargin: 0 anchors.topMargin: 0
Flow { Flow {
id: flowMain id: flowMain
spacing: 12 spacing: 16
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 30 anchors.rightMargin: 30
anchors.left: parent.left anchors.left: parent.left
@ -215,30 +215,25 @@ Item {
console.log("Tablet.onCompleted!"); console.log("Tablet.onCompleted!");
var component = Qt.createComponent("TabletButton.qml"); var component = Qt.createComponent("TabletButton.qml");
var buttons = []; var buttons = [];
for (var i = 0; i < 9; i++) { for (var i = 0; i < 11; i++) {
buttons.push(component.createObject(flowMain)); buttons.push(component.createObject(flowMain));
} }
// set button color
var green = "#1FC6A6";
var lightblue = "#00B4EF";
buttons[3].color = lightblue;
buttons[4].color = lightblue;
buttons[5].color = lightblue;
buttons[6].color = green;
buttons[7].color = green;
buttons[8].color = green;
// set button text // set button text
buttons[0].text = "GO TO"; buttons[0].text = "MUTE";
buttons[1].text = "BUBBLE"; buttons[1].text = "VR";
buttons[2].text = "MENU"; buttons[2].text = "MENU";
buttons[3].text = "MARKET"; buttons[3].text = "BUBBLE";
buttons[4].text = "SWITCH"; buttons[4].text = "SNAP";
buttons[5].text = "PAUSE"; buttons[5].text = "HELP";
buttons[6].text = "EDIT"; buttons[6].text = "PEOPLE";
buttons[7].text = "SNAP"; buttons[7].text = "GOTO";
buttons[8].text = "SCRIPTS"; buttons[8].text = "MARKET";
buttons[9].text = "EDIT";
buttons[10].text = "SCRIPTS";
// set button icon
buttons[0].icon = "icons/tablet-mute-icon.svg"
} }
} }
states: [ states: [

102
interface/resources/qml/hifi/tablet/TabletButton.qml
View file

@ -3,12 +3,11 @@ import QtGraphicalEffects 1.0
Item { Item {
id: tabletButton id: tabletButton
property string color: "#1080B8"
property string text: "EDIT" property string text: "EDIT"
property string icon: "icons/edit-icon.svg" property string icon: "icons/edit-icon.svg"
property var uuid; property bool isActive: false
width: 132 width: 129
height: 132 height: 129
signal clicked() signal clicked()
@ -18,9 +17,9 @@ Item {
Rectangle { Rectangle {
id: buttonBg id: buttonBg
color: tabletButton.color color: "#2b2b2b"
border.width: 0 opacity: 0.2
border.color: "#00000000" radius: 8
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 0 anchors.rightMargin: 0
anchors.left: parent.left anchors.left: parent.left
@ -31,10 +30,30 @@ Item {
anchors.topMargin: 0 anchors.topMargin: 0
} }
Rectangle {
id: buttonOutline
color: "#00000000"
opacity: 0.2
radius: 8
z: 1
border.width: 2
border.color: "#ffffff"
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.top: parent.top
anchors.topMargin: 0
}
Image { Image {
id: icon id: icon
width: 60 width: 60
height: 60 height: 60
visible: false
anchors.bottom: text.top anchors.bottom: text.top
anchors.bottomMargin: 5 anchors.bottomMargin: 5
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
@ -42,6 +61,13 @@ Item {
source: "../../../" + tabletButton.icon source: "../../../" + tabletButton.icon
} }
ColorOverlay {
id: iconColorOverlay
anchors.fill: icon
source: icon
color: "#ffffff"
}
Text { Text {
id: text id: text
color: "#ffffff" color: "#ffffff"
@ -54,29 +80,31 @@ Item {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
} }
DropShadow {
id: dropshadow
anchors.fill: parent
horizontalOffset: 0
verticalOffset: 3
color: "#aa000000"
radius: 20
z: -1
samples: 41
source: buttonBg
}
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
onClicked: tabletButton.clicked(); onClicked: {
console.log("Tablet Button Clicked!");
if (tabletButton.isActive) {
tabletButton.state = "base state";
tabletButton.isActive = false;
} else {
tabletButton.state = "active state";
tabletButton.isActive = true;
}
tabletButton.clicked();
}
onEntered: { onEntered: {
console.log("Tablet Button Hovered!"); console.log("Tablet Button Hovered!");
tabletButton.state = "hover state"; tabletButton.state = "hover state";
} }
onExited: { onExited: {
console.log("Tablet Button Unhovered!"); console.log("Tablet Button Unhovered!");
tabletButton.state = "base state"; if (tabletButton.isActive) {
tabletButton.state = "active state";
} else {
tabletButton.state = "base state";
}
} }
} }
@ -85,14 +113,34 @@ Item {
name: "hover state" name: "hover state"
PropertyChanges { PropertyChanges {
target: buttonBg target: buttonOutline
border.width: 2 border.color: "#1fc6a6"
border.color: "#ffffff" opacity: 1
} }
},
State {
name: "active state"
PropertyChanges { PropertyChanges {
target: dropshadow target: buttonOutline
verticalOffset: 0 border.color: "#1fc6a6"
color: "#ffffff" opacity: 1
}
PropertyChanges {
target: buttonBg
color: "#1fc6a6"
opacity: 1
}
PropertyChanges {
target: text
color: "#333333"
}
PropertyChanges {
target: iconColorOverlay
color: "#333333"
} }
} }
] ]