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

(shortcuts) some refinements (perfect scrollbar, star, width, autofocus)

Browse Source 
+ removed !important on some classes of colors
This commit is contained in:
mustafahlvc 2017-08-12 11:31:16 +03:00
parent 71d8c37752
commit 71a18758e2
4 changed files with 41 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/core/components/navigation/navigation.service.ts
View File

@ -45,7 +45,7 @@ export class FuseNavigationService
{
this.flatNavigation.push({
title: navItem.title,
titleAbbr: navItem.title.substr(0, 1).toUpperCase(),
type : navItem.type,
icon : navItem.icon || false,
url : navItem.url
});

30
src/app/core/components/shortcuts/shortcuts.component.html
View File

@ -7,36 +7,38 @@
<a md-icon-button mdTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
<md-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon>
<span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold">{{shortcutItem.titleAbbr}}</span>
<span *ngIf="!shortcutItem.icon" class="h2 secondary-text text-bold">
{{shortcutItem.title.substr(0, 1).toUpperCase()}}
</span>
</a>
</div>
<button md-icon-button [mdMenuTriggerFor]="addMenu">
<md-icon>add</md-icon>
<button md-icon-button [mdMenuTriggerFor]="addMenu" md-tooltip="Click to add/remove shortcut" (onMenuOpen)="onMenuOpen()">
<md-icon class="amber-600-fg">star</md-icon>
</button>
</div>
<md-menu #addMenu="mdMenu">
<md-menu #addMenu="mdMenu" class="w-240">
<md-input-container class="px-16" (click)="$event.stopPropagation()">
<input mdInput placeholder="Search for an app or a page" (input)="search($event)">
<md-input-container class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
<input #searchInput mdInput placeholder="Search for an app or a page" (input)="search($event)">
</md-input-container>
<md-divider></md-divider>
<md-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto" perfect-scrollbar>
<md-nav-list *ngIf="!searching" style="max-height: 312px; overflow: auto">
<h3 md-subheader>Current Shortcuts</h3>
<md-list-item *ngFor="let shortcutItem of shortcutItems"
(click)="toggleShortcut($event, shortcutItem)">
<div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
<md-icon md-list-icon class="mr-8" *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon>
<span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
fxLayoutAlign="center center" *ngIf="!shortcutItem.icon">
{{shortcutItem.titleAbbr}}
{{shortcutItem.title.substr(0, 1).toUpperCase()}}
</span>
<p md-line>{{shortcutItem.title}}</p>
<p md-line fxFlex>{{shortcutItem.title}}</p>
<md-icon class="ml-8">star</md-icon>
</div>
</md-list-item>
<md-list-item *ngIf="shortcutItems.length === 0">
@ -46,20 +48,20 @@
</md-list-item>
</md-nav-list>
<md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto">
<md-nav-list *ngIf="searching" style="max-height: 312px; overflow: auto" perfect-scrollbar>
<md-list-item *ngFor="let navigationItem of filteredNavigationItems"
(click)="toggleShortcut($event, navigationItem)">
<div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
<md-icon md-list-icon class="mr-8" *ngIf="navigationItem.icon">{{navigationItem.icon}}</md-icon>
<span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
fxLayoutAlign="center center" *ngIf="!navigationItem.icon">
{{navigationItem.titleAbbr}}
{{navigationItem.title.substr(0, 1).toUpperCase()}}
</span>
<p md-line>{{navigationItem.title}}</p>
<p md-line fxFlex>{{navigationItem.title}}</p>
<md-icon class="ml-8" *ngIf="isInShortcuts(navigationItem)">star</md-icon>
</div>
</md-list-item>
</md-nav-list>
</md-menu>
</div>

15
src/app/core/components/shortcuts/shortcuts.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
import { FuseNavigationService } from '../navigation/navigation.service';
@Component({
@ -12,6 +12,7 @@ export class FuseShortcutsComponent implements OnInit
navigationItems: any[];
filteredNavigationItems: any[];
searching = false;
@ViewChild('searchInput') searchInputField;
constructor(private fuseNavigationService: FuseNavigationService)
{
@ -84,4 +85,16 @@ export class FuseShortcutsComponent implements OnInit
this.shortcutItems.push(itemToToggle);
}
isInShortcuts(navigationItem)
{
return this.shortcutItems.find(item => {
return item.url === navigationItem.url;
});
}
onMenuOpen()
{
this.searchInputField.nativeElement.focus();
}
}

10
src/app/core/scss/partials/_colors.scss
View File

@ -1,16 +1,16 @@
.secondary-text,
.mat-icon,
.icon {
color: rgba(0, 0, 0, 0.54) !important;
color: rgba(0, 0, 0, 0.54);
}
.hint-text,
.disabled-text {
color: rgba(0, 0, 0, 0.38) !important;
color: rgba(0, 0, 0, 0.38);
}
.divider {
color: rgba(0, 0, 0, 0.12) !important;
color: rgba(0, 0, 0, 0.12);
}
// Material colors map
@ -54,7 +54,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
.secondary-text,
.mat-icon,
.icon {
color: rgba(0, 0, 0, 0.54) !important;
color: rgba(0, 0, 0, 0.54);
}
&.hint-text,
@ -79,7 +79,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
.mat-icon,
.icon {
color: rgba(255, 255, 255, 1) !important;
color: rgba(255, 255, 255, 1);
}
&.secondary-text,