mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-12-19 03:07:07 +00:00
Angular Material Update: 2.0.0-beta.10
This commit is contained in:
@@ -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(() => {
|
||||
|
||||
@@ -32,7 +32,7 @@ import {
|
||||
MdTableModule,
|
||||
MdTabsModule
|
||||
} from '@angular/material';
|
||||
import { CdkTableModule } from '@angular/cdk';
|
||||
import { CdkTableModule } from '@angular/cdk/table';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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%;
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user