TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Create centered loader with text 

Continuity styling updates
This commit is contained in:
Samuel Georges 2016-05-26 05:20:26 +10:00
parent 313321e6a6
commit 010a769b19
13 changed files with 1442 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
modules/backend/assets/css/dashboard/dashboard.css
View File

@ -1,13 +1,7 @@
.dashboard-container > .report-container {
-webkit-transition: background 1s ease;
transition: background 1s ease;
border-radius: 5px;
}
.dashboard-container > .report-container.loading {
position: absolute;
width: 100%;
height: 100%;
background: #fff;
}
.dashboard-container > .report-container.loading .loading-indicator-container {
position: absolute;
@ -16,54 +10,3 @@
width: 100%;
height: 100%;
}
.dashboard-container > .report-container.loading .loading-indicator-container .loading-indicator {
background: transparent;
padding: 0;
height: 150px;
top: 50%;
margin-top: -90px;
}
.dashboard-container > .report-container.loading .loading-indicator-container .loading-indicator:after {
content: '';
background: transparent url('../../images/dashboard-loading-indicator.svg') no-repeat;
background-size: 100px 100px;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
position: absolute;
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
.dashboard-container > .report-container.loading .loading-indicator-container .loading-indicator:before {
content: '';
background: transparent url('../../images/dashboard-loading-indicator.svg') no-repeat;
background-size: 150px 150px;
width: 150px;
height: 150px;
left: 50%;
top: 50%;
margin-top: -75px;
margin-left: -75px;
position: absolute;
/*.animation(rspin 1.5s linear infinite);*/
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
opacity: 0.9;
filter: alpha(opacity=90);
}
.dashboard-container > .report-container.loading .loading-indicator-container .loading-indicator > span {
left: 50%;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
background-size: 200px 200px;
background-image: url('../../images/dashboard-loading-indicator.svg');
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
opacity: 0.8;
filter: alpha(opacity=80);
}

2
modules/backend/assets/css/october.css
View File

@ -585,7 +585,7 @@ body.dragging,body.dragging *{cursor:move !important}
body.loading,body.loading *{cursor:wait !important}
body.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default !important}
html,body{height:100%; }
body{webkit-font-smoothing:antialiased;font-family:sans-serif;background:#f9f9f9}
body{font-family:sans-serif;background:#f9f9f9;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
#layout-canvas{min-height:100%;height:100%}
.control-tabs.primary-tabs > ul.nav-tabs,.control-tabs.primary-tabs > div > ul.nav-tabs,.control-tabs.primary-tabs > div > div > ul.nav-tabs{margin-left:-20px;margin-right:-20px}
.control-tabs.primary-tabs.tabs-no-inset > ul.nav-tabs,.control-tabs.primary-tabs.tabs-no-inset > div > ul.nav-tabs,.control-tabs.primary-tabs.tabs-no-inset > div > div > ul.nav-tabs{margin-left:0;margin-right:0}

13
modules/backend/assets/images/dashboard-loading-indicator.svg
View File

@ -1,13 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="240px" height="240px" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
<title>dashboard-loading-indicator</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Dashboard" sketch:type="MSLayerGroup">
<rect id="Rectangle-1" opacity="0.00874533582" fill="#FFFFFF" sketch:type="MSShapeGroup" x="0" y="0" width="240" height="240"></rect>
<path d="M39.4136706,179.221343 C57.6187466,203.95263 86.9353412,220 120,220 C175.228475,220 220,175.228475 220,120 C220,64.771525 175.228475,20 120,20 C79.2272481,20 44.1537628,44.4014613 28.5865512,79.3973768" id="Oval-2" stroke="#E8ECED" stroke-width="12" stroke-linecap="round" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

53
modules/backend/assets/less/dashboard/dashboard.less
View File

@ -1,14 +1,10 @@
@import "../../../../backend/assets/less/core/boot.less";
.dashboard-container > .report-container {
.transition(background 1s ease);
.border-radius(5px);
&.loading {
position: absolute;
width: 100%;
height: 100%;
background: #fff;
.loading-indicator-container {
position: absolute;
@ -16,55 +12,6 @@
top: 0;
width: 100%;
height: 100%;
.loading-indicator {
background: transparent;
padding: 0;
height: 150px;
top: 50%;
margin-top: -90px;
&:after {
content: '';
background: transparent url('../../images/dashboard-loading-indicator.svg') no-repeat;
background-size: 100px 100px;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
position: absolute;
.animation(spin 1s linear infinite);
}
&:before {
content: '';
background: transparent url('../../images/dashboard-loading-indicator.svg') no-repeat;
background-size: 150px 150px;
width: 150px;
height: 150px;
left: 50%;
top: 50%;
margin-top: -75px;
margin-left: -75px;
position: absolute;
.animation(spin 1.5s linear infinite);
.opacity(.9);
}
> span {
left: 50%;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
background-size: 200px 200px;
background-image: url('../../images/dashboard-loading-indicator.svg');
.animation(spin 2s linear infinite);
.opacity(.8);
}
}
}
}
}

5
modules/backend/assets/less/layout/layout.less
View File

@ -33,9 +33,10 @@ body {
}
body {
webkit-font-smoothing: antialiased;
font-family: @font-family-base;
background: @body-bg;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#layout-canvas {
@ -53,8 +54,6 @@ body {
//
// body {
// font-family: 'Noto Sans', sans-serif;
// -webkit-font-smoothing: antialiased;
// -moz-osx-font-smoothing: grayscale;
// }
//

3
modules/backend/controllers/index/index.htm
View File

@ -5,8 +5,9 @@
<!-- Loading -->
<div class="loading-indicator-container">
<div class="loading-indicator">
<div class="loading-indicator indicator-center">
<span></span>
<div>Loading...</div>
</div>
</div>

20
modules/backend/widgets/reportcontainer/assets/js/reportcontainer.js
View File

@ -78,16 +78,18 @@
})
this.$el.on('click', '.content > button.close', function() {
if (!confirm('Remove the widget?'))
return false
var $btn = $(this)
$.oc.confirm('Remove this widget?', function() {
self.$form.request(self.alias + '::onRemoveWidget', {
data: {
'alias': $('[data-widget-alias]', $btn.closest('div.content')).val()
}
})
self.$form.request(self.alias + '::onRemoveWidget', {data: {
'alias': $('[data-widget-alias]', $(this).closest('div.content')).val()
}})
$(this).closest('li').remove()
self.redraw()
self.setSortOrders()
$btn.closest('li').remove()
self.redraw()
self.setSortOrders()
})
})
$(window).on('oc.report-widget-added', function(){

1408
modules/backend/widgets/reportcontainer/assets/vendor/isotope/jquery.isotope.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

6
modules/backend/widgets/reportcontainer/assets/vendor/isotope/jquery.isotope.min.js vendored
View File

File diff suppressed because one or more lines are too long

13
modules/system/assets/ui/docs/loader.md
View File

@ -8,9 +8,9 @@ A loading indicator used in a container.
<div class="loading-indicator-container">
<div class="loading-indicator">
<span></span>
<p>This is some content inside the container</p>
<p>The loading indicator must be prepended to it</p>
</div>
<p>This is some content inside the container</p>
<p>The loading indicator must be prepended to it</p>
</div>
#### Text Loading Indicator
@ -44,6 +44,15 @@ A loading indicator can be aligned to the center by adding `indicator-center` to
</div>
</div>
You may add some optional text:
<div class="loading-indicator-container">
<div class="loading-indicator indicator-center">
<span></span>
<div>Loading...</div>
</div>
</div>
# Example
<div class="loading-indicator-container">

2
modules/system/assets/ui/less/checkbox.less
View File

@ -98,7 +98,7 @@
display: inline-block;
position: absolute;
left: 0;
top: 3px;
top: 2px;
.border-radius(17px);
}
}

2
modules/system/assets/ui/less/loader.less
View File

@ -108,9 +108,9 @@ html.cssanimations {
}
> div {
top: auto;
text-align: center;
position: relative;
margin-top: 30px;
}
}

4
modules/system/assets/ui/storm.css
View File

@ -2078,7 +2078,7 @@ html.cssanimations .loading-indicator.is-opaque > span,html.cssanimations .loadi
html.cssanimations .loading-indicator.size-small > span,html.cssanimations .loading-indicator-container.size-small .loading-indicator > span{background-size:20px 20px}
.loading-indicator.indicator-center,.loading-indicator-container.indicator-center .loading-indicator{padding:20px}
.loading-indicator.indicator-center > span,.loading-indicator-container.indicator-center .loading-indicator > span{left:50%;margin-left:-20px;margin-top:-20px}
.loading-indicator.indicator-center > div,.loading-indicator-container.indicator-center .loading-indicator > div{top:auto;text-align:center;position:relative}
.loading-indicator.indicator-center > div,.loading-indicator-container.indicator-center .loading-indicator > div{text-align:center;position:relative;margin-top:30px}
.loading-indicator.indicator-inset,.loading-indicator-container.indicator-inset .loading-indicator{padding-left:80px}
.loading-indicator.indicator-inset > span,.loading-indicator-container.indicator-inset .loading-indicator > span{left:20px}
.loading-indicator-container.size-form-field,.loading-indicator-container.size-input-text{min-height:0}
@ -2321,7 +2321,7 @@ html.cssanimations .cursor-loading-indicator.hide{display:none}
.custom-checkbox label:hover:before,.custom-radio label:hover:before{border-color:#b5bdc2}
.custom-checkbox label:active:before,.custom-radio label:active:before{border-color:#99a4ab;border-width:2px}
.custom-checkbox input[type=radio]:checked + label:before,.custom-radio input[type=radio]:checked + label:before{border-color:#1f99dc;line-height:17px;border-width:2px}
.custom-checkbox input[type=radio]:checked + label:after,.custom-radio input[type=radio]:checked + label:after{content:'';width:12px;height:12px;background-color:#1f99dc;display:inline-block;position:absolute;left:0;top:3px;-webkit-border-radius:17px;-moz-border-radius:17px;border-radius:17px}
.custom-checkbox input[type=radio]:checked + label:after,.custom-radio input[type=radio]:checked + label:after{content:'';width:12px;height:12px;background-color:#1f99dc;display:inline-block;position:absolute;left:0;top:2px;-webkit-border-radius:17px;-moz-border-radius:17px;border-radius:17px}
.custom-checkbox input[type=radio][data-radio-color=green]:checked + label:before,.custom-radio input[type=radio][data-radio-color=green]:checked + label:before{border-color:#76a544}
.custom-checkbox input[type=radio][data-radio-color=green]:checked + label:after,.custom-radio input[type=radio][data-radio-color=green]:checked + label:after{background-color:#76a544}
.custom-checkbox input[type=radio][data-radio-color=red]:checked + label:before,.custom-radio input[type=radio][data-radio-color=red]:checked + label:before{border-color:#bb2424}