Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

ENHANCEMENT Implemented new jLayout layout manager, more expressive c…

…lass names in LeftAndMain.ss
  • Loading branch information...
commit b2738615913be24ea2bb289ad42cc04ccee20457 1 parent 85386b4
@chillu chillu authored
View
3  admin/code/LeftAndMain.php
@@ -210,6 +210,9 @@ function init() {
// 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');
View
101 admin/css/screen.css
@@ -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 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 11, ../scss/screen.scss */
+/* line 20, ../scss/screen.scss */
body * { font-size: 13px; }
-/* line 15, ../scss/screen.scss */
+/* line 24, ../scss/screen.scss */
body .ui-widget { font-size: 1em; }
-/* line 20, ../scss/screen.scss */
-.logo .version { display: none; }
+/* 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 26, ../scss/screen.scss */
+/* 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%; }
View
36 admin/javascript/LeftAndMain.js
@@ -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();
}
});
View
97 admin/scss/screen.scss
@@ -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%;
View
6 admin/templates/Includes/CMSLoadingScreen.ss
@@ -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>
View
2  admin/templates/Includes/CMSTopMenu.ss
@@ -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>
View
66 admin/templates/LeftAndMain.ss
@@ -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>
Please sign in to comment.
Something went wrong with that request. Please try again.