mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
code reformat to follow the styles
This commit is contained in:
nixa
parent
669b3df4b5
commit
a8cd300ecc
26 changed files with 193 additions and 187 deletions
|
|
@ -1,6 +1,3 @@
|
|||
/*
|
||||
* Angular 2 decorators and services
|
||||
*/
|
||||
import {Component, ViewEncapsulation} from 'angular2/core';
|
||||
import {RouteConfig, Router} from 'angular2/router';
|
||||
import {Subscription} from 'rxjs/Subscription';
|
||||
|
|
@ -12,17 +9,17 @@ import {Pages} from './pages';
|
|||
// TODO: is it really the best place to globally require that dependency?
|
||||
require("!style!css!sass!./theme/sass/_ionicons.scss");
|
||||
|
||||
/*
|
||||
* App Component
|
||||
* Top Level Component
|
||||
* TODO: why the header and footer are not implemented?
|
||||
*/
|
||||
/*
|
||||
* App Component
|
||||
* Top Level Component
|
||||
* TODO: why the header and footer are not implemented?
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app',
|
||||
pipes: [ ],
|
||||
pipes: [],
|
||||
providers: [SidebarStateService],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
styles: [ require('normalize.css'), require('./app.scss') ],
|
||||
styles: [require('normalize.css'), require('./app.scss')],
|
||||
template: `
|
||||
<header>
|
||||
</header>
|
||||
|
|
@ -46,15 +43,15 @@ require("!style!css!sass!./theme/sass/_ionicons.scss");
|
|||
])
|
||||
export class App {
|
||||
|
||||
isMenuCollapsed: boolean = false;
|
||||
isMenuCollapsed:boolean = false;
|
||||
|
||||
private _sidebarStateSubscription: Subscription;
|
||||
private _sidebarStateSubscription:Subscription;
|
||||
|
||||
constructor(private _sidebarStateService:SidebarStateService) {
|
||||
this._sidebarStateSubscription = this._sidebarStateService.getStateStream().subscribe((isCollapsed) => this.isMenuCollapsed = isCollapsed);
|
||||
}
|
||||
|
||||
ngOnDestroy(){
|
||||
ngOnDestroy() {
|
||||
// prevent memory leak when component destroyed
|
||||
this._sidebarStateSubscription.unsubscribe();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,19 +7,20 @@ import {Component, ViewEncapsulation} from 'angular2/core';
|
|||
* Top Level Component
|
||||
*/
|
||||
@Component({
|
||||
selector: 'dashboard',
|
||||
pipes: [ ],
|
||||
providers: [ ],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
styles: [require('./dashboard.scss') ],
|
||||
template: 'DASHBOARD'
|
||||
selector: 'dashboard',
|
||||
pipes: [],
|
||||
providers: [],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
styles: [require('./dashboard.scss')],
|
||||
template: 'DASHBOARD'
|
||||
})
|
||||
export class Dashboard {
|
||||
|
||||
constructor() {}
|
||||
constructor() {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
console.log('DASHBOARD');
|
||||
}
|
||||
ngOnInit() {
|
||||
console.log('DASHBOARD');
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -7,9 +7,9 @@
|
|||
}
|
||||
|
||||
@media screen and (max-width: 1620px) {
|
||||
.panel.feed-panel.large-panel {
|
||||
height: 824px;
|
||||
}
|
||||
.panel.feed-panel.large-panel {
|
||||
height: 824px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-stats-panel {
|
||||
|
|
@ -18,6 +18,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.blurCalendar{
|
||||
.blurCalendar {
|
||||
height: 475px;
|
||||
}
|
||||
|
|
@ -36,9 +36,11 @@ export class Pages {
|
|||
|
||||
private _routeConfig;
|
||||
|
||||
constructor(private _router: Router) { }
|
||||
constructor(private _router:Router) {
|
||||
}
|
||||
|
||||
ngOnInit() { }
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
getRoutes() {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,24 @@
|
|||
import {Directive, Input, Output, EventEmitter, HostListener, ElementRef} from 'angular2/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[scrollPosition]'
|
||||
selector: '[scrollPosition]'
|
||||
})
|
||||
export class ScrollPosition {
|
||||
@Input() maxHeight: Number;
|
||||
@Output() scrollChange:EventEmitter<Boolean> = new EventEmitter<Boolean>();
|
||||
@Input() maxHeight:Number;
|
||||
@Output() scrollChange:EventEmitter<Boolean> = new EventEmitter<Boolean>();
|
||||
|
||||
private _isScrolled: Boolean;
|
||||
private _isScrolled:Boolean;
|
||||
|
||||
ngOnInit() {
|
||||
this.onWindowScroll();
|
||||
}
|
||||
|
||||
@HostListener('window:scroll')
|
||||
onWindowScroll() : void {
|
||||
let isScrolled = window.scrollY > this.maxHeight;
|
||||
if (isScrolled !== this._isScrolled) {
|
||||
this._isScrolled = isScrolled;
|
||||
this.scrollChange.emit(isScrolled);
|
||||
}
|
||||
ngOnInit() {
|
||||
this.onWindowScroll();
|
||||
}
|
||||
|
||||
@HostListener('window:scroll')
|
||||
onWindowScroll():void {
|
||||
let isScrolled = window.scrollY > this.maxHeight;
|
||||
if (isScrolled !== this._isScrolled) {
|
||||
this._isScrolled = isScrolled;
|
||||
this.scrollChange.emit(isScrolled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,12 +2,12 @@ import {Component, ViewEncapsulation} from 'angular2/core';
|
|||
import {ProfilePicturePipe} from '../pipes/image/profile-picture.pipe';
|
||||
|
||||
@Component({
|
||||
selector: 'msg-center',
|
||||
styles: [ require('./msgCenter.scss') ],
|
||||
template: require('./msgCenter.html'),
|
||||
pipes: [ProfilePicturePipe]
|
||||
selector: 'msg-center',
|
||||
styles: [require('./msgCenter.scss')],
|
||||
template: require('./msgCenter.html'),
|
||||
pipes: [ProfilePicturePipe]
|
||||
})
|
||||
export class MsgCenter {
|
||||
export class MsgCenter {
|
||||
|
||||
notifications = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -15,8 +15,9 @@
|
|||
<a href>Settings</a>
|
||||
</div>
|
||||
<div class="msg-list">
|
||||
<a *ngFor="#msg of notifications" href class="clearfix" >
|
||||
<div class="img-area"><img [ngClass]="{'photo-msg-item': !msg.image}" src="{{ ( msg.image || (msg.name | profilePicture)) }}"></div>
|
||||
<a *ngFor="#msg of notifications" href class="clearfix">
|
||||
<div class="img-area"><img [ngClass]="{'photo-msg-item': !msg.image}"
|
||||
src="{{ ( msg.image || (msg.name | profilePicture)) }}"></div>
|
||||
<div class="msg-area">
|
||||
<div>{{ msg.text }}</div>
|
||||
<span>{{ msg.time }}</span>
|
||||
|
|
@ -40,7 +41,8 @@
|
|||
</div>
|
||||
<div class="msg-list">
|
||||
<a *ngFor="#msg of messages" href class="clearfix">
|
||||
<div class="img-area"><img [ngClass]="{'photo-msg-item': !msg.image}" src="{{ ( msg.image || (msg.name | profilePicture)) }}"></div>
|
||||
<div class="img-area"><img [ngClass]="{'photo-msg-item': !msg.image}"
|
||||
src="{{ ( msg.image || (msg.name | profilePicture)) }}"></div>
|
||||
<div class="msg-area">
|
||||
<div>{{ msg.text }}</div>
|
||||
<span>{{ msg.time }}</span>
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@
|
|||
left: auto;
|
||||
right: -47px;
|
||||
top: 26px;
|
||||
@include scrollbars(.4em, rgba(0,0,0,0.5), #fff);
|
||||
@include scrollbars(.4em, rgba(0, 0, 0, 0.5), #fff);
|
||||
.header {
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid $border-light;
|
||||
|
|
@ -150,7 +150,7 @@
|
|||
img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
&.photo-msg-item{
|
||||
&.photo-msg-item {
|
||||
border-radius: 18px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,28 +7,28 @@ import {ScrollPosition} from '../directives/scrollPosition.directive';
|
|||
import {SidebarStateService} from '../sidebar/sidebarState.service'
|
||||
|
||||
@Component({
|
||||
selector: 'page-top',
|
||||
styles: [ require('./pageTop.scss') ],
|
||||
template: require('./pageTop.html'),
|
||||
directives: [MsgCenter, ScrollPosition],
|
||||
pipes: [ProfilePicturePipe]
|
||||
selector: 'page-top',
|
||||
styles: [require('./pageTop.scss')],
|
||||
template: require('./pageTop.html'),
|
||||
directives: [MsgCenter, ScrollPosition],
|
||||
pipes: [ProfilePicturePipe]
|
||||
})
|
||||
export class PageTop {
|
||||
isScrolled: Boolean = false;
|
||||
isMenuCollapsed: boolean = false;
|
||||
isScrolled:Boolean = false;
|
||||
isMenuCollapsed:boolean = false;
|
||||
|
||||
private _sidebarStateSubscription: Subscription;
|
||||
private _sidebarStateSubscription:Subscription;
|
||||
|
||||
constructor(private _sidebarStateService: SidebarStateService) {
|
||||
this._sidebarStateSubscription = this._sidebarStateService.getStateStream().subscribe((isCollapsed) => this.isMenuCollapsed = isCollapsed);
|
||||
}
|
||||
constructor(private _sidebarStateService:SidebarStateService) {
|
||||
this._sidebarStateSubscription = this._sidebarStateService.getStateStream().subscribe((isCollapsed) => this.isMenuCollapsed = isCollapsed);
|
||||
}
|
||||
|
||||
toggleMenu() {
|
||||
this.isMenuCollapsed = !this.isMenuCollapsed;
|
||||
this._sidebarStateService.stateChanged(this.isMenuCollapsed);
|
||||
}
|
||||
toggleMenu() {
|
||||
this.isMenuCollapsed = !this.isMenuCollapsed;
|
||||
this._sidebarStateService.stateChanged(this.isMenuCollapsed);
|
||||
}
|
||||
|
||||
scrolledChanged(isScrolled) {
|
||||
this.isScrolled = isScrolled;
|
||||
}
|
||||
scrolledChanged(isScrolled) {
|
||||
this.isScrolled = isScrolled;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,25 @@
|
|||
<div class="page-top clearfix" scrollPosition maxHeight="50" (scrollChange)="scrolledChanged($event)" [ngClass]="{scrolled: isScrolled}">
|
||||
<a href="#/dashboard" class="al-logo clearfix"><span>Blur</span>Admin</a>
|
||||
<a (click)="toggleMenu()" class="collapse-menu-link ion-navicon"></a>
|
||||
<div class="page-top clearfix" scrollPosition maxHeight="50" (scrollChange)="scrolledChanged($event)"
|
||||
[ngClass]="{scrolled: isScrolled}">
|
||||
<a href="#/dashboard" class="al-logo clearfix"><span>Blur</span>Admin</a>
|
||||
<a (click)="toggleMenu()" class="collapse-menu-link ion-navicon"></a>
|
||||
|
||||
<div class="search">
|
||||
<i class="ion-ios-search-strong" ng-click="startSearch()"></i>
|
||||
<input id="searchInput" type="text" placeholder="Search for...">
|
||||
</div>
|
||||
<div class="search">
|
||||
<i class="ion-ios-search-strong" ng-click="startSearch()"></i>
|
||||
<input id="searchInput" type="text" placeholder="Search for...">
|
||||
</div>
|
||||
|
||||
<div class="user-profile clearfix">
|
||||
<div class="dropdown al-user-profile">
|
||||
<a class="profile-toggle-link dropdown-toggle" id="user-profile-dd" data-toggle="dropdown" aria-expanded="false">
|
||||
<img src="{{ ( 'Nasta' | profilePicture ) }}">
|
||||
</a>
|
||||
<div class="dropdown-menu top-dropdown-menu profile-dropdown" aria-labelledby="user-profile-dd">
|
||||
<li class="dropdown-item"><i class="dropdown-arr"></i></li>
|
||||
<li class="dropdown-item"><a href="#/profile"><i class="fa fa-user"></i>Profile</a></li>
|
||||
<li class="dropdown-item"><a href><i class="fa fa-cog"></i>Settings</a></li>
|
||||
<li class="dropdown-item"><a href class="signout"><i class="fa fa-power-off"></i>Sign out</a></li>
|
||||
</div>
|
||||
</div>
|
||||
<msg-center></msg-center>
|
||||
<div class="user-profile clearfix">
|
||||
<div class="dropdown al-user-profile">
|
||||
<a class="profile-toggle-link dropdown-toggle" id="user-profile-dd" data-toggle="dropdown" aria-expanded="false">
|
||||
<img src="{{ ( 'Nasta' | profilePicture ) }}">
|
||||
</a>
|
||||
<div class="dropdown-menu top-dropdown-menu profile-dropdown" aria-labelledby="user-profile-dd">
|
||||
<li class="dropdown-item"><i class="dropdown-arr"></i></li>
|
||||
<li class="dropdown-item"><a href="#/profile"><i class="fa fa-user"></i>Profile</a></li>
|
||||
<li class="dropdown-item"><a href><i class="fa fa-cog"></i>Settings</a></li>
|
||||
<li class="dropdown-item"><a href class="signout"><i class="fa fa-power-off"></i>Sign out</a></li>
|
||||
</div>
|
||||
</div>
|
||||
<msg-center></msg-center>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -156,7 +156,7 @@ a.collapse-menu-link {
|
|||
}
|
||||
|
||||
@media (max-width: $resXXS) {
|
||||
.user-profile{
|
||||
.user-profile {
|
||||
min-width: 136px;
|
||||
}
|
||||
a.refresh-data {
|
||||
|
|
@ -171,6 +171,6 @@ a.collapse-menu-link {
|
|||
}
|
||||
}
|
||||
|
||||
.profile-toggle-link{
|
||||
.profile-toggle-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import {layoutPaths} from '../../theme.constants';
|
|||
@Pipe({name: 'profilePicture'})
|
||||
export class ProfilePicturePipe implements PipeTransform {
|
||||
|
||||
transform(input: string, args:string[]): string {
|
||||
transform(input:string, args:string[]):string {
|
||||
let ext = args[0] || 'png';
|
||||
return layoutPaths.images.profile + input + '.' + ext;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ $hover: 24;
|
|||
}
|
||||
&.btn-default {
|
||||
@include styleButton(transparent, $default);
|
||||
&:focus, &:active:hover, &.active:hover, &:hover{
|
||||
&:focus, &:active:hover, &.active:hover, &:hover {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
color: $default;
|
||||
}
|
||||
|
|
@ -124,7 +124,6 @@ button.btn.btn-danger {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
button.btn.btn-inverse {
|
||||
@include buttonColor($help-text, $help-text);
|
||||
color: $default;
|
||||
|
|
@ -134,8 +133,6 @@ button.btn.btn-inverse {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.btn-with-icon {
|
||||
i {
|
||||
margin-right: 10px;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
@include svg-icon-class('person', 80, 80);
|
||||
@include svg-icon-class('refresh', 80, 80);
|
||||
|
||||
|
||||
@mixin png-icon($url, $width, $height) {
|
||||
display: inline-block;
|
||||
width: $width + px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
$left-space: 180px;
|
||||
|
||||
@include scrollbars(.5em, #d9d9d9, rgba(0,0,0,0));
|
||||
@include scrollbars(.5em, #d9d9d9, rgba(0, 0, 0, 0));
|
||||
|
||||
html {
|
||||
position: relative;
|
||||
|
|
@ -18,14 +18,12 @@ body {
|
|||
@include main-background();
|
||||
}
|
||||
|
||||
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
|
||||
{
|
||||
html{
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
html {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
body{
|
||||
body {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -36,9 +34,10 @@ a {
|
|||
outline: 0 !important;
|
||||
}
|
||||
|
||||
.body-bg{
|
||||
.body-bg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.al-header {
|
||||
display: block;
|
||||
height: 49px;
|
||||
|
|
@ -194,8 +193,8 @@ a {
|
|||
}
|
||||
|
||||
.full-invisible {
|
||||
visibility: hidden!important;
|
||||
visibility: hidden !important;
|
||||
* {
|
||||
visibility: hidden!important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg); /* Firefox 16+*/
|
||||
|
|
|
|||
|
|
@ -241,23 +241,23 @@ body.badmin-transparent {
|
|||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.table > tbody > tr.primary > td {
|
||||
background-color: rgba($primary,0.7);
|
||||
background-color: rgba($primary, 0.7);
|
||||
border: none;
|
||||
}
|
||||
.table > tbody > tr.success > td {
|
||||
background-color: rgba($success,0.7);
|
||||
background-color: rgba($success, 0.7);
|
||||
border: none;
|
||||
}
|
||||
.table > tbody > tr.warning > td {
|
||||
background-color: rgba($warning,0.7);
|
||||
background-color: rgba($warning, 0.7);
|
||||
border: none;
|
||||
}
|
||||
.table > tbody > tr.danger > td {
|
||||
background-color: rgba($danger,0.7);
|
||||
background-color: rgba($danger, 0.7);
|
||||
border: none;
|
||||
}
|
||||
.table > tbody > tr.info > td {
|
||||
background-color: rgba($info,0.7);
|
||||
background-color: rgba($info, 0.7);
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
|
@ -282,21 +282,21 @@ th {
|
|||
.table-striped > tbody > tr > td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.pagination > li > a,
|
||||
.pagination > li > span{
|
||||
.pagination > li > span {
|
||||
color: $default;
|
||||
border-color: $default;
|
||||
}
|
||||
|
||||
|
||||
.pagination > li:first-of-type > a,
|
||||
.pagination > li:first-of-type > span{
|
||||
.pagination > li:first-of-type > span {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
.pagination > li:last-of-type > a,
|
||||
.pagination > li:last-of-type > span{
|
||||
.pagination > li:last-of-type > span {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
|
@ -314,11 +314,11 @@ th {
|
|||
.pagination > li > a:hover,
|
||||
.pagination > li > span:hover,
|
||||
.pagination > li > a:focus,
|
||||
.pagination > li > span:focus{
|
||||
background-color: rgba(0,0,0,.2);
|
||||
.pagination > li > span:focus {
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
color: $default;
|
||||
}
|
||||
|
||||
.editable-buttons .btn-with-icon i {
|
||||
margin-right: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
|
@ -128,7 +128,7 @@ $panel-heading-font-size: 16px;
|
|||
}
|
||||
}
|
||||
|
||||
.panel.bootstrap-panel{
|
||||
.panel.bootstrap-panel {
|
||||
.panel-body, .panel-heading {
|
||||
p, div, span {
|
||||
color: $default-text;
|
||||
|
|
@ -136,12 +136,12 @@ $panel-heading-font-size: 16px;
|
|||
}
|
||||
}
|
||||
|
||||
.accordion-panel.panel.bootstrap-panel{
|
||||
.accordion-panel.panel.bootstrap-panel {
|
||||
&.panel-primary,
|
||||
&.panel-success,
|
||||
&.panel-info,
|
||||
&.panel-warning,
|
||||
&.panel-danger{
|
||||
&.panel-danger {
|
||||
.panel-heading {
|
||||
p, div, span {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
|
|
@ -150,8 +150,8 @@ $panel-heading-font-size: 16px;
|
|||
}
|
||||
}
|
||||
|
||||
.panel-group .panel.accordion-panel{
|
||||
.panel-heading{
|
||||
.panel-group .panel.accordion-panel {
|
||||
.panel-heading {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -170,15 +170,14 @@ $panel-heading-font-size: 16px;
|
|||
height: 120px;
|
||||
}
|
||||
|
||||
.footer-panel{
|
||||
.footer-panel {
|
||||
height: 142px;
|
||||
}
|
||||
|
||||
.light-text{
|
||||
.light-text {
|
||||
font-weight: $font-light;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
.panel-group .panel {
|
||||
border-radius: 0;
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
@mixin bg-nr($relativeUrl) {
|
||||
background: url($images-root + $relativeUrl) no-repeat 0 0;
|
||||
}
|
||||
|
||||
@mixin bg($relativeUrl) {
|
||||
background: url($images-root + $relativeUrl);
|
||||
}
|
||||
|
|
@ -93,22 +94,22 @@
|
|||
|
||||
@mixin overrideColors($color) {
|
||||
p,
|
||||
h1,h2,h3,h4,h5,h6,
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.pie-chart-item,
|
||||
.panel-heading>.dropdown .dropdown-toggle,
|
||||
.panel-heading > .dropdown .dropdown-toggle,
|
||||
.panel-title,
|
||||
ol.blur span,
|
||||
ul.blur,
|
||||
.popular-app-cost,
|
||||
.popular-app-info,
|
||||
.panel-title>.small,
|
||||
.panel-title>.small>a,
|
||||
.panel-title>a,
|
||||
.panel-title>small,
|
||||
.panel-title>small>a,
|
||||
.panel-title > .small,
|
||||
.panel-title > .small > a,
|
||||
.panel-title > a,
|
||||
.panel-title > small,
|
||||
.panel-title > small > a,
|
||||
.traffic-text span,
|
||||
.form-group label,
|
||||
.help-block{
|
||||
.help-block {
|
||||
color: $color;
|
||||
}
|
||||
.feed-message .message-time, .text-muted {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
$font-family: 'Roboto', sans-serif;
|
||||
|
||||
$view-total :rgba(0,0,0,.4);
|
||||
$view-total: rgba(0, 0, 0, .4);
|
||||
|
||||
$activelink: $primary;
|
||||
$hoverlink: $primary-dark;
|
||||
|
|
|
|||
|
|
@ -6,34 +6,35 @@ import {SidebarService} from './sidebar.service';
|
|||
import {SidebarStateService} from './sidebarState.service';
|
||||
|
||||
@Component({
|
||||
selector: 'sidebar',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
styles: [ require('./sidebar.scss') ],
|
||||
template: require('./sidebar.html'),
|
||||
providers: [SidebarService],
|
||||
directives: [],
|
||||
pipes: []
|
||||
selector: 'sidebar',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
styles: [require('./sidebar.scss')],
|
||||
template: require('./sidebar.html'),
|
||||
providers: [SidebarService],
|
||||
directives: [],
|
||||
pipes: []
|
||||
})
|
||||
export class Sidebar {
|
||||
|
||||
@Input('routes') routes;
|
||||
|
||||
menuItems: Array<any>;
|
||||
menuHeight: number;
|
||||
isMenuCollapsed: boolean;
|
||||
menuItems:Array<any>;
|
||||
menuHeight:number;
|
||||
isMenuCollapsed:boolean;
|
||||
|
||||
showHoverElem: boolean;
|
||||
hoverElemHeight: number;
|
||||
hoverElemTop: number;
|
||||
showHoverElem:boolean;
|
||||
hoverElemHeight:number;
|
||||
hoverElemTop:number;
|
||||
|
||||
outOfArea: number = -200;
|
||||
outOfArea:number = -200;
|
||||
|
||||
isMenuShouldCollapsed: boolean = false;
|
||||
isMenuShouldCollapsed:boolean = false;
|
||||
|
||||
constructor(private elementRef: ElementRef,
|
||||
private router: Router,
|
||||
private _sidebarService: SidebarService,
|
||||
private _sidebarStateService: SidebarStateService) { }
|
||||
constructor(private elementRef:ElementRef,
|
||||
private router:Router,
|
||||
private _sidebarService:SidebarService,
|
||||
private _sidebarStateService:SidebarStateService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.menuItems = this._sidebarService.getMenuItems(this.routes);
|
||||
|
|
@ -57,11 +58,11 @@ export class Sidebar {
|
|||
this.updateSidebarHeight();
|
||||
}
|
||||
|
||||
menuExpand () {
|
||||
menuExpand() {
|
||||
this.menuCollapseStateChange(false);
|
||||
}
|
||||
|
||||
menuCollapse () {
|
||||
menuCollapse() {
|
||||
this.menuCollapseStateChange(true);
|
||||
}
|
||||
|
||||
|
|
@ -70,9 +71,9 @@ export class Sidebar {
|
|||
this._sidebarStateService.stateChanged(this.isMenuCollapsed);
|
||||
}
|
||||
|
||||
hoverItem ($event) {
|
||||
hoverItem($event) {
|
||||
this.showHoverElem = true;
|
||||
this.hoverElemHeight = $event.currentTarget.clientHeight;
|
||||
this.hoverElemHeight = $event.currentTarget.clientHeight;
|
||||
// TODO: get rid of magic 66 constant
|
||||
this.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - 66;
|
||||
}
|
||||
|
|
@ -82,7 +83,7 @@ export class Sidebar {
|
|||
this.menuHeight = this.elementRef.nativeElement.childNodes[0].clientHeight - 84;
|
||||
}
|
||||
|
||||
toggleSubMenu ($event, item) {
|
||||
toggleSubMenu($event, item) {
|
||||
var submenu = $($event.currentTarget).next();
|
||||
|
||||
if (this.isMenuCollapsed) {
|
||||
|
|
@ -99,7 +100,7 @@ export class Sidebar {
|
|||
}
|
||||
|
||||
private selectMenuItem() {
|
||||
let isCurrent = (instruction) => (instruction ? this.router.isRouteActive(this.router.generate([instruction])): false);
|
||||
let isCurrent = (instruction) => (instruction ? this.router.isRouteActive(this.router.generate([instruction])) : false);
|
||||
|
||||
this.menuItems.forEach(function (menu) {
|
||||
|
||||
|
|
|
|||
|
|
@ -7,22 +7,27 @@
|
|||
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
|
||||
</a>
|
||||
|
||||
<a *ngIf="item.subMenu" (mouseenter)="hoverItem($event, item)" (click)="toggleSubMenu($event, item)" class="al-sidebar-list-link">
|
||||
<a *ngIf="item.subMenu" (mouseenter)="hoverItem($event, item)" (click)="toggleSubMenu($event, item)"
|
||||
class="al-sidebar-list-link">
|
||||
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
|
||||
<b class="fa" [ngClass]="{'fa-angle-up': item.expanded, 'fa-angle-down': !item.expanded}" *ngIf="item.subMenu"></b>
|
||||
<b class="fa" [ngClass]="{'fa-angle-up': item.expanded, 'fa-angle-down': !item.expanded}"
|
||||
*ngIf="item.subMenu"></b>
|
||||
</a>
|
||||
|
||||
<ul *ngIf="item.subMenu" class="al-sidebar-sublist"
|
||||
[ngClass]="{expanded: item.expanded, 'slide-right': item.slideRight}">
|
||||
<li *ngFor="#subitem of item.subMenu" [ngClass]="{'selected': subitem.selected, 'with-sub-menu': subitem.subMenu}">
|
||||
<li *ngFor="#subitem of item.subMenu"
|
||||
[ngClass]="{'selected': subitem.selected, 'with-sub-menu': subitem.subMenu}">
|
||||
<a (mouseenter)="hoverItem($event, item)" *ngIf="subitem.subMenu" (click)="toggleSubMenu($event, subitem);"
|
||||
class="al-sidebar-list-link subitem-submenu-link"><span>{{ subitem.title }}</span>
|
||||
<b class="fa" *ngIf="subitem.subMenu" [ngClass]="{'fa-angle-up': subitem.expanded, 'fa-angle-down': !subitem.expanded}"></b>
|
||||
<b class="fa" *ngIf="subitem.subMenu"
|
||||
[ngClass]="{'fa-angle-up': subitem.expanded, 'fa-angle-down': !subitem.expanded}"></b>
|
||||
</a>
|
||||
<ul *ngIf="subitem.subMenu" class="al-sidebar-sublist subitem-submenu-list"
|
||||
[ngClass]="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}">
|
||||
<li *ngFor="#subSubitem of subitem.subMenu" (mouseenter)="hoverItem($event, item)" [ngClass]="{selected: subitem.selected}">
|
||||
<a (mouseenter)="hoverItem($event, item)" [routerLink]="[subSubitem.name]">
|
||||
<li *ngFor="#subSubitem of subitem.subMenu" (mouseenter)="hoverItem($event, item)"
|
||||
[ngClass]="{selected: subitem.selected}">
|
||||
<a (mouseenter)="hoverItem($event, item)" [routerLink]="[subSubitem.name]">
|
||||
{{ subSubitem.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ a.al-sidebar-list-link {
|
|||
@include default-sublist();
|
||||
}
|
||||
|
||||
.sidebar-hover-elem{
|
||||
.sidebar-hover-elem {
|
||||
width: 4px;
|
||||
background: $primary;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -53,17 +53,18 @@ export class SidebarService {
|
|||
}]
|
||||
}
|
||||
]
|
||||
}];
|
||||
}];
|
||||
|
||||
constructor() { }
|
||||
constructor() {
|
||||
}
|
||||
|
||||
getMenuItems(routes) {
|
||||
|
||||
let menuItems = routes.configs
|
||||
.filter(function(s) {
|
||||
.filter(function (s) {
|
||||
return s.data.sidebarMeta != null;
|
||||
})
|
||||
.map(function(s) {
|
||||
.map(function (s) {
|
||||
var meta = s.data.sidebarMeta;
|
||||
return {
|
||||
title: s.data.title,
|
||||
|
|
@ -73,10 +74,10 @@ export class SidebarService {
|
|||
icon: meta.icon
|
||||
};
|
||||
})
|
||||
.sort(function(a, b) {
|
||||
.sort(function (a, b) {
|
||||
return (a.level - b.level) * 100 + a.order - b.order;
|
||||
})
|
||||
.filter(function(item) {
|
||||
.filter(function (item) {
|
||||
return item.level == 0;
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export class SidebarStateService {
|
|||
isCollapsedStream$ = this._isCollapsed.asObservable();
|
||||
|
||||
// Service message commands
|
||||
stateChanged(isCollapsed: boolean) {
|
||||
stateChanged(isCollapsed:boolean) {
|
||||
this._isCollapsed.next(isCollapsed)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
@import "sass/conf/conf";
|
||||
@import "sass/bootstrap-overrides/overrides";
|
||||
|
||||
@import "sass/blur-admin-theme";
|
||||
@import "sass/buttons";
|
||||
@import "sass/icons";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue