tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 12:05:37 +00:00
Code Issues Projects Releases Wiki Activity

ENHANCEMENT Consistently wrapping CMS forms in <div class="cms-content">, added LeftAndMain.Content.js to reload panels via ajax, hooking into preview logic

Browse Source
This commit is contained in:
Ingo Schommer 2011-05-20 11:38:36 +12:00
parent 2b56d2a8d8
commit 4e0949f565
8 changed files with 103 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
admin/code/LeftAndMain.php
View File

@ -256,6 +256,7 @@ class LeftAndMain extends Controller {
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.Content.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');
@ -314,6 +315,7 @@ class LeftAndMain extends Controller {
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.Content.js',
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.EditForm.js',
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Menu.js',
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.AddForm.js',

10
admin/css/screen.css
View File

@ -144,7 +144,7 @@ li.jstree-closed > ul { display: 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?1305262748') no-repeat; width: 32px; height: 32px; overflow: hidden; background-position: 0px 0px; }
.cms-menu-list li a .icon { display: block; float: left; margin-right: 5px; background: url('../images/icons-32.png?1305837920') no-repeat; width: 32px; height: 32px; overflow: hidden; background-position: 0px 0px; }
.cms-menu-list li a:hover .icon { background-position: -32px 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%); }
@ -240,10 +240,10 @@ strong { font-weight: bold; }
.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%); }
.cms-header span { color: white; white-space: no-wrap; text-overflow: ellipsis; display: block; }
.cms-header span a { color: #3ebae0; display: inline; }
.cms-content.loading { background: url(../images/spinner.gif) no-repeat 50% 50%; }
.cms-header { background-color: #00111d; 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%); }
.cms-header * { color: white; }
.cms-logo { border-bottom: 1px solid #03090c; height: 31px; overflow: hidden; padding: 0 4px; vertical-align: middle; }
.cms-logo .version { display: none; }

40
admin/javascript/LeftAndMain.Content.js Normal file
View File

@ -0,0 +1,40 @@
(function($) {
$.entwine('ss', function($){
$('.LeftAndMain .cms-content').entwine({
redraw: function() {
},
cleanup: function() {
this.empty();
},
loadPanel: function(url, callback, ajaxOptions) {
var self = this;
this.trigger('load', {url: url, args: arguments});
this.cleanup();
// TODO Add browser history support
return $.ajax($.extend({
url: url,
complete: function(xmlhttp, status) {
self.loadPanel_onSuccess(xmlhttp.responseText, status, xmlhttp);
self.removeClass('loading');
if(callback) callback.apply(self, arguments);
},
dataType: 'html'
}, ajaxOptions));
},
loadPanel_onSuccess: function(html, status, xmlhttp) {
this.html(html);
this.redraw();
}
});
});
})(jQuery);

8
admin/javascript/LeftAndMain.Menu.js
View File

@ -2,8 +2,12 @@
$.entwine('ss', function($){
$('.cms-menu').entwine({
$('.cms-menu li a').entwine({
onclick: function(e) {
e.preventDefault();
console.debug($('.LeftAndMain .cms-content'));
$('.LeftAndMain .cms-content').entwine('ss').loadPanel(this.attr('href'));
}
});
$('.cms-menu.collapsed li').entwine({

4
admin/javascript/LeftAndMain.Preview.js
View File

@ -54,9 +54,9 @@
if(!container.hasClass('CMSMain')) return;
// Load this page in the admin interface if appropriate
var id = $(doc).find('meta[name=x-page-id]').attr('content'), form = $('.cms-edit-form');
var id = $(doc).find('meta[name=x-page-id]').attr('content'), contentPanel = $('.cms-content');
// TODO Remove hardcoding
if(id && form.find(':input[name=ID]').val() != id) form.loadForm('admin/page/edit/show/' + id);
if(id && contentPanel.find(':input[name=ID]').val() != id) contentPanel.loadPanel('admin/page/edit/show/' + id);
},
_fixIframeLinks: function() {

7
admin/scss/_style.scss
View File

@ -130,6 +130,13 @@ strong {
}
}
.cms-content {
&.loading {
background: url(../images/spinner.gif) no-repeat 50% 50%;
}
}
// ######################### Header and Logo #########################
/** -------------------------------------------------------
* Top Left Header and logo area

4
admin/templates/Includes/LeftAndMain_Content.ss
View File

@ -1 +1,3 @@
$EditForm
<div class="cms-content center ss-tabset" data-layout="{type: 'border'}">
$EditForm
</div>

72
admin/templates/Includes/LeftAndMain_EditForm.ss
View File

@ -1,10 +1,6 @@
<% if IncludeFormTag %>
<form $FormAttributes data-layout="{type: 'border'}">
<% end_if %>
<div class="cms-content-header north">
<div>
<h2>My Page Title</h2>
<h2> My Page Title</h2>
<% if Fields.hasTabset %>
<% with Fields.fieldByName('Root') %>
<div class="cms-content-header-tabs">
@ -21,38 +17,46 @@
</div>
</div>
<!-- <div class="cms-content-tools west">
$Left
</div> -->
<div class="cms-content-form center">
<% if Message %>
<p id="{$FormName}_error" class="message $MessageType">$Message</p>
<% else %>
<p id="{$FormName}_error" class="message $MessageType" style="display: none"></p>
<% if IncludeFormTag %>
<form $FormAttributes>
<% end_if %>
<fieldset>
<% if Legend %><legend>$Legend</legend><% end_if %>
<% control Fields %>
$FieldHolder
<% end_control %>
<div class="clear"><!-- --></div>
</fieldset>
</div>
<!-- <div class="cms-content-tools west">
$Left
</div> -->
<div class="cms-content-actions south">
<% if Actions %>
<div class="Actions">
<% control Actions %>
$Field
<% end_control %>
<div class="center">
<% if Message %>
<p id="{$FormName}_error" class="message $MessageType">$Message</p>
<% else %>
<p id="{$FormName}_error" class="message $MessageType" style="display: none"></p>
<% end_if %>
<fieldset>
<% if Legend %><legend>$Legend</legend><% end_if %>
<% control Fields %>
$FieldHolder
<% end_control %>
<div class="clear"><!-- --></div>
</fieldset>
</div>
<% end_if %>
</div>
<% if IncludeFormTag %>
</form>
<% end_if %>
<div class="cms-content-actions south">
<% if Actions %>
<div class="Actions">
<% control Actions %>
$Field
<% end_control %>
</div>
<% end_if %>
</div>
<% if IncludeFormTag %>
</form>
<% end_if %>
</div>