init
This commit is contained in:
Jason Kulatunga
@@ -0,0 +1,13 @@
|
||||
<!-- Container -->
|
||||
<div class="container">
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
|
||||
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. Otherwise,
|
||||
it won't register the changes on the layout and won't update the view. -->
|
||||
<router-outlet *ngIf="true"></router-outlet>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,39 @@
|
||||
@import 'treo';
|
||||
|
||||
empty-layout {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
|
||||
// Container
|
||||
> .container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
|
||||
// Content
|
||||
> .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 auto;
|
||||
|
||||
> *:not(router-outlet) {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Theming
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@include treo-theme {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector : 'empty-layout',
|
||||
templateUrl : './empty.component.html',
|
||||
styleUrls : ['./empty.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class EmptyLayoutComponent implements OnInit, OnDestroy
|
||||
{
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor()
|
||||
{
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { EmptyLayoutComponent } from 'app/layout/layouts/empty/empty.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
EmptyLayoutComponent
|
||||
],
|
||||
imports : [
|
||||
RouterModule,
|
||||
SharedModule
|
||||
],
|
||||
exports : [
|
||||
EmptyLayoutComponent
|
||||
]
|
||||
})
|
||||
export class EmptyLayoutModule
|
||||
{
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
<!-- Navigation -->
|
||||
<treo-vertical-navigation class="bg-cool-gray-900 theme-dark"
|
||||
*ngIf="isScreenSmall"
|
||||
[appearance]="'classic'"
|
||||
[mode]="'over'"
|
||||
[name]="'mainNavigation'"
|
||||
[navigation]="data.navigation.default"
|
||||
[opened]="false">
|
||||
|
||||
<div treoVerticalNavigationContentHeader>
|
||||
<a class="logo" routerLink="/dashboard">
|
||||
<img src="assets/images/logo/scrutiny-logo-white-text.png">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</treo-vertical-navigation>
|
||||
|
||||
<!-- Wrapper -->
|
||||
<div class="wrapper">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
|
||||
<!-- Header container -->
|
||||
<div class="container">
|
||||
|
||||
<!-- Top bar -->
|
||||
<div class="top-bar">
|
||||
|
||||
<!-- Logo -->
|
||||
<a class="logo"
|
||||
routerLink="/dashboard"
|
||||
*ngIf="!isScreenSmall">
|
||||
<img class="logo-text"
|
||||
src="assets/images/logo/scrutiny-logo-dark-text.png">
|
||||
<img class="logo-text-on-dark"
|
||||
src="assets/images/logo/scrutiny-logo-white-text.png">
|
||||
</a>
|
||||
|
||||
<!-- Spacer -->
|
||||
<div class="spacer"></div>
|
||||
|
||||
|
||||
<!-- Shortcuts -->
|
||||
<!-- <shortcuts [shortcuts]="data.shortcuts"></shortcuts>-->
|
||||
|
||||
<!-- Notifications -->
|
||||
<!-- <notifications [notifications]="data.notifications"></notifications>-->
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
|
||||
<!-- *ngIf="true" hack is required here for router-outlet to work correctly. Otherwise,
|
||||
it won't register the changes on the layout and won't update the view. -->
|
||||
<router-outlet *ngIf="true"></router-outlet>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,259 @@
|
||||
@import 'treo';
|
||||
|
||||
material-layout {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
|
||||
> treo-vertical-navigation {
|
||||
|
||||
.treo-vertical-navigation-content-header {
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 80px;
|
||||
min-height: 80px;
|
||||
max-height: 80px;
|
||||
padding: 24px 32px 0 32px;
|
||||
|
||||
img {
|
||||
max-width: 96px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
|
||||
> .header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 49;
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
max-width: 1440px;
|
||||
width: calc(100% - 64px);
|
||||
margin: 48px 32px 0 32px;
|
||||
padding: 16px 0 12px 0;
|
||||
border-bottom-width: 1px;
|
||||
border-radius: 12px 12px 0 0;
|
||||
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.04);
|
||||
overflow: hidden;
|
||||
|
||||
@include treo-breakpoint('lt-md') {
|
||||
margin-top: 32px;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
@include treo-breakpoint('xs') {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.top-bar,
|
||||
.bottom-bar {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
max-height: 64px;
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
position: relative;
|
||||
padding: 0 24px;
|
||||
|
||||
@include treo-breakpoint('lt-md') {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 8px;
|
||||
|
||||
img {
|
||||
width: 150px;
|
||||
min-width: 100px;
|
||||
max-width: 175px;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-toggle-button {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
search {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
shortcuts {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
messages {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
notifications {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
max-width: 1440px;
|
||||
width: calc(100% - 64px);
|
||||
margin: 0 32px;
|
||||
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.04);
|
||||
|
||||
@include treo-breakpoint('xs') {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
> *:not(router-outlet) {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
> .footer {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
max-width: 1440px;
|
||||
width: calc(100% - 64px);
|
||||
height: 80px;
|
||||
max-height: 80px;
|
||||
min-height: 80px;
|
||||
margin: 0 32px;
|
||||
padding: 0 24px;
|
||||
z-index: 49;
|
||||
border-top-width: 1px;
|
||||
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.04);
|
||||
|
||||
@include treo-breakpoint('xs') {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@include treo-breakpoint('xs') {
|
||||
height: 56px;
|
||||
max-height: 56px;
|
||||
min-height: 56px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.fixed-header {
|
||||
|
||||
> .wrapper {
|
||||
|
||||
> .header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.fixed-footer {
|
||||
|
||||
> .wrapper {
|
||||
|
||||
> .footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Theming
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
@include treo-theme {
|
||||
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$primary: map-get($theme, primary);
|
||||
$is-dark: map-get($theme, is-dark);
|
||||
|
||||
material-layout {
|
||||
|
||||
> .wrapper {
|
||||
@if ($is-dark) {
|
||||
background: map-get($background, card);
|
||||
} @else {
|
||||
background: treo-color('cool-gray', 200);
|
||||
}
|
||||
|
||||
> .header {
|
||||
background: map-get($primary, 700);
|
||||
|
||||
.container {
|
||||
background: map-get($background, card);
|
||||
|
||||
.logo {
|
||||
|
||||
.logo-text {
|
||||
@if ($is-dark) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-text-on-dark {
|
||||
@if (not $is-dark) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .content {
|
||||
background: map-get($background, background);
|
||||
}
|
||||
|
||||
> .footer {
|
||||
@if (not $is-dark) {
|
||||
background: map-get($background, card);
|
||||
}
|
||||
color: map-get($foreground, secondary-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
import { Component, HostBinding, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { ActivatedRoute, Data, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { TreoMediaWatcherService } from '@treo/services/media-watcher';
|
||||
import { TreoNavigationService } from '@treo/components/navigation';
|
||||
|
||||
@Component({
|
||||
selector : 'material-layout',
|
||||
templateUrl : './material.component.html',
|
||||
styleUrls : ['./material.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class MaterialLayoutComponent implements OnInit, OnDestroy
|
||||
{
|
||||
data: any;
|
||||
isScreenSmall: boolean;
|
||||
|
||||
@HostBinding('class.fixed-header')
|
||||
fixedHeader: boolean;
|
||||
|
||||
@HostBinding('class.fixed-footer')
|
||||
fixedFooter: boolean;
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {ActivatedRoute} _activatedRoute
|
||||
* @param {TreoMediaWatcherService} _treoMediaWatcherService
|
||||
* @param {TreoNavigationService} _treoNavigationService
|
||||
* @param {Router} _router
|
||||
*/
|
||||
constructor(
|
||||
private _activatedRoute: ActivatedRoute,
|
||||
private _treoMediaWatcherService: TreoMediaWatcherService,
|
||||
private _treoNavigationService: TreoNavigationService,
|
||||
private _router: Router
|
||||
)
|
||||
{
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
|
||||
// Set the defaults
|
||||
this.fixedHeader = false;
|
||||
this.fixedFooter = false;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Getter for current year
|
||||
*/
|
||||
get currentYear(): number
|
||||
{
|
||||
return new Date().getFullYear();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Subscribe to the resolved route data
|
||||
this._activatedRoute.data.subscribe((data: Data) => {
|
||||
this.data = data.initialData;
|
||||
});
|
||||
|
||||
// Subscribe to media changes
|
||||
this._treoMediaWatcherService.onMediaChange$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(({matchingAliases}) => {
|
||||
|
||||
// Check if the breakpoint is 'lt-md'
|
||||
this.isScreenSmall = matchingAliases.includes('lt-md');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle navigation
|
||||
*
|
||||
* @param key
|
||||
*/
|
||||
toggleNavigation(key): void
|
||||
{
|
||||
// Get the navigation
|
||||
const navigation = this._treoNavigationService.getComponent(key);
|
||||
|
||||
if ( navigation )
|
||||
{
|
||||
// Toggle the opened status
|
||||
navigation.toggle();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatDividerModule } from '@angular/material/divider';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { TreoNavigationModule } from '@treo/components/navigation';
|
||||
import { SearchModule } from 'app/layout/common/search/search.module';
|
||||
import { SharedModule } from 'app/shared/shared.module';
|
||||
import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/material.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
MaterialLayoutComponent
|
||||
],
|
||||
imports : [
|
||||
HttpClientModule,
|
||||
RouterModule,
|
||||
MatButtonModule,
|
||||
MatDividerModule,
|
||||
MatIconModule,
|
||||
MatMenuModule,
|
||||
TreoNavigationModule,
|
||||
SearchModule,
|
||||
SharedModule
|
||||
],
|
||||
exports : [
|
||||
MaterialLayoutComponent
|
||||
]
|
||||
})
|
||||
export class MaterialLayoutModule
|
||||
{
|
||||
}
|
||||
Reference in New Issue
Block a user