Hello web interface (user experience remix)

README.md

@@ -1,4 +1,4 @@
-Yellow 0.3.12
+Yellow 0.3.13
 =============
 Yellow is for people who make websites. [Visit website](http://datenstrom.se/yellow).
 

system/config/text.ini

@@ -12,7 +12,7 @@ webinterfaceCreateButton	= Create
 webinterfaceEditButton		= Save
 webinterfaceDeleteButton	= Delete
 webinterfaceCancelButton	= Cancel
-webinterfaceEdit			= Edit
+webinterfaceEdit			= Edit page
 webinterfaceNew				= +
 webinterfaceUserHelp		= Help
 webinterfaceUserHelpUrl		= https://github.com/markseu/yellowcms-extensions/blob/master/documentation/english/README.md

system/core/core-webinterface.css

@@ -1,28 +1,47 @@
-/* Yellow web interface 0.3.3 */
+/* Yellow web interface 0.3.5 */
 
-.yellow-bar { position:relative; overflow:hidden; line-height:2.0em; }
+.yellow-bar { position:relative; overflow:hidden; line-height:2em; margin-bottom:10px; }
 .yellow-bar-left { display:block; float:left; }
 .yellow-bar-left a { margin-right:1em; }
 .yellow-bar-right { display:block; float:right; }
 .yellow-bar-right a { margin-left:1em; }
 .yellow-body-modal-open { overflow:hidden; }
 
-.yellow-pane { 
-	position:absolute; display:none; z-index:10; 
-	margin:0; padding:5px; 
+.yellow-pane {
+	position:absolute; display:none; z-index:100;
+	margin:10px 0px; padding:5px;
 	background-color:#fff; color:#000; 
 	border:1px solid #bbb; 
-	border-radius:4px; 
+	border-radius:4px; box-shadow:2px 4px 10px rgba(0, 0, 0, 0.2);
 }
 .yellow-pane a { color:#000; text-decoration:none; }
 .yellow-pane a:hover { color:#f00; text-decoration:none; }
 .yellow-pane p { margin:0.5em; }
 .yellow-pane ul { list-style:none; margin:0 0.5em; padding:0; }
 .yellow-pane div { overflow:hidden; }
-.yellow-pane-bubble { }
+.yellow-arrow { position:absolute; top:0; left:0; }
+.yellow-arrow:after, .yellow-arrow:before {
+	position:absolute;
+	bottom:100%;
+	height:0; width:0;
+	border:solid transparent;
+	content:" ";
+}
+.yellow-arrow:after {
+	border-color:rgba(255, 255, 255, 0);
+	border-bottom-color:#fff;
+	border-width:10px;
+	margin-left:-10px;
+}
+.yellow-arrow:before {
+	border-color:rgba(187, 187, 187, 0);
+	border-bottom-color:#bbb;
+	border-width:11px;
+	margin-left:-11px;
+}
 
 .yellow-btn {
-	margin:0; padding:4px 22px; 
+	margin:0; padding:4px 22px; min-width:7em;
 	display:inline-block;
 	background-color:#eaeaea; color:#333333;
 	background-image:linear-gradient(to bottom, #ffffff, #e1e1e1); 
@@ -52,6 +71,12 @@
 	border-color:#31b121 #31b121 #20b020; 
 }
 .yellow-btn-green:hover, .yellow-btn-green:focus, .yellow-btn-green:active { color:#ffffff; }
+.yellow-btn-yellow {
+	background-color:#f0d000; color:#333333;
+	background-image:linear-gradient(to bottom, #ffe100, #efc100);
+	border-color:#d1c121 #d1c121 #ccaa00;
+}
+.yellow-btn-yellow:hover, .yellow-btn-yellow:focus, .yellow-btn-yellow:active { color:#333333; }
 
 #yellow-pane-login { }
 #yellow-pane-login h1 { margin:0.5em 0.5em; }

system/core/core-webinterface.js

@@ -4,7 +4,7 @@
 // Yellow main API
 var yellow =
 {
-	version: "0.3.4",
+	version: "0.3.5",
 	action: function(text) { yellow.webinterface.action(text); },
 	onClick: function(e) { yellow.webinterface.hidePanesOnClick(yellow.toolbox.getEventElement(e)); },
 	onKeydown: function(e) { yellow.webinterface.hidePanesOnKeydown(yellow.toolbox.getEventKeycode(e)); },
@@ -79,24 +79,31 @@ yellow.webinterface =
 			var location = yellow.config.serverBase+yellow.config.pluginLocation;			
 			elementBar.innerHTML =
 				"<div class=\"yellow-bar-left\">"+
-				"<a href=\"#\" onclick=\"yellow.action('edit'); return false;\">"+this.getText("Edit")+"</a>"+
+				"<a href=\"#\" onclick=\"yellow.action('edit'); return false;\" id=\"yellow-pane-edit-link\">"+this.getText("Edit")+"</a>"+
 				"</div>"+
 				"<div class=\"yellow-bar-right\">"+
-				"<a href=\"#\" onclick=\"yellow.action('new'); return false;\">"+this.getText("New")+"</a>"+
-				"<a href=\"#\" onclick=\"yellow.action('user'); return false;\">"+yellow.config.userName+" &#9662;</a>"+
+				"<a href=\"#\" onclick=\"yellow.action('new'); return false;\" id=\"yellow-pane-new-link\">"+this.getText("New")+"</a>"+
+				"<a href=\"#\" onclick=\"yellow.action('user'); return false;\" id=\"yellow-pane-user-link\">"+yellow.config.userName+" &#9662;</a>"+
 				"</div>";
 		}
 		yellow.toolbox.insertBefore(elementBar, elementReference);
 	},
 	
 	// Create pane
-	createPane: function(paneId, normal, elementReference)
+	createPane: function(paneId, bubble, elementReference)
 	{
 		if(yellow.debug) console.log("yellow.webinterface.createPane id:"+paneId);
 		var elementPane = document.createElement("div");
-		elementPane.className = normal ? "yellow-pane yellow-pane-bubble" : "yellow-pane";
+		elementPane.className = "yellow-pane";
 		elementPane.setAttribute("id", paneId);
 		elementPane.style.display = "none";
+		if(bubble)
+		{
+			var elementArrow = document.createElement("span");
+			elementArrow.className = "yellow-arrow";
+			elementArrow.setAttribute("id", paneId+"-arrow");
+			elementPane.appendChild(elementArrow);
+		}
 		var elementDiv = document.createElement("div");
 		elementDiv.setAttribute("id", paneId+"-content");
 		if(paneId == "yellow-pane-login")
@@ -123,7 +130,6 @@ yellow.webinterface =
 				"<p><a href=\""+this.getText("UserHelpUrl")+"\">"+this.getText("UserHelp")+"</a></p>" +
 				"<p><a href=\"#\" onclick=\"yellow.action('logout'); return false;\">"+this.getText("UserLogout")+"</a></p>";
 		}
-
 		elementPane.appendChild(elementDiv);
 		yellow.toolbox.insertAfter(elementPane, elementReference);
 	},
@@ -143,7 +149,7 @@ yellow.webinterface =
 			switch(this.getPaneAction(paneId, paneType))
 			{
 				case "create":	key = "CreateButton"; className = "yellow-btn yellow-btn-green"; break;
-				case "edit":	key = "EditButton"; className = "yellow-btn"; break;
+				case "edit":	key = "EditButton"; className = "yellow-btn yellow-btn-yellow"; break;
 				case "delete":	key = "DeleteButton"; className = "yellow-btn yellow-btn-red"; break;
 				default:		key = "CancelButton"; className = "yellow-btn";
 			}
@@ -193,10 +199,10 @@ yellow.webinterface =
 			if(yellow.debug) console.log("yellow.webinterface.showPane id:"+paneId);
 			element.style.display = "block";
 			yellow.toolbox.addClass(document.body, "yellow-body-modal-open");
-			this.resizePanes();
-			this.updatePane(paneId, paneType, true);
 			this.paneId = paneId;
 			this.paneType = paneType;
+			this.resizePanes();
+			this.updatePane(paneId, paneType, true);
 		}
 	},
 
@@ -268,12 +274,20 @@ yellow.webinterface =
 				var height2 = yellow.toolbox.getOuterHeight(document.getElementById("yellow-pane-edit-content"));
 				var height3 = yellow.toolbox.getOuterHeight(document.getElementById("yellow-pane-edit-page"));
 				yellow.toolbox.setOuterHeight(document.getElementById("yellow-pane-edit-page"), height1 - height2 + height3);
+				var elementLink = document.getElementById(this.paneType=="new" ? "yellow-pane-new-link" : "yellow-pane-edit-link");
+				var position = yellow.toolbox.getOuterLeft(elementLink) + yellow.toolbox.getOuterWidth(elementLink)/2;
+				position -= yellow.toolbox.getOuterLeft(document.getElementById("yellow-pane-edit"));
+				yellow.toolbox.setOuterLeft(document.getElementById("yellow-pane-edit-arrow"), position);
 			}
 			if(yellow.toolbox.isVisible(document.getElementById("yellow-pane-user")))
 			{
 				yellow.toolbox.setOuterTop(document.getElementById("yellow-pane-user"), paneTop);
 				yellow.toolbox.setOuterHeight(document.getElementById("yellow-pane-user"), paneHeight, true);
 				yellow.toolbox.setOuterLeft(document.getElementById("yellow-pane-user"), paneWidth - yellow.toolbox.getOuterWidth(document.getElementById("yellow-pane-user")), true);
+				var elementLink = document.getElementById("yellow-pane-user-link");
+				var position = yellow.toolbox.getOuterLeft(elementLink) + yellow.toolbox.getOuterWidth(elementLink)/2;
+				position -= yellow.toolbox.getOuterLeft(document.getElementById("yellow-pane-user"));
+				yellow.toolbox.setOuterLeft(document.getElementById("yellow-pane-user-arrow"), position);
 			}
 			if(yellow.debug) console.log("yellow.webinterface.resizePanes bar:"+elementBar.offsetWidth+"/"+elementBar.offsetHeight);
 		}

system/core/core.php

@@ -5,7 +5,7 @@
 // Yellow main class
 class Yellow
 {
-	const Version = "0.3.12";
+	const Version = "0.3.13";
 	var $page;				//current page
 	var $pages;				//pages from file system
 	var $config;			//configuration