Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 16:00:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

code reformat to follow the styles

Browse source
This commit is contained in:
nixa 2016-04-29 17:27:19 +03:00
parent 669b3df4b5
commit a8cd300ecc
26 changed files with 193 additions and 187 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/app/app.component.ts
View file

@ -1,6 +1,3 @@
/*
* Angular 2 decorators and services
*/
import {Component, ViewEncapsulation} from 'angular2/core'; import {Component, ViewEncapsulation} from 'angular2/core';
import {RouteConfig, Router} from 'angular2/router'; import {RouteConfig, Router} from 'angular2/router';
import {Subscription} from 'rxjs/Subscription'; 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? // TODO: is it really the best place to globally require that dependency?
require("!style!css!sass!./theme/sass/_ionicons.scss"); require("!style!css!sass!./theme/sass/_ionicons.scss");
/* /*
* App Component * App Component
* Top Level Component * Top Level Component
* TODO: why the header and footer are not implemented? * TODO: why the header and footer are not implemented?
*/ */
@Component({ @Component({
selector: 'app', selector: 'app',
pipes: [ ], pipes: [],
providers: [SidebarStateService], providers: [SidebarStateService],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
styles: [ require('normalize.css'), require('./app.scss') ], styles: [require('normalize.css'), require('./app.scss')],
template: ` template: `
<header> <header>
</header> </header>
@ -46,15 +43,15 @@ require("!style!css!sass!./theme/sass/_ionicons.scss");
]) ])
export class App { export class App {
isMenuCollapsed: boolean = false; isMenuCollapsed:boolean = false;
private _sidebarStateSubscription: Subscription; private _sidebarStateSubscription:Subscription;
constructor(private _sidebarStateService:SidebarStateService) { constructor(private _sidebarStateService:SidebarStateService) {
this._sidebarStateSubscription = this._sidebarStateService.getStateStream().subscribe((isCollapsed) => this.isMenuCollapsed = isCollapsed); this._sidebarStateSubscription = this._sidebarStateService.getStateStream().subscribe((isCollapsed) => this.isMenuCollapsed = isCollapsed);
} }
ngOnDestroy(){ ngOnDestroy() {
// prevent memory leak when component destroyed // prevent memory leak when component destroyed
this._sidebarStateSubscription.unsubscribe(); this._sidebarStateSubscription.unsubscribe();
} }

23
src/app/pages/dashboard/dashboard.component.ts
View file

@ -7,19 +7,20 @@ import {Component, ViewEncapsulation} from 'angular2/core';
* Top Level Component * Top Level Component
*/ */
@Component({ @Component({
selector: 'dashboard', selector: 'dashboard',
pipes: [ ], pipes: [],
providers: [ ], providers: [],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
styles: [require('./dashboard.scss') ], styles: [require('./dashboard.scss')],
template: 'DASHBOARD' template: 'DASHBOARD'
}) })
export class Dashboard { export class Dashboard {
constructor() {} constructor() {
}
ngOnInit() { ngOnInit() {
console.log('DASHBOARD'); console.log('DASHBOARD');
} }
} }

10
src/app/pages/dashboard/dashboard.scss
View file

@ -7,9 +7,9 @@
} }
@media screen and (max-width: 1620px) { @media screen and (max-width: 1620px) {
.panel.feed-panel.large-panel { .panel.feed-panel.large-panel {
height: 824px; height: 824px;
} }
} }
.user-stats-panel { .user-stats-panel {
@ -18,6 +18,6 @@
} }
} }
.blurCalendar{ .blurCalendar {
height: 475px; height: 475px;
} }

6
src/app/pages/pages.component.ts
View file

@ -36,9 +36,11 @@ export class Pages {
private _routeConfig; private _routeConfig;
constructor(private _router: Router) { } constructor(private _router:Router) {
}
ngOnInit() { } ngOnInit() {
}
getRoutes() { getRoutes() {

33
src/app/theme/directives/scrollPosition.directive.ts
View file

@ -1,23 +1,24 @@
import {Directive, Input, Output, EventEmitter, HostListener, ElementRef} from 'angular2/core'; import {Directive, Input, Output, EventEmitter, HostListener, ElementRef} from 'angular2/core';
@Directive({ @Directive({
selector: '[scrollPosition]' selector: '[scrollPosition]'
}) })
export class ScrollPosition { export class ScrollPosition {
@Input() maxHeight: Number; @Input() maxHeight:Number;
@Output() scrollChange:EventEmitter<Boolean> = new EventEmitter<Boolean>(); @Output() scrollChange:EventEmitter<Boolean> = new EventEmitter<Boolean>();
private _isScrolled: Boolean; private _isScrolled:Boolean;
ngOnInit() { ngOnInit() {
this.onWindowScroll(); this.onWindowScroll();
}
@HostListener('window:scroll')
onWindowScroll():void {
let isScrolled = window.scrollY > this.maxHeight;
if (isScrolled !== this._isScrolled) {
this._isScrolled = isScrolled;
this.scrollChange.emit(isScrolled);
} }
}
@HostListener('window:scroll') }
onWindowScroll() : void {
let isScrolled = window.scrollY > this.maxHeight;
if (isScrolled !== this._isScrolled) {
this._isScrolled = isScrolled;
this.scrollChange.emit(isScrolled);
}
}
}

10
src/app/theme/msgCenter/msgCenter.component.ts
View file

@ -2,12 +2,12 @@ import {Component, ViewEncapsulation} from 'angular2/core';
import {ProfilePicturePipe} from '../pipes/image/profile-picture.pipe'; import {ProfilePicturePipe} from '../pipes/image/profile-picture.pipe';
@Component({ @Component({
selector: 'msg-center', selector: 'msg-center',
styles: [ require('./msgCenter.scss') ], styles: [require('./msgCenter.scss')],
template: require('./msgCenter.html'), template: require('./msgCenter.html'),
pipes: [ProfilePicturePipe] pipes: [ProfilePicturePipe]
}) })
export class MsgCenter { export class MsgCenter {
notifications = [ notifications = [
{ {

8
src/app/theme/msgCenter/msgCenter.html
View file

@ -15,8 +15,9 @@
<a href>Settings</a> <a href>Settings</a>
</div> </div>
<div class="msg-list"> <div class="msg-list">
<a *ngFor="#msg of notifications" href class="clearfix" > <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="img-area"><img [ngClass]="{'photo-msg-item': !msg.image}"
src="{{ ( msg.image || (msg.name | profilePicture)) }}"></div>
<div class="msg-area"> <div class="msg-area">
<div>{{ msg.text }}</div> <div>{{ msg.text }}</div>
<span>{{ msg.time }}</span> <span>{{ msg.time }}</span>
@ -40,7 +41,8 @@
</div> </div>
<div class="msg-list"> <div class="msg-list">
<a *ngFor="#msg of messages" href class="clearfix"> <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 class="msg-area">
<div>{{ msg.text }}</div> <div>{{ msg.text }}</div>
<span>{{ msg.time }}</span> <span>{{ msg.time }}</span>

6
src/app/theme/msgCenter/msgCenter.scss
View file

@ -113,7 +113,7 @@
left: auto; left: auto;
right: -47px; right: -47px;
top: 26px; top: 26px;
@include scrollbars(.4em, rgba(0,0,0,0.5), #fff); @include scrollbars(.4em, rgba(0, 0, 0, 0.5), #fff);
.header { .header {
padding: 10px 12px; padding: 10px 12px;
border-bottom: 1px solid $border-light; border-bottom: 1px solid $border-light;
@ -150,7 +150,7 @@
img { img {
width: 36px; width: 36px;
height: 36px; height: 36px;
&.photo-msg-item{ &.photo-msg-item {
border-radius: 18px; border-radius: 18px;
} }
} }
@ -260,4 +260,4 @@
right: 75px; right: 75px;
} }
} }
} }

36
src/app/theme/pageTop/pageTop.component.ts
View file

@ -7,28 +7,28 @@ import {ScrollPosition} from '../directives/scrollPosition.directive';
import {SidebarStateService} from '../sidebar/sidebarState.service' import {SidebarStateService} from '../sidebar/sidebarState.service'
@Component({ @Component({
selector: 'page-top', selector: 'page-top',
styles: [ require('./pageTop.scss') ], styles: [require('./pageTop.scss')],
template: require('./pageTop.html'), template: require('./pageTop.html'),
directives: [MsgCenter, ScrollPosition], directives: [MsgCenter, ScrollPosition],
pipes: [ProfilePicturePipe] pipes: [ProfilePicturePipe]
}) })
export class PageTop { export class PageTop {
isScrolled: Boolean = false; isScrolled:Boolean = false;
isMenuCollapsed: boolean = false; isMenuCollapsed:boolean = false;
private _sidebarStateSubscription: Subscription; private _sidebarStateSubscription:Subscription;
constructor(private _sidebarStateService: SidebarStateService) { constructor(private _sidebarStateService:SidebarStateService) {
this._sidebarStateSubscription = this._sidebarStateService.getStateStream().subscribe((isCollapsed) => this.isMenuCollapsed = isCollapsed); this._sidebarStateSubscription = this._sidebarStateService.getStateStream().subscribe((isCollapsed) => this.isMenuCollapsed = isCollapsed);
} }
toggleMenu() { toggleMenu() {
this.isMenuCollapsed = !this.isMenuCollapsed; this.isMenuCollapsed = !this.isMenuCollapsed;
this._sidebarStateService.stateChanged(this.isMenuCollapsed); this._sidebarStateService.stateChanged(this.isMenuCollapsed);
} }
scrolledChanged(isScrolled) { scrolledChanged(isScrolled) {
this.isScrolled = isScrolled; this.isScrolled = isScrolled;
} }
} }

41
src/app/theme/pageTop/pageTop.html
View file

@ -1,24 +1,25 @@
<div class="page-top clearfix" scrollPosition maxHeight="50" (scrollChange)="scrolledChanged($event)" [ngClass]="{scrolled: isScrolled}"> <div class="page-top clearfix" scrollPosition maxHeight="50" (scrollChange)="scrolledChanged($event)"
<a href="#/dashboard" class="al-logo clearfix"><span>Blur</span>Admin</a> [ngClass]="{scrolled: isScrolled}">
<a (click)="toggleMenu()" class="collapse-menu-link ion-navicon"></a> <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"> <div class="search">
<i class="ion-ios-search-strong" ng-click="startSearch()"></i> <i class="ion-ios-search-strong" ng-click="startSearch()"></i>
<input id="searchInput" type="text" placeholder="Search for..."> <input id="searchInput" type="text" placeholder="Search for...">
</div> </div>
<div class="user-profile clearfix"> <div class="user-profile clearfix">
<div class="dropdown al-user-profile"> <div class="dropdown al-user-profile">
<a class="profile-toggle-link dropdown-toggle" id="user-profile-dd" data-toggle="dropdown" aria-expanded="false"> <a class="profile-toggle-link dropdown-toggle" id="user-profile-dd" data-toggle="dropdown" aria-expanded="false">
<img src="{{ ( 'Nasta' | profilePicture ) }}"> <img src="{{ ( 'Nasta' | profilePicture ) }}">
</a> </a>
<div class="dropdown-menu top-dropdown-menu profile-dropdown" aria-labelledby="user-profile-dd"> <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"><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="#/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><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> <li class="dropdown-item"><a href class="signout"><i class="fa fa-power-off"></i>Sign out</a></li>
</div> </div>
</div>
<msg-center></msg-center>
</div> </div>
<msg-center></msg-center>
</div>
</div> </div>

4
src/app/theme/pageTop/pageTop.scss
View file

@ -156,7 +156,7 @@ a.collapse-menu-link {
} }
@media (max-width: $resXXS) { @media (max-width: $resXXS) {
.user-profile{ .user-profile {
min-width: 136px; min-width: 136px;
} }
a.refresh-data { a.refresh-data {
@ -171,6 +171,6 @@ a.collapse-menu-link {
} }
} }
.profile-toggle-link{ .profile-toggle-link {
cursor: pointer; cursor: pointer;
} }

2
src/app/theme/pipes/image/profile-picture.pipe.ts
View file

@ -4,7 +4,7 @@ import {layoutPaths} from '../../theme.constants';
@Pipe({name: 'profilePicture'}) @Pipe({name: 'profilePicture'})
export class ProfilePicturePipe implements PipeTransform { export class ProfilePicturePipe implements PipeTransform {
transform(input: string, args:string[]): string { transform(input:string, args:string[]):string {
let ext = args[0] || 'png'; let ext = args[0] || 'png';
return layoutPaths.images.profile + input + '.' + ext; return layoutPaths.images.profile + input + '.' + ext;
} }

5
src/app/theme/sass/_buttons.scss
View file

@ -45,7 +45,7 @@ $hover: 24;
} }
&.btn-default { &.btn-default {
@include styleButton(transparent, $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); background-color: rgba(0, 0, 0, 0.2);
color: $default; color: $default;
} }
@ -124,7 +124,6 @@ button.btn.btn-danger {
} }
} }
button.btn.btn-inverse { button.btn.btn-inverse {
@include buttonColor($help-text, $help-text); @include buttonColor($help-text, $help-text);
color: $default; color: $default;
@ -134,8 +133,6 @@ button.btn.btn-inverse {
} }
} }
.btn-with-icon { .btn-with-icon {
i { i {
margin-right: 10px; margin-right: 10px;

3
src/app/theme/sass/_icons.scss
View file

@ -22,7 +22,6 @@
@include svg-icon-class('person', 80, 80); @include svg-icon-class('person', 80, 80);
@include svg-icon-class('refresh', 80, 80); @include svg-icon-class('refresh', 80, 80);
@mixin png-icon($url, $width, $height) { @mixin png-icon($url, $width, $height) {
display: inline-block; display: inline-block;
width: $width + px; width: $width + px;
@ -37,4 +36,4 @@
} }
} }
//@include icon-png-class('arrival-icon', 11, 11); //@include icon-png-class('arrival-icon', 11, 11);

19
src/app/theme/sass/_layout.scss
View file

@ -1,6 +1,6 @@
$left-space: 180px; $left-space: 180px;
@include scrollbars(.5em, #d9d9d9, rgba(0,0,0,0)); @include scrollbars(.5em, #d9d9d9, rgba(0, 0, 0, 0));
html { html {
position: relative; position: relative;
@ -18,14 +18,12 @@ body {
@include main-background(); @include main-background();
} }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) html {
{
html{
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
} }
body{ body {
overflow: auto; overflow: auto;
height: 100%; height: 100%;
} }
@ -36,9 +34,10 @@ a {
outline: 0 !important; outline: 0 !important;
} }
.body-bg{ .body-bg {
display: none; display: none;
} }
.al-header { .al-header {
display: block; display: block;
height: 49px; height: 49px;
@ -194,8 +193,8 @@ a {
} }
.full-invisible { .full-invisible {
visibility: hidden!important; visibility: hidden !important;
* { * {
visibility: hidden!important; visibility: hidden !important;
} }
} }

3
src/app/theme/sass/_preloader.scss
View file

@ -6,6 +6,7 @@
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
} }
} }
@-moz-keyframes spin { @-moz-keyframes spin {
0% { 0% {
-moz-transform: rotate(0deg); /* Firefox 16+*/ -moz-transform: rotate(0deg); /* Firefox 16+*/
@ -74,4 +75,4 @@
animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
} }
} }
} }

26
src/app/theme/sass/_table.scss
View file

@ -241,23 +241,23 @@ body.badmin-transparent {
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
} }
.table > tbody > tr.primary > td { .table > tbody > tr.primary > td {
background-color: rgba($primary,0.7); background-color: rgba($primary, 0.7);
border: none; border: none;
} }
.table > tbody > tr.success > td { .table > tbody > tr.success > td {
background-color: rgba($success,0.7); background-color: rgba($success, 0.7);
border: none; border: none;
} }
.table > tbody > tr.warning > td { .table > tbody > tr.warning > td {
background-color: rgba($warning,0.7); background-color: rgba($warning, 0.7);
border: none; border: none;
} }
.table > tbody > tr.danger > td { .table > tbody > tr.danger > td {
background-color: rgba($danger,0.7); background-color: rgba($danger, 0.7);
border: none; border: none;
} }
.table > tbody > tr.info > td { .table > tbody > tr.info > td {
background-color: rgba($info,0.7); background-color: rgba($info, 0.7);
border: none; border: none;
} }
@ -282,21 +282,21 @@ th {
.table-striped > tbody > tr > td { .table-striped > tbody > tr > td {
border: none; border: none;
} }
.pagination > li > a, .pagination > li > a,
.pagination > li > span{ .pagination > li > span {
color: $default; color: $default;
border-color: $default; border-color: $default;
} }
.pagination > li:first-of-type > a, .pagination > li:first-of-type > a,
.pagination > li:first-of-type > span{ .pagination > li:first-of-type > span {
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
} }
.pagination > li:last-of-type > a, .pagination > li:last-of-type > a,
.pagination > li:last-of-type > span{ .pagination > li:last-of-type > span {
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
} }
@ -314,11 +314,11 @@ th {
.pagination > li > a:hover, .pagination > li > a:hover,
.pagination > li > span:hover, .pagination > li > span:hover,
.pagination > li > a:focus, .pagination > li > a:focus,
.pagination > li > span:focus{ .pagination > li > span:focus {
background-color: rgba(0,0,0,.2); background-color: rgba(0, 0, 0, .2);
color: $default; color: $default;
} }
.editable-buttons .btn-with-icon i { .editable-buttons .btn-with-icon i {
margin-right: 0; margin-right: 0;
} }

15
src/app/theme/sass/bootstrap-overrides/_panel.scss
View file

@ -128,7 +128,7 @@ $panel-heading-font-size: 16px;
} }
} }
.panel.bootstrap-panel{ .panel.bootstrap-panel {
.panel-body, .panel-heading { .panel-body, .panel-heading {
p, div, span { p, div, span {
color: $default-text; 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-primary,
&.panel-success, &.panel-success,
&.panel-info, &.panel-info,
&.panel-warning, &.panel-warning,
&.panel-danger{ &.panel-danger {
.panel-heading { .panel-heading {
p, div, span { p, div, span {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
@ -150,8 +150,8 @@ $panel-heading-font-size: 16px;
} }
} }
.panel-group .panel.accordion-panel{ .panel-group .panel.accordion-panel {
.panel-heading{ .panel-heading {
border-bottom: 0; border-bottom: 0;
} }
} }
@ -170,15 +170,14 @@ $panel-heading-font-size: 16px;
height: 120px; height: 120px;
} }
.footer-panel{ .footer-panel {
height: 142px; height: 142px;
} }
.light-text{ .light-text {
font-weight: $font-light; font-weight: $font-light;
} }
/* /*
.panel-group .panel { .panel-group .panel {
border-radius: 0; border-radius: 0;

19
src/app/theme/sass/conf/_mixins.scss
View file

@ -41,6 +41,7 @@
@mixin bg-nr($relativeUrl) { @mixin bg-nr($relativeUrl) {
background: url($images-root + $relativeUrl) no-repeat 0 0; background: url($images-root + $relativeUrl) no-repeat 0 0;
} }
@mixin bg($relativeUrl) { @mixin bg($relativeUrl) {
background: url($images-root + $relativeUrl); background: url($images-root + $relativeUrl);
} }
@ -93,22 +94,22 @@
@mixin overrideColors($color) { @mixin overrideColors($color) {
p, p,
h1,h2,h3,h4,h5,h6, h1, h2, h3, h4, h5, h6,
.pie-chart-item, .pie-chart-item,
.panel-heading>.dropdown .dropdown-toggle, .panel-heading > .dropdown .dropdown-toggle,
.panel-title, .panel-title,
ol.blur span, ol.blur span,
ul.blur, ul.blur,
.popular-app-cost, .popular-app-cost,
.popular-app-info, .popular-app-info,
.panel-title>.small, .panel-title > .small,
.panel-title>.small>a, .panel-title > .small > a,
.panel-title>a, .panel-title > a,
.panel-title>small, .panel-title > small,
.panel-title>small>a, .panel-title > small > a,
.traffic-text span, .traffic-text span,
.form-group label, .form-group label,
.help-block{ .help-block {
color: $color; color: $color;
} }
.feed-message .message-time, .text-muted { .feed-message .message-time, .text-muted {
@ -125,4 +126,4 @@
.progress { .progress {
background: $color; background: $color;
} }
} }

2
src/app/theme/sass/conf/_variables.scss
View file

@ -1,6 +1,6 @@
$font-family: 'Roboto', sans-serif; $font-family: 'Roboto', sans-serif;
$view-total :rgba(0,0,0,.4); $view-total: rgba(0, 0, 0, .4);
$activelink: $primary; $activelink: $primary;
$hoverlink: $primary-dark; $hoverlink: $primary-dark;

51
src/app/theme/sidebar/sidebar.component.ts
View file

@ -6,34 +6,35 @@ import {SidebarService} from './sidebar.service';
import {SidebarStateService} from './sidebarState.service'; import {SidebarStateService} from './sidebarState.service';
@Component({ @Component({
selector: 'sidebar', selector: 'sidebar',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
styles: [ require('./sidebar.scss') ], styles: [require('./sidebar.scss')],
template: require('./sidebar.html'), template: require('./sidebar.html'),
providers: [SidebarService], providers: [SidebarService],
directives: [], directives: [],
pipes: [] pipes: []
}) })
export class Sidebar { export class Sidebar {
@Input('routes') routes; @Input('routes') routes;
menuItems: Array<any>; menuItems:Array<any>;
menuHeight: number; menuHeight:number;
isMenuCollapsed: boolean; isMenuCollapsed:boolean;
showHoverElem: boolean; showHoverElem:boolean;
hoverElemHeight: number; hoverElemHeight:number;
hoverElemTop: number; hoverElemTop:number;
outOfArea: number = -200; outOfArea:number = -200;
isMenuShouldCollapsed: boolean = false; isMenuShouldCollapsed:boolean = false;
constructor(private elementRef: ElementRef, constructor(private elementRef:ElementRef,
private router: Router, private router:Router,
private _sidebarService: SidebarService, private _sidebarService:SidebarService,
private _sidebarStateService: SidebarStateService) { } private _sidebarStateService:SidebarStateService) {
}
ngOnInit() { ngOnInit() {
this.menuItems = this._sidebarService.getMenuItems(this.routes); this.menuItems = this._sidebarService.getMenuItems(this.routes);
@ -57,11 +58,11 @@ export class Sidebar {
this.updateSidebarHeight(); this.updateSidebarHeight();
} }
menuExpand () { menuExpand() {
this.menuCollapseStateChange(false); this.menuCollapseStateChange(false);
} }
menuCollapse () { menuCollapse() {
this.menuCollapseStateChange(true); this.menuCollapseStateChange(true);
} }
@ -70,9 +71,9 @@ export class Sidebar {
this._sidebarStateService.stateChanged(this.isMenuCollapsed); this._sidebarStateService.stateChanged(this.isMenuCollapsed);
} }
hoverItem ($event) { hoverItem($event) {
this.showHoverElem = true; this.showHoverElem = true;
this.hoverElemHeight = $event.currentTarget.clientHeight; this.hoverElemHeight = $event.currentTarget.clientHeight;
// TODO: get rid of magic 66 constant // TODO: get rid of magic 66 constant
this.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - 66; this.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - 66;
} }
@ -82,7 +83,7 @@ export class Sidebar {
this.menuHeight = this.elementRef.nativeElement.childNodes[0].clientHeight - 84; this.menuHeight = this.elementRef.nativeElement.childNodes[0].clientHeight - 84;
} }
toggleSubMenu ($event, item) { toggleSubMenu($event, item) {
var submenu = $($event.currentTarget).next(); var submenu = $($event.currentTarget).next();
if (this.isMenuCollapsed) { if (this.isMenuCollapsed) {
@ -99,7 +100,7 @@ export class Sidebar {
} }
private selectMenuItem() { 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) { this.menuItems.forEach(function (menu) {

17
src/app/theme/sidebar/sidebar.html
View file

@ -7,22 +7,27 @@
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span> <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
</a> </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> <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> </a>
<ul *ngIf="item.subMenu" class="al-sidebar-sublist" <ul *ngIf="item.subMenu" class="al-sidebar-sublist"
[ngClass]="{expanded: item.expanded, 'slide-right': item.slideRight}"> [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);" <a (mouseenter)="hoverItem($event, item)" *ngIf="subitem.subMenu" (click)="toggleSubMenu($event, subitem);"
class="al-sidebar-list-link subitem-submenu-link"><span>{{ subitem.title }}</span> 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> </a>
<ul *ngIf="subitem.subMenu" class="al-sidebar-sublist subitem-submenu-list" <ul *ngIf="subitem.subMenu" class="al-sidebar-sublist subitem-submenu-list"
[ngClass]="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}"> [ngClass]="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}">
<li *ngFor="#subSubitem of subitem.subMenu" (mouseenter)="hoverItem($event, item)" [ngClass]="{selected: subitem.selected}"> <li *ngFor="#subSubitem of subitem.subMenu" (mouseenter)="hoverItem($event, item)"
<a (mouseenter)="hoverItem($event, item)" [routerLink]="[subSubitem.name]"> [ngClass]="{selected: subitem.selected}">
<a (mouseenter)="hoverItem($event, item)" [routerLink]="[subSubitem.name]">
{{ subSubitem.title }}</a> {{ subSubitem.title }}</a>
</li> </li>
</ul> </ul>

2
src/app/theme/sidebar/sidebar.scss
View file

@ -146,7 +146,7 @@ a.al-sidebar-list-link {
@include default-sublist(); @include default-sublist();
} }
.sidebar-hover-elem{ .sidebar-hover-elem {
width: 4px; width: 4px;
background: $primary; background: $primary;
position: absolute; position: absolute;

13
src/app/theme/sidebar/sidebar.service.ts
View file

@ -53,17 +53,18 @@ export class SidebarService {
}] }]
} }
] ]
}]; }];
constructor() { } constructor() {
}
getMenuItems(routes) { getMenuItems(routes) {
let menuItems = routes.configs let menuItems = routes.configs
.filter(function(s) { .filter(function (s) {
return s.data.sidebarMeta != null; return s.data.sidebarMeta != null;
}) })
.map(function(s) { .map(function (s) {
var meta = s.data.sidebarMeta; var meta = s.data.sidebarMeta;
return { return {
title: s.data.title, title: s.data.title,
@ -73,10 +74,10 @@ export class SidebarService {
icon: meta.icon icon: meta.icon
}; };
}) })
.sort(function(a, b) { .sort(function (a, b) {
return (a.level - b.level) * 100 + a.order - b.order; return (a.level - b.level) * 100 + a.order - b.order;
}) })
.filter(function(item) { .filter(function (item) {
return item.level == 0; return item.level == 0;
}); });

2
src/app/theme/sidebar/sidebarState.service.ts
View file

@ -11,7 +11,7 @@ export class SidebarStateService {
isCollapsedStream$ = this._isCollapsed.asObservable(); isCollapsedStream$ = this._isCollapsed.asObservable();
// Service message commands // Service message commands
stateChanged(isCollapsed: boolean) { stateChanged(isCollapsed:boolean) {
this._isCollapsed.next(isCollapsed) this._isCollapsed.next(isCollapsed)
} }

1
src/app/theme/theme.scss
View file

@ -1,6 +1,5 @@
@import "sass/conf/conf"; @import "sass/conf/conf";
@import "sass/bootstrap-overrides/overrides"; @import "sass/bootstrap-overrides/overrides";
@import "sass/blur-admin-theme"; @import "sass/blur-admin-theme";
@import "sass/buttons"; @import "sass/buttons";
@import "sass/icons"; @import "sass/icons";