diff --git a/angular.json b/angular.json index 05add5dd7..5f01009de 100644 --- a/angular.json +++ b/angular.json @@ -50,6 +50,16 @@ "input": "src/theme/purple-green.scss", "bundleName": "theme/purple-green", "lazy": true + }, + { + "input": "src/theme/custom/denim-yellowgreen.scss", + "bundleName": "theme/denim-yellowgreen", + "lazy": true + }, + { + "input": "src/theme/custom/pictonblue-yellowgreen.scss", + "bundleName": "theme/pictonblue-yellowgreen", + "lazy": true } ], "scripts": [] @@ -121,6 +131,16 @@ "input": "src/theme/purple-green.scss", "bundleName": "theme/purple-green", "lazy": true + }, + { + "input": "src/theme/custom/denim-yellowgreen.scss", + "bundleName": "theme/denim-yellowgreen", + "lazy": true + }, + { + "input": "src/theme/custom/pictonblue-yellowgreen.scss", + "bundleName": "theme/pictonblue-yellowgreen", + "lazy": true } ], "assets": [ diff --git a/src/app/core/shell/toolbar/theme-picker/theme-picker.component.html b/src/app/core/shell/toolbar/theme-picker/theme-picker.component.html index 45e3b413d..f3204fa17 100644 --- a/src/app/core/shell/toolbar/theme-picker/theme-picker.component.html +++ b/src/app/core/shell/toolbar/theme-picker/theme-picker.component.html @@ -9,6 +9,7 @@
check_circle
+
diff --git a/src/app/core/shell/toolbar/theme-picker/theme-picker.component.ts b/src/app/core/shell/toolbar/theme-picker/theme-picker.component.ts index 6d1fbf545..06d597bb6 100644 --- a/src/app/core/shell/toolbar/theme-picker/theme-picker.component.ts +++ b/src/app/core/shell/toolbar/theme-picker/theme-picker.component.ts @@ -17,7 +17,7 @@ export class ThemePickerComponent implements OnInit { primary: '#3F51B5', accent: '#E91E63', isDark: false, - isDefault: true, + isDefault: true }; themes = [ this.currentTheme, @@ -25,20 +25,32 @@ export class ThemePickerComponent implements OnInit { href: 'deeppurple-amber.css', primary: '#673AB7', accent: '#FFC107', - isDark: false, + isDark: false }, { href: 'pink-bluegrey.css', primary: '#E91E63', accent: '#607D8B', - isDark: true, + isDark: true }, { href: 'purple-green.css', primary: '#9C27B0', accent: '#4CAF50', - isDark: true, + isDark: true }, + { + href: 'denim-yellowgreen.css', + primary: '#1074B9', + accent: '#B4D575', + isDark: false + }, + { + href: 'pictonblue-yellowgreen.css', + primary: '#1DAEEC', + accent: '#B4D575', + isDark: false + } ]; constructor(public themeManagerService: ThemeManagerService, diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 33f3ac548..ac039922d 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -5,4 +5,15 @@ --> +
+ + + + + + Link +
+ +
+
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index 54fbdac2a..be79d8b19 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -7,3 +7,9 @@ // font-size: 1.2rem; // quotes: "« " " »"; // } + +.button-row { + display: flex; + align-items: center; + justify-content: space-around; +} diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index 299c83520..bd1d94e7a 100644 --- a/src/app/home/home.module.ts +++ b/src/app/home/home.module.ts @@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common'; import { TranslateModule } from '@ngx-translate/core'; import { NgxChartsModule } from '@swimlane/ngx-charts'; +import { CoreModule } from '../core/core.module'; import { SharedModule } from '../shared'; import { HomeRoutingModule } from './home-routing.module'; import { HomeComponent } from './home.component'; @@ -13,6 +14,7 @@ import { DashboardComponent } from './dashboard/dashboard.component'; @NgModule({ imports: [ CommonModule, + CoreModule, TranslateModule, NgxChartsModule, SharedModule, diff --git a/src/theme/custom/denim-yellowgreen.scss b/src/theme/custom/denim-yellowgreen.scss new file mode 100644 index 000000000..0e0b439d9 --- /dev/null +++ b/src/theme/custom/denim-yellowgreen.scss @@ -0,0 +1,47 @@ +@import '~@angular/material/theming'; +// Plus imports for other components in your app. + +// Custom material palette +$mat-denim: ( + 100: #5ba2ec, + 500: #1074b9, + 700: #004989, + contrast: ( + 100: $dark-primary-text, + 500: $light-primary-text, + 700: $light-primary-text + ) +); + +$mat-yellow-green: ( + 100: #e7ffa5, + 500: #b4d575, + 700: #83a447, + contrast: ( + 100: $dark-primary-text, + 500: $dark-primary-text, + 700: $dark-primary-text + ) +); + +// Include the common styles for Angular Material. We include this here so that you only +// have to load a single css file for Angular Material in your app. +// Be sure that you only ever include this mixin once! +@include mat-core(); + +// Define the palettes for your theme using the Material Design palettes available in palette.scss +// (imported above). For each palette, you can optionally specify a default, lighter, and darker +// hue. Available color palettes: https://material.io/design/color/ +$mifosx-app-primary: mat-palette($mat-denim); +$mifosx-app-accent: mat-palette($mat-yellow-green); + +// The warn palette is optional (defaults to red). +$mifosx-app-warn: mat-palette($mat-red); + +// Create the theme object (a Sass map containing all of the palettes). +$mifosx-app-theme: mat-light-theme($mifosx-app-primary, $mifosx-app-accent, $mifosx-app-warn); + +// Include theme styles for core and each component used in your app. +// Alternatively, you can import and @include the theme mixins for each component +// that you are using. +@include angular-material-theme($mifosx-app-theme); diff --git a/src/theme/custom/pictonblue-yellowgreen.scss b/src/theme/custom/pictonblue-yellowgreen.scss new file mode 100644 index 000000000..5bfec5fc1 --- /dev/null +++ b/src/theme/custom/pictonblue-yellowgreen.scss @@ -0,0 +1,47 @@ +@import '~@angular/material/theming'; +// Plus imports for other components in your app. + +// Custom material palette +$mat-picton-blue: ( + 100: #6ce0ff, + 500: #1daeec, + 700: #007fb9, + contrast: ( + 100: $dark-primary-text, + 500: $dark-primary-text, + 700: $dark-primary-text + ) +); + +$mat-yellow-green: ( + 100: #e7ffa5, + 500: #b4d575, + 700: #83a447, + contrast: ( + 100: $dark-primary-text, + 500: $dark-primary-text, + 700: $dark-primary-text + ) +); + +// Include the common styles for Angular Material. We include this here so that you only +// have to load a single css file for Angular Material in your app. +// Be sure that you only ever include this mixin once! +@include mat-core(); + +// Define the palettes for your theme using the Material Design palettes available in palette.scss +// (imported above). For each palette, you can optionally specify a default, lighter, and darker +// hue. Available color palettes: https://material.io/design/color/ +$mifosx-app-primary: mat-palette($mat-picton-blue); +$mifosx-app-accent: mat-palette($mat-yellow-green); + +// The warn palette is optional (defaults to red). +$mifosx-app-warn: mat-palette($mat-red); + +// Create the theme object (a Sass map containing all of the palettes). +$mifosx-app-theme: mat-light-theme($mifosx-app-primary, $mifosx-app-accent, $mifosx-app-warn); + +// Include theme styles for core and each component used in your app. +// Alternatively, you can import and @include the theme mixins for each component +// that you are using. +@include angular-material-theme($mifosx-app-theme);