Merge pull request #302 from alexvandesande/UI

Catalog Page Behaviour

cmd/mist/assets/qml/main.qml

@@ -39,7 +39,7 @@ ApplicationWindow {
     // Takes care of loading all default plugins
     Component.onCompleted: {
 
-        addPlugin("./views/catalog.qml", {noAdd: true, close: false, section: "begin"});
+        var 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});
 
         addPlugin("./views/miner.qml", {noAdd: true, close: false, section: "ethereum", active: true});
@@ -49,9 +49,9 @@ ApplicationWindow {
         addPlugin("./views/pending_tx.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(catalog.view, catalog.menuItem);
 
-        newBrowserTab("http://ethereum-dapp-whisper-client.meteor.com/chat/amsteam");
+        //newBrowserTab("http://ethereum-dapp-catalog.meteor.com");
 
         // Command setup
         gui.sendCommand(0)
@@ -114,10 +114,33 @@ ApplicationWindow {
     }
 
     function newBrowserTab(url) {
-        var window = addPlugin("./views/browser.qml", {noAdd: true, close: true, section: "apps", active: true});
+        
-        window.view.url = url;
+        var urlMatches = url.toString().match(/^[a-z]*\:\/\/([^\/?#]+)(?:[\/?#]|$)/i);
-        window.menuItem.title = "Mist";
+        var requestedDomain = urlMatches && urlMatches[1];
-        activeView(window.view, window.menuItem);
+
+        var domainAlreadyOpen = false;
+
+        console.log("requested: " + requestedDomain )
+
+        for(var i = 0; i < mainSplit.views.length; i++) {
+            if (mainSplit.views[i].view.url) {
+                var matches = mainSplit.views[i].view.url.toString().match(/^[a-z]*\:\/\/(?:www\.)?([^\/?#]+)(?:[\/?#]|$)/i);
+                var existingDomain = matches && matches[1];
+                console.log("exists: " + existingDomain);
+                if (requestedDomain == existingDomain) {
+                    domainAlreadyOpen = true;
+                    mainSplit.views[i].view.url = url;
+                    activeView(mainSplit.views[i].view, mainSplit.views[i].menuItem);
+                }
+            }
+        }  
+
+        if (!domainAlreadyOpen) {            
+            var window = addPlugin("./views/browser.qml", {noAdd: true, close: true, section: "apps", active: true});
+            window.view.url = url;
+            window.menuItem.title = "Mist";
+            activeView(window.view, window.menuItem);
+        }
     }
 
 
@@ -332,8 +355,9 @@ ApplicationWindow {
 
         id: mainSplit
         anchors.fill: parent
-        resizing: false
+        //resizing: false  // this is NOT where we remove that damning resizing handle..
         handleDelegate: Item {
+            //This handle is a way to remove the line between the split views
             Rectangle {
                 anchors.fill: parent
             }
@@ -497,7 +521,7 @@ ApplicationWindow {
                              anchors.fill: parent
                              border.width: 0
                              radius: 5
-                             color: "#FFFFFFFF"
+                             color: "#FAFAFA"
                          }
                          Rectangle {
                              anchors {
@@ -506,7 +530,7 @@ ApplicationWindow {
                                  right: r.right
                              }
                              width: 10
-                             color: "#FFFFFFFF"
+                             color: "#FAFAFA"
                              border.width:0
 
                              Rectangle {
@@ -517,7 +541,7 @@ ApplicationWindow {
                                      top: parent.top
                                  }
                                  height: 1
-                                 color: "#FFFFFF"
+                                 color: "#FAFAFA"
                              }
 
                              Rectangle {
@@ -528,7 +552,7 @@ ApplicationWindow {
                                      bottom: parent.bottom
                                  }
                                  height: 1
-                                 color: "#FFFFFF"
+                                 color: "#FAFAFA"
                              }
                          }
                      }
@@ -800,7 +824,7 @@ ApplicationWindow {
               anchors.top: parent.top
               color: "#00000000"             
 
-              Rectangle {
+              /*Rectangle {
                   id: urlPane
                   height: 40
                   color: "#00000000"
@@ -847,7 +871,7 @@ ApplicationWindow {
                   z: -1
                   height: 1
                   color: "#CCCCCC"
-              }
+              }*/
 
               Rectangle {
                   id: mainView
@@ -855,7 +879,7 @@ ApplicationWindow {
                   anchors.right: parent.right
                   anchors.left: parent.left
                   anchors.bottom: parent.bottom
-                  anchors.top: divider.bottom
+                  anchors.top: parent.top
 
                   function createView(component) {
                       var view = component.createObject(mainView)

cmd/mist/assets/qml/views/browser.qml

@@ -345,14 +345,21 @@ Rectangle {
 						if (topBarStyle=="transparent") {
 
 							// Adjust for a transparent sidebar Dapp
-							navBarBackground.visible = false;
+                            navBarBackground.visible = false;
-							back.visible = false;
+                            back.visible = false;
-							appInfoPane.anchors.leftMargin = -16;
+                            appInfoPane.anchors.leftMargin = -16;
-							appInfoPaneShadow.anchors.leftMargin = -16;
+                            appInfoPaneShadow.anchors.leftMargin = -16;
-							webview.anchors.topMargin = -74;
+                            webview.anchors.topMargin = -74;
 							webview.runJavaScript("document.querySelector('body').classList.add('ethereum-dapp-url-bar-style-transparent')")
 
-						};	
+						} else {
+                            navBarBackground.visible = true;
+                            back.visible = true;
+                            appInfoPane.anchors.leftMargin = 0;
+                            appInfoPaneShadow.anchors.leftMargin = 0;
+                            webview.anchors.topMargin = 0;
+
+                        };	
 					});
 
 					

cmd/mist/assets/qml/views/catalog.qml

@@ -12,7 +12,7 @@ Rectangle {
 	anchors.fill: parent
 	color: "#00000000"
 
-	property var title: ""
+	property var title: "Catalog"
 	property var iconSource: ""
 	property var menuItem
 	property var hideUrl: true
@@ -75,111 +75,57 @@ Rectangle {
 		anchors.fill: parent
 		state: "inspectorShown"
 
-		RowLayout {
-			id: navBar
-			height: 184
-			z: 20
-
-			anchors {
-				left: parent.left
-				right: parent.right
-			}
-
-			Rectangle {
-				id: appInfoPane
-			    height: 28
-			    color: "#efefef"
-			    radius: 6
-			    z:25
-
-			   MouseArea {
-			    	anchors.fill: parent
-			    	z: 10
-			    	hoverEnabled: true
-			    	onEntered: {
-			    		uriNav.visible = true
-			    		appTitle.visible = false
-			    		appDomain.visible = false
-			    	}	    	
-			    }
-
-			    anchors {
-					left: parent.left
-					right: parent.right
-					leftMargin: 10
-					rightMargin: 10
-					top: parent.verticalCenter 
-					topMargin: 23
-				}
-
-				TextField {
-				    id: uriNav
-				    anchors {
-				    	left: parent.left
-				    	right: parent.right
-				    	leftMargin: 16
-						top: parent.verticalCenter 
-						topMargin: -10
-				    }
-
-				    horizontalAlignment: Text.AlignHCenter
-                    
-                    style: TextFieldStyle {
-                        textColor: "#928484"
-                        background: Rectangle {
-                            border.width: 0
-                            color: "transparent"
-                        }
-                    }
-    				text: "Type the address of a new Dapp";
-				    y: parent.height / 2 - this.height / 2
-				    z: 30
-				    activeFocusOnPress: true
-				    Keys.onReturnPressed: {
-        				newBrowserTab(this.text);
-        				this.text = "Type the address of a new Dapp";
-				    }
-
-			    }   				
-			}
-			
-			Rectangle {
-				id: appInfoPaneShadow
-			    width: 10
-			    height: 30
-			    color: "#BDB6B6"
-			    radius: 6
-			    z: 15
-
-			    anchors {
-					left: parent.left
-					right: parent.right
-					leftMargin:10
-					rightMargin:10
-					top: parent.verticalCenter 
-					topMargin: 23
-				}
-
-				
-			}
-
-		}
-
-
 		WebEngineView {
 			objectName: "webView"
 			id: webview
 			anchors.fill: parent
 
-			onLoadingChanged: {
+			property var protocol: "http://"
-				if (loadRequest.status == WebEngineView.LoadSucceededStatus) {
+			//property var domain: "localhost:3000"
-					webview.runJavaScript(eth.readFile("bignumber.min.js"));
+			property var domain: "ethereum-dapp-catalog.meteor.com"
-					webview.runJavaScript(eth.readFile("ethereum.js/dist/ethereum.js"));
+			url: protocol + domain
-				}
+
-			}
+			//navigationRequest: WebEngineView.IgnoreRequest
+		//	onLoadingChanged: {
+		//		if (loadRequest.status == WebEngineView.LoadSucceededStatus) {
+		//			webview.runJavaScript(eth.readFile("bignumber.min.js"));
+		//			webview.runJavaScript(eth.readFile("ethereum.js/dist/ethereum.js"));
+		//		}
+		//	}
+
+			//onNavigationRequested: {
+	            // detect URL scheme prefix, most likely an external link
+	            //var schemaRE = /^\w+:/;
+	            //if (schemaRE.test(request.url)) {
+	            //    request.action = WebView.AcceptRequest;
+	            //} else {
+	            //request.action = WebView.IgnoreRequest;
+	                // delegate request.url here
+	            //}
+        	//}
+
 			onJavaScriptConsoleMessage: {
 				console.log(sourceID + ":" + lineNumber + ":" + JSON.stringify(message));
 			}
+
+			onNavigationRequested: {            
+				var cleanTitle = request.url.toString()
+				var matches = cleanTitle.match(/^[a-z]*\:\/\/([^\/?#]+)(?:[\/?#]|$)/i);
+				var requestedDomain = matches && matches[1];
+
+               console.debug ("NavigationRequested: " + request.url + " navigationType=" + request.navigationType)
+              
+                if(request.navigationType==0){
+
+                	if (requestedDomain === this.domain){
+                		request.action = WebEngineView.AcceptRequest;
+                	} else {
+                		request.action = WebEngineView.IgnoreRequest;
+		               	newBrowserTab(request.url);
+                	}
+                	
+                }
+            }
 		}