Mirrors/overte-AleziaKurdis
3
0
Fork 0
mirror of https://github.com/AleziaKurdis/overte.git synced 2025-08-27 08:26:22 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

overriding colors at tablet buttons instantiation

Browse source
This commit is contained in:
Faye Li 2016-12-13 12:34:38 -08:00
parent dc72a0fd2f
commit 8fcc42e537
2 changed files with 166 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,25 +1,129 @@
import QtQuick 2.0
import "../../styles-uit/"
Item {
id: item1
id: tablet
width: 480
height: 720
Rectangle {
id: bg
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
id: bgAudio
height: 90
gradient: Gradient {
GradientStop {
position: 0
color: "#6b6b6b"
}
GradientStop {
position: 1
color: "#595959"
}
}
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: parent.top
anchors.topMargin: 0
anchors.top: parent.top
Row {
id: rowAudio1
height: parent.height
anchors.topMargin: 0
anchors.top: parent.top
anchors.leftMargin: 30
anchors.left: parent.left
anchors.rightMargin: 30
anchors.right: parent.right
spacing: 10
Rectangle {
id: muteButton
width: 128
height: 40
color: "#464646"
anchors.verticalCenter: parent.verticalCenter
Text {
id: muteText
color: "#ffffff"
text: "MUTE"
z: 1
verticalAlignment: Text.AlignVCenter
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: 16
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignHCenter
font.bold: true
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: {
console.log("Mute Botton Hovered!");
parent.color = "#2d2d2d";
}
onExited: {
console.log("Mute Botton Unhovered!");
parent.color = "#464646";
}
onClicked: {
console.log("Mute Button Clicked! current tablet state: " + tablet.state );
if (tablet.state === "muted state") {
tablet.state = "base state";
} else {
tablet.state = "muted state";
}
}
}
}
Image {
id: muteIcon
width: 40
height: 40
source: "../../../icons/tablet-mute-icon.svg"
anchors.verticalCenter: parent.verticalCenter
}
Rectangle {
id: audioBarBase
color: "#333333"
radius: 5
width: 225
height: 10
anchors.verticalCenter: parent.verticalCenter
Rectangle {
id: audioBarColor
radius: 5
anchors.verticalCenterOffset: 0
anchors.left: parent.left
anchors.leftMargin: 85
anchors.verticalCenter: parent.verticalCenter
rotation: -90
gradient: Gradient {
GradientStop {
position: 0
color: "#00b8ff"
}
GradientStop {
position: 1
color: "#ff2d73"
}
}
width: parent.height
height: parent.width*0.8
}
}
}
}
Rectangle {
id: bgMain
gradient: Gradient {
GradientStop {
position: 0
color: "#7c7c7c"
color: "#787878"
}
GradientStop {
@ -27,50 +131,61 @@ Item {
color: "#000000"
}
}
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
anchors.top: bgAudio.bottom
anchors.topMargin: 0
Flow {
id: flow
id: flowMain
spacing: 12
anchors.right: parent.right
anchors.rightMargin: 17
anchors.rightMargin: 30
anchors.left: parent.left
anchors.leftMargin: 17
anchors.leftMargin: 30
anchors.bottom: parent.bottom
anchors.bottomMargin: 8
anchors.bottomMargin: 30
anchors.top: parent.top
anchors.topMargin: 123
}
Image {
id: muteIcon
x: 205
width: 70
height: 70
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 28
fillMode: Image.Stretch
source: "../../../icons/circle.svg"
RalewaySemiBold {
id: muteText
x: 15
y: 27
color: "#ffffff"
text: qsTr("MUTE")
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 14
}
anchors.topMargin: 30
}
Component.onCompleted: {
console.log("AJT: Tablet.onCompleted!");
// AJT: test flow by adding buttons
var component = Qt.createComponent("TabletButton.qml");
for (var i = 0; i < 10; i++) {
component.createObject(flow);
var buttons = [];
for (var i = 0; i < 9; i++) {
buttons.push(component.createObject(flowMain));
}
var green = "#1fc6a6";
var lightblue = "#1DB5EC";
buttons[3].color = lightblue;
buttons[4].color = lightblue;
buttons[5].color = lightblue;
buttons[6].color = green;
buttons[7].color = green;
buttons[8].color = green;
}
}
states: [
State {
name: "muted state"
PropertyChanges {
target: muteText
text: "UNMUTE"
}
PropertyChanges {
target: muteIcon
source: "../../../icons/tablet-unmute-icon.svg"
}
}
]
}

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

@ -1,28 +1,32 @@
import QtQuick 2.0
import "../../styles-uit/"
Rectangle {
id: tabletButton
width: 140
height: 140
color: "#1794c3"
width: 132
height: 132
color: "#1d94c3"
Image {
id: icon
x: 40
y: 30
width: 60
height: 60
fillMode: Image.Stretch
anchors.bottom: text.top
anchors.bottomMargin: 3
anchors.horizontalCenterOffset: 0
anchors.horizontalCenter: parent.horizontalCenter
source: "../../../icons/edit-icon.svg"
}
RalewaySemiBold {
Text {
id: text
x: 50
y: 96
color: "#ffffff"
text: qsTr("EDIT")
horizontalAlignment: Text.AlignHCenter
text: "EDIT"
font.bold: true
font.pixelSize: 18
anchors.bottom: parent.bottom
anchors.bottomMargin: 20
anchors.horizontalCenter: parent.horizontalCenter
horizontalAlignment: Text.AlignHCenter
}
}