mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +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
|
||||
|
||||
[*]
|
||||
|
|
|
|||
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": {
|
||||
"version": "4.1.7",
|
||||
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.7.tgz",
|
||||
|
|
@ -5098,6 +5103,11 @@
|
|||
"integrity": "sha1-y8NcYu7uc/Gat7EKgBURQBr8D5A=",
|
||||
"dev": true
|
||||
},
|
||||
"intl": {
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/intl/-/intl-1.2.5.tgz",
|
||||
"integrity": "sha1-giRKIZDE5Bn4Nx9ao02qNCDiq94="
|
||||
},
|
||||
"invariant": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz",
|
||||
|
|
@ -9634,6 +9644,11 @@
|
|||
"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": {
|
||||
"version": "1.0.0",
|
||||
"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",
|
||||
"angular-calendar": "^0.19.0",
|
||||
"angular-in-memory-web-api": "^0.3.2",
|
||||
"classlist.js": "^1.1.20150312",
|
||||
"core-js": "^2.5.0",
|
||||
"d3": "^4.10.0",
|
||||
"firebase": "^4.2.0",
|
||||
"hammerjs": "^2.0.8",
|
||||
"highlight.js": "^9.12.0",
|
||||
"intl": "^1.2.5",
|
||||
"moment": "^2.18.1",
|
||||
"ngx-color-picker": "^4.3.0",
|
||||
"ngx-perfect-scrollbar": "^4.5.3",
|
||||
"rxjs": "^5.4.3",
|
||||
"web-animations-js": "^2.3.1",
|
||||
"zone.js": "^0.8.16"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ fuse-widget {
|
|||
transform: rotateY(180deg);
|
||||
backface-visibility: hidden;
|
||||
|
||||
.fuse-widget-flip-button {
|
||||
[fuseWidgetToggle] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { FuseWidgetToggleDirective } from './widget-toggle.directive';
|
|||
export class FuseWidgetComponent implements OnInit, AfterContentInit
|
||||
{
|
||||
@HostBinding('class.flipped') flipped = false;
|
||||
@ContentChildren(FuseWidgetToggleDirective, {descendants: true}) toggleButtons: QueryList<FuseWidgetToggleDirective>;
|
||||
|
||||
constructor(private el: ElementRef, private renderer: Renderer2)
|
||||
{
|
||||
|
|
@ -25,10 +26,8 @@ export class FuseWidgetComponent implements OnInit, AfterContentInit
|
|||
{
|
||||
setTimeout(() => {
|
||||
|
||||
const flipButtons = this.el.nativeElement.querySelectorAll('.fuse-widget-flip-button');
|
||||
|
||||
flipButtons.forEach(flipButton => {
|
||||
this.renderer.listen(flipButton, 'click', () => {
|
||||
this.toggleButtons.forEach(flipButton => {
|
||||
this.renderer.listen(flipButton.el.nativeElement, 'click', () => {
|
||||
this.toggle();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -17,14 +17,14 @@ export class FuseIfOnDomDirective implements AfterContentChecked
|
|||
|
||||
ngAfterContentChecked()
|
||||
{
|
||||
if ( this.element.nativeElement.isConnected && !this.isCreated )
|
||||
if ( document.body.contains(this.element.nativeElement) && !this.isCreated )
|
||||
{
|
||||
setTimeout(() => {
|
||||
this.viewContainer.createEmbeddedView(this.templateRef);
|
||||
}, 0);
|
||||
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.isCreated = false;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -106,3 +106,44 @@
|
|||
margin-top: 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,
|
||||
'hasAttachments': false,
|
||||
'labels' : [
|
||||
3,
|
||||
4
|
||||
1,
|
||||
3
|
||||
],
|
||||
'folder' : 0
|
||||
},
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<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>
|
||||
<md-icon>menu</md-icon>
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
</md-option>
|
||||
</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>
|
||||
</button>
|
||||
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
|
||||
<!-- Back -->
|
||||
<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>
|
||||
</button>
|
||||
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
|
||||
<!-- Back -->
|
||||
<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>
|
||||
</button>
|
||||
|
||||
|
|
@ -142,7 +142,7 @@
|
|||
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
|
||||
<!-- Back -->
|
||||
<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>
|
||||
</button>
|
||||
|
||||
|
|
@ -184,7 +184,7 @@
|
|||
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -204,7 +204,7 @@
|
|||
|
||||
<!-- Back -->
|
||||
<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>
|
||||
</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">
|
||||
|
||||
<!-- WIDGET GROUP -->
|
||||
<div class="widget-group">
|
||||
<div class="widget-group" fxLayout="column" fxFlex="100">
|
||||
|
||||
<!-- NOW WIDGET -->
|
||||
<fuse-widget class="sidenav-widget p-0">
|
||||
|
||||
<!-- Front -->
|
||||
<div>
|
||||
<div class="fuse-widget-front">
|
||||
|
||||
<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>
|
||||
<button md-icon-button [mdMenuTriggerFor]="moreMenu" aria-label="more">
|
||||
|
|
@ -742,7 +742,7 @@
|
|||
<fuse-widget class="sidenav-widget p-0">
|
||||
|
||||
<!-- Front -->
|
||||
<div>
|
||||
<div class="fuse-widget-front">
|
||||
|
||||
<div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
|
||||
|
|
|
|||
|
|
@ -10,11 +10,14 @@
|
|||
<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"
|
||||
[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 class="actions" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
}
|
||||
|
||||
.mail-header {
|
||||
padding-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
|
||||
.actions {
|
||||
|
|
@ -29,10 +29,18 @@
|
|||
}
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
padding: 0 5px;
|
||||
margin: 8px 6px 0 0;
|
||||
border-radius: 2px;
|
||||
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">
|
||||
|
||||
{{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"
|
||||
[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 fxLayout="column" fxLayoutAlign="space-between end">
|
||||
|
||||
<div class="time">{{mail.time}}</div>
|
||||
|
|
|
|||
|
|
@ -18,13 +18,13 @@
|
|||
}
|
||||
|
||||
.message {
|
||||
}
|
||||
|
||||
.labels {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: #FFF8E1;
|
||||
|
|
@ -33,12 +33,13 @@
|
|||
|
||||
.message {
|
||||
|
||||
}
|
||||
|
||||
.labels {
|
||||
background: #FFF8E1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.current-mail {
|
||||
background: #E3F2FD;
|
||||
|
|
@ -46,18 +47,18 @@
|
|||
.info {
|
||||
|
||||
.message {
|
||||
|
||||
}
|
||||
.labels {
|
||||
background: #E3F2FD;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
margin: 0 16px;
|
||||
position: relative;
|
||||
|
||||
.name {
|
||||
font-size: 15px;
|
||||
|
|
@ -80,23 +81,27 @@
|
|||
.message {
|
||||
position: relative;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
|
||||
.labels {
|
||||
position: absolute;
|
||||
background: #FAFAFA;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding-left: 6px;
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
padding: 0 5px;
|
||||
margin-right: 6px;
|
||||
border-radius: 2px;
|
||||
margin: 0 4px 0 0;
|
||||
padding: 3px 8px;
|
||||
background-color: rgba(0, 0, 0, 0.08);
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.label-color {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,8 +60,11 @@
|
|||
</md-input-container>
|
||||
|
||||
<div class="tags mb-24" fxFlexFill fxLayout="row" fxLayoutWrap>
|
||||
<div class="tag" *ngFor="let tagId of todo.tags"
|
||||
[ngStyle]="{background: tags | getById:tagId:'color'}">{{tags | getById:tagId:'title'}}
|
||||
<div class="tag" fxLayout="row" fxLayoutAlign="start center" *ngFor="let tagId of todo.tags">
|
||||
|
||||
<div class="tag-color" [ngStyle]="{'background-color': tags | getById:tagId:'color'}"></div>
|
||||
|
||||
<div class="tag-label">{{tags | getById:tagId:'title'}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -29,8 +29,17 @@
|
|||
|
||||
.tag {
|
||||
font-size: 11px;
|
||||
padding: 0 5px;
|
||||
margin: 8px 6px 0 0;
|
||||
border-radius: 2px;
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -31,9 +31,9 @@
|
|||
}
|
||||
|
||||
.tags {
|
||||
font-size: 12px;
|
||||
|
||||
.tag {
|
||||
font-size: 11px;
|
||||
border-radius: 2px;
|
||||
margin: 8px 4px 0 0;
|
||||
padding: 3px 8px;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@
|
|||
<div class="px-16">
|
||||
<fuse-shortcuts></fuse-shortcuts>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-separator"></div>
|
||||
</div>
|
||||
|
||||
<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. **/
|
||||
// import 'core-js/es6/symbol';
|
||||
// import 'core-js/es6/object';
|
||||
// import 'core-js/es6/function';
|
||||
// import 'core-js/es6/parse-int';
|
||||
// import 'core-js/es6/parse-float';
|
||||
// import 'core-js/es6/number';
|
||||
// import 'core-js/es6/math';
|
||||
// import 'core-js/es6/string';
|
||||
// import 'core-js/es6/date';
|
||||
// import 'core-js/es6/array';
|
||||
// import 'core-js/es6/regexp';
|
||||
// import 'core-js/es6/map';
|
||||
// import 'core-js/es6/weak-map';
|
||||
// import 'core-js/es6/set';
|
||||
import 'core-js/es6/symbol';
|
||||
import 'core-js/es6/object';
|
||||
import 'core-js/es6/function';
|
||||
import 'core-js/es6/parse-int';
|
||||
import 'core-js/es6/parse-float';
|
||||
import 'core-js/es6/number';
|
||||
import 'core-js/es6/math';
|
||||
import 'core-js/es6/string';
|
||||
import 'core-js/es6/date';
|
||||
import 'core-js/es6/array';
|
||||
import 'core-js/es6/regexp';
|
||||
import 'core-js/es6/map';
|
||||
import 'core-js/es6/weak-map';
|
||||
import 'core-js/es6/set';
|
||||
|
||||
import 'core-js/es7/array';
|
||||
|
||||
/** 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`. */
|
||||
// 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. **/
|
||||
import 'core-js/es6/reflect';
|
||||
|
|
@ -47,7 +48,7 @@ import 'core-js/es7/reflect';
|
|||
|
||||
|
||||
/** 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.
|
||||
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
* APPLICATION IMPORTS
|
||||
*/
|
||||
|
|
@ -66,8 +66,15 @@ import 'zone.js/dist/zone'; // Included with Angular CLI.
|
|||
* Date, currency, decimal and percent pipes.
|
||||
* 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.
|
||||
*/
|
||||
// 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