elofgren: USABILITY: Change the 'Create', 'Delete', and 'Reorganise' links into 'Create...', 'Delete...', and 'Reorder...' buttons in order to fix Usability Issue #23 "Create, Delete, and Reorganise links

need to be more prominent". More info: http://www.elijahlofgren.com/silverstripe/create-delete-and-reorganise-links-need-to-be-more-prominent/ 
(merged from branches/gsoc)


git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@41854 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer 2007-09-15 00:54:13 +00:00
parent dbb645cde6
commit 83530f139f
10 changed files with 34 additions and 32 deletions

View File

@ -10,18 +10,20 @@
#TreeActions li.action {
float: left;
margin: 0;
padding: 0;
padding-right: 7px;
padding: 2px;
list-style-type: none;
}
#TreeActions li.action a {
padding: 0.3em;
display: block;
#TreeActions li.action button {
margin-left: 0;
margin-right: 0;
padding: 0pt 0.1em;
overflow: visible;
width: auto;
}
#TreeActions li.action a:hover {
#TreeActions li.selected {
background-color: #CCC;
}
#TreeActions li.selected a {
#TreeActions li.action:hover {
background-color: #CCC;
}

View File

@ -91,7 +91,7 @@ addfolder.applyTo('#addpage');
addfolder.prototype = {
initialize: function () {
Observable.applyTo($(this.id + '_options'));
this.getElementsByTagName('a')[0].onclick = returnFalse;
this.getElementsByTagName('button')[0].onclick = returnFalse;
$(this.id + '_options').onsubmit = this.form_submit;
},

View File

@ -14,7 +14,7 @@ addpage.applyTo('#addpage');
addpage.prototype = {
initialize: function () {
Observable.applyTo($(_HANDLER_FORMS[this.id]));
this.getElementsByTagName('a')[0].onclick = returnFalse;
this.getElementsByTagName('button')[0].onclick = returnFalse;
$(_HANDLER_FORMS[this.id]).onsubmit = this.form_submit;
},
@ -205,7 +205,7 @@ deletepage = {
}
});
$('deletepage').getElementsByTagName('a')[0].onclick();
$('deletepage').getElementsByTagName('button')[0].onclick();
}
} else {
@ -232,7 +232,7 @@ appendLoader(function () {
Observable.applyTo($(_HANDLER_FORMS.deletepage));
$('deletepage').onclick = deletepage.button_onclick;
$('deletepage').getElementsByTagName('a')[0].onclick = function() { return false; };
$('deletepage').getElementsByTagName('button')[0].onclick = function() { return false; };
$(_HANDLER_FORMS.deletepage).onsubmit = deletepage.form_submit;
});

View File

@ -378,7 +378,7 @@ SiteTreeNode.prototype = {
*/
treeactions = {
toggleSelection : function(li) {
li = (li.tagName.toLowerCase() == 'a') ? li.parentNode : li;
li = (li.tagName.toLowerCase() == 'button') ? li.parentNode : li;
// Deselect
if(li.selected) this.closeSelection(li, true);
@ -388,7 +388,7 @@ treeactions = {
return li.selected;
},
closeSelection : function(li, nested) {
li = (li.tagName.toLowerCase() == 'a') ? li.parentNode : li;
li = (li.tagName.toLowerCase() == 'button') ? li.parentNode : li;
Element.hide(_HANDLER_FORMS[li.id]);
removeClass(li, 'selected');
@ -399,7 +399,7 @@ treeactions = {
if(typeof nested == 'undefined') fixHeight_left();
},
openSelection: function(li, nested) {
li = (li.tagName.toLowerCase() == 'a') ? li.parentNode : li;
li = (li.tagName.toLowerCase() == 'button') ? li.parentNode : li;
addClass(li, 'selected');
Element.show(_HANDLER_FORMS[li.id]);
@ -432,7 +432,7 @@ ReorganiseAction = Class.create();
ReorganiseAction.applyTo('#sortitems');
ReorganiseAction.prototype = {
initialize: function () {
this.getElementsByTagName('a')[0].onclick = returnFalse;
this.getElementsByTagName('button')[0].onclick = returnFalse;
Observable.applyTo($(_HANDLER_FORMS[this.id]));
},

View File

@ -148,7 +148,7 @@ deletedraft = {
}
});
$('deletedrafts').getElementsByTagName('a')[0].onclick();
$('deletedrafts').getElementsByTagName('button')[0].onclick();
} else {
alert("Please select at least 1 page.");
@ -250,7 +250,7 @@ AddForm.applyTo('#addtype');
AddForm.prototype = {
initialize: function () {
Observable.applyTo($(_HANDLER_FORMS[this.id]));
this.getElementsByTagName('a')[0].onclick = returnFalse;
this.getElementsByTagName('button')[0].onclick = returnFalse;
$(_HANDLER_FORMS[this.id]).onsubmit = this.form_submit;
},
@ -374,7 +374,7 @@ Behaviour.addLoader(function () {
if( deleteDrafts ) {
deleteDrafts.onclick = deletedraft.button_onclick;
deleteDrafts.getElementsByTagName('a')[0].onclick = function() {return false;};
deleteDrafts.getElementsByTagName('button')[0].onclick = function() {return false;};
$('deletedrafts_options').onsubmit = deletedraft.form_submit;
}
});

View File

@ -119,7 +119,7 @@ deletegroup = {
}
});
$('deletegroup').getElementsByTagName('a')[0].onclick();
$('deletegroup').getElementsByTagName('button')[0].onclick();
} else {
alert("Please select at least 1 page.");
@ -137,12 +137,12 @@ Behaviour.addLoader(function () {
// Set up add page
Observable.applyTo($('addgroup_options'));
$('addgroup').onclick = addgroup.button_onclick;
$('addgroup').getElementsByTagName('a')[0].onclick = function() {return false;};
$('addgroup').getElementsByTagName('button')[0].onclick = function() {return false;};
$('addgroup_options').onsubmit = addgroup.form_submit;
// Set up delete page
Observable.applyTo($('deletegroup_options'));
$('deletegroup').onclick = deletegroup.button_onclick;
$('deletegroup').getElementsByTagName('a')[0].onclick = function() {return false;};
$('deletegroup').getElementsByTagName('button')[0].onclick = function() {return false;};
$('deletegroup_options').onsubmit = deletegroup.form_submit;
});

View File

@ -11,9 +11,9 @@
<div id="treepanes">
<div id="sitetree_holder">
<ul id="TreeActions">
<li class="action" id="addpage"><a href="admin/addpage">Create</a></li>
<li class="action" id="deletepage"><a href="admin/deletepage">Delete</a></li>
<li class="action" id="sortitems"><a href="#">Reorganise</a></li>
<li class="action" id="addpage"><button>Create</button></li>
<li class="action" id="deletepage"><button>Delete...</button></li>
<li class="action" id="sortitems"><button>Reorder...</button></li>
</ul>
<div style="clear:both;"></div>
<form class="actionparams" id="addpage_options" style="display: none" action="admin/assets/addfolder">

View File

@ -9,9 +9,9 @@
<div id="sitetree_holder">
<ul id="TreeActions">
<li class="action" id="addpage"><a href="admin/addpage">Create</a></li>
<li class="action" id="deletepage"><a href="admin/deletepage">Delete</a></li>
<li class="action" id="sortitems"><a href="#">Reorganise</a></li>
<li class="action" id="addpage"><button>Create...</button></li>
<li class="action" id="deletepage"><button>Delete...</button></li>
<li class="action" id="sortitems"><button>Reorder...</button></li>
<!-- <li class="action" id="duplicate"><a href="#">Duplicate</a></li>
Sam: this should be put into the Create area, I think, so we don't stuff up the layout -->
</ul>

View File

@ -27,8 +27,8 @@ ul.tree li.MailType span.Sent a {
<div id="treepanes">
<div id="sitetree_holder">
<ul id="TreeActions">
<li class="action" id="addtype"><a href="admin/newsletter/addtype">Create</a></li>
<li class="action" id="deletedrafts"><a href="admin/newsletter/deletedrafts">Delete</a></li>
<li class="action" id="addtype"><button>Create...</button></li>
<li class="action" id="deletedrafts"><button>Delete...</button></li>
</ul>
<div style="clear:both;"></div>
<form class="actionparams" id="addtype_options" style="display: none" action="admin/newsletter/addtype">

View File

@ -2,9 +2,9 @@
<div id="treepanes">
<div id="sitetree_holder">
<ul id="TreeActions">
<li class="action" id="addgroup"><a href="admin/security/addgroup">Create</a></li>
<li class="action" id="deletegroup"><a href="admin/security/deletegroup">Delete</a></li>
<li class="action" id="sortitems"><a href="#">Reorganise</a></li>
<li class="action" id="addgroup"><button>Create</button></li>
<li class="action" id="deletegroup"><button>Delete...</button></li>
<li class="action" id="sortitems"><button>Reorder...</button></li>
</ul>
<div style="clear:both;"></div>
<form class="actionparams" id="addgroup_options" style="display: none" action="admin/security/addgroup">