penyesuaian UI sesuai Figma
This commit is contained in:
@@ -33,3 +33,9 @@
|
||||
.header-navbar .navbar-header .navbar-brand .brand-text {
|
||||
padding-left: 11px !important;
|
||||
}
|
||||
|
||||
.brand-text-wrapper {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,27 +1,71 @@
|
||||
<nav class="header-navbar navbar-expand-md navbar navbar-with-menu navbar-without-dd-arrow fixed-top navbar-shadow"
|
||||
[ngClass]="selectedHeaderNavBarClass">
|
||||
<nav
|
||||
class="header-navbar navbar-expand-md navbar navbar-with-menu navbar-without-dd-arrow fixed-top navbar-shadow"
|
||||
[ngClass]="selectedHeaderNavBarClass"
|
||||
style="background-color: #000000 !important"
|
||||
>
|
||||
<div class="navbar-wrapper">
|
||||
<div id="navbar-header" class="navbar-header" [ngClass]="selectedNavBarHeaderClass"
|
||||
(mouseenter)="mouseEnter($event)" (mouseleave)="mouseLeave($event)">
|
||||
<div
|
||||
id="navbar-header"
|
||||
class="navbar-header"
|
||||
[ngClass]="selectedNavBarHeaderClass"
|
||||
(mouseenter)="mouseEnter($event)"
|
||||
(mouseleave)="mouseLeave($event)"
|
||||
style="background-color: #252525 !important"
|
||||
>
|
||||
<ul class="nav navbar-nav flex-row">
|
||||
<!-- Remove position relative in responsive -->
|
||||
<li class="nav-item mobile-menu d-lg-none mr-auto"><a class="nav-link nav-menu-main menu-toggle hidden-xs11"
|
||||
(click)="toggleNavigation($event)">
|
||||
<i class="feather ft-menu font-large-1"></i></a></li>
|
||||
<li class="nav-item mr-auto"><a [routerLink]="['/dashboard/sales']" class="navbar-brand"
|
||||
routerLink="/dashboard/sales"><img class="brand-logo" alt="modern admin logo"
|
||||
[src]="_themeSettingsConfig.brand.logo.value">
|
||||
<h3 class="brand-text">{{_themeSettingsConfig.brand.brand_name}}</h3>
|
||||
</a></li>
|
||||
<li class="nav-item d-none d-md-block nav-toggle">
|
||||
<a [routerLink]="" class="nav-link modern-nav-toggle pr-0" data-toggle="collapse"
|
||||
(click)="toggleFixMenu($event)">
|
||||
<i class="feather toggle-icon font-medium-3 white"
|
||||
[ngClass]="{'ft-toggle-left': _themeSettingsConfig.menu === 'collapse','ft-toggle-right': _themeSettingsConfig.menu === 'expand'}"></i>
|
||||
<li class="nav-item mobile-menu d-lg-none mr-auto">
|
||||
<a
|
||||
class="nav-link nav-menu-main menu-toggle hidden-xs11"
|
||||
(click)="toggleNavigation($event)"
|
||||
>
|
||||
<i class="feather ft-menu font-large-1"></i
|
||||
></a>
|
||||
</li>
|
||||
<li class="nav-item mr-auto">
|
||||
<a
|
||||
[routerLink]="['/dashboard/sales']"
|
||||
class="navbar-brand"
|
||||
routerLink="/dashboard/sales"
|
||||
>
|
||||
<!-- <img
|
||||
class="brand-logo"
|
||||
alt="modern admin logo"
|
||||
src="../../../../assets/images/Smart-Building.png"
|
||||
/> -->
|
||||
<!-- <h3 class="brand-text" style="color: #ffffff;">{{_themeSettingsConfig.brand.brand_name}}</h3> -->
|
||||
<div class="brand-text-wrapper" style="max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
|
||||
<h3 class="brand-text" style="color: #ffffff; margin: 0;">
|
||||
Smart Building
|
||||
</h3>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item d-lg-none"><a class="nav-link open-navbar-container" data-toggle="collapse"
|
||||
data-target="#navbar-mobile" (click)="toggleNavbar($event)"><i class="la la-ellipsis-v"></i></a></li>
|
||||
<li class="nav-item d-none d-md-block nav-toggle">
|
||||
<a
|
||||
[routerLink]=""
|
||||
class="nav-link modern-nav-toggle pr-0"
|
||||
data-toggle="collapse"
|
||||
(click)="toggleFixMenu($event)"
|
||||
>
|
||||
<i
|
||||
class="feather toggle-icon font-medium-3 white"
|
||||
[ngClass]="{
|
||||
'ft-toggle-left': _themeSettingsConfig.menu === 'collapse',
|
||||
'ft-toggle-right': _themeSettingsConfig.menu === 'expand'
|
||||
}"
|
||||
></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item d-lg-none">
|
||||
<a
|
||||
class="nav-link open-navbar-container"
|
||||
data-toggle="collapse"
|
||||
data-target="#navbar-mobile"
|
||||
(click)="toggleNavbar($event)"
|
||||
><i class="la la-ellipsis-v"></i
|
||||
></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- New-->
|
||||
@@ -57,80 +101,144 @@
|
||||
</a>
|
||||
</div>
|
||||
</li> -->
|
||||
<li class="dropdown-notification nav-item dropdown" ngbDropdown *ngIf="notification === 'on'">
|
||||
<li
|
||||
class="dropdown-notification nav-item dropdown"
|
||||
ngbDropdown
|
||||
*ngIf="notification === 'on'"
|
||||
>
|
||||
<a class="nav-link nav-link-label" ngbDropdownToggle>
|
||||
<i class="ficon feather ft-bell"></i>
|
||||
<span class="badge badge-pill badge-danger badge-up badge-glow">5</span>
|
||||
<i class="ficon feather ft-bell" style="color: #bef264"></i>
|
||||
<!-- <span class="badge badge-pill badge-danger badge-up badge-glow">5</span> -->
|
||||
</a>
|
||||
<ul class="dropdown-menu-media dropdown-menu-right" ngbDropdownMenu>
|
||||
<li class="dropdown-menu-header">
|
||||
<h6 class="dropdown-header m-0"><span class="grey darken-2">Notifications</span></h6><span
|
||||
class="notification-tag badge badge-default badge-danger float-right m-0">5 New</span>
|
||||
<h6 class="dropdown-header m-0">
|
||||
<span class="grey darken-2">Notifications</span>
|
||||
</h6>
|
||||
<span
|
||||
class="notification-tag badge badge-default badge-danger float-right m-0"
|
||||
>5 New</span
|
||||
>
|
||||
</li>
|
||||
<li class="scrollable-container media-list w-100 ps-container ps-theme-dark ps-active-y" fxFlex="auto" [perfectScrollbar]="config">
|
||||
<li
|
||||
class="scrollable-container media-list w-100 ps-container ps-theme-dark ps-active-y"
|
||||
fxFlex="auto"
|
||||
[perfectScrollbar]="config"
|
||||
>
|
||||
<a href="javascript:void(0)">
|
||||
<div class="media">
|
||||
<div class="media-left align-self-center"><i
|
||||
class="feather ft-plus-square icon-bg-circle bg-cyan"></i>
|
||||
<div class="media-left align-self-center">
|
||||
<i
|
||||
class="feather ft-plus-square icon-bg-circle bg-cyan"
|
||||
></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h6 class="media-heading">You have new order!</h6>
|
||||
<p class="notification-text font-small-3 text-muted">Lorem ipsum dolor sit amet, consectetuer
|
||||
elit.</p><small>
|
||||
<time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">30 minutes
|
||||
ago</time></small>
|
||||
<p class="notification-text font-small-3 text-muted">
|
||||
Lorem ipsum dolor sit amet, consectetuer elit.
|
||||
</p>
|
||||
<small>
|
||||
<time
|
||||
class="media-meta text-muted"
|
||||
datetime="2015-06-11T18:29:20+08:00"
|
||||
>30 minutes ago</time
|
||||
></small
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:void(0)">
|
||||
<div class="media">
|
||||
<div class="media-left align-self-center"><i
|
||||
class="feather ft-download-cloud icon-bg-circle bg-red bg-darken-1"></i></div>
|
||||
<div class="media-left align-self-center">
|
||||
<i
|
||||
class="feather ft-download-cloud icon-bg-circle bg-red bg-darken-1"
|
||||
></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h6 class="media-heading red darken-1">99% Server load</h6>
|
||||
<p class="notification-text font-small-3 text-muted">Aliquam tincidunt mauris eu risus.</p><small>
|
||||
<time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Five hour
|
||||
ago</time></small>
|
||||
<h6 class="media-heading red darken-1">
|
||||
99% Server load
|
||||
</h6>
|
||||
<p class="notification-text font-small-3 text-muted">
|
||||
Aliquam tincidunt mauris eu risus.
|
||||
</p>
|
||||
<small>
|
||||
<time
|
||||
class="media-meta text-muted"
|
||||
datetime="2015-06-11T18:29:20+08:00"
|
||||
>Five hour ago</time
|
||||
></small
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:void(0)">
|
||||
<div class="media">
|
||||
<div class="media-left align-self-center"><i
|
||||
class="feather ft-alert-triangle icon-bg-circle bg-yellow bg-darken-3"></i></div>
|
||||
<div class="media-left align-self-center">
|
||||
<i
|
||||
class="feather ft-alert-triangle icon-bg-circle bg-yellow bg-darken-3"
|
||||
></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h6 class="media-heading yellow darken-3">Warning notifixation</h6>
|
||||
<p class="notification-text font-small-3 text-muted">Vestibulum auctor dapibus neque.</p><small>
|
||||
<time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Today</time></small>
|
||||
<h6 class="media-heading yellow darken-3">
|
||||
Warning notifixation
|
||||
</h6>
|
||||
<p class="notification-text font-small-3 text-muted">
|
||||
Vestibulum auctor dapibus neque.
|
||||
</p>
|
||||
<small>
|
||||
<time
|
||||
class="media-meta text-muted"
|
||||
datetime="2015-06-11T18:29:20+08:00"
|
||||
>Today</time
|
||||
></small
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:void(0)">
|
||||
<div class="media">
|
||||
<div class="media-left align-self-center"><i
|
||||
class="feather ft-check-circle icon-bg-circle bg-cyan"></i>
|
||||
<div class="media-left align-self-center">
|
||||
<i
|
||||
class="feather ft-check-circle icon-bg-circle bg-cyan"
|
||||
></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h6 class="media-heading">Complete the task</h6><small>
|
||||
<time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Last
|
||||
week</time></small>
|
||||
<h6 class="media-heading">Complete the task</h6>
|
||||
<small>
|
||||
<time
|
||||
class="media-meta text-muted"
|
||||
datetime="2015-06-11T18:29:20+08:00"
|
||||
>Last week</time
|
||||
></small
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:void(0)">
|
||||
<div class="media">
|
||||
<div class="media-left align-self-center"><i class="feather ft-file icon-bg-circle bg-teal"></i>
|
||||
<div class="media-left align-self-center">
|
||||
<i class="feather ft-file icon-bg-circle bg-teal"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h6 class="media-heading">Generate monthly report</h6><small>
|
||||
<time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Last
|
||||
month</time></small>
|
||||
<h6 class="media-heading">Generate monthly report</h6>
|
||||
<small>
|
||||
<time
|
||||
class="media-meta text-muted"
|
||||
datetime="2015-06-11T18:29:20+08:00"
|
||||
>Last month</time
|
||||
></small
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-menu-footer"><a class="dropdown-item text-muted text-center"
|
||||
href="javascript:void(0)">Read all notifications</a></li>
|
||||
<li class="dropdown-menu-footer">
|
||||
<a
|
||||
class="dropdown-item text-muted text-center"
|
||||
href="javascript:void(0)"
|
||||
>Read all notifications</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- <li class="dropdown-notification nav-item" ngbDropdown>
|
||||
@@ -198,24 +306,52 @@
|
||||
|
||||
<li class="dropdown-user nav-item" ngbDropdown>
|
||||
<a class="nav-link dropdown-user-link" ngbDropdownToggle>
|
||||
<span *ngIf="currentUser.displayName"
|
||||
class="mr-1 user-name text-bold-700">{{currentUser.displayName}}</span>
|
||||
<span *ngIf="!currentUser.displayName" class="mr-1 user-name text-bold-700">John Doe</span>
|
||||
<span
|
||||
*ngIf="currentUser.displayName"
|
||||
class="mr-1 user-name text-bold-700"
|
||||
style="color: #ffffff"
|
||||
>{{ currentUser.displayName }}</span
|
||||
>
|
||||
<span
|
||||
*ngIf="!currentUser.displayName"
|
||||
class="mr-1 user-name text-bold-700"
|
||||
>John Doe</span
|
||||
>
|
||||
<span class="avatar avatar-online">
|
||||
<img *ngIf="currentUser.photoURL" src="{{currentUser.photoURL}}" alt="avatar">
|
||||
<img *ngIf="!currentUser.photoURL" src="../../../assets/images/portrait/small/avatar-s-19.png"
|
||||
alt="avatar">
|
||||
<img
|
||||
*ngIf="currentUser.photoURL"
|
||||
src="{{ currentUser.photoURL }}"
|
||||
alt="avatar"
|
||||
/>
|
||||
<img
|
||||
*ngIf="!currentUser.photoURL"
|
||||
src="../../../assets/images/portrait/small/avatar-s-19.png"
|
||||
alt="avatar"
|
||||
/>
|
||||
<i></i>
|
||||
</span>
|
||||
</a>
|
||||
<div ngbDropdownMenu class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownProfileMenu">
|
||||
<a class="dropdown-item" [routerLink]="['/user/user-profile']"><i class="feather ft-user"></i> Edit
|
||||
Profile </a>
|
||||
<a class="dropdown-item" [routerLink]="['/email']"><i class="feather ft-mail"></i> My Inbox </a>
|
||||
<a class="dropdown-item" [routerLink]="['/todos']"><i class="feather ft-check-square"></i> Task </a>
|
||||
<a class="dropdown-item" [routerLink]="['/chats']"><i class="feather ft-message-square"></i> Chats </a>
|
||||
<div
|
||||
ngbDropdownMenu
|
||||
class="dropdown-menu dropdown-menu-right"
|
||||
aria-labelledby="dropdownProfileMenu"
|
||||
>
|
||||
<a class="dropdown-item" [routerLink]="['/user/user-profile']"
|
||||
><i class="feather ft-user"></i> Edit Profile
|
||||
</a>
|
||||
<a class="dropdown-item" [routerLink]="['/email']"
|
||||
><i class="feather ft-mail"></i> My Inbox
|
||||
</a>
|
||||
<a class="dropdown-item" [routerLink]="['/todos']"
|
||||
><i class="feather ft-check-square"></i> Task
|
||||
</a>
|
||||
<a class="dropdown-item" [routerLink]="['/chats']"
|
||||
><i class="feather ft-message-square"></i> Chats
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" [routerLink]="" (click)="logout()"><i class="feather ft-power"></i> Logout</a>
|
||||
<a class="dropdown-item" [routerLink]="" (click)="logout()"
|
||||
><i class="feather ft-power"></i> Logout</a
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user