From 91e8d884885cfd21003e8bc08007053e3bb7f810 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Thu, 14 Jun 2018 12:25:03 +0300 Subject: [PATCH] Import the "bash" language color from prism Added "message-boxes" styles to the typography Increased the home icon size in doc pages Changed doc component class names --- .../components/highlight/prism-languages.ts | 1 + src/@fuse/scss/partials/_typography.scss | 30 +++++ .../angular-material-elements.component.html | 2 +- .../changelog/changelog.component.html | 2 +- .../components-third-party.module.ts | 6 +- .../datatable/ngx-datatable.component.html | 2 +- .../datatable/ngx-datatable.component.ts | 4 +- .../google-maps/google-maps.component.html | 2 +- .../google-maps/google-maps.component.ts | 4 +- .../google-maps/google-maps.module.ts | 6 +- .../components/cards/cards.component.html | 2 +- .../components/cards/cards.component.ts | 4 +- .../components/components.module.ts | 62 +++++------ .../countdown/countdown.component.html | 2 +- .../countdown/countdown.component.ts | 4 +- .../highlight/highlight.component.html | 2 +- .../highlight/highlight.component.ts | 4 +- .../material-color-picker.component.html | 2 +- .../material-color-picker.component.ts | 4 +- .../navigation/navigation.component.html | 2 +- .../navigation/navigation.component.ts | 4 +- .../search-bar/search-bar.component.html | 2 +- .../search-bar/search-bar.component.ts | 4 +- .../shortcuts/shortcuts.component.html | 2 +- .../shortcuts/shortcuts.component.ts | 4 +- .../components/sidebar/sidebar.component.html | 2 +- .../components/sidebar/sidebar.component.ts | 4 +- .../components/widget/widget.component.html | 2 +- .../components/widget/widget.component.ts | 4 +- .../services/config/config.component.html | 2 +- .../splash-screen.component.html | 2 +- src/app/main/ui/colors/colors.component.html | 2 +- src/app/main/ui/forms/forms.component.html | 2 +- .../helper-classes.component.html | 2 +- src/app/main/ui/icons/icons.component.html | 2 +- .../message-boxes.component.html | 105 ++++++++++++++++++ .../message-boxes.component.scss | 31 ++++++ .../message-boxes/message-boxes.component.ts | 17 +++ .../ui/typography/typography.component.html | 8 +- .../main/ui/typography/typography.module.ts | 2 + 40 files changed, 268 insertions(+), 82 deletions(-) create mode 100644 src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.html create mode 100644 src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.scss create mode 100644 src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.ts diff --git a/src/@fuse/components/highlight/prism-languages.ts b/src/@fuse/components/highlight/prism-languages.ts index 96c4461e..3de74275 100644 --- a/src/@fuse/components/highlight/prism-languages.ts +++ b/src/@fuse/components/highlight/prism-languages.ts @@ -1,4 +1,5 @@ import 'prismjs/prism'; +import 'prismjs/components/prism-bash'; import 'prismjs/components/prism-c'; import 'prismjs/components/prism-cpp'; import 'prismjs/components/prism-csharp'; diff --git a/src/@fuse/scss/partials/_typography.scss b/src/@fuse/scss/partials/_typography.scss index 41b2ed81..8483c3df 100644 --- a/src/@fuse/scss/partials/_typography.scss +++ b/src/@fuse/scss/partials/_typography.scss @@ -359,4 +359,34 @@ strong { } } } +} + +// Message boxes +.message-box { + padding: 16px; + background: #607D8B; + border-left: 6px solid #37474F; + color: rgba(255, 255, 255, 1); + + &.alert { + background: #EF5350; + border-left-color: #B71C1C; + } + + &.warning { + background: #FFECB3; + border-left-color: #FFC107; + color: rgba(0, 0, 0, 0.87); + } + + &.success { + background: #4CAF50; + border-left-color: #2E7D32; + } + + &.info { + background: #B3E5FC; + border-left-color: #03A9F4; + color: rgba(0, 0, 0, 0.87); + } } \ No newline at end of file diff --git a/src/app/main/angular-material-elements/angular-material-elements.component.html b/src/app/main/angular-material-elements/angular-material-elements.component.html index 06e8b93c..8a41ed10 100644 --- a/src/app/main/angular-material-elements/angular-material-elements.component.html +++ b/src/app/main/angular-material-elements/angular-material-elements.component.html @@ -6,7 +6,7 @@
- home + home chevron_right Components chevron_right diff --git a/src/app/main/documentation/changelog/changelog.component.html b/src/app/main/documentation/changelog/changelog.component.html index b6071d59..51d46c0a 100644 --- a/src/app/main/documentation/changelog/changelog.component.html +++ b/src/app/main/documentation/changelog/changelog.component.html @@ -4,7 +4,7 @@
- home + home chevron_right Documentation
diff --git a/src/app/main/documentation/components-third-party/components-third-party.module.ts b/src/app/main/documentation/components-third-party/components-third-party.module.ts index 8d756afe..943c2c74 100644 --- a/src/app/main/documentation/components-third-party/components-third-party.module.ts +++ b/src/app/main/documentation/components-third-party/components-third-party.module.ts @@ -6,18 +6,18 @@ import { NgxDatatableModule } from '@swimlane/ngx-datatable'; import { FuseSharedModule } from '@fuse/shared.module'; import { GoogleMapsModule } from 'app/main/documentation/components-third-party/google-maps/google-maps.module'; -import { NgxDatatableDocsComponent } from 'app/main/documentation/components-third-party/datatable/ngx-datatable.component'; +import { DocsComponentsThirdPartyNgxDatatableComponent } from 'app/main/documentation/components-third-party/datatable/ngx-datatable.component'; const routes = [ { path : 'datatables/ngx-datatable', - component: NgxDatatableDocsComponent + component: DocsComponentsThirdPartyNgxDatatableComponent } ]; @NgModule({ declarations: [ - NgxDatatableDocsComponent + DocsComponentsThirdPartyNgxDatatableComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/documentation/components-third-party/datatable/ngx-datatable.component.html b/src/app/main/documentation/components-third-party/datatable/ngx-datatable.component.html index 397162a2..28eb9aa4 100644 --- a/src/app/main/documentation/components-third-party/datatable/ngx-datatable.component.html +++ b/src/app/main/documentation/components-third-party/datatable/ngx-datatable.component.html @@ -5,7 +5,7 @@ fxLayoutAlign.gt-xs="space-between center">
- home + home chevron_right Tables
diff --git a/src/app/main/documentation/components-third-party/datatable/ngx-datatable.component.ts b/src/app/main/documentation/components-third-party/datatable/ngx-datatable.component.ts index 80a3b3ae..de775ca4 100644 --- a/src/app/main/documentation/components-third-party/datatable/ngx-datatable.component.ts +++ b/src/app/main/documentation/components-third-party/datatable/ngx-datatable.component.ts @@ -4,11 +4,11 @@ import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @Component({ - selector : 'ngx-datatable-docs', + selector : 'docs-components-third-party-ngx-datatable', templateUrl: './ngx-datatable.component.html', styleUrls : ['./ngx-datatable.component.scss'] }) -export class NgxDatatableDocsComponent implements OnInit, OnDestroy +export class DocsComponentsThirdPartyNgxDatatableComponent implements OnInit, OnDestroy { rows: any[]; loadingIndicator: boolean; diff --git a/src/app/main/documentation/components-third-party/google-maps/google-maps.component.html b/src/app/main/documentation/components-third-party/google-maps/google-maps.component.html index 5b6891c3..5489ef53 100644 --- a/src/app/main/documentation/components-third-party/google-maps/google-maps.component.html +++ b/src/app/main/documentation/components-third-party/google-maps/google-maps.component.html @@ -5,7 +5,7 @@ fxLayoutAlign.gt-xs="space-between center">
- home + home chevron_right Google Maps
diff --git a/src/app/main/documentation/components-third-party/google-maps/google-maps.component.ts b/src/app/main/documentation/components-third-party/google-maps/google-maps.component.ts index 8f31a0ef..2796c709 100644 --- a/src/app/main/documentation/components-third-party/google-maps/google-maps.component.ts +++ b/src/app/main/documentation/components-third-party/google-maps/google-maps.component.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; @Component({ - selector : 'google-maps-docs', + selector : 'docs-components-third-party-google-maps', templateUrl: './google-maps.component.html', styleUrls : ['./google-maps.component.scss'] }) -export class GoogleMapsDocsComponent +export class DocsComponentsThirdPartyGoogleMapsComponent { lat: number; lng: number; diff --git a/src/app/main/documentation/components-third-party/google-maps/google-maps.module.ts b/src/app/main/documentation/components-third-party/google-maps/google-maps.module.ts index 5c750539..f9812a05 100644 --- a/src/app/main/documentation/components-third-party/google-maps/google-maps.module.ts +++ b/src/app/main/documentation/components-third-party/google-maps/google-maps.module.ts @@ -8,18 +8,18 @@ import { AgmCoreModule } from '@agm/core'; import { FuseSharedModule } from '@fuse/shared.module'; import { FuseHighlightModule } from '@fuse/components/index'; -import { GoogleMapsDocsComponent } from './google-maps.component'; +import { DocsComponentsThirdPartyGoogleMapsComponent } from './google-maps.component'; const routes = [ { path : 'google-maps', - component: GoogleMapsDocsComponent + component: DocsComponentsThirdPartyGoogleMapsComponent } ]; @NgModule({ declarations: [ - GoogleMapsDocsComponent + DocsComponentsThirdPartyGoogleMapsComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/documentation/components/cards/cards.component.html b/src/app/main/documentation/components/cards/cards.component.html index 45f7315e..43cb61fc 100644 --- a/src/app/main/documentation/components/cards/cards.component.html +++ b/src/app/main/documentation/components/cards/cards.component.html @@ -5,7 +5,7 @@
- home + home chevron_right Components
diff --git a/src/app/main/documentation/components/cards/cards.component.ts b/src/app/main/documentation/components/cards/cards.component.ts index 2bc1036b..becba7c1 100644 --- a/src/app/main/documentation/components/cards/cards.component.ts +++ b/src/app/main/documentation/components/cards/cards.component.ts @@ -4,12 +4,12 @@ import * as shape from 'd3-shape'; import { fuseAnimations } from '@fuse/animations/index'; @Component({ - selector : 'cards-docs', + selector : 'docs-components-cards', templateUrl: './cards.component.html', styleUrls : ['./cards.component.scss'], animations : fuseAnimations }) -export class CardsDocsComponent +export class DocsComponentsCardsComponent { view: string; card9Expanded: boolean; diff --git a/src/app/main/documentation/components/components.module.ts b/src/app/main/documentation/components/components.module.ts index f36c34a8..d1d695ab 100644 --- a/src/app/main/documentation/components/components.module.ts +++ b/src/app/main/documentation/components/components.module.ts @@ -5,73 +5,67 @@ import { NgxChartsModule } from '@swimlane/ngx-charts'; import { FuseSharedModule } from '@fuse/shared.module'; -import { FuseCountdownModule, FuseHighlightModule, FuseMaterialColorPickerModule, FuseWidgetModule } from '@fuse/components/index'; -import { CardsDocsComponent } from 'app/main/documentation/components/cards/cards.component'; -import { CountdownDocsComponent } from 'app/main/documentation/components/countdown/countdown.component'; -import { HighlightDocsComponent } from 'app/main/documentation/components/highlight/highlight.component'; -import { MaterialColorPickerDocsComponent } from 'app/main/documentation/components/material-color-picker/material-color-picker.component'; -import { MultiLanguageDocsComponent } from 'app/main/documentation/components/multi-language/multi-language.component'; -import { NavigationDocsComponent } from 'app/main/documentation/components/navigation/navigation.component'; -import { SearchBarDocsComponent } from 'app/main/documentation/components/search-bar/search-bar.component'; -import { SidebarDocsComponent } from 'app/main/documentation/components/sidebar/sidebar.component'; -import { ShortcutsDocsComponent } from 'app/main/documentation/components/shortcuts/shortcuts.component'; -import { WidgetDocsComponent } from 'app/main/documentation/components/widget/widget.component'; +import { FuseCountdownModule, FuseHighlightModule, FuseMaterialColorPickerModule, FuseWidgetModule } from '@fuse/components'; +import { DocsComponentsCardsComponent } from 'app/main/documentation/components/cards/cards.component'; +import { DocsComponentsCountdownComponent } from 'app/main/documentation/components/countdown/countdown.component'; +import { DocsComponentsHighlightComponent } from 'app/main/documentation/components/highlight/highlight.component'; +import { DocsComponentsMaterialColorPickerComponent } from 'app/main/documentation/components/material-color-picker/material-color-picker.component'; +import { DocsComponentsNavigationComponent } from 'app/main/documentation/components/navigation/navigation.component'; +import { DocsComponentsSearchBarComponent } from 'app/main/documentation/components/search-bar/search-bar.component'; +import { DocsComponentsSidebarComponent } from 'app/main/documentation/components/sidebar/sidebar.component'; +import { DocsComponentsShortcutsComponent } from 'app/main/documentation/components/shortcuts/shortcuts.component'; +import { DocsComponentsWidgetComponent } from 'app/main/documentation/components/widget/widget.component'; const routes = [ { path : 'cards', - component: CardsDocsComponent + component: DocsComponentsCardsComponent }, { path : 'countdown', - component: CountdownDocsComponent + component: DocsComponentsCountdownComponent }, { path : 'highlight', - component: HighlightDocsComponent + component: DocsComponentsHighlightComponent }, { path : 'material-color-picker', - component: MaterialColorPickerDocsComponent - }, - { - path : 'multi-language', - component: MultiLanguageDocsComponent + component: DocsComponentsMaterialColorPickerComponent }, { path : 'navigation', - component: NavigationDocsComponent + component: DocsComponentsNavigationComponent }, { path : 'search-bar', - component: SearchBarDocsComponent + component: DocsComponentsSearchBarComponent }, { path : 'sidebar', - component: SidebarDocsComponent + component: DocsComponentsSidebarComponent }, { path : 'shortcuts', - component: ShortcutsDocsComponent + component: DocsComponentsShortcutsComponent }, { path : 'widget', - component: WidgetDocsComponent + component: DocsComponentsWidgetComponent } ]; @NgModule({ declarations: [ - CardsDocsComponent, - CountdownDocsComponent, - HighlightDocsComponent, - MaterialColorPickerDocsComponent, - MultiLanguageDocsComponent, - NavigationDocsComponent, - SearchBarDocsComponent, - SidebarDocsComponent, - ShortcutsDocsComponent, - WidgetDocsComponent + DocsComponentsCardsComponent, + DocsComponentsCountdownComponent, + DocsComponentsHighlightComponent, + DocsComponentsMaterialColorPickerComponent, + DocsComponentsNavigationComponent, + DocsComponentsSearchBarComponent, + DocsComponentsSidebarComponent, + DocsComponentsShortcutsComponent, + DocsComponentsWidgetComponent ], imports : [ RouterModule.forChild(routes), diff --git a/src/app/main/documentation/components/countdown/countdown.component.html b/src/app/main/documentation/components/countdown/countdown.component.html index 26aa888c..5f4d9c38 100644 --- a/src/app/main/documentation/components/countdown/countdown.component.html +++ b/src/app/main/documentation/components/countdown/countdown.component.html @@ -4,7 +4,7 @@
- home + home chevron_right Components
diff --git a/src/app/main/documentation/components/countdown/countdown.component.ts b/src/app/main/documentation/components/countdown/countdown.component.ts index 6c525efa..7f4ead81 100644 --- a/src/app/main/documentation/components/countdown/countdown.component.ts +++ b/src/app/main/documentation/components/countdown/countdown.component.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; @Component({ - selector : 'countdown-docs', + selector : 'docs-components-countdown', templateUrl: './countdown.component.html', styleUrls : ['./countdown.component.scss'] }) -export class CountdownDocsComponent +export class DocsComponentsCountdownComponent { /** * Constructor diff --git a/src/app/main/documentation/components/highlight/highlight.component.html b/src/app/main/documentation/components/highlight/highlight.component.html index 231f83ef..daa980bd 100644 --- a/src/app/main/documentation/components/highlight/highlight.component.html +++ b/src/app/main/documentation/components/highlight/highlight.component.html @@ -4,7 +4,7 @@
- home + home chevron_right Components
diff --git a/src/app/main/documentation/components/highlight/highlight.component.ts b/src/app/main/documentation/components/highlight/highlight.component.ts index d78b0004..84f0f55c 100644 --- a/src/app/main/documentation/components/highlight/highlight.component.ts +++ b/src/app/main/documentation/components/highlight/highlight.component.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; @Component({ - selector : 'highlight-docs', + selector : 'docs-components-highlight', templateUrl: './highlight.component.html', styleUrls : ['./highlight.component.scss'] }) -export class HighlightDocsComponent +export class DocsComponentsHighlightComponent { /** * Constructor diff --git a/src/app/main/documentation/components/material-color-picker/material-color-picker.component.html b/src/app/main/documentation/components/material-color-picker/material-color-picker.component.html index 07382997..fc7517b3 100644 --- a/src/app/main/documentation/components/material-color-picker/material-color-picker.component.html +++ b/src/app/main/documentation/components/material-color-picker/material-color-picker.component.html @@ -4,7 +4,7 @@
- home + home chevron_right Components
diff --git a/src/app/main/documentation/components/material-color-picker/material-color-picker.component.ts b/src/app/main/documentation/components/material-color-picker/material-color-picker.component.ts index 11fd9d1d..5cd540fd 100644 --- a/src/app/main/documentation/components/material-color-picker/material-color-picker.component.ts +++ b/src/app/main/documentation/components/material-color-picker/material-color-picker.component.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; @Component({ - selector : 'material-color-picker-docs', + selector : 'docs-components-material-color-picker', templateUrl: './material-color-picker.component.html', styleUrls : ['./material-color-picker.component.scss'] }) -export class MaterialColorPickerDocsComponent +export class DocsComponentsMaterialColorPickerComponent { /** * Constructor diff --git a/src/app/main/documentation/components/navigation/navigation.component.html b/src/app/main/documentation/components/navigation/navigation.component.html index 52d327fc..01d24bec 100644 --- a/src/app/main/documentation/components/navigation/navigation.component.html +++ b/src/app/main/documentation/components/navigation/navigation.component.html @@ -4,7 +4,7 @@
- home + home chevron_right Components
diff --git a/src/app/main/documentation/components/navigation/navigation.component.ts b/src/app/main/documentation/components/navigation/navigation.component.ts index 2f34bbd1..d09ce72b 100644 --- a/src/app/main/documentation/components/navigation/navigation.component.ts +++ b/src/app/main/documentation/components/navigation/navigation.component.ts @@ -3,11 +3,11 @@ import { Component } from '@angular/core'; import { navigation } from 'app/navigation/navigation'; @Component({ - selector : 'navigation-docs', + selector : 'docs-components-navigation', templateUrl: './navigation.component.html', styleUrls : ['./navigation.component.scss'] }) -export class NavigationDocsComponent +export class DocsComponentsNavigationComponent { navigation: any; hidden: boolean; diff --git a/src/app/main/documentation/components/search-bar/search-bar.component.html b/src/app/main/documentation/components/search-bar/search-bar.component.html index bcf31bd2..5e8c93a9 100644 --- a/src/app/main/documentation/components/search-bar/search-bar.component.html +++ b/src/app/main/documentation/components/search-bar/search-bar.component.html @@ -4,7 +4,7 @@
- home + home chevron_right Components
diff --git a/src/app/main/documentation/components/search-bar/search-bar.component.ts b/src/app/main/documentation/components/search-bar/search-bar.component.ts index 130f179f..91b6a001 100644 --- a/src/app/main/documentation/components/search-bar/search-bar.component.ts +++ b/src/app/main/documentation/components/search-bar/search-bar.component.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; @Component({ - selector : 'search-bar-docs', + selector : 'docs-components-search-bar', templateUrl: './search-bar.component.html', styleUrls : ['./search-bar.component.scss'] }) -export class SearchBarDocsComponent +export class DocsComponentsSearchBarComponent { /** * Constructor diff --git a/src/app/main/documentation/components/shortcuts/shortcuts.component.html b/src/app/main/documentation/components/shortcuts/shortcuts.component.html index b7289064..397cb3d1 100644 --- a/src/app/main/documentation/components/shortcuts/shortcuts.component.html +++ b/src/app/main/documentation/components/shortcuts/shortcuts.component.html @@ -4,7 +4,7 @@
- home + home chevron_right Components
diff --git a/src/app/main/documentation/components/shortcuts/shortcuts.component.ts b/src/app/main/documentation/components/shortcuts/shortcuts.component.ts index d34619a6..1fd57e34 100644 --- a/src/app/main/documentation/components/shortcuts/shortcuts.component.ts +++ b/src/app/main/documentation/components/shortcuts/shortcuts.component.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; @Component({ - selector : 'shortcuts-docs', + selector : 'docs-components-shortcuts', templateUrl: './shortcuts.component.html', styleUrls : ['./shortcuts.component.scss'] }) -export class ShortcutsDocsComponent +export class DocsComponentsShortcutsComponent { /** * Constructor diff --git a/src/app/main/documentation/components/sidebar/sidebar.component.html b/src/app/main/documentation/components/sidebar/sidebar.component.html index d57af7c8..fd9555cf 100644 --- a/src/app/main/documentation/components/sidebar/sidebar.component.html +++ b/src/app/main/documentation/components/sidebar/sidebar.component.html @@ -4,7 +4,7 @@
- home + home chevron_right Components
diff --git a/src/app/main/documentation/components/sidebar/sidebar.component.ts b/src/app/main/documentation/components/sidebar/sidebar.component.ts index 0eeda631..948c4b7d 100644 --- a/src/app/main/documentation/components/sidebar/sidebar.component.ts +++ b/src/app/main/documentation/components/sidebar/sidebar.component.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; @Component({ - selector : 'sidebar-docs', + selector : 'docs-components-sidebar', templateUrl: './sidebar.component.html', styleUrls : ['./sidebar.component.scss'] }) -export class SidebarDocsComponent +export class DocsComponentsSidebarComponent { /** * Constructor diff --git a/src/app/main/documentation/components/widget/widget.component.html b/src/app/main/documentation/components/widget/widget.component.html index 9b7d1afd..dea19925 100644 --- a/src/app/main/documentation/components/widget/widget.component.html +++ b/src/app/main/documentation/components/widget/widget.component.html @@ -4,7 +4,7 @@
- home + home chevron_right Components
diff --git a/src/app/main/documentation/components/widget/widget.component.ts b/src/app/main/documentation/components/widget/widget.component.ts index b581012e..5bbb1105 100644 --- a/src/app/main/documentation/components/widget/widget.component.ts +++ b/src/app/main/documentation/components/widget/widget.component.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; @Component({ - selector : 'widget-docs', + selector : 'docs-components-widget', templateUrl: './widget.component.html', styleUrls : ['./widget.component.scss'] }) -export class WidgetDocsComponent +export class DocsComponentsWidgetComponent { /** * Constructor diff --git a/src/app/main/documentation/services/config/config.component.html b/src/app/main/documentation/services/config/config.component.html index 625ebb15..daef5bdd 100644 --- a/src/app/main/documentation/services/config/config.component.html +++ b/src/app/main/documentation/services/config/config.component.html @@ -4,7 +4,7 @@
- home + home chevron_right Services
diff --git a/src/app/main/documentation/services/splash-screen/splash-screen.component.html b/src/app/main/documentation/services/splash-screen/splash-screen.component.html index bfcfa493..87f7444b 100644 --- a/src/app/main/documentation/services/splash-screen/splash-screen.component.html +++ b/src/app/main/documentation/services/splash-screen/splash-screen.component.html @@ -4,7 +4,7 @@
- home + home chevron_right Services
diff --git a/src/app/main/ui/colors/colors.component.html b/src/app/main/ui/colors/colors.component.html index 3e58a926..44b7b9bf 100644 --- a/src/app/main/ui/colors/colors.component.html +++ b/src/app/main/ui/colors/colors.component.html @@ -6,7 +6,7 @@
- home + home chevron_right User Interface
diff --git a/src/app/main/ui/forms/forms.component.html b/src/app/main/ui/forms/forms.component.html index 2454284e..759a7def 100644 --- a/src/app/main/ui/forms/forms.component.html +++ b/src/app/main/ui/forms/forms.component.html @@ -4,7 +4,7 @@
- home + home chevron_right User Interface
diff --git a/src/app/main/ui/helper-classes/helper-classes.component.html b/src/app/main/ui/helper-classes/helper-classes.component.html index 54db7757..5a22d769 100644 --- a/src/app/main/ui/helper-classes/helper-classes.component.html +++ b/src/app/main/ui/helper-classes/helper-classes.component.html @@ -4,7 +4,7 @@
- home + home chevron_right User Interface
diff --git a/src/app/main/ui/icons/icons.component.html b/src/app/main/ui/icons/icons.component.html index 886eaa7b..91f19129 100644 --- a/src/app/main/ui/icons/icons.component.html +++ b/src/app/main/ui/icons/icons.component.html @@ -6,7 +6,7 @@
- home + home chevron_right User Interface
diff --git a/src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.html b/src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.html new file mode 100644 index 00000000..9cb0af06 --- /dev/null +++ b/src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.html @@ -0,0 +1,105 @@ +
+ +
Message Boxes
+ +
+ +
+ +
+
+ This is a standard message box +
+
+ + + + + +
+ +
+ +
+
+ This is an alert message box! +
+
+ + + + + +
+ +
+ +
+
+ This is a warning message box +
+
+ + + + + +
+ +
+ +
+
+ This is a success message box +
+
+ + + + + +
+ +
+ +
+
+ This is a info message box +
+
+ + + + + +
+ + +
+ +
\ No newline at end of file diff --git a/src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.scss b/src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.scss new file mode 100644 index 00000000..04a80218 --- /dev/null +++ b/src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.scss @@ -0,0 +1,31 @@ +:host { + + #typography-message-boxes { + + .source-code { + position: relative; + margin-bottom: 24px; + min-height: 180px; + max-height: 500px; + + code { + background: none !important; + } + } + + .preview { + font-size: 16px; + padding: 16px; + margin-bottom: 24px; + min-height: 180px; + + &:last-child { + margin-bottom: 0; + } + + .mat-caption { + margin-bottom: 16px; + } + } + } +} \ No newline at end of file diff --git a/src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.ts b/src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.ts new file mode 100644 index 00000000..9949aee7 --- /dev/null +++ b/src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'typography-message-boxes', + templateUrl: './message-boxes.component.html', + styleUrls : ['./message-boxes.component.scss'] +}) +export class TypographyMessageBoxesComponent +{ + /** + * Constructor + */ + constructor() + { + + } +} diff --git a/src/app/main/ui/typography/typography.component.html b/src/app/main/ui/typography/typography.component.html index 094dc755..7d1c12c1 100644 --- a/src/app/main/ui/typography/typography.component.html +++ b/src/app/main/ui/typography/typography.component.html @@ -4,7 +4,7 @@
- home + home chevron_right User Interface
@@ -36,6 +36,12 @@ + + + + + + diff --git a/src/app/main/ui/typography/typography.module.ts b/src/app/main/ui/typography/typography.module.ts index 34ba3129..38aa6db0 100644 --- a/src/app/main/ui/typography/typography.module.ts +++ b/src/app/main/ui/typography/typography.module.ts @@ -9,6 +9,7 @@ import { TypographyComponent } from 'app/main/ui/typography/typography.component import { TypographyHeadingsComponent } from 'app/main/ui/typography/tabs/headings/headings.component'; import { TypographyInlineTextElementsComponent } from 'app/main/ui/typography/tabs/inline-text-elements/inline-text-elements.component'; import { TypographyBlockquotesListsComponent } from 'app/main/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component'; +import { TypographyMessageBoxesComponent } from 'app/main/ui/typography/tabs/message-boxes/message-boxes.component'; import { TypographyHelpersComponent } from 'app/main/ui/typography/tabs/helpers/helpers.component'; const routes: Routes = [ @@ -24,6 +25,7 @@ const routes: Routes = [ TypographyHeadingsComponent, TypographyInlineTextElementsComponent, TypographyBlockquotesListsComponent, + TypographyMessageBoxesComponent, TypographyHelpersComponent ], imports : [