From dc72a0fd2f38d6c216f33d84405a44fcd6ef9e05 Mon Sep 17 00:00:00 2001 From: Faye Li Date: Tue, 13 Dec 2016 12:18:19 -0800 Subject: [PATCH 1/6] tablet mic mute and unmute icons --- .../resources/icons/tablet-mute-icon.svg | 18 ++++++++++++++++++ .../resources/icons/tablet-unmute-icon.svg | 19 +++++++++++++++++++ 2 files changed, 37 insertions(+) create mode 100644 interface/resources/icons/tablet-mute-icon.svg create mode 100644 interface/resources/icons/tablet-unmute-icon.svg diff --git a/interface/resources/icons/tablet-mute-icon.svg b/interface/resources/icons/tablet-mute-icon.svg new file mode 100644 index 0000000000..dc626845e6 --- /dev/null +++ b/interface/resources/icons/tablet-mute-icon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + diff --git a/interface/resources/icons/tablet-unmute-icon.svg b/interface/resources/icons/tablet-unmute-icon.svg new file mode 100644 index 0000000000..34a33a3535 --- /dev/null +++ b/interface/resources/icons/tablet-unmute-icon.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + From 8fcc42e5376d264a882144be43517b7d3af62671 Mon Sep 17 00:00:00 2001 From: Faye Li Date: Tue, 13 Dec 2016 12:34:38 -0800 Subject: [PATCH 2/6] overriding colors at tablet buttons instantiation --- .../resources/qml/hifi/tablet/Tablet.qml | 187 ++++++++++++++---- .../qml/hifi/tablet/TabletButton.qml | 26 +-- 2 files changed, 166 insertions(+), 47 deletions(-) diff --git a/interface/resources/qml/hifi/tablet/Tablet.qml b/interface/resources/qml/hifi/tablet/Tablet.qml index 59bcb511e9..d22fabec22 100644 --- a/interface/resources/qml/hifi/tablet/Tablet.qml +++ b/interface/resources/qml/hifi/tablet/Tablet.qml @@ -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" + } + } + ] } diff --git a/interface/resources/qml/hifi/tablet/TabletButton.qml b/interface/resources/qml/hifi/tablet/TabletButton.qml index a1d17cf423..4b72959b79 100644 --- a/interface/resources/qml/hifi/tablet/TabletButton.qml +++ b/interface/resources/qml/hifi/tablet/TabletButton.qml @@ -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 } } From ad905ac6dc71e3040cf8e938b19e01ccb4b96794 Mon Sep 17 00:00:00 2001 From: Faye Li Date: Tue, 13 Dec 2016 15:32:21 -0800 Subject: [PATCH 3/6] drop shadow on tablet buttons + set text at instantiation --- .../resources/qml/hifi/tablet/Tablet.qml | 23 ++++++++--- .../qml/hifi/tablet/TabletButton.qml | 40 +++++++++++++++---- 2 files changed, 50 insertions(+), 13 deletions(-) diff --git a/interface/resources/qml/hifi/tablet/Tablet.qml b/interface/resources/qml/hifi/tablet/Tablet.qml index d22fabec22..c57e97c63e 100644 --- a/interface/resources/qml/hifi/tablet/Tablet.qml +++ b/interface/resources/qml/hifi/tablet/Tablet.qml @@ -81,7 +81,7 @@ Item { id: muteIcon width: 40 height: 40 - source: "../../../icons/tablet-mute-icon.svg" + source: "icons/tablet-mute-icon.svg" anchors.verticalCenter: parent.verticalCenter } Rectangle { @@ -154,22 +154,33 @@ Item { } Component.onCompleted: { - console.log("AJT: Tablet.onCompleted!"); - // AJT: test flow by adding buttons + console.log("Tablet.onCompleted!"); var component = Qt.createComponent("TabletButton.qml"); var buttons = []; for (var i = 0; i < 9; i++) { buttons.push(component.createObject(flowMain)); } - var green = "#1fc6a6"; - var lightblue = "#1DB5EC"; + // 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[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"; } } states: [ @@ -183,7 +194,7 @@ Item { PropertyChanges { target: muteIcon - source: "../../../icons/tablet-unmute-icon.svg" + source: "icons/tablet-unmute-icon.svg" } } ] diff --git a/interface/resources/qml/hifi/tablet/TabletButton.qml b/interface/resources/qml/hifi/tablet/TabletButton.qml index 4b72959b79..0971ed9299 100644 --- a/interface/resources/qml/hifi/tablet/TabletButton.qml +++ b/interface/resources/qml/hifi/tablet/TabletButton.qml @@ -1,27 +1,51 @@ import QtQuick 2.0 +import QtGraphicalEffects 1.0 -Rectangle { +Item { id: tabletButton + property string color: "#1080B8" + property string text: "EDIT" + property string icon: "icons/edit-icon.svg" width: 132 height: 132 - color: "#1d94c3" + + Rectangle { + id: buttonBg + color: tabletButton.color + 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 + + layer.enabled: true + layer.effect: DropShadow { + horizontalOffset: 0 + verticalOffset: 3 + color: "#aa000000" + radius: 20 + samples: 41 + } + } Image { id: icon width: 60 height: 60 - fillMode: Image.Stretch anchors.bottom: text.top - anchors.bottomMargin: 3 - anchors.horizontalCenterOffset: 0 + anchors.bottomMargin: 5 anchors.horizontalCenter: parent.horizontalCenter - source: "../../../icons/edit-icon.svg" + fillMode: Image.Stretch + source: tabletButton.icon } Text { id: text color: "#ffffff" - text: "EDIT" + text: tabletButton.text font.bold: true font.pixelSize: 18 anchors.bottom: parent.bottom @@ -30,3 +54,5 @@ Rectangle { horizontalAlignment: Text.AlignHCenter } } + + From 5b8e80654d4cc6a9bcf39fce9afec38159cd7dca Mon Sep 17 00:00:00 2001 From: Faye Li Date: Tue, 13 Dec 2016 16:01:50 -0800 Subject: [PATCH 4/6] button glow on hover --- .../resources/qml/hifi/tablet/Tablet.qml | 3 ++ .../qml/hifi/tablet/TabletButton.qml | 53 +++++++++++++++---- 2 files changed, 47 insertions(+), 9 deletions(-) diff --git a/interface/resources/qml/hifi/tablet/Tablet.qml b/interface/resources/qml/hifi/tablet/Tablet.qml index c57e97c63e..d73daa14dc 100644 --- a/interface/resources/qml/hifi/tablet/Tablet.qml +++ b/interface/resources/qml/hifi/tablet/Tablet.qml @@ -61,10 +61,13 @@ Item { 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: { diff --git a/interface/resources/qml/hifi/tablet/TabletButton.qml b/interface/resources/qml/hifi/tablet/TabletButton.qml index 0971ed9299..9e6700029c 100644 --- a/interface/resources/qml/hifi/tablet/TabletButton.qml +++ b/interface/resources/qml/hifi/tablet/TabletButton.qml @@ -12,6 +12,8 @@ Item { Rectangle { id: buttonBg color: tabletButton.color + border.width: 0 + border.color: "#00000000" anchors.right: parent.right anchors.rightMargin: 0 anchors.left: parent.left @@ -20,15 +22,6 @@ Item { anchors.bottomMargin: 0 anchors.top: parent.top anchors.topMargin: 0 - - layer.enabled: true - layer.effect: DropShadow { - horizontalOffset: 0 - verticalOffset: 3 - color: "#aa000000" - radius: 20 - samples: 41 - } } Image { @@ -53,6 +46,48 @@ Item { anchors.horizontalCenter: parent.horizontalCenter 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 + onEntered: { + console.log("Tablet Button Hovered!"); + tabletButton.state = "hover state"; + } + onExited: { + console.log("Tablet Button Unhovered!"); + tabletButton.state = "base state"; + } + } + + states: [ + State { + name: "hover state" + + PropertyChanges { + target: buttonBg + border.width: 2 + border.color: "#ffffff" + } + PropertyChanges { + target: dropshadow + verticalOffset: 0 + color: "#ffffff" + } + } + ] } From 53263789a0b56b4521d0873bc2d39e3e5c58922f Mon Sep 17 00:00:00 2001 From: Faye Li Date: Tue, 13 Dec 2016 16:04:25 -0800 Subject: [PATCH 5/6] fix relative path --- interface/resources/qml/hifi/tablet/Tablet.qml | 4 ++-- interface/resources/qml/hifi/tablet/TabletButton.qml | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/interface/resources/qml/hifi/tablet/Tablet.qml b/interface/resources/qml/hifi/tablet/Tablet.qml index d73daa14dc..1ec0ff0fac 100644 --- a/interface/resources/qml/hifi/tablet/Tablet.qml +++ b/interface/resources/qml/hifi/tablet/Tablet.qml @@ -84,7 +84,7 @@ Item { id: muteIcon width: 40 height: 40 - source: "icons/tablet-mute-icon.svg" + source: "../../../icons/tablet-mute-icon.svg" anchors.verticalCenter: parent.verticalCenter } Rectangle { @@ -197,7 +197,7 @@ Item { PropertyChanges { target: muteIcon - source: "icons/tablet-unmute-icon.svg" + source: "../../../icons/tablet-unmute-icon.svg" } } ] diff --git a/interface/resources/qml/hifi/tablet/TabletButton.qml b/interface/resources/qml/hifi/tablet/TabletButton.qml index 9e6700029c..75f5423f41 100644 --- a/interface/resources/qml/hifi/tablet/TabletButton.qml +++ b/interface/resources/qml/hifi/tablet/TabletButton.qml @@ -32,7 +32,7 @@ Item { anchors.bottomMargin: 5 anchors.horizontalCenter: parent.horizontalCenter fillMode: Image.Stretch - source: tabletButton.icon + source: "../../../" + tabletButton.icon } Text { From a651e19bddd8c459f57d85d817612d4104596888 Mon Sep 17 00:00:00 2001 From: Faye Li Si Fi Date: Wed, 14 Dec 2016 11:38:36 -0800 Subject: [PATCH 6/6] audio gradient bar length as a function of 0 to 1 --- .../resources/qml/hifi/tablet/Tablet.qml | 47 ++++++++++++++----- 1 file changed, 34 insertions(+), 13 deletions(-) diff --git a/interface/resources/qml/hifi/tablet/Tablet.qml b/interface/resources/qml/hifi/tablet/Tablet.qml index 1ec0ff0fac..c6b38b538f 100644 --- a/interface/resources/qml/hifi/tablet/Tablet.qml +++ b/interface/resources/qml/hifi/tablet/Tablet.qml @@ -1,8 +1,11 @@ import QtQuick 2.0 +import QtGraphicalEffects 1.0 Item { id: tablet + property double miclevel: 0.8 + width: 480 height: 720 @@ -36,7 +39,8 @@ Item { anchors.left: parent.left anchors.rightMargin: 30 anchors.right: parent.right - spacing: 10 + spacing: 5 + Rectangle { id: muteButton width: 128 @@ -80,6 +84,7 @@ Item { } } } + Image { id: muteIcon width: 40 @@ -87,34 +92,45 @@ Item { source: "../../../icons/tablet-mute-icon.svg" anchors.verticalCenter: parent.verticalCenter } - Rectangle { - id: audioBarBase - color: "#333333" - radius: 5 + + Item { + id: item1 width: 225 height: 10 anchors.verticalCenter: parent.verticalCenter Rectangle { - id: audioBarColor + id: audioBarBase + color: "#333333" radius: 5 - anchors.verticalCenterOffset: 0 + anchors.fill: parent + } + Rectangle { + id: audioBarMask + width: parent.width * tablet.miclevel + color: "#333333" + radius: 5 + anchors.bottom: parent.bottom + anchors.bottomMargin: 0 + anchors.top: parent.top + anchors.topMargin: 0 anchors.left: parent.left - anchors.leftMargin: 85 - anchors.verticalCenter: parent.verticalCenter - rotation: -90 + anchors.leftMargin: 0 + } + LinearGradient { + anchors.fill: audioBarMask + source: audioBarMask + start: Qt.point(0, 0) + end: Qt.point(225, 0) gradient: Gradient { GradientStop { position: 0 color: "#00b8ff" } - GradientStop { position: 1 color: "#ff2d73" } } - width: parent.height - height: parent.width*0.8 } } } @@ -199,6 +215,11 @@ Item { target: muteIcon source: "../../../icons/tablet-unmute-icon.svg" } + + PropertyChanges { + target: tablet + miclevel: 0 + } } ] }