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 {
|
#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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
|
||||||
},
|
},
|
||||||
|
@ -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;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -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]));
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
});
|
});
|
@ -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;
|
||||||
});
|
});
|
@ -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">
|
||||||
|
@ -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>
|
||||||
|
@ -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">
|
||||||
|
@ -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">
|
||||||
|
Loading…
Reference in New Issue
Block a user