mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Lots of Responsive refinements applied espacially for the apps
+ responsive variations of spacing class helpers added.
This commit is contained in:
mustafahlvc
parent
f38cde844a
commit
874d401bac
|
|
@ -1,14 +1,26 @@
|
|||
// Media step breakpoint mixin based on Angular Material lib
|
||||
$breakpoints: (
|
||||
xs: 'screen and (max-width: 599px)',
|
||||
gt-xs: 'screen and (min-width: 600px)',
|
||||
sm: 'screen and (min-width: 600px) and (max-width: 959px)',
|
||||
gt-sm: 'screen and (min-width: 960px)',
|
||||
md: 'screen and (min-width: 960px) and (max-width: 1279px)',
|
||||
gt-md: 'screen and (min-width: 1280px)',
|
||||
lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
|
||||
gt-lg: 'screen and (min-width: 1920px)',
|
||||
xl: 'screen and (min-width: 1920px) and (max-width: 5000px)'
|
||||
xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
|
||||
lt-sm: 'screen and (max-width: 599px)',
|
||||
lt-md: 'screen and (max-width: 959px)',
|
||||
lt-lg: 'screen and (max-width: 1279px)',
|
||||
lt-xl: 'screen and (max-width: 1919px)',
|
||||
gt-xs: 'screen and (min-width: 600px)',
|
||||
gt-sm: 'screen and (min-width: 960px)',
|
||||
gt-md: 'screen and (min-width: 1280px)',
|
||||
gt-lg: 'screen and (min-width: 1920px)'
|
||||
) !default;
|
||||
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 600px,
|
||||
md: 960px,
|
||||
lg: 1280px,
|
||||
xl: 1920px
|
||||
) !default;
|
||||
|
||||
@mixin media-breakpoint($breakpointName) {
|
||||
|
|
@ -22,3 +34,94 @@ $breakpoints: (
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// >> breakpoint-next(sm)
|
||||
// md
|
||||
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// md
|
||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
|
||||
// md
|
||||
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
||||
$n: index($breakpoint-names, $name);
|
||||
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
||||
}
|
||||
|
||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
//
|
||||
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 576px
|
||||
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: map-get($breakpoints, $name);
|
||||
@return if($min != 0, $min, null);
|
||||
}
|
||||
|
||||
// Maximum breakpoint width. Null for the largest (last) breakpoint.
|
||||
// The maximum value is calculated as the minimum of the next one less 0.1.
|
||||
//
|
||||
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 767px
|
||||
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
||||
$next: breakpoint-next($name, $breakpoints);
|
||||
@return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
|
||||
}
|
||||
|
||||
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
|
||||
// Useful for making responsive utilities.
|
||||
//
|
||||
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// "" (Returns a blank string)
|
||||
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// "-sm"
|
||||
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
|
||||
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
|
||||
}
|
||||
|
||||
|
||||
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and wider.
|
||||
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
@if $min {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and narrower.
|
||||
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
@if $max {
|
||||
@media (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media that spans multiple breakpoint widths.
|
||||
// Makes the @content apply between the min and max breakpoints
|
||||
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
|
||||
$min: breakpoint-max($lower, $breakpoints);
|
||||
$max: breakpoint-max($upper, $breakpoints);
|
||||
|
||||
@media (min-width: $min) and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media between the breakpoint's minimum and maximum widths.
|
||||
// No minimum for the smallest breakpoint, and no maximum for the largest one.
|
||||
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
|
||||
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
|
||||
@media (min-width: $min) and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,13 +28,20 @@
|
|||
// ######################
|
||||
// SPACING HELPERS
|
||||
// ######################
|
||||
@each $prop, $abbrev in (margin: m, padding: p) {
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@each $prop, $abbrev in (margin: m, padding: p) {
|
||||
|
||||
@for $index from 0 through 64 {
|
||||
$size: $index * 4;
|
||||
$length: #{$size}px;
|
||||
|
||||
.#{$abbrev}-#{$size} {
|
||||
.#{$abbrev}#{$infix}-#{$size} {
|
||||
#{$prop}: $length !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -43,12 +50,12 @@
|
|||
$size: $index * 4;
|
||||
$length: #{$size}px;
|
||||
|
||||
.#{$abbrev}x-#{$size} {
|
||||
.#{$abbrev}x#{$infix}-#{$size} {
|
||||
#{$prop}-right: $length !important;
|
||||
#{$prop}-left: $length !important;
|
||||
}
|
||||
|
||||
.#{$abbrev}y-#{$size} {
|
||||
.#{$abbrev}y#{$infix}-#{$size} {
|
||||
#{$prop}-top: $length !important;
|
||||
#{$prop}-bottom: $length !important;
|
||||
}
|
||||
|
|
@ -58,56 +65,64 @@
|
|||
$size: $index * 4;
|
||||
$length: #{$size}px;
|
||||
|
||||
.#{$abbrev}t-#{$size} {
|
||||
.#{$abbrev}t#{$infix}-#{$size} {
|
||||
#{$prop}-top: $length !important;
|
||||
}
|
||||
|
||||
.#{$abbrev}r-#{$size} {
|
||||
.#{$abbrev}r#{$infix}-#{$size} {
|
||||
#{$prop}-right: $length !important;
|
||||
}
|
||||
|
||||
.#{$abbrev}b-#{$size} {
|
||||
.#{$abbrev}b#{$infix}-#{$size} {
|
||||
#{$prop}-bottom: $length !important;
|
||||
}
|
||||
|
||||
.#{$abbrev}l-#{$size} {
|
||||
.#{$abbrev}l#{$infix}-#{$size} {
|
||||
#{$prop}-left: $length !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Some special margin utils for flex alignments
|
||||
.m-auto {
|
||||
@if ($abbrev == m) {
|
||||
@for $index from 0 through 64 {
|
||||
$size: $index * 4;
|
||||
$length: #{$size}px;
|
||||
|
||||
// Some special margin utils for flex alignments
|
||||
.m#{$infix}-auto {
|
||||
margin: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mt-auto {
|
||||
.mt#{$infix}-auto {
|
||||
margin-top: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mr-auto {
|
||||
.mr#{$infix}-auto {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mb-auto {
|
||||
.mb#{$infix}-auto {
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ml-auto {
|
||||
.ml#{$infix}-auto {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
.mx#{$infix}-auto {
|
||||
margin-right: auto !important;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.my-auto {
|
||||
.my#{$infix}-auto {
|
||||
margin-top: auto !important;
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Border helpers
|
||||
$border-style: 1px solid rgba(0, 0, 0, 0.12);
|
||||
|
||||
|
|
|
|||
|
|
@ -79,7 +79,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
|
|||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: mat-color($background, background);
|
||||
@include mat-elevation(7);
|
||||
|
||||
.toolbar {
|
||||
|
|
@ -96,7 +95,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
|
|||
display: flex;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
background: mat-color($background, background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -186,7 +184,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
|
|||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: mat-color($background, background);
|
||||
@include mat-elevation(7);
|
||||
|
||||
.toolbar {
|
||||
|
|
@ -209,7 +206,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
|
|||
.content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
background: mat-color($background, background);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -402,7 +398,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
|
|||
@include mat-elevation(7);
|
||||
|
||||
.content {
|
||||
background: mat-color($background, background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ $mat-fusedark: (
|
|||
|
||||
// Palettes
|
||||
$primary: mat-palette($mat-fusedark);
|
||||
$accent: mat-palette($mat-blue, 600, 400, 700);
|
||||
$accent: mat-palette($mat-light-blue, 600, 400, 700);
|
||||
$warn: mat-palette($mat-red);
|
||||
|
||||
// Create the theme object (a Sass map containing all of the palettes).
|
||||
|
|
|
|||
|
|
@ -14,23 +14,6 @@ export class FuseMatchMedia
|
|||
{
|
||||
this.activeMediaQuery = '';
|
||||
|
||||
/*this.onMediaChange = Observable.create((observer: Observer<string>) =>
|
||||
{
|
||||
this.observableMedia.subscribe((change: MediaChange) =>
|
||||
{
|
||||
if ( this.activeMediaQuery !== change.mqAlias )
|
||||
{
|
||||
this.activeMediaQuery = change.mqAlias;
|
||||
observer.next(this.activeMediaQuery);
|
||||
}
|
||||
});
|
||||
});*/
|
||||
|
||||
/*this.onMediaChange = Observable.create((observer: Observer<string>) =>
|
||||
{
|
||||
|
||||
});*/
|
||||
|
||||
this.observableMedia.subscribe((change: MediaChange) =>
|
||||
{
|
||||
if ( this.activeMediaQuery !== change.mqAlias )
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<div class="header-top" fxLayout="row" fxLayoutAlign="space-between center" fxLayout.xs="column">
|
||||
|
||||
<div class="logo" fxLayout="row" fxLayoutAlign="start center">
|
||||
<div class="logo mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<md-icon class="logo-icon">today</md-icon>
|
||||
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
</div>
|
||||
|
||||
<!-- ADD EVENT BUTTON -->
|
||||
<button md-fab class="add-event-button md-warn" (click)="addEvent($event)" aria-label="Add event">
|
||||
<button md-fab class="add-event-button mat-warn" (click)="addEvent($event)" aria-label="Add event">
|
||||
<md-icon>add</md-icon>
|
||||
</button>
|
||||
<!-- / ADD EVENT BUTTON -->
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.event-form-dialog {
|
||||
|
||||
.mat-dialog-container {
|
||||
padding: 0;
|
||||
max-width: 720px;
|
||||
width: 720px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@ import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
|
|||
import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
|
||||
import { CalendarEvent } from 'angular-calendar';
|
||||
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
|
||||
import 'rxjs/Rx';
|
||||
import { CalendarEventModel } from '../event.model';
|
||||
import { MatColors } from '../../../../../core/matColors';
|
||||
import 'rxjs/Rx';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-calendar-event-form-dialog',
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
|
||||
.mat-dialog-container {
|
||||
padding: 0;
|
||||
max-width: 400px;
|
||||
width: 400px;
|
||||
|
||||
.toolbar-bottom {
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
<div class="widget-group p-12" fxLayout="row" fxFlex="100" fxLayoutWrap>
|
||||
|
||||
<!-- WIDGET 1 -->
|
||||
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.sm="50" fxFlex.gt-sm="25">
|
||||
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
|
||||
|
||||
<!-- Front -->
|
||||
<div class="fuse-widget-front md-white-bg mat-elevation-z2">
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
<!-- / WIDGET 1 -->
|
||||
|
||||
<!-- WIDGET 2 -->
|
||||
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.sm="50" fxFlex.gt-sm="25">
|
||||
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
|
||||
|
||||
<!-- Front -->
|
||||
<div class="fuse-widget-front md-white-bg mat-elevation-z2">
|
||||
|
|
@ -135,7 +135,7 @@
|
|||
<!-- / WIDGET 2 -->
|
||||
|
||||
<!-- WIDGET 3 -->
|
||||
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.sm="50" fxFlex.gt-sm="25">
|
||||
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
|
||||
|
||||
<!-- Front -->
|
||||
<div class="fuse-widget-front md-white-bg mat-elevation-z2">
|
||||
|
|
@ -177,7 +177,7 @@
|
|||
<!-- / WIDGET 3 -->
|
||||
|
||||
<!-- WIDGET 4 -->
|
||||
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.sm="50" fxFlex.gt-sm="25">
|
||||
<fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
|
||||
|
||||
<!-- Front -->
|
||||
<div class="fuse-widget-front md-white-bg mat-elevation-z2">
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
<!-- Type Column -->
|
||||
<ng-container cdkColumnDef="icon">
|
||||
<md-header-cell *cdkHeaderCellDef></md-header-cell>
|
||||
<md-cell *cdkCellDef="let row">
|
||||
<md-header-cell *cdkHeaderCellDef fxFlex="64px"></md-header-cell>
|
||||
<md-cell *cdkCellDef="let row" fxFlex="64px">
|
||||
<md-icon class="type-icon" [class]="row.type"></md-icon>
|
||||
</md-cell>
|
||||
</ng-container>
|
||||
|
|
@ -16,32 +16,32 @@
|
|||
|
||||
<!-- Type Column -->
|
||||
<ng-container cdkColumnDef="type">
|
||||
<md-header-cell *cdkHeaderCellDef>Type</md-header-cell>
|
||||
<md-cell *cdkCellDef="let row"> {{row.type}}</md-cell>
|
||||
<md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Type</md-header-cell>
|
||||
<md-cell *cdkCellDef="let row" fxHide fxShow.gt-md> {{row.type}}</md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Owner Column -->
|
||||
<ng-container cdkColumnDef="owner">
|
||||
<md-header-cell *cdkHeaderCellDef>Owner</md-header-cell>
|
||||
<md-cell *cdkCellDef="let row"> {{row.owner}}</md-cell>
|
||||
<md-header-cell *cdkHeaderCellDef fxHide.xs>Owner</md-header-cell>
|
||||
<md-cell *cdkCellDef="let row" fxHide.xs> {{row.owner}}</md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Size Column -->
|
||||
<ng-container cdkColumnDef="size">
|
||||
<md-header-cell *cdkHeaderCellDef>Size</md-header-cell>
|
||||
<md-cell *cdkCellDef="let row">{{row.size === '' ? '-': row.size}}</md-cell>
|
||||
<md-header-cell *cdkHeaderCellDef fxHide.xs>Size</md-header-cell>
|
||||
<md-cell *cdkCellDef="let row" fxHide.xs>{{row.size === '' ? '-': row.size}}</md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Modified Column -->
|
||||
<ng-container cdkColumnDef="modified">
|
||||
<md-header-cell *cdkHeaderCellDef>Modified</md-header-cell>
|
||||
<md-cell *cdkCellDef="let row"> {{row.modified}}</md-cell>
|
||||
<md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Modified</md-header-cell>
|
||||
<md-cell *cdkCellDef="let row" fxHide fxShow.gt-md>{{row.modified}}</md-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Detail Button Column -->
|
||||
<ng-container cdkColumnDef="detail-button">
|
||||
<md-header-cell *cdkHeaderCellDef></md-header-cell>
|
||||
<md-cell *cdkCellDef="let row">
|
||||
<md-header-cell *cdkHeaderCellDef fxFlex="48px" fxHide.gt-md></md-header-cell>
|
||||
<md-cell *cdkCellDef="let row" fxFlex="48px" fxHide.gt-md>
|
||||
<button md-icon-button class="sidenav-toggle"
|
||||
fuseMdSidenavToggler="file-manager-right-sidenav">
|
||||
<md-icon>info</md-icon>
|
||||
|
|
|
|||
|
|
@ -14,16 +14,9 @@
|
|||
.mat-cell {
|
||||
|
||||
&.mat-column-icon {
|
||||
flex: 0 1 auto;
|
||||
padding: 0 24px 0 0;
|
||||
}
|
||||
|
||||
&.mat-column-detail-button {
|
||||
flex: 0 1 auto;
|
||||
padding: 0 24px 0 0;
|
||||
@include media-breakpoint('gt-md') {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,8 +45,8 @@
|
|||
<!-- ADD FILE BUTTON -->
|
||||
<div class="file-uploader">
|
||||
<input hidden type="file" #fileInput/>
|
||||
<button type="submit" md-fab
|
||||
class="add-file-button mat-accent"
|
||||
<button md-fab
|
||||
class="add-file-button mat-warn"
|
||||
(click)="fileInput.click()"
|
||||
aria-label="Add file">
|
||||
<md-icon>add</md-icon>
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
<!-- / HEADER -->
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content" perfect-scrollbar>
|
||||
<div class="content md-white-bg" perfect-scrollbar>
|
||||
<fuse-file-list></fuse-file-list>
|
||||
</div>
|
||||
<!-- / CONTENT -->
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<!-- / SIDENAV HEADER -->
|
||||
|
||||
<!-- SIDENAV CONTENT -->
|
||||
<div class="content p-24" perfect-scrollbar>
|
||||
<div class="content p-24 md-white-bg" perfect-scrollbar>
|
||||
|
||||
<div class="file-details">
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
.mail-compose-dialog {
|
||||
.mat-dialog-container {
|
||||
padding: 0;
|
||||
max-width: 720px;
|
||||
width: 720px;
|
||||
|
||||
.attachment-list {
|
||||
|
|
|
|||
|
|
@ -4,9 +4,6 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
width: 50%;
|
||||
min-width: 50%;
|
||||
max-width: 50%;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
|
||||
|
|
|
|||
|
|
@ -3,9 +3,6 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
width: 50%;
|
||||
min-width: 50%;
|
||||
max-width: 50%;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
border-right: 1px solid rgba(0,0,0,.12);
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<md-icon>menu</md-icon>
|
||||
</button>
|
||||
|
||||
<div class="search" flex fxLayout="row" fxLayoutAlign="start center">
|
||||
<div class="search md-white-bg" flex fxLayout="row" fxLayoutAlign="start center">
|
||||
<md-icon>search</md-icon>
|
||||
<input [formControl]="searchInput" placeholder="Search for an e-mail or contact" fxFlex>
|
||||
</div>
|
||||
|
|
@ -37,11 +37,12 @@
|
|||
<!-- / CONTENT HEADER -->
|
||||
|
||||
<!-- CONTENT CARD -->
|
||||
<div class="content-card">
|
||||
<div class="content-card md-white-bg" [ngClass]="{'current-mail-selected':currentMail}">
|
||||
|
||||
<!-- CONTENT TOOLBAR -->
|
||||
<div class="toolbar px-24 py-8">
|
||||
|
||||
<div *ngIf="!currentMail">
|
||||
<md-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedMails"
|
||||
[indeterminate]="isIndeterminate"></md-checkbox>
|
||||
|
||||
|
|
@ -82,16 +83,22 @@
|
|||
(click)="toggleLabelOnSelectedMails(label.id)">{{label.title}}
|
||||
</button>
|
||||
</md-menu>
|
||||
</div>
|
||||
|
||||
<div *ngIf="currentMail">
|
||||
<button md-icon-button (click)="deSelectCurrentMail()">
|
||||
<md-icon>arrow_back</md-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / CONTENT TOOLBAR -->
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content">
|
||||
<div class="content" fxLayoutAlign="row">
|
||||
|
||||
<fuse-mail-list perfect-scrollbar></fuse-mail-list>
|
||||
<fuse-mail-list perfect-scrollbar fxFlex></fuse-mail-list>
|
||||
|
||||
<fuse-mail-details perfect-scrollbar></fuse-mail-details>
|
||||
<fuse-mail-details perfect-scrollbar fxFlex></fuse-mail-details>
|
||||
|
||||
</div>
|
||||
<!-- / CONTENT -->
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@
|
|||
height: 56px;
|
||||
line-height: 56px;
|
||||
padding: 18px;
|
||||
background: #FFFFFF;
|
||||
|
||||
input {
|
||||
height: 56px;
|
||||
|
|
@ -36,6 +35,35 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-card {
|
||||
|
||||
@include media-breakpoint(xs) {
|
||||
|
||||
fuse-mail-list,
|
||||
fuse-mail-details {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
|
||||
fuse-mail-details {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&.current-mail-selected {
|
||||
|
||||
.content {
|
||||
|
||||
fuse-mail-list {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
fuse-mail-details {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
|
|||
import { MailService } from './mail.service';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { FormControl } from '@angular/forms';
|
||||
import { Mail } from './mail.model';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-mail',
|
||||
|
|
@ -16,11 +17,13 @@ export class MailComponent implements OnInit, OnDestroy
|
|||
filters: any[];
|
||||
labels: any[];
|
||||
searchInput: FormControl;
|
||||
currentMail: Mail;
|
||||
|
||||
onSelectedMailsChanged: Subscription;
|
||||
onFoldersChanged: Subscription;
|
||||
onFiltersChanged: Subscription;
|
||||
onLabelsChanged: Subscription;
|
||||
onCurrentMailChanged: Subscription;
|
||||
|
||||
constructor(private mailService: MailService)
|
||||
{
|
||||
|
|
@ -57,6 +60,18 @@ export class MailComponent implements OnInit, OnDestroy
|
|||
this.labels = this.mailService.labels;
|
||||
});
|
||||
|
||||
this.onCurrentMailChanged =
|
||||
this.mailService.onCurrentMailChanged
|
||||
.subscribe(currentMail => {
|
||||
if ( !currentMail )
|
||||
{
|
||||
this.currentMail = null;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.currentMail = currentMail;
|
||||
}
|
||||
});
|
||||
|
||||
/*this.searchInput.valueChanges
|
||||
.debounceTime(300)
|
||||
|
|
@ -72,6 +87,8 @@ export class MailComponent implements OnInit, OnDestroy
|
|||
this.onFoldersChanged.unsubscribe();
|
||||
this.onFiltersChanged.unsubscribe();
|
||||
this.onLabelsChanged.unsubscribe();
|
||||
this.onCurrentMailChanged.unsubscribe();
|
||||
|
||||
}
|
||||
|
||||
toggleSelectAll()
|
||||
|
|
@ -89,6 +106,11 @@ export class MailComponent implements OnInit, OnDestroy
|
|||
this.mailService.deselectMails();
|
||||
}
|
||||
|
||||
deSelectCurrentMail()
|
||||
{
|
||||
this.mailService.onCurrentMailChanged.next(null);
|
||||
}
|
||||
|
||||
toggleLabelOnSelectedMails(labelId)
|
||||
{
|
||||
this.mailService.toggleLabelOnSelectedMails(labelId);
|
||||
|
|
|
|||
|
|
@ -4,11 +4,7 @@
|
|||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
min-width: 50%;
|
||||
max-width: 50%;
|
||||
overflow-y: auto;
|
||||
background: #FFFFFF;
|
||||
padding: 24px;
|
||||
|
||||
.todo-header {
|
||||
|
|
|
|||
|
|
@ -2,11 +2,7 @@
|
|||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
min-width: 50%;
|
||||
max-width: 50%;
|
||||
overflow-y: auto;
|
||||
background: #FAFAFA;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
border-right: 1px solid rgba(0, 0, 0, .12);
|
||||
|
|
|
|||
|
|
@ -18,9 +18,11 @@ export class TodoListComponent implements OnInit, OnDestroy
|
|||
onTodosChanged: Subscription;
|
||||
onCurrentTodoChanged: Subscription;
|
||||
|
||||
constructor(private route: ActivatedRoute,
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private todoService: TodoService,
|
||||
private location: Location)
|
||||
private location: Location
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
|
|
@ -54,6 +56,10 @@ export class TodoListComponent implements OnInit, OnDestroy
|
|||
{
|
||||
this.location.go('apps/todo/filter/' + filterHandle);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.location.go('apps/todo/all');
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
<!-- CONTENT HEADER -->
|
||||
<div class="header" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||
<div class="search-wrapper md-white-bg" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<button md-button class="mat-icon-button sidenav-toggle"
|
||||
fuseMdSidenavToggler="carded-left-sidenav"
|
||||
|
|
@ -37,11 +37,11 @@
|
|||
<!-- / CONTENT HEADER -->
|
||||
|
||||
<!-- CONTENT CARD -->
|
||||
<div class="content-card">
|
||||
<div class="content-card md-white-bg" [ngClass]="{'current-todo-selected':currentTodo}">
|
||||
|
||||
<!-- CONTENT TOOLBAR -->
|
||||
<div class="toolbar px-24 py-8">
|
||||
|
||||
<div *ngIf="!currentTodo">
|
||||
<md-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedTodos"
|
||||
[indeterminate]="isIndeterminate"></md-checkbox>
|
||||
|
||||
|
|
@ -69,16 +69,22 @@
|
|||
{{tag.title}}
|
||||
</button>
|
||||
</md-menu>
|
||||
</div>
|
||||
|
||||
<div *ngIf="currentTodo">
|
||||
<button md-icon-button (click)="deSelectCurrentTodo()">
|
||||
<md-icon>arrow_back</md-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / CONTENT TOOLBAR -->
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="content">
|
||||
<div class="content" fxFlexAlign="row">
|
||||
|
||||
<fuse-todo-list perfect-scrollbar></fuse-todo-list>
|
||||
<fuse-todo-list perfect-scrollbar fxFlex></fuse-todo-list>
|
||||
|
||||
<fuse-todo-details perfect-scrollbar></fuse-todo-details>
|
||||
<fuse-todo-details perfect-scrollbar fxFlex></fuse-todo-details>
|
||||
|
||||
</div>
|
||||
<!-- / CONTENT -->
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
margin: 0;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: #FFF;
|
||||
border-radius: 0;
|
||||
border-right: 1px solid rgba(0, 0, 0, .12);
|
||||
}
|
||||
|
|
@ -24,7 +23,6 @@
|
|||
height: 56px;
|
||||
line-height: 56px;
|
||||
padding: 18px;
|
||||
background: #FFFFFF;
|
||||
|
||||
input {
|
||||
height: 56px;
|
||||
|
|
@ -36,6 +34,34 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-card{
|
||||
@include media-breakpoint-down(lg) {
|
||||
|
||||
fuse-todo-list,
|
||||
fuse-todo-details {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
|
||||
fuse-todo-details {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&.current-todo-selected {
|
||||
|
||||
.content {
|
||||
|
||||
fuse-todo-list {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
fuse-todo-details {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,10 +16,12 @@ export class TodoComponent implements OnInit, OnDestroy
|
|||
filters: any[];
|
||||
tags: any[];
|
||||
searchInput: FormControl;
|
||||
currentTodo: Todo;
|
||||
|
||||
onSelectedTodosChanged: Subscription;
|
||||
onFiltersChanged: Subscription;
|
||||
onTagsChanged: Subscription;
|
||||
onCurrentTodoChanged: Subscription;
|
||||
|
||||
constructor(private todoService: TodoService)
|
||||
{
|
||||
|
|
@ -57,6 +59,24 @@ export class TodoComponent implements OnInit, OnDestroy
|
|||
.subscribe(searchText => {
|
||||
this.todoService.onSearchTextChanged.next(searchText);
|
||||
});
|
||||
|
||||
this.onCurrentTodoChanged =
|
||||
this.todoService.onCurrentTodoChanged
|
||||
.subscribe(currentTodo => {
|
||||
if ( !currentTodo )
|
||||
{
|
||||
this.currentTodo = null;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.currentTodo = currentTodo;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deSelectCurrentTodo()
|
||||
{
|
||||
this.todoService.onCurrentTodoChanged.next(null);
|
||||
}
|
||||
|
||||
ngOnDestroy()
|
||||
|
|
@ -64,6 +84,7 @@ export class TodoComponent implements OnInit, OnDestroy
|
|||
this.onSelectedTodosChanged.unsubscribe();
|
||||
this.onFiltersChanged.unsubscribe();
|
||||
this.onTagsChanged.unsubscribe();
|
||||
this.onCurrentTodoChanged.unsubscribe();
|
||||
}
|
||||
|
||||
toggleSelectAll()
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ fuse-navbar {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint('xs') {
|
||||
@include media-breakpoint('lt-md') {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export class FuseNavbarComponent implements OnInit, OnDestroy
|
|||
.subscribe((mediaStep) => {
|
||||
setTimeout(() => {
|
||||
|
||||
if ( mediaStep === 'xs' )
|
||||
if ( this.media.isActive('lt-md') )
|
||||
{
|
||||
this.closeBar();
|
||||
this.deActivateFolded();
|
||||
|
|
@ -60,7 +60,7 @@ export class FuseNavbarComponent implements OnInit, OnDestroy
|
|||
this.initialized = true;
|
||||
});
|
||||
|
||||
if ( this.media.isActive('xs') )
|
||||
if ( this.media.isActive('lt-md') )
|
||||
{
|
||||
this.closeBar();
|
||||
this.deActivateFolded();
|
||||
|
|
|
|||
|
|
@ -4,17 +4,17 @@
|
|||
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||
|
||||
<button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="openBar" fxHide.gt-xs>
|
||||
<button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="openBar" fxHide.gt-sm fxFlex="56px">
|
||||
<md-icon>menu</md-icon>
|
||||
</button>
|
||||
|
||||
<div class="toolbar-separator" fxHide.gt-xs></div>
|
||||
<div class="toolbar-separator" fxHide.gt-sm></div>
|
||||
|
||||
<div class="px-16">
|
||||
<div class="px-16" fxHide.lt-md>
|
||||
<fuse-shortcuts></fuse-shortcuts>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-separator"></div>
|
||||
<div class="toolbar-separator" fxHide.lt-md></div>
|
||||
</div>
|
||||
|
||||
<div class="" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="start center">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user