mirror of
https://github.com/silverstripe/silverstripe-cms
synced 2024-10-22 08:05:56 +02:00
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:
parent
dbb645cde6
commit
83530f139f
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
||||
},
|
||||
|
@ -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;
|
||||
});
|
||||
|
||||
|
@ -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]));
|
||||
},
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
});
|
@ -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;
|
||||
});
|
@ -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">
|
||||
|
@ -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>
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
Loading…
Reference in New Issue
Block a user