commit 1f7edd092eac8c13e048ded11ed272adf988e251
parent b670a7228dff690500ac9f116b5692fe654c67ec
Author: markseu <mark2011@mayberg.se>
Date: Tue, 19 Aug 2014 11:56:18 +0200
Hello web interface (user experience remix)
Diffstat:
5 files changed, 60 insertions(+), 21 deletions(-)
diff --git a/README.md b/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).
diff --git a/system/config/text.ini b/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
diff --git a/system/core/core-webinterface.css b/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; }
diff --git a/system/core/core-webinterface.js b/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+" ▾</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+" ▾</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);
}
diff --git a/system/core/core.php b/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
