mirror of
https://thingvellir.net/git/overte
synced 2025-03-27 23:52:03 +01:00
Merge pull request #9203 from fayeli/qml-tuesday
Tablet Main Screen UI Prototype
This commit is contained in:
Anthony Thibault
GitHub
commit
9928565ccf
4 changed files with 303 additions and 51 deletions
18
interface/resources/icons/tablet-mute-icon.svg
Normal file
18
interface/resources/icons/tablet-mute-icon.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<path class="st0" d="M24.6,12.5l1.6-1.6C24.7,9.2,22.4,8,19.9,8c-2.4,0-4.6,1-6.1,2.7c0.5,0.5,1,1,1.6,1.6c1.1-1.2,2.7-2,4.5-2
|
||||
C21.8,10.2,23.5,11.1,24.6,12.5z"/>
|
||||
<path class="st0" d="M28.3,8.9l1.6-1.6c-2.4-2.7-6-4.4-9.9-4.4c-3.8,0-7.3,1.6-9.7,4.2c0.5,0.5,1,1,1.6,1.6c2-2.2,4.9-3.5,8.1-3.5
|
||||
C23.2,5.1,26.2,6.6,28.3,8.9z"/>
|
||||
<path class="st0" d="M22.5,18.7v-3.1c0-1.5-1.2-2.6-2.6-2.6h0c-1.5,0-2.6,1.1-2.6,2.6v3.1H22.5z"/>
|
||||
<path class="st0" d="M17.3,21.4v3c0,1.5,1.2,2.6,2.7,2.6h0c1.5,0,2.6-1.2,2.6-2.6v-3H17.3z"/>
|
||||
<path class="st0" d="M27.9,24.9c0,0,0-3.6,0-3.8c0-0.7-0.6-1.2-1.3-1.2c-0.7,0-1.2,0.6-1.2,1.3c0,0.2,0,3.4,0,3.7
|
||||
c0,2.6-2.4,4.8-5.3,4.8c-2.9,0-5.3-2.1-5.3-4.8c0-0.3,0-3.5,0-3.8c0-0.7-0.5-1.3-1.2-1.3c-0.7,0-1.3,0.5-1.3,1.2c0,0.2,0,3.9,0,3.9
|
||||
c0,3.6,2.9,6.6,6.6,7.2l0,2.4h-3.1c-0.7,0-1.3,0.6-1.3,1.3c0,0.7,0.6,1.3,1.3,1.3h8.8c0.7,0,1.3-0.6,1.3-1.3c0-0.7-0.6-1.3-1.3-1.3
|
||||
h-3.2l0-2.4C25,31.6,27.9,28.6,27.9,24.9z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
19
interface/resources/icons/tablet-unmute-icon.svg
Normal file
19
interface/resources/icons/tablet-unmute-icon.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<path class="st0" d="M17.3,18.4v6c0,1.5,1.2,2.6,2.7,2.6h0c1.5,0,2.6-1.2,2.6-2.6v-6H17.3z"/>
|
||||
<path class="st0" d="M27.9,24.9c0,0,0-3.6,0-3.8c0-0.7-0.6-1.2-1.3-1.2c-0.7,0-1.2,0.6-1.2,1.3c0,0.2,0,3.4,0,3.7
|
||||
c0,2.6-2.4,4.8-5.3,4.8c-2.9,0-5.3-2.1-5.3-4.8c0-0.3,0-3.5,0-3.8c0-0.7-0.5-1.3-1.2-1.3c-0.7,0-1.3,0.5-1.3,1.2c0,0.2,0,3.9,0,3.9
|
||||
c0,3.6,2.9,6.6,6.6,7.2l0,2.4h-3.1c-0.7,0-1.3,0.6-1.3,1.3c0,0.7,0.6,1.3,1.3,1.3h8.8c0.7,0,1.3-0.6,1.3-1.3c0-0.7-0.6-1.3-1.3-1.3
|
||||
h-3.2l0-2.4C25,31.6,27.9,28.6,27.9,24.9z"/>
|
||||
<g>
|
||||
<polygon class="st0" points="23.4,15.8 23.4,15.8 23.4,15.8 "/>
|
||||
<path class="st0" d="M21.9,10.5l3.4-3.4c0.5-0.5,0.5-1.4,0-1.9c-0.5-0.5-1.4-0.5-1.9,0L20,8.6l-3.4-3.4c-0.5-0.5-1.4-0.5-1.9,0
|
||||
s-0.5,1.4,0,1.9l3.4,3.4l-3.4,3.4c-0.5,0.5-0.5,1.4,0,1.9c0.5,0.5,1.4,0.5,1.9,0l3.4-3.4l3.4,3.4c0.5,0.5,1.4,0.5,1.9,0
|
||||
c0.5-0.5,0.5-1.4,0-1.9L21.9,10.5z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -1,25 +1,148 @@
|
|||
import QtQuick 2.0
|
||||
import "../../styles-uit/"
|
||||
import QtGraphicalEffects 1.0
|
||||
|
||||
Item {
|
||||
id: item1
|
||||
id: tablet
|
||||
|
||||
property double miclevel: 0.8
|
||||
|
||||
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: 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
|
||||
height: 40
|
||||
source: "../../../icons/tablet-mute-icon.svg"
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Item {
|
||||
id: item1
|
||||
width: 225
|
||||
height: 10
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
Rectangle {
|
||||
id: audioBarBase
|
||||
color: "#333333"
|
||||
radius: 5
|
||||
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: 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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: bgMain
|
||||
gradient: Gradient {
|
||||
GradientStop {
|
||||
position: 0
|
||||
color: "#7c7c7c"
|
||||
color: "#787878"
|
||||
|
||||
}
|
||||
|
||||
GradientStop {
|
||||
|
|
@ -27,50 +150,77 @@ 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
|
||||
console.log("Tablet.onCompleted!");
|
||||
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));
|
||||
}
|
||||
|
||||
// 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: [
|
||||
State {
|
||||
name: "muted state"
|
||||
|
||||
PropertyChanges {
|
||||
target: muteText
|
||||
text: "UNMUTE"
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: muteIcon
|
||||
source: "../../../icons/tablet-unmute-icon.svg"
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: tablet
|
||||
miclevel: 0
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,28 +1,93 @@
|
|||
import QtQuick 2.0
|
||||
import "../../styles-uit/"
|
||||
import QtGraphicalEffects 1.0
|
||||
|
||||
Rectangle {
|
||||
Item {
|
||||
id: tabletButton
|
||||
width: 140
|
||||
height: 140
|
||||
color: "#1794c3"
|
||||
property string color: "#1080B8"
|
||||
property string text: "EDIT"
|
||||
property string icon: "icons/edit-icon.svg"
|
||||
width: 132
|
||||
height: 132
|
||||
|
||||
Rectangle {
|
||||
id: buttonBg
|
||||
color: tabletButton.color
|
||||
border.width: 0
|
||||
border.color: "#00000000"
|
||||
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
|
||||
x: 40
|
||||
y: 30
|
||||
width: 60
|
||||
height: 60
|
||||
source: "../../../icons/edit-icon.svg"
|
||||
anchors.bottom: text.top
|
||||
anchors.bottomMargin: 5
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
fillMode: Image.Stretch
|
||||
source: "../../../" + tabletButton.icon
|
||||
}
|
||||
|
||||
RalewaySemiBold {
|
||||
Text {
|
||||
id: text
|
||||
x: 50
|
||||
y: 96
|
||||
color: "#ffffff"
|
||||
text: qsTr("EDIT")
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: tabletButton.text
|
||||
font.bold: true
|
||||
font.pixelSize: 18
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 20
|
||||
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"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue