Angular Material Update: 2.0.0-beta.10

This commit is contained in:
mustafahlvc
2017-08-30 10:37:25 +03:00
parent 49af06cdbd
commit a56e9e6d10
16 changed files with 163 additions and 178 deletions

View File

@@ -35,13 +35,17 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe
{
this.isLockedOpen = true;
this.mdSidenav.mode = 'side';
this.mdSidenav.open();
setTimeout(() => {
this.mdSidenav.open();
});
}
else
{
this.isLockedOpen = false;
this.mdSidenav.mode = 'over';
this.mdSidenav.close();
setTimeout(() => {
this.mdSidenav.close();
});
}
this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {

View File

@@ -32,7 +32,7 @@ import {
MdTableModule,
MdTabsModule
} from '@angular/material';
import { CdkTableModule } from '@angular/cdk';
import { CdkTableModule } from '@angular/cdk/table';
@NgModule({
imports: [

View File

@@ -144,7 +144,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.md-stop-transition {
~ .mat-sidenav-content {
~ .mat-sidenav-content,
~ .mat-drawer-content {
transition: none;
}
}
@@ -161,7 +162,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
}
}
> .mat-sidenav-content {
> .mat-sidenav-content,
> .mat-drawer-content {
display: flex;
flex: 1;
height: auto;
@@ -229,7 +231,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.md-is-locked-open {
~ .mat-sidenav-content {
~ .mat-sidenav-content,
~ .mat-drawer-content {
margin-left: 0 !important;
.center {
@@ -252,7 +255,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.md-is-locked-open {
~ .mat-sidenav-content {
~ .mat-sidenav-content,
~ .mat-drawer-content {
margin-right: 0 !important;
.center {
@@ -301,7 +305,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
> md-sidenav-container {
flex: 1 0 auto;
> .mat-sidenav-content {
> .mat-sidenav-content,
> .mat-drawer-content {
flex: 1 0 auto;
max-height: none;
@@ -325,7 +330,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
}
}
> .mat-sidenav-content {
> .mat-sidenav-content,
> .mat-drawer-content {
display: flex;
height: auto;
@@ -368,7 +374,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
&.md-stop-transition {
~ .mat-sidenav-content {
~ .mat-sidenav-content,
~ .mat-drawer-content {
transition: none;
}
}
@@ -378,7 +385,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
}
}
> .mat-sidenav-content {
> .mat-sidenav-content,
> .mat-drawer-content {
display: flex;
flex: 1;
height: auto;
@@ -472,7 +480,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
> md-sidenav-container {
flex: 1 0 auto !important;
> .mat-sidenav-content {
> .mat-sidenav-content,
> .mat-drawer-content {
flex: 1 0 auto;
> .center {
@@ -499,7 +508,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
> md-sidenav-container {
> .mat-sidenav-content {
> .mat-sidenav-content,
> .mat-drawer-content {
.center {
margin: 0 16px;

View File

@@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { NavigationStart, Router } from '@angular/router';
import { Platform } from '@angular/cdk';
import { Platform } from '@angular/cdk/platform';
@Injectable()
export class FuseConfigService

View File

@@ -58,29 +58,23 @@
<div fxFlex="1 0 auto" fxLayout="row">
<md-input-container class="mr-24">
<input mdInput
name="start"
formControlName="start"
[mdDatepicker]="startDatePicker"
placeholder="Start Date">
<button mdSuffix [mdDatepickerToggle]="startDatePicker"></button>
</md-input-container>
<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-input-container class="mr-24">
<input mdInput
name="end"
formControlName="end"
[mdDatepicker]="endDatePicker"
placeholder="End Date">
<button mdSuffix [mdDatepickerToggle]="endDatePicker"></button>
</md-input-container>
<md-datepicker #endDatePicker></md-datepicker>
<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">

View File

@@ -19,7 +19,8 @@
width: 100%;
background: transparent;
.mat-sidenav-content {
> .mat-sidenav-content,
> .mat-drawer-content {
display: flex;
flex: 1 0 auto;
min-height: 100%;

View File

@@ -69,14 +69,11 @@
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-input-container fxFlex class="mr-24">
<button mdSuffix [mdDatepickerToggle]="birthdayDatePicker"></button>
<input mdInput
name="birthday" formControlName="birthday"
[mdDatepicker]="birthdayDatePicker"
placeholder="Birthday">
</md-input-container>
<md-datepicker #birthdayDatePicker></md-datepicker>
<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">

View File

@@ -1,11 +1,11 @@
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { ContactsService } from '../contacts.service';
import { DataSource } from '@angular/cdk';
import { Observable } from 'rxjs/Observable';
import { FuseContactsContactFormDialogComponent } from '../contact-form/contact-form.component';
import { MdDialog, MdDialogRef } from '@angular/material';
import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component';
import { FormGroup } from '@angular/forms';
import { DataSource } from '@angular/cdk/collections';
@Component({
selector : 'fuse-contacts-contact-list',

View File

@@ -3,7 +3,7 @@ import { ProjectsDashboardService } from './projects.service';
import * as shape from 'd3-shape';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { DataSource } from '@angular/cdk';
import { DataSource } from '@angular/cdk/collections';
@Component({
selector : 'fuse-project',

View File

@@ -1,7 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { FileManagerService } from '../file-manager.service';
import { DataSource } from '@angular/cdk';
import { Observable } from 'rxjs/Observable';
import { DataSource } from '@angular/cdk/collections';
@Component({
selector : 'fuse-file-list',

View File

@@ -19,7 +19,8 @@
}
}
.mat-sidenav-content {
> .mat-sidenav-content,
> .mat-drawer-content {
z-index: 1;
.center {
@@ -30,7 +31,7 @@
min-height: 160px;
max-height: 160px;
@include media-breakpoint-down('sm'){
@include media-breakpoint-down('sm') {
height: 120px;
min-height: 120px;
max-height: 120px;

View File

@@ -70,25 +70,18 @@
<div fxFlexFill fxLayout="row">
<md-input-container fxFlex class="mr-16">
<input mdInput
name="start"
formControlName="startDate"
[mdDatepicker]="startDatePicker"
placeholder="Start Date">
<button mdSuffix [mdDatepickerToggle]="startDatePicker"></button>
</md-input-container>
<md-datepicker #startDatePicker></md-datepicker>
<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-form-field fxFlex>
<input mdInput [mdDatepicker]="dueDatePicker" placeholder="Due Date">
<md-datepicker-toggle mdSuffix [for]="dueDatePicker"></md-datepicker-toggle>
<md-datepicker #dueDatePicker></md-datepicker>
</md-form-field>
<md-input-container fxFlex>
<input mdInput
name="dueDate"
formControlName="dueDate"
[mdDatepicker]="dueDatePicker"
placeholder="Due Date">
<button mdSuffix [mdDatepickerToggle]="dueDatePicker"></button>
</md-input-container>
<md-datepicker #dueDatePicker></md-datepicker>
</div>
<md-input-container class="" fxFill>

View File

@@ -1,6 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { SearchService } from '../../search.service';
import { DataSource } from '@angular/cdk';
import { DataSource } from '@angular/cdk/collections';
@Component({
selector : 'fuse-search-table',

View File

@@ -23,7 +23,8 @@ fuse-main {
display: flex;
flex: 1;
> .mat-sidenav-content {
> .mat-sidenav-content,
> .mat-drawer-content {
display: flex;
flex: 1;
overflow: hidden;