purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Navbar toggle button should be right aligned if right navbar selected

Browse Source 
Navbar classes actually moved to the navbar from fuse-sidebar
Search icon color
This commit is contained in:
Sercan Yemen 2018-06-12 10:28:08 +03:00
parent 9c88524185
commit 43189728e5
10 changed files with 35 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/@fuse/components/search-bar/search-bar.component.html
View File

@ -17,7 +17,7 @@
<button mat-icon-button class="fuse-search-bar-collapser" (click)="collapse()"
aria-label="Collapse Search Bar">
<mat-icon class="s-24">close</mat-icon>
<mat-icon class="secondary-text s-24">close</mat-icon>
</button>
</div>

4
src/app/layout/components/navbar/navbar.component.html
View File

@ -9,12 +9,12 @@
<span class="logo-text">FUSE</span>
</div>
<button mat-icon-button class="toggle-button-navbar"
<button mat-icon-button class="toggle-sidebar-folded"
(click)="toggleSidebarFolded()" fxHide.lt-lg>
<mat-icon>menu</mat-icon>
</button>
<button mat-icon-button class="toggle-button-navbar"
<button mat-icon-button class="toggle-sidebar-opened"
(click)="toggleSidebarOpened()" fxHide.gt-md>
<mat-icon>arrow_back</mat-icon>
</button>

35
src/app/layout/components/navbar/navbar.component.scss
View File

@ -1,28 +1,5 @@
@import "src/@fuse/scss/fuse";
body {
&.fuse-sidebar-folded {
.content-wrapper {
&:last-child {
padding-left: 64px !important;
}
&:first-child {
padding-right: 64px !important;
}
&:first-child:last-child {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
}
}
fuse-sidebar {
&.folded:not(.unfolded) {
@ -89,16 +66,14 @@ navbar {
flex: 1;
}
}
}
.top-navbar + #wrapper {
&.right-navbar {
& > .left-navbar {
display: none !important;
.toggle-sidebar-opened {
@include media-breakpoint-down(md) {
display: flex !important;
mat-icon {
transform: rotate(180deg);
}
}
}
}

16
src/app/layout/components/toolbar/toolbar.component.html
View File

@ -6,13 +6,12 @@
<div fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="toggle-button-navbar"
*ngIf="!noNav"
(click)="toggleSidebarOpen('navbar')" fxHide.gt-md>
<mat-icon>menu</mat-icon>
<button mat-icon-button class="navbar-toggle-button"
*ngIf="!hiddenNavbar && !rightNavbar" (click)="toggleSidebarOpen('navbar')" fxHide.gt-md>
<mat-icon class="secondary-text">menu</mat-icon>
</button>
<div class="toolbar-separator" fxHide.gt-md></div>
<div class="toolbar-separator" *ngIf="!hiddenNavbar && !rightNavbar" fxHide.gt-md></div>
<div fxLayout="row" fxLayoutAlign="start center" *ngIf="horizontalNav">
<div class="logo ml-16">
@ -97,6 +96,13 @@
<mat-icon class="icon">format_list_bulleted</mat-icon>
</button>
<div class="toolbar-separator" *ngIf="!hiddenNavbar && rightNavbar" fxHide fxShow.gt-xs></div>
<button mat-icon-button class="navbar-toggle-button"
*ngIf="!hiddenNavbar && rightNavbar" (click)="toggleSidebarOpen('navbar')" fxHide.gt-md>
<mat-icon class="secondary-text">menu</mat-icon>
</button>
</div>
</div>

2
src/app/layout/components/toolbar/toolbar.component.scss
View File

@ -45,7 +45,7 @@
}
}
.toggle-button-navbar {
.navbar-toggle-button {
min-width: 56px;
height: 56px;
}

10
src/app/layout/components/toolbar/toolbar.component.ts
View File

@ -18,9 +18,10 @@ import { navigation } from 'app/navigation/navigation';
export class ToolbarComponent implements OnInit, OnDestroy
{
horizontalNav: boolean;
horizontalNavbar: boolean;
rightNavbar: boolean;
hiddenNavbar: boolean;
languages: any;
noNav: boolean;
navigation: any;
selectedLanguage: any;
showLoadingBar: boolean;
@ -123,8 +124,9 @@ export class ToolbarComponent implements OnInit, OnDestroy
this._fuseConfigService.config
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((settings) => {
this.horizontalNav = settings.layout.navbar.position === 'top';
this.noNav = settings.layout.navbar.position === 'none';
this.horizontalNavbar = settings.layout.navbar.position === 'top';
this.rightNavbar = settings.layout.navbar.position === 'right';
this.hiddenNavbar = settings.layout.navbar.hidden === true;
});
// Set the selected language from default languages

7
src/app/layout/horizontal/layout-1/layout-1.component.html
View File

@ -82,8 +82,8 @@
<!-- TOP NAVBAR -->
<ng-template #topNavbar>
<navbar layout="horizontal"
class="top-navbar" fxHide fxShow.gt-md
[ngClass]="fuseConfig.layout.navbar.background"
class="top-navbar" [ngClass]="fuseConfig.layout.navbar.background"
fxHide fxShow.gt-md
*ngIf="!fuseConfig.layout.navbar.hidden">
</navbar>
</ng-template>
@ -93,9 +93,8 @@
<ng-template #leftNavbar>
<fuse-sidebar [name]="'navbar'"
[folded]="fuseConfig.layout.navbar.folded"
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar layout="vertical"></navbar>
<navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / LEFT NAVBAR -->

6
src/app/layout/vertical/layout-1/body-scroll/body-scroll.component.html
View File

@ -96,9 +96,8 @@
<fuse-sidebar [name]="'navbar'"
[folded]="fuseConfig.layout.navbar.folded"
[lockedOpen]="'gt-md'"
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar layout="vertical"></navbar>
<navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / LEFT NAVBAR -->
@ -108,9 +107,8 @@
<fuse-sidebar [name]="'navbar'" position="right"
[folded]="fuseConfig.layout.navbar.folded"
[lockedOpen]="'gt-md'"
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar layout="vertical"></navbar>
<navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / RIGHT NAVBAR -->

6
src/app/layout/vertical/layout-1/content-scroll/content-scroll.component.html
View File

@ -96,9 +96,8 @@
<fuse-sidebar [name]="'navbar'"
[folded]="fuseConfig.layout.navbar.folded"
[lockedOpen]="'gt-md'"
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar layout="vertical"></navbar>
<navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / LEFT NAVBAR -->
@ -108,9 +107,8 @@
<fuse-sidebar [name]="'navbar'" position="right"
[folded]="fuseConfig.layout.navbar.folded"
[lockedOpen]="'gt-md'"
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar layout="vertical"></navbar>
<navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / RIGHT NAVBAR -->

6
src/app/layout/vertical/layout-2/layout-2.component.html
View File

@ -82,9 +82,8 @@
<fuse-sidebar [name]="'navbar'"
[folded]="fuseConfig.layout.navbar.folded"
[lockedOpen]="'gt-md'"
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar layout="vertical"></navbar>
<navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / LEFT NAVBAR -->
@ -94,9 +93,8 @@
<fuse-sidebar [name]="'navbar'" position="right"
[folded]="fuseConfig.layout.navbar.folded"
[lockedOpen]="'gt-md'"
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar layout="vertical"></navbar>
<navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / RIGHT NAVBAR -->