tonyair
/
silverstripe-cms
mirror of https://github.com/silverstripe/silverstripe-cms
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ENHANCEMENT: Improve CMS loading screen #6254 

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@115117 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Saophalkun Ponlu 2010-12-16 04:08:02 +00:00
parent 28ee63fed1
commit d97cfcbc7f
7 changed files with 68 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
code/LeftAndMain.php
View File

@ -1198,7 +1198,12 @@ class LeftAndMain extends Controller {
self::$application_logo_text = '';
}
protected static $loading_image = 'cms/images/loading.gif';
/**
* The height of the image should be around 164px to avoid the overlaping between the image and loading animation graphic.
* If the given image's height is significantly larger or smaller, adjust the loading animation's top offset in
* positionLoadingSpinner() in LeftAndMain.js
*/
protected static $loading_image = 'cms/images/logo.gif';
/**
* Set the image shown when the CMS is loading.

44
css/layout.css
View File

@ -14,16 +14,54 @@ body {
height: 100%;
}
.ss-loading-screen {
.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, #FFFFFF, #EFEFEF, #C7C7C7 100%);
background: -webkit-gradient(radial, 50% 50%, 350, 50% 50%, 0, from(#E3E3E3), to(white));
z-index: 100000;
margin: 0;
padding: 0;
}
.ss-loading-screen .loading-logo {
background-repeat: no-repeat;
background-color: transparent;
background-position: 50% 50%;
}
.ss-loading-screen p {
width: 100%;
text-align: center;
position: fixed;
bottom: 0px;
position: absolute;
bottom: 80px;
}
.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);
}
.ss-loading-screen .loading-animation {
display: none;
position: absolute;
left: 49%;
top: 75%;
}
/*

BIN
images/loading.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.9 KiB

BIN
images/logo.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
images/spinner.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

15
javascript/LeftAndMain.js
View File

@ -10,6 +10,20 @@ var ss_MainLayout;
(function($) {
$.entwine('ss', function($){
$('.nojs-warning').hide();
/**
* Position the loading spinner animation below the ss logo
*/
var positionLoadingSpinner = function() {
var offset = 120; // offset from the ss logo
var spinner = $('.ss-loading-screen .loading-animation');
var top = ($(window).height() - spinner.height()) / 2;
spinner.css('top', top + offset);
spinner.show();
}
$(window).bind('resize', positionLoadingSpinner).trigger('resize');
// setup jquery.entwine
$.entwine.warningLevel = $.entwine.WARN_LEVEL_BESTPRACTISE;
@ -54,6 +68,7 @@ var ss_MainLayout;
// Remove loading screen
$('.ss-loading-screen').hide();
$('body').removeClass('stillLoading');
$(window).unbind('resize', positionLoadingSpinner);
// Layout
ss_MainLayout = this._setupLayout();

7
templates/LeftAndMain.ss
View File

@ -9,7 +9,12 @@
</head>
<body class="stillLoading $CSSClasses">
<div class="ss-loading-screen" style="background: #FFF url($LoadingImage) 50% 50% no-repeat; position: absolute;z-index: 100000;height: 100%;width: 100%;margin: 0;padding: 0;z-index: 100000;position: absolute;"><% _t('LOADING','Loading...',PR_HIGH) %><noscript><p class="message notice"><% _t('REQUIREJS','The CMS requires that you have JavaScript enabled.',PR_HIGH) %></p></noscript></div>
<div class="ss-loading-screen">
<div class="loading-logo" style="background-image: url($LoadingImage);">
<img class="loading-animation" src="cms/images/spinner.gif" alt="<% _t('LOADING','Loading...',PR_HIGH) %>" />
<p class="nojs-warning"><span class="message notice"><% _t('REQUIREJS','The CMS requires that you have JavaScript enabled.',PR_HIGH) %></span></p>
</div>
</div>
<div class="ui-layout-north ss-cms-top-menu">
$CMSTopMenu