elofgren: USABILITY: Remove the left Side Tabs and implement clicking on the headings to show sidebar sections instead in order to fix Usability issue "#22 Allow clicking on blue heading bar of Left
Site Tree to reduce it". More info: http://www.elijahlofgren.com/silverstripe/allow-clicking-on-blue-heading-bar-of-left-site-tree-to-reduce-it/ A big THANK YOU to Andy Skelton for permission to use his WordPress? toggle icons originally posted at: http://trac.wordpress.org/attachment/ticket/1904/toggle.gif (merged from branches/gsoc) git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@41803 467b73ca-7a2a-4603-9d3b-597d59a354a9
@ -204,44 +204,6 @@ ul.tree span.modified,
|
||||
text-decoration : none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Side tabs
|
||||
*/
|
||||
#SideTabs {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 18px;
|
||||
height: 80%;
|
||||
}
|
||||
#SideTabs li {
|
||||
clear: left;
|
||||
width: 16px;
|
||||
text-indent: -100em;
|
||||
height: 70px;
|
||||
overflow: hidden;
|
||||
margin: 5px 0 5px 2px;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
#SideTabs li#sidetab_versions { background-image: url(../images/sidetabs/versions.gif); }
|
||||
#SideTabs li#sidetab_sitetree { background-image: url(../images/sidetabs/sitemap.gif); }
|
||||
#SideTabs li#sidetab_tasklist { background-image: url(../images/sidetabs/tasklist.gif); }
|
||||
#SideTabs li#sidetab_waitingon { background-image: url(../images/sidetabs/waitingon.gif); }
|
||||
#SideTabs li#sidetab_comments { background-image: url(../images/sidetabs/comments.gif); }
|
||||
#SideTabs li#sidetab_reports { background-image: url(../images/sidetabs/reports.gif); }
|
||||
#SideTabs li#sidetab_search { background-image: url(../images/sidetabs/search.gif); }
|
||||
#SideTabs li#sidetab_advertisements { background-image: url(../images/sidetabs/advertisements.gif); }
|
||||
|
||||
#SideTabs li#sidetab_versions.selected { background-image: url(../images/sidetabs/versions_over.gif); }
|
||||
#SideTabs li#sidetab_sitetree.selected { background-image: url(../images/sidetabs/sitemap_over.gif); }
|
||||
#SideTabs li#sidetab_tasklist.selected { background-image: url(../images/sidetabs/tasklist_over.gif); }
|
||||
#SideTabs li#sidetab_waitingon.selected { background-image: url(../images/sidetabs/waitingon_over.gif); }
|
||||
#SideTabs li#sidetab_comments.selected { background-image: url(../images/sidetabs/comments_over.gif); }
|
||||
#SideTabs li#sidetab_reports.selected { background-image: url(../images/sidetabs/reports_over.gif); }
|
||||
#SideTabs li#sidetab_search.selected { background-image: url(../images/sidetabs/search_over.gif); }
|
||||
#SideTabs li#sidetab_advertisements.selected { background-image: url(../images/sidetabs/advertisements_over.gif); }
|
||||
|
||||
#left {
|
||||
background-color: #EEE;
|
||||
}
|
||||
@ -250,6 +212,12 @@ ul.tree span.modified,
|
||||
background-color: #FFF;
|
||||
border-left: 1px #ccc solid;
|
||||
}
|
||||
#treepanes h2 {
|
||||
cursor: pointer;
|
||||
}
|
||||
#treepanes h2 img {
|
||||
float:right;
|
||||
}
|
||||
|
||||
.listpane p {
|
||||
margin: 3px 3px 7px 3px;
|
||||
|
@ -95,9 +95,6 @@ body.stillLoading select {
|
||||
#left.hidden form, #left.hidden .title, #left.hidden #TreeActions {
|
||||
display: none;
|
||||
}
|
||||
#left.hidden #SideTabs {
|
||||
margin-top: 47px;
|
||||
}
|
||||
|
||||
#left.hidden {
|
||||
width: 18px;
|
||||
|
BIN
images/panels/toggle-closed.gif
Normal file
After Width: | Height: | Size: 164 B |
BIN
images/panels/toggle-open.gif
Normal file
After Width: | Height: | Size: 124 B |
Before Width: | Height: | Size: 685 B |
Before Width: | Height: | Size: 924 B |
Before Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 704 B |
Before Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 990 B |
Before Width: | Height: | Size: 712 B |
Before Width: | Height: | Size: 698 B |
Before Width: | Height: | Size: 693 B |
Before Width: | Height: | Size: 693 B |
Before Width: | Height: | Size: 658 B |
Before Width: | Height: | Size: 682 B |
Before Width: | Height: | Size: 696 B |
Before Width: | Height: | Size: 714 B |
Before Width: | Height: | Size: 682 B |
Before Width: | Height: | Size: 691 B |
Before Width: | Height: | Size: 666 B |
Before Width: | Height: | Size: 684 B |
Before Width: | Height: | Size: 720 B |
Before Width: | Height: | Size: 738 B |
@ -180,8 +180,8 @@ ResultTable.prototype = {
|
||||
function fixHeight_left() {
|
||||
fitToParent('LeftPane');
|
||||
fitToParent('Search_holder',12);
|
||||
if($('SideTabs')) {
|
||||
$('SideTabs').resize();
|
||||
if($('treepanes')) {
|
||||
$('treepanes').resize();
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -414,8 +414,8 @@ treeactions = {
|
||||
|
||||
function fixHeight_left() {
|
||||
if($('treepanes')) fitToParent('treepanes');
|
||||
var st = $('SideTabs');
|
||||
if(st) st.resize();
|
||||
var st = $('treepanes');
|
||||
if(st.resize) st.resize();
|
||||
else fitToParent('sitetree_holder');
|
||||
}
|
||||
|
||||
|
@ -5,7 +5,7 @@ SideTabs.prototype = {
|
||||
* from the HTML.
|
||||
*/
|
||||
initialize: function() {
|
||||
this.tabs = this.getElementsByTagName('li');
|
||||
this.tabs = this.getElementsByTagName('h2');
|
||||
this.resize();
|
||||
$('Form_EditForm').observeMethod('PageLoaded',this.onpagechanged.bind(this));
|
||||
},
|
||||
@ -60,11 +60,11 @@ SideTabItem.prototype = {
|
||||
* Set up one of the side tabs
|
||||
*/
|
||||
initialize: function() {
|
||||
var holderID = this.id.replace('sidetab_','') + '_holder';
|
||||
var holderID = this.id.replace('heading_','') + '_holder';
|
||||
this.linkedPane = $(holderID);
|
||||
if(!this.linkedPane) throw("Can't find item: " + holderID);
|
||||
this.selected = (this.className && this.className.indexOf('selected') > -10);
|
||||
this.holder = this.parentNode;
|
||||
this.holder = $('treepanes');
|
||||
this.linkedPane.style.display = this.selected ? '' : 'none';
|
||||
},
|
||||
|
||||
@ -75,10 +75,13 @@ SideTabItem.prototype = {
|
||||
},
|
||||
|
||||
/**
|
||||
* Handler for <li> click
|
||||
* Handler for <h2> click
|
||||
*/
|
||||
onclick: function(event) {
|
||||
Event.stop(event);
|
||||
var toggleID = this.id.replace('heading_','') + '_toggle';
|
||||
Element.toggle(toggleID + '_closed');
|
||||
Element.toggle(toggleID + '_open');
|
||||
this.toggle();
|
||||
},
|
||||
toggle: function() {
|
||||
@ -109,8 +112,8 @@ SideTabItem.prototype = {
|
||||
}
|
||||
|
||||
// Application order is important - the Items must be created before the SideTabs object.
|
||||
SideTabItem.applyTo('#SideTabs li');
|
||||
SideTabs.applyTo('#SideTabs');
|
||||
SideTabItem.applyTo('#treepanes h2');
|
||||
SideTabs.applyTo('#treepanes');
|
||||
|
||||
/**
|
||||
* Generic base class for all side panels
|
||||
|
@ -35,18 +35,6 @@
|
||||
<p id="sortitems_message" style="margin: 0">To reorganise your folders, drag them around as desired.</p>
|
||||
</form>
|
||||
|
||||
|
||||
<!--
|
||||
<ul style="float: left" id="SideTabs">
|
||||
<li id="sidetab_sitetree" class="selected">Site Map</li>
|
||||
<li id="sidetab_tasklist">Task List</li>
|
||||
<li id="sidetab_waitingon">Waiting on</li>
|
||||
<li id="sidetab_versions">Versions</li>
|
||||
<li id="sidetab_comments">Comments</li>
|
||||
<li id="sidetab_reports">Reports</li>
|
||||
</ul>
|
||||
-->
|
||||
|
||||
$SiteTreeAsUL
|
||||
</div>
|
||||
</div>
|
@ -1,21 +1,11 @@
|
||||
<div class="title"><div style="background-image : url(cms/images/panels/MySite.png)">My Site</div></div>
|
||||
|
||||
<ul style="float: left; clear: left;" id="SideTabs">
|
||||
<li id="sidetab_sitetree" class="selected">Site Map</li>
|
||||
<!--<li id="sidetab_search">Search</li>-->
|
||||
<% if EnterpriseCMS %>
|
||||
<li id="sidetab_tasklist">Task List</li>
|
||||
<li id="sidetab_waitingon">Waiting on</li>
|
||||
<% end_if %>
|
||||
<li id="sidetab_versions">Versions</li>
|
||||
<% if EnterpriseCMS %>
|
||||
<li id="sidetab_comments">Comments</li>
|
||||
<% end_if %>
|
||||
<li id="sidetab_reports">Reports</li>
|
||||
</ul>
|
||||
|
||||
<div id="treepanes">
|
||||
|
||||
<h2 id="heading_sitetree" class="selected">
|
||||
<img id="sitetree_toggle_closed" src="cms/images/panels/toggle-closed.gif" alt="+" style="display:none;" title="click to open this box" />
|
||||
<img id="sitetree_toggle_open" src="cms/images/panels/toggle-open.gif" alt="-" title="click to close box" />
|
||||
Site Tree
|
||||
</h2>
|
||||
<div id="sitetree_holder">
|
||||
|
||||
<ul id="TreeActions">
|
||||
@ -87,20 +77,31 @@
|
||||
</div>-->
|
||||
|
||||
<% if EnterpriseCMS %>
|
||||
<h2 id="heading_tasklist">
|
||||
<img id="tasklist_toggle_closed" src="cms/images/panels/toggle-closed.gif" alt="+" title="click to open box" />
|
||||
<img id="tasklist_toggle_open" src="cms/images/panels/toggle-open.gif" alt="-" style="display:none;" title="click to close box" />
|
||||
Tasklist
|
||||
</h2>
|
||||
<div class="listpane" id="tasklist_holder" style="display:none">
|
||||
<h2>Tasklist</h2>
|
||||
<div class="unitBody">
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="heading_waitingon">
|
||||
<img id="waitingon_toggle_closed" src="cms/images/panels/toggle-closed.gif" alt="+" title="click to open box" />
|
||||
<img id="waitingon_toggle_open" src="cms/images/panels/toggle-open.gif" alt="-" style="display:none;" title="click to close box" />
|
||||
Waiting on
|
||||
</h2>
|
||||
<div class="listpane" id="waitingon_holder" style="display:none">
|
||||
<h2>Waiting on</h2>
|
||||
<div class="unitBody">
|
||||
</div>
|
||||
</div>
|
||||
<% end_if %>
|
||||
<h2 id="heading_versions">
|
||||
<img id="versions_toggle_closed" src="cms/images/panels/toggle-closed.gif" alt="+" title="click to open box" />
|
||||
<img id="versions_toggle_open" src="cms/images/panels/toggle-open.gif" alt="-" style="display:none;" title="click to close box" />
|
||||
History
|
||||
</h2>
|
||||
<div class="listpane" id="versions_holder" style="display:none">
|
||||
<h2>History</h2>
|
||||
|
||||
<p class="pane_actions" id="versions_actions">
|
||||
<select>
|
||||
<option value="view" selected="selected">View (click to see)</option>
|
||||
@ -115,14 +116,22 @@
|
||||
</div>
|
||||
</div>
|
||||
<% if EnterpriseCMS %>
|
||||
<h2 id="heading_comments">
|
||||
<img id="comments_toggle_closed" src="cms/images/panels/toggle-closed.gif" alt="+" title="click to open box" />
|
||||
<img id="comments_toggle_open" src="cms/images/panels/toggle-open.gif" alt="-" style="display:none;" title="click to close box" />
|
||||
Comments
|
||||
</h2>
|
||||
<div class="listpane" id="comments_holder" style="display:none">
|
||||
<h2>Comments</h2>
|
||||
<div class="unitBody">
|
||||
</div>
|
||||
</div>
|
||||
<% end_if %>
|
||||
<h2 id="heading_reports">
|
||||
<img id="reports_toggle_closed" src="cms/images/panels/toggle-closed.gif" alt="+" title="click to open box" />
|
||||
<img id="reports_toggle_open" src="cms/images/panels/toggle-open.gif" alt="-" style="display:none;" title="click to close box" />
|
||||
Reports
|
||||
</h2>
|
||||
<div class="listpane" id="reports_holder" style="display:none">
|
||||
<h2>Reports</h2>
|
||||
<p id="ReportSelector_holder">$ReportSelector</p>
|
||||
<div class="unitBody">
|
||||
</div>
|
||||
|