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

UI updates

This commit is contained in:
alekseybobkov 2016-02-24 21:24:31 -08:00
parent b1770626d7
commit a892fff938
12 changed files with 168 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -818,7 +818,7 @@
color: #666666;
font-size: 12px;
text-align: center;
font-weight: 400;
font-weight: normal;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
@ -828,7 +828,7 @@
margin: 0;
}
.control-filelist ul li {
font-weight: 300;
font-weight: normal;
line-height: 150%;
position: relative;
list-style: none;
@ -852,7 +852,7 @@
}
.control-filelist ul li a {
display: block;
padding: 10px 40px 10px 20px;
padding: 10px 45px 10px 20px;
outline: none;
}
.control-filelist ul li a:hover,
@ -864,26 +864,29 @@
display: block;
}
.control-filelist ul li a span.title {
font-weight: 500;
font-weight: normal;
color: #405261;
font-size: 12px;
font-size: 14px;
}
.control-filelist ul li a span.description {
color: #8f8f8f;
font-size: 12px;
font-weight: 500;
font-size: 13px;
white-space: nowrap;
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
}
.control-filelist ul li a span.description strong {
color: #405261;
font-weight: 500;
font-weight: normal;
}
.control-filelist ul li.group > h4,
.control-filelist ul li.group > div.group > h4 {
font-weight: 500;
font-size: 12px;
font-weight: normal;
font-size: 14px;
margin-top: 0;
margin-bottom: 0;
display: relative;
position: relative;
}
.control-filelist ul li.group > h4 a,
.control-filelist ul li.group > div.group > h4 a {
@ -908,7 +911,8 @@
}
.control-filelist ul li.group > h4 a:after,
.control-filelist ul li.group > div.group > h4 a:after {
left: 34px;
left: 33px;
top: 9px;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
@ -917,8 +921,7 @@
*margin-right: .3em;
content: "\f07b";
color: #a1aab1;
font-size: 14px;
top: 9px;
font-size: 16px;
}
.control-filelist ul li.group > h4 a:before,
.control-filelist ul li.group > div.group > h4 a:before {
@ -1043,8 +1046,8 @@
}
.control-filelist ul li .checkbox {
position: absolute;
top: 13px;
right: 17px;
top: -3px;
right: 3px;
}
.control-filelist ul li .checkbox label {
margin-right: 0;
@ -1067,8 +1070,8 @@
border-bottom: 1px solid #ecf0f1;
}
.control-filelist.hero ul li > a span.title {
font-size: 13px;
font-weight: 600;
font-size: 15px;
font-weight: normal;
color: #2b3e50;
}
.control-filelist.hero ul li > a .list-icon {
@ -1179,7 +1182,7 @@
color: #2b3e50;
font-size: 15px;
margin: 0;
font-weight: 600;
font-weight: bold;
padding: 0;
}
.control-filelist.hero ul > li.group > ul > li > a {
@ -2864,6 +2867,9 @@ body {
.layout > .layout-row > .layout-cell.width-300 {
width: 300px;
}
.layout > .layout-row > .layout-cell.width-350 {
width: 350px;
}
.layout > .layout-row > .layout-cell.layout-container,
.layout > .layout-row > .layout-cell .layout-container,
.layout > .layout-row > .layout-cell.padded-container,
@ -2912,6 +2918,9 @@ body {
.layout > .layout-row > .layout-cell.width-300 {
width: 300px;
}
.layout > .layout-row > .layout-cell.width-350 {
width: 350px;
}
.layout > .layout-row > .layout-cell.layout-container,
.layout > .layout-row > .layout-cell .layout-container,
.layout > .layout-row > .layout-cell.padded-container,
@ -2968,6 +2977,9 @@ body {
.layout > .layout-cell.width-300 {
width: 300px;
}
.layout > .layout-cell.width-350 {
width: 350px;
}
.layout > .layout-cell.layout-container,
.layout > .layout-cell .layout-container,
.layout > .layout-cell.padded-container,
@ -3707,7 +3719,7 @@ body.display-side-panel #layout-side-panel {
display: block;
position: absolute;
z-index: 500;
width: 300px;
width: 350px;
-webkit-box-shadow: 2px 0px 2px 0 rgba(0, 0, 0, 0.3);
box-shadow: 2px 0px 2px 0 rgba(0, 0, 0, 0.3);
}
@ -4472,6 +4484,7 @@ html.csstransitions body.outer.preload .outer-form-container {
display: none;
}
.fancy-layout .form-tabless-fields.collapsed .form-buttons {
margin-left: 10px;
padding-bottom: 0;
}
.fancy-layout .form-tabless-fields .loading-indicator-container .loading-indicator {
@ -4490,16 +4503,17 @@ html.csstransitions body.outer.preload .outer-form-container {
.fancy-layout .form-buttons {
-webkit-transition: all 0.5s;
transition: all 0.5s;
padding-top: 2px;
padding-top: 11px;
padding-bottom: 5px;
}
.fancy-layout .form-buttons .btn {
padding: 0;
margin-right: 5px;
margin-top: -6px;
}
.fancy-layout .form-buttons .btn {
margin-left: -11px;
margin-right: 30px;
background-color: transparent;
}
.fancy-layout .form-buttons .btn {
color: #ffffff;
font-weight: normal;
opacity: 0.5;
filter: alpha(opacity=50);
-webkit-transition: all 0.3s ease;
@ -4509,6 +4523,9 @@ html.csstransitions body.outer.preload .outer-form-container {
opacity: 1;
filter: alpha(opacity=100);
}
.fancy-layout .form-buttons .btn:last-child {
margin-right: 0;
}
.fancy-layout form.oc-data-changed .btn.save {
opacity: 1;
filter: alpha(opacity=100);

41
modules/backend/assets/less/controls/filelist.less
View File

@ -23,7 +23,7 @@
color: @color-filelist-norecords-text;
font-size: 12px;
text-align: center;
font-weight: 400;
font-weight: normal;
.border-radius(@border-radius-base);
}
@ -32,7 +32,7 @@
margin: 0;
li {
font-weight: 300;
font-weight: normal;
line-height: 150%;
position: relative;
list-style: none;
@ -58,7 +58,7 @@
a {
display: block;
padding: 10px 40px 10px 20px;
padding: 10px 45px 10px 20px;
outline: none;
&:hover, &:focus, &:active {text-decoration: none;}
@ -67,19 +67,22 @@
display: block;
&.title {
font-weight: 500;
font-weight: normal;
color: @color-text-title;
font-size: 12px;
font-size: 14px;
}
&.description {
color: @color-text-description;
font-size: 12px;
font-weight: 500;
font-size: 13px;
white-space: nowrap;
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
strong {
color: @color-text-title;
font-weight: 500;
font-weight: normal;
}
}
}
@ -87,11 +90,11 @@
&.group {
> h4, > div.group > h4 {
font-weight: 500;
font-size: 12px;
font-weight: normal;
font-size: 14px;
margin-top: 0;
margin-bottom: 0;
display: relative;
position: relative;
a {
padding: 10px 20px 10px 53px;
@ -110,11 +113,11 @@
}
&:after {
left: 34px;
left: 33px;
top: 9px;
.icon(@folder);
color: @color-list-icon;
font-size: 14px;
top: 9px;
font-size: 16px;
}
&:before {
@ -205,8 +208,8 @@
.checkbox {
position: absolute;
top: 13px;
right: 17px;
top: -3px;
right: 3px;
label {
margin-right: 0;
@ -253,8 +256,8 @@
border-bottom: 1px solid @color-panel-light;
span.title {
font-size: 13px;
font-weight: 600;
font-size: 15px;
font-weight: normal;
color: @color-filelist-title-hero;
}
@ -362,7 +365,7 @@
color: #2b3e50;
font-size: 15px;
margin: 0;
font-weight: 600;
font-weight: bold;
padding: 0;
}
}

20
modules/backend/assets/less/layout/fancylayout.less
View File

@ -482,6 +482,7 @@
}
.form-buttons {
margin-left: 10px;
padding-bottom: 0;
}
}
@ -505,25 +506,28 @@
.form-buttons {
.transition(all 0.5s);
padding-top: 2px;
padding-top: 11px;
padding-bottom: 5px;
margin-top: -6px;
.btn {
margin-left: -11px;
padding: 0;
margin-right: 5px;
margin-top: -6px;
margin-right: 30px;
background-color: transparent;
}
}
.form-buttons {
.btn {
color: @color-fancy-master-tabs-active-text;
font-weight: normal;
.opacity(0.5);
.transition(all 0.3s ease);
&:hover {
.opacity(1);
}
&:last-child {
margin-right: 0;
}
}
}

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

@ -77,6 +77,7 @@ body {
&.width-140 { width: 140px; }
&.width-200 { width: 200px; }
&.width-300 { width: 300px; }
&.width-350 { width: 350px; }
&.layout-container, .layout-container, &.padded-container, .padded-container {
padding: @padding-standard @padding-standard 0 @padding-standard;

2
modules/backend/assets/less/layout/sidepanel.less
View File

@ -65,7 +65,7 @@ body.display-side-panel {
display: block;
position: absolute;
z-index: 500;
width: 300px;
width: 350px;
.box-shadow(2px 0px 2px 0 rgba(0, 0, 0, 0.3));
}
}

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

@ -1,13 +1,12 @@
<?= $this->makePartial('warnings') ?>
<?= Form::open() ?>
<div id="dashReportContainer">
<?= Form::open(['class'=>'layout-relative dashboard-container']) ?>
<div id="dashReportContainer" class="report-container loading">
<!-- Loading -->
<div class="loading-indicator-container">
<div class="loading-indicator">
<span></span>
<div>Loading dashboard...</div>
</div>
</div>
@ -16,6 +15,8 @@
<script>
$(document).ready(function() {
$.request('onInitReportContainer')
$.request('onInitReportContainer').done(function(){
$('#dashReportContainer').removeClass('loading')
})
})
</script>

2
modules/backend/layouts/default.htm
View File

@ -31,7 +31,7 @@
<!-- Side panel -->
<?php if ($sidePanelContent = Block::placeholder('sidepanel')): ?>
<div class="layout-cell width-300 hide-on-small" id="layout-side-panel" data-control="layout-sidepanel">
<div class="layout-cell width-350 hide-on-small" id="layout-side-panel" data-control="layout-sidepanel">
<?= $sidePanelContent ?>
</div>
<?php endif ?>

13
modules/system/assets/ui/images/dashboard-loading-indicator.svg Normal file
View File

@ -0,0 +1,13 @@
<?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

After

Width:  |  Height:  |  Size: 1.1 KiB

18
modules/system/assets/ui/images/october-leaf.svg Normal file
View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="49px" height="65px" viewBox="0 0 49 65" 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>october-leaf</title>
<desc>Created with Sketch.</desc>
<defs>
<path id="path-1" d="M0,0.658 L48.736,0.658 L48.736,65 L0,65"></path>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="logo" sketch:type="MSLayerGroup">
<mask id="mask-2" sketch:name="Clip 2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-2"></g>
<path d="M48.6875,31.4795 C47.6665,15.0415 29.5165,0.8175 22.0395,0.6595 C14.5595,0.5005 0.5805,17.9095 0.0145,35.5975 C-0.5155,52.1825 13.8335,63.5555 20.0105,65.0005 C20.1825,57.1965 20.8155,28.4665 20.9215,25.1165 C21.1445,18.2705 21.4855,7.6195 22.6445,7.2645 C23.3095,7.0615 24.2155,13.0495 24.1045,16.5885 C24.0815,17.2635 24.0735,19.4515 24.0735,22.5545 C25.3245,21.2995 26.6305,19.9975 27.4245,19.2265 C29.6015,17.1175 30.5645,17.3685 29.5205,19.2505 C28.8775,20.4075 26.1125,24.2575 24.0795,27.0475 C24.0905,32.6745 24.1165,39.7565 24.1435,46.3565 C27.0145,43.0425 30.5295,39.0675 32.3755,37.2995 C36.2485,33.5965 36.6605,34.0645 34.8315,37.9515 C33.7085,40.3335 28.2165,46.6875 24.1635,51.6985 C24.1885,57.5535 24.2085,62.4765 24.2125,64.8275 C35.0855,62.4675 49.6865,47.6185 48.6875,31.4795" id="Fill-1" fill="#DB6A26" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

46
modules/system/assets/ui/less/dashboard.less Normal file
View File

@ -0,0 +1,46 @@
.dashboard-container > .report-container {
&.loading {
position: absolute;
width: 100%;
height: 100%;
.loading-indicator-container {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
.loading-indicator {
padding: 0;
height: 150px;
top: 50%;
margin-top: -90px;
&:before {
content: '';
background: transparent url('images/october-leaf.svg') no-repeat;
background-size: 49px 65px;
width: 49px;
height: 65px;
left: 50%;
top: 50%;
margin-top: -33px;
margin-left: -24px;
position: absolute;
.opacity(0.2);
}
> 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');
}
}
}
}
}

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

@ -1572,6 +1572,11 @@ div.scoreboard .control-chart ul li > i{margin-left:-18px}
div.scoreboard .control-chart .canvas + ul{margin-left:0}
div.scoreboard .scoreboard-offset{padding-left:20px}
body.slim-container div.scoreboard{padding:0 25px}
.dashboard-container > .report-container.loading{position:absolute;width:100%;height:100%}
.dashboard-container > .report-container.loading .loading-indicator-container{position:absolute;left:0;top:0;height:100%;width:100%}
.dashboard-container > .report-container.loading .loading-indicator-container .loading-indicator{padding:0;height:150px;top:50%;margin-top:-90px}
.dashboard-container > .report-container.loading .loading-indicator-container .loading-indicator:before{content:'';background:transparent url('images/october-leaf.svg') no-repeat;background-size:49px 65px;width:49px;height:65px;left:50%;top:50%;margin-top:-33px;margin-left:-24px;position:absolute;opacity:0.2;filter:alpha(opacity=20)}
.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')}
#layout-canvas .flash-message{display:none}
.flash-message{position:fixed;width:500px;left:50%;top:13px;margin-left:-250px;color:#ffffff;font-size:13px;padding:10px 30px 10px 15px;z-index:10000;word-wrap:break-word;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.flash-message.fade{opacity:0;filter:alpha(opacity=0);-webkit-transition:all 0.5s,width 0s;transition:all 0.5s,width 0s;-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}

1
modules/system/assets/ui/storm.less
View File

@ -16,6 +16,7 @@
@import "less/tab.less";
@import "less/chart.less";
@import "less/scoreboard.less";
@import "less/dashboard.less";
@import "less/flashmessage.less";
@import "less/icon.less";
@import "less/flag.less";