mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 12:35:07 +00:00
Merge branch 'master' of https://github.com/withinpixels/fuse2
# Conflicts: # package.json
This commit is contained in:
Sercan Yemen
commit
429478b828
|
|
@ -1,4 +1,3 @@
|
||||||
# Editor configuration, see http://editorconfig.org
|
|
||||||
root = true
|
root = true
|
||||||
|
|
||||||
[*]
|
[*]
|
||||||
|
|
|
||||||
15
package-lock.json
generated
15
package-lock.json
generated
|
|
@ -1293,6 +1293,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"classlist.js": {
|
||||||
|
"version": "1.1.20150312",
|
||||||
|
"resolved": "https://registry.npmjs.org/classlist.js/-/classlist.js-1.1.20150312.tgz",
|
||||||
|
"integrity": "sha1-HXCEL3Ai8I2awIbOaeWyUPLFd4k="
|
||||||
|
},
|
||||||
"clean-css": {
|
"clean-css": {
|
||||||
"version": "4.1.7",
|
"version": "4.1.7",
|
||||||
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.7.tgz",
|
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.7.tgz",
|
||||||
|
|
@ -5098,6 +5103,11 @@
|
||||||
"integrity": "sha1-y8NcYu7uc/Gat7EKgBURQBr8D5A=",
|
"integrity": "sha1-y8NcYu7uc/Gat7EKgBURQBr8D5A=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"intl": {
|
||||||
|
"version": "1.2.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/intl/-/intl-1.2.5.tgz",
|
||||||
|
"integrity": "sha1-giRKIZDE5Bn4Nx9ao02qNCDiq94="
|
||||||
|
},
|
||||||
"invariant": {
|
"invariant": {
|
||||||
"version": "2.2.2",
|
"version": "2.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz",
|
||||||
|
|
@ -9634,6 +9644,11 @@
|
||||||
"minimalistic-assert": "1.0.0"
|
"minimalistic-assert": "1.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"web-animations-js": {
|
||||||
|
"version": "2.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/web-animations-js/-/web-animations-js-2.3.1.tgz",
|
||||||
|
"integrity": "sha1-Om2bwVGWN3qQ+OKAP6UmIWWwRRA="
|
||||||
|
},
|
||||||
"webdriver-js-extender": {
|
"webdriver-js-extender": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/webdriver-js-extender/-/webdriver-js-extender-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/webdriver-js-extender/-/webdriver-js-extender-1.0.0.tgz",
|
||||||
|
|
|
||||||
|
|
@ -29,15 +29,18 @@
|
||||||
"@swimlane/ngx-dnd": "^2.2.0",
|
"@swimlane/ngx-dnd": "^2.2.0",
|
||||||
"angular-calendar": "^0.19.0",
|
"angular-calendar": "^0.19.0",
|
||||||
"angular-in-memory-web-api": "^0.3.2",
|
"angular-in-memory-web-api": "^0.3.2",
|
||||||
|
"classlist.js": "^1.1.20150312",
|
||||||
"core-js": "^2.5.0",
|
"core-js": "^2.5.0",
|
||||||
"d3": "^4.10.0",
|
"d3": "^4.10.0",
|
||||||
"firebase": "^4.2.0",
|
"firebase": "^4.2.0",
|
||||||
"hammerjs": "^2.0.8",
|
"hammerjs": "^2.0.8",
|
||||||
"highlight.js": "^9.12.0",
|
"highlight.js": "^9.12.0",
|
||||||
|
"intl": "^1.2.5",
|
||||||
"moment": "^2.18.1",
|
"moment": "^2.18.1",
|
||||||
"ngx-color-picker": "^4.3.0",
|
"ngx-color-picker": "^4.3.0",
|
||||||
"ngx-perfect-scrollbar": "^4.5.3",
|
"ngx-perfect-scrollbar": "^4.5.3",
|
||||||
"rxjs": "^5.4.3",
|
"rxjs": "^5.4.3",
|
||||||
|
"web-animations-js": "^2.3.1",
|
||||||
"zone.js": "^0.8.16"
|
"zone.js": "^0.8.16"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
||||||
|
|
@ -44,8 +44,8 @@ export class FuseNavigationService
|
||||||
if ( navItem.type === 'nav-item' )
|
if ( navItem.type === 'nav-item' )
|
||||||
{
|
{
|
||||||
this.flatNavigation.push({
|
this.flatNavigation.push({
|
||||||
title : navItem.title,
|
title: navItem.title,
|
||||||
titleAbbr: navItem.title.substr(0, 1).toUpperCase(),
|
type : navItem.type,
|
||||||
icon : navItem.icon || false,
|
icon : navItem.icon || false,
|
||||||
url : navItem.url
|
url : navItem.url
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -7,36 +7,38 @@
|
||||||
|
|
||||||
<a md-icon-button mdTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
|
<a md-icon-button mdTooltip="{{shortcutItem.title}}" [routerLink]="shortcutItem.url">
|
||||||
<md-icon *ngIf="shortcutItem.icon">{{shortcutItem.icon}}</md-icon>
|
<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>
|
</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button md-icon-button [mdMenuTriggerFor]="addMenu">
|
<button md-icon-button [mdMenuTriggerFor]="addMenu" md-tooltip="Click to add/remove shortcut" (onMenuOpen)="onMenuOpen()">
|
||||||
<md-icon>add</md-icon>
|
<md-icon class="amber-600-fg">star</md-icon>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<md-menu #addMenu="mdMenu">
|
<md-menu #addMenu="mdMenu" class="w-240">
|
||||||
|
|
||||||
<md-input-container class="px-16" (click)="$event.stopPropagation()">
|
<md-input-container class="px-16 w-100-p" (click)="$event.stopPropagation()" floatPlaceholder="never">
|
||||||
<input mdInput placeholder="Search for an app or a page" (input)="search($event)">
|
<input #searchInput mdInput placeholder="Search for an app or a page" (input)="search($event)">
|
||||||
</md-input-container>
|
</md-input-container>
|
||||||
|
|
||||||
<md-divider></md-divider>
|
<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"
|
<md-list-item *ngFor="let shortcutItem of shortcutItems"
|
||||||
(click)="toggleShortcut($event, shortcutItem)">
|
(click)="toggleShortcut($event, shortcutItem)">
|
||||||
<div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
|
<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>
|
<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"
|
<span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
|
||||||
fxLayoutAlign="center center" *ngIf="!shortcutItem.icon">
|
fxLayoutAlign="center center" *ngIf="!shortcutItem.icon">
|
||||||
{{shortcutItem.titleAbbr}}
|
{{shortcutItem.title.substr(0, 1).toUpperCase()}}
|
||||||
</span>
|
</span>
|
||||||
<p md-line>{{shortcutItem.title}}</p>
|
<p md-line fxFlex>{{shortcutItem.title}}</p>
|
||||||
|
<md-icon class="ml-8">star</md-icon>
|
||||||
</div>
|
</div>
|
||||||
</md-list-item>
|
</md-list-item>
|
||||||
<md-list-item *ngIf="shortcutItems.length === 0">
|
<md-list-item *ngIf="shortcutItems.length === 0">
|
||||||
|
|
@ -46,20 +48,20 @@
|
||||||
</md-list-item>
|
</md-list-item>
|
||||||
</md-nav-list>
|
</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"
|
<md-list-item *ngFor="let navigationItem of filteredNavigationItems"
|
||||||
(click)="toggleShortcut($event, navigationItem)">
|
(click)="toggleShortcut($event, navigationItem)">
|
||||||
<div class="w-100-p" fxLayout="row" fxLayoutAlign="start center">
|
<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>
|
<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"
|
<span class="h2 w-32 h-32 p-4 mr-8 secondary-text text-bold" fxLayout="row"
|
||||||
fxLayoutAlign="center center" *ngIf="!navigationItem.icon">
|
fxLayoutAlign="center center" *ngIf="!navigationItem.icon">
|
||||||
{{navigationItem.titleAbbr}}
|
{{navigationItem.title.substr(0, 1).toUpperCase()}}
|
||||||
</span>
|
</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>
|
</div>
|
||||||
</md-list-item>
|
</md-list-item>
|
||||||
</md-nav-list>
|
</md-nav-list>
|
||||||
|
|
||||||
</md-menu>
|
</md-menu>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
|
||||||
import { FuseNavigationService } from '../navigation/navigation.service';
|
import { FuseNavigationService } from '../navigation/navigation.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
|
@ -12,6 +12,7 @@ export class FuseShortcutsComponent implements OnInit
|
||||||
navigationItems: any[];
|
navigationItems: any[];
|
||||||
filteredNavigationItems: any[];
|
filteredNavigationItems: any[];
|
||||||
searching = false;
|
searching = false;
|
||||||
|
@ViewChild('searchInput') searchInputField;
|
||||||
|
|
||||||
constructor(private fuseNavigationService: FuseNavigationService)
|
constructor(private fuseNavigationService: FuseNavigationService)
|
||||||
{
|
{
|
||||||
|
|
@ -84,4 +85,16 @@ export class FuseShortcutsComponent implements OnInit
|
||||||
|
|
||||||
this.shortcutItems.push(itemToToggle);
|
this.shortcutItems.push(itemToToggle);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
isInShortcuts(navigationItem)
|
||||||
|
{
|
||||||
|
return this.shortcutItems.find(item => {
|
||||||
|
return item.url === navigationItem.url;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMenuOpen()
|
||||||
|
{
|
||||||
|
this.searchInputField.nativeElement.focus();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,7 @@ fuse-widget {
|
||||||
transform: rotateY(180deg);
|
transform: rotateY(180deg);
|
||||||
backface-visibility: hidden;
|
backface-visibility: hidden;
|
||||||
|
|
||||||
.fuse-widget-flip-button {
|
[fuseWidgetToggle] {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ import { FuseWidgetToggleDirective } from './widget-toggle.directive';
|
||||||
export class FuseWidgetComponent implements OnInit, AfterContentInit
|
export class FuseWidgetComponent implements OnInit, AfterContentInit
|
||||||
{
|
{
|
||||||
@HostBinding('class.flipped') flipped = false;
|
@HostBinding('class.flipped') flipped = false;
|
||||||
|
@ContentChildren(FuseWidgetToggleDirective, {descendants: true}) toggleButtons: QueryList<FuseWidgetToggleDirective>;
|
||||||
|
|
||||||
constructor(private el: ElementRef, private renderer: Renderer2)
|
constructor(private el: ElementRef, private renderer: Renderer2)
|
||||||
{
|
{
|
||||||
|
|
@ -25,10 +26,8 @@ export class FuseWidgetComponent implements OnInit, AfterContentInit
|
||||||
{
|
{
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|
||||||
const flipButtons = this.el.nativeElement.querySelectorAll('.fuse-widget-flip-button');
|
this.toggleButtons.forEach(flipButton => {
|
||||||
|
this.renderer.listen(flipButton.el.nativeElement, 'click', () => {
|
||||||
flipButtons.forEach(flipButton => {
|
|
||||||
this.renderer.listen(flipButton, 'click', () => {
|
|
||||||
this.toggle();
|
this.toggle();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -17,14 +17,14 @@ export class FuseIfOnDomDirective implements AfterContentChecked
|
||||||
|
|
||||||
ngAfterContentChecked()
|
ngAfterContentChecked()
|
||||||
{
|
{
|
||||||
if ( this.element.nativeElement.isConnected && !this.isCreated )
|
if ( document.body.contains(this.element.nativeElement) && !this.isCreated )
|
||||||
{
|
{
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.viewContainer.createEmbeddedView(this.templateRef);
|
this.viewContainer.createEmbeddedView(this.templateRef);
|
||||||
}, 0);
|
}, 0);
|
||||||
this.isCreated = true;
|
this.isCreated = true;
|
||||||
}
|
}
|
||||||
else if ( this.isCreated && !this.element.nativeElement.isConnected )
|
else if ( this.isCreated && !document.body.contains(this.element.nativeElement) )
|
||||||
{
|
{
|
||||||
this.viewContainer.clear();
|
this.viewContainer.clear();
|
||||||
this.isCreated = false;
|
this.isCreated = false;
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
.secondary-text,
|
.secondary-text,
|
||||||
.mat-icon,
|
.mat-icon,
|
||||||
.icon {
|
.icon {
|
||||||
color: rgba(0, 0, 0, 0.54) !important;
|
color: rgba(0, 0, 0, 0.54);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hint-text,
|
.hint-text,
|
||||||
.disabled-text {
|
.disabled-text {
|
||||||
color: rgba(0, 0, 0, 0.38) !important;
|
color: rgba(0, 0, 0, 0.38);
|
||||||
}
|
}
|
||||||
|
|
||||||
.divider {
|
.divider {
|
||||||
color: rgba(0, 0, 0, 0.12) !important;
|
color: rgba(0, 0, 0, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Material colors map
|
// Material colors map
|
||||||
|
|
@ -54,7 +54,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
||||||
.secondary-text,
|
.secondary-text,
|
||||||
.mat-icon,
|
.mat-icon,
|
||||||
.icon {
|
.icon {
|
||||||
color: rgba(0, 0, 0, 0.54) !important;
|
color: rgba(0, 0, 0, 0.54);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.hint-text,
|
&.hint-text,
|
||||||
|
|
@ -79,7 +79,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
||||||
|
|
||||||
.mat-icon,
|
.mat-icon,
|
||||||
.icon {
|
.icon {
|
||||||
color: rgba(255, 255, 255, 1) !important;
|
color: rgba(255, 255, 255, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.secondary-text,
|
&.secondary-text,
|
||||||
|
|
|
||||||
|
|
@ -106,3 +106,44 @@
|
||||||
margin-top: auto !important;
|
margin-top: auto !important;
|
||||||
margin-bottom: auto !important;
|
margin-bottom: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Border helpers
|
||||||
|
$border-style: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
|
||||||
|
.border,
|
||||||
|
.b {
|
||||||
|
border: $border-style;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-top,
|
||||||
|
.bt {
|
||||||
|
border-top: $border-style;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-right,
|
||||||
|
.br {
|
||||||
|
border-right: $border-style;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-bottom,
|
||||||
|
.bb {
|
||||||
|
border-bottom: $border-style;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-left,
|
||||||
|
.bl {
|
||||||
|
border-left: $border-style;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-horizontal,
|
||||||
|
.b-x {
|
||||||
|
border-left: $border-style;
|
||||||
|
border-right: $border-style;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-vertical,
|
||||||
|
.by {
|
||||||
|
border-top: $border-style;
|
||||||
|
border-bottom: $border-style;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -119,8 +119,8 @@ export class MailFakeDb
|
||||||
'important' : false,
|
'important' : false,
|
||||||
'hasAttachments': false,
|
'hasAttachments': false,
|
||||||
'labels' : [
|
'labels' : [
|
||||||
3,
|
1,
|
||||||
4
|
3
|
||||||
],
|
],
|
||||||
'folder' : 0
|
'folder' : 0
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
|
|
||||||
<div fxLayout="row" fxLayoutAlign="space-between start">
|
<div fxLayout="row" fxLayoutAlign="space-between start">
|
||||||
|
|
||||||
<span class="mat-display-1">Welcome back, John!</span>
|
<span class="mat-display-1 mb-0">Welcome back, John!</span>
|
||||||
|
|
||||||
<button md-icon-button fuseMdSidenavToggler="dashboards-right-sidenav" fxHide.gt-md>
|
<button md-icon-button fuseMdSidenavToggler="dashboards-right-sidenav" fxHide.gt-md>
|
||||||
<md-icon>menu</md-icon>
|
<md-icon>menu</md-icon>
|
||||||
|
|
@ -57,7 +57,7 @@
|
||||||
</md-option>
|
</md-option>
|
||||||
</md-select>
|
</md-select>
|
||||||
|
|
||||||
<button md-icon-button class="fuse-widget-flip-button" aria-label="more">
|
<button md-icon-button fuseWidgetToggle aria-label="more">
|
||||||
<md-icon>more_vert</md-icon>
|
<md-icon>more_vert</md-icon>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
@ -79,7 +79,7 @@
|
||||||
|
|
||||||
<!-- Back -->
|
<!-- Back -->
|
||||||
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
|
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
|
||||||
<button md-icon-button class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
|
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
|
||||||
<md-icon class="s-16">close</md-icon>
|
<md-icon class="s-16">close</md-icon>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
@ -100,7 +100,7 @@
|
||||||
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
|
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
|
||||||
<div class="h3">{{widgets.widget2.title}}</div>
|
<div class="h3">{{widgets.widget2.title}}</div>
|
||||||
|
|
||||||
<button md-icon-button class="fuse-widget-flip-button" aria-label="more">
|
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more">
|
||||||
<md-icon>more_vert</md-icon>
|
<md-icon>more_vert</md-icon>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -121,7 +121,7 @@
|
||||||
|
|
||||||
<!-- Back -->
|
<!-- Back -->
|
||||||
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
|
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
|
||||||
<button md-icon-button class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
|
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
|
||||||
<md-icon class="s-16">close</md-icon>
|
<md-icon class="s-16">close</md-icon>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
@ -142,7 +142,7 @@
|
||||||
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
|
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
|
||||||
<div class="h3">{{widgets.widget3.title}}</div>
|
<div class="h3">{{widgets.widget3.title}}</div>
|
||||||
|
|
||||||
<button md-icon-button class="fuse-widget-flip-button" aria-label="more">
|
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more">
|
||||||
<md-icon>more_vert</md-icon>
|
<md-icon>more_vert</md-icon>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -163,7 +163,7 @@
|
||||||
|
|
||||||
<!-- Back -->
|
<!-- Back -->
|
||||||
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
|
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
|
||||||
<button md-icon-button class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
|
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
|
||||||
<md-icon class="s-16">close</md-icon>
|
<md-icon class="s-16">close</md-icon>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
@ -184,7 +184,7 @@
|
||||||
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
|
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
|
||||||
<div class="h3">{{widgets.widget4.title}}</div>
|
<div class="h3">{{widgets.widget4.title}}</div>
|
||||||
|
|
||||||
<button md-icon-button class="fuse-widget-flip-button" aria-label="more">
|
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more">
|
||||||
<md-icon>more_vert</md-icon>
|
<md-icon>more_vert</md-icon>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -204,7 +204,7 @@
|
||||||
|
|
||||||
<!-- Back -->
|
<!-- Back -->
|
||||||
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
|
<div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
|
||||||
<button md-icon-button class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
|
<button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
|
||||||
<md-icon class="s-16">close</md-icon>
|
<md-icon class="s-16">close</md-icon>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
@ -691,17 +691,17 @@
|
||||||
<md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side" fuseMdSidenavHelper="dashboards-right-sidenav" md-is-locked-open="gt-md">
|
<md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side" fuseMdSidenavHelper="dashboards-right-sidenav" md-is-locked-open="gt-md">
|
||||||
|
|
||||||
<!-- WIDGET GROUP -->
|
<!-- WIDGET GROUP -->
|
||||||
<div class="widget-group">
|
<div class="widget-group" fxLayout="column" fxFlex="100">
|
||||||
|
|
||||||
<!-- NOW WIDGET -->
|
<!-- NOW WIDGET -->
|
||||||
<fuse-widget class="sidenav-widget p-0">
|
<fuse-widget class="sidenav-widget p-0">
|
||||||
|
|
||||||
<!-- Front -->
|
<!-- Front -->
|
||||||
<div>
|
<div class="fuse-widget-front">
|
||||||
|
|
||||||
<div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">
|
<div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">
|
||||||
|
|
||||||
<div class="h3">{{dateNow | date: 'd'}},{{dateNow | date: 'h'}}:{{dateNow | date: 'm'}}:{{dateNow | date: 'ss'}}</div>
|
<div class="h3">{{dateNow | date: 'EEEE'}}, {{dateNow | date: 'h'}}:{{dateNow | date: 'm'}}:{{dateNow | date: 'ss'}}</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<button md-icon-button [mdMenuTriggerFor]="moreMenu" aria-label="more">
|
<button md-icon-button [mdMenuTriggerFor]="moreMenu" aria-label="more">
|
||||||
|
|
@ -742,7 +742,7 @@
|
||||||
<fuse-widget class="sidenav-widget p-0">
|
<fuse-widget class="sidenav-widget p-0">
|
||||||
|
|
||||||
<!-- Front -->
|
<!-- Front -->
|
||||||
<div>
|
<div class="fuse-widget-front">
|
||||||
|
|
||||||
<div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">
|
<div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,11 +10,14 @@
|
||||||
<div>
|
<div>
|
||||||
<div class="subject" flex>{{mail.subject}}</div>
|
<div class="subject" flex>{{mail.subject}}</div>
|
||||||
|
|
||||||
<div class="labels">
|
<div class="labels" fxLayout="row" fxLayoutWrap>
|
||||||
<div class="label" *ngFor="let labelId of mail.labels"
|
<div class="label" *ngFor="let labelId of mail.labels"
|
||||||
[ngStyle]="{background: labels | getById:labelId:'color'}">{{labels | getById:labelId:'title'}}
|
fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<div class="label-color" [ngStyle]="{'background-color': labels | getById:labelId:'color'}"></div>
|
||||||
|
<div class="label-title">{{labels | getById:labelId:'title'}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="actions" fxLayout="row" fxLayoutAlign="start center">
|
<div class="actions" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mail-header {
|
.mail-header {
|
||||||
padding-bottom: 24px;
|
padding-bottom: 16px;
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
|
|
@ -29,10 +29,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
display: inline-block;
|
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
padding: 0 5px;
|
border-radius: 2px;
|
||||||
margin: 8px 6px 0 0;
|
margin: 4px 4px 4px 0;
|
||||||
|
padding: 3px 8px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
|
.label-color {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
margin-right: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -22,16 +22,17 @@
|
||||||
<div class="message text-truncate" *ngIf="mail?.message">
|
<div class="message text-truncate" *ngIf="mail?.message">
|
||||||
|
|
||||||
{{mail.message | htmlToPlaintext | slice:0:180}}{{mail.message.length > 180 ? '...' : ''}}
|
{{mail.message | htmlToPlaintext | slice:0:180}}{{mail.message.length > 180 ? '...' : ''}}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="labels">
|
<div class="labels" fxLayout="row" fxLayoutWrap>
|
||||||
<div class="label" *ngFor="let labelId of mail.labels"
|
<div class="label" *ngFor="let labelId of mail.labels"
|
||||||
[ngStyle]="{background: labels | getById:labelId:'color'}">{{labels | getById:labelId:'title'}}
|
fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
<div class="label-color" [ngStyle]="{'background-color': labels | getById:labelId:'color'}"></div>
|
||||||
|
<div class="label-title">{{labels | getById:labelId:'title'}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div fxLayout="column" fxLayoutAlign="space-between end">
|
<div fxLayout="column" fxLayoutAlign="space-between end">
|
||||||
|
|
||||||
<div class="time">{{mail.time}}</div>
|
<div class="time">{{mail.time}}</div>
|
||||||
|
|
|
||||||
|
|
@ -18,13 +18,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.message {
|
.message {
|
||||||
|
}
|
||||||
|
|
||||||
.labels {
|
.labels {
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.selected {
|
&.selected {
|
||||||
background: #FFF8E1;
|
background: #FFF8E1;
|
||||||
|
|
@ -33,12 +33,13 @@
|
||||||
|
|
||||||
.message {
|
.message {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.labels {
|
.labels {
|
||||||
background: #FFF8E1;
|
background: #FFF8E1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.current-mail {
|
&.current-mail {
|
||||||
background: #E3F2FD;
|
background: #E3F2FD;
|
||||||
|
|
@ -46,18 +47,18 @@
|
||||||
.info {
|
.info {
|
||||||
|
|
||||||
.message {
|
.message {
|
||||||
|
}
|
||||||
.labels {
|
.labels {
|
||||||
background: #E3F2FD;
|
background: #E3F2FD;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 0;
|
width: 0;
|
||||||
margin: 0 16px;
|
margin: 0 16px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
|
|
@ -80,23 +81,27 @@
|
||||||
.message {
|
.message {
|
||||||
position: relative;
|
position: relative;
|
||||||
color: rgba(0, 0, 0, 0.54);
|
color: rgba(0, 0, 0, 0.54);
|
||||||
|
}
|
||||||
|
|
||||||
.labels {
|
.labels {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: #FAFAFA;
|
background: #FAFAFA;
|
||||||
top: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
padding-left: 6px;
|
padding-left: 6px;
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
display: inline-block;
|
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
padding: 0 5px;
|
border-radius: 2px;
|
||||||
margin-right: 6px;
|
margin: 0 4px 0 0;
|
||||||
|
padding: 3px 8px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
&:first-child {
|
.label-color {
|
||||||
margin-left: 0;
|
width: 8px;
|
||||||
}
|
height: 8px;
|
||||||
|
margin-right: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -60,8 +60,11 @@
|
||||||
</md-input-container>
|
</md-input-container>
|
||||||
|
|
||||||
<div class="tags mb-24" fxFlexFill fxLayout="row" fxLayoutWrap>
|
<div class="tags mb-24" fxFlexFill fxLayout="row" fxLayoutWrap>
|
||||||
<div class="tag" *ngFor="let tagId of todo.tags"
|
<div class="tag" fxLayout="row" fxLayoutAlign="start center" *ngFor="let tagId of todo.tags">
|
||||||
[ngStyle]="{background: tags | getById:tagId:'color'}">{{tags | getById:tagId:'title'}}
|
|
||||||
|
<div class="tag-color" [ngStyle]="{'background-color': tags | getById:tagId:'color'}"></div>
|
||||||
|
|
||||||
|
<div class="tag-label">{{tags | getById:tagId:'title'}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -29,8 +29,17 @@
|
||||||
|
|
||||||
.tag {
|
.tag {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
padding: 0 5px;
|
border-radius: 2px;
|
||||||
margin: 8px 6px 0 0;
|
margin: 8px 4px 0 0;
|
||||||
|
padding: 3px 8px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
|
.tag-color {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
margin-right: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.to {
|
.to {
|
||||||
|
|
|
||||||
|
|
@ -31,9 +31,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.tags {
|
.tags {
|
||||||
font-size: 12px;
|
|
||||||
|
|
||||||
.tag {
|
.tag {
|
||||||
|
font-size: 11px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
margin: 8px 4px 0 0;
|
margin: 8px 4px 0 0;
|
||||||
padding: 3px 8px;
|
padding: 3px 8px;
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,8 @@
|
||||||
<div class="px-16">
|
<div class="px-16">
|
||||||
<fuse-shortcuts></fuse-shortcuts>
|
<fuse-shortcuts></fuse-shortcuts>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="toolbar-separator"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="start center">
|
<div class="" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="start center">
|
||||||
|
|
|
||||||
|
|
@ -19,27 +19,28 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
|
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
|
||||||
// import 'core-js/es6/symbol';
|
import 'core-js/es6/symbol';
|
||||||
// import 'core-js/es6/object';
|
import 'core-js/es6/object';
|
||||||
// import 'core-js/es6/function';
|
import 'core-js/es6/function';
|
||||||
// import 'core-js/es6/parse-int';
|
import 'core-js/es6/parse-int';
|
||||||
// import 'core-js/es6/parse-float';
|
import 'core-js/es6/parse-float';
|
||||||
// import 'core-js/es6/number';
|
import 'core-js/es6/number';
|
||||||
// import 'core-js/es6/math';
|
import 'core-js/es6/math';
|
||||||
// import 'core-js/es6/string';
|
import 'core-js/es6/string';
|
||||||
// import 'core-js/es6/date';
|
import 'core-js/es6/date';
|
||||||
// import 'core-js/es6/array';
|
import 'core-js/es6/array';
|
||||||
// import 'core-js/es6/regexp';
|
import 'core-js/es6/regexp';
|
||||||
// import 'core-js/es6/map';
|
import 'core-js/es6/map';
|
||||||
// import 'core-js/es6/weak-map';
|
import 'core-js/es6/weak-map';
|
||||||
// import 'core-js/es6/set';
|
import 'core-js/es6/set';
|
||||||
|
|
||||||
|
import 'core-js/es7/array';
|
||||||
|
|
||||||
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
|
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
|
||||||
// import 'classlist.js'; // Run `npm install --save classlist.js`.
|
import 'classlist.js'; // Run `npm install --save classlist.js`.
|
||||||
|
|
||||||
/** IE10 and IE11 requires the following to support `@angular/animation`. */
|
/** IE10 and IE11 requires the following to support `@angular/animation`. */
|
||||||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||||
|
|
||||||
|
|
||||||
/** Evergreen browsers require these. **/
|
/** Evergreen browsers require these. **/
|
||||||
import 'core-js/es6/reflect';
|
import 'core-js/es6/reflect';
|
||||||
|
|
@ -47,7 +48,7 @@ import 'core-js/es7/reflect';
|
||||||
|
|
||||||
|
|
||||||
/** ALL Firefox browsers require the following to support `@angular/animation`. **/
|
/** ALL Firefox browsers require the following to support `@angular/animation`. **/
|
||||||
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -57,7 +58,6 @@ import 'core-js/es7/reflect';
|
||||||
import 'zone.js/dist/zone'; // Included with Angular CLI.
|
import 'zone.js/dist/zone'; // Included with Angular CLI.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/***************************************************************************************************
|
/***************************************************************************************************
|
||||||
* APPLICATION IMPORTS
|
* APPLICATION IMPORTS
|
||||||
*/
|
*/
|
||||||
|
|
@ -66,8 +66,15 @@ import 'zone.js/dist/zone'; // Included with Angular CLI.
|
||||||
* Date, currency, decimal and percent pipes.
|
* Date, currency, decimal and percent pipes.
|
||||||
* Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
|
* Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
|
||||||
*/
|
*/
|
||||||
// import 'intl'; // Run `npm install --save intl`.
|
import 'intl'; // Run `npm install --save intl`.
|
||||||
/**
|
/**
|
||||||
* Need to import at least one locale-data with intl.
|
* Need to import at least one locale-data with intl.
|
||||||
*/
|
*/
|
||||||
// import 'intl/locale-data/jsonp/en';
|
import 'intl/locale-data/jsonp/en';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fix for ngx-chart to work on ie11
|
||||||
|
*/
|
||||||
|
if (typeof SVGElement.prototype.contains === 'undefined') {
|
||||||
|
SVGElement.prototype.contains = HTMLDivElement.prototype.contains;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user