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 { #TreeActions li.action {
float: left; float: left;
margin: 0; margin: 0;
padding: 0; padding: 2px;
padding-right: 7px;
list-style-type: none; list-style-type: none;
} }
#TreeActions li.action a { #TreeActions li.action button {
padding: 0.3em; margin-left: 0;
display: block; margin-right: 0;
padding: 0pt 0.1em;
overflow: visible;
width: auto;
} }
#TreeActions li.action a:hover { #TreeActions li.selected {
background-color: #CCC; background-color: #CCC;
} }
#TreeActions li.selected a { #TreeActions li.action:hover {
background-color: #CCC; background-color: #CCC;
} }

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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