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

Calendar, Contacts, Mail, Scrumboard apps responsive refinements,

Browse Source 
+ temporary fix for md-sidenav-locked transition
This commit is contained in:
mustafahlvc 2017-09-22 12:03:21 +03:00
parent 678dde8c0e
commit 5ace09f782
18 changed files with 827 additions and 787 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts
View File

@ -1,4 +1,4 @@
import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding, AfterViewInit } from '@angular/core';
import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
import { MdSidenav } from '@angular/material';
import { FuseMdSidenavHelperService } from 'app/core/directives/md-sidenav-helper/md-sidenav-helper.service';
import { FuseMatchMedia } from '../../services/match-media.service';
@ -8,7 +8,7 @@ import { Subscription } from 'rxjs/Subscription';
@Directive({
selector: '[fuseMdSidenavHelper]'
})
export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDestroy
export class FuseMdSidenavHelperDirective implements OnInit, OnDestroy
{
matchMediaSubscription: Subscription;
@ -38,6 +38,7 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
this.mdSidenav.mode = 'side';
this.mdSidenav.open();
});
this.stopTransition = false;
}
else
{
@ -46,6 +47,10 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
this.mdSidenav.mode = 'over';
this.mdSidenav.close();
});
setTimeout(() => {
this.stopTransition = false;
}, 3000);
}
this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
@ -69,13 +74,6 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
}
ngAfterViewInit()
{
setTimeout(() => {
this.stopTransition = false;
}, 300);
}
ngOnDestroy()
{
this.matchMediaSubscription.unsubscribe();

3
src/app/core/scss/partials/_angular-material-fix.scss
View File

@ -9,9 +9,10 @@ md-sidenav-container {
md-sidenav {
&.md-stop-transition {
&[md-is-locked-open].md-stop-transition {
transition: none !important;
transform: translate3d(0, 0, 0) !important;
opacity: 0;
~ .mat-sidenav-content,
~ .mat-drawer-content {

3
src/app/main/content/apps/calendar/calendar.component.html
View File

@ -1,6 +1,7 @@
<div id="calendar" class="page-layout simple fullwidth" fusePerfectScrollbar>
<!-- HEADER -->
<div class="header" [ngClass]="viewDate | date:'MMM'">
<div class="header p-16 p-sm-24" [ngClass]="viewDate | date:'MMM'">
<div class="header-content" fxLayout="column" fxLayoutAlign="space-between">

17
src/app/main/content/apps/calendar/calendar.component.scss
View File

@ -26,8 +26,8 @@
}
.cal-open-day-events {
background: #455A64;
box-shadow: inset 0 0 12px 0 rgba(0, 0, 0, 0.54);
background: whitesmoke;
box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.13);
padding: 0;
display: flex;
flex-direction: column;
@ -44,11 +44,11 @@
transition: box-shadow 300ms ease;
&:first-of-type {
margin-top: 16px;
margin-top: 24px;
}
&:last-of-type {
margin-bottom: 16px;
margin-bottom: 24px;
}
&:hover {
@ -184,12 +184,13 @@
#calendar {
background: #FFFFFF;
overflow-x: hidden;
overflow-y: auto;
.header {
height: 200px;
min-height: 200px;
max-height: 200px;
padding: 24px;
position: relative;
background-size: 100% auto;
background-position: 0 50%;
@ -197,6 +198,12 @@
background-color: #FAFAFA;
color: #FFFFFF;
@include media-breakpoint(xs) {
height: 164px;
min-height: 164px;
max-height: 164px;
}
&:before {
content: '';
position: absolute;

239
src/app/main/content/apps/calendar/event-form/event-form.component.html
View File

@ -1,95 +1,98 @@
<md-toolbar md-dialog-title class="mat-accent m-0">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">{{dialogTitle}}</span>
<button md-button class="mat-icon-button"
(click)="dialogRef.close()"
aria-label="Close dialog">
<md-icon>close</md-icon>
</button>
</div>
</md-toolbar>
<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
<form name="eventForm" [formGroup]="eventForm" class="event-form" fxLayout="column" fxFlex>
<md-input-container>
<input mdInput
name="title"
formControlName="title"
placeholder="Title"
required>
</md-input-container>
<div class="py-16" fxFlex="1 0 auto" fxLayout="row">
<md-slide-toggle
name="allDay"
formControlName="allDay"
class="mr-24"
aria-label="All day">
All Day
</md-slide-toggle>
<div class="dialog-content-wrapper">
<md-toolbar md-dialog-title class="mat-accent m-0">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">{{dialogTitle}}</span>
<button md-button class="mat-icon-button"
(click)="dialogRef.close()"
aria-label="Close dialog">
<md-icon>close</md-icon>
</button>
</div>
</md-toolbar>
<div class="py-16" fxFlex="1 0 auto" fxLayout="row" formGroupName="color">
<md-input-container class="mr-24">
<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
<form name="eventForm" [formGroup]="eventForm" class="event-form w-100-p" fxLayout="column" fxFlex>
<md-input-container class="w-100-p">
<input mdInput
name="primary color"
formControlName="primary"
placeholder="Primary color"
[(colorPicker)]="event.color.primary"
cpWidth="290px"
[cpPresetColors]="presetColors"
[style.background]="event.color.primary"
(colorPickerChange)="event.color.primary = $event; eventForm.patchValue({color:{primary:$event}})"/>
name="title"
formControlName="title"
placeholder="Title"
required>
</md-input-container>
<md-input-container>
<div class="py-16" fxFlex="1 0 auto" fxLayout="row">
<md-slide-toggle
name="allDay"
formControlName="allDay"
class="mr-24"
aria-label="All day">
All Day
</md-slide-toggle>
</div>
<div class="py-16" fxFlex="1 0 auto" fxLayout="row" formGroupName="color">
<md-input-container class="mr-24" fxFlex>
<input mdInput
name="primary color"
formControlName="primary"
placeholder="Primary color"
[(colorPicker)]="event.color.primary"
cpWidth="290px"
[cpPresetColors]="presetColors"
[style.background]="event.color.primary"
(colorPickerChange)="event.color.primary = $event; eventForm.patchValue({color:{primary:$event}})"/>
</md-input-container>
<md-input-container fxFlex>
<input mdInput
name="secondary color"
formControlName="secondary"
placeholder="Secondary color"
[(colorPicker)]="event.color.secondary"
cpWidth="290px"
[cpPresetColors]="presetColors"
[style.background]="event.color.secondary"
(colorPickerChange)="event.color.secondary = $event; eventForm.patchValue({color:{secondary:$event}})"/>
</md-input-container>
</div>
<div fxFlex="1 0 auto" fxLayout="row">
<md-form-field class="mr-24" fxFlex>
<input mdInput [mdDatepicker]="startDatePicker" placeholder="Start Date">
<md-datepicker-toggle mdSuffix [for]="startDatePicker"></md-datepicker-toggle>
<md-datepicker #startDatePicker></md-datepicker>
</md-form-field>
<md-input-container class="no-errors-spacer" fxFlex md-no-float>
<input mdInput ng-model="calendarEvent.startTime" placeholder="Start Time">
</md-input-container>
</div>
<div fxFlex="1 0 auto" fxLayout="row">
<md-form-field class="mr-24" fxFlex>
<input mdInput [mdDatepicker]="endDatePicker" placeholder="End Date">
<md-datepicker-toggle mdSuffix [for]="endDatePicker"></md-datepicker-toggle>
<md-datepicker #endDatePicker></md-datepicker>
</md-form-field>
<md-input-container class="no-errors-spacer" fxFlex md-no-float>
<input mdInput ng-model="calendarEvent.endTime" placeholder="End Time">
</md-input-container>
</div>
<md-input-container formGroupName="meta" class="w-100-p">
<input mdInput
name="secondary color"
formControlName="secondary"
placeholder="Secondary color"
[(colorPicker)]="event.color.secondary"
cpWidth="290px"
[cpPresetColors]="presetColors"
[style.background]="event.color.secondary"
(colorPickerChange)="event.color.secondary = $event; eventForm.patchValue({color:{secondary:$event}})"/>
</md-input-container>
</div>
<div fxFlex="1 0 auto" fxLayout="row">
<md-form-field class="mr-24">
<input mdInput [mdDatepicker]="startDatePicker" placeholder="Start Date">
<md-datepicker-toggle mdSuffix [for]="startDatePicker"></md-datepicker-toggle>
<md-datepicker #startDatePicker></md-datepicker>
</md-form-field>
<md-datepicker #startDatePicker></md-datepicker>
</div>
<div fxFlex="1 0 auto" fxLayout="row">
<md-form-field class="mr-24">
<input mdInput [mdDatepicker]="endDatePicker" placeholder="End Date">
<md-datepicker-toggle mdSuffix [for]="endDatePicker"></md-datepicker-toggle>
<md-datepicker #endDatePicker></md-datepicker>
</md-form-field>
<md-input-container class="no-errors-spacer" flex md-no-float>
<input mdInput ng-model="calendarEvent.endTime" placeholder="End Time">
name="location"
formControlName="location"
placeholder="Location">
</md-input-container>
</div>
<md-input-container formGroupName="meta">
<input mdInput
name="location"
formControlName="location"
placeholder="Location">
</md-input-container>
<md-input-container formGroupName="meta">
<md-input-container formGroupName="meta" class="w-100-p">
<textarea mdInput
formControlName="notes"
@ -97,39 +100,39 @@
md-maxlength="250"
max-rows="4">
</textarea>
</md-input-container>
</md-input-container>
</form>
</div>
<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
<button *ngIf="action !=='edit'"
md-raised-button
(click)="dialogRef.close(eventForm)"
class="save-button mat-accent"
[disabled]="eventForm.invalid"
aria-label="SAVE">
SAVE
</button>
<button *ngIf="action ==='edit'"
md-raised-button
(click)="dialogRef.close(['save',eventForm])"
class="save-button mat-accent"
[disabled]="eventForm.invalid"
aria-label="SAVE">
SAVE
</button>
<button *ngIf="action ==='edit'"
md-button
class="mat-icon-button"
(click)="dialogRef.close(['delete',eventForm])"
aria-label="Delete"
md-tooltip="Delete">
<md-icon>delete</md-icon>
</button>
</form>
</div>
<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
<button *ngIf="action !=='edit'"
md-raised-button
(click)="dialogRef.close(eventForm)"
class="save-button mat-accent"
[disabled]="eventForm.invalid"
aria-label="SAVE">
SAVE
</button>
<button *ngIf="action ==='edit'"
md-raised-button
(click)="dialogRef.close(['save',eventForm])"
class="save-button mat-accent"
[disabled]="eventForm.invalid"
aria-label="SAVE">
SAVE
</button>
<button *ngIf="action ==='edit'"
md-button
class="mat-icon-button"
(click)="dialogRef.close(['delete',eventForm])"
aria-label="Delete"
md-tooltip="Delete">
<md-icon>delete</md-icon>
</button>
</div>
</div>

13
src/app/main/content/apps/calendar/event-form/event-form.component.scss
View File

@ -2,11 +2,12 @@
.mat-dialog-container {
padding: 0;
width: 720px;
width: 480px;
}
.dialog-content-wrapper {
max-height: 85vh;
display: flex;
flex-direction: column;
}
}
:host {
display: flex;
flex-direction: column;
}

240
src/app/main/content/apps/contacts/contact-form/contact-form.component.html
View File

@ -1,126 +1,128 @@
<md-toolbar md-dialog-title class="mat-accent m-0">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">{{dialogTitle}}</span>
<button md-button class="mat-icon-button"
(click)="dialogRef.close()"
aria-label="Close dialog">
<md-icon>close</md-icon>
</button>
<div class="dialog-content-wrapper">
<md-toolbar md-dialog-title class="mat-accent m-0">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">{{dialogTitle}}</span>
<button md-button class="mat-icon-button"
(click)="dialogRef.close()"
aria-label="Close dialog">
<md-icon>close</md-icon>
</button>
</div>
<md-toolbar-row class="toolbar-bottom py-8 py-sm-16" fxLayout="column" fxLayoutAlign="center center">
<img [src]="contact.avatar" class=" avatar contact-avatar huge"
[alt]="contact.name"/>
<div class="contact-name">{{contact.name}}</div>
</md-toolbar-row>
</md-toolbar>
<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
<form [formGroup]="contactForm">
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">account_circle</md-icon>
<md-input-container fxFlex>
<input name="name" formControlName="name" placeholder="Name" mdInput required>
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12"></md-icon>
<md-input-container fxFlex>
<input name="lastName" formControlName="lastName" placeholder="Lastname" mdInput>
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">star</md-icon>
<md-input-container fxFlex>
<input name="nickname" formControlName="nickname" mdInput placeholder="Nickname">
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">phone</md-icon>
<md-input-container fxFlex>
<input formControlName="phone" mdInput placeholder="Phone number">
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">email</md-icon>
<md-input-container fxFlex>
<input name="email" formControlName="email" mdInput type="email" placeholder="Email">
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">domain</md-icon>
<md-input-container fxFlex>
<input name="company" formControlName="company" mdInput placeholder="Company">
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">work</md-icon>
<md-input-container fxFlex>
<input name="jobTitle" formControlName="jobTitle" mdInput placeholder="Job title">
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-form-field class="mr-24" fxFlex>
<input mdInput [mdDatepicker]="birthdayDatePicker" placeholder="Birthday">
<md-datepicker-toggle mdSuffix [for]="birthdayDatePicker"></md-datepicker-toggle>
<md-datepicker #birthdayDatePicker></md-datepicker>
</md-form-field>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">home</md-icon>
<md-input-container fxFlex>
<input name="address" formControlName="address" mdInput placeholder="Address">
</md-input-container>
</div>
<div fxLayout="row" class="textarea-wrapper" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">note</md-icon>
<md-input-container fxFlex>
<textarea name="notes" formControlName="notes" placeholder="Notes" mdInput type="text" max-rows="4"></textarea>
</md-input-container>
</div>
</form>
</div>
<md-toolbar-row class="toolbar-bottom" fxLayout="column" fxLayoutAlign="center center">
<img [src]="contact.avatar" class=" avatar contact-avatar huge"
[alt]="contact.name"/>
<div class="contact-name">{{contact.name}}</div>
</md-toolbar-row>
</md-toolbar>
<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
<button *ngIf="action !=='edit'"
md-raised-button
(click)="dialogRef.close(contactForm)"
class="save-button mat-accent"
[disabled]="contactForm.invalid"
aria-label="SAVE">
SAVE
</button>
<form [formGroup]="contactForm">
<button *ngIf="action ==='edit'"
md-raised-button
(click)="dialogRef.close(['save',contactForm])"
class="save-button mat-accent"
[disabled]="contactForm.invalid"
aria-label="SAVE">
SAVE
</button>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">account_circle</md-icon>
<md-input-container fxFlex>
<input name="name" formControlName="name" placeholder="Name" mdInput required>
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12"></md-icon>
<md-input-container fxFlex>
<input name="lastName" formControlName="lastName" placeholder="Lastname" mdInput>
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">star</md-icon>
<md-input-container fxFlex>
<input name="nickname" formControlName="nickname" mdInput placeholder="Nickname">
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">phone</md-icon>
<md-input-container fxFlex>
<input formControlName="phone" mdInput placeholder="Phone number">
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">email</md-icon>
<md-input-container fxFlex>
<input name="email" formControlName="email" mdInput type="email" placeholder="Email">
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">domain</md-icon>
<md-input-container fxFlex>
<input name="company" formControlName="company" mdInput placeholder="Company">
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">work</md-icon>
<md-input-container fxFlex>
<input name="jobTitle" formControlName="jobTitle" mdInput placeholder="Job title">
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-form-field class="mr-24" fxFlex>
<input mdInput [mdDatepicker]="birthdayDatePicker" placeholder="Birthday">
<md-datepicker-toggle mdSuffix [for]="birthdayDatePicker"></md-datepicker-toggle>
<md-datepicker #birthdayDatePicker></md-datepicker>
</md-form-field>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">home</md-icon>
<md-input-container fxFlex>
<input name="address" formControlName="address" mdInput placeholder="Address">
</md-input-container>
</div>
<div fxLayout="row" class="textarea-wrapper" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">note</md-icon>
<md-input-container fxFlex>
<textarea name="notes" formControlName="notes" placeholder="Notes" mdInput type="text" max-rows="4"></textarea>
</md-input-container>
</div>
</form>
</div>
<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
<button *ngIf="action !=='edit'"
md-raised-button
(click)="dialogRef.close(contactForm)"
class="save-button mat-accent"
[disabled]="contactForm.invalid"
aria-label="SAVE">
SAVE
</button>
<button *ngIf="action ==='edit'"
md-raised-button
(click)="dialogRef.close(['save',contactForm])"
class="save-button mat-accent"
[disabled]="contactForm.invalid"
aria-label="SAVE">
SAVE
</button>
<button *ngIf="action ==='edit'"
md-button
class="mat-icon-button"
(click)="dialogRef.close(['delete',contactForm])"
aria-label="Delete"
md-tooltip="Delete">
<md-icon>delete</md-icon>
</button>
<button *ngIf="action ==='edit'"
md-button
class="mat-icon-button"
(click)="dialogRef.close(['delete',contactForm])"
aria-label="Delete"
md-tooltip="Delete">
<md-icon>delete</md-icon>
</button>
</div>
</div>

16
src/app/main/content/apps/contacts/contact-form/contact-form.component.scss
View File

@ -3,14 +3,20 @@
.mat-dialog-container {
padding: 0;
width: 400px;
overflow: hidden;
.mat-toolbar {
min-height: initial;
}
.toolbar-bottom {
height: 200px;
height: auto;
}
}
}
:host {
display: flex;
flex-direction: column;
.dialog-content-wrapper {
max-height: 85vh;
display: flex;
flex-direction: column;
}
}

6
src/app/main/content/apps/contacts/contact-list/contact-list.component.html
View File

@ -104,9 +104,3 @@
</md-table>
<!-- ADD CONTACT BUTTON -->
<button md-fab class="md-accent-bg" id="add-contact-button" (click)="newContact()" aria-label="add contact"
*fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'.2'}}">
<md-icon>person_add</md-icon>
</button>
<!-- / ADD CONTACT BUTTON -->

3
src/app/main/content/apps/contacts/contact-list/contact-list.component.scss
View File

@ -8,7 +8,7 @@
box-shadow: none;
.mat-column-checkbox {
flex: 0 1 64px;
flex: 0 1 48px;
}
.mat-column-avatar {
@ -22,6 +22,7 @@
.mat-row {
position: relative;
cursor: pointer;
padding-right: 8px;
.mat-cell {
min-width: 0;

24
src/app/main/content/apps/contacts/contact-list/contact-list.component.ts
View File

@ -12,7 +12,7 @@ import { fuseAnimations } from '../../../../../core/animations';
selector : 'fuse-contacts-contact-list',
templateUrl: './contact-list.component.html',
styleUrls : ['./contact-list.component.scss'],
animations : fuseAnimations
animations : fuseAnimations
})
export class FuseContactsContactListComponent implements OnInit
{
@ -63,28 +63,6 @@ export class FuseContactsContactListComponent implements OnInit
this.dataSource = new FilesDataSource(this.contactsService);
}
newContact()
{
this.dialogRef = this.dialog.open(FuseContactsContactFormDialogComponent, {
panelClass: 'contact-form-dialog',
data : {
action: 'new'
}
});
this.dialogRef.afterClosed()
.subscribe((response: FormGroup) => {
if ( !response )
{
return;
}
this.contactsService.updateContact(response.getRawValue());
});
}
editContact(contact)
{
this.dialogRef = this.dialog.open(FuseContactsContactFormDialogComponent, {

13
src/app/main/content/apps/contacts/contacts.component.html
View File

@ -1,7 +1,7 @@
<div id="contacts" class="page-layout simple left-sidenav inner-sidenav" fusePerfectScrollbar>
<div id="contacts" class="page-layout simple left-sidenav inner-sidenav">
<!-- HEADER -->
<div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="start start"
<div class="header md-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="start start"
fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
<!-- APP TITLE -->
@ -51,7 +51,7 @@
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center p-24 pr-sm-92" fusePerfectScrollbar>
<div class="center p-24 pb-56 pr-sm-92" fusePerfectScrollbar>
<!-- CONTENT -->
<div class="content md-white-bg mat-elevation-z4">
@ -67,3 +67,10 @@
</md-sidenav-container>
</div>
<!-- ADD CONTACT BUTTON -->
<button md-fab class="md-accent-bg" id="add-contact-button" (click)="newContact()" aria-label="add contact"
*fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'.2'}}">
<md-icon>person_add</md-icon>
</button>
<!-- / ADD CONTACT BUTTON -->

7
src/app/main/content/apps/contacts/contacts.component.scss
View File

@ -4,3 +4,10 @@
overflow: hidden;
}
}
#add-contact-button {
position: absolute;
bottom: 12px;
right: 12px;
padding: 0;
z-index: 99;
}

32
src/app/main/content/apps/contacts/contacts.component.ts
View File

@ -1,7 +1,9 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ContactsService } from './contacts.service';
import { fuseAnimations } from '../../../../core/animations';
import { FormControl } from '@angular/forms';
import { FormControl, FormGroup } from '@angular/forms';
import { FuseContactsContactFormDialogComponent } from './contact-form/contact-form.component';
import { MdDialog } from '@angular/material';
@Component({
selector : 'fuse-contacts',
@ -14,12 +16,38 @@ export class FuseContactsComponent implements OnInit
{
hasSelectedContacts: boolean;
searchInput: FormControl;
dialogRef: any;
constructor(private contactsService: ContactsService)
constructor(
private contactsService: ContactsService,
public dialog: MdDialog
)
{
this.searchInput = new FormControl('');
}
newContact()
{
this.dialogRef = this.dialog.open(FuseContactsContactFormDialogComponent, {
panelClass: 'contact-form-dialog',
data : {
action: 'new'
}
});
this.dialogRef.afterClosed()
.subscribe((response: FormGroup) => {
if ( !response )
{
return;
}
this.contactsService.updateContact(response.getRawValue());
});
}
ngOnInit()
{

174
src/app/main/content/apps/mail/dialogs/compose/compose.component.html
View File

@ -1,109 +1,111 @@
<md-toolbar md-dialog-title class="mat-accent m-0">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">New Message</span>
<button md-button class="mat-icon-button"
(click)="dialogRef.close()"
aria-label="Close dialog">
<md-icon>close</md-icon>
</button>
</div>
</md-toolbar>
<div class="dialog-content-wrapper">
<md-toolbar md-dialog-title class="mat-accent m-0">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">New Message</span>
<button md-button class="mat-icon-button"
(click)="dialogRef.close()"
aria-label="Close dialog">
<md-icon>close</md-icon>
</button>
</div>
</md-toolbar>
<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
<form name="composeForm" [formGroup]="composeForm" class="compose-form" fxLayout="column" fxFlex>
<form name="composeForm" [formGroup]="composeForm" class="compose-form" fxLayout="column" fxFlex>
<md-input-container>
<input mdInput name="from"
placeholder="From"
formControlName="from"
type="email">
</md-input-container>
<md-input-container>
<input mdInput name="from"
placeholder="From"
formControlName="from"
type="email">
</md-input-container>
<md-input-container ng-class="{'hidden-cc': vm.hiddenCC, 'hidden-bcc': vm.hiddenBCC}">
<input mdInput name="to"
placeholder="To"
formControlName="to"
type="email" required>
</md-input-container>
<md-input-container ng-class="{'hidden-cc': vm.hiddenCC, 'hidden-bcc': vm.hiddenBCC}">
<input mdInput name="to"
placeholder="To"
formControlName="to"
type="email" required>
</md-input-container>
<md-input-container>
<input mdInput
name="cc"
placeholder="Cc"
formControlName="cc"
type="email">
</md-input-container>
<md-input-container>
<input mdInput
name="cc"
placeholder="Cc"
formControlName="cc"
type="email">
</md-input-container>
<md-input-container>
<input mdInput
name="bcc"
placeholder="Bcc"
formControlName="bcc"
type="email">
</md-input-container>
<md-input-container>
<input mdInput
name="bcc"
placeholder="Bcc"
formControlName="bcc"
type="email">
</md-input-container>
<md-input-container>
<input mdInput name="subject"
placeholder="Subject"
formControlName="subject">
</md-input-container>
<md-input-container>
<input mdInput name="subject"
placeholder="Subject"
formControlName="subject">
</md-input-container>
<md-input-container>
<md-input-container>
<textarea mdInput name="message"
placeholder="Message"
formControlName="message"
rows="6">
</textarea>
</md-input-container>
</md-input-container>
<div class="attachment-list">
<div class="attachment-list">
<div class="attachment" fxLayout="row" fxLayoutAlign="space-between center">
<div>
<span class="filename">attachment-2.doc</span>
<span class="size">(12 Kb)</span>
<div class="attachment" fxLayout="row" fxLayoutAlign="space-between center">
<div>
<span class="filename">attachment-2.doc</span>
<span class="size">(12 Kb)</span>
</div>
<button md-icon-button aria-label="Delete attachment">
<md-icon class="s-16">close</md-icon>
</button>
</div>
<button md-icon-button aria-label="Delete attachment">
<md-icon class="s-16">close</md-icon>
</button>
</div>
<div class="attachment" fxLayout="row" fxLayoutAlign="space-between center">
<div>
<span class="filename">attachment-1.jpg</span>
<span class="size">(350 Kb)</span>
</div>
<div class="attachment" fxLayout="row" fxLayoutAlign="space-between center">
<div>
<span class="filename">attachment-1.jpg</span>
<span class="size">(350 Kb)</span>
<button md-icon-button aria-label="Delete attachment">
<md-icon class="s-16">close</md-icon>
</button>
</div>
<button md-icon-button aria-label="Delete attachment">
<md-icon class="s-16">close</md-icon>
</button>
</div>
</div>
</form>
</div>
<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
<div>
<button md-raised-button
(click)="dialogRef.close(['send',composeForm])"
class="save-button mat-accent"
[disabled]="composeForm.invalid"
aria-label="SAVE">
SEND
</button>
<button md-icon-button md-tooltip="Attach a file">
<md-icon>attach_file</md-icon>
</button>
</form>
</div>
<button md-button
class="mat-icon-button"
(click)="dialogRef.close(['delete',composeForm])"
aria-label="Delete"
md-tooltip="Delete">
<md-icon>delete</md-icon>
</button>
<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
<div>
<button md-raised-button
(click)="dialogRef.close(['send',composeForm])"
class="save-button mat-accent"
[disabled]="composeForm.invalid"
aria-label="SAVE">
SEND
</button>
<button md-icon-button md-tooltip="Attach a file">
<md-icon>attach_file</md-icon>
</button>
</div>
<button md-button
class="mat-icon-button"
(click)="dialogRef.close(['delete',composeForm])"
aria-label="Delete"
md-tooltip="Delete">
<md-icon>delete</md-icon>
</button>
</div>
</div>

11
src/app/main/content/apps/mail/dialogs/compose/compose.component.scss
View File

@ -1,8 +1,3 @@
:host {
display: flex;
flex-direction: column;
}
.mail-compose-dialog {
.mat-dialog-container {
padding: 0;
@ -36,4 +31,10 @@
}
}
}
.dialog-content-wrapper {
max-height: 85vh;
display: flex;
flex-direction: column;
}
}

784
src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
View File

@ -1,452 +1,454 @@
<md-toolbar *ngIf="card" md-dialog-title class="md-accent-bg m-0">
<div class="dialog-content-wrapper">
<md-toolbar *ngIf="card" md-dialog-title class="md-accent-bg m-0">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<div fxFlex fxLayout="row" fxLayoutAlign="start center">
<div fxFlex fxLayout="row" fxLayoutAlign="start center">
<!-- DUE DATE -->
<div class="due-date" fxFlex="0 1 auto">
<button *ngIf="card.due" md-icon-button class="" [mdMenuTriggerFor]="dueDateMenu">
<md-icon>today</md-icon>
</button>
<md-menu #dueDateMenu="mdMenu" [overlapTrigger]="false">
<button md-menu-item (click)="removeDueDate()">Remove Due Date</button>
</md-menu>
<md2-datepicker *ngIf="!card.due" [(ngModel)]="card.due" openOnFocus="true" placeholder="Set Date/Time" type="datetime"></md2-datepicker>
</div>
<!-- / DUE DATE -->
<!-- LABELS -->
<div class="labels" fxFlex="0 1 auto">
<button md-icon-button [mdMenuTriggerFor]="labelsMenu">
<md-icon>label</md-icon>
</button>
<md-menu #labelsMenu="mdMenu" [overlapTrigger]="false" class="scrumboard-labels-menu">
<fuse-scrumboard-label-selector [card]="card" (onCardLabelsChange)="updateCard()"></fuse-scrumboard-label-selector>
</md-menu>
</div>
<!-- / LABELS -->
<!-- MEMBERS -->
<div class="members" fxFlex="0 1 auto">
<button md-icon-button class="" [mdMenuTriggerFor]="membersMenu">
<md-icon>account_circle</md-icon>
</button>
<md-menu #membersMenu="mdMenu" [overlapTrigger]="false">
<div fxFlex fxLayout="column" class="scrumboard-members-menu" (click)="$event.stopPropagation()">
<md-checkbox class="member px-12" [checked]="card.idMembers.indexOf(member.id) > -1"
*ngFor="let member of board.members"
(change)="toggleInArray(member.id, card.idMembers);updateCard()">
<div fxLayout="row" fxLayoutAlign="start center">
<img [alt]="member.name" [src]=" member.avatar" class="avatar"/>
<p class="member-name">{{ member.name }}</p>
</div>
</md-checkbox>
</div>
</md-menu>
</div>
<!-- / MEMBERS -->
<!-- ATTACHMENT -->
<button md-icon-button aria-label="Attachment">
<md-icon>attachment</md-icon>
</button>
<!-- / ATTACHMENT -->
<!-- CHECKLIST -->
<div class="due-date " fxFlex="0 1 auto">
<button md-icon-button class="" [mdMenuTriggerFor]="checklistMenu" #checklistMenuTrigger="mdMenuTrigger" (onMenuOpen)="onChecklistMenuOpen()">
<md-icon>check_box</md-icon>
</button>
<md-menu #checklistMenu="mdMenu" [overlapTrigger]="false">
<form class="px-16 py-8" #newChecklistForm="ngForm" (submit)="addChecklist(newChecklistForm)" (click)="$event.stopPropagation()"
fxLayout="column" fxLayoutAlign="start end">
<md-input-container floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex>
<input #newCheckListTitleField mdInput ngModel #checklistTitle="ngModel" name="checklistTitle" placeholder="Checklist title" required>
</md-input-container>
<button md-raised-button class="mat-accent" aria-label="Add Checklist" [disabled]="!newChecklistForm.valid">Add Checklist</button>
</form>
</md-menu>
</div>
<!-- / CHECKLIST -->
<!-- SUBSCRIBE -->
<div class="subscribe " fxFlex="0 1 auto">
<button md-icon-button class="" [mdMenuTriggerFor]="subscribeMenu">
<md-icon>remove_red_eye</md-icon>
</button>
<md-menu #subscribeMenu="mdMenu" [overlapTrigger]="false">
<button *ngIf="card.subscribed" md-menu-item (click)="toggleSubscribe()">
Unsubscribe
</button>
<button *ngIf="!card.subscribed" md-menu-item (click)="toggleSubscribe()">
Subscribe
</button>
</md-menu>
</div>
<!-- / SUBSCRIBE -->
<!-- OPTIONS -->
<div class="options " fxFlex="0 1 auto">
<button md-icon-button class="" [mdMenuTriggerFor]="optionsMenu">
<md-icon>more_horiz</md-icon>
</button>
<md-menu #optionsMenu="mdMenu" [overlapTrigger]="false">
<button md-menu-item (click)="removeCard()">
Remove Card
</button>
</md-menu>
</div>
<!-- / OPTIONS -->
</div>
<!-- CLOSE DIALOG BUTTON -->
<button md-icon-button (click)="dialogRef.close()" aria-label="Close Dialog">
<md-icon>close</md-icon>
</button>
<!-- / CLOSE DIALOG BUTTON -->
</div>
</md-toolbar>
<div *ngIf="card" md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
<div fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center"
fxLayout.xs="column" fxLayoutAlign="center center">
<!-- BREADCRUMB -->
<div class="card-breadcrumb mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
<span>{{board.name}}</span>
<md-icon class="s-20">chevron_right</md-icon>
<span>{{list.name}}</span>
</div>
<!-- / BREADCRUMB -->
<!-- DUE DATE -->
<div class="due-date" fxFlex="0 1 auto">
<div *ngIf="card.due" class="due-date" fxLayout="row" fxLayoutAlign="start center">
<button *ngIf="card.due" md-icon-button class="" [mdMenuTriggerFor]="dueDateMenu">
<md-icon>today</md-icon>
<md2-datepicker class="picker ml-8" [(ngModel)]="card.due" openOnFocus="true" type="datetime" format="dd/MM/y H:mm"></md2-datepicker>
<button md-icon-button class="remove-due-date" (click)="removeDueDate()">
<md-icon class="s-16">close</md-icon>
</button>
<md-menu #dueDateMenu="mdMenu" [overlapTrigger]="false">
<button md-menu-item (click)="removeDueDate()">Remove Due Date</button>
</md-menu>
<md2-datepicker *ngIf="!card.due" [(ngModel)]="card.due" openOnFocus="true" placeholder="Set Date/Time" type="datetime"></md2-datepicker>
</div>
<!-- / DUE DATE -->
<!-- LABELS -->
<div class="labels" fxFlex="0 1 auto">
<button md-icon-button [mdMenuTriggerFor]="labelsMenu">
<md-icon>label</md-icon>
</button>
<md-menu #labelsMenu="mdMenu" [overlapTrigger]="false" class="scrumboard-labels-menu">
<fuse-scrumboard-label-selector [card]="card" (onCardLabelsChange)="updateCard()"></fuse-scrumboard-label-selector>
</md-menu>
</div>
<!-- / LABELS -->
<!-- MEMBERS -->
<div class="members" fxFlex="0 1 auto">
<button md-icon-button class="" [mdMenuTriggerFor]="membersMenu">
<md-icon>account_circle</md-icon>
</button>
<md-menu #membersMenu="mdMenu" [overlapTrigger]="false">
<div fxFlex fxLayout="column" class="scrumboard-members-menu" (click)="$event.stopPropagation()">
<md-checkbox class="member px-12" [checked]="card.idMembers.indexOf(member.id) > -1"
*ngFor="let member of board.members"
(change)="toggleInArray(member.id, card.idMembers);updateCard()">
<div fxLayout="row" fxLayoutAlign="start center">
<img [alt]="member.name" [src]=" member.avatar" class="avatar"/>
<p class="member-name">{{ member.name }}</p>
</div>
</md-checkbox>
</div>
</md-menu>
</div>
<!-- / MEMBERS -->
<!-- ATTACHMENT -->
<button md-icon-button aria-label="Attachment">
<md-icon>attachment</md-icon>
</button>
<!-- / ATTACHMENT -->
<!-- CHECKLIST -->
<div class="due-date " fxFlex="0 1 auto">
<button md-icon-button class="" [mdMenuTriggerFor]="checklistMenu" #checklistMenuTrigger="mdMenuTrigger" (onMenuOpen)="onChecklistMenuOpen()">
<md-icon>check_box</md-icon>
</button>
<md-menu #checklistMenu="mdMenu" [overlapTrigger]="false">
<form class="px-16 py-8" #newChecklistForm="ngForm" (submit)="addChecklist(newChecklistForm)" (click)="$event.stopPropagation()"
fxLayout="column" fxLayoutAlign="start end">
<md-input-container floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex>
<input #newCheckListTitleField mdInput ngModel #checklistTitle="ngModel" name="checklistTitle" placeholder="Checklist title" required>
</md-input-container>
<button md-raised-button class="mat-accent" aria-label="Add Checklist" [disabled]="!newChecklistForm.valid">Add Checklist</button>
</form>
</md-menu>
</div>
<!-- / CHECKLIST -->
<!-- SUBSCRIBE -->
<div class="subscribe " fxFlex="0 1 auto">
<button md-icon-button class="" [mdMenuTriggerFor]="subscribeMenu">
<md-icon>remove_red_eye</md-icon>
</button>
<md-menu #subscribeMenu="mdMenu" [overlapTrigger]="false">
<button *ngIf="card.subscribed" md-menu-item (click)="toggleSubscribe()">
Unsubscribe
</button>
<button *ngIf="!card.subscribed" md-menu-item (click)="toggleSubscribe()">
Subscribe
</button>
</md-menu>
</div>
<!-- / SUBSCRIBE -->
<!-- OPTIONS -->
<div class="options " fxFlex="0 1 auto">
<button md-icon-button class="" [mdMenuTriggerFor]="optionsMenu">
<md-icon>more_horiz</md-icon>
</button>
<md-menu #optionsMenu="mdMenu" [overlapTrigger]="false">
<button md-menu-item (click)="removeCard()">
Remove Card
</button>
</md-menu>
</div>
<!-- / OPTIONS -->
</div>
<!-- CLOSE DIALOG BUTTON -->
<button md-icon-button (click)="dialogRef.close()" aria-label="Close Dialog">
<md-icon>close</md-icon>
</button>
<!-- / CLOSE DIALOG BUTTON -->
</div>
</md-toolbar>
<div *ngIf="card" md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
<div fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center"
fxLayout.xs="column" fxLayoutAlign="center center">
<!-- BREADCRUMB -->
<div class="card-breadcrumb mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
<span>{{board.name}}</span>
<md-icon class="s-20">chevron_right</md-icon>
<span>{{list.name}}</span>
<!-- NAME -->
<div fxLayout="row" fxLayoutAlign="start center">
<md-icon *ngIf="card.subscribed" class="card-subscribe s-20 mr-12">remove_red_eye</md-icon>
<div class="card-name">
<md-input-container floatPlaceholder="never" fxFlex>
<input mdInput [(ngModel)]="card.name" placeholder="Title" required (change)="updateCard()">
</md-input-container>
</div>
</div>
<!-- / BREADCRUMB -->
<!-- / NAME -->
<!-- DUE DATE -->
<div *ngIf="card.due" class="due-date" fxLayout="row" fxLayoutAlign="start center">
<md2-datepicker class="picker ml-8" [(ngModel)]="card.due" openOnFocus="true" type="datetime" format="dd/MM/y H:mm"></md2-datepicker>
<button md-icon-button class="remove-due-date" (click)="removeDueDate()">
<md-icon class="s-16">close</md-icon>
</button>
</div>
<!-- / DUE DATE -->
</div>
<!-- NAME -->
<div fxLayout="row" fxLayoutAlign="start center">
<md-icon *ngIf="card.subscribed" class="card-subscribe s-20 mr-12">remove_red_eye</md-icon>
<div class="card-name">
<md-input-container floatPlaceholder="never" fxFlex>
<input mdInput [(ngModel)]="card.name" placeholder="Title" required (change)="updateCard()">
<!-- DESCRIPTION -->
<div class="description">
<md-input-container fxFlex>
<textarea mdInput [(ngModel)]="card.description" placeholder="Description" columns="1" md-maxlength="150" max-rows="4" (change)="updateCard()"></textarea>
</md-input-container>
</div>
</div>
<!-- / NAME -->
<!-- / DESCRIPTION -->
<!-- DESCRIPTION -->
<div class="description">
<md-input-container fxFlex>
<textarea mdInput [(ngModel)]="card.description" placeholder="Description" columns="1" md-maxlength="150" max-rows="4" (change)="updateCard()"></textarea>
</md-input-container>
</div>
<!-- / DESCRIPTION -->
<!-- SECTIONS -->
<div class="sections">
<!-- SECTIONS -->
<div class="sections">
<!-- LABELS SECTION -->
<div *ngIf="card.idLabels[0] || card.idMembers[0]" class="section"
fxLayout="column" fxLayout.gt-xs="row">
<!-- LABELS SECTION -->
<div *ngIf="card.idLabels[0] || card.idMembers[0]" class="section"
fxLayout="column" fxLayout.gt-xs="row">
<div *ngIf="card.idLabels[0]" fxFlex class="labels">
<div class="section-header" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-20">label</md-icon>
<span class="section-title">Labels</span>
<div *ngIf="card.idLabels[0]" fxFlex class="labels">
<div class="section-header" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-20">label</md-icon>
<span class="section-title">Labels</span>
</div>
<div class="section-content">
<md-chip-list class="label-chips">
<md-chip class="label-chip mb-4"
*ngFor="let labelId of card.idLabels"
[class]="board.labels | getById:labelId:'color'"
fxLayout="row" fxLayoutAlign="start center">
<span>{{board.labels|getById:labelId:'name'}}</span>
<md-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(labelId, card.idLabels);updateCard()">close</md-icon>
</md-chip>
</md-chip-list>
</div>
</div>
<div class="section-content">
<md-chip-list class="label-chips">
<md-chip class="label-chip mb-4"
*ngFor="let labelId of card.idLabels"
[class]="board.labels | getById:labelId:'color'"
fxLayout="row" fxLayoutAlign="start center">
<span>{{board.labels|getById:labelId:'name'}}</span>
<md-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(labelId, card.idLabels);updateCard()">close</md-icon>
</md-chip>
</md-chip-list>
<div *ngIf="card.idMembers[0]" fxFlex class="members">
<div class="section-header" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-20">supervisor_account</md-icon>
<span class="section-title">Members</span>
</div>
<div class="section-content">
<md-chip-list class="member-chips">
<md-chip class="member-chip mb-4" *ngFor="let memberId of card.idMembers"
fxLayout="row" fxLayoutAlign="start center">
<img class="member-chip-avatar" [src]="board.members | getById:memberId:'avatar'"
[md-tooltip]="board.members | getById:memberId:'name'">
<md-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(memberId, card.idMembers);updateCard()">close</md-icon>
</md-chip>
</md-chip-list>
</div>
</div>
</div>
<!-- / LABELS SECTION -->
<div *ngIf="card.idMembers[0]" fxFlex class="members">
<div class="section-header" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-20">supervisor_account</md-icon>
<span class="section-title">Members</span>
</div>
<div class="section-content">
<md-chip-list class="member-chips">
<md-chip class="member-chip mb-4" *ngFor="let memberId of card.idMembers"
fxLayout="row" fxLayoutAlign="start center">
<img class="member-chip-avatar" [src]="board.members | getById:memberId:'avatar'"
[md-tooltip]="board.members | getById:memberId:'name'">
<md-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(memberId, card.idMembers);updateCard()">close</md-icon>
</md-chip>
</md-chip-list>
</div>
</div>
</div>
<!-- / LABELS SECTION -->
<!-- ATTACHMENTS SECTION -->
<div *ngIf="card.attachments[0]" class="section">
<!-- ATTACHMENTS SECTION -->
<div *ngIf="card.attachments[0]" class="section">
<div class="attachments">
<div class="attachments">
<div class="section-header" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-20">attachment</md-icon>
<span class="section-title">Attachments</span>
</div>
<div class="section-content">
<div class="attachment" *ngFor="let item of card.attachments" [ngSwitch]="item.type">
<div *ngSwitchCase="'image'"
fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center"
fxLayout="column" fxLayoutAlign="center start">
<div class="attachment-preview mat-elevation-z2"
[ngStyle]="{'background-image': 'url('+item.src+')'}">
</div>
<div class="attachment-content" fxLayout="column">
<div fxLayout="row" fxLayoutAlign="start center">
<span class="attachment-name">{{item.name}}</span>
<md-icon *ngIf="card.idAttachmentCover === item.id"
class="yellow-700-fg attachment-is-cover s-20">star
</md-icon>
</div>
<span class="attachment-time">{{item.time}}</span>
<div>
<button md-raised-button class="attachment-actions-button" [mdMenuTriggerFor]="attachmentActionsMenu">
<span fxLayout="row" fxLayoutAlign="center center">
<span>Actions</span>
<md-icon class="s-20">arrow_drop_down</md-icon>
</span>
</button>
<md-menu #attachmentActionsMenu="mdMenu">
<button md-menu-item (click)="toggleCoverImage(item.id)">
<span *ngIf="card.idAttachmentCover !== item.id">Make Cover</span>
<span *ngIf="card.idAttachmentCover === item.id">Remove Cover</span>
</button>
<button md-menu-item (click)="removeAttachment(item)">
Remove Attachment
</button>
</md-menu>
</div>
</div>
</div>
<div *ngSwitchCase="'link'" fxLayout="row">
<div class="attachment-preview mat-elevation-z2" fxLayout="column"
fxLayoutAlign="center center">
<span>LINK</span>
</div>
<div class="attachment-content" fxLayout="column">
<span class="attachment-url">{{item.url}}</span>
<span class="attachment-time">{{item.time}}</span>
</div>
</div>
<div class="section-header" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-20">attachment</md-icon>
<span class="section-title">Attachments</span>
</div>
<button md-button class="add-attachment-button" aria-label="add attachment">
<div fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-20">add</md-icon>
<span>Add an attachment</span>
<div class="section-content">
<div class="attachment" *ngFor="let item of card.attachments" [ngSwitch]="item.type">
<div *ngSwitchCase="'image'"
fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center"
fxLayout="column" fxLayoutAlign="center start">
<div class="attachment-preview mat-elevation-z2"
[ngStyle]="{'background-image': 'url('+item.src+')'}">
</div>
<div class="attachment-content" fxLayout="column">
<div fxLayout="row" fxLayoutAlign="start center">
<span class="attachment-name">{{item.name}}</span>
<md-icon *ngIf="card.idAttachmentCover === item.id"
class="yellow-700-fg attachment-is-cover s-20">star
</md-icon>
</div>
<span class="attachment-time">{{item.time}}</span>
<div>
<button md-raised-button class="attachment-actions-button" [mdMenuTriggerFor]="attachmentActionsMenu">
<span fxLayout="row" fxLayoutAlign="center center">
<span>Actions</span>
<md-icon class="s-20">arrow_drop_down</md-icon>
</span>
</button>
<md-menu #attachmentActionsMenu="mdMenu">
<button md-menu-item (click)="toggleCoverImage(item.id)">
<span *ngIf="card.idAttachmentCover !== item.id">Make Cover</span>
<span *ngIf="card.idAttachmentCover === item.id">Remove Cover</span>
</button>
<button md-menu-item (click)="removeAttachment(item)">
Remove Attachment
</button>
</md-menu>
</div>
</div>
</div>
<div *ngSwitchCase="'link'" fxLayout="row">
<div class="attachment-preview mat-elevation-z2" fxLayout="column"
fxLayoutAlign="center center">
<span>LINK</span>
</div>
<div class="attachment-content" fxLayout="column">
<span class="attachment-url">{{item.url}}</span>
<span class="attachment-time">{{item.time}}</span>
</div>
</div>
</div>
</button>
</div>
</div>
</div>
<!-- / ATTACHMENTS SECTION -->
<!-- CHECKLISTS SECTION -->
<div class="section" *ngFor="let checklist of card.checklists">
<div class="checklist">
<div class="section-header" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-20">check_box</md-icon>
<span fxFlex class="section-title">{{checklist.name}}</span>
<div>
<button md-icon-button class="checklist-actions-button" [mdMenuTriggerFor]="checklistActionsMenu">
<md-icon class="s-20">more_vert</md-icon>
<button md-button class="add-attachment-button" aria-label="add attachment">
<div fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-20">add</md-icon>
<span>Add an attachment</span>
</div>
</button>
<md-menu #checklistActionsMenu="mdMenu">
<button md-menu-item (click)="removeChecklist(checklist)">
<md-icon>delete</md-icon>
<span>Remove Checklist</span>
</button>
</md-menu>
</div>
</div>
</div>
<!-- / ATTACHMENTS SECTION -->
<div class="section-content">
<!-- CHECKLISTS SECTION -->
<div class="section" *ngFor="let checklist of card.checklists">
<div class="checklist-progress" fxLayout="row" fxLayoutAlign="start center">
<div class="checklist">
<span class="checklist-progress-value">
{{checklist.checkItemsChecked}} / {{checklist.checkItems.length}}
</span>
<div class="section-header" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-20">check_box</md-icon>
<span fxFlex class="section-title">{{checklist.name}}</span>
<div>
<button md-icon-button class="checklist-actions-button" [mdMenuTriggerFor]="checklistActionsMenu">
<md-icon class="s-20">more_vert</md-icon>
</button>
<md-menu #checklistActionsMenu="mdMenu">
<button md-menu-item (click)="removeChecklist(checklist)">
<md-icon>delete</md-icon>
<span>Remove Checklist</span>
</button>
</md-menu>
</div>
<md-progress-bar class="mat-accent checklist-progressbar" mode="determinate"
value="{{100 * checklist.checkItemsChecked / checklist.checkItems.length}}">
</md-progress-bar>
</div>
<div class="check-items">
<div class="section-content">
<div class="check-item" *ngFor="let checkItem of checklist.checkItems" fxLayout="row" fxLayoutAlign="space-between center">
<div class="checklist-progress" fxLayout="row" fxLayoutAlign="start center">
<div fxFlex fxLayout="row" fxLayoutAlign="start center">
<md-checkbox [(ngModel)]="checkItem.checked"
(change)="updateCheckedCount(checklist)"
aria-label="{{checkItem.name}}">
</md-checkbox>
<md-input-container fxFlex class="mx-12">
<input mdInput [(ngModel)]="checkItem.name">
<span class="checklist-progress-value">
{{checklist.checkItemsChecked}} / {{checklist.checkItems.length}}
</span>
<md-progress-bar class="mat-accent checklist-progressbar" mode="determinate"
value="{{100 * checklist.checkItemsChecked / checklist.checkItems.length}}">
</md-progress-bar>
</div>
<div class="check-items">
<div class="check-item" *ngFor="let checkItem of checklist.checkItems" fxLayout="row" fxLayoutAlign="space-between center">
<div fxFlex fxLayout="row" fxLayoutAlign="start center">
<md-checkbox [(ngModel)]="checkItem.checked"
(change)="updateCheckedCount(checklist)"
aria-label="{{checkItem.name}}">
</md-checkbox>
<md-input-container fxFlex class="mx-12">
<input mdInput [(ngModel)]="checkItem.name">
</md-input-container>
</div>
<button md-icon-button class="checklist-actions-button" (click)="removeChecklistItem(checkItem, checklist)">
<md-icon class="s-20">delete</md-icon>
</button>
</div>
</div>
<form #newCheckItemForm="ngForm" (submit)="addCheckItem(newCheckItemForm,checklist)" name="newCheckItemForm" class="new-check-item-form"
fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="row" fxLayoutAlign="start center" fxFlex>
<md-icon class="s-20">add</md-icon>
<md-input-container class="no-errors-spacer mx-12" fxFlex>
<input mdInput ngModel #checkItem="ngModel" name="checkItem" placeholder="Add an item" autocomplete="off">
</md-input-container>
</div>
<button md-icon-button class="checklist-actions-button" (click)="removeChecklistItem(checkItem, checklist)">
<md-icon class="s-20">delete</md-icon>
</button>
</div>
</div>
<form #newCheckItemForm="ngForm" (submit)="addCheckItem(newCheckItemForm,checklist)" name="newCheckItemForm" class="new-check-item-form"
fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="row" fxLayoutAlign="start center" fxFlex>
<md-icon class="s-20">add</md-icon>
<md-input-container class="no-errors-spacer mx-12" fxFlex>
<input mdInput ngModel #checkItem="ngModel" name="checkItem" placeholder="Add an item" autocomplete="off">
</md-input-container>
</div>
<button md-raised-button
[disabled]="!newCheckItemForm.valid || newCheckItemForm.pristine"
class="mat-accent" aria-label="Add">
<span>Add</span>
</button>
</form>
</div>
</div>
</div>
<!-- / CHECKLISTS SECTION -->
<!-- COMMENTS SECTION -->
<div class="section">
<div class="comments">
<div class="section-header" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-20">comment</md-icon>
<span class="section-title">Comments</span>
</div>
<div class="section-content">
<form name="cardCommentForm"
#newCommentForm="ngForm" (submit)="addNewComment(newCommentForm)"
ng-submit="vm.addNewComment(vm.newCommentText); vm.newCommentText =''"
class="comment new-comment" fxLayout="column" fxLayoutAlign="start" no-validate>
<div fxLayout="row">
<img class="comment-member-avatar" src="assets/images/avatars/profile.jpg">
<md-input-container fxFlex>
<input mdInput name="newComment" ngModel #newComment="ngModel"
placeholder="Write a comment.." required>
</md-input-container>
</div>
<div fxLayout="row" fxLayoutAlign="end center">
<button md-raised-button class="mat-accent"
[disabled]="!newCommentForm.valid || newCommentForm.pristine"
aria-label="Add">
<button md-raised-button
[disabled]="!newCheckItemForm.valid || newCheckItemForm.pristine"
class="mat-accent" aria-label="Add">
<span>Add</span>
</button>
</div>
</form>
</form>
<div class="comment" fxLayout="row" *ngFor="let comment of card.comments">
</div>
</div>
</div>
<!-- / CHECKLISTS SECTION -->
<img class="comment-member-avatar"
[src]="board.members | getById: comment.idMember:'avatar'">
<!-- COMMENTS SECTION -->
<div class="section">
<div fxLayout="column">
<div class="comment-member-name">
{{board.members | getById: comment.idMember:'name'}}
<div class="comments">
<div class="section-header" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-20">comment</md-icon>
<span class="section-title">Comments</span>
</div>
<div class="section-content">
<form name="cardCommentForm"
#newCommentForm="ngForm" (submit)="addNewComment(newCommentForm)"
ng-submit="vm.addNewComment(vm.newCommentText); vm.newCommentText =''"
class="comment new-comment" fxLayout="column" fxLayoutAlign="start" no-validate>
<div fxLayout="row">
<img class="comment-member-avatar" src="assets/images/avatars/profile.jpg">
<md-input-container fxFlex>
<input mdInput name="newComment" ngModel #newComment="ngModel"
placeholder="Write a comment.." required>
</md-input-container>
</div>
<div fxLayout="row" fxLayoutAlign="end center">
<button md-raised-button class="mat-accent"
[disabled]="!newCommentForm.valid || newCommentForm.pristine"
aria-label="Add">
<span>Add</span>
</button>
</div>
</form>
<div class="comment" fxLayout="row" *ngFor="let comment of card.comments">
<img class="comment-member-avatar"
[src]="board.members | getById: comment.idMember:'avatar'">
<div fxLayout="column">
<div class="comment-member-name">
{{board.members | getById: comment.idMember:'name'}}
</div>
<div class="comment-bubble">{{comment.message}}</div>
<div class="comment-time secondary-text">{{comment.time}}</div>
</div>
<div class="comment-bubble">{{comment.message}}</div>
<div class="comment-time secondary-text">{{comment.time}}</div>
</div>
</div>
</div>
</div>
</div>
<!-- / COMMENTS SECTION -->
<!-- / COMMENTS SECTION -->
<!-- ACTIVITIES SECTION -->
<div *ngIf="card.activities[0]" class="section">
<!-- ACTIVITIES SECTION -->
<div *ngIf="card.activities[0]" class="section">
<div class="activities">
<div class="activities">
<div class="section-header" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-20">list</md-icon>
<span class="section-title">Activity</span>
</div>
<div class="section-content">
<div class="activity" fxLayout="row" fxLayoutAlign="start center" *ngFor="let activity of card.activities">
<img class="activity-member-avatar"
[src]="board.members| getById:activity.idMember:'avatar'">
<div class="activity-member-name">{{board.members| getById:activity.idMember:'name'}}</div>
<div class="activity-message">{{activity.message}}</div>
<div class="activity-time secondary-text">{{activity.time}}</div>
<div class="section-header" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="s-20">list</md-icon>
<span class="section-title">Activity</span>
</div>
<div class="section-content">
<div class="activity" fxLayout="row" fxLayoutAlign="start center" *ngFor="let activity of card.activities">
<img class="activity-member-avatar"
[src]="board.members| getById:activity.idMember:'avatar'">
<div class="activity-member-name">{{board.members| getById:activity.idMember:'name'}}</div>
<div class="activity-message">{{activity.message}}</div>
<div class="activity-time secondary-text">{{activity.time}}</div>
</div>
</div>
</div>
</div>
</div>
<!-- / ACTIVITIES SECTION -->
<!-- / ACTIVITIES SECTION -->
</div>
<!-- / SECTIONS -->
</div>
<!-- / SECTIONS -->
</div>

11
src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss
View File

@ -1,10 +1,5 @@
@import "src/app/core/scss/fuse";
:host {
display: flex;
flex-direction: column;
}
.scrumboard-card-dialog {
.mat-dialog-container {
@ -387,6 +382,12 @@
}
}
.dialog-content-wrapper {
max-height: 85vh;
display: flex;
flex-direction: column;
}
}
.scrumboard-members-menu {