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

new helpers.scss + size helpers + ngx-datatable styles + show toolbar by default

Browse Source
This commit is contained in:
Sercan Yemen 2017-07-31 14:58:55 +03:00
parent aa0c1d7a87
commit 5ca5400ba7
7 changed files with 224 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/core/scss/core.scss
View File

@ -18,7 +18,7 @@
// Partials
@import "partials/reset";
@import "partials/normalize";
@import "partials/spacing";
@import "partials/helpers";
@import "partials/global";
@import "partials/icons";
@import "partials/colors";

144
src/app/core/scss/partials/_colors.scss
View File

@ -1,5 +1,8 @@
// Material colors map
$matColorsMap: (
primary: $primary,
accent: $accent,
warn: $warn,
red: $mat-red,
pink: $mat-pink,
purple: $mat-purple,
@ -20,92 +23,111 @@ $matColorsMap: (
grey: $mat-grey,
blue-grey: $mat-blue-grey,
white: $mat-white,
black: $mat-black,
primary: $primary,
accent: $accent,
warn: $warn
black: $mat-black
);
// Material color hues list
$matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
// Text color levels generator mixin
@mixin generateTextColorLevels($baseTextColor) {
// If the base text color is black...
@if (rgba(black, 1) == rgba($baseTextColor, 1)) {
&.secondary-text,
.secondary-text,
&.mat-icon,
.mat-icon,
&.icon,
.icon {
color: rgba(0, 0, 0, 0.54) !important;
}
&.hint-text,
.hint-text,
&.disabled-text,
.disabled-text {
color: rgba(0, 0, 0, 0.38) !important;
}
&.divider,
.divider {
color: rgba(0, 0, 0, 0.12) !important;
}
}
// If the base text color is white...
@else {
&.mat-icon,
.mat-icon,
&.icon,
.icon {
color: rgba(255, 255, 255, 1) !important;
}
&.secondary-text,
.secondary-text {
color: rgba(255, 255, 255, 0.70) !important;
}
&.hint-text,
.hint-text,
&.disabled-text,
.disabled-text {
color: rgba(255, 255, 255, 0.50) !important;
}
&.divider,
.divider {
color: rgba(255, 255, 255, 0.12) !important;
}
}
}
// Color classes generator mixin
@mixin generateColorClasses($colorName, $bgColor, $fgColor, $hue) {
@mixin generateColorClasses($colorName, $color, $contrastColor, $hue) {
.#{$colorName}#{$hue}-bg {
background-color: $bgColor !important;
background-color: $color !important;
}
.md-#{$colorName}#{$hue}-bg {
background-color: $bgColor !important;
color: $fgColor !important;
background-color: $color !important;
color: $contrastColor !important;
@if (rgba(black, 1) == rgba($fgColor, 1)) {
&.secondary-text,
.secondary-text,
&.mat-icon,
.mat-icon,
&.icon,
.icon {
color: rgba(0, 0, 0, 0.54) !important;
}
&.hint-text,
.hint-text,
&.disabled-text,
.disabled-text {
color: rgba(0, 0, 0, 0.38) !important;
}
&.divider,
.divider {
color: rgba(0, 0, 0, 0.12) !important;
}
} @else {
&.secondary-text,
.secondary-text {
color: rgba(255, 255, 255, 0.70) !important;
}
&.hint-text,
.hint-text,
&.disabled-text,
.disabled-text {
color: rgba(255, 255, 255, 0.50) !important;
}
&.divider,
.divider {
color: rgba(255, 255, 255, 0.12) !important;
}
}
// Generate text color levels
// based on current contrast color
@include generateTextColorLevels($contrastColor);
}
.#{$colorName}#{$hue}-fg {
color: $bgColor !important;
color: $color !important;
// Generate text color levels
// based on current color
@include generateTextColorLevels($color);
}
.#{$colorName}#{$hue}-border {
border-color: $bgColor !important;
border-color: $color !important;
}
.#{$colorName}#{$hue}-border-top {
border-top-color: $bgColor !important;
border-top-color: $color !important;
}
.#{$colorName}#{$hue}-border-right {
border-right-color: $bgColor !important;
border-right-color: $color !important;
}
.#{$colorName}#{$hue}-border-bottom {
border-bottom-color: $bgColor !important;
border-bottom-color: $color !important;
}
.#{$colorName}#{$hue}-border-left {
border-left-color: $bgColor !important;
border-left-color: $color !important;
}
}
@ -114,16 +136,16 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
@each $hue in $matColorHues {
$bgColor: map-get($colorMap, $hue);
$fgColor: map-get(map-get($colorMap, 'contrast'), $hue);
$color: map-get($colorMap, $hue);
$contrastColor: map-get(map-get($colorMap, 'contrast'), $hue);
@if ($bgColor != null and $fgColor != null) {
@if ($color != null and $contrastColor != null) {
@include generateColorClasses($colorName, $bgColor, $fgColor, '-#{$hue}');
@include generateColorClasses($colorName, $color, $contrastColor, '-#{$hue}');
// Run the generator one more time for default values (500)
@if ($hue == 500) {
@include generateColorClasses($colorName, $bgColor, $fgColor, '');
@include generateColorClasses($colorName, $color, $contrastColor, '');
}
}
}

32
src/app/core/scss/partials/_spacing.scss → src/app/core/scss/partials/_helpers.scss
View File

@ -1,28 +1,54 @@
// Margin and Padding
// ######################
// SIZE HELPERS
// ######################
@each $prop, $abbrev in (height: h, width: w) {
@for $index from 0 through 128 {
$size: $index * 4;
$length: #{$size}px;
.#{$abbrev}-#{$size} {
#{$prop}: $length !important;
min-#{$prop}: $length !important;
max-#{$prop}: $length !important;
}
}
}
// ######################
// SPACING HELPERS
// ######################
@each $prop, $abbrev in (margin: m, padding: p) {
@for $index from 0 through 64 {
$size: $index *4;
$size: $index * 4;
$length: #{$size}px;
.#{$abbrev}-#{$size} {
#{$prop}: $length !important;
}
.#{$abbrev}t-#{$size} {
#{$prop}-top: $length !important;
}
.#{$abbrev}r-#{$size} {
#{$prop}-right: $length !important;
}
.#{$abbrev}b-#{$size} {
#{$prop}-bottom: $length !important;
}
.#{$abbrev}l-#{$size} {
#{$prop}-left: $length !important;
}
.#{$abbrev}x-#{$size} {
#{$prop}-right: $length !important;
#{$prop}-left: $length !important;
}
.#{$abbrev}y-#{$size} {
#{$prop}-top: $length !important;
#{$prop}-bottom: $length !important;
@ -30,7 +56,7 @@
}
}
// Some special margin utils
// Some special margin utils for flex alignments
.m-auto {
margin: auto !important;
}

63
src/app/core/scss/partials/plugins/_ngx-datatable.scss Normal file
View File

@ -0,0 +1,63 @@
.ngx-datatable {
&.material {
@include mat-elevation(4);
.empty-row {
display: flex;
align-items: center;
line-height: 1;
height: 56px;
padding: 0 24px;
}
.datatable-header {
.datatable-header-cell {
display: inline-flex;
align-items: center;
line-height: 1;
min-height: 48px;
padding: 0 24px;
font-size: 13px;
}
}
.datatable-body {
.datatable-row-left,
.datatable-row-center,
.datatable-row-right {
min-height: 48px;
}
.datatable-row-wrapper {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
.datatable-body-cell {
display: inline-flex;
align-items: center;
line-height: 1;
min-height: 48px;
padding: 0 24px;
}
}
}
.datatable-footer {
border: none;
.datatable-footer-inner {
padding: 0 24px;
.page-count {
padding: 0;
}
.datatable-pager {
margin: 0 0 0 24px;
}
}
}
}
}

3
src/app/core/scss/partials/plugins/_plugins.scss
View File

@ -1 +1,2 @@
@import "perfect-scrollbar";
@import "perfect-scrollbar";
@import "ngx-datatable";

4
src/app/core/services/layout.service.ts
View File

@ -1,5 +1,5 @@
import { Injectable } from '@angular/core';
import { ActivatedRoute, ActivatedRouteSnapshot, NavigationStart, Router, NavigationEnd, Route, RouterState } from '@angular/router';
import { NavigationStart, Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import 'rxjs/add/operator/filter';
@ -20,7 +20,7 @@ export class FuseLayoutService
// Set the default settings
this.defaultSettings = {
navigation: 'left', // 'right', 'left', 'top', none
toolbar : 'none', // 'above', 'below', none
toolbar : 'below', // 'above', 'below', none
footer : 'none' // 'above', 'below', none
};

56
src/app/main/components/datatable/ngx-datatable.component.html
View File

@ -1,12 +1,44 @@
<ngx-datatable
class="material"
[rows]="rows"
[loadingIndicator]="loadingIndicator"
[columns]="columns"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'"
[reorderable]="reorderable"
[limit]="10">
</ngx-datatable>
<div id="ngx-datatable" class="page-layout simple fullwidth">
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between">
<div fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="secondary-text s-16">home</md-icon>
<md-icon class="secondary-text s-16">chevron_right</md-icon>
<span class="secondary-text">Tables</span>
</div>
<div class="h2 mt-16">ngx-datatable</div>
</div>
<div fxLayout="row" fxLayoutAlign="start center">
<a md-raised-button class="md-white-bg"
href="https://github.com/swimlane/ngx-datatable"
target="_blank">
<md-icon>link</md-icon>
<span>Reference</span>
</a>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<ngx-datatable
class="material"
[rows]="rows"
[loadingIndicator]="loadingIndicator"
[columns]="columns"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'"
[reorderable]="reorderable"
[limit]="10">
</ngx-datatable>
</div>
</div>