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

Backend UI improvements

This commit is contained in:
Samuel Georges 2017-05-20 20:00:24 +10:00
parent dc528e875c
commit cefa19af7d
13 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -426,7 +426,7 @@ body.dragging .control-treeview.treeview-light ol.dragging > li > div,body.dragg
.sidenav-tree ul.top-level > li[data-status=collapsed] > div.group:before,.sidenav-tree ul.top-level > li[data-status=collapsed] > div.group:after{display:none}
.sidenav-tree ul.top-level > li[data-status=collapsed] ul{display:none}
.sidenav-tree ul.top-level > li > div.group{position:relative}
.sidenav-tree ul.top-level > li > div.group h3{background:rgba(0,0,0,0.15);color:#ecf0f1;text-transform:uppercase;font-size:15px;padding:15px 15px 15px 40px;margin:0;position:relative;cursor:pointer}
.sidenav-tree ul.top-level > li > div.group h3{background:rgba(0,0,0,0.15);color:#ecf0f1;text-transform:uppercase;font-size:15px;padding:15px 15px 15px 40px;margin:0;position:relative;cursor:pointer;font-weight:400}
.sidenav-tree ul.top-level > li > div.group h3:before{display:block;position:absolute;width:10px;height:10px;left:16px;top:15px;color:#cfcfcf;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f105";-webkit-transform:rotate(90deg) translate(5px,-3px);-ms-transform:rotate(90deg) translate(5px,-3px);transform:rotate(90deg) translate(5px,-3px);-webkit-transition:all 0.1s ease;transition:all 0.1s ease;font-size:16px}
.sidenav-tree ul.top-level > li > div.group:before,.sidenav-tree ul.top-level > li > div.group:after{content:'';display:block;width:0;height:0;border-left:7.5px solid transparent;border-right:7.5px solid transparent;border-top:8px solid #34495e;border-bottom-width:0;position:absolute;left:15px;bottom:-8px;z-index:101}
.sidenav-tree ul.top-level > li > div.group:after{content:'';display:block;width:0;height:0;border-left:7.5px solid transparent;border-right:7.5px solid transparent;border-top:8px solid rgba(0,0,0,0.15);border-bottom-width:0}

1
modules/backend/assets/js/october-min.js vendored
View File

@ -917,6 +917,7 @@ fixedWidth+=$el.get(0).offsetWidth+margin})
$(this).width(fixedWidth)
$(this).trigger('oc.widthFixed')}})}
OctoberLayout.prototype.toggleAccountMenu=function(el){var self=this,$el=$(el),$parent=$(el).parent(),$menu=$el.next()
$el.tooltip('hide')
if($menu.hasClass('active')){self.$accountMenuOverlay.remove()
$parent.removeClass('highlight')
$menu.removeClass('active')}

2
modules/backend/assets/js/october.layout.js
View File

@ -44,6 +44,8 @@
$parent = $(el).parent(),
$menu = $el.next()
$el.tooltip('hide')
if ($menu.hasClass('active')) {
self.$accountMenuOverlay.remove()
$parent.removeClass('highlight')

1
modules/backend/assets/less/controls/sidenav-tree.less
View File

@ -61,6 +61,7 @@
margin: 0;
position: relative;
cursor: pointer;
font-weight: 400;
&:before {
display: block;

9
modules/backend/layouts/_mainmenu.htm
View File

@ -48,11 +48,10 @@
<i class="icon-crosshairs"></i>
</a>
</li>
<li class="mainmenu-account">
<a href="javascript:;" onclick="$.oc.layout.toggleAccountMenu(this)">
<span class="account-name hidden-xs">
<?= e($this->user->first_name.' '.$this->user->last_name) ?>
</span>
<li class="mainmenu-account with-tooltip">
<a
href="javascript:;" onclick="$.oc.layout.toggleAccountMenu(this)"
title="Signed in as <?= e($this->user->full_name) ?>">
<img src="<?= $this->user->getAvatarThumb(90, ['mode' => 'crop', 'extension' => 'png']) ?>" class="account-avatar" />
</a>
<div class="mainmenu-accountmenu">

2
modules/system/assets/css/styles.css
View File

@ -1044,7 +1044,7 @@ address{margin-bottom:20px;font-style:normal;line-height:1.42857143}
.oc-icon-themeisle:before,.icon-themeisle:before{content:"\f2b2"}
.oc-icon-google-plus-circle:before,.icon-google-plus-circle:before,.oc-icon-google-plus-official:before,.icon-google-plus-official:before{content:"\f2b3"}
.oc-icon-fa:before,.icon-fa:before,.oc-icon-font-awesome:before,.icon-font-awesome:before{content:"\f2b4"}
.close{float:right;font-size:21px;font-weight:bold;line-height:1;color:#000000;text-shadow:0 1px 0 #ffffff;opacity:0.2;filter:alpha(opacity=20)}
.close{float:right;font-size:21px;font-weight:bold;line-height:1;color:#000000;text-shadow:0 1px 0 #ffffff;font-family:sans-serif;opacity:0.2;filter:alpha(opacity=20)}
.close:hover,.close:focus{color:#000000;text-decoration:none;cursor:pointer;opacity:0.5;filter:alpha(opacity=50)}
button.close{padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}
@font-face{font-family:'FontAwesome';src:url('../ui/font/fontawesome-webfont.eot?v=1.0.1');src:url('../ui/font/fontawesome-webfont.eot?#iefix&v=1.0.1') format('embedded-opentype'),url('../ui/font/fontawesome-webfont.woff?v=1.0.1') format('woff'),url('../ui/font/fontawesome-webfont.ttf?v=1.0.1') format('truetype'),url('../ui/font/fontawesome-webfont.svg#fontawesomeregular?v=1.0.1') format('svg');font-weight:normal;font-style:normal}

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

@ -68,7 +68,7 @@
margin-right: 15px;
position: absolute;
left: -3px;
top: -1px;
top: 0;
background-color: #FFFFFF;
border: 1px solid @color-checkbox-border;
.box-shadow(@input-box-shadow);

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

@ -81,7 +81,7 @@
background-image: url('@{image-path}/bitmap-icons.png');
&.plus { background-position: right -124px; }
&.search { background-position: right -83px; }
&.search { background-position: right -84px; }
&.user { background-position: right -41px; }
&.lock { background-position: right 0; }
}

1
modules/system/assets/ui/less/icon.close.less
View File

@ -9,6 +9,7 @@
line-height: 1;
color: @close-color;
text-shadow: @close-text-shadow;
font-family: sans-serif;
.opacity(.2);
&:hover,

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

@ -297,7 +297,7 @@ table.table.data {
.list-badge {
display: inline-block;
position: relative;
top: -1px;
top: 0;
margin: 0 5px 0 0;
padding: 1px 0 0 0;
font-size: 10px;

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

@ -15,7 +15,7 @@
@color-scroll-indicator: #bbbbbb;
@color-tab-border: #e0e0e0;
@color-tab-inactive-text: rgba(0,0,0,.4);
@color-tab-inactive-text: #bbbbbb;
@color-tab-active-text: @color-text-title;
@color-tab-active-border: #d0d0d0;
@color-tab-bg: #ffffff;

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

@ -1309,7 +1309,7 @@ input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button"
.oc-icon-themeisle:before,.icon-themeisle:before{content:"\f2b2"}
.oc-icon-google-plus-circle:before,.icon-google-plus-circle:before,.oc-icon-google-plus-official:before,.icon-google-plus-official:before{content:"\f2b3"}
.oc-icon-fa:before,.icon-fa:before,.oc-icon-font-awesome:before,.icon-font-awesome:before{content:"\f2b4"}
.close{float:right;font-size:21px;font-weight:bold;line-height:1;color:#000000;text-shadow:0 1px 0 #ffffff;opacity:0.2;filter:alpha(opacity=20)}
.close{float:right;font-size:21px;font-weight:bold;line-height:1;color:#000000;text-shadow:0 1px 0 #ffffff;font-family:sans-serif;opacity:0.2;filter:alpha(opacity=20)}
.close:hover,.close:focus{color:#000000;text-decoration:none;cursor:pointer;opacity:0.5;filter:alpha(opacity=50)}
button.close{padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}
@font-face{font-family:'FontAwesome';src:url('font/fontawesome-webfont.eot?v=1.0.1');src:url('font/fontawesome-webfont.eot?#iefix&v=1.0.1') format('embedded-opentype'),url('font/fontawesome-webfont.woff?v=1.0.1') format('woff'),url('font/fontawesome-webfont.ttf?v=1.0.1') format('truetype'),url('font/fontawesome-webfont.svg#fontawesomeregular?v=1.0.1') format('svg');font-weight:normal;font-style:normal}
@ -1560,7 +1560,7 @@ to{background-position:0 0}
.control-tabs > ul.nav-tabs,.control-tabs > div > ul.nav-tabs,.control-tabs > div > div > ul.nav-tabs{white-space:nowrap;font-size:0;overflow:hidden;border-bottom:none;vertical-align:bottom}
.control-tabs > ul.nav-tabs > li,.control-tabs > div > ul.nav-tabs > li,.control-tabs > div > div > ul.nav-tabs > li{font-size:15px;float:none;display:inline-block;vertical-align:bottom;margin-right:20px;position:relative;z-index:8}
.control-tabs > ul.nav-tabs > li:last-child,.control-tabs > div > ul.nav-tabs > li:last-child,.control-tabs > div > div > ul.nav-tabs > li:last-child{margin-right:0}
.control-tabs > ul.nav-tabs > li a,.control-tabs > div > ul.nav-tabs > li a,.control-tabs > div > div > ul.nav-tabs > li a{border-left:none !important;border-top:none !important;border-right:none !important;padding:0 0 10px 0;color:rgba(0,0,0,0.4);font-weight:400;overflow:hidden}
.control-tabs > ul.nav-tabs > li a,.control-tabs > div > ul.nav-tabs > li a,.control-tabs > div > div > ul.nav-tabs > li a{border-left:none !important;border-top:none !important;border-right:none !important;padding:0 0 10px 0;color:#bbbbbb;font-weight:400;overflow:hidden}
.control-tabs > ul.nav-tabs > li a:hover,.control-tabs > div > ul.nav-tabs > li a:hover,.control-tabs > div > div > ul.nav-tabs > li a:hover{background-color:transparent;border-bottom-color:transparent}
.control-tabs > ul.nav-tabs > li a:before,.control-tabs > div > ul.nav-tabs > li a:before,.control-tabs > div > div > ul.nav-tabs > li a:before{font-size:14px}
.control-tabs > ul.nav-tabs > li a > span.title > span,.control-tabs > div > ul.nav-tabs > li a > span.title > span,.control-tabs > div > div > ul.nav-tabs > li a > span.title > span{max-width:150px;overflow:hidden;text-overflow:ellipsis;display:inline-block;border-top:2px solid #e0e0e0;margin-top:-4px;padding-top:7px}
@ -1579,10 +1579,10 @@ to{background-position:0 0}
.control-tabs > div.tab-content > div.tab-pane.pane-padded{padding:20px 20px 0 20px}
.control-tabs[data-closable] > ul.nav-tabs > li,.control-tabs[data-closable] > div > ul.nav-tabs > li,.control-tabs[data-closable] > div > div > ul.nav-tabs > li{margin-right:5px}
.control-tabs[data-closable] > ul.nav-tabs > li a,.control-tabs[data-closable] > div > ul.nav-tabs > li a,.control-tabs[data-closable] > div > div > ul.nav-tabs > li a{padding-left:20px !important;padding-right:0 !important}
.control-tabs[data-closable] > ul.nav-tabs > li span.tab-close,.control-tabs[data-closable] > div > ul.nav-tabs > li span.tab-close,.control-tabs[data-closable] > div > div > ul.nav-tabs > li span.tab-close{display:block;position:absolute;width:20px;height:20px;top:5px;left:-5px;text-align:right;font-size:12px;color:rgba(0,0,0,0.4) !important;cursor:pointer}
.control-tabs[data-closable] > ul.nav-tabs > li span.tab-close,.control-tabs[data-closable] > div > ul.nav-tabs > li span.tab-close,.control-tabs[data-closable] > div > div > ul.nav-tabs > li span.tab-close{display:block;position:absolute;width:20px;height:20px;top:5px;left:-5px;text-align:right;font-size:12px;color:#bbbbbb !important;cursor:pointer}
.control-tabs[data-closable] > ul.nav-tabs > li span.tab-close i,.control-tabs[data-closable] > div > ul.nav-tabs > li span.tab-close i,.control-tabs[data-closable] > div > div > ul.nav-tabs > li span.tab-close i{display:inline-block;z-index:11;top:-7px;right:5px;position:relative}
.control-tabs[data-closable] > ul.nav-tabs > li span.tab-close:hover i,.control-tabs[data-closable] > div > ul.nav-tabs > li span.tab-close:hover i,.control-tabs[data-closable] > div > div > ul.nav-tabs > li span.tab-close:hover i{color:#ab2a1c}
.control-tabs[data-closable] > ul.nav-tabs > li.active span.close,.control-tabs[data-closable] > div > ul.nav-tabs > li.active span.close,.control-tabs[data-closable] > div > div > ul.nav-tabs > li.active span.close{color:rgba(0,0,0,0.4)}
.control-tabs[data-closable] > ul.nav-tabs > li.active span.close,.control-tabs[data-closable] > div > ul.nav-tabs > li.active span.close,.control-tabs[data-closable] > div > div > ul.nav-tabs > li.active span.close{color:#bbbbbb}
.control-tabs[data-closable] > ul.nav-tabs > li[data-modified] span.tab-close i,.control-tabs[data-closable] > div > ul.nav-tabs > li[data-modified] span.tab-close i,.control-tabs[data-closable] > div > div > ul.nav-tabs > li[data-modified] span.tab-close i{top:-4px}
.control-tabs[data-closable] > ul.nav-tabs > li[data-modified] span.tab-close i:before,.control-tabs[data-closable] > div > ul.nav-tabs > li[data-modified] span.tab-close i:before,.control-tabs[data-closable] > div > div > ul.nav-tabs > li[data-modified] span.tab-close i:before{content:"\f111";font-size:9px}
.control-tabs.master-tabs > ul.nav-tabs > li a,.control-tabs.master-tabs > div > ul.nav-tabs > li a,.control-tabs.master-tabs > div > div > ul.nav-tabs > li a{font-size:15px;border-bottom:transparent 4px solid;position:relative;z-index:11;line-height:100%}
@ -2391,7 +2391,7 @@ html.cssanimations .cursor-loading-indicator.hide{display:none}
.custom-checkbox,.custom-radio{padding-left:23px;margin-top:0}
.custom-checkbox input[type=radio],.custom-radio input[type=radio],.custom-checkbox input[type=checkbox],.custom-radio input[type=checkbox]{display:none}
.custom-checkbox label,.custom-radio label{display:inline-block;cursor:pointer;position:relative;padding-left:25px;margin-right:15px;margin-left:-20px;font-size:13px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.custom-checkbox label:before,.custom-radio label:before{content:"";display:inline-block;text-align:center;color:#ffffff;width:18px;height:18px;margin-right:15px;position:absolute;left:-3px;top:-1px;background-color:#FFFFFF;border:1px solid #d1d6d9;-webkit-box-shadow:inset 0 1px 0 rgba(209,214,217,0.25),0 1px 0 rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(209,214,217,0.25),0 1px 0 rgba(255,255,255,.5)}
.custom-checkbox label:before,.custom-radio label:before{content:"";display:inline-block;text-align:center;color:#ffffff;width:18px;height:18px;margin-right:15px;position:absolute;left:-3px;top:0;background-color:#FFFFFF;border:1px solid #d1d6d9;-webkit-box-shadow:inset 0 1px 0 rgba(209,214,217,0.25),0 1px 0 rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(209,214,217,0.25),0 1px 0 rgba(255,255,255,.5)}
.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}
@ -2441,7 +2441,7 @@ html.cssanimations .cursor-loading-indicator.hide{display:none}
.form-control:focus{border:1px solid #d1d6d9}
.form-control.icon{background-repeat:no-repeat;background-position:right -2px;padding-right:30px !important;background-image:url('images/bitmap-icons.png')}
.form-control.icon.plus{background-position:right -124px}
.form-control.icon.search{background-position:right -83px}
.form-control.icon.search{background-position:right -84px}
.form-control.icon.user{background-position:right -41px}
.form-control.icon.lock{background-position:right 0}
.form-control.growable{width:110px}
@ -2614,7 +2614,7 @@ table.table.data tfoot a{color:#666666;text-decoration:none}
table.table.data tfoot td,table.table.data tfoot th{border-color:#d4d8da;padding:10px 15px}
table.table.data th.list-cell-type-switch,table.table.data td.list-cell-type-switch{text-align:center}
table.table.data th.list-cell-type-number,table.table.data td.list-cell-type-number{text-align:right}
table.table.data .list-badge{display:inline-block;position:relative;top:-1px;margin:0 5px 0 0;padding:1px 0 0 0;font-size:10px;width:15px;height:15px;text-align:center;border-radius:3px;color:#fff}
table.table.data .list-badge{display:inline-block;position:relative;top:0;margin:0 5px 0 0;padding:1px 0 0 0;font-size:10px;width:15px;height:15px;text-align:center;border-radius:3px;color:#fff}
table.table.data .list-badge.badge-default{background:#999999}
table.table.data .list-badge.badge-primary{background:#34495e}
table.table.data .list-badge.badge-success{background:#31ac5f}