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

Lots of Responsive refinements applied espacially for the apps

Browse Source 
+ responsive variations of spacing class helpers added.
This commit is contained in:
mustafahlvc 2017-08-16 15:19:26 +03:00
parent f38cde844a
commit 874d401bac
29 changed files with 417 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
src/app/core/scss/mixins/_breakpoints.scss
View File

@ -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;
}
}

147
src/app/core/scss/partials/_helpers.scss
View File

@ -28,86 +28,101 @@
// ######################
// SPACING HELPERS
// ######################
@each $prop, $abbrev in (margin: m, padding: p) {
@for $index from 0 through 64 {
$size: $index * 4;
$length: #{$size}px;
@each $breakpoint in map-keys($grid-breakpoints) {
.#{$abbrev}-#{$size} {
#{$prop}: $length !important;
}
}
@include media-breakpoint-up($breakpoint) {
@for $index from 0 through 64 {
$size: $index * 4;
$length: #{$size}px;
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.#{$abbrev}x-#{$size} {
#{$prop}-right: $length !important;
#{$prop}-left: $length !important;
}
@each $prop, $abbrev in (margin: m, padding: p) {
.#{$abbrev}y-#{$size} {
#{$prop}-top: $length !important;
#{$prop}-bottom: $length !important;
}
}
@for $index from 0 through 64 {
$size: $index * 4;
$length: #{$size}px;
@for $index from 0 through 64 {
$size: $index * 4;
$length: #{$size}px;
.#{$abbrev}#{$infix}-#{$size} {
#{$prop}: $length !important;
}
}
.#{$abbrev}t-#{$size} {
#{$prop}-top: $length !important;
}
@for $index from 0 through 64 {
$size: $index * 4;
$length: #{$size}px;
.#{$abbrev}r-#{$size} {
#{$prop}-right: $length !important;
}
.#{$abbrev}x#{$infix}-#{$size} {
#{$prop}-right: $length !important;
#{$prop}-left: $length !important;
}
.#{$abbrev}b-#{$size} {
#{$prop}-bottom: $length !important;
}
.#{$abbrev}y#{$infix}-#{$size} {
#{$prop}-top: $length !important;
#{$prop}-bottom: $length !important;
}
}
.#{$abbrev}l-#{$size} {
#{$prop}-left: $length !important;
@for $index from 0 through 64 {
$size: $index * 4;
$length: #{$size}px;
.#{$abbrev}t#{$infix}-#{$size} {
#{$prop}-top: $length !important;
}
.#{$abbrev}r#{$infix}-#{$size} {
#{$prop}-right: $length !important;
}
.#{$abbrev}b#{$infix}-#{$size} {
#{$prop}-bottom: $length !important;
}
.#{$abbrev}l#{$infix}-#{$size} {
#{$prop}-left: $length !important;
}
}
@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#{$infix}-auto {
margin-top: auto !important;
}
.mr#{$infix}-auto {
margin-right: auto !important;
}
.mb#{$infix}-auto {
margin-bottom: auto !important;
}
.ml#{$infix}-auto {
margin-left: auto !important;
}
.mx#{$infix}-auto {
margin-right: auto !important;
margin-left: auto !important;
}
.my#{$infix}-auto {
margin-top: auto !important;
margin-bottom: auto !important;
}
}
}
}
}
}
// Some special margin utils for flex alignments
.m-auto {
margin: auto !important;
}
.mt-auto {
margin-top: auto !important;
}
.mr-auto {
margin-right: auto !important;
}
.mb-auto {
margin-bottom: auto !important;
}
.ml-auto {
margin-left: auto !important;
}
.mx-auto {
margin-right: auto !important;
margin-left: auto !important;
}
.my-auto {
margin-top: auto !important;
margin-bottom: auto !important;
}
// Border helpers
$border-style: 1px solid rgba(0, 0, 0, 0.12);

5
src/app/core/scss/partials/_page-layouts.scss
View File

@ -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);
}
}
}

4
src/app/core/scss/variables/_theme.scss
View File

@ -49,11 +49,11 @@ $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).
$theme: mat-light-theme($primary, $accent, $warn);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$foreground: map-get($theme, foreground);

17
src/app/core/services/match-media.service.ts
View File

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

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

@ -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 -->

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

@ -1,7 +1,7 @@
.event-form-dialog {
.mat-dialog-container {
padding: 0;
max-width: 720px;
width: 720px;
}
}

2
src/app/main/content/apps/calendar/event-form/event-form.component.ts
View File

@ -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',

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

@ -2,7 +2,6 @@
.mat-dialog-container {
padding: 0;
max-width: 400px;
width: 400px;
.toolbar-bottom {

8
src/app/main/content/apps/dashboards/project/project.component.html
View File

@ -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">

24
src/app/main/content/apps/file-manager/file-list/file-list.component.html
View File

@ -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>

7
src/app/main/content/apps/file-manager/file-list/file-list.component.scss
View File

@ -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;
}
}
}
}

6
src/app/main/content/apps/file-manager/file-manager.component.html
View File

@ -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 -->

2
src/app/main/content/apps/file-manager/sidenavs/details/details.component.html
View File

@ -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">

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

@ -6,7 +6,6 @@
.mail-compose-dialog {
.mat-dialog-container {
padding: 0;
max-width: 720px;
width: 720px;
.attachment-list {

3
src/app/main/content/apps/mail/mail-details/mail-details.component.scss
View File

@ -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
src/app/main/content/apps/mail/mail-list/mail-list.component.scss
View File

@ -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);

91
src/app/main/content/apps/mail/mail.component.html
View File

@ -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,61 +37,68 @@
<!-- / 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">
<md-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedMails"
[indeterminate]="isIndeterminate"></md-checkbox>
<div *ngIf="!currentMail">
<md-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedMails"
[indeterminate]="isIndeterminate"></md-checkbox>
<button md-icon-button [mdMenuTriggerFor]="selectMenu">
<md-icon>arrow_drop_down</md-icon>
</button>
<md-menu #selectMenu="mdMenu">
<button md-menu-item (click)="selectMails()">All</button>
<button md-menu-item (click)="deselectMails()">None</button>
<button md-menu-item (click)="selectMails('read', true)">Read</button>
<button md-menu-item (click)="selectMails('read', false)">Unread</button>
<button md-menu-item (click)="selectMails('starred', true)">Starred</button>
<button md-menu-item (click)="selectMails('starred', false)">Unstarred</button>
<button md-menu-item (click)="selectMails('important', true)">Important</button>
<button md-menu-item (click)="selectMails('important', false)">Unimportant</button>
</md-menu>
<div class="toolbar-separator" *ngIf="hasSelectedMails"></div>
<button md-icon-button (click)="setFolderOnSelectedMails(4)" *ngIf="hasSelectedMails">
<md-icon>delete</md-icon>
</button>
<button md-icon-button [mdMenuTriggerFor]="folderMenu" *ngIf="hasSelectedMails">
<md-icon>folder</md-icon>
</button>
<md-menu #folderMenu="mdMenu">
<button md-menu-item *ngFor="let folder of folders"
(click)="setFolderOnSelectedMails(folder.id)">{{folder.title}}
<button md-icon-button [mdMenuTriggerFor]="selectMenu">
<md-icon>arrow_drop_down</md-icon>
</button>
</md-menu>
<md-menu #selectMenu="mdMenu">
<button md-menu-item (click)="selectMails()">All</button>
<button md-menu-item (click)="deselectMails()">None</button>
<button md-menu-item (click)="selectMails('read', true)">Read</button>
<button md-menu-item (click)="selectMails('read', false)">Unread</button>
<button md-menu-item (click)="selectMails('starred', true)">Starred</button>
<button md-menu-item (click)="selectMails('starred', false)">Unstarred</button>
<button md-menu-item (click)="selectMails('important', true)">Important</button>
<button md-menu-item (click)="selectMails('important', false)">Unimportant</button>
</md-menu>
<button md-icon-button [mdMenuTriggerFor]="labelMenu" *ngIf="hasSelectedMails">
<md-icon>label</md-icon>
</button>
<md-menu #labelMenu="mdMenu">
<button md-menu-item *ngFor="let label of labels"
(click)="toggleLabelOnSelectedMails(label.id)">{{label.title}}
<div class="toolbar-separator" *ngIf="hasSelectedMails"></div>
<button md-icon-button (click)="setFolderOnSelectedMails(4)" *ngIf="hasSelectedMails">
<md-icon>delete</md-icon>
</button>
</md-menu>
<button md-icon-button [mdMenuTriggerFor]="folderMenu" *ngIf="hasSelectedMails">
<md-icon>folder</md-icon>
</button>
<md-menu #folderMenu="mdMenu">
<button md-menu-item *ngFor="let folder of folders"
(click)="setFolderOnSelectedMails(folder.id)">{{folder.title}}
</button>
</md-menu>
<button md-icon-button [mdMenuTriggerFor]="labelMenu" *ngIf="hasSelectedMails">
<md-icon>label</md-icon>
</button>
<md-menu #labelMenu="mdMenu">
<button md-menu-item *ngFor="let label of labels"
(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 -->
@ -104,4 +111,4 @@
</md-sidenav-container>
</div>
</div>

30
src/app/main/content/apps/mail/mail.component.scss
View File

@ -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;
}
}
}
}
}
}
}

22
src/app/main/content/apps/mail/mail.component.ts
View File

@ -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
src/app/main/content/apps/todo/todo-details/todo-details.component.scss
View File

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

4
src/app/main/content/apps/todo/todo-list/todo-list.component.scss
View File

@ -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);

12
src/app/main/content/apps/todo/todo-list/todo-list.component.ts
View File

@ -18,9 +18,11 @@ export class TodoListComponent implements OnInit, OnDestroy
onTodosChanged: Subscription;
onCurrentTodoChanged: Subscription;
constructor(private route: ActivatedRoute,
private todoService: TodoService,
private location: Location)
constructor(
private route: ActivatedRoute,
private todoService: TodoService,
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
{

68
src/app/main/content/apps/todo/todo.component.html
View File

@ -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,48 +37,54 @@
<!-- / 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>
<md-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedTodos"
[indeterminate]="isIndeterminate"></md-checkbox>
<button md-icon-button [mdMenuTriggerFor]="selectMenu">
<md-icon>arrow_drop_down</md-icon>
</button>
<md-menu #selectMenu="mdMenu">
<button md-menu-item (click)="selectTodos()">All</button>
<button md-menu-item (click)="deselectTodos()">None</button>
<button md-menu-item (click)="selectTodos('read', true)">Read</button>
<button md-menu-item (click)="selectTodos('read', false)">Unread</button>
<button md-menu-item (click)="selectTodos('starred', true)">Starred</button>
<button md-menu-item (click)="selectTodos('starred', false)">Unstarred</button>
<button md-menu-item (click)="selectTodos('important', true)">Important</button>
<button md-menu-item (click)="selectTodos('important', false)">Unimportant</button>
</md-menu>
<div class="toolbar-separator" *ngIf="hasSelectedTodos"></div>
<button md-icon-button [mdMenuTriggerFor]="labelMenu" *ngIf="hasSelectedTodos">
<md-icon>label</md-icon>
</button>
<md-menu #labelMenu="mdMenu">
<button md-menu-item *ngFor="let tag of tags" (click)="toggleTagOnSelectedTodos(tag.id)">
{{tag.title}}
<button md-icon-button [mdMenuTriggerFor]="selectMenu">
<md-icon>arrow_drop_down</md-icon>
</button>
</md-menu>
<md-menu #selectMenu="mdMenu">
<button md-menu-item (click)="selectTodos()">All</button>
<button md-menu-item (click)="deselectTodos()">None</button>
<button md-menu-item (click)="selectTodos('read', true)">Read</button>
<button md-menu-item (click)="selectTodos('read', false)">Unread</button>
<button md-menu-item (click)="selectTodos('starred', true)">Starred</button>
<button md-menu-item (click)="selectTodos('starred', false)">Unstarred</button>
<button md-menu-item (click)="selectTodos('important', true)">Important</button>
<button md-menu-item (click)="selectTodos('important', false)">Unimportant</button>
</md-menu>
<div class="toolbar-separator" *ngIf="hasSelectedTodos"></div>
<button md-icon-button [mdMenuTriggerFor]="labelMenu" *ngIf="hasSelectedTodos">
<md-icon>label</md-icon>
</button>
<md-menu #labelMenu="mdMenu">
<button md-menu-item *ngFor="let tag of tags" (click)="toggleTagOnSelectedTodos(tag.id)">
{{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 -->

30
src/app/main/content/apps/todo/todo.component.scss
View File

@ -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;
}
}
}
}
}
}
}

21
src/app/main/content/apps/todo/todo.component.ts
View File

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

2
src/app/main/navbar/navbar.component.scss
View File

@ -72,7 +72,7 @@ fuse-navbar {
box-shadow: none;
}
@include media-breakpoint('xs') {
@include media-breakpoint('lt-md') {
position: absolute;
top: 0;
bottom: 0;

4
src/app/main/navbar/navbar.component.ts
View File

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

8
src/app/main/toolbar/toolbar.component.html
View File

@ -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">