From 5200dd9581c7ddee6b8861753e7c0a203b00f0ad Mon Sep 17 00:00:00 2001 From: Faye Li Si Fi Date: Fri, 16 Dec 2016 11:50:04 -0800 Subject: [PATCH 1/5] New color scheme and button state styling --- .../resources/qml/hifi/tablet/Tablet.qml | 131 +++++++++--------- .../qml/hifi/tablet/TabletButton.qml | 102 ++++++++++---- 2 files changed, 138 insertions(+), 95 deletions(-) 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" } } ] From 4d98f6979c85e14e6eeead62426169e1914d53c1 Mon Sep 17 00:00:00 2001 From: Faye Li Si Fi Date: Fri, 16 Dec 2016 13:43:47 -0800 Subject: [PATCH 2/5] hover state glow --- .../qml/hifi/tablet/TabletButton.qml | 75 +++++++++++++++++-- 1 file changed, 70 insertions(+), 5 deletions(-) diff --git a/interface/resources/qml/hifi/tablet/TabletButton.qml b/interface/resources/qml/hifi/tablet/TabletButton.qml index fd1c170f4d..957e6f0421 100644 --- a/interface/resources/qml/hifi/tablet/TabletButton.qml +++ b/interface/resources/qml/hifi/tablet/TabletButton.qml @@ -17,8 +17,8 @@ Item { Rectangle { id: buttonBg - color: "#2b2b2b" - opacity: 0.2 + color: "#000000" + opacity: 0.1 radius: 8 anchors.right: parent.right anchors.rightMargin: 0 @@ -48,11 +48,36 @@ Item { anchors.topMargin: 0 } +// DropShadow { +// id: dropshadow +// anchors.fill: parent +// horizontalOffset: 0 +// verticalOffset: 3 +// color: "#aa000000" +// radius: 20 +// z: -1 +// samples: 41 +// source: buttonBg +// } + + DropShadow { + id: glow + visible: false + anchors.fill: parent + horizontalOffset: 0 + verticalOffset: 0 + color: "#ffffff" + radius: 20 + z: -1 + samples: 41 + source: buttonOutline + } + Image { id: icon - width: 60 - height: 60 + width: 50 + height: 50 visible: false anchors.bottom: text.top anchors.bottomMargin: 5 @@ -96,7 +121,11 @@ Item { } onEntered: { console.log("Tablet Button Hovered!"); - tabletButton.state = "hover state"; + if (tabletButton.isActive) { + tabletButton.state = "hover active state"; + } else { + tabletButton.state = "hover state"; + } } onExited: { console.log("Tablet Button Unhovered!"); @@ -117,6 +146,11 @@ Item { border.color: "#1fc6a6" opacity: 1 } + + PropertyChanges { + target: glow + visible: true + } }, State { name: "active state" @@ -142,6 +176,37 @@ Item { target: iconColorOverlay color: "#333333" } + }, + State { + name: "hover active state" + + PropertyChanges { + target: glow + visible: true + } + + PropertyChanges { + target: buttonOutline + border.color: "#ffffff" + opacity: 1 + } + + PropertyChanges { + target: buttonBg + color: "#1fc6a6" + opacity: 1 + } + + PropertyChanges { + target: text + color: "#333333" + } + + PropertyChanges { + target: iconColorOverlay + color: "#333333" + } + } ] } From 01c5c2745d1728c23761197b8cc243217d957e76 Mon Sep 17 00:00:00 2001 From: Faye Li Si Fi Date: Fri, 16 Dec 2016 16:29:02 -0800 Subject: [PATCH 3/5] remove commented out code, added uuid property --- .../resources/qml/hifi/tablet/Tablet.qml | 44 ------------------- .../qml/hifi/tablet/TabletButton.qml | 13 +----- 2 files changed, 1 insertion(+), 56 deletions(-) diff --git a/interface/resources/qml/hifi/tablet/Tablet.qml b/interface/resources/qml/hifi/tablet/Tablet.qml index b82138af95..6136e815ab 100644 --- a/interface/resources/qml/hifi/tablet/Tablet.qml +++ b/interface/resources/qml/hifi/tablet/Tablet.qml @@ -80,50 +80,6 @@ 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; -// } - -// 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 diff --git a/interface/resources/qml/hifi/tablet/TabletButton.qml b/interface/resources/qml/hifi/tablet/TabletButton.qml index 957e6f0421..94b3679d3a 100644 --- a/interface/resources/qml/hifi/tablet/TabletButton.qml +++ b/interface/resources/qml/hifi/tablet/TabletButton.qml @@ -3,6 +3,7 @@ import QtGraphicalEffects 1.0 Item { id: tabletButton + property var uuid; property string text: "EDIT" property string icon: "icons/edit-icon.svg" property bool isActive: false @@ -48,18 +49,6 @@ Item { anchors.topMargin: 0 } -// DropShadow { -// id: dropshadow -// anchors.fill: parent -// horizontalOffset: 0 -// verticalOffset: 3 -// color: "#aa000000" -// radius: 20 -// z: -1 -// samples: 41 -// source: buttonBg -// } - DropShadow { id: glow visible: false From 434e7dfbbd1cee97b324c4a53aded51af7741883 Mon Sep 17 00:00:00 2001 From: Faye Li Si Fi Date: Mon, 19 Dec 2016 09:13:12 -0800 Subject: [PATCH 4/5] reduce testing buttons number to 6 --- interface/resources/qml/hifi/tablet/Tablet.qml | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/interface/resources/qml/hifi/tablet/Tablet.qml b/interface/resources/qml/hifi/tablet/Tablet.qml index 6136e815ab..7ebe63473e 100644 --- a/interface/resources/qml/hifi/tablet/Tablet.qml +++ b/interface/resources/qml/hifi/tablet/Tablet.qml @@ -171,7 +171,7 @@ Item { console.log("Tablet.onCompleted!"); var component = Qt.createComponent("TabletButton.qml"); var buttons = []; - for (var i = 0; i < 11; i++) { + for (var i = 0; i < 5; i++) { buttons.push(component.createObject(flowMain)); } @@ -182,11 +182,6 @@ Item { 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" From edd1a02aa1e52b3153627285fce5bee44b6b1ef1 Mon Sep 17 00:00:00 2001 From: Faye Li Si Fi Date: Mon, 19 Dec 2016 09:19:36 -0800 Subject: [PATCH 5/5] added debug mode --- .../resources/qml/hifi/tablet/TabletButton.qml | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/interface/resources/qml/hifi/tablet/TabletButton.qml b/interface/resources/qml/hifi/tablet/TabletButton.qml index 94b3679d3a..fbab9429ad 100644 --- a/interface/resources/qml/hifi/tablet/TabletButton.qml +++ b/interface/resources/qml/hifi/tablet/TabletButton.qml @@ -7,6 +7,7 @@ Item { property string text: "EDIT" property string icon: "icons/edit-icon.svg" property bool isActive: false + property bool inDebugMode: true width: 129 height: 129 @@ -99,12 +100,14 @@ Item { hoverEnabled: true onClicked: { console.log("Tablet Button Clicked!"); - if (tabletButton.isActive) { - tabletButton.state = "base state"; - tabletButton.isActive = false; - } else { - tabletButton.state = "active state"; - tabletButton.isActive = true; + if (tabletButton.inDebugMode) { + if (tabletButton.isActive) { + tabletButton.state = "base state"; + tabletButton.isActive = false; + } else { + tabletButton.state = "active state"; + tabletButton.isActive = true; + } } tabletButton.clicked(); }