side icons

4 files changed, 103 insertions, 19 deletions

diff --git a/cmd/mist/assets/browser.png b/cmd/mist/assets/browser.png
index 7b3b0870c..074c9ae3c 100644
--- a/cmd/mist/assets/browser.png
+++ b/cmd/mist/assets/browser.png
diff --git a/cmd/mist/assets/browser@2x.png b/cmd/mist/assets/browser@2x.png
new file mode 100644
index 000000000..8ca417608
--- /dev/null
+++ b/cmd/mist/assets/browser@2x.png
diff --git a/cmd/mist/assets/qml/main.qml b/cmd/mist/assets/qml/main.qml
index 03c8e4518..09a25b431 100644
--- a/cmd/mist/assets/qml/main.qml
+++ b/cmd/mist/assets/qml/main.qml
@@ -40,10 +40,14 @@ ApplicationWindow {
     // Takes care of loading all default plugins
     Component.onCompleted: {
 
-        catalog = addPlugin("./views/catalog.qml", {noAdd: true, close: false, section: "begin"});
-        var wallet = addPlugin("./views/wallet.qml", {noAdd: true, close: false, section: "ethereum", active: true});
+        catalog = addPlugin("./views/catalog.qml", {noAdd: true, close: false, section: "begin", active: true});
+        var wallet = addPlugin("./views/wallet.qml", {noAdd: true, close: false, section: "ethereum"});
 
-        addPlugin("./views/miner.qml", {noAdd: true, close: false, section: "ethereum", active: true});
+        var walletWeb = addPlugin("./views/browser.qml", {noAdd: true, close: false, section: "ethereum", active: false});
+        walletWeb.view.url = "http://ethereum-dapp-wallet.meteor.com/";
+        walletWeb.menuItem.title = "Wallet";
+        
+        addPlugin("./views/miner.qml", {noAdd: true, close: false, section: "ethereum", active: false});
         addPlugin("./views/transaction.qml", {noAdd: true, close: false, section: "legacy"});
         addPlugin("./views/whisper.qml", {noAdd: true, close: false, section: "legacy"});
         addPlugin("./views/chain.qml", {noAdd: true, close: false, section: "legacy"});
@@ -443,10 +447,14 @@ ApplicationWindow {
                      property var view;
                      property var path;
                      property var closable;
+                     property var badgeContent;
 
                      property alias title: label.text
                      property alias icon: icon.source
                      property alias secondaryTitle: secondary.text
+                     property alias badgeNumber: badgeNumberLabel.text
+                     property alias badgeIcon: badgeIconLabel.text
+
                      function setSelection(on) {
                          sel.visible = on
                          
@@ -539,9 +547,6 @@ ApplicationWindow {
                             if (parent.closable == true) {
                                 closeIcon.visible = sel.visible
                             }
-                            /*if(view.hasOwnProperty("iconSource")) {
-                                icon.source = view.iconSource;
-                            }*/
                          }
                          onExited:  {
                             closeIcon.visible = false
@@ -550,8 +555,8 @@ ApplicationWindow {
 
                      Image {
                          id: icon
-                         height: 24
-                         width: 24
+                         height: 28
+                         width: 28
                          anchors {
                              left: parent.left
                              verticalCenter: parent.verticalCenter
@@ -581,7 +586,7 @@ ApplicationWindow {
                              verticalCenter: parent.verticalCenter
                              leftMargin: 6
                              rightMargin: 8
-                             // verticalCenterOffset: -10
+                             verticalCenterOffset: (secondaryTitle == "") ? 0 : -10;
                          }
                          x:250
                          color: "#665F5F"
@@ -607,7 +612,7 @@ ApplicationWindow {
                         visible: false
                         width: 10
                         height: 10
-                        color: "#FFFFFF"
+                        color: "#FAFAFA"
                         anchors {
                             fill: icon
                         }
@@ -626,9 +631,49 @@ ApplicationWindow {
                                  centerIn: parent
                              }
                              color: "#665F5F"
-                             font.pixelSize: 18
+                             font.pixelSize: 20
                              text: "\ue082"
                          }
+                     }                     
+
+                     Rectangle {
+                        id: badge
+                        visible: (badgeContent == "icon" || badgeContent == "number" )? true : false 
+                        width: 32
+                        color: "#05000000"
+                        anchors {
+                            right: parent.right;
+                            top: parent.top;
+                            bottom: parent.bottom;
+                            rightMargin: 4;
+                        }
+                                      
+                        Text {
+                             id: badgeIconLabel
+                             visible: (badgeContent == "icon") ? true : false;
+                             font.family: simpleLineIcons.name 
+                             anchors {
+                                 centerIn: parent
+                             }
+                             horizontalAlignment: Text.AlignCenter
+                             color: "#AAA0A0"
+                             font.pixelSize: 20
+                             text: badgeIcon
+                         }                       
+
+                        Text {
+                             id: badgeNumberLabel
+                             visible: (badgeContent == "number") ? true : false;
+                             anchors {
+                                 centerIn: parent
+                             }
+                             horizontalAlignment: Text.AlignCenter
+                             font.family: sourceSansPro.name 
+                             font.weight: Font.Light
+                             color: "#AAA0A0"
+                             font.pixelSize: 18
+                             text: badgeNumber
+                         }
                      }
                      
 
diff --git a/cmd/mist/assets/qml/views/browser.qml b/cmd/mist/assets/qml/views/browser.qml
index 9bee12cc6..16290578a 100644
--- a/cmd/mist/assets/qml/views/browser.qml
+++ b/cmd/mist/assets/qml/views/browser.qml
@@ -351,13 +351,50 @@ Rectangle {
 			z: 10
 
 			Timer {
-				interval: 500; running: true; repeat: true
+				interval: 2000; running: true; repeat: true
 				onTriggered: {
-					webview.runJavaScript("try{document.querySelector('meta[name=badge]').getAttribute('content')}catch(e){}", function(badge) {
-						if (badge) {
-							menuItem.secondaryTitle = badge;
-						}
-					});
+					webview.runJavaScript("try{document.querySelector('meta[name=ethereum-dapp-info]').getAttribute('content')}catch(e){}", function(extraInfo) {
+                        if (extraInfo) {
+                            menuItem.secondaryTitle = extraInfo;
+                        }
+                    });
+                    webview.runJavaScript("try{document.querySelector('meta[name=ethereum-dapp-badge]').getAttribute('content')}catch(e){}", function(badge) {
+                        if (badge) {
+                            if (Number(badge)>0 && Number(badge)<999) {
+                                menuItem.badgeNumber = Number(badge);
+                                menuItem.badgeContent = "number"
+                            } else if (badge == "warning") {
+                                menuItem.badgeIcon = "\ue00e"
+                                menuItem.badgeContent = "icon"
+
+                            } else if (badge == "ghost") {
+                                menuItem.badgeIcon = "\ue01a"
+                                menuItem.badgeContent = "icon"
+
+                            } else if (badge == "question") {
+                                menuItem.badgeIcon = "\ue05d"
+                                menuItem.badgeContent = "icon"
+
+                            } else if (badge == "info") {
+                                menuItem.badgeIcon = "\ue08b"
+                                menuItem.badgeContent = "icon"
+
+                            } else if (badge == "check") {
+                                menuItem.badgeIcon = "\ue080"
+                                menuItem.badgeContent = "icon"
+
+                            } else if (badge == "gear") {
+                                menuItem.badgeIcon = "\ue09a"
+                                menuItem.badgeContent = "icon"
+
+                            }
+
+
+                            console.log(menuItem.badgeContent);
+                        } else {
+                            menuItem.badgeContent = ""
+                        } 
+                    });
 				}
 			}
 			
@@ -367,10 +404,12 @@ Rectangle {
 						menuItem.title = pageTitle;	
 					});
 
-                    webView.runJavaScript("document.querySelector(\"link[rel='icon']\").getAttribute(\"href\")", function(sideIcon){
+                    webView.runJavaScript("try{document.querySelector(\"link[rel='icon']\").getAttribute(\"href\")}catch(e){}", function(sideIcon){
                             if(sideIcon){
-                                menuItem.icon = "http://localhost:3000/whisper-icon@2x.png"
+                                menuItem.icon = webview.url + sideIcon;
+                                console.log("icon: " + webview.url + sideIcon );
                             }; 
+                            console.log("no icon!" );
                     });
                     
 					webView.runJavaScript("try{document.querySelector(\"meta[name='ethereum-dapp-url-bar-style']\").getAttribute(\"content\")}catch(e){}", function(topBarStyle){