Started design branch

This commit is contained in:
Alexandre Van de Sande 2015-02-02 17:18:43 -02:00
parent 0d97c3ce13
commit 97c42a311b

View file

@ -44,7 +44,7 @@ ApplicationWindow {
addPlugin("./views/info.qml", {noAdd: true, close: false, section: "legacy"}); addPlugin("./views/info.qml", {noAdd: true, close: false, section: "legacy"});
mainSplit.setView(wallet.view, wallet.menuItem); mainSplit.setView(wallet.view, wallet.menuItem);
s
newBrowserTab("http://etherian.io"); newBrowserTab("http://etherian.io");
// Command setup // Command setup
@ -360,10 +360,24 @@ ApplicationWindow {
********************/ ********************/
Rectangle { Rectangle {
id: menu id: menu
Layout.minimumWidth: 210 Layout.minimumWidth: 192
Layout.maximumWidth: 210 Layout.maximumWidth: 192
anchors.top: parent.top anchors.top: parent.top
color: "#ececec" //color: "#FAF5F5"
Rectangle {
width: parent.height
height: parent.width
anchors.centerIn: parent
rotation: 90
gradient: Gradient {
GradientStop { position: 0.0; color: "#F1ECEC" }
GradientStop { position: 0.2; color: "#FAF5F5" }
GradientStop { position: 1.0; color: "#FAF5F5" }
}
}
Component { Component {
id: menuItemTemplate id: menuItemTemplate
@ -380,8 +394,8 @@ ApplicationWindow {
sel.visible = on sel.visible = on
} }
width: 206 width: 192
height: 28 height: 55
color: "#00000000" color: "#00000000"
anchors { anchors {
@ -390,6 +404,7 @@ ApplicationWindow {
} }
Rectangle { Rectangle {
// This is the selection rectangle
id: sel id: sel
visible: false visible: false
anchors.fill: parent anchors.fill: parent
@ -397,10 +412,10 @@ ApplicationWindow {
Rectangle { Rectangle {
id: r id: r
anchors.fill: parent anchors.fill: parent
border.color: "#CCCCCC" border.width: 0
border.width: 1
radius: 5 radius: 5
color: "#FFFFFFFF" color: "#FFFFFFFF"
// Background of selected tab
} }
Rectangle { Rectangle {
anchors { anchors {
@ -410,25 +425,29 @@ ApplicationWindow {
} }
width: 10 width: 10
color: "#FFFFFFFF" color: "#FFFFFFFF"
border.width:0
//Little tiny rectangle to the right of selection. Not sure what's for
Rectangle { Rectangle {
// Small line on top of selection. What's this for?
anchors { anchors {
left: parent.left left: parent.left
right: parent.right right: parent.right
top: parent.top top: parent.top
} }
height: 1 height: 1
color: "#CCCCCC" color: "#FFFFFFFF"
} }
Rectangle { Rectangle {
// Small line on bottom of selection. What's this for again?
anchors { anchors {
left: parent.left left: parent.left
right: parent.right right: parent.right
bottom: parent.bottom bottom: parent.bottom
} }
height: 1 height: 1
color: "#CCCCCC" color: "#FFFFFFFF"
} }
} }
} }
@ -441,13 +460,14 @@ ApplicationWindow {
} }
Image { Image {
// Icon
id: icon id: icon
height: 20 height: 24
width: 20 width: 24
anchors { anchors {
left: parent.left left: parent.left
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
leftMargin: 3 leftMargin: 6
} }
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
@ -458,25 +478,27 @@ ApplicationWindow {
} }
Text { Text {
// Main Text
id: label id: label
anchors { anchors {
left: icon.right left: icon.right
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
leftMargin: 3 leftMargin: 6
} }
color: "#0D0A01" color: "#665F5F"
font.pixelSize: 12 font.pixelSize: 14
} }
Text { Text {
// Auxiliary Text
id: secondary id: secondary
anchors { anchors {
right: parent.right right: parent.right
rightMargin: 8 rightMargin: 8
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
} }
color: "#AEADBE" color: "#6691C2"
font.pixelSize: 12 font.pixelSize: 12
} }
@ -541,14 +563,45 @@ ApplicationWindow {
anchors.right: parent.right anchors.right: parent.right
spacing: 3 spacing: 3
Rectangle {
// New App Button
id: newAppButton
anchors {
left: parent.left
leftMargin: 6
}
border.width: 0
radius: 5
height: 56
width: 180
color: "#F6EEEE"
Text {
text: "GO TO NEW APP"
font.bold: true
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
color: "#AAA0A0"
}
}
Rectangle {
// Ethereum Title
anchors {
left: parent.left
leftMargin: 6
}
border.width: 0
height: 56
width: 180
color: "#00000000"
Text { Text {
text: "ETHEREUM" text: "ETHEREUM"
font.bold: true font.bold: true
anchors { anchors.verticalCenter: parent.verticalCenter
left: parent.left color: "#AAA0A0"
leftMargin: 5
} }
color: "#888888"
} }
ColumnLayout { ColumnLayout {
@ -561,14 +614,23 @@ ApplicationWindow {
} }
Text {
text: "NET" Rectangle {
font.bold: true // Apps
anchors { anchors {
left: parent.left left: parent.left
leftMargin: 5 leftMargin: 6
}
border.width: 0
height: 56
width: 180
color: "#00000000"
Text {
text: "APPS"
font.bold: true
anchors.verticalCenter: parent.verticalCenter
color: "#AAA0A0"
} }
color: "#888888"
} }
ColumnLayout { ColumnLayout {
@ -577,17 +639,28 @@ ApplicationWindow {
anchors { anchors {
left: parent.left left: parent.left
right: parent.right right: parent.right
bottomMargin: 18
} }
} }
Rectangle {
// Debug
anchors {
left: parent.left
leftMargin: 6
}
border.width: 0
height: 56
width: 180
color: "#00000000"
Text { Text {
text: "DEBUG" text: "DEBUG"
font.bold: true font.bold: true
anchors { anchors.verticalCenter: parent.verticalCenter
left: parent.left color: "#AAA0A0"
leftMargin: 5
} }
color: "#888888"
} }
ColumnLayout { ColumnLayout {
@ -598,6 +671,7 @@ ApplicationWindow {
right: parent.right right: parent.right
} }
} }
} }
} }
@ -610,24 +684,28 @@ ApplicationWindow {
anchors.left: menu.right anchors.left: menu.right
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.top: parent.top anchors.top: parent.top
color: "#00000000" anchors.topMargin: 50
anchors.bottomMargin: 50
color: "#FF00FF" //magenta
// This is the background of the URL bar
Rectangle { Rectangle {
id: urlPane id: urlPane
height: 40
color: "#00000000" anchors.right: parent.right
anchors { anchors.left: parent.left
left: parent.left anchors.bottom: parent.bottom
right: parent.right anchors.top: parent.top
leftMargin: 5 anchors.topMargin: 50
rightMargin: 5 anchors.bottomMargin: 50
top: parent.top height: 10
topMargin: 5 color: "#00FFFF" //cyan
}
TextField { TextField {
id: url id: url
objectName: "url" objectName: "url"
placeholderText: "DApp URL" placeholderText: "DApp URL"
anchors { anchors {
left: parent.left left: parent.left
right: parent.right right: parent.right
@ -648,7 +726,7 @@ ApplicationWindow {
} }
// Border // Invisible divider between url bar and main view
Rectangle { Rectangle {
id: divider id: divider
anchors { anchors {
@ -656,18 +734,19 @@ ApplicationWindow {
right: parent.right right: parent.right
top: urlPane.bottom top: urlPane.bottom
} }
z: -1 height: 10
height: 1 color: "#FFFF00" //yellow
color: "#CCCCCC"
} }
Rectangle { Rectangle {
id: mainView id: mainView
color: "#00000000" color: "#0000FF" //dark blue
anchors.right: parent.right anchors.right: parent.right
anchors.left: parent.left anchors.left: parent.left
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.top: divider.bottom anchors.top: divider.top
anchors.topMargin: 100
anchors.bottomMargin: 100
function createView(component) { function createView(component) {
var view = component.createObject(mainView) var view = component.createObject(mainView)
@ -675,6 +754,7 @@ ApplicationWindow {
return view; return view;
} }
} }
} }
} }