purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

(ngx-color-picker) style refined, material colors presets added in Calendar App

Browse Source
This commit is contained in:
mustafahlvc 2017-08-11 19:39:54 +03:00
parent 5101ff5651
commit 71d8c37752
5 changed files with 76 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/app/core/matColors.ts
View File

@ -34,7 +34,7 @@ const matColors = {
A100: black87, A100: black87,
A200: 'white', A200: 'white',
A400: 'white', A400: 'white',
A700: 'white', A700: 'white'
} }
}, },
@ -67,7 +67,7 @@ const matColors = {
A100: black87, A100: black87,
A200: 'white', A200: 'white',
A400: 'white', A400: 'white',
A700: 'white', A700: 'white'
} }
}, },
@ -100,7 +100,7 @@ const matColors = {
A100: black87, A100: black87,
A200: 'white', A200: 'white',
A400: 'white', A400: 'white',
A700: 'white', A700: 'white'
} }
}, },
@ -133,7 +133,7 @@ const matColors = {
A100: black87, A100: black87,
A200: 'white', A200: 'white',
A400: white87, A400: white87,
A700: white87, A700: white87
} }
}, },
@ -166,7 +166,7 @@ const matColors = {
A100: black87, A100: black87,
A200: 'white', A200: 'white',
A400: 'white', A400: 'white',
A700: white87, A700: white87
} }
}, },
@ -199,7 +199,7 @@ const matColors = {
A100: black87, A100: black87,
A200: 'white', A200: 'white',
A400: 'white', A400: 'white',
A700: 'white', A700: 'white'
} }
}, },
@ -232,7 +232,7 @@ const matColors = {
A100: black87, A100: black87,
A200: black87, A200: black87,
A400: black87, A400: black87,
A700: 'white', A700: 'white'
} }
}, },
@ -265,7 +265,7 @@ const matColors = {
A100: black87, A100: black87,
A200: black87, A200: black87,
A400: black87, A400: black87,
A700: black87, A700: black87
} }
}, },
@ -298,7 +298,7 @@ const matColors = {
A100: black87, A100: black87,
A200: black87, A200: black87,
A400: black87, A400: black87,
A700: black87, A700: black87
} }
}, },
@ -331,7 +331,7 @@ const matColors = {
A100: black87, A100: black87,
A200: black87, A200: black87,
A400: black87, A400: black87,
A700: black87, A700: black87
} }
}, },
@ -364,7 +364,7 @@ const matColors = {
A100: black87, A100: black87,
A200: black87, A200: black87,
A400: black87, A400: black87,
A700: black87, A700: black87
} }
}, },
@ -397,7 +397,7 @@ const matColors = {
A100: black87, A100: black87,
A200: black87, A200: black87,
A400: black87, A400: black87,
A700: black87, A700: black87
} }
}, },
@ -430,7 +430,7 @@ const matColors = {
A100: black87, A100: black87,
A200: black87, A200: black87,
A400: black87, A400: black87,
A700: black87, A700: black87
} }
}, },
@ -463,7 +463,7 @@ const matColors = {
A100: black87, A100: black87,
A200: black87, A200: black87,
A400: black87, A400: black87,
A700: black87, A700: black87
} }
}, },
@ -496,7 +496,7 @@ const matColors = {
A100: black87, A100: black87,
A200: black87, A200: black87,
A400: black87, A400: black87,
A700: 'black', A700: 'black'
} }
}, },
@ -529,7 +529,7 @@ const matColors = {
A100: black87, A100: black87,
A200: black87, A200: black87,
A400: 'white', A400: 'white',
A700: 'white', A700: 'white'
} }
}, },
@ -562,7 +562,7 @@ const matColors = {
A100: black87, A100: black87,
A200: black87, A200: black87,
A400: 'white', A400: 'white',
A700: white87, A700: white87
} }
}, },
@ -599,7 +599,7 @@ const matColors = {
A100: black87, A100: black87,
A200: black87, A200: black87,
A400: black87, A400: black87,
A700: white87, A700: white87
} }
}, },
@ -632,11 +632,15 @@ const matColors = {
A100: black87, A100: black87,
A200: black87, A200: black87,
A400: 'white', A400: 'white',
A700: white87, A700: white87
}
} }
},
}; };
const matPresetColors = [
'#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336', '#e53935', '#d32f2f', '#c62828', '#b71c1c', '#ff8a80', '#ff5252', '#ff1744', '#d50000', '#fce4ec', '#f8bbd0', '#f48fb1', '#f06292', '#ec407a', '#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f', '#ff80ab', '#ff4081', '#f50057', '#c51162', '#f3e5f5', '#e1bee7', '#ce93d8', '#ba68c8', '#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#6a1b9a', '#4a148c', '#ea80fc', '#e040fb', '#d500f9', '#aa00ff', '#ede7f6', '#d1c4e9', '#b39ddb', '#9575cd', '#7e57c2', '#673ab7', '#5e35b1', '#512da8', '#4527a0', '#311b92', '#b388ff', '#7c4dff', '#651fff', '#6200ea', '#e8eaf6', '#c5cae9', '#9fa8da', '#7986cb', '#5c6bc0', '#3f51b5', '#3949ab', '#303f9f', '#283593', '#1a237e', '#8c9eff', '#536dfe', '#3d5afe', '#304ffe', '#e3f2fd', '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5', '#1976d2', '#1565c0', '#0d47a1', '#82b1ff', '#448aff', '#2979ff', '#2962ff', '#e1f5fe', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4', '#039be5', '#0288d1', '#0277bd', '#01579b', '#80d8ff', '#40c4ff', '#00b0ff', '#0091ea', '#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1', '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064', '#84ffff', '#18ffff', '#00e5ff', '#00b8d4', '#e0f2f1', '#b2dfdb', '#80cbc4', '#4db6ac', '#26a69a', '#009688', '#00897b', '#00796b', '#00695c', '#004d40', '#a7ffeb', '#64ffda', '#1de9b6', '#00bfa5', '#e8f5e9', '#c8e6c9', '#a5d6a7', '#81c784', '#66bb6a', '#4caf50', '#43a047', '#388e3c', '#2e7d32', '#1b5e20', '#b9f6ca', '#69f0ae', '#00e676', '#00c853', '#f1f8e9', '#dcedc8', '#c5e1a5', '#aed581', '#9ccc65', '#8bc34a', '#7cb342', '#689f38', '#558b2f', '#33691e', '#ccff90', '#b2ff59', '#76ff03', '#64dd17', '#f9fbe7', '#f0f4c3', '#e6ee9c', '#dce775', '#d4e157', '#cddc39', '#c0ca33', '#afb42b', '#9e9d24', '#827717', '#f4ff81', '#eeff41', '#c6ff00', '#aeea00', '#fffde7', '#fff9c4', '#fff59d', '#fff176', '#ffee58', '#ffeb3b', '#fdd835', '#fbc02d', '#f9a825', '#f57f17', '#ffff8d', '#ffff00', '#ffea00', '#ffd600', '#fff8e1', '#ffecb3', '#ffe082', '#ffd54f', '#ffca28', '#ffc107', '#ffb300', '#ffa000', '#ff8f00', '#ff6f00', '#ffe57f', '#ffd740', '#ffc400', '#ffab00', '#fff3e0', '#ffe0b2', '#ffcc80', '#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00', '#e65100', '#ffd180', '#ffab40', '#ff9100', '#ff6d00', '#fbe9e7', '#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e', '#e64a19', '#d84315', '#bf360c', '#ff9e80', '#ff6e40', '#ff3d00', '#dd2c00', '#efebe9', '#d7ccc8', '#bcaaa4', '#a1887f', '#8d6e63', '#795548', '#6d4c41', '#5d4037', '#4e342e', '#3e2723', '#d7ccc8', '#bcaaa4', '#8d6e63', '#5d4037', '#fafafa', '#f5f5f5', '#eeeeee', '#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#616161', '#424242', '#212121', '#ffffff', '#eeeeee', '#bdbdbd', '#616161', '#eceff1', '#cfd8dc', '#b0bec5', '#90a4ae', '#78909c', '#607d8b', '#546e7a', '#455a64', '#37474f', '#263238', '#cfd8dc', '#b0bec5', '#78909c', '#455a64'
];
/** /**
// Color palettes from the Material Design spec. // Color palettes from the Material Design spec.
// See https://www.google.com/design/spec/style/color.html // See https://www.google.com/design/spec/style/color.html
@ -645,6 +649,8 @@ export class MatColors
{ {
public static all = matColors; public static all = matColors;
public static presets = matPresetColors;
public static getColor(colorName) public static getColor(colorName)
{ {
if ( matColors[colorName] ) if ( matColors[colorName] )

33
src/app/core/scss/partials/plugins/_ngx-color-picker.scss Normal file
View File

@ -0,0 +1,33 @@
@import "src/app/core/scss/fuse";
.color-picker {
height: auto !important;
border: none !important;
@include mat-elevation(4);
.preset-area {
//padding: 4px 15px;
padding: 0 0 12px 12px !important;
height: 140px;
overflow-y: auto;
overflow-x: hidden;
> hr {
display: none;
}
.preset-label {
display: none;
}
.preset-color {
display: block !important;
float: left !important;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
&:nth-child(14n+3) {
clear: both;
}
}
}
}

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

@ -1,3 +1,4 @@
@import "highlight"; @import "highlight";
@import "perfect-scrollbar"; @import "perfect-scrollbar";
@import "ngx-datatable"; @import "ngx-datatable";
@import "ngx-color-picker";

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

@ -38,6 +38,8 @@
formControlName="primary" formControlName="primary"
placeholder="Primary color" placeholder="Primary color"
[(colorPicker)]="event.color.primary" [(colorPicker)]="event.color.primary"
cpWidth="290px"
[cpPresetColors]="presetColors"
[style.background]="event.color.primary" [style.background]="event.color.primary"
(colorPickerChange)="event.color.primary = $event; eventForm.patchValue({color:{primary:$event}})"/> (colorPickerChange)="event.color.primary = $event; eventForm.patchValue({color:{primary:$event}})"/>
</md-input-container> </md-input-container>
@ -47,6 +49,8 @@
formControlName="secondary" formControlName="secondary"
placeholder="Secondary color" placeholder="Secondary color"
[(colorPicker)]="event.color.secondary" [(colorPicker)]="event.color.secondary"
cpWidth="290px"
[cpPresetColors]="presetColors"
[style.background]="event.color.secondary" [style.background]="event.color.secondary"
(colorPickerChange)="event.color.secondary = $event; eventForm.patchValue({color:{secondary:$event}})"/> (colorPickerChange)="event.color.secondary = $event; eventForm.patchValue({color:{secondary:$event}})"/>
</md-input-container> </md-input-container>

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

@ -4,6 +4,7 @@ import { CalendarEvent } from 'angular-calendar';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import 'rxjs/Rx'; import 'rxjs/Rx';
import { CalendarEventModel } from '../event.model'; import { CalendarEventModel } from '../event.model';
import { MatColors } from '../../../../../core/matColors';
@Component({ @Component({
selector : 'fuse-calendar-event-form-dialog', selector : 'fuse-calendar-event-form-dialog',
@ -18,10 +19,13 @@ export class EventFormDialogComponent implements OnInit
dialogTitle: string; dialogTitle: string;
eventForm: FormGroup; eventForm: FormGroup;
action: string; action: string;
presetColors = MatColors.presets;
constructor(public dialogRef: MdDialogRef<EventFormDialogComponent>, constructor(
public dialogRef: MdDialogRef<EventFormDialogComponent>,
@Inject(MD_DIALOG_DATA) private data: any, @Inject(MD_DIALOG_DATA) private data: any,
private formBuilder: FormBuilder) private formBuilder: FormBuilder
)
{ {
this.event = data.event; this.event = data.event;
this.action = data.action; this.action = data.action;
@ -33,7 +37,10 @@ export class EventFormDialogComponent implements OnInit
else else
{ {
this.dialogTitle = 'New Event'; this.dialogTitle = 'New Event';
this.event = new CalendarEventModel({start: data.date, end: data.date}); this.event = new CalendarEventModel({
start: data.date,
end : data.date
});
} }
this.eventForm = this.createEventForm(); this.eventForm = this.createEventForm();