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;

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

@ -1,4 +1,5 @@
<md-toolbar md-dialog-title class="mat-accent m-0">
<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"
@ -7,13 +8,13 @@
<md-icon>close</md-icon>
</button>
</div>
</md-toolbar>
</md-toolbar>
<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
<form name="eventForm" [formGroup]="eventForm" class="event-form" fxLayout="column" fxFlex>
<form name="eventForm" [formGroup]="eventForm" class="event-form w-100-p" fxLayout="column" fxFlex>
<md-input-container>
<md-input-container class="w-100-p">
<input mdInput
name="title"
formControlName="title"
@ -32,7 +33,7 @@
</div>
<div class="py-16" fxFlex="1 0 auto" fxLayout="row" formGroupName="color">
<md-input-container class="mr-24">
<md-input-container class="mr-24" fxFlex>
<input mdInput
name="primary color"
formControlName="primary"
@ -43,7 +44,7 @@
[style.background]="event.color.primary"
(colorPickerChange)="event.color.primary = $event; eventForm.patchValue({color:{primary:$event}})"/>
</md-input-container>
<md-input-container>
<md-input-container fxFlex>
<input mdInput
name="secondary color"
formControlName="secondary"
@ -58,38 +59,40 @@
<div fxFlex="1 0 auto" fxLayout="row">
<md-form-field class="mr-24">
<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-datepicker #startDatePicker></md-datepicker>
<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">
<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" flex md-no-float>
<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">
<md-input-container formGroupName="meta" class="w-100-p">
<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"
@ -101,9 +104,9 @@
</form>
</div>
</div>
<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
<button *ngIf="action !=='edit'"
md-raised-button
@ -131,5 +134,5 @@
md-tooltip="Delete">
<md-icon>delete</md-icon>
</button>
</div>
</div>

7
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;
}
}
:host {
.dialog-content-wrapper {
max-height: 85vh;
display: flex;
flex-direction: column;
}
}

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

@ -1,4 +1,5 @@
<md-toolbar md-dialog-title class="mat-accent m-0">
<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"
@ -8,14 +9,14 @@
</button>
</div>
<md-toolbar-row class="toolbar-bottom" fxLayout="column" fxLayoutAlign="center center">
<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>
</md-toolbar>
<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
<div md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
<form [formGroup]="contactForm">
@ -92,9 +93,9 @@
</form>
</div>
</div>
<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
<button *ngIf="action !=='edit'"
md-raised-button
@ -123,4 +124,5 @@
<md-icon>delete</md-icon>
</button>
</div>
</div>

12
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 {
.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;

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

@ -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()
{

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

@ -1,4 +1,5 @@
<md-toolbar md-dialog-title class="mat-accent m-0">
<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"
@ -7,9 +8,9 @@
<md-icon>close</md-icon>
</button>
</div>
</md-toolbar>
</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>
@ -82,9 +83,9 @@
</div>
</div>
</form>
</div>
</div>
<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
<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])"
@ -106,4 +107,5 @@
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;
}
}

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

@ -1,4 +1,5 @@
<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">
@ -121,9 +122,9 @@
</button>
<!-- / CLOSE DIALOG BUTTON -->
</div>
</md-toolbar>
</md-toolbar>
<div *ngIf="card" md-dialog-content class="p-24 m-0" fusePerfectScrollbar>
<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">
@ -449,4 +450,5 @@
</div>
<!-- / SECTIONS -->
</div>
</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 {