0ct0pu5/yellow
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Hello web interface (user experience remix)

Browse source
This commit is contained in:
markseu 2014-08-19 11:56:18 +02:00
parent b670a7228d
commit 1f7edd092e
5 changed files with 60 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -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).

2
system/config/text.ini
View file

@ -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

41
system/core/core-webinterface.css
View file

@ -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; }

34
system/core/core-webinterface.js
View file

@ -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);
}

2
system/core/core.php
View file

@ -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