mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-06-26 14:39:25 +02:00
ENHANCEMENT Consistently wrapping CMS forms in <div class="cms-content">, added LeftAndMain.Content.js to reload panels via ajax, hooking into preview logic
This commit is contained in:
Ingo Schommer
parent
2b56d2a8d8
commit
4e0949f565
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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
40
admin/javascript/LeftAndMain.Content.js
Normal 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);
|
||||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1 +1,3 @@
|
|||
$EditForm
|
||||
<div class="cms-content center ss-tabset" data-layout="{type: 'border'}">
|
||||
$EditForm
|
||||
</div>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user