mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 12:05:37 +00:00
ENHANCEMENT Toggleable panels in CMS
This commit is contained in:
Ingo Schommer
parent
ac537ee18d
commit
686f101925
@ -254,8 +254,10 @@ class LeftAndMain extends Controller {
|
||||
Requirements::css(THIRDPARTY_DIR . '/jstree/themes/apple/style.css');
|
||||
|
||||
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.js');
|
||||
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Panel.js');
|
||||
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Tree.js');
|
||||
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.EditForm.js');
|
||||
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Menu.js');
|
||||
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.AddForm.js');
|
||||
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Preview.js');
|
||||
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.BatchActions.js');
|
||||
@ -310,8 +312,10 @@ class LeftAndMain extends Controller {
|
||||
'leftandmain.js',
|
||||
array(
|
||||
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.js',
|
||||
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Panel.js',
|
||||
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Tree.js',
|
||||
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.EditForm.js',
|
||||
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Menu.js',
|
||||
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.AddForm.js',
|
||||
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Preview.js',
|
||||
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.BatchActions.js',
|
||||
|
||||
@ -24,11 +24,14 @@ html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden;
|
||||
.cms-container { height: 100%; }
|
||||
|
||||
.cms-menu { width: 250px; overflow: auto; }
|
||||
.cms-menu .cms-panel-content { width: 250px; }
|
||||
.cms-menu.collapsed { width: 40px; }
|
||||
|
||||
.cms-preview, .cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-form { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; }
|
||||
.cms-preview, .cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-form { *display: inline; }
|
||||
|
||||
.cms-content-tools { width: 230px; padding: 10px; overflow: auto; }
|
||||
.cms-content-tools { width: 230px; overflow: auto; }
|
||||
.cms-content-tools .cms-panel-header, .cms-content-tools .cms-panel-content { padding: 10px; }
|
||||
|
||||
.cms-content-form { overflow: auto; }
|
||||
|
||||
@ -38,6 +41,8 @@ html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden;
|
||||
|
||||
.cms-content-actions { padding: 10px; }
|
||||
|
||||
.cms-header { padding: 7px 0 7px 7px; }
|
||||
|
||||
.cms-logo { height: 30px; overflow: hidden; vertical-align: middle; }
|
||||
|
||||
.cms-login-status { height: 30px; overflow: hidden; vertical-align: middle; }
|
||||
|
||||
@ -137,20 +137,27 @@ li.jstree-closed > ul { display: none; }
|
||||
@charset "UTF-8";
|
||||
.cms-menu { z-index: 10; background: #c6d7df; border-right: 1px solid #8c99a1; width: 250px; overflow: auto; -moz-box-shadow: rgba(107, 120, 123, 0.5) 2px 0 6px 0; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 2px 0 6px 0; -o-box-shadow: rgba(107, 120, 123, 0.5) 2px 0 6px 0; box-shadow: rgba(107, 120, 123, 0.5) 2px 0 6px 0; }
|
||||
.cms-menu a { text-decoration: none; }
|
||||
.cms-menu.collapsed { cursor: auto; }
|
||||
.cms-menu.collapsed .cms-menu-list li span.text { display: none; }
|
||||
.cms-menu.collapsed .cms-menu-list li ul { display: none; }
|
||||
.cms-menu.collapsed.cms-panel .cms-panel-content { display: block; }
|
||||
|
||||
.cms-menu-list li a { display: block; height: 30px; line-height: 30px; vertical-align: middle; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: #ced7dc 1px 1px 0; color: #1f1f1f; padding: 5px; background-color: #b0bec7; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #b0bec7), color-stop(100%, #98aab6)); background-image: -moz-linear-gradient(top, #b0bec7 0%, #98aab6 100%); background-image: linear-gradient(top, #b0bec7 0%, #98aab6 100%); border-top: 1px solid #ced7dc; border-bottom: 1px solid #748d9d; }
|
||||
.cms-menu-list li a:hover { text-decoration: none; background-color: #b6c3cb; border-bottom: 1px solid #8399a7; color: #2c2c2c; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #bfcad2), color-stop(100%, #b0bec7)); background-image: -moz-linear-gradient(top, #bfcad2 0%, #b0bec7 100%); background-image: linear-gradient(top, #bfcad2 0%, #b0bec7 100%); }
|
||||
.cms-menu-list li a:focus { border-top: 1px solid #a1b2bc; text-decoration: none; background-color: #a1b2bc; color: #393939; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #92a5b2), color-stop(100%, #a1b2bc)); background-image: -moz-linear-gradient(top, #92a5b2 0%, #a1b2bc 100%); background-image: linear-gradient(top, #92a5b2 0%, #a1b2bc 100%); }
|
||||
.cms-menu-list li a .icon { display: block; float: left; margin-right: 4px; background: url('../images/icons-32.png') no-repeat; width: 32px; height: 32px; overflow: hidden; background-position: 0px 0px; }
|
||||
.cms-menu-list li a .text { display: block; }
|
||||
.cms-menu-list li.current a { color: white; text-shadow: #1e5270 0 -1px 0; border-top: 1px solid #55a4d2; border-bottom: 1px solid #1e5270; background-color: #338dc1; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #338dc1), color-stop(100%, #287099)); background-image: -moz-linear-gradient(top, #338dc1 0%, #287099 100%); background-image: linear-gradient(top, #338dc1 0%, #287099 100%); }
|
||||
.cms-menu-list li.current ul { border-top: 1px solid #1e5270; }
|
||||
.cms-menu-list li.current li { background-color: #287099; }
|
||||
.cms-menu-list li.current li a { font-size: 11px; padding: 0 10px 0 36px; height: 32px; line-height: 32px; color: #e2f0f7; background: none; border-top: 1px solid #338dc1; border-bottom: 1px solid #1e5270; }
|
||||
.cms-menu-list li.current li a.current, .cms-menu-list li.current li a:hover { background: #2e7ead; border-top: 1px solid #2e7ead; color: white; }
|
||||
.cms-menu-list li.current li a:focus { background: #236184; border-top: 1px solid #1e5270; color: white; }
|
||||
.cms-menu-list li.current li.current a { font-weight: bold; color: white; }
|
||||
.cms-menu-list li.current li.first a { border-top: none; }
|
||||
.cms-menu-list li { background-color: #b0bfc6; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #b0bfc6), color-stop(100%, #758f9b)); background-image: -moz-linear-gradient(top, #b0bfc6 0%, #758f9b 100%); background-image: linear-gradient(top, #b0bfc6 0%, #758f9b 100%); border-bottom: 1px solid #aaaaaa; }
|
||||
.cms-menu-list li a { display: block; height: 32px; vertical-align: middle; font-size: 14px; text-shadow: #aaaaaa 1px 1px 1px; color: #333333; padding: 5px; }
|
||||
.cms-menu-list li a .icon { display: block; float: left; margin-right: 5px; background: url('../images/icons-32.png?1305180670') no-repeat; width: 32px; height: 32px; overflow: hidden; background-position: 0px 0px; }
|
||||
.cms-menu-list li a .text { display: block; padding-top: 10px; }
|
||||
.cms-menu-list li.current { background-color: #338dc1; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #338dc1), color-stop(100%, #1e5270)); background-image: -moz-linear-gradient(top, #338dc1 0%, #1e5270 100%); background-image: linear-gradient(top, #338dc1 0%, #1e5270 100%); }
|
||||
.cms-menu-list li.current li { background-color: #2e7ead; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #2e7ead), color-stop(100%, #287099)); background-image: -moz-linear-gradient(top, #2e7ead 0%, #287099 100%); background-image: linear-gradient(top, #2e7ead 0%, #287099 100%); }
|
||||
.cms-menu-list li.current a { color: white; text-shadow: #333333 1px 1px 1px; }
|
||||
.cms-menu-list li li:first { -moz-box-shadow: #333333 0 4px 4px 0; -webkit-box-shadow: #333333 0 4px 4px 0; -o-box-shadow: #333333 0 4px 4px 0; box-shadow: #333333 0 4px 4px 0; }
|
||||
.cms-menu-list li li a { font-size: 12px; text-shadow: #333333 1px 1px 1px; margin: 0; padding-left: 30px; color: white; }
|
||||
.cms-menu-list li li.current a { font-weight: bold; }
|
||||
.cms-menu-list li#Menu-CMSMain a .icon { background-position: 0px 0px; }
|
||||
.cms-menu-list li#Menu-CMSMain.current a .icon, .cms-menu-list li#Menu-CMSMain a:hover .icon { background-position: -32px 0px; }
|
||||
.cms-menu-list li#Menu-AssetAdmin a .icon { background-position: 0px -32px; }
|
||||
.cms-menu-list li#Menu-AssetAdmin.current a .icon, .cms-menu-list li#Menu-AssetAdmin a:hover .icon { background-position: -32px -32px; }
|
||||
.cms-menu-list.collapsed li .text { display: none; }
|
||||
.cms-menu-list.collapsed li > li { display: none; }
|
||||
|
||||
/** This file defines common styles for form elements used throughout the CMS interface. It is an addition to the base styles defined in sapphire/css/Form.css. */
|
||||
.field { display: block; padding: 10px 0; border-bottom: 1px solid rgba(201, 205, 206, 0.8); }
|
||||
@ -225,7 +232,7 @@ strong { font-weight: bold; }
|
||||
.ui-tabs .cms-content-header .ui-state-default, .ui-tabs .cms-content-header .ui-widget-content .ui-state-default, .ui-tabs .cms-content-header .ui-widget-header .ui-state-default { background-color: #feffff; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #feffff), color-stop(100%, #d6d9da)); background-image: -moz-linear-gradient(top, #feffff 0%, #d6d9da 100%); background-image: linear-gradient(top, #feffff 0%, #d6d9da 100%); }
|
||||
.ui-tabs .cms-content-header .ui-state-active, .ui-tabs .cms-content-header .ui-widget-content .ui-state-active, .ui-tabs .cms-content-header .ui-widget-header .ui-state-active { background: #eceff1; }
|
||||
|
||||
.cms-content-tools { background-color: #dde3e6; padding: 10px; width: 230px; overflow: auto; }
|
||||
.cms-content-tools { background-color: #dce3e6; }
|
||||
|
||||
/** ------------------------------------------------------- Top Left Header and logo area -------------------------------------------------------- */
|
||||
.cms-header { background-color: #00111d; position: relative; padding: 16px 8px 8px; line-height: 24px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #00111d), color-stop(50%, #003050), color-stop(100%, #00111d)); background-image: -moz-linear-gradient(top, #00111d 0%, #003050 50%, #00111d 100%); background-image: linear-gradient(top, #00111d 0%, #003050 50%, #00111d 100%); }
|
||||
@ -283,9 +290,17 @@ form.member-profile-form .formattingHelpText { margin: 5px auto; color: #333; pa
|
||||
form.member-profile-form .formattingHelpText ul { padding: 0; }
|
||||
form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333; margin-bottom: 2px; }
|
||||
|
||||
.cms-content-form { overflow: auto; }
|
||||
.cms-panel { overflow: hidden; }
|
||||
.cms-panel .toggle-expand, .cms-panel .toggle-collapse { display: block; position: absolute; bottom: 0; text-align: right; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #afbfc7), color-stop(100%, #91a7b2)); background-image: -moz-linear-gradient(top, #afbfc7 0%, #91a7b2 100%); background-image: linear-gradient(top, #afbfc7 0%, #91a7b2 100%); }
|
||||
.cms-panel .toggle-expand span, .cms-panel .toggle-collapse span { display: inline-block; margin: 5px; color: #333333; font-size: 16px; }
|
||||
.cms-panel .toggle-collapse { width: 100%; }
|
||||
.cms-panel .toggle-expand { width: 40px; }
|
||||
.cms-panel.collapsed .cms-panel-content { display: none; }
|
||||
.cms-panel.collapsed .cms-panel-header { -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); position: relative; top: 100px; }
|
||||
|
||||
.cms-preview { background-color: #b0bec7; }
|
||||
.cms-content .cms-panel.collapsed { cursor: pointer; }
|
||||
|
||||
.cms-preview { background-color: #b0bfc6; }
|
||||
.cms-preview .cms-preview-toggle { cursor: pointer; }
|
||||
.cms-preview .cms-preview-toggle a { color: white; font-weight: bold; text-decoration: none; }
|
||||
|
||||
|
||||
108
admin/javascript/LeftAndMain.Panel.js
Normal file
108
admin/javascript/LeftAndMain.Panel.js
Normal file
@ -0,0 +1,108 @@
|
||||
(function($) {
|
||||
|
||||
$.entwine('ss', function($){
|
||||
|
||||
// setup jquery.entwine
|
||||
$.entwine.warningLevel = $.entwine.WARN_LEVEL_BESTPRACTISE;
|
||||
|
||||
/**
|
||||
* Vertically collapsible panel. Generic enough to work with CMS menu as well as various "filter" panels.
|
||||
*
|
||||
* A panel consists of the following parts:
|
||||
* - Container div: The outer element, with class ".cms-panel"
|
||||
* - Header (optional)
|
||||
* - Content
|
||||
* - Expand and collapse toggle anchors (optional)
|
||||
*
|
||||
* Sample HTML:
|
||||
* <div class="cms-panel">
|
||||
* <div class="cms-panel-header">your header</div>
|
||||
* <div class="cms-panel-content">your content here</div>
|
||||
* <a href="#" class="toggle-expande">your toggle text</a>
|
||||
* <a href="#" class="toggle-collapse">your toggle text</a>
|
||||
* </div>
|
||||
*/
|
||||
$('.cms-panel').entwine({
|
||||
|
||||
WidthExpanded: null,
|
||||
|
||||
WidthCollapsed: null,
|
||||
|
||||
onmatch: function() {
|
||||
if(!this.find('.cms-panel-content').length) throw new Exception('Content panel for ".cms-panel" not found');
|
||||
|
||||
// Create default controls unless they already exist
|
||||
if(!this.find('.toggle-expand').length) this.append('<a class="toggle-expand" href="#"><span>»</span></a>');
|
||||
if(!this.find('.toggle-collapse').length) this.append('<a class="toggle-collapse" href="#"><span>«</span></a>');
|
||||
|
||||
// Set panel width same as the content panel it contains. Assumes the panel has overflow: hidden.
|
||||
this.setWidthExpanded(this.find('.cms-panel-content').width());
|
||||
|
||||
// Assumes the collasped width is indicated by the toggle, or by an optional collapsed view
|
||||
var collapsedContent = this.find('.cms-panel-content-collapsed');
|
||||
this.setWidthCollapsed(collapsedContent.length ? collapsedContent.widht() : this.find('.toggle-expand').width());
|
||||
|
||||
this.togglePanel(!jQuery(this).hasClass('collapsed'));
|
||||
|
||||
this._super();
|
||||
},
|
||||
|
||||
onclick: function(e) {
|
||||
// By default, the whole collapsed area serves as a trigger
|
||||
if(this.data('expandOnClick') && jQuery(this).hasClass('collapsed')) {
|
||||
e.preventDefault();
|
||||
this.expandPanel();
|
||||
}
|
||||
},
|
||||
|
||||
togglePanel: function(bool) {
|
||||
// if((!bool && this.hasClass('collapsed')) || (bool && !this.hasClass('collapsed'))) return;
|
||||
|
||||
this.toggleClass('collapsed', !bool);
|
||||
var newWidth = bool ? this.getWidthExpanded() : this.getWidthCollapsed();
|
||||
|
||||
this.trigger('beforetoggle');
|
||||
this.width(newWidth); // the content panel width always stays in "expanded state" to avoid floating elements
|
||||
this.find('.toggle-collapse')[bool ? 'show' : 'hide']();
|
||||
this.find('.toggle-expand')[bool ? 'hide' : 'show']();
|
||||
|
||||
// If an alternative collapsed view exists, toggle it as well
|
||||
var collapsedContent = this.find('.cms-panel-content-collapsed');
|
||||
if(collapsedContent.length) {
|
||||
this.find('.cms-panel-content')[bool ? 'show' : 'hide']();
|
||||
this.find('.cms-panel-content-collapsed')[bool ? 'hide' : 'show']();
|
||||
}
|
||||
|
||||
this.trigger('toggle');
|
||||
},
|
||||
|
||||
expandPanel: function() {
|
||||
this.togglePanel(true);
|
||||
},
|
||||
|
||||
collapsePanel: function() {
|
||||
this.togglePanel(false);
|
||||
}
|
||||
});
|
||||
|
||||
$('.cms-panel *').entwine({
|
||||
getPanel: function() {
|
||||
return this.parents('.cms-panel:first');
|
||||
}
|
||||
});
|
||||
|
||||
$('.cms-panel .toggle-expand').entwine({
|
||||
onclick: function(e) {
|
||||
e.preventDefault();
|
||||
this.getPanel().expandPanel();
|
||||
}
|
||||
});
|
||||
|
||||
$('.cms-panel .toggle-collapse').entwine({
|
||||
onclick: function(e) {
|
||||
this.getPanel().collapsePanel();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
}(jQuery));
|
||||
@ -65,12 +65,8 @@
|
||||
}
|
||||
|
||||
// Initialize layouts, inner to outer
|
||||
var doInnerLayout = function() {$('.cms-content').layout();}
|
||||
var outer = $('.cms-container');
|
||||
var doOuterLayout = function() {outer.layout({resize: false});}
|
||||
doInnerLayout();
|
||||
doOuterLayout();
|
||||
$(window).resize(doOuterLayout);
|
||||
this.updateLayout();
|
||||
$(window).resize(function() {self.updateLayout()});
|
||||
|
||||
// Remove loading screen
|
||||
$('.ss-loading-screen').hide();
|
||||
@ -79,13 +75,15 @@
|
||||
|
||||
this._setupPinging();
|
||||
|
||||
$('.cms-edit-form').live('loadnewpage', function() {
|
||||
doInnerLayout();
|
||||
doOuterLayout();
|
||||
});
|
||||
$('.cms-edit-form').live('loadnewpage', function() {self.updateLayout()});
|
||||
|
||||
this._super();
|
||||
},
|
||||
|
||||
updateLayout: function() {
|
||||
$('.cms-content').layout();
|
||||
$('.cms-container').layout({resize: false})
|
||||
},
|
||||
|
||||
/**
|
||||
* Function: _setupPinging
|
||||
@ -116,6 +114,15 @@
|
||||
}, this.getPingIntervalSeconds() * 1000);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Monitor all panels for layout changes
|
||||
*/
|
||||
$('.LeftAndMain .cms-panel').entwine({
|
||||
ontoggle: function(e) {
|
||||
this.parents('.LeftAndMain').updateLayout();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Class: .LeftAndMain :submit, .LeftAndMain button, .LeftAndMain :reset
|
||||
|
||||
@ -21,6 +21,30 @@
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cms-panel-content {
|
||||
width: 250px; // avoids floating of elements when collapsed
|
||||
}
|
||||
|
||||
// toggled via JS
|
||||
&.collapsed {
|
||||
|
||||
width: 40px;
|
||||
cursor: auto;
|
||||
|
||||
.cms-menu-list {
|
||||
li span.text {
|
||||
display: none;
|
||||
}
|
||||
li ul {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.cms-panel .cms-panel-content {
|
||||
display: block; // override panel defaults
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cms-menu-list {
|
||||
@ -140,4 +164,19 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li#Menu-CMSMain a .icon {@include sprite-position(1, 1);}
|
||||
li#Menu-CMSMain.current a .icon, li#Menu-CMSMain a:hover .icon {@include sprite-position(2, 1);}
|
||||
li#Menu-AssetAdmin a .icon {@include sprite-position(1, 2);}
|
||||
li#Menu-AssetAdmin.current a .icon, li#Menu-AssetAdmin a:hover .icon {@include sprite-position(2, 2);}
|
||||
|
||||
&.collapsed {
|
||||
li .text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li > li {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -121,9 +121,13 @@ strong {
|
||||
|
||||
.cms-content-tools {
|
||||
background-color: darken($color-widget-bg, 5%);
|
||||
padding: 10px;
|
||||
width: 230px;
|
||||
overflow: auto;
|
||||
|
||||
.cms-panel-header,
|
||||
.cms-panel-content {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -405,6 +409,59 @@ form.member-profile-form {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// ######################### Panels #########################
|
||||
.cms-panel {
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
.toggle-expand,
|
||||
.toggle-collapse {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
text-align: right;
|
||||
@include linear-gradient(color-stops(
|
||||
darken($color-widget-bg, 20%),
|
||||
darken($color-widget-bg, 30%)
|
||||
));
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
margin: 5px;
|
||||
color: $color-text-dark;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-collapse {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toggle-expand {
|
||||
width: 40px; // will set the collapsed width
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
|
||||
.cms-panel-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cms-panel-header {
|
||||
@include rotate(-90deg);
|
||||
// TODO How to reflow container to correct height?
|
||||
position: relative;
|
||||
top: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.cms-content .cms-panel.collapsed {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// ######################### Other #########################
|
||||
.cms-preview {
|
||||
background-color: $color-base;
|
||||
|
||||
|
||||
@ -1,50 +1,54 @@
|
||||
<div class="cms-menu west">
|
||||
<div class="cms-menu cms-panel west">
|
||||
|
||||
<div class="cms-panel-content">
|
||||
|
||||
<div class="cms-header">
|
||||
<div class="cms-logo">
|
||||
<a href="http://www.silverstripe.org/" target="_blank">
|
||||
SilverStripe <% if CMSVersion %><abbr class="version">$CMSVersion</abbr><% end_if %>
|
||||
</a>
|
||||
<span>$SiteConfig.Title</span>
|
||||
</div>
|
||||
<div class="cms-login-status">
|
||||
<a href="Security/logout" class="logout-link" title="<% _t('LOGOUT','Log out') %>"><% _t('LOGOUT','Log out') %></a>
|
||||
<% control CurrentMember %>
|
||||
<span>
|
||||
<% _t('Hello','Hi') %>
|
||||
<a href="{$AbsoluteBaseURL}admin/myprofile" class="profile-link">
|
||||
<% if FirstName && Surname %>$FirstName $Surname<% else_if FirstName %>$FirstName<% else %>$Email<% end_if %>
|
||||
</a>
|
||||
</span>
|
||||
<% end_control %>
|
||||
<div class="cms-header">
|
||||
<div class="cms-logo">
|
||||
<a href="http://www.silverstripe.org/" target="_blank">
|
||||
SilverStripe <% if CMSVersion %><abbr class="version">$CMSVersion</abbr><% end_if %>
|
||||
</a>
|
||||
<span>$SiteConfig.Title</span>
|
||||
</div>
|
||||
<div class="cms-login-status">
|
||||
<a href="Security/logout" class="logout-link" title="<% _t('LOGOUT','Log out') %>"><% _t('LOGOUT','Log out') %></a>
|
||||
<% control CurrentMember %>
|
||||
<span>
|
||||
<% _t('Hello','Hi') %>
|
||||
<a href="{$AbsoluteBaseURL}admin/myprofile" class="profile-link">
|
||||
<% if FirstName && Surname %>$FirstName $Surname<% else_if FirstName %>$FirstName<% else %>$Email<% end_if %>
|
||||
</a>
|
||||
</span>
|
||||
<% end_control %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="cms-menu-list">
|
||||
<% control MainMenu %>
|
||||
<li class="$LinkingMode $FirstLast" id="Menu-$Code">
|
||||
<a href="$Link">
|
||||
<span class="icon"> </span>
|
||||
<span class="text">$Title</span>
|
||||
</a>
|
||||
<% if Code == 'CMSMain' && LinkingMode == 'current' %>
|
||||
<ul>
|
||||
<li class="first <% if Top.class == 'CMSPageEditController' %>current<% end_if %>"><a href="admin/page/edit/show/$Top.CurrentPageID">
|
||||
<span class="text">Content</span>
|
||||
</a></li>
|
||||
<li <% if Top.class == 'CMSPageSettingsController' %>class="current"<% end_if %>><a href="admin/page/settings/show/$Top.CurrentPageID">
|
||||
<span class="text">Settings</span>
|
||||
</a></li>
|
||||
<li <% if Top.class == 'CMSPageReportsController' %>class="current"<% end_if %>><a href="admin/page/reports/show/$Top.CurrentPageID">
|
||||
<span class="text">Reports</span>
|
||||
</a></li>
|
||||
<li <% if Top.class == 'CMSPageHistoryController' %>class="current"<% end_if %>><a href="admin/page/history/show/$Top.CurrentPageID">
|
||||
<span class="text">History</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
<% end_if %>
|
||||
</li>
|
||||
<% end_control %>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<ul class="cms-menu-list">
|
||||
<% control MainMenu %>
|
||||
<li class="$LinkingMode $FirstLast" id="Menu-$Code">
|
||||
<a href="$Link">
|
||||
<span class="icon"> </span>
|
||||
<span class="text">$Title</span>
|
||||
</a>
|
||||
<% if Code == 'CMSMain' && LinkingMode == 'current' %>
|
||||
<ul>
|
||||
<li class="first <% if Top.class == 'CMSPageEditController' %>current<% end_if %>"><a href="admin/page/edit/show/$Top.CurrentPageID">
|
||||
<span class="text">Content</span>
|
||||
</a></li>
|
||||
<li <% if Top.class == 'CMSPageSettingsController' %>class="current"<% end_if %>><a href="admin/page/settings/show/$Top.CurrentPageID">
|
||||
<span class="text">Settings</span>
|
||||
</a></li>
|
||||
<li <% if Top.class == 'CMSPageReportsController' %>class="current"<% end_if %>><a href="admin/page/reports/show/$Top.CurrentPageID">
|
||||
<span class="text">Reports</span>
|
||||
</a></li>
|
||||
<li <% if Top.class == 'CMSPageHistoryController' %>class="current"<% end_if %>><a href="admin/page/history/show/$Top.CurrentPageID">
|
||||
<span class="text">History</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
<% end_if %>
|
||||
</li>
|
||||
<% end_control %>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
@ -6,34 +6,37 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="cms-content-tools west">
|
||||
|
||||
<div id="SearchForm_holder" class="leftbottom ss-tabset">
|
||||
<% if SearchClassSelector = tabs %>
|
||||
<ul>
|
||||
<% control ModelForms %>
|
||||
<li class="$FirstLast"><a id="tab-ModelAdmin_$Title.HTMLATT" href="#{$Form.Name}_$ClassName">$Title</a></li>
|
||||
<% end_control %>
|
||||
</ul>
|
||||
<% end_if %>
|
||||
|
||||
<% if SearchClassSelector = dropdown %>
|
||||
<div id="ModelClassSelector" class="ui-widget-container">
|
||||
Search for:
|
||||
<select>
|
||||
<div class="cms-content-tools west cms-panel" data-expandOnClick="true">
|
||||
|
||||
<h3 class="cms-panel-header">Filter</h3>
|
||||
|
||||
<div class="cms-panel-content">
|
||||
<div id="SearchForm_holder" class="leftbottom ss-tabset">
|
||||
<% if SearchClassSelector = tabs %>
|
||||
<ul>
|
||||
<% control ModelForms %>
|
||||
<option value="{$Form.Name}_$ClassName">$Title</option>
|
||||
<li class="$FirstLast"><a id="tab-ModelAdmin_$Title.HTMLATT" href="#{$Form.Name}_$ClassName">$Title</a></li>
|
||||
<% end_control %>
|
||||
</select>
|
||||
</div>
|
||||
<% end_if %>
|
||||
</ul>
|
||||
<% end_if %>
|
||||
|
||||
<% control ModelForms %>
|
||||
<div class="tab" id="{$Form.Name}_$ClassName">
|
||||
$Content
|
||||
</div>
|
||||
<% end_control %>
|
||||
<% if SearchClassSelector = dropdown %>
|
||||
<div id="ModelClassSelector" class="ui-widget-container">
|
||||
Search for:
|
||||
<select>
|
||||
<% control ModelForms %>
|
||||
<option value="{$Form.Name}_$ClassName">$Title</option>
|
||||
<% end_control %>
|
||||
</select>
|
||||
</div>
|
||||
<% end_if %>
|
||||
|
||||
<% control ModelForms %>
|
||||
<div class="tab" id="{$Form.Name}_$ClassName">
|
||||
$Content
|
||||
</div>
|
||||
<% end_control %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user