cff-layout v2.0.0

🤓 CffLayout

This library was generated with Angular CLI version 9.0.1.

Note: This lib is using @angular/material and Material Icon

Usage

• Run npm install cff-layout
• Run yarn add cff-layout

Example

Import CffLayoutModule to Angular module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { CffLayoutModule } from 'cff-layout';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    CffLayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add Component

import { Component, AfterViewInit, OnDestroy, OnInit, ViewChild, ElementRef } from '@angular/core';

import { CffTopBarRightMenu, CffMenuItem } from 'cff-layout';
import { Router, NavigationStart, NavigationEnd, NavigationCancel } from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: []
})
export class AppComponent implements AfterViewInit, OnDestroy, OnInit {
  @ViewChild('container', { static: true }) container: ElementRef;
  @ViewChild('layout', { static: true }) layout: ElementRef;

  isRouting = false;
  routingTimeout = null;
  staticMenuDesktopInactive: boolean;
  staticMenuMobileActive: boolean;
  leftPanelClick: boolean;
  model: CffMenuItem[] = [];
  topRightMenu: CffTopBarRightMenu[] = [];

  constructor(
    private router: Router
  ) { }

  ngOnInit() {
    this.model = [
      { label: 'res.home', icon: 'home', routerLink: ['/'] },
      {
        label: 'res.branch', icon: 'cloud', items: [
          { label: 'res.branch_list', icon: '', routerLink: ['/branch/list'] },
          { label: 'res.branch_create', icon: '', routerLink: ['/branch/create'] }
        ]
      },
      {
        label: 'res.user', icon: 'account_circle', items: [
          { label: 'res.user_list', icon: '', routerLink: ['/user/list'] },
          { label: 'res.user_create', icon: '', routerLink: ['/user/create'] },
          { label: 'res.user_profile', icon: '', routerLink: ['/user/profile'] }
        ]
      }
    ];
    this.topRightMenu = [
      {
        icon: 'exit_to_app',
        toolTip: 'logout',
        command: evt => this.doLogout()
      }
    ];
  }

  ngAfterViewInit() {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationStart) {
        clearTimeout(this.routingTimeout);
        this.routingTimeout = setTimeout(() => {
          this.isRouting = true;
        }, 200);
      } else if (event instanceof NavigationEnd || event instanceof NavigationCancel) {
        clearTimeout(this.routingTimeout);
        this.routingTimeout = setTimeout(() => {
          this.isRouting = false;
        }, 400);
      }
    });
  }

  doLogout() {
    this.router.navigate(['/public/login']);
  }

  onLayoutClick() {
    if (!this.leftPanelClick) {
      this.doHideMenuStatic();
    }
    this.leftPanelClick = false;
  }

  doHideMenuStatic() {
    if (this.isMobile()) {
      this.staticMenuMobileActive = false;
    }
  }

  onMenuButtonClick(event) {
    if (this.isDesktop()) {
      this.staticMenuDesktopInactive = !this.staticMenuDesktopInactive;
    } else {
      this.staticMenuMobileActive = !this.staticMenuMobileActive;
    }
    this.leftPanelClick = true;
    event.preventDefault();
  }

  onLeftPanelClick() {
    this.leftPanelClick = true;
  }

  isMobile() {
    return window.innerWidth < 768;
  }

  isDesktop() {
    return window.innerWidth >= 768;
  }

  isTablet() {
    const width = window.innerWidth;
    return width < 768 && width > 640;
  }

  ngOnDestroy() {
    if (this.routingTimeout) {
      clearTimeout(this.routingTimeout);
    }
  }
}

Add template

<div class="layout-wrapper layout-static layout-light"
  [ngClass]="{'layout-mobile-active': staticMenuMobileActive,'layout-static-inactive': staticMenuDesktopInactive}"
  (click)="onLayoutClick()">
  <div class="layout-main">
    <cff-topbar (doToggleMenu)=onMenuButtonClick($event) [rightMenu]="topRightMenu"></cff-topbar>
    <div class="layout-content" #layout>
      <div class="view-scroll-content">
        <div #container class="view-container">
          <router-outlet></router-outlet>
        </div>
      </div>
    </div>
    <div class="layout-main-mask"></div>
  </div>
  <div class="layout-sidebar" (click)="onLeftPanelClick()">
    <div class="layout-sidebar-logo"></div>
    <div class="sidebar-scroll-content">
      <div class="layout-menu-container" style="margin-bottom: 60px;">
        <ul cff-menu [item]="model" root="true" class="layout-menu" visible="true" parentActive="true"
          (hideMenu)="doHideMenuStatic()"></ul>
      </div>
    </div>
  </div>
</div>

Add Style

$fontFamily:"Roboto";
$fontSize:14px;
$textColor:#333333;
$textSecondaryColor:lighten($textColor,25%);
$borderRadius:2px;
$dividerColor:#d8dae2;
$transitionDuration:.3s;

$blue:#147df0;
$pink:#ed3c76;
$green:#3e9018;
$red:#da2f31;
$orange:#ffb200;
$teal:#599597;
$purple:#633ea5;
$black:#000000;
$yellow:#ffd644;
$silver: #f7f7f7;
// common
$sidebarTopStartBgColor:#3d72b4;
$sidebarTopEndBgColor:#525252;
$sidebarAnchorColor:#ffffff;
$menuitemActiveColor:#3D72B4;
$rootMenuitemActiveIconColor:#ffffff;
$menuitemBadgeBgColor:#7f7f7f;
$menuitemBadgeTextColor:#ffffff;
$horizontalLayoutTopbarTextColor:#ffffff;
$horizontalLayoutTopbarTextHoverColor:#BDD0E7;
// topbar
$bodyBgColor:#f4f3f8;
$topbarBgColor:#ffffff;
$topbarIconColor:#5b5b5b;
$topbarIconHoverColor:#7f8087;
$topbarIconActiveColor:#48494d;
$topbarInputBorderColor:#d8dae2;
$topbarSubmenuHoverBgColor:#f1f2f7;
$topbarMobileMenuBgColor:#ffffff;
// dark sidebar - default
$sidebarBgColor:#2c2d3c;
$menuitemIconBgColor:#1d1d26;
$menuitemTextColor:#d9dae3;
$menuitemHoverBgColor:#1d1d26;
$submenuitemHoverBgColor:#242430;
$activeMenuitemBgColor:#17171e;
$submenuBgColor:#17171e;
// light sidebar
$lightSidebarBgColor:#f2f2f7;
$lightSidebarMenuitemIconBgColor:#d9d9de;
$lightSidebarMenuitemTextColor:#575867;
$lightSidebarMenuitemHoverBgColor:#d9d9de;
$lightSidebarSubmenuitemHoverBgColor:#d9d9de;
$lightSidebarActiveMenuitemBgColor:#ffffff;
$lightSidebarSubmenuBgColor:#ffffff;
// misc
$rightPanelBgColor:#ffffff;
$mobileBreakpoint:767px;
$contentMobileMaskBgColor:#ffffff;
@import '~cff-layout/theming';

Input and Output

Menu

• Input item: CffMenuItem
• Input root: boolean
• Input visible: boolean
• Output hideMenu: EventEmitter<any>

Topbar

• Input rightMenu: CffTopBarRightMenu[]
• Input leftMenu: CffTopBarLeftMenu[]
• Output doToggleMenu: EventEmitter<any>

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.