mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-06-26 14:39:25 +02:00
ENHANCEMENT Implemented new jLayout layout manager, more expressive class names in LeftAndMain.ss
This commit is contained in:
Ingo Schommer
parent
85386b4b9c
commit
b273861591
|
|
@ -210,6 +210,9 @@ class LeftAndMain extends Controller {
|
|||
|
||||
// Required for TreeTools panel above tree
|
||||
Requirements::javascript(SAPPHIRE_DIR . '/javascript/TabSet.js');
|
||||
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/thirdparty/jsizes/lib/jquery.sizes.js');
|
||||
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/thirdparty/jlayout/lib/jlayout.border.js');
|
||||
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/thirdparty/jlayout/lib/jquery.jlayout.js');
|
||||
|
||||
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/behaviour/behaviour.js');
|
||||
Requirements::javascript(SAPPHIRE_DIR . '/thirdparty/jquery-cookie/jquery.cookie.js');
|
||||
|
|
|
|||
|
|
@ -1,3 +1,26 @@
|
|||
/* line 14, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
|
||||
|
||||
/* line 17, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
body { line-height: 1; color: black; background: white; }
|
||||
|
||||
/* line 19, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
ol, ul { list-style: none; }
|
||||
|
||||
/* line 21, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
table { border-collapse: separate; border-spacing: 0; vertical-align: middle; }
|
||||
|
||||
/* line 23, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }
|
||||
|
||||
/* line 25, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
q, blockquote { quotes: "" ""; }
|
||||
/* line 96, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
q:before, q:after, blockquote:before, blockquote:after { content: ""; }
|
||||
|
||||
/* line 27, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
a img { border: none; }
|
||||
|
||||
/* line 4, ../scss/_tree.scss */
|
||||
.jstree ul { display: block; margin: 0 0 0 0; padding: 0 0 0 0; list-style-type: none; }
|
||||
/* line 9, ../scss/_tree.scss */
|
||||
|
|
@ -30,26 +53,84 @@
|
|||
/* line 63, ../scss/_tree.scss */
|
||||
.jstree > ul > li { margin-left: 0px; }
|
||||
|
||||
/* line 5, ../scss/screen.scss */
|
||||
/* line 6, ../scss/screen.scss */
|
||||
html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; }
|
||||
|
||||
/* line 14, ../scss/screen.scss */
|
||||
body { font-size: 13px; font-family: Verdana, Arial, sans-serif; }
|
||||
|
||||
/* line 11, ../scss/screen.scss */
|
||||
body * { font-size: 13px; }
|
||||
|
||||
/* line 15, ../scss/screen.scss */
|
||||
body .ui-widget { font-size: 1em; }
|
||||
/* line 14, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
body html, body body, body div, body span, body applet, body object, body iframe, body h1, body h2, body h3, body h4, body h5, body h6, body p, body blockquote, body pre, body a, body abbr, body acronym, body address, body big, body cite, body code, body del, body dfn, body em, body font, body img, body ins, body kbd, body q, body s, body samp, body small, body strike, body strong, body sub, body sup, body tt, body var, body dl, body dt, body dd, body ol, body ul, body li, body fieldset, body form, body label, body legend, body table, body caption, body tbody, body tfoot, body thead, body tr, body th, body td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
|
||||
/* line 17, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
body body { line-height: 1; color: black; background: white; }
|
||||
/* line 19, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
body ol, body ul { list-style: none; }
|
||||
/* line 21, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
body table { border-collapse: separate; border-spacing: 0; vertical-align: middle; }
|
||||
/* line 23, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
body caption, body th, body td { text-align: left; font-weight: normal; vertical-align: middle; }
|
||||
/* line 25, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
body q, body blockquote { quotes: "" ""; }
|
||||
/* line 96, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
body q:before, body q:after, body blockquote:before, body blockquote:after { content: ""; }
|
||||
/* line 27, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
body a img { border: none; }
|
||||
|
||||
/* line 20, ../scss/screen.scss */
|
||||
.logo .version { display: none; }
|
||||
body * { font-size: 13px; }
|
||||
|
||||
/* line 26, ../scss/screen.scss */
|
||||
/* line 24, ../scss/screen.scss */
|
||||
body .ui-widget { font-size: 1em; }
|
||||
|
||||
/* line 30, ../scss/screen.scss */
|
||||
.cms-container { height: 100%; }
|
||||
|
||||
/* line 34, ../scss/screen.scss */
|
||||
.cms-menu { width: 250px; overflow: auto; }
|
||||
|
||||
/* line 42, ../scss/screen.scss */
|
||||
.center, .east, .west, .north, .south { display: inline-block; }
|
||||
|
||||
/* line 46, ../scss/screen.scss */
|
||||
.cms-content-tools { width: 250px; overflow: auto; }
|
||||
|
||||
/* line 51, ../scss/screen.scss */
|
||||
.cms-content-form { overflow: auto; }
|
||||
|
||||
/* line 61, ../scss/screen.scss */
|
||||
.cms-menu { background-color: #b0bfc6; }
|
||||
|
||||
/* line 65, ../scss/screen.scss */
|
||||
.cms-content-header { background-color: #a0b2be; }
|
||||
|
||||
/* line 69, ../scss/screen.scss */
|
||||
.cms-content { background-color: #eef2f3; }
|
||||
|
||||
/* line 73, ../scss/screen.scss */
|
||||
.cms-content-tools { background-color: #c6d7df; }
|
||||
|
||||
/* line 77, ../scss/screen.scss */
|
||||
.cms-logo { background-color: #002a43; }
|
||||
/* line 80, ../scss/screen.scss */
|
||||
.cms-logo .version { display: none; }
|
||||
|
||||
/* line 88, ../scss/screen.scss */
|
||||
.cms-logo * { color: #3ebae0; }
|
||||
/* line 92, ../scss/screen.scss */
|
||||
.cms-logo a { display: block; height: 20px; }
|
||||
|
||||
/* line 101, ../scss/screen.scss */
|
||||
.cms-menu li { display: block; height: 50px; background-color: #afbdc6; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #afbdc6), color-stop(100%, #8ea4b2)); background-image: -moz-linear-gradient(top, #afbdc6 0%, #8ea4b2 100%); background-image: linear-gradient(top, #afbdc6 0%, #8ea4b2 100%); }
|
||||
/* line 107, ../scss/screen.scss */
|
||||
.cms-menu li.current { background-color: #409dc9; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #409dc9), color-stop(100%, #1f78b0)); background-image: -moz-linear-gradient(top, #409dc9 0%, #1f78b0 100%); background-image: linear-gradient(top, #409dc9 0%, #1f78b0 100%); }
|
||||
|
||||
/* line 117, ../scss/screen.scss */
|
||||
.ss-loading-screen, .ss-loading-screen .loading-logo { width: 100%; height: 100%; overflow: hidden; position: absolute; background: #fff; background: -moz-radial-gradient(50% 50% 180deg, circle cover, white, #efefef, #c7c7c7 100%); background: -webkit-gradient(radial, 50% 50%, 350, 50% 50%, 0, from(#e3e3e3), to(white)); z-index: 100000; margin: 0; padding: 0; }
|
||||
|
||||
/* line 40, ../scss/screen.scss */
|
||||
/* line 131, ../scss/screen.scss */
|
||||
.ss-loading-screen .loading-logo { background-url: url(../images/logo.gif); background-repeat: no-repeat; background-color: transparent; background-position: 50% 50%; }
|
||||
/* line 46, ../scss/screen.scss */
|
||||
/* line 137, ../scss/screen.scss */
|
||||
.ss-loading-screen p { width: 100%; text-align: center; position: absolute; bottom: 80px; }
|
||||
/* line 52, ../scss/screen.scss */
|
||||
/* line 143, ../scss/screen.scss */
|
||||
.ss-loading-screen p span.notice { display: inline-block; font-size: 14px; padding: 10px 20px; color: #dc7f00; border: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -moz-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1); -o-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1); }
|
||||
/* line 70, ../scss/screen.scss */
|
||||
/* line 161, ../scss/screen.scss */
|
||||
.ss-loading-screen .loading-animation { display: none; position: absolute; left: 49%; top: 75%; }
|
||||
|
|
|
|||
|
|
@ -55,6 +55,15 @@
|
|||
$('.ss-loading-screen').hide();
|
||||
$('body').removeClass('loading');
|
||||
$(window).unbind('resize', positionLoadingSpinner);
|
||||
|
||||
// Initialize layouts, inner to outer
|
||||
$('.cms-content').layout();
|
||||
var outer = $('.cms-container');
|
||||
var layout = function() {
|
||||
outer.layout({resize: false});
|
||||
}
|
||||
layout();
|
||||
$(window).resize(layout);
|
||||
|
||||
this._setupPinging();
|
||||
|
||||
|
|
@ -68,7 +77,7 @@
|
|||
var timerID = "timerLeftAndMainResize";
|
||||
if (window[timerID]) clearTimeout(window[timerID]);
|
||||
window[timerID] = setTimeout(function() {
|
||||
self._resizeChildren();
|
||||
layout();
|
||||
}, 200);
|
||||
});
|
||||
|
||||
|
|
@ -102,31 +111,6 @@
|
|||
complete: onSessionLost
|
||||
});
|
||||
}, this.getPingIntervalSeconds() * 1000);
|
||||
},
|
||||
|
||||
/**
|
||||
* Function: _resizeChildren
|
||||
*
|
||||
* Resize elements in center panel
|
||||
* to fit the boundary box provided by the layout manager.
|
||||
*
|
||||
* Todo:
|
||||
* Replace with automated less ugly parent/sibling traversal
|
||||
*/
|
||||
_resizeChildren: function() {
|
||||
$("#treepanes", this).accordion("resize");
|
||||
$('#sitetree_and_tools', this).fitHeightToParent();
|
||||
$('#contentPanel form', this).fitHeightToParent();
|
||||
$('#contentPanel form fieldset', this).fitHeightToParent();
|
||||
$('#contentPanel form fieldset .content', this).fitHeightToParent();
|
||||
$('.edit-form').fitHeightToParent();
|
||||
$('.edit-form fieldset', this).fitHeightToParent();
|
||||
// Order of resizing is important: Outer to inner
|
||||
// TODO Only supports two levels of tabs at the moment
|
||||
$('.edit-form fieldset > .ss-tabset', this).fitHeightToParent();
|
||||
$('.edit-form fieldset > .ss-tabset > .tab', this).fitHeightToParent();
|
||||
$('.edit-form fieldset > .ss-tabset > .tab > .ss-tabset', this).fitHeightToParent();
|
||||
$('.edit-form fieldset > .ss-tabset > .tab > .ss-tabset > .tab', this).fitHeightToParent();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,18 @@
|
|||
//@import "compass/reset";
|
||||
@import "compass/reset";
|
||||
@import "tree.scss";
|
||||
@import "forms.scss";
|
||||
@import "compass/css3/gradient";
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden; // avoid jlayout jitter when resizing
|
||||
}
|
||||
|
||||
body {
|
||||
// @include global-reset;
|
||||
@include global-reset;
|
||||
font-size: 13px;
|
||||
font-family: Verdana, Arial, sans-serif;
|
||||
}
|
||||
|
|
@ -16,12 +25,94 @@ body .ui-widget {
|
|||
font-size: 1em;
|
||||
}
|
||||
|
||||
.logo {
|
||||
// layout
|
||||
|
||||
.cms-container {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.cms-menu {
|
||||
width: 250px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.cms-content {
|
||||
}
|
||||
|
||||
.center, .east, .west, .north, .south {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cms-content-tools {
|
||||
width: 250px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.cms-content-form {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.cms-content-header {
|
||||
|
||||
}
|
||||
|
||||
// main styles
|
||||
|
||||
.cms-menu {
|
||||
background-color: #b0bfc6;
|
||||
}
|
||||
|
||||
.cms-content-header {
|
||||
background-color: #a0b2be
|
||||
}
|
||||
|
||||
.cms-content {
|
||||
background-color: #eef2f3;
|
||||
}
|
||||
|
||||
.cms-content-tools {
|
||||
background-color: #c6d7df;
|
||||
}
|
||||
|
||||
.cms-logo {
|
||||
background-color: #002a43;
|
||||
|
||||
.version {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// logo
|
||||
|
||||
.cms-logo {
|
||||
* {
|
||||
color: #3ebae0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// menu
|
||||
|
||||
.cms-menu {
|
||||
li {
|
||||
display: block;
|
||||
height: 50px;
|
||||
background-color: #afbdc6;
|
||||
@include linear-gradient(color-stops(#afbdc6, #8ea4b2));
|
||||
|
||||
&.current {
|
||||
background-color: #409dc9;
|
||||
@include linear-gradient(color-stops(#409dc9, #1f78b0));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// loading screen
|
||||
|
||||
.ss-loading-screen,
|
||||
.ss-loading-screen .loading-logo {
|
||||
width: 100%;
|
||||
|
|
|
|||
6
admin/templates/Includes/CMSLoadingScreen.ss
Normal file
6
admin/templates/Includes/CMSLoadingScreen.ss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<div class="ss-loading-screen">
|
||||
<div class="loading-logo">
|
||||
<img class="loading-animation" src="sapphire/admin/images/spinner.gif" alt="<% _t('LOADING','Loading...',PR_HIGH) %>" />
|
||||
<noscript><p class="nojs-warning"><span class="message notice"><% _t('REQUIREJS','The CMS requires that you have JavaScript enabled.',PR_HIGH) %></span></p></noscript>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
</strong>
|
||||
<% end_control %>
|
||||
</div>
|
||||
<ul class="main-menu">
|
||||
<ul class="cms-menu-list">
|
||||
<% control MainMenu %>
|
||||
<li class="$LinkingMode" id="Menu-$Code">
|
||||
<a href="$Link">$Title</a>
|
||||
|
|
|
|||
|
|
@ -8,25 +8,38 @@
|
|||
</head>
|
||||
|
||||
<body class="loading $CSSClasses">
|
||||
<div class="ss-loading-screen">
|
||||
<div class="loading-logo">
|
||||
<img class="loading-animation" src="sapphire/admin/images/spinner.gif" alt="<% _t('LOADING','Loading...',PR_HIGH) %>" />
|
||||
<noscript><p class="nojs-warning"><span class="message notice"><% _t('REQUIREJS','The CMS requires that you have JavaScript enabled.',PR_HIGH) %></span></p></noscript>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="east">
|
||||
$CMSTopMenu
|
||||
</div>
|
||||
$CMSLoadingScreen
|
||||
|
||||
<div>
|
||||
$Left
|
||||
</div>
|
||||
|
||||
<div class="right" id="right">
|
||||
$Right
|
||||
</div>
|
||||
<div class="cms-container {layout: {type: 'border'}}">
|
||||
|
||||
<div class="cms-menu west">
|
||||
$CMSTopMenu
|
||||
</div>
|
||||
|
||||
<div class="cms-content center {layout: {type: 'border'}}" id="right">
|
||||
|
||||
<div class="cms-content-header north">
|
||||
<h2>Section title</h2>
|
||||
<ul>
|
||||
<li>Tab 1</li>
|
||||
<li>Tab 2</li>
|
||||
</ul>
|
||||
<div class="cms-content-search"></div>
|
||||
</div>
|
||||
|
||||
<div class="cms-content-tools west">
|
||||
$Left
|
||||
</div>
|
||||
|
||||
<div class="cms-content-form center">
|
||||
$Right
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="contentPanel">
|
||||
<% control EditorToolbar %>
|
||||
$ImageForm
|
||||
|
|
@ -34,16 +47,17 @@
|
|||
$FlashForm
|
||||
<% end_control %>
|
||||
</div>
|
||||
|
||||
<div class="ss-cms-bottom-bar">
|
||||
<div class="holder">
|
||||
<div id="switchView" class="bottomTabs">
|
||||
<% if ShowSwitchView %>
|
||||
<div class="blank"> <% _t('VIEWPAGEIN','Page view:') %> </div>
|
||||
<span id="SwitchView">$SwitchView</span>
|
||||
<% end_if %>
|
||||
|
||||
<!-- <div class="ss-cms-bottom-bar">
|
||||
<div class="holder">
|
||||
<div id="switchView" class="bottomTabs">
|
||||
<% if ShowSwitchView %>
|
||||
<div class="blank"> <% _t('VIEWPAGEIN','Page view:') %> </div>
|
||||
<span id="SwitchView">$SwitchView</span>
|
||||
<% end_if %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user