mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-09-30 05:09:06 +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:
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.js');
|
||||||
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Panel.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.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.EditForm.js');
|
||||||
Requirements::javascript(SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Menu.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.AddForm.js');
|
||||||
@ -314,6 +315,7 @@ class LeftAndMain extends Controller {
|
|||||||
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.js',
|
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.js',
|
||||||
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Panel.js',
|
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Panel.js',
|
||||||
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Tree.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.EditForm.js',
|
||||||
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Menu.js',
|
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.Menu.js',
|
||||||
SAPPHIRE_ADMIN_DIR . '/javascript/LeftAndMain.AddForm.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 { 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 { 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:hover .icon { background-position: -32px 0px; }
|
||||||
.cms-menu-list li a .text { display: block; padding-top: 10px; }
|
.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 { 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; }
|
.cms-content-tools { background-color: #dce3e6; }
|
||||||
|
|
||||||
/** ------------------------------------------------------- Top Left Header and logo area -------------------------------------------------------- */
|
.cms-content.loading { background: url(../images/spinner.gif) no-repeat 50% 50%; }
|
||||||
.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 { 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 span a { color: #3ebae0; display: inline; }
|
.cms-header * { color: white; }
|
||||||
|
|
||||||
.cms-logo { border-bottom: 1px solid #03090c; height: 31px; overflow: hidden; padding: 0 4px; vertical-align: middle; }
|
.cms-logo { border-bottom: 1px solid #03090c; height: 31px; overflow: hidden; padding: 0 4px; vertical-align: middle; }
|
||||||
.cms-logo .version { display: none; }
|
.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($){
|
$.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({
|
$('.cms-menu.collapsed li').entwine({
|
||||||
|
@ -54,9 +54,9 @@
|
|||||||
if(!container.hasClass('CMSMain')) return;
|
if(!container.hasClass('CMSMain')) return;
|
||||||
|
|
||||||
// Load this page in the admin interface if appropriate
|
// 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
|
// 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() {
|
_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
|
* Top Left Header and logo area
|
||||||
|
@ -1 +1,3 @@
|
|||||||
|
<div class="cms-content center ss-tabset" data-layout="{type: 'border'}">
|
||||||
$EditForm
|
$EditForm
|
||||||
|
</div>
|
@ -1,7 +1,3 @@
|
|||||||
<% if IncludeFormTag %>
|
|
||||||
<form $FormAttributes data-layout="{type: 'border'}">
|
|
||||||
<% end_if %>
|
|
||||||
|
|
||||||
<div class="cms-content-header north">
|
<div class="cms-content-header north">
|
||||||
<div>
|
<div>
|
||||||
<h2> My Page Title</h2>
|
<h2> My Page Title</h2>
|
||||||
@ -21,11 +17,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="cms-content-form center">
|
||||||
|
|
||||||
|
<% if IncludeFormTag %>
|
||||||
|
<form $FormAttributes>
|
||||||
|
<% end_if %>
|
||||||
|
|
||||||
<!-- <div class="cms-content-tools west">
|
<!-- <div class="cms-content-tools west">
|
||||||
$Left
|
$Left
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|
||||||
<div class="cms-content-form center">
|
<div class="center">
|
||||||
|
|
||||||
<% if Message %>
|
<% if Message %>
|
||||||
<p id="{$FormName}_error" class="message $MessageType">$Message</p>
|
<p id="{$FormName}_error" class="message $MessageType">$Message</p>
|
||||||
@ -56,3 +58,5 @@
|
|||||||
<% if IncludeFormTag %>
|
<% if IncludeFormTag %>
|
||||||
</form>
|
</form>
|
||||||
<% end_if %>
|
<% end_if %>
|
||||||
|
|
||||||
|
</div>
|
Loading…
Reference in New Issue
Block a user