diff --git a/interface/resources/qml/hifi/tablet/Tablet.qml b/interface/resources/qml/hifi/tablet/Tablet.qml index 7dedecc303..b82138af95 100644 --- a/interface/resources/qml/hifi/tablet/Tablet.qml +++ b/interface/resources/qml/hifi/tablet/Tablet.qml @@ -49,17 +49,17 @@ Item { } Rectangle { - id: bgAudio + id: bgTopBar height: 90 gradient: Gradient { GradientStop { position: 0 - color: "#6b6b6b" + color: "#2b2b2b" } GradientStop { position: 1 - color: "#595959" + color: "#1e1e1e" } } anchors.right: parent.right @@ -80,49 +80,49 @@ Item { anchors.right: parent.right spacing: 5 - 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"; - parent.border.width = 2; - parent.border.color = "#ffffff"; - } - onExited: { - console.log("Mute Botton Unhovered!"); - parent.color = "#464646"; - parent.border.width = 0; - } +// 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"; +// parent.border.width = 2; +// parent.border.color = "#ffffff"; +// } +// onExited: { +// console.log("Mute Botton Unhovered!"); +// parent.color = "#464646"; +// parent.border.width = 0; +// } - 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"; - } - } - } - } +// 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 @@ -180,13 +180,13 @@ Item { gradient: Gradient { GradientStop { position: 0 - color: "#787878" + color: "#2b2b2b" } GradientStop { position: 1 - color: "#000000" + color: "#0f212e" } } anchors.bottom: parent.bottom @@ -195,12 +195,12 @@ Item { anchors.rightMargin: 0 anchors.left: parent.left anchors.leftMargin: 0 - anchors.top: bgAudio.bottom + anchors.top: bgTopBar.bottom anchors.topMargin: 0 Flow { id: flowMain - spacing: 12 + spacing: 16 anchors.right: parent.right anchors.rightMargin: 30 anchors.left: parent.left @@ -215,30 +215,25 @@ Item { console.log("Tablet.onCompleted!"); var component = Qt.createComponent("TabletButton.qml"); var buttons = []; - for (var i = 0; i < 9; i++) { + for (var i = 0; i < 11; i++) { 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 - buttons[0].text = "GO TO"; - buttons[1].text = "BUBBLE"; + buttons[0].text = "MUTE"; + buttons[1].text = "VR"; buttons[2].text = "MENU"; - buttons[3].text = "MARKET"; - buttons[4].text = "SWITCH"; - buttons[5].text = "PAUSE"; - buttons[6].text = "EDIT"; - buttons[7].text = "SNAP"; - buttons[8].text = "SCRIPTS"; + buttons[3].text = "BUBBLE"; + buttons[4].text = "SNAP"; + buttons[5].text = "HELP"; + buttons[6].text = "PEOPLE"; + buttons[7].text = "GOTO"; + buttons[8].text = "MARKET"; + buttons[9].text = "EDIT"; + buttons[10].text = "SCRIPTS"; + + // set button icon + buttons[0].icon = "icons/tablet-mute-icon.svg" } } states: [ diff --git a/interface/resources/qml/hifi/tablet/TabletButton.qml b/interface/resources/qml/hifi/tablet/TabletButton.qml index 3c12130d2e..fd1c170f4d 100644 --- a/interface/resources/qml/hifi/tablet/TabletButton.qml +++ b/interface/resources/qml/hifi/tablet/TabletButton.qml @@ -3,12 +3,11 @@ import QtGraphicalEffects 1.0 Item { id: tabletButton - property string color: "#1080B8" property string text: "EDIT" property string icon: "icons/edit-icon.svg" - property var uuid; - width: 132 - height: 132 + property bool isActive: false + width: 129 + height: 129 signal clicked() @@ -18,9 +17,9 @@ Item { Rectangle { id: buttonBg - color: tabletButton.color - border.width: 0 - border.color: "#00000000" + color: "#2b2b2b" + opacity: 0.2 + radius: 8 anchors.right: parent.right anchors.rightMargin: 0 anchors.left: parent.left @@ -31,10 +30,30 @@ Item { 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 { id: icon width: 60 height: 60 + visible: false anchors.bottom: text.top anchors.bottomMargin: 5 anchors.horizontalCenter: parent.horizontalCenter @@ -42,6 +61,13 @@ Item { source: "../../../" + tabletButton.icon } + ColorOverlay { + id: iconColorOverlay + anchors.fill: icon + source: icon + color: "#ffffff" + } + Text { id: text color: "#ffffff" @@ -54,29 +80,31 @@ Item { horizontalAlignment: Text.AlignHCenter } - DropShadow { - id: dropshadow - anchors.fill: parent - horizontalOffset: 0 - verticalOffset: 3 - color: "#aa000000" - radius: 20 - z: -1 - samples: 41 - source: buttonBg - } - MouseArea { anchors.fill: parent 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: { console.log("Tablet Button Hovered!"); tabletButton.state = "hover state"; } onExited: { 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" PropertyChanges { - target: buttonBg - border.width: 2 - border.color: "#ffffff" + target: buttonOutline + border.color: "#1fc6a6" + opacity: 1 } + }, + State { + name: "active state" + PropertyChanges { - target: dropshadow - verticalOffset: 0 - color: "#ffffff" + target: buttonOutline + border.color: "#1fc6a6" + opacity: 1 + } + + PropertyChanges { + target: buttonBg + color: "#1fc6a6" + opacity: 1 + } + + PropertyChanges { + target: text + color: "#333333" + } + + PropertyChanges { + target: iconColorOverlay + color: "#333333" } } ]