From 6960a2ba269c718aa95c1f3aae366adaad4b9652 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Sun, 26 Aug 2018 18:30:00 +0300 Subject: [PATCH] (Theming) Dark theme + Ability to use multiple themes --- .../countdown/countdown.component.scss | 2 +- .../components/countdown/countdown.theme.scss | 17 + .../highlight/highlight.component.scss | 1 + .../material-color-picker.theme.scss | 2 +- .../collapsable/collapsable.component.html | 18 +- .../horizontal/item/item.component.html | 14 +- .../collapsable/collapsable.component.html | 18 +- .../vertical/item/item.component.html | 14 +- .../search-bar/search-bar.component.html | 5 +- .../search-bar/search-bar.component.scss | 3 +- .../search-bar/search-bar.theme.scss | 11 + .../shortcuts/shortcuts.component.scss | 4 + .../components/shortcuts/shortcuts.theme.scss | 11 + .../components/sidebar/sidebar.component.scss | 6 - .../components/sidebar/sidebar.component.ts | 1 - .../components/sidebar/sidebar.theme.scss | 16 + .../theme-options.component.html | 119 ++++-- .../theme-options.component.scss | 6 +- .../theme-options/theme-options.component.ts | 140 ++++--- .../theme-options/theme-options.module.ts | 5 +- .../theme-options/theme-options.theme.scss | 27 ++ src/@fuse/components/widget/widget.theme.scss | 13 + src/@fuse/mat-colors/index.ts | 12 +- src/@fuse/scss/core.scss | 9 +- src/@fuse/scss/fuse.scss | 6 +- src/@fuse/scss/mixins/_breakpoints.scss | 2 +- .../scss/partials/_angular-material-fix.scss | 6 +- src/@fuse/scss/partials/_cards.scss | 26 +- src/@fuse/scss/partials/_colors.scss | 197 +++++----- src/@fuse/scss/partials/_global.scss | 1 - src/@fuse/scss/partials/_helpers.scss | 2 +- src/@fuse/scss/partials/_material.scss | 240 +++++++++--- src/@fuse/scss/partials/_navigation.scss | 4 +- src/@fuse/scss/partials/_page-layouts.scss | 87 ++++- src/@fuse/scss/partials/_typography.scss | 68 +++- .../partials/plugins/_ng-pick-datetime.scss | 361 ------------------ .../scss/partials/plugins/_ngx-datatable.scss | 93 ++++- src/@fuse/scss/theme.scss | 30 ++ src/@fuse/scss/theming.scss | 66 ---- src/@fuse/types/fuse-config.ts | 6 +- src/app/app.component.html | 4 +- src/app/app.component.ts | 12 + src/app/app.theme.scss | 264 +++++++++++++ src/app/fake-db/chat.ts | 51 +-- src/app/fake-db/dashboard-project.ts | 6 +- src/app/fake-db/e-commerce.ts | 80 ++-- src/app/fake-db/scrumboard.ts | 16 +- src/app/fuse-config/index.ts | 33 +- .../chat-panel/chat-panel.component.html | 10 +- .../chat-panel/chat-panel.component.scss | 38 +- .../chat-panel/chat-panel.component.ts | 6 +- .../chat-panel/chat-panel.theme.scss | 82 ++++ .../components/footer/footer.component.html | 2 +- .../horizontal/style-1/style-1.component.html | 4 +- .../horizontal/style-1/style-1.component.ts | 11 + .../vertical/style-1/style-1.component.html | 8 +- .../vertical/style-1/style-1.component.scss | 13 +- .../vertical/style-2/style-2.component.html | 6 +- .../vertical/style-2/style-2.component.scss | 1 - .../vertical/style-2/style-2.component.ts | 11 + .../components/toolbar/toolbar.component.html | 6 +- .../components/toolbar/toolbar.component.scss | 3 +- .../components/toolbar/toolbar.component.ts | 9 +- .../components/toolbar/toolbar.theme.scss | 8 + .../layout-1/layout-1.component.html | 12 +- .../vertical/layout-1/layout-1.component.html | 12 +- .../vertical/layout-2/layout-2.component.html | 12 +- .../vertical/layout-3/layout-3.component.html | 12 +- .../angular-material-elements.component.html | 4 +- .../example-viewer/example-viewer.html | 2 +- .../example-viewer/example-viewer.scss | 8 +- src/app/main/apps/academy/academy.theme.scss | 156 ++++++++ .../apps/academy/course/course.component.html | 4 +- .../apps/academy/course/course.component.scss | 59 +-- .../academy/courses/courses.component.html | 2 +- .../academy/courses/courses.component.scss | 11 +- .../apps/calendar/calendar.component.html | 2 +- .../apps/calendar/calendar.component.scss | 11 - src/app/main/apps/calendar/calendar.module.ts | 3 +- .../main/apps/calendar/calendar.theme.scss | 192 ++++++++++ .../chat/chat-start/chat-start.component.html | 10 +- .../chat/chat-start/chat-start.component.scss | 10 +- .../chat/chat-start/chat-start.component.ts | 11 +- .../chat/chat-view/chat-view.component.html | 52 +-- .../chat/chat-view/chat-view.component.scss | 240 ++++++++---- .../chat/chat-view/chat-view.component.ts | 62 ++- src/app/main/apps/chat/chat.component.html | 4 +- src/app/main/apps/chat/chat.component.scss | 6 +- src/app/main/apps/chat/chat.theme.scss | 119 ++++++ .../sidenavs/left/chats/chats.component.html | 15 +- .../sidenavs/left/chats/chats.component.scss | 23 +- .../sidenavs/left/chats/chats.component.ts | 11 +- .../chat/sidenavs/left/left.component.scss | 2 +- .../apps/chat/sidenavs/left/left.component.ts | 11 +- .../sidenavs/left/user/user.component.html | 72 ++-- .../sidenavs/left/user/user.component.scss | 12 +- .../chat/sidenavs/left/user/user.component.ts | 9 +- .../right/contact/contact.component.html | 16 +- .../right/contact/contact.component.scss | 12 +- .../right/contact/contact.component.ts | 13 +- .../chat/sidenavs/right/right.component.scss | 2 +- .../chat/sidenavs/right/right.component.ts | 11 +- .../contact-list/contact-list.component.html | 2 +- .../apps/contacts/contacts.component.html | 8 +- .../main/apps/contacts/contacts.theme.scss | 21 + .../sidebars/main/main.component.html | 8 +- .../analytics/analytics.component.html | 18 +- .../dashboards/project/project.component.html | 55 +-- .../dashboards/project/project.theme.scss | 34 ++ .../apps/e-commerce/order/order-statuses.ts | 28 +- .../e-commerce/order/order.component.html | 46 ++- .../e-commerce/order/order.component.scss | 2 + .../e-commerce/orders/orders.component.html | 6 +- .../e-commerce/product/product.component.html | 10 +- .../products/products.component.html | 14 +- .../file-list/file-list.component.html | 2 +- .../file-list/file-list.component.scss | 11 +- .../file-list/file-list.component.ts | 11 +- .../file-manager/file-manager.component.html | 7 +- .../apps/file-manager/file-manager.theme.scss | 23 ++ .../sidebars/details/details.component.html | 4 +- .../mail-details/mail-details.component.scss | 13 +- .../mail-details/mail-details.component.ts | 5 +- .../mail-list-item.component.html | 2 +- .../mail-list-item.component.scss | 26 +- .../mail-list-item.component.ts | 5 +- .../mail-list/mail-list.component.html | 2 +- .../mail-list/mail-list.component.scss | 4 +- .../mail-list/mail-list.component.ts | 5 +- .../main/apps/mail-ngrx/mail.component.html | 6 +- .../main/apps/mail-ngrx/mail.component.scss | 6 +- src/app/main/apps/mail-ngrx/mail.component.ts | 5 +- src/app/main/apps/mail-ngrx/mail.theme.scss | 130 +++++++ .../sidebars/main/main-sidebar.component.html | 8 +- .../sidebars/main/main-sidebar.component.scss | 7 +- .../sidebars/main/main-sidebar.component.ts | 5 +- .../mail-details/mail-details.component.scss | 13 +- .../mail-details/mail-details.component.ts | 11 +- .../mail-list-item.component.html | 2 +- .../mail-list-item.component.scss | 25 +- .../mail-list-item.component.ts | 9 +- .../mail/mail-list/mail-list.component.html | 2 +- .../mail/mail-list/mail-list.component.scss | 4 +- .../mail/mail-list/mail-list.component.ts | 11 +- src/app/main/apps/mail/mail.component.html | 6 +- src/app/main/apps/mail/mail.component.scss | 6 +- src/app/main/apps/mail/mail.component.ts | 9 +- src/app/main/apps/mail/mail.theme.scss | 130 +++++++ .../sidebars/main/main-sidebar.component.html | 8 +- .../sidebars/main/main-sidebar.component.scss | 7 +- .../sidebars/main/main-sidebar.component.ts | 11 +- src/app/main/apps/scrumboard/board.model.ts | 6 +- .../board/add-list/add-list.component.html | 2 +- .../board/add-list/add-list.component.scss | 4 +- .../board/add-list/add-list.component.ts | 9 +- .../scrumboard/board/board.component.html | 12 +- .../scrumboard/board/board.component.scss | 3 +- .../apps/scrumboard/board/board.component.ts | 11 +- .../board/dialogs/card/card.component.html | 2 +- .../board/dialogs/card/card.component.scss | 24 +- .../label-selector.component.html | 12 +- .../label-selector.component.ts | 2 +- .../edit-board-name.component.scss | 2 +- .../edit-board-name.component.ts | 9 +- .../list/add-card/add-card.component.html | 6 +- .../list/add-card/add-card.component.scss | 8 +- .../board/list/add-card/add-card.component.ts | 9 +- .../board/list/card/card.component.scss | 27 +- .../edit-list-name.component.scss | 3 +- .../edit-list-name.component.ts | 9 +- .../scrumboard/board/list/list.component.scss | 9 +- .../board-color-selector.component.html | 2 +- .../board-color-selector.component.scss | 2 +- .../board-color-selector.component.ts | 9 +- .../sidenavs/settings/settings.component.html | 4 +- .../sidenavs/settings/settings.component.scss | 4 +- .../sidenavs/settings/settings.component.ts | 11 +- .../apps/scrumboard/scrumboard.component.html | 9 +- .../apps/scrumboard/scrumboard.component.scss | 28 +- .../apps/scrumboard/scrumboard.component.ts | 11 +- .../apps/scrumboard/scrumboard.theme.scss | 189 +++++++++ .../sidebars/main/main-sidebar.component.html | 8 +- .../sidebars/main/main-sidebar.component.scss | 11 +- .../sidebars/main/main-sidebar.component.ts | 11 +- .../todo-details/todo-details.component.scss | 6 +- .../todo-details/todo-details.component.ts | 11 +- .../todo-list-item.component.scss | 13 +- .../todo-list-item.component.ts | 2 +- .../todo/todo-list/todo-list.component.html | 2 +- .../todo/todo-list/todo-list.component.scss | 4 +- .../todo/todo-list/todo-list.component.ts | 11 +- src/app/main/apps/todo/todo.component.html | 6 +- src/app/main/apps/todo/todo.component.scss | 5 +- src/app/main/apps/todo/todo.component.ts | 11 +- src/app/main/apps/todo/todo.theme.scss | 84 ++++ .../changelog/changelog.component.html | 37 +- .../datatable/ngx-datatable.component.html | 4 +- .../google-maps/google-maps.component.html | 16 +- .../components/cards/cards.component.html | 10 +- .../components/cards/cards.component.scss | 2 +- .../components/cards/cards.component.ts | 15 +- .../components/cards/cards.theme.scss | 20 + .../countdown/countdown.component.html | 2 +- .../highlight/highlight.component.html | 4 +- .../material-color-picker.component.html | 4 +- .../navigation/navigation.component.html | 2 +- .../progress-bar/progress-bar.component.html | 4 +- .../search-bar/search-bar.component.html | 2 +- .../shortcuts/shortcuts.component.html | 2 +- .../components/sidebar/sidebar.component.html | 2 +- .../components/widget/widget.component.html | 10 +- .../fuseIfOnDom/fuse-if-on-dom.component.html | 2 +- .../fuse-inner-scroll.component.html | 2 +- .../fuse-mat-sidenav.component.html | 2 +- .../fuse-perfect-scrollbar.component.html | 2 +- .../installation/installation.component.html | 2 +- .../introduction/introduction.component.html | 2 +- .../fuse-config/fuse-config.component.html | 39 +- .../fuse-splash-screen.component.html | 4 +- .../directory-structure.component.html | 2 +- .../multi-language.component.html | 2 +- .../page-layouts/page-layouts.component.html | 2 +- .../production/production.component.html | 2 +- .../server/server.component.html | 2 +- .../theme-layouts.component.html | 2 +- .../updating-fuse.component.html | 2 +- .../forgot-password-2.component.html | 2 +- .../forgot-password-2.component.scss | 17 +- .../forgot-password-2.component.ts | 11 +- .../forgot-password-2.theme.scss | 25 ++ .../forgot-password.component.scss | 3 +- .../forgot-password.component.ts | 11 +- .../forgot-password.theme.scss | 22 ++ .../authentication/lock/lock.component.html | 2 +- .../authentication/lock/lock.component.scss | 9 +- .../authentication/lock/lock.component.ts | 11 +- .../pages/authentication/lock/lock.theme.scss | 37 ++ .../login-2/login-2.component.html | 2 +- .../login-2/login-2.component.scss | 19 +- .../login-2/login-2.component.ts | 11 +- .../authentication/login-2/login-2.theme.scss | 40 ++ .../authentication/login/login.component.scss | 9 +- .../authentication/login/login.component.ts | 11 +- .../authentication/login/login.theme.scss | 35 ++ .../mail-confirm/mail-confirm.component.scss | 4 +- .../mail-confirm/mail-confirm.component.ts | 11 +- .../mail-confirm/mail-confirm.theme.scss | 27 ++ .../register-2/register-2.component.html | 2 +- .../register-2/register-2.component.scss | 19 +- .../register-2/register-2.component.ts | 11 +- .../register-2/register-2.theme.scss | 40 ++ .../register/register.component.scss | 6 +- .../register/register.component.ts | 11 +- .../register/register.theme.scss | 35 ++ .../reset-password-2.component.html | 2 +- .../reset-password-2.component.scss | 17 +- .../reset-password-2.component.ts | 11 +- .../reset-password-2.theme.scss | 25 ++ .../reset-password.component.scss | 3 +- .../reset-password.component.ts | 11 +- .../reset-password/reset-password.theme.scss | 22 ++ .../coming-soon/coming-soon.component.scss | 7 +- .../coming-soon/coming-soon.component.ts | 11 +- .../pages/coming-soon/coming-soon.theme.scss | 38 ++ .../pages/errors/404/error-404.component.scss | 4 +- .../pages/errors/404/error-404.component.ts | 9 +- .../pages/errors/404/error-404.theme.scss | 27 ++ .../pages/errors/500/error-500.component.scss | 4 +- .../pages/errors/500/error-500.component.ts | 9 +- .../pages/errors/500/error-500.theme.scss | 21 + src/app/main/pages/faq/faq.component.html | 9 +- src/app/main/pages/faq/faq.component.scss | 16 +- src/app/main/pages/faq/faq.component.ts | 9 +- src/app/main/pages/faq/faq.theme.scss | 18 + .../invoices/compact/compact.component.html | 2 +- .../invoices/compact/compact.component.scss | 9 +- .../invoices/compact/compact.component.ts | 9 +- .../invoices/modern/modern.component.scss | 26 +- .../pages/invoices/modern/modern.component.ts | 9 +- .../knowledge-base.component.html | 4 +- .../knowledge-base/knowledge-base.theme.scss | 14 + .../maintenance/maintenance.component.scss | 3 +- .../maintenance/maintenance.component.ts | 11 +- .../pages/maintenance/maintenance.theme.scss | 22 ++ .../pricing/style-1/style-1.component.html | 6 +- .../pricing/style-1/style-1.component.scss | 3 +- .../pricing/style-1/style-1.component.ts | 9 +- .../pages/pricing/style-1/style-1.theme.scss | 20 + .../pricing/style-2/style-2.component.html | 2 +- .../pricing/style-2/style-2.component.scss | 2 +- .../pricing/style-2/style-2.component.ts | 9 +- .../pages/pricing/style-2/style-2.theme.scss | 20 + .../pricing/style-3/style-3.component.html | 6 +- .../pricing/style-3/style-3.component.scss | 2 +- .../pricing/style-3/style-3.component.ts | 9 +- .../pages/pricing/style-3/style-3.theme.scss | 20 + .../profile/tabs/about/about.component.html | 10 +- .../profile/tabs/about/about.component.scss | 17 +- .../profile/tabs/about/about.component.ts | 15 +- .../pages/profile/tabs/about/about.theme.scss | 57 +++ .../photos-videos.component.scss | 5 +- .../photos-videos/photos-videos.component.ts | 11 +- .../photos-videos/photos-videos.theme.scss | 32 ++ .../tabs/timeline/timeline.component.html | 2 +- .../tabs/timeline/timeline.component.scss | 45 +-- .../tabs/timeline/timeline.component.ts | 15 +- .../profile/tabs/timeline/timeline.theme.scss | 125 ++++++ .../main/pages/search/search.component.html | 2 +- src/app/main/ui/colors/colors.component.html | 56 ++- src/app/main/ui/colors/colors.component.scss | 4 + .../helper-classes.component.html | 2 +- .../padding-margin.component.html | 8 +- .../width-height/width-height.component.html | 4 +- src/app/main/ui/icons/icons.component.html | 4 +- .../full-width-1/full-width-1.component.html | 6 +- .../full-width-2/full-width-2.component.html | 6 +- .../full-width-tabbed-1.component.html | 6 +- .../full-width-tabbed-2.component.html | 6 +- .../left-sidebar-1.component.html | 8 +- .../left-sidebar-2.component.html | 8 +- .../left-sidebar-tabbed-1.component.html | 8 +- .../left-sidebar-tabbed-2.component.html | 8 +- .../right-sidebar-1.component.html | 8 +- .../right-sidebar-2.component.html | 8 +- .../right-sidebar-tabbed-1.component.html | 8 +- .../right-sidebar-tabbed-2.component.html | 8 +- .../full-width-1/full-width-1.component.html | 4 +- .../full-width-tabbed-1.component.html | 4 +- .../left-sidebar-1.component.html | 4 +- .../left-sidebar-2.component.html | 4 +- .../left-sidebar-3.component.html | 4 +- .../left-sidebar-4.component.html | 4 +- .../right-sidebar-1.component.html | 4 +- .../right-sidebar-2.component.html | 4 +- .../right-sidebar-3.component.html | 4 +- .../right-sidebar-4.component.html | 4 +- .../blockquotes-lists.component.html | 8 +- .../tabs/headings/headings.component.html | 4 +- .../tabs/helpers/helpers.component.html | 54 +-- .../inline-text-elements.component.html | 2 +- .../message-boxes.component.html | 2 +- .../ui/typography/typography.component.html | 2 +- src/app/navigation/navigation.ts | 8 +- src/index.html | 2 +- src/styles.scss | 23 +- 345 files changed, 4490 insertions(+), 2289 deletions(-) create mode 100644 src/@fuse/components/countdown/countdown.theme.scss create mode 100644 src/@fuse/components/search-bar/search-bar.theme.scss create mode 100644 src/@fuse/components/shortcuts/shortcuts.theme.scss create mode 100644 src/@fuse/components/sidebar/sidebar.theme.scss create mode 100644 src/@fuse/components/theme-options/theme-options.theme.scss create mode 100644 src/@fuse/components/widget/widget.theme.scss delete mode 100644 src/@fuse/scss/partials/plugins/_ng-pick-datetime.scss create mode 100644 src/@fuse/scss/theme.scss delete mode 100644 src/@fuse/scss/theming.scss create mode 100644 src/app/app.theme.scss create mode 100644 src/app/layout/components/chat-panel/chat-panel.theme.scss create mode 100644 src/app/layout/components/toolbar/toolbar.theme.scss create mode 100644 src/app/main/apps/academy/academy.theme.scss create mode 100644 src/app/main/apps/calendar/calendar.theme.scss create mode 100644 src/app/main/apps/chat/chat.theme.scss create mode 100644 src/app/main/apps/contacts/contacts.theme.scss create mode 100644 src/app/main/apps/dashboards/project/project.theme.scss create mode 100644 src/app/main/apps/file-manager/file-manager.theme.scss create mode 100644 src/app/main/apps/mail-ngrx/mail.theme.scss create mode 100644 src/app/main/apps/mail/mail.theme.scss create mode 100644 src/app/main/apps/scrumboard/scrumboard.theme.scss create mode 100644 src/app/main/apps/todo/todo.theme.scss create mode 100644 src/app/main/documentation/components/cards/cards.theme.scss create mode 100644 src/app/main/pages/authentication/forgot-password-2/forgot-password-2.theme.scss create mode 100644 src/app/main/pages/authentication/forgot-password/forgot-password.theme.scss create mode 100644 src/app/main/pages/authentication/lock/lock.theme.scss create mode 100644 src/app/main/pages/authentication/login-2/login-2.theme.scss create mode 100644 src/app/main/pages/authentication/login/login.theme.scss create mode 100644 src/app/main/pages/authentication/mail-confirm/mail-confirm.theme.scss create mode 100644 src/app/main/pages/authentication/register-2/register-2.theme.scss create mode 100644 src/app/main/pages/authentication/register/register.theme.scss create mode 100644 src/app/main/pages/authentication/reset-password-2/reset-password-2.theme.scss create mode 100644 src/app/main/pages/authentication/reset-password/reset-password.theme.scss create mode 100644 src/app/main/pages/coming-soon/coming-soon.theme.scss create mode 100644 src/app/main/pages/errors/404/error-404.theme.scss create mode 100644 src/app/main/pages/errors/500/error-500.theme.scss create mode 100644 src/app/main/pages/faq/faq.theme.scss create mode 100644 src/app/main/pages/knowledge-base/knowledge-base.theme.scss create mode 100644 src/app/main/pages/maintenance/maintenance.theme.scss create mode 100644 src/app/main/pages/pricing/style-1/style-1.theme.scss create mode 100644 src/app/main/pages/pricing/style-2/style-2.theme.scss create mode 100644 src/app/main/pages/pricing/style-3/style-3.theme.scss create mode 100644 src/app/main/pages/profile/tabs/about/about.theme.scss create mode 100644 src/app/main/pages/profile/tabs/photos-videos/photos-videos.theme.scss create mode 100644 src/app/main/pages/profile/tabs/timeline/timeline.theme.scss diff --git a/src/@fuse/components/countdown/countdown.component.scss b/src/@fuse/components/countdown/countdown.component.scss index 96c1e072..bcdb9530 100644 --- a/src/@fuse/components/countdown/countdown.component.scss +++ b/src/@fuse/components/countdown/countdown.component.scss @@ -1,4 +1,4 @@ -:host { +fuse-countdown { display: flex; flex-direction: row; align-items: center; diff --git a/src/@fuse/components/countdown/countdown.theme.scss b/src/@fuse/components/countdown/countdown.theme.scss new file mode 100644 index 00000000..7f77c858 --- /dev/null +++ b/src/@fuse/components/countdown/countdown.theme.scss @@ -0,0 +1,17 @@ +@mixin fuse-countdown-theme($theme) { + + $foreground: map-get($theme, foreground); + + fuse-countdown { + + .fuse-countdown { + + .time { + + .title { + color: map-get($foreground, secondary-text); + } + } + } + } +} \ No newline at end of file diff --git a/src/@fuse/components/highlight/highlight.component.scss b/src/@fuse/components/highlight/highlight.component.scss index 67ada1aa..4cf5e323 100644 --- a/src/@fuse/components/highlight/highlight.component.scss +++ b/src/@fuse/components/highlight/highlight.component.scss @@ -1,5 +1,6 @@ :host { display: block; + width: 100%; padding: 8px; background: #263238; cursor: text; diff --git a/src/@fuse/components/material-color-picker/material-color-picker.theme.scss b/src/@fuse/components/material-color-picker/material-color-picker.theme.scss index de2f98eb..0450fb55 100644 --- a/src/@fuse/components/material-color-picker/material-color-picker.theme.scss +++ b/src/@fuse/components/material-color-picker/material-color-picker.theme.scss @@ -1,6 +1,6 @@ @mixin fuse-material-color-picker-theme($theme) { - $background: map_get($theme, background); + $background: map-get($theme, background); .fuse-material-color-picker-menu { diff --git a/src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html b/src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html index 740df664..0c25864a 100644 --- a/src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html +++ b/src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html @@ -1,42 +1,42 @@ - + + [target]="item.openInNewTab ? '_blank' : '_self'"> + [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'"> + (click)="item.function()"> + [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']" + [routerLinkActiveOptions]="{exact: item.exactMatch || false}"> + [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'"> @@ -52,7 +52,7 @@
-
+
diff --git a/src/@fuse/components/navigation/horizontal/item/item.component.html b/src/@fuse/components/navigation/horizontal/item/item.component.html index 31da0d39..d2636ab7 100644 --- a/src/@fuse/components/navigation/horizontal/item/item.component.html +++ b/src/@fuse/components/navigation/horizontal/item/item.component.html @@ -2,37 +2,37 @@ + [target]="item.openInNewTab ? '_blank' : '_self'"> + [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'"> + (click)="item.function()"> + [target]="item.openInNewTab ? '_blank' : '_self'"> + [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'"> diff --git a/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html b/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html index d3bc9faa..cc8ab10f 100644 --- a/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html +++ b/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html @@ -1,45 +1,45 @@ - + + (click)="toggleOpen($event)"> + [target]="item.openInNewTab ? '_blank' : '_self'"> + [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'"> + (click)="toggleOpen($event);item.function()"> + [routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']" + [routerLinkActiveOptions]="{exact: item.exactMatch || false}"> + [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'"> diff --git a/src/@fuse/components/navigation/vertical/item/item.component.html b/src/@fuse/components/navigation/vertical/item/item.component.html index 31da0d39..d2636ab7 100644 --- a/src/@fuse/components/navigation/vertical/item/item.component.html +++ b/src/@fuse/components/navigation/vertical/item/item.component.html @@ -2,37 +2,37 @@ + [target]="item.openInNewTab ? '_blank' : '_self'"> + [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'"> + (click)="item.function()"> + [target]="item.openInNewTab ? '_blank' : '_self'"> + [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'"> diff --git a/src/@fuse/components/search-bar/search-bar.component.html b/src/@fuse/components/search-bar/search-bar.component.html index f3df8660..70b17ae3 100644 --- a/src/@fuse/components/search-bar/search-bar.component.html +++ b/src/@fuse/components/search-bar/search-bar.component.html @@ -1,15 +1,12 @@
-
+
div { + flex: 1 1 auto !important; + } } } } diff --git a/src/@fuse/components/shortcuts/shortcuts.theme.scss b/src/@fuse/components/shortcuts/shortcuts.theme.scss new file mode 100644 index 00000000..16181fa6 --- /dev/null +++ b/src/@fuse/components/shortcuts/shortcuts.theme.scss @@ -0,0 +1,11 @@ +@mixin fuse-shortcuts-theme($theme) { + + $background: map-get($theme, background); + + #fuse-shortcuts { + + &.show-mobile-panel { + background-color: map-get($background, background); + } + } +} \ No newline at end of file diff --git a/src/@fuse/components/sidebar/sidebar.component.scss b/src/@fuse/components/sidebar/sidebar.component.scss index f4a2a765..955c5669 100644 --- a/src/@fuse/components/sidebar/sidebar.component.scss +++ b/src/@fuse/components/sidebar/sidebar.component.scss @@ -15,7 +15,6 @@ fuse-sidebar { max-width: 280px; z-index: 1000; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35); - background: white; @include media-breakpoint-down('xs') { min-width: 0 !important; @@ -62,10 +61,5 @@ fuse-sidebar { left: 0; right: 0; z-index: 999; - background-color: rgba(0, 0, 0, 0.6); opacity: 0; - - &.fuse-sidebar-overlay-invisible { - background-color: transparent; - } } \ No newline at end of file diff --git a/src/@fuse/components/sidebar/sidebar.component.ts b/src/@fuse/components/sidebar/sidebar.component.ts index 67b5efe2..66c55c55 100644 --- a/src/@fuse/components/sidebar/sidebar.component.ts +++ b/src/@fuse/components/sidebar/sidebar.component.ts @@ -318,7 +318,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Get the active status const isActive = this._observableMedia.isActive(this.lockedOpen); - // If the both status are the same, don't act if ( this._wasActive === isActive ) { diff --git a/src/@fuse/components/sidebar/sidebar.theme.scss b/src/@fuse/components/sidebar/sidebar.theme.scss new file mode 100644 index 00000000..5735f956 --- /dev/null +++ b/src/@fuse/components/sidebar/sidebar.theme.scss @@ -0,0 +1,16 @@ +@mixin fuse-sidebar-theme($theme) { + + $background: map-get($theme, background); + + fuse-sidebar { + background: map-get($background, background); + } + + .fuse-sidebar-overlay { + background-color: rgba(0, 0, 0, 0.6); + + &.fuse-sidebar-overlay-invisible { + background-color: transparent; + } + } +} \ No newline at end of file diff --git a/src/@fuse/components/theme-options/theme-options.component.html b/src/@fuse/components/theme-options/theme-options.component.html index fa2bd51b..68b74a4b 100644 --- a/src/@fuse/components/theme-options/theme-options.component.html +++ b/src/@fuse/components/theme-options/theme-options.component.html @@ -12,6 +12,19 @@
+ +
+ +

Color themes

+ + + Default + Default Dark + Yellow Light + + +
+
@@ -79,10 +92,13 @@ Style 2 -

Color:

+

Primary background:

- + formControlName="primaryBackground"> + +

Secondary background:

+
@@ -102,10 +118,13 @@ Below Fixed -

Color:

+ + Use custom background color + + +

Background color:

- + formControlName="background">
@@ -125,10 +144,13 @@ Below Fixed + + Use custom background color + +

Color:

- + formControlName="background">
@@ -190,10 +212,13 @@ Style 2 -

Color:

+

Primary background:

- + formControlName="primaryBackground"> + +

Secondary background:

+
@@ -213,10 +238,13 @@ Below -

Color:

+ + Use custom background color + + +

Background color:

- + formControlName="background">
@@ -236,10 +264,13 @@ Below -

Color:

+ + Use custom background color + + +

Background color:

- + formControlName="background">
@@ -301,10 +332,13 @@ Style 2 -

Color:

+

Primary background:

- + formControlName="primaryBackground"> + +

Secondary background:

+
@@ -323,10 +357,13 @@ Above Fixed -

Color:

+ + Use custom background color + + +

Background color:

- + formControlName="background"> @@ -345,10 +382,13 @@ Above Fixed -

Color:

+ + Use custom background color + + +

Background color:

- + formControlName="background"> @@ -405,9 +445,14 @@ Style 2 -

Color:

+

Primary background:

+ formControlName="primaryBackground"> + + +

Secondary background (Vertical):

+ @@ -427,10 +472,13 @@ Below -

Color:

+ + Use custom background color + + +

Background color:

- + formControlName="background"> @@ -449,10 +497,13 @@ Above Static -

Color:

+ + Use custom background color + + +

Background color:

- + formControlName="background"> diff --git a/src/@fuse/components/theme-options/theme-options.component.scss b/src/@fuse/components/theme-options/theme-options.component.scss index 446f13a9..37b1d606 100644 --- a/src/@fuse/components/theme-options/theme-options.component.scss +++ b/src/@fuse/components/theme-options/theme-options.component.scss @@ -9,7 +9,7 @@ } } -:host { +fuse-theme-options { display: flex; overflow: hidden; @@ -45,7 +45,6 @@ flex: 1 0 auto; flex-direction: column; position: relative; - border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 2px; padding: 28px 16px 8px 16px; margin: 16px 0; @@ -58,14 +57,11 @@ padding: 0 8px; font-size: 16px; font-weight: 500; - background: white; - color: rgba(0, 0, 0, 0.54); } h3 { font-size: 14px; font-weight: 500; - color: rgba(0, 0, 0, 0.54); margin: 24px 0 16px 0; padding: 0; diff --git a/src/@fuse/components/theme-options/theme-options.component.ts b/src/@fuse/components/theme-options/theme-options.component.ts index a4496ad2..b774b72d 100644 --- a/src/@fuse/components/theme-options/theme-options.component.ts +++ b/src/@fuse/components/theme-options/theme-options.component.ts @@ -1,5 +1,6 @@ -import { Component, HostBinding, OnDestroy, OnInit, Renderer2 } from '@angular/core'; +import { Component, HostBinding, Inject, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; +import { DOCUMENT } from '@angular/common'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -9,10 +10,11 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service'; @Component({ - selector : 'fuse-theme-options', - templateUrl: './theme-options.component.html', - styleUrls : ['./theme-options.component.scss'], - animations : fuseAnimations + selector : 'fuse-theme-options', + templateUrl : './theme-options.component.html', + styleUrls : ['./theme-options.component.scss'], + encapsulation: ViewEncapsulation.None, + animations : fuseAnimations }) export class FuseThemeOptionsComponent implements OnInit, OnDestroy { @@ -28,6 +30,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy /** * Constructor * + * @param {DOCUMENT} document * @param {FormBuilder} _formBuilder * @param {FuseConfigService} _fuseConfigService * @param {FuseNavigationService} _fuseNavigationService @@ -35,6 +38,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy * @param {Renderer2} _renderer */ constructor( + @Inject(DOCUMENT) private document: any, private _formBuilder: FormBuilder, private _fuseConfigService: FuseConfigService, private _fuseNavigationService: FuseNavigationService, @@ -61,25 +65,29 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy // Build the config form // noinspection TypeScriptValidateTypes this.form = this._formBuilder.group({ + colorTheme : new FormControl(), layout : this._formBuilder.group({ style : new FormControl(), width : new FormControl(), navbar : this._formBuilder.group({ - background: new FormControl(), - folded : new FormControl(), - hidden : new FormControl(), - position : new FormControl(), - variant : new FormControl() + primaryBackground : new FormControl(), + secondaryBackground: new FormControl(), + folded : new FormControl(), + hidden : new FormControl(), + position : new FormControl(), + variant : new FormControl() }), toolbar : this._formBuilder.group({ - background: new FormControl(), - hidden : new FormControl(), - position : new FormControl() + background : new FormControl(), + customBackgroundColor: new FormControl(), + hidden : new FormControl(), + position : new FormControl() }), footer : this._formBuilder.group({ - background: new FormControl(), - hidden : new FormControl(), - position : new FormControl() + background : new FormControl(), + customBackgroundColor: new FormControl(), + hidden : new FormControl(), + position : new FormControl() }), sidepanel: this._formBuilder.group({ hidden : new FormControl(), @@ -179,21 +187,24 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy layout: { width : 'fullwidth', navbar : { - background: 'mat-fuse-dark-700-bg', - folded : false, - hidden : false, - position : 'left', - variant : 'vertical-style-1' + primaryBackground : 'fuse-navy-700', + secondaryBackground: 'indigo-600', + folded : false, + hidden : false, + position : 'left', + variant : 'vertical-style-1' }, toolbar : { - background: 'mat-white-500-bg', - hidden : false, - position : 'below-static' + background : 'fuse-white-500', + customBackgroundColor: false, + hidden : false, + position : 'below-static' }, footer : { - background: 'mat-fuse-dark-900-bg', - hidden : false, - position : 'below-static' + background : 'fuse-navy-900', + customBackgroundColor: true, + hidden : false, + position : 'below-static' }, sidepanel: { hidden : false, @@ -212,21 +223,24 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy layout: { width : 'fullwidth', navbar : { - background: 'mat-fuse-dark-700-bg', - folded : false, - hidden : false, - position : 'left', - variant : 'vertical-style-1' + primaryBackground : 'fuse-navy-700', + secondaryBackground: 'indigo-600', + folded : false, + hidden : false, + position : 'left', + variant : 'vertical-style-1' }, toolbar : { - background: 'mat-white-500-bg', - hidden : false, - position : 'below' + background : 'fuse-white-500', + customBackgroundColor: false, + hidden : false, + position : 'below' }, footer : { - background: 'mat-fuse-dark-900-bg', - hidden : false, - position : 'below' + background : 'fuse-navy-900', + customBackgroundColor: true, + hidden : false, + position : 'below' }, sidepanel: { hidden : false, @@ -245,21 +259,24 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy layout: { width : 'fullwidth', navbar : { - background: 'mat-fuse-dark-700-bg', - folded : false, - hidden : false, - position : 'left', - layout : 'vertical-style-1' + primaryBackground : 'fuse-navy-700', + secondaryBackground: 'indigo-600', + folded : false, + hidden : false, + position : 'left', + layout : 'vertical-style-1' }, toolbar : { - background: 'mat-white-500-bg', - hidden : false, - position : 'above-static' + background : 'fuse-white-500', + customBackgroundColor: false, + hidden : false, + position : 'above-static' }, footer : { - background: 'mat-fuse-dark-900-bg', - hidden : false, - position : 'above-static' + background : 'fuse-navy-900', + customBackgroundColor: true, + hidden : false, + position : 'above-static' }, sidepanel: { hidden : false, @@ -278,21 +295,24 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy layout: { width : 'fullwidth', navbar : { - background: 'mat-fuse-dark-700-bg', - folded : false, - hidden : false, - position : 'top', - variant : 'vertical-style-1' + primaryBackground : 'fuse-navy-700', + secondaryBackground: 'indigo-600', + folded : false, + hidden : false, + position : 'top', + variant : 'vertical-style-1' }, toolbar : { - background: 'mat-white-500-bg', - hidden : false, - position : 'above' + background : 'fuse-white-500', + customBackgroundColor: false, + hidden : false, + position : 'above' }, footer : { - background: 'mat-fuse-dark-900-bg', - hidden : false, - position : 'above-fixed' + background : 'fuse-navy-900', + customBackgroundColor: true, + hidden : false, + position : 'above-fixed' }, sidepanel: { hidden : false, diff --git a/src/@fuse/components/theme-options/theme-options.module.ts b/src/@fuse/components/theme-options/theme-options.module.ts index 4a764bff..f9e6b043 100644 --- a/src/@fuse/components/theme-options/theme-options.module.ts +++ b/src/@fuse/components/theme-options/theme-options.module.ts @@ -2,11 +2,11 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FlexLayoutModule } from '@angular/flex-layout'; -import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material'; +import { MatButtonModule, MatCheckboxModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material'; import { FuseDirectivesModule } from '@fuse/directives/directives'; -import { FuseSidebarModule } from '@fuse/components/sidebar/sidebar.module'; import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module'; +import { FuseSidebarModule } from '@fuse/components/sidebar/sidebar.module'; import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-options.component'; @@ -22,6 +22,7 @@ import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme- FlexLayoutModule, MatButtonModule, + MatCheckboxModule, MatDividerModule, MatFormFieldModule, MatIconModule, diff --git a/src/@fuse/components/theme-options/theme-options.theme.scss b/src/@fuse/components/theme-options/theme-options.theme.scss new file mode 100644 index 00000000..022cb0b2 --- /dev/null +++ b/src/@fuse/components/theme-options/theme-options.theme.scss @@ -0,0 +1,27 @@ +@mixin fuse-theme-options-theme($theme) { + + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + fuse-theme-options { + + .theme-options-panel { + + form { + + .group { + border: 1px solid map-get($foreground, divider); + + h2 { + background: map-get($background, background); + color: map-get($foreground, secondary-text); + } + + h3 { + color: map-get($foreground, secondary-text); + } + } + } + } + } +} \ No newline at end of file diff --git a/src/@fuse/components/widget/widget.theme.scss b/src/@fuse/components/widget/widget.theme.scss new file mode 100644 index 00000000..667412c3 --- /dev/null +++ b/src/@fuse/components/widget/widget.theme.scss @@ -0,0 +1,13 @@ +@mixin fuse-widget-theme($theme) { + + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + fuse-widget { + + > .fuse-widget-front, + > .fuse-widget-back { + background: map-get($background, card); + } + } +} \ No newline at end of file diff --git a/src/@fuse/mat-colors/index.ts b/src/@fuse/mat-colors/index.ts index 9597ff50..e2fd17e2 100644 --- a/src/@fuse/mat-colors/index.ts +++ b/src/@fuse/mat-colors/index.ts @@ -4,6 +4,7 @@ const black12 = 'rgba(black, 0.12)'; const white12 = 'rgba(white, 0.12)'; const black6 = 'rgba(black, 0.06)'; const white6 = 'rgba(white, 0.06)'; + const matColors = { 'red': { 50 : '#ffebee', @@ -635,7 +636,8 @@ const matColors = { A700: white87 } }, - 'fuse-dark': { + + 'fuse-navy': { 50 : '#ECECEE', 100 : '#C5C6CB', 200 : '#9EA1A9', @@ -667,13 +669,15 @@ const matColors = { A700: white87 } }, - white : { + + 'fuse-white': { 500 : 'white', contrast: { 500: black87 } }, - black : { + + 'fuse-black': { 500 : 'black', contrast: { 500: 'white' @@ -693,7 +697,6 @@ const matPresetColors = [ export class MatColors { public static all = matColors; - public static presets = matPresetColors; public static getColor(colorName) @@ -702,6 +705,7 @@ export class MatColors { return matColors[colorName]; } + return false; } } diff --git a/src/@fuse/scss/core.scss b/src/@fuse/scss/core.scss index 885df826..fc6f1675 100644 --- a/src/@fuse/scss/core.scss +++ b/src/@fuse/scss/core.scss @@ -10,15 +10,12 @@ // Fuse @import "fuse"; +// Theme +@import "theme"; + // Include core Angular Material styles @include mat-core(); -// Setup the typography -@include angular-material-typography($typography); - -// Create an Angular Material theme from the $theme map -@include angular-material-theme($theme); - // Partials @import "partials/reset"; @import "partials/normalize"; diff --git a/src/@fuse/scss/fuse.scss b/src/@fuse/scss/fuse.scss index dc21c9b7..20e8b847 100644 --- a/src/@fuse/scss/fuse.scss +++ b/src/@fuse/scss/fuse.scss @@ -1,5 +1,5 @@ -// Material theming -@import "theming"; +// Material theming tools +@import '~@angular/material/theming'; // Breakpoint mixins -@import "mixins/breakpoints"; +@import "mixins/breakpoints"; \ No newline at end of file diff --git a/src/@fuse/scss/mixins/_breakpoints.scss b/src/@fuse/scss/mixins/_breakpoints.scss index 2122af9c..3533c6a4 100644 --- a/src/@fuse/scss/mixins/_breakpoints.scss +++ b/src/@fuse/scss/mixins/_breakpoints.scss @@ -25,7 +25,7 @@ $grid-breakpoints: ( @mixin media-breakpoint($breakpointName) { - $mediaQuery: map_get($breakpoints, $breakpointName); + $mediaQuery: map-get($breakpoints, $breakpointName); @if ($mediaQuery != null) { diff --git a/src/@fuse/scss/partials/_angular-material-fix.scss b/src/@fuse/scss/partials/_angular-material-fix.scss index 43035a14..43debd21 100644 --- a/src/@fuse/scss/partials/_angular-material-fix.scss +++ b/src/@fuse/scss/partials/_angular-material-fix.scss @@ -12,10 +12,6 @@ } // Fix: "Inconsistent font sizes across elements" -.mat-form-field-wrapper { - font-size: 16px; -} - .mat-checkbox { font-size: 16px; } @@ -34,7 +30,7 @@ background-color: rgba(0, 0, 0, 0.12); } -// Fix: "Some idiots using table-cell and inline-table in mat-select" +// Fix: "Table-cell and inline-table in mat-select" .mat-form-field { &.mat-form-field-type-mat-select { diff --git a/src/@fuse/scss/partials/_cards.scss b/src/@fuse/scss/partials/_cards.scss index 06ff9755..9d3788b4 100644 --- a/src/@fuse/scss/partials/_cards.scss +++ b/src/@fuse/scss/partials/_cards.scss @@ -1,7 +1,26 @@ +// ----------------------------------------------------------------------------------------------------- +// @ Theming +// ----------------------------------------------------------------------------------------------------- +@mixin cards-theme($theme) { + + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + .fuse-card { + background: map-get($background, card); + + .card-divider { + border-top: 1px solid map-get($foreground, divider); + } + } +} + +// ----------------------------------------------------------------------------------------------------- +// @ Cards +// ----------------------------------------------------------------------------------------------------- .fuse-card { max-width: 320px; min-width: 320px; - background: white; border-radius: 2px; @include mat-elevation(2); @@ -37,13 +56,8 @@ // Divider .card-divider { - border-top: 1px solid rgba(0, 0, 0, 0.12); margin: 16px; - &.light { - border-top-color: rgba(255, 255, 255, 0.12); - } - &.full-width { margin: 0; } diff --git a/src/@fuse/scss/partials/_colors.scss b/src/@fuse/scss/partials/_colors.scss index cc864cde..c68b3f01 100644 --- a/src/@fuse/scss/partials/_colors.scss +++ b/src/@fuse/scss/partials/_colors.scss @@ -1,23 +1,52 @@ -.secondary-text, -.icon, -i { - color: rgba(0, 0, 0, 0.54); +// ----------------------------------------------------------------------------------------------------- +// @ Theming +// ----------------------------------------------------------------------------------------------------- +@mixin colors-theme($theme) { + + $is-dark: map-get($theme, is-dark); + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + // Base colors + & { + color: map-get($foreground, text); + + // If it's a light theme, use a darker background + // color other than the default #fafafa + @if ($is-dark == false) { + background: #F5F5F5; + } @else { + background: map-get($background, background); + } + } + + .secondary-text { + color: map-get($foreground, secondary-text); + } + + .icon, + i { + color: map-get($foreground, icon); + } + + .hint-text { + color: map-get($foreground, hint-text); + } + + .disabled-text { + color: map-get($foreground, disabled-text); + } + + .fade-text, + .divider { + color: map-get($foreground, divider); + } } -.hint-text, -.disabled-text { - color: rgba(0, 0, 0, 0.38); -} - -.divider { - color: rgba(0, 0, 0, 0.12); -} - -// Material colors map +// ----------------------------------------------------------------------------------------------------- +// @ Material colors map +// ----------------------------------------------------------------------------------------------------- $matPalettes: ( - primary: $primary, - accent: $accent, - warn: $warn, red: $mat-red, pink: $mat-pink, purple: $mat-purple, @@ -36,17 +65,16 @@ $matPalettes: ( deep-orange: $mat-deep-orange, brown: $mat-brown, grey: $mat-grey, - blue-grey: $mat-blue-grey, - white: $mat-white, - black: $mat-black, - fuse-dark: $mat-fusedark + blue-grey: $mat-blue-grey ); // Material color hues list $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700; -// Text color levels generator mixin -@mixin generateTextColorLevels($classes, $contrast) { +// ----------------------------------------------------------------------------------------------------- +// @ Text color levels generator +// ----------------------------------------------------------------------------------------------------- +@mixin generate-text-color-levels($classes, $contrast) { // If the contrast is dark... @if ($contrast == 'dark') { @@ -125,7 +153,10 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70 } } -@mixin generateMaterialElementColors($classes, $contrast) { +// ----------------------------------------------------------------------------------------------------- +// @ Material element colors generator +// ----------------------------------------------------------------------------------------------------- +@mixin generate-material-element-colors($classes, $contrast) { // If the contrast color is light... $fuseForeground: ( @@ -150,53 +181,55 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70 // Native Input input[type="text"] { - color: map_get($fuseForeground, base); + color: map-get($fuseForeground, base); } // Input .mat-form-field-label { - color: map_get($fuseForeground, hint-text); + color: map-get($fuseForeground, hint-text); } .mat-form-field-underline { - background-color: map_get($fuseForeground, divider); + background-color: map-get($fuseForeground, divider); } // Select .mat-select-trigger, .mat-select-arrow { - color: map_get($fuseForeground, hint-text); + color: map-get($fuseForeground, hint-text); } .mat-select-underline { - background-color: map_get($fuseForeground, divider); + background-color: map-get($fuseForeground, divider); } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: map_get($fuseForeground, hint-text); + color: map-get($fuseForeground, hint-text); } .mat-select-content, .mat-select-panel-done-animating { - background: map_get($background, card); + //background: map-get($background, card); } .mat-select-value { - color: map_get($fuseForeground, text); + color: map-get($fuseForeground, text); } } } -// Color classes generator mixin -@mixin generateColorClasses($colorName, $color, $contrastColor, $hue) { +// ----------------------------------------------------------------------------------------------------- +// @ Color classes generator +// ----------------------------------------------------------------------------------------------------- +@mixin generate-color-classes($colorName, $color, $contrastColor, $hue) { .#{$colorName}#{$hue}-bg { background-color: $color !important; } - .mat-#{$colorName}#{$hue}-bg { + .#{$colorName}#{$hue} { background-color: $color !important; color: $contrastColor !important; @@ -231,13 +264,10 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70 } } -@mixin generateFuseColorClasses($primary, $accent, $warn) { - - $palettes: ( - primary: $primary, - accent: $accent, - warn: $warn - ); +// ----------------------------------------------------------------------------------------------------- +// @ Fuse color classes +// ----------------------------------------------------------------------------------------------------- +@mixin fuse-color-classes($palettes) { // Define contrast lists $light-contrasting-classes: (); @@ -258,32 +288,32 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70 @if ($color != null and $contrast != null) { // Generate color classes - @include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}'); + @include generate-color-classes($paletteName, $color, $contrast, '-#{$hue}'); // If the contrast color is dark @if (rgba(black, 1) == rgba($contrast, 1)) { - $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma'); + $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.#{$paletteName}-#{$hue}'), 'comma'); } // if the contrast color is light @else { - $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma'); + $light-contrasting-classes: append($light-contrasting-classes, unquote('.#{$paletteName}-#{$hue}'), 'comma'); } // Run the generator one more time for default values (500) @if ($hue == 500) { // Generate color classes - @include generateColorClasses($paletteName, $color, $contrast, ''); + @include generate-color-classes($paletteName, $color, $contrast, ''); // Add color to the correct list depending on the contrasting color // If the contrast color is dark @if (rgba(black, 1) == rgba($contrast, 1)) { - $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma'); + $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.#{$paletteName}'), 'comma'); } // if the contrast color is light @else { - $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma'); + $light-contrasting-classes: append($light-contrasting-classes, unquote('.#{$paletteName}'), 'comma'); } } } @@ -291,68 +321,13 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70 } // Generate contrasting colors - @include generateTextColorLevels($dark-contrasting-classes, 'dark'); - @include generateTextColorLevels($light-contrasting-classes, 'light'); - @include generateMaterialElementColors($dark-contrasting-classes, 'dark'); - @include generateMaterialElementColors($light-contrasting-classes, 'light'); + @include generate-text-color-levels($dark-contrasting-classes, 'dark'); + @include generate-text-color-levels($light-contrasting-classes, 'light'); + @include generate-material-element-colors($dark-contrasting-classes, 'dark'); + @include generate-material-element-colors($light-contrasting-classes, 'light'); } -// Generate the color classes... - -// Define contrast lists -$light-contrasting-classes: (); -$dark-contrasting-classes: (); - -@each $paletteName, $palette in $matPalettes { - - // Get the contrasts map - $contrasts: map-get($palette, 'contrast'); - - @each $hue in $matHues { - - // Get the color and the contrasting color - $color: map-get($palette, $hue); - $contrast: map-get($contrasts, $hue); - - @if ($color != null and $contrast != null) { - - // Generate color classes - @include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}'); - - // Add color to the correct list depending on the contrasting color - - // If the contrast color is dark - @if (rgba(black, 1) == rgba($contrast, 1)) { - $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma'); - } - // if the contrast color is light - @else { - $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma'); - } - - // Run the generator one more time for default values (500) - @if ($hue == 500) { - - // Generate color classes - @include generateColorClasses($paletteName, $color, $contrast, ''); - - // Add color to the correct list depending on the contrasting color - - // If the contrast color is dark - @if (rgba(black, 1) == rgba($contrast, 1)) { - $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma'); - } - // if the contrast color is light - @else { - $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma'); - } - } - } - } -} - -// Generate contrasting colors -@include generateTextColorLevels($dark-contrasting-classes, 'dark'); -@include generateTextColorLevels($light-contrasting-classes, 'light'); -@include generateMaterialElementColors($dark-contrasting-classes, 'dark'); -@include generateMaterialElementColors($light-contrasting-classes, 'light'); +// ----------------------------------------------------------------------------------------------------- +// @ Generate Fuse color classes for default Material palettes +// ----------------------------------------------------------------------------------------------------- +@include fuse-color-classes($matPalettes); diff --git a/src/@fuse/scss/partials/_global.scss b/src/@fuse/scss/partials/_global.scss index 9a100ea6..c8ab03b1 100644 --- a/src/@fuse/scss/partials/_global.scss +++ b/src/@fuse/scss/partials/_global.scss @@ -9,7 +9,6 @@ body { margin: 0; padding: 0; overflow: hidden; - background: #F5F5F5; } body { diff --git a/src/@fuse/scss/partials/_helpers.scss b/src/@fuse/scss/partials/_helpers.scss index 8594849f..b8e0a4cc 100644 --- a/src/@fuse/scss/partials/_helpers.scss +++ b/src/@fuse/scss/partials/_helpers.scss @@ -199,7 +199,7 @@ $border-style: 1px solid rgba(0, 0, 0, 0.12); } .border-horizontal, -.b-x { +.bx { border-left: $border-style; border-right: $border-style; } diff --git a/src/@fuse/scss/partials/_material.scss b/src/@fuse/scss/partials/_material.scss index 75c1b02c..7f6b9f72 100644 --- a/src/@fuse/scss/partials/_material.scss +++ b/src/@fuse/scss/partials/_material.scss @@ -1,6 +1,169 @@ -/*----------------------------------------------------------------*/ -/* Avatars -/*----------------------------------------------------------------*/ +// ----------------------------------------------------------------------------------------------------- +// @ Theming +// ----------------------------------------------------------------------------------------------------- +@mixin material-theme($theme) { + + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + // ----------------------------------------------------------------------------------------------------- + // @ Avatar + // ----------------------------------------------------------------------------------------------------- + .avatar { + color: map-get($foreground, text); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Forms + // ----------------------------------------------------------------------------------------------------- + .form-wrapper { + background-color: map-get($background, card); + } + + // ----------------------------------------------------------------------------------------------------- + // @ Navigation - Simple + // ----------------------------------------------------------------------------------------------------- + .navigation-simple { + + .item { + + &.selected { + background-color: map-get($background, hover); + } + } + + .subheader { + border-top: 1px solid map-get($foreground, divider); + } + } + + // ----------------------------------------------------------------------------------------------------- + // @ Pagination - Simple + // ----------------------------------------------------------------------------------------------------- + .simple-pagination { + background: map-get($background, card); + + .pagination-item { + color: map-get($foreground, secondary-text); + + &:hover { + color: map-get($foreground, text); + } + + &.disabled { + color: map-get($foreground, disabled-text); + } + } + } + + // ----------------------------------------------------------------------------------------------------- + // @ Price tables + // ----------------------------------------------------------------------------------------------------- + .price-tables { + + .price-table { + background: map-get($background, card); + + &.style-1 { + + .price { + + .currency { + color: map-get($foreground, secondary-text); + } + + .period { + color: map-get($foreground, secondary-text); + } + } + } + + &.style-2 { + + .price { + + .currency { + color: map-get($foreground, secondary-text); + } + + } + + .period { + color: map-get($foreground, secondary-text); + } + } + + &.style-3 { + + .package-type { + + .subtitle { + color: map-get($foreground, secondary-text); + } + } + + .terms { + color: map-get($foreground, secondary-text); + } + + .note { + color: map-get($foreground, secondary-text); + } + } + } + } + + // ------------------------------------------------------------------------------------------------- + // @ Table - Simple + // ------------------------------------------------------------------------------------------------- + .simple-table-container { + background: map-get($background, card); + } + + table { + + &.simple { + + thead { + + tr { + + th { + color: map-get($foreground, secondary-text); + border-bottom: 1px solid map-get($foreground, divider); + } + } + } + + tbody { + + tr { + + td { + border-bottom: 1px solid map-get($foreground, divider); + } + } + } + + &.clickable { + + tbody { + + tr { + + &:hover { + background-color: map-get($background, hover); + } + } + } + } + } + } +} + +// ----------------------------------------------------------------------------------------------------- +// @ Avatar +// ----------------------------------------------------------------------------------------------------- .avatar { width: 40px; min-width: 40px; @@ -11,7 +174,6 @@ font-size: 17px; font-weight: 500; text-align: center; - color: #FFFFFF; &.square { border-radius: 0; @@ -58,6 +220,7 @@ mat-icon.status { &.online { color: #4CAF50; + &:before { content: "check_circle"; } @@ -65,6 +228,7 @@ mat-icon.status { &.do-not-disturb { color: #F44336; + &:before { content: "do_not_disturb_on"; } @@ -73,6 +237,7 @@ mat-icon.status { &.away { background-color: #FFC107; color: #FFFFFF; + &:before { content: "access_time"; } @@ -81,17 +246,17 @@ mat-icon.status { &.offline { color: #646464; background-color: #FFFFFF; + &:before { content: "not_interested"; } } } -/*----------------------------------------------------------------*/ -/* Forms -/*----------------------------------------------------------------*/ +// ----------------------------------------------------------------------------------------------------- +// @ Forms +// ----------------------------------------------------------------------------------------------------- .form-wrapper { - background: #FFFFFF; padding: 16px; .form-title { @@ -100,9 +265,9 @@ mat-icon.status { } } -/*----------------------------------------------------------------*/ -/* Navigation - Simple -/*----------------------------------------------------------------*/ +// ----------------------------------------------------------------------------------------------------- +// @ Navigation - Simple +// ----------------------------------------------------------------------------------------------------- .navigation-simple { .item { @@ -125,21 +290,12 @@ mat-icon.status { font-weight: 500; line-height: 1; } - - &.selected { - background-color: rgba(0, 0, 0, 0.06); - } } .subheader { font-size: 13px; - border-top: 1px solid rgba(0, 0, 0, 0.12); font-weight: 500; margin-top: 8px; - - &.light { - border-top: 1px solid rgba(255, 255, 255, 0.12); - } } mat-divider { @@ -147,15 +303,14 @@ mat-icon.status { } } -/*----------------------------------------------------------------*/ -/* Pagination -/*----------------------------------------------------------------*/ +// ----------------------------------------------------------------------------------------------------- +// @ Pagination - Simple +// ----------------------------------------------------------------------------------------------------- .simple-pagination { position: relative; display: inline-flex; flex-direction: row; @include mat-elevation(1); - background-color: #FFFFFF; padding: 0 8px; .pagination-item { @@ -168,32 +323,24 @@ mat-icon.status { border-radius: 0; margin: 0; font-weight: normal; - color: rgba(0, 0, 0, 0.54); - - &:hover { - color: rgba(0, 0, 0, 0.87); - } &.active { cursor: default; - color: rgba(0, 0, 0, 0.87); } &.disabled { cursor: default; - color: rgba(0, 0, 0, 0.26); } } } -/*----------------------------------------------------------------*/ -/* Price Tables -/*----------------------------------------------------------------*/ +// ----------------------------------------------------------------------------------------------------- +// @ Price tables +// ----------------------------------------------------------------------------------------------------- .price-tables { .price-table { position: relative; - background-color: #FFFFFF; width: 280px; border-radius: 2px; margin: 12px; @@ -218,7 +365,6 @@ mat-icon.status { padding-right: 4px; font-size: 24px; font-weight: 500; - color: rgba(0, 0, 0, 0.54); } .value { @@ -230,7 +376,6 @@ mat-icon.status { .period { padding: 0 0 5px 4px; font-size: 17px; - color: rgba(0, 0, 0, 0.54); } } @@ -279,7 +424,6 @@ mat-icon.status { padding-right: 4px; font-size: 24px; font-weight: 500; - color: rgba(0, 0, 0, 0.54); } .value { @@ -293,7 +437,6 @@ mat-icon.status { padding: 0 32px; font-size: 15px; font-weight: 500; - color: rgba(0, 0, 0, 0.54); text-align: center; } @@ -328,7 +471,6 @@ mat-icon.status { .subtitle { font-size: 17px; - color: rgba(0, 0, 0, 0.54); font-weight: 500; } } @@ -357,7 +499,6 @@ mat-icon.status { .terms { margin: 32px; font-size: 15px; - color: rgba(0, 0, 0, 0.54); .term { padding-bottom: 16px; @@ -375,17 +516,15 @@ mat-icon.status { .note { padding: 8px 32px 16px 32px; text-align: center; - color: rgba(0, 0, 0, 0.54); } } } } -/*----------------------------------------------------------------*/ -/* Table - Simple -/*----------------------------------------------------------------*/ +// ----------------------------------------------------------------------------------------------------- +// @ Table - Simple +// ----------------------------------------------------------------------------------------------------- .simple-table-container { - background: #FFFFFF; .table-title { font-size: 20px; @@ -408,8 +547,6 @@ table { th { padding: 16px 8px; font-weight: 500; - color: rgba(0, 0, 0, 0.54); - border-bottom: 1px solid rgba(0, 0, 0, 0.12); white-space: nowrap; &:first-child { @@ -429,7 +566,6 @@ table { td { padding: 16px 8px; - border-bottom: 1px solid rgba(0, 0, 0, 0.12); &:first-child { padding-left: 24px; @@ -455,12 +591,8 @@ table { tr { cursor: pointer; - - &:hover { - background: rgba(0, 0, 0, 0.03); - } } } } } -} +} \ No newline at end of file diff --git a/src/@fuse/scss/partials/_navigation.scss b/src/@fuse/scss/partials/_navigation.scss index f9fb868d..1b190b4c 100644 --- a/src/@fuse/scss/partials/_navigation.scss +++ b/src/@fuse/scss/partials/_navigation.scss @@ -64,11 +64,11 @@ } &:hover { - background-color: map-get($background, hover); + background-color: rgba(0, 0, 0, 0.04); } .mat-ripple-element { - background-color: map-get($background, hover); + background-color: rgba(0, 0, 0, 0.04); } &.active { diff --git a/src/@fuse/scss/partials/_page-layouts.scss b/src/@fuse/scss/partials/_page-layouts.scss index 943a4af2..3384fcca 100644 --- a/src/@fuse/scss/partials/_page-layouts.scss +++ b/src/@fuse/scss/partials/_page-layouts.scss @@ -1,4 +1,83 @@ -// Page Layouts +// ----------------------------------------------------------------------------------------------------- +// @ Theming +// ----------------------------------------------------------------------------------------------------- +@mixin page-layouts-theme($theme) { + + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + .page-layout { + + // Carded layout + &.carded { + + // Fullwidth + &.fullwidth { + + > .center { + + > .content-card { + background: map-get($background, card); + + > .toolbar { + border-bottom-color: map-get($foreground, divider); + } + } + } + } + + // Left / Right sidebar + &.left-sidebar, + &.right-sidebar { + + > .center { + + > .content-card { + background: map-get($background, card); + + > .toolbar { + border-bottom-color: map-get($foreground, divider); + } + } + } + } + } + + // Simple layout + &.simple { + + // Left / Right sidebar + &.left-sidebar, + &.right-sidebar { + + > .center { + + > .content { + background: map-get($background, card); + } + } + + // Inner sidebar + &.inner-sidebar { + + > .content { + + > .center { + + > .content { + background: map-get($background, card); + } + } + } + } + } + } + } +} + +// ----------------------------------------------------------------------------------------------------- +// @ Page Layouts +// ----------------------------------------------------------------------------------------------------- $carded-header-height: 200px !default; $carded-header-height-sm: 160px !default; $carded-toolbar-height: 64px !default; @@ -75,7 +154,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too display: flex; justify-content: flex-start; align-items: center; - border-bottom: 1px solid rgba(0, 0, 0, 0.12); + border-bottom: 1px solid; height: $carded-toolbar-height; min-height: $carded-toolbar-height; max-height: $carded-toolbar-height; @@ -273,7 +352,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too justify-content: flex-start; align-items: center; flex: 1 1 auto; - border-bottom: 1px solid rgba(0, 0, 0, 0.12); + border-bottom: 1px solid; height: $carded-toolbar-height; min-height: $carded-toolbar-height; max-height: $carded-toolbar-height; @@ -516,7 +595,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too } } - // Inner Sidebar + // Inner sidebar &.inner-sidebar { flex-direction: column; overflow: hidden; diff --git a/src/@fuse/scss/partials/_typography.scss b/src/@fuse/scss/partials/_typography.scss index d3251b11..f6c2d184 100644 --- a/src/@fuse/scss/partials/_typography.scss +++ b/src/@fuse/scss/partials/_typography.scss @@ -1,3 +1,44 @@ +// ----------------------------------------------------------------------------------------------------- +// @ Theming +// ----------------------------------------------------------------------------------------------------- +@mixin typography-theme($theme) { + + $background: map-get($theme, background); + $accent: map-get($theme, accent); + $is-dark: map-get($theme, is-dark); + + a { + color: map-get($accent, default); + } + + code { + + &:not(.highlight) { + background-color: map-get($background, app-bar); + } + } + + .changelog { + + .entry { + background-color: map-get($background, card); + } + } + + .text-boxed { + @if ($is-dark) { + background-color: rgba(255, 255, 255, 0.12); + color: rgba(255, 255, 255, 0.54); + } @else { + background-color: rgba(0, 0, 0, 0.12); + color: rgba(0, 0, 0, 0.54); + } + } +} + +// ----------------------------------------------------------------------------------------------------- +// @ Typography +// ----------------------------------------------------------------------------------------------------- html { font-size: 62.5%; font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif; @@ -46,7 +87,6 @@ h6, .h6 { // Links a { - color: mat-color($accent); text-decoration: none; &:not(.mat-button):not(.mat-raised-button):not(.mat-icon-button) { @@ -103,11 +143,10 @@ code { font-family: 'Monaco', 'Menlo', 'Consolas', 'Ubuntu Mono', monospace;; &:not(.highlight) { - background: rgba(0, 0, 0, 0.065); color: #106CC8; - margin: 0 1px; padding: 2px 3px; border-radius: 2px; + line-height: 1.7; } } @@ -237,6 +276,7 @@ strong { line-height: 1.25; } +.line-height-1\.5, .line-height-1\.50 { line-height: 1.5; } @@ -245,6 +285,19 @@ strong { line-height: 1.75; } +// Letter spacing helpers +.letter-spacing-condensed { + letter-spacing: -0.02em; +} + +.letter-spacing-normal { + letter-spacing: normal; +} + +.letter-spacing-relaxed { + letter-spacing: 0.02em; +} + // Boxed text .text-boxed { border-radius: 2px; @@ -252,17 +305,9 @@ strong { margin: 0 8px; font-size: 11px; font-weight: 500; - color: rgba(0, 0, 0, 0.54); - background-color: rgba(0, 0, 0, 0.12); white-space: nowrap; } -// Boxed text light -.text-boxed-light { - @extend .text-boxed; - background-color: rgba(255, 255, 255, 0.7); -} - // Truncate .text-truncate { display: block; @@ -280,7 +325,6 @@ strong { .changelog { .entry { - background: white; margin-bottom: 24px; padding: 24px 32px; @include mat-elevation(2); diff --git a/src/@fuse/scss/partials/plugins/_ng-pick-datetime.scss b/src/@fuse/scss/partials/plugins/_ng-pick-datetime.scss deleted file mode 100644 index c7ddf34d..00000000 --- a/src/@fuse/scss/partials/plugins/_ng-pick-datetime.scss +++ /dev/null @@ -1,361 +0,0 @@ -/*@font-face { - font-family: 'fontello'; - src: url('../font/fontello.eot?81091010'); - src: url('../font/fontello.eot?81091010#iefix') format('embedded-opentype'), - url('../font/fontello.woff2?81091010') format('woff2'), - url('../font/fontello.woff?81091010') format('woff'), - url('../font/fontello.ttf?81091010') format('truetype'), - url('../font/fontello.svg?81091010#fontello') format('svg'); - font-weight: normal; - font-style: normal; -}*/ - -owl-date-time { - - [class^="icon-"]:before, [class*=" icon-"]:before { - font-family: "Material Icons"; - font-style: normal; - font-weight: normal; - speak: none; - - display: flex; - align-items: center; - justify-content: center; - - /* For safety - reset parent styles, that can break glyph codes*/ - font-variant: normal; - text-transform: none; - - /* Font smoothing. That was taken from TWBS */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - - .icon-cancel:before { - content: 'close'; - } - - .icon-up-open:before { - content: 'keyboard_arrow_up'; - } - - .icon-down-open:before { - content: 'keyboard_arrow_down'; - } - - .icon-left-open:before { - content: 'chevron_left'; - } - - .icon-right-open:before { - content: 'chevron_right'; - } - - $white: #FFFFFF; - $black: #000000; - $grey: #DDDDDD; - $blue: #0070BA; - - .owl-widget, - .owl-widget * { - box-sizing: border-box; - } - - .owl-widget { - font-size: 1em; - } - - .owl-state-focus { - - } - - .owl-corner-all { - border-radius: 2px; - } - - .owl-corner-top { - border-top-left-radius: 2px; - border-top-right-radius: 2px; - } - - .owl-state-default { - background: #FFFFFF; - color: rgba(0, 0, 0, 0.87); - } - - .owl-dateTime-inputWrapper { - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - - .owl-dateTime-input { - background: none !important; - padding: 0 !important; - cursor: pointer; - - .owl-inputtext { - margin: 0; - padding: 8px; - background: none !important; - color: rgba(0, 0, 0, 0.87); - } - } - - .owl-dateTime-cancel { - position: relative !important; - right: 0 !important; - top: 0 !important; - transform: none !important; - font-size: 16px !important; - width: 16px !important; - height: 16px !important; - min-width: 16px !important; - min-height: 16px !important; - line-height: 16px !important; - color: rgba(0, 0, 0, 0.54) !important; - } - } - - .owl-dateTime { - position: relative; - width: 140px; - - &.owl-dateTime-inline { - width: auto; - - .owl-dateTime-dialog { - position: relative; - z-index: auto; - } - } - } - - .owl-dateTime-dialog { - width: 256px; - user-select: none; - z-index: 99999; - top: 24px !important; - right: 0 !important; - left: auto !important; - @include mat-elevation(4); - } - - .owl-dateTime-dialogHeader { - height: 2.5em; - padding: .25em; - background-color: rgba(0, 0, 0, .1); - overflow-y: auto; - -webkit-overflow-scrolling: touch; - } - - .owl-calendar-wrapper { - padding: 16px !important; - } - - .owl-calendar-control { - - .owl-calendar-controlNav { - display: flex; - align-items: center; - justify-content: center; - - .nav-prev, - .nav-next { - display: flex; - - &:before { - font-family: "Material Icons"; - position: relative !important; - right: 0 !important; - top: 0 !important; - transform: none !important; - font-size: 20px !important; - width: 20px !important; - height: 20px !important; - min-width: 20px !important; - min-height: 20px !important; - line-height: 20px !important; - content: "chevron_left"; - color: rgba(0, 0, 0, 0.54); - } - } - - .nav-next:before { - content: "chevron_right"; - } - } - - .owl-calendar-controlContent { - - .month-control, - .year-control { - font-size: 14px; - font-weight: 500; - cursor: pointer; - } - - .month-control { - margin-right: 8px; - } - - .year-control { - } - } - } - - .owl-calendar { - - table { - border-spacing: 0 !important; - } - - tbody td { - - &.owl-calendar-selected { - background-color: $blue; - color: $white; - } - - &.owl-calendar-invalid { - color: #ACACAC; - } - - &.owl-calendar-outFocus { - color: $grey; - } - - &.owl-calendar-hidden { - visibility: hidden; - } - - &:not(.owl-calendar-selected):not(.owl-calendar-invalid):hover { - background-color: lighten($blue, 50%); - color: $black; - } - } - } - - .owl-years, - .owl-months { - - td.owl-year, - td.owl-month { - padding: 0; - font-size: 16px; - width: 72px; - height: 48px; - line-height: 48px; - cursor: pointer; - } - } - - .owl-calendar-yearArrow { - width: 24px !important; - height: 24px !important; - - &.left { - left: -16px !important; - } - - &.right { - right: -16px !important; - } - } - - .owl-weekdays { - - th.owl-weekday { - height: 32px; - line-height: 32px; - text-align: center; - font-size: 12px; - padding: 0; - color: rgba(0, 0, 0, 0.37); - } - } - - .owl-days { - - td.owl-day { - height: 32px; - width: 32px; - line-height: 32px; - cursor: pointer; - border-radius: 100%; - padding: 0; - - &.owl-day-today:before { - content: ''; - display: block; - position: absolute; - right: 2px; - top: 2px; - border-top: .5em solid lighten($blue, 20%); - border-left: .5em solid transparent; - } - } - } - - .owl-timer-wrapper { - height: 88px; - padding: 8px !important; - background-color: rgba(0, 0, 0, 0.06); - - .owl-timer-input { - background: none; - width: 100% !important; - text-align: center; - } - - .owl-timer-text { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 40%; - font-size: 20px; - } - - .owl-meridian-btn { - font-size: .8em; - color: $blue; - background-image: none; - background-color: transparent; - border-color: $blue; - - &:hover { - color: $white; - background-color: $blue; - border-color: $blue; - } - } - } - - .owl-timer-divider { - display: inline-block; - position: absolute; - width: 8px; - height: 100%; - left: -2px; - - .owl-timer-dot { - display: block; - background: rgba(0, 0, 0, 0.37); - width: 3px; - height: 3px; - position: absolute; - left: 50%; - border-radius: 100%; - transform: translateX(-50%); - - &.dot-top { - top: 40%; - } - - &.dot-bottom { - bottom: 40%; - } - } - } -} diff --git a/src/@fuse/scss/partials/plugins/_ngx-datatable.scss b/src/@fuse/scss/partials/plugins/_ngx-datatable.scss index bdd69726..352b1b8c 100644 --- a/src/@fuse/scss/partials/plugins/_ngx-datatable.scss +++ b/src/@fuse/scss/partials/plugins/_ngx-datatable.scss @@ -1,3 +1,76 @@ +// ----------------------------------------------------------------------------------------------------- +// @ Theming +// ----------------------------------------------------------------------------------------------------- +@mixin ngx-datatable-theme($theme) { + + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + ngx-datatable { + + &.material { + background: map-get($background, card); + color: map-get($foreground, text); + + .datatable-header { + + .datatable-header-cell { + color: map-get($foreground, secondary-text); + } + } + + .datatable-body { + + .datatable-row-wrapper { + border-bottom-color: map-get($foreground, divider); + + &:first-child { + border-top-color: map-get($foreground, divider); + } + + .datatable-body-row { + + .datatable-body-cell { + color: map-get($foreground, text); + } + } + } + } + + .datatable-footer { + color: map-get($foreground, secondary-text); + + .datatable-pager { + + a { + color: map-get($foreground, secondary-text); + } + } + } + + &:not(.cell-selection) { + + .datatable-body { + + .datatable-row-wrapper { + + .datatable-body-row { + + &:hover { + background-color: map-get($background, hover); + + .datatable-row-group { + background-color: map-get($background, hover); + } + } + } + } + } + } + } + } +} + .ngx-datatable { &.material { @@ -42,12 +115,11 @@ } .datatable-row-wrapper { - border-bottom: 1px solid rgba(0, 0, 0, 0.12); + border-bottom: 1px solid; &:first-child { - border-top: 1px solid rgba(0, 0, 0, 0.12); + border-top: 1px solid; } - .datatable-body-cell { display: inline-flex; align-items: center; @@ -118,48 +190,63 @@ .datatable-icon-filter:before { content: "filter_list"; } + .datatable-icon-collapse:before { content: "unfold_less"; } + .datatable-icon-expand:before { content: "unfold_more"; } + .datatable-icon-close:before { content: "close"; } + .datatable-icon-up:before { content: "keyboard_arrow_up"; } + .datatable-icon-down:before { content: "keyboard_arrow_down"; } + .datatable-icon-sort:before { content: "sort"; } + .datatable-icon-done:before { content: "done"; } + .datatable-icon-done-all:before { content: "done_all"; } + .datatable-icon-search:before { content: "search"; } + .datatable-icon-pin:before { content: "lock"; } + .datatable-icon-add:before { content: "add"; } + .datatable-icon-left:before { content: "chevron_left"; } + .datatable-icon-right:before { content: "chevron_right"; } + .datatable-icon-skip:before { content: "skip_next"; } + .datatable-icon-prev:before { content: "skip_previous"; } \ No newline at end of file diff --git a/src/@fuse/scss/theme.scss b/src/@fuse/scss/theme.scss new file mode 100644 index 00000000..18b30a4d --- /dev/null +++ b/src/@fuse/scss/theme.scss @@ -0,0 +1,30 @@ +@import "src/@fuse/components/countdown/countdown.theme"; +@import "src/@fuse/components/material-color-picker/material-color-picker.theme"; +@import "src/@fuse/components/search-bar/search-bar.theme"; +@import "src/@fuse/components/shortcuts/shortcuts.theme"; +@import "src/@fuse/components/sidebar/sidebar.theme"; +@import "src/@fuse/components/theme-options/theme-options.theme"; +@import "src/@fuse/components/widget/widget.theme"; + +@mixin fuse-core-theme($theme) { + + // Theming for Fuse core styles + @include colors-theme($theme); + @include cards-theme($theme); + @include material-theme($theme); + @include page-layouts-theme($theme); + @include typography-theme($theme); + + // Theming for Fuse components + @include fuse-countdown-theme($theme); + @include fuse-search-bar-theme($theme); + @include fuse-shortcuts-theme($theme); + @include fuse-sidebar-theme($theme); + @include fuse-theme-options-theme($theme); + @include fuse-material-color-picker-theme($theme); + @include fuse-widget-theme($theme); + + // Theming for 3rd party components + @include ngx-datatable-theme($theme); +} + diff --git a/src/@fuse/scss/theming.scss b/src/@fuse/scss/theming.scss deleted file mode 100644 index 0b060ca7..00000000 --- a/src/@fuse/scss/theming.scss +++ /dev/null @@ -1,66 +0,0 @@ -@import '~@angular/material/theming'; - -// Custom color maps -$mat-white: ( - 500: white, - contrast: ( - 500: $black-87-opacity - ) -); - -$mat-black: ( - 500: black, - contrast: ( - 500: white, - ) -); - -$mat-fusedark: ( - 50: #ECECEE, - 100: #C5C6CB, - 200: #9EA1A9, - 300: #7D818C, - 400: #5C616F, - 500: #3C4252, - 600: #353A48, - 700: #2D323E, - 800: #262933, - 900: #1E2129, - A100: #C5C6CB, - A200: #9EA1A9, - A400: #5C616F, - A700: #2D323E, - contrast: ( - 50: $black-87-opacity, - 100: $black-87-opacity, - 200: $black-87-opacity, - 300: white, - 400: white, - 500: $white-87-opacity, - 600: $white-87-opacity, - 700: $white-87-opacity, - 800: $white-87-opacity, - 900: $white-87-opacity, - A100: $black-87-opacity, - A200: $white-87-opacity, - A400: $white-87-opacity, - A700: $white-87-opacity, - ) -); - -// Define the Material palettes -$primary: mat-palette($mat-fusedark); -$accent: mat-palette($mat-light-blue, 600, 400, 700); -$warn: mat-palette($mat-red); - -// Create the Material theme object -$theme: mat-light-theme($primary, $accent, $warn); - -// Store the background and foreground colors for easier access -$background: map-get($theme, background); -$foreground: map-get($theme, foreground); - -// Force the input field font sizes to 16px -$typography: mat-typography-config( - $input: mat-typography-level(16px, 1.125, 400) -) \ No newline at end of file diff --git a/src/@fuse/types/fuse-config.ts b/src/@fuse/types/fuse-config.ts index 1b513489..d1b4c322 100644 --- a/src/@fuse/types/fuse-config.ts +++ b/src/@fuse/types/fuse-config.ts @@ -1,21 +1,25 @@ export interface FuseConfig { + colorTheme: string; layout: { style: string, width: 'fullwidth' | 'boxed', navbar: { - background: string, + primaryBackground: string, + secondaryBackground: string, hidden: boolean, folded: boolean, position: 'left' | 'right' | 'top', variant: string }, toolbar: { + customBackgroundColor: boolean, background: string, hidden: boolean, position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed' } footer: { + customBackgroundColor: boolean, background: string, hidden: boolean, position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed' diff --git a/src/app/app.component.html b/src/app/app.component.html index e08abc9d..b713312a 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -27,7 +27,7 @@ - + + + - + + + + + diff --git a/src/app/main/apps/chat/chat-view/chat-view.component.scss b/src/app/main/apps/chat/chat-view/chat-view.component.scss index 7ad66dd9..a61ac0ca 100644 --- a/src/app/main/apps/chat/chat-view/chat-view.component.scss +++ b/src/app/main/apps/chat/chat-view/chat-view.component.scss @@ -1,7 +1,8 @@ -:host { +@import "src/@fuse/scss/fuse"; + +chat-view { display: flex; flex: 1 0 auto; - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.8)); overflow: hidden; max-width: 100%; @@ -9,9 +10,7 @@ .chat-toolbar { min-height: 64px; - background-color: #F3F4F5; - color: rgba(0, 0, 0, 0.87); - border-bottom: 1px solid rgba(0, 0, 0, .08); + border-bottom: 1px solid; .responsive-chats-button { padding: 0; @@ -23,10 +22,6 @@ .avatar { margin-right: 16px; } - - .chat-contact-name { - - } } } @@ -35,64 +30,140 @@ overflow: auto; -webkit-overflow-scrolling: touch; - .message-row { - padding: 16px; + .chat-messages { + position: relative; + padding: 16px 0 40px 40px; - .bubble { + .message-row { position: relative; - padding: 6px 7px 8px 9px; - background-color: #FFF; - box-shadow: 0 1px .5px rgba(0, 0, 0, .13); - border-radius: 6px; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-end; + padding: 0 16px 4px 16px; - &:before { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADGUExURQAAAP////b29vn5+f///wAAAP///wAAAAAAAP///9ra2v////j4+PHx8fv7++Hh4fHx8f////////////////39/QAAAP////////z8/P////39/f39/fz8/P////////////z8/P////////////z8/P////////////v7+/Hx8f///9bW1vz8/K2trf////39/f39/WJiYgAAAExMTFtbWwAAAN3d3cjIyPr6+vX19QAAAO7u7vz8/NTU1Ofn5zMzM////zGPlXsAAABBdFJOUwAcm/kREh4CCDWL1SneR6TfAQffhMYK/A5nRrLWfRc5DW2ih5f+19Kn+9v4g/1LCJuXHwQUKgahcXS6DNnlDMMKKzPoTgAAAKBJREFUKM+V08USwmAQA+C/0NIWd3d3d8/7vxTMcIPkQK7f7CG7s8bQAOY/SCuwFYQU1P+eiCqIK2gpWCmoCrAgoKQgJ8CHgIqAMjg0MxxSQ3DogEMWFBZtUPAHYGB1CyDQWE6AH7BrfXzlAxGAQhECTGAmwN1Okz0Gb/LW4fEItIfrOfNELMh3tck7u+PhcT2zQ7l77/K8iY8yJwV3BeYFqpc/uSyPGdAAAAAASUVORK5CYII=); - content: ''; + .avatar { position: absolute; - left: -11px; - bottom: 3px; - width: 12px; - height: 19px; - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: contain; - } - - .message { - white-space: pre-wrap; - } - - .time { - font-size: 11px; - margin-top: 8px; - text-align: right; - } - } - - &.contact { - - .avatar { - margin: 0 16px 0 0; - } - } - - &.user { - align-items: flex-end; - - .avatar { - order: 2; - margin: 0 0 0 16px; + left: -32px; + margin: 0; } .bubble { - margin-left: auto; - background-color: #E8F5E9; - border: 1px solid #DFEBE0; - order: 1; - &:before { - right: -11px; - left: auto; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAD2UExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGRsXAAAANzwzNPmxNrtyau5oIWRedDkwNntyczgwdfpyJ+/n97wzsLWtNjsytvwzczfvtPmxau6nNjqxtrtyio1KtzwzNjryAAAANzwzgAAANzwzK7Aor/Us9Lnw8vevAAAAMzevtbpxrvMrX+IdwAAAEROOi45Lr3MrZGjf9LoxX+MctnqydLkwhgYGMzfv9vuyQAAANzwzNvuy9zxy7vMu7XGqNvtzKKykwAAANruzKq6nLnMriQkGMXXuL3PsNjsySgzKAAAANLkw83fvd3vy9z4xtzwzRpFmIEAAABQdFJOUwAXChEGBAMBAgwhDvJ7k0YqMc0Zmwj6apf2kjU0+dkw/swh/CP9j2Wr2gndvaYeBRoxQg6gUPt/FaHJGdTj9A9k7XQLeE6iFcN12xkSt9r4NKizowAAAMFJREFUKM+V0sdywlAMBVDbMX7PQCihQ+iQ0HsJvfem/P/PwBIzugu0PXNnNNJVyPmhsIPhhoB2COwIGuLdhAcl3AhCBoBoHUC6BCBbA0C/EkBFB5D/FjxQwQYg1RI8UKINgDoSAPUlAPqUAMgfAEBfXsEDBV0+Hogi4Zhg4THj9YwHoqEBYOrgYTI3GVgMNn8r+Qq94k9yZNosW/3Hy9VuTjWfHkOX6367bGZUU7de66ieHZrO1OGg8Z1WTgYAFLgD5S1PCkzo1B0AAAAASUVORK5CYII=); + position: relative; + display: flex; + align-items: center; + justify-content: center; + padding: 12px; + max-width: 100%; + + .message { + white-space: pre-wrap; + line-height: 1.2; + } + + .time { + position: absolute; + display: none; + width: 100%; + font-size: 11px; + margin-top: 8px; + top: 100%; + left: 0; + white-space: nowrap; + } + } + + &.contact { + + .bubble { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + + border-top-right-radius: 20px; + border-bottom-right-radius: 20px; + + .time { + margin-left: 12px; + } + } + + &.first-of-group { + + .bubble { + border-top-left-radius: 20px; + } + } + + &.last-of-group { + + .bubble { + border-bottom-left-radius: 20px; + } + } + } + + &.me { + padding-left: 40px; + + .avatar { + order: 2; + margin: 0 0 0 16px; + } + + .bubble { + margin-left: auto; + + border-top-left-radius: 20px; + border-bottom-left-radius: 20px; + + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + + .time { + justify-content: flex-end; + right: 0; + margin-right: 12px; + } + } + + &.first-of-group { + + .bubble { + border-top-right-radius: 20px; + } + } + + &.last-of-group { + + .bubble { + border-bottom-right-radius: 20px; + } + } + } + + &.contact + .me, + &.me + .contact { + padding-top: 20px; + margin-top: 20px; + } + + &.first-of-group { + + .bubble { + border-top-left-radius: 20px; + padding-top: 13px; + } + } + + &.last-of-group { + + .bubble { + border-bottom-left-radius: 20px; + padding-bottom: 13px; + + .time { + display: flex; + } } } } @@ -100,37 +171,46 @@ } .chat-footer { - min-height: 72px; - max-height: 96px; - background-color: #F3F4F5; - color: rgba(0, 0, 0, 0.87); - border-top: 1px solid rgba(0, 0, 0, .08); + border-top: 1px solid; padding: 8px 8px 8px 16px; .reply-form { + position: relative; - mat-form-field { - margin: 0; - padding-right: 16px; + .message-text { + padding: 16px 8px; - textarea { - max-height: 80px; - transition: height 200ms ease; - overflow: auto; - -webkit-overflow-scrolling: touch; + .mat-form-field-wrapper { + padding: 0; - &.grow { - height: 80px; + .mat-form-field-flex { + padding: 0; + + .mat-form-field-infix { + padding: 0; + border: none; + border-radius: 20px; + @include mat-elevation(2); + + textarea { + overflow: hidden; + margin: 16px 48px 16px 16px; + width: calc(100% - 64px); + padding: 0; + } + } } - } - .mat-errors-spacer { - display: none; + .mat-form-field-underline { + display: none !important; + } } } - .mat-button { - margin: 0; + .send-message-button { + position: absolute; + right: 16px; + bottom: 21px; } } } diff --git a/src/app/main/apps/chat/chat-view/chat-view.component.ts b/src/app/main/apps/chat/chat-view/chat-view.component.ts index 4f40e8fe..e177b0bd 100644 --- a/src/app/main/apps/chat/chat-view/chat-view.component.ts +++ b/src/app/main/apps/chat/chat-view/chat-view.component.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, ViewChildren } from '@angular/core'; +import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core'; import { NgForm } from '@angular/forms'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -8,9 +8,10 @@ import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scr import { ChatService } from 'app/main/apps/chat/chat.service'; @Component({ - selector : 'chat-view', - templateUrl: './chat-view.component.html', - styleUrls : ['./chat-view.component.scss'] + selector : 'chat-view', + templateUrl : './chat-view.component.html', + styleUrls : ['./chat-view.component.scss'], + encapsulation: ViewEncapsulation.None }) export class ChatViewComponent implements OnInit, OnDestroy, AfterViewInit { @@ -92,6 +93,45 @@ export class ChatViewComponent implements OnInit, OnDestroy, AfterViewInit // @ Public methods // ----------------------------------------------------------------------------------------------------- + /** + * Decide whether to show or not the contact's avatar in the message row + * + * @param message + * @param i + * @returns {boolean} + */ + shouldShowContactAvatar(message, i): boolean + { + return ( + message.who === this.contact.id && + ((this.dialog[i + 1] && this.dialog[i + 1].who !== this.contact.id) || !this.dialog[i + 1]) + ); + } + + /** + * Check if the given message is the first message of a group + * + * @param message + * @param i + * @returns {boolean} + */ + isFirstMessageOfGroup(message, i): boolean + { + return (i === 0 || this.dialog[i - 1] && this.dialog[i - 1].who !== message.who); + } + + /** + * Check if the given message is the last message of a group + * + * @param message + * @param i + * @returns {boolean} + */ + isLastMessageOfGroup(message, i): boolean + { + return (i === this.dialog.length - 1 || this.dialog[i + 1] && this.dialog[i + 1].who !== message.who); + } + /** * Select contact */ @@ -106,11 +146,9 @@ export class ChatViewComponent implements OnInit, OnDestroy, AfterViewInit readyToReply(): void { setTimeout(() => { - this.replyForm.reset(); this.focusReplyInput(); this.scrollToBottom(); }); - } /** @@ -144,8 +182,15 @@ export class ChatViewComponent implements OnInit, OnDestroy, AfterViewInit /** * Reply */ - reply(): void + reply(event): void { + event.preventDefault(); + + if ( !this.replyForm.form.value.message ) + { + return; + } + // Message const message = { who : this.user.id, @@ -156,6 +201,9 @@ export class ChatViewComponent implements OnInit, OnDestroy, AfterViewInit // Add the message to the chat this.dialog.push(message); + // Reset the reply form + this.replyForm.reset(); + // Update the server this._chatService.updateDialog(this.selectedChat.chatId, this.dialog).then(response => { this.readyToReply(); diff --git a/src/app/main/apps/chat/chat.component.html b/src/app/main/apps/chat/chat.component.html index 6967d337..eca635b2 100644 --- a/src/app/main/apps/chat/chat.component.html +++ b/src/app/main/apps/chat/chat.component.html @@ -1,7 +1,7 @@ -
+
-
+
diff --git a/src/app/main/apps/chat/chat.component.scss b/src/app/main/apps/chat/chat.component.scss index 5a317a06..7cc5db7d 100644 --- a/src/app/main/apps/chat/chat.component.scss +++ b/src/app/main/apps/chat/chat.component.scss @@ -1,8 +1,6 @@ @import "src/@fuse/scss/fuse"; #chat { - display: flex; - flex: 1; .center { padding: 32px !important; @@ -17,13 +15,11 @@ display: flex; flex: 1; position: relative; - background: url('/assets/images/patterns/rain-grey.png') repeat; .mat-sidenav-container { display: flex; flex: 1; width: 100%; - background: transparent; > .mat-sidenav-content, > .mat-drawer-content { @@ -42,7 +38,7 @@ flex-direction: column; width: 400px; max-width: 90%; - box-shadow: 0 0 1px rgba(0, 0, 0, .37); + box-shadow: 0 0 1px rgba(0, 0, 0, 0.37); overflow: hidden; } } diff --git a/src/app/main/apps/chat/chat.theme.scss b/src/app/main/apps/chat/chat.theme.scss new file mode 100644 index 00000000..7d5fceb9 --- /dev/null +++ b/src/app/main/apps/chat/chat.theme.scss @@ -0,0 +1,119 @@ +@mixin chat-theme($theme) { + + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $is-dark: map-get($theme, is-dark); + + // Chat start + chat-start { + + .big-circle { + background: map-get($background, card); + } + } + + // Chat view + chat-view { + + .chat { + + .chat-toolbar { + border-bottom-color: map-get($foreground, divider); + } + + #chat-content { + + .message-row { + + &.contact { + + .bubble { + background-color: map-get($primary, default); + color: map-get($primary, default-contrast); + } + } + + &.me { + + .bubble { + color: rgba(0, 0, 0, 0.87); + background-color: #E0E0E0; + } + } + } + } + + .chat-footer { + background: map-get($background, app-bar); + border-top-color: map-get($foreground, divider); + + .reply-form { + + .message-text { + background-color: map-get($background, app-bar); + border-color: map-get($foreground, divider); + + .mat-form-field-wrapper { + + .mat-form-field-flex { + + .mat-form-field-infix { + @if ($is-dark == true) { + background-color: map-get($background, hover); + } @else { + background-color: white; + } + } + } + } + } + } + } + } + } + + // Chats sidenav + chat-chats-sidenav { + + .sidenav-header { + + mat-toolbar { + border-bottom-color: map-get($foreground, divider); + + .search { + background: map-get($background, background); + + input { + background: map-get($background, background); + color: map-get($foreground, text); + } + } + } + } + + .sidenav-content { + + .contact-list, + .chat-list { + + .mat-subheader { + color: map-get($accent, default); + } + + .contact { + border-bottom-color: map-get($foreground, divider); + + .contact-last-message { + color: map-get($foreground, secondary-text); + } + + .contact-mood { + color: map-get($foreground, secondary-text); + } + } + } + } + } +} \ No newline at end of file diff --git a/src/app/main/apps/chat/sidenavs/left/chats/chats.component.html b/src/app/main/apps/chat/sidenavs/left/chats/chats.component.html index c59c1e21..3ee0770a 100644 --- a/src/app/main/apps/chat/sidenavs/left/chats/chats.component.html +++ b/src/app/main/apps/chat/sidenavs/left/chats/chats.component.html @@ -120,23 +120,24 @@
- {{contacts |getById:chat.contactId:'name'}} - + alt="{{contacts | getById:chat.contactId:'name'}}"/> +
-
{{contacts |getById:chat.contactId:'name'}}
+
{{contacts | getById:chat.contactId:'name'}}
+
{{chat.lastMessage}}
{{chat.lastMessageTime | date}}
-
{{chat.unread}}
+
{{chat.unread}}
@@ -148,7 +149,7 @@
-
+
Contacts
@@ -173,7 +174,7 @@ -
+
No results..
diff --git a/src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss b/src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss index ff075142..f432f300 100644 --- a/src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss +++ b/src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss @@ -1,6 +1,6 @@ @import "src/@fuse/scss/fuse"; -:host { +chat-chats-sidenav { display: flex; flex: 1; flex-direction: column; @@ -8,11 +8,12 @@ .sidenav-header { mat-toolbar { - border-bottom: 1px solid rgba(0, 0, 0, .08); + border-bottom: 1px solid; .avatar-wrapper { - .avatar, .status { + .avatar, + .status { cursor: pointer; } } @@ -21,19 +22,16 @@ height: 36px; line-height: 36px; padding: 8px; - background: #FFFFFF; font-size: 13px; @include mat-elevation(1); .icon { margin: 0; - color: rgba(0, 0, 0, 0.54); } input { padding-left: 12px; height: 36px; - color: rgba(0, 0, 0, 0.54); border: none; } } @@ -44,7 +42,8 @@ overflow: auto; -webkit-overflow-scrolling: touch; - .contact-list, .chat-list { + .contact-list, + .chat-list { .mat-subheader { padding-left: 16px; @@ -52,7 +51,6 @@ font-weight: 300; height: 88px; line-height: 88px; - color: mat-color($accent); } .contact { @@ -60,7 +58,7 @@ text-align: left; letter-spacing: .010em; min-height: 88px; - border-bottom: 1px solid rgba(0, 0, 0, 0.12); + border-bottom: 1px solid; padding: 16px; font-weight: 400; @@ -78,10 +76,8 @@ } .contact-last-message { - line-height: 1.6em; - margin: 0; - font-weight: 500; - color: rgba(0, 0, 0, 0.54); + line-height: normal; + margin-top: 0; } .contact-mood { @@ -104,7 +100,6 @@ width: 100%; height: 88px; padding: 16px; - background: #FFFFFF; font-size: 15px; font-weight: 400; } diff --git a/src/app/main/apps/chat/sidenavs/left/chats/chats.component.ts b/src/app/main/apps/chat/sidenavs/left/chats/chats.component.ts index 98a8c3a6..06c4842f 100644 --- a/src/app/main/apps/chat/sidenavs/left/chats/chats.component.ts +++ b/src/app/main/apps/chat/sidenavs/left/chats/chats.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { ObservableMedia } from '@angular/flex-layout'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -9,10 +9,11 @@ import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/f import { ChatService } from 'app/main/apps/chat/chat.service'; @Component({ - selector : 'chat-chats-sidenav', - templateUrl: './chats.component.html', - styleUrls : ['./chats.component.scss'], - animations : fuseAnimations + selector : 'chat-chats-sidenav', + templateUrl : './chats.component.html', + styleUrls : ['./chats.component.scss'], + encapsulation: ViewEncapsulation.None, + animations : fuseAnimations }) export class ChatChatsSidenavComponent implements OnInit, OnDestroy { diff --git a/src/app/main/apps/chat/sidenavs/left/left.component.scss b/src/app/main/apps/chat/sidenavs/left/left.component.scss index 3661f0ce..31b78358 100644 --- a/src/app/main/apps/chat/sidenavs/left/left.component.scss +++ b/src/app/main/apps/chat/sidenavs/left/left.component.scss @@ -1,4 +1,4 @@ -:host { +chat-left-sidenav { display: flex; flex-direction: column; height: 100%; diff --git a/src/app/main/apps/chat/sidenavs/left/left.component.ts b/src/app/main/apps/chat/sidenavs/left/left.component.ts index a3f988a3..a89c0e89 100644 --- a/src/app/main/apps/chat/sidenavs/left/left.component.ts +++ b/src/app/main/apps/chat/sidenavs/left/left.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -7,10 +7,11 @@ import { fuseAnimations } from '@fuse/animations'; import { ChatService } from 'app/main/apps/chat/chat.service'; @Component({ - selector : 'chat-left-sidenav', - templateUrl: './left.component.html', - styleUrls : ['./left.component.scss'], - animations : fuseAnimations + selector : 'chat-left-sidenav', + templateUrl : './left.component.html', + styleUrls : ['./left.component.scss'], + encapsulation: ViewEncapsulation.None, + animations : fuseAnimations }) export class ChatLeftSidenavComponent implements OnInit, OnDestroy { diff --git a/src/app/main/apps/chat/sidenavs/left/user/user.component.html b/src/app/main/apps/chat/sidenavs/left/user/user.component.html index 919d8058..448b1cfc 100644 --- a/src/app/main/apps/chat/sidenavs/left/user/user.component.html +++ b/src/app/main/apps/chat/sidenavs/left/user/user.component.html @@ -2,7 +2,7 @@
- + @@ -28,50 +28,48 @@
-
+
- +
- + + + - - - + - + +
+ + Online +
+ - -
- - Online -
- + +
+ + Away +
+ - -
- - Away -
- + +
+ + Do not disturb +
+ - -
- - Do not disturb -
- + +
+ + Offline +
+ + - -
- - Offline -
- - - -
- + +
diff --git a/src/app/main/apps/chat/sidenavs/left/user/user.component.scss b/src/app/main/apps/chat/sidenavs/left/user/user.component.scss index d117d8ac..0bcc03f5 100644 --- a/src/app/main/apps/chat/sidenavs/left/user/user.component.scss +++ b/src/app/main/apps/chat/sidenavs/left/user/user.component.scss @@ -1,6 +1,6 @@ @import "src/@fuse/scss/fuse"; -:host { +chat-user-sidenav { display: flex; flex: 1; flex-direction: column; @@ -10,15 +10,7 @@ mat-toolbar { .toolbar-bottom { - height: 240px; - - @include media-breakpoint-down(md) { - height: 180px; - } + height: 180px; } } - - .sidenav-content { - background: whitesmoke; - } } diff --git a/src/app/main/apps/chat/sidenavs/left/user/user.component.ts b/src/app/main/apps/chat/sidenavs/left/user/user.component.ts index 8cbf54e1..c9545d86 100644 --- a/src/app/main/apps/chat/sidenavs/left/user/user.component.ts +++ b/src/app/main/apps/chat/sidenavs/left/user/user.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; import { Subject } from 'rxjs'; import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators'; @@ -6,9 +6,10 @@ import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators'; import { ChatService } from 'app/main/apps/chat/chat.service'; @Component({ - selector : 'chat-user-sidenav', - templateUrl: './user.component.html', - styleUrls : ['./user.component.scss'] + selector : 'chat-user-sidenav', + templateUrl : './user.component.html', + styleUrls : ['./user.component.scss'], + encapsulation: ViewEncapsulation.None }) export class ChatUserSidenavComponent implements OnInit, OnDestroy { diff --git a/src/app/main/apps/chat/sidenavs/right/contact/contact.component.html b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.html index a8c904c8..6d03d4cf 100644 --- a/src/app/main/apps/chat/sidenavs/right/contact/contact.component.html +++ b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.html @@ -2,7 +2,7 @@
- + @@ -28,17 +28,11 @@
-
+
- - - - - - - +
Mood
+
{{contact.mood}}
+
diff --git a/src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss index d117d8ac..54beeb17 100644 --- a/src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss +++ b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss @@ -1,6 +1,6 @@ @import "src/@fuse/scss/fuse"; -:host { +chat-contact-sidenav { display: flex; flex: 1; flex-direction: column; @@ -10,15 +10,7 @@ mat-toolbar { .toolbar-bottom { - height: 240px; - - @include media-breakpoint-down(md) { - height: 180px; - } + height: 180px; } } - - .sidenav-content { - background: whitesmoke; - } } diff --git a/src/app/main/apps/chat/sidenavs/right/contact/contact.component.ts b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.ts index 85f25438..fda48d04 100644 --- a/src/app/main/apps/chat/sidenavs/right/contact/contact.component.ts +++ b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.ts @@ -1,13 +1,14 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { ChatService } from 'app/main/apps/chat/chat.service'; @Component({ - selector : 'chat-contact-sidenav', - templateUrl: './contact.component.html', - styleUrls : ['./contact.component.scss'] + selector : 'chat-contact-sidenav', + templateUrl : './contact.component.html', + styleUrls : ['./contact.component.scss'], + encapsulation: ViewEncapsulation.None }) export class ChatContactSidenavComponent implements OnInit, OnDestroy { @@ -41,8 +42,8 @@ export class ChatContactSidenavComponent implements OnInit, OnDestroy this._chatService.onContactSelected .pipe(takeUntil(this._unsubscribeAll)) .subscribe(contact => { - this.contact = contact; - }); + this.contact = contact; + }); } /** diff --git a/src/app/main/apps/chat/sidenavs/right/right.component.scss b/src/app/main/apps/chat/sidenavs/right/right.component.scss index 3661f0ce..7b67aca1 100644 --- a/src/app/main/apps/chat/sidenavs/right/right.component.scss +++ b/src/app/main/apps/chat/sidenavs/right/right.component.scss @@ -1,4 +1,4 @@ -:host { +chat-right-sidenav { display: flex; flex-direction: column; height: 100%; diff --git a/src/app/main/apps/chat/sidenavs/right/right.component.ts b/src/app/main/apps/chat/sidenavs/right/right.component.ts index cb08c0c6..d89f657d 100644 --- a/src/app/main/apps/chat/sidenavs/right/right.component.ts +++ b/src/app/main/apps/chat/sidenavs/right/right.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -7,10 +7,11 @@ import { fuseAnimations } from '@fuse/animations'; import { ChatService } from 'app/main/apps/chat/chat.service'; @Component({ - selector : 'chat-right-sidenav', - templateUrl: './right.component.html', - styleUrls : ['./right.component.scss'], - animations : fuseAnimations + selector : 'chat-right-sidenav', + templateUrl : './right.component.html', + styleUrls : ['./right.component.scss'], + encapsulation: ViewEncapsulation.None, + animations : fuseAnimations }) export class ChatRightSidenavComponent implements OnInit, OnDestroy { diff --git a/src/app/main/apps/contacts/contact-list/contact-list.component.html b/src/app/main/apps/contacts/contact-list/contact-list.component.html index fadabf6a..9427cc7b 100644 --- a/src/app/main/apps/contacts/contact-list/contact-list.component.html +++ b/src/app/main/apps/contacts/contact-list/contact-list.component.html @@ -97,7 +97,7 @@ diff --git a/src/app/main/apps/contacts/contacts.component.html b/src/app/main/apps/contacts/contacts.component.html index d6bc2831..6286989d 100644 --- a/src/app/main/apps/contacts/contacts.component.html +++ b/src/app/main/apps/contacts/contacts.component.html @@ -1,7 +1,7 @@
-
@@ -39,7 +39,7 @@ - + @@ -61,7 +61,7 @@
-
+
@@ -75,7 +75,7 @@
- diff --git a/src/app/main/apps/contacts/contacts.theme.scss b/src/app/main/apps/contacts/contacts.theme.scss new file mode 100644 index 00000000..59a7abbc --- /dev/null +++ b/src/app/main/apps/contacts/contacts.theme.scss @@ -0,0 +1,21 @@ +@mixin contacts-theme($theme) { + + $background: map-get($theme, background); + $is-dark: map-get($theme, is-dark); + + #contacts { + + .content { + + .sidebar { + + .sidebar-content { + + .card { + background: map-get($background, card); + } + } + } + } + } +} \ No newline at end of file diff --git a/src/app/main/apps/contacts/sidebars/main/main.component.html b/src/app/main/apps/contacts/sidebars/main/main.component.html index 9455e5b1..7dec5d80 100644 --- a/src/app/main/apps/contacts/sidebars/main/main.component.html +++ b/src/app/main/apps/contacts/sidebars/main/main.component.html @@ -1,6 +1,6 @@
-
+
@@ -20,19 +20,19 @@
+ [ngClass]="{'active accent':filterBy ==='all'}"> All Contacts
- +
Freequently contacted
- +
Starred Contacts
diff --git a/src/app/main/apps/dashboards/analytics/analytics.component.html b/src/app/main/apps/dashboards/analytics/analytics.component.html index c8373a44..26051df0 100644 --- a/src/app/main/apps/dashboards/analytics/analytics.component.html +++ b/src/app/main/apps/dashboards/analytics/analytics.component.html @@ -1,8 +1,8 @@ -
+
-
Visitors @@ -11,23 +11,23 @@
+ [ngClass]="{'blue-700': widget1SelectedYear === '2015'}"> 2015
+ [ngClass]="{'blue-700': widget1SelectedYear === '2016'}"> 2016
+ [ngClass]="{'blue-700': widget1SelectedYear === '2017'}"> 2017
-
+
+ [ngClass]="{'accent': widget5SelectedDay === 'yesterday'}"> Yesterday
+ [ngClass]="{'accent': widget5SelectedDay === 'today'}"> Today
@@ -345,7 +345,7 @@
-
+
diff --git a/src/app/main/apps/dashboards/project/project.component.html b/src/app/main/apps/dashboards/project/project.component.html index c5574557..584cb610 100644 --- a/src/app/main/apps/dashboards/project/project.component.html +++ b/src/app/main/apps/dashboards/project/project.component.html @@ -93,7 +93,7 @@
-
+
@@ -125,7 +125,8 @@ *ngFor="let day of widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].next3Days"> {{day.name}}
- + {{day.temp[widgets.weatherWidget.tempUnit]}} ° @@ -156,7 +157,7 @@
-
+
@@ -195,7 +196,7 @@ -
@@ -203,7 +204,7 @@ fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25"> -
+
@@ -229,7 +230,7 @@
-
+
{{widgets.widget1.data.extra.label}}: @@ -241,7 +242,7 @@ -
+
@@ -487,7 +488,7 @@ fxFlex="100" fxFlex.gt-sm="50"> -
+
@@ -547,7 +548,7 @@ fxFlex="100" fxFlex.gt-sm="50"> -
+
@@ -592,7 +593,7 @@ -
@@ -600,7 +601,7 @@ fxFlex="100" fxFlex.gt-sm="50"> -
+
{{widgets.widget8.title}}
@@ -632,7 +633,7 @@ fxFlex="100" fxFlex.gt-sm="50"> -
+
{{widgets.widget9.title}}
@@ -749,7 +750,7 @@ fxFlex="100"> -
+
@@ -794,7 +795,7 @@ -
@@ -802,12 +803,12 @@ fxFlex="100"> -
+
{{widgets.widget11.title}}
-
+
{{widgets.widget11.table.rows.length}} members
diff --git a/src/app/main/apps/dashboards/project/project.theme.scss b/src/app/main/apps/dashboards/project/project.theme.scss new file mode 100644 index 00000000..2051486f --- /dev/null +++ b/src/app/main/apps/dashboards/project/project.theme.scss @@ -0,0 +1,34 @@ +@mixin dashboards-project-theme($theme) { + + $background: map-get($theme, background); + $is-dark: map-get($theme, is-dark); + + #dashboard-project { + + > .sidebar { + + fuse-widget { + + > .fuse-widget-front, + > .fuse-widget-back { + @if ($is-dark) { + background: map-get($background, background); + } @else { + background: map-get($background, app-bar); + } + } + } + } + + > .center { + + > .content { + @if ($is-dark) { + background: map-get($background, background); + } @else { + background: map-get($background, app-bar); + } + } + } + } +} \ No newline at end of file diff --git a/src/app/main/apps/e-commerce/order/order-statuses.ts b/src/app/main/apps/e-commerce/order/order-statuses.ts index c2d15d88..4cb537be 100644 --- a/src/app/main/apps/e-commerce/order/order-statuses.ts +++ b/src/app/main/apps/e-commerce/order/order-statuses.ts @@ -2,71 +2,71 @@ export const orderStatuses = [ { 'id' : 1, 'name' : 'Awaiting check payment', - 'color': 'mat-blue-500-bg' + 'color': 'blue-500' }, { 'id' : 2, 'name' : 'Payment accepted', - 'color': 'mat-green-500-bg' + 'color': 'green-500' }, { 'id' : 3, 'name' : 'Preparing the order', - 'color': 'mat-orange-500-bg' + 'color': 'orange-500' }, { 'id' : 4, 'name' : 'Shipped', - 'color': 'mat-purple-500-bg' + 'color': 'purple-500' }, { 'id' : 5, 'name' : 'Delivered', - 'color': 'mat-green-800-bg' + 'color': 'green-800' }, { 'id' : 6, 'name' : 'Canceled', - 'color': 'mat-pink-500-bg' + 'color': 'pink-500' }, { 'id' : 7, 'name' : 'Refunded', - 'color': 'mat-red-500-bg' + 'color': 'red-500' }, { 'id' : 8, 'name' : 'Payment error', - 'color': 'mat-red-900-bg' + 'color': 'red-900' }, { 'id' : 9, 'name' : 'On pre-order (paid)', - 'color': 'mat-purple-300-bg' + 'color': 'purple-300' }, { 'id' : 10, 'name' : 'Awaiting bank wire payment', - 'color': 'mat-blue-500-bg' + 'color': 'blue-500' }, { 'id' : 11, 'name' : 'Awaiting PayPal payment', - 'color': 'mat-blue-500-bg' + 'color': 'blue-500' }, { 'id' : 12, 'name' : 'Remote payment accepted', - 'color': 'mat-green-500-bg' + 'color': 'green-500' }, { 'id' : 13, 'name' : 'On pre-order (not paid)', - 'color': 'mat-purple-300-bg' + 'color': 'purple-300' }, { 'id' : 14, 'name' : 'Awaiting Cash-on-delivery payment', - 'color': 'mat-blue-500-bg' + 'color': 'blue-500' } ]; diff --git a/src/app/main/apps/e-commerce/order/order.component.html b/src/app/main/apps/e-commerce/order/order.component.html index 50d73d7e..2d9c5cc8 100644 --- a/src/app/main/apps/e-commerce/order/order.component.html +++ b/src/app/main/apps/e-commerce/order/order.component.html @@ -1,14 +1,14 @@
-
+
-
@@ -35,7 +35,7 @@ -
+
@@ -68,7 +68,9 @@
- {{order.customer.firstName}} {{order.customer.lastName}} + {{order.customer.firstName}} + {{order.customer.lastName}} +
@@ -78,7 +80,8 @@ {{order.customer.phone}} - {{order.customer.company}} + {{order.customer.company}} + @@ -89,7 +92,8 @@
-
{{order.customer.shippingAddress.address}}
+
{{order.customer.shippingAddress.address}} +
@@ -102,7 +106,8 @@
-
{{order.customer.invoiceAddress.address}}
+
{{order.customer.invoiceAddress.address}} +
@@ -308,7 +313,8 @@
-
+
INVOICE {{order.reference}}
@@ -318,20 +324,23 @@ {{order.customer.firstName}} {{order.customer.lastName}}
-
{{order.customer.invoiceAddress}}
+
+ {{order.customer.invoiceAddress.address}} +
{{order.customer.phone}}
-
+
FUSE INC.
-
2810 Country Club Road Cranford, NJ 07016
+
2810 Country Club Road Cranford, NJ 07016 +
+66 123 455 87
www.fuseinc.com
@@ -394,17 +403,20 @@
-
Please pay within 15 days. Thank you for your business.
+
Please pay within 15 days. Thank you for your business. +
- In condimentum malesuada efficitur. Mauris volutpat placerat auctor. Ut ac congue dolor. Quisque - scelerisque lacus sed feugiat fermentum. Cras aliquet facilisis pellentesque. Nunc hendrerit - quam at leo commodo, a suscipit tellus dapibus. Etiam at felis volutpat est mollis lacinia. - Mauris placerat sem sit amet velit mollis, in porttitor ex finibus. Proin eu nibh id libero - tincidunt lacinia et eget eros. + In condimentum malesuada efficitur. Mauris volutpat placerat auctor. + Ut ac congue dolor. Quisque scelerisque lacus sed feugiat fermentum. + Cras aliquet facilisis pellentesque. Nunc hendrerit quam at leo + commodo, a suscipit tellus dapibus. Etiam at felis volutpat est + mollis lacinia. Mauris placerat sem sit amet velit mollis, in + porttitor ex finibus. Proin eu nibh id libero tincidunt lacinia et + eget eros.
diff --git a/src/app/main/apps/e-commerce/order/order.component.scss b/src/app/main/apps/e-commerce/order/order.component.scss index cc1bbade..c437a929 100644 --- a/src/app/main/apps/e-commerce/order/order.component.scss +++ b/src/app/main/apps/e-commerce/order/order.component.scss @@ -46,6 +46,7 @@ padding: 64px 88px; overflow: hidden; background: #FFFFFF; + color: rgba(0, 0, 0, 0.87); @include mat-elevation(7); .header { @@ -134,6 +135,7 @@ tr { td { + border-color: rgba(0, 0, 0, 0.12); &:first-child { padding-left: 8px; diff --git a/src/app/main/apps/e-commerce/orders/orders.component.html b/src/app/main/apps/e-commerce/orders/orders.component.html index e2f3137b..4decbf96 100644 --- a/src/app/main/apps/e-commerce/orders/orders.component.html +++ b/src/app/main/apps/e-commerce/orders/orders.component.html @@ -1,14 +1,14 @@
-
+
-
@@ -37,7 +37,7 @@ -
+
-
+
-
+
@@ -38,14 +38,14 @@ @@ -46,7 +46,7 @@ -
+
+ [ngClass]="{'red-500':product.quantity <= 5, 'amber-500':product.quantity > 5 && product.quantity <= 25,'green-600':product.quantity > 25}"> {{product.quantity}} @@ -120,8 +120,8 @@ Active - check - close + check + close diff --git a/src/app/main/apps/file-manager/file-list/file-list.component.html b/src/app/main/apps/file-manager/file-list/file-list.component.html index 175fccd7..05779b36 100644 --- a/src/app/main/apps/file-manager/file-list/file-list.component.html +++ b/src/app/main/apps/file-manager/file-list/file-list.component.html @@ -52,7 +52,7 @@ diff --git a/src/app/main/apps/file-manager/file-list/file-list.component.scss b/src/app/main/apps/file-manager/file-list/file-list.component.scss index b598536b..6a92fd9d 100644 --- a/src/app/main/apps/file-manager/file-list/file-list.component.scss +++ b/src/app/main/apps/file-manager/file-list/file-list.component.scss @@ -1,6 +1,6 @@ @import "src/@fuse/scss/fuse"; -:host { +file-list { width: 100%; .mat-table { @@ -11,15 +11,6 @@ position: relative; cursor: pointer; min-height: 64px; - - .mat-cell { - - &.mat-column-icon { - } - - &.mat-column-detail-button { - } - } } } } diff --git a/src/app/main/apps/file-manager/file-list/file-list.component.ts b/src/app/main/apps/file-manager/file-list/file-list.component.ts index ca8b4d88..884b014f 100644 --- a/src/app/main/apps/file-manager/file-list/file-list.component.ts +++ b/src/app/main/apps/file-manager/file-list/file-list.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { DataSource } from '@angular/cdk/collections'; import { Observable, Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -9,10 +9,11 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service'; import { FileManagerService } from 'app/main/apps/file-manager/file-manager.service'; @Component({ - selector : 'file-list', - templateUrl: './file-list.component.html', - styleUrls : ['./file-list.component.scss'], - animations : fuseAnimations + selector : 'file-list', + templateUrl : './file-list.component.html', + styleUrls : ['./file-list.component.scss'], + encapsulation: ViewEncapsulation.None, + animations : fuseAnimations }) export class FileManagerFileListComponent implements OnInit, OnDestroy { diff --git a/src/app/main/apps/file-manager/file-manager.component.html b/src/app/main/apps/file-manager/file-manager.component.html index 72b1b7f6..2ec72e5c 100644 --- a/src/app/main/apps/file-manager/file-manager.component.html +++ b/src/app/main/apps/file-manager/file-manager.component.html @@ -10,7 +10,7 @@
-
+
@@ -44,7 +44,8 @@
-
+
search
@@ -32,7 +32,7 @@ -
+
diff --git a/src/app/main/apps/mail-ngrx/mail.component.scss b/src/app/main/apps/mail-ngrx/mail.component.scss index 79154e90..f32948d6 100644 --- a/src/app/main/apps/mail-ngrx/mail.component.scss +++ b/src/app/main/apps/mail-ngrx/mail.component.scss @@ -1,6 +1,6 @@ @import "src/@fuse/scss/fuse"; -:host { +mail-ngrx { width: 100%; .center { @@ -14,9 +14,8 @@ margin: 0; width: 56px; height: 56px; - background: #FFF; border-radius: 0; - border-right: 1px solid rgba(0, 0, 0, .12); + border-right: 1px solid; } .search { @@ -28,7 +27,6 @@ input { height: 56px; padding-left: 16px; - color: rgba(0, 0, 0, 0.54); border: none; outline: none; } diff --git a/src/app/main/apps/mail-ngrx/mail.component.ts b/src/app/main/apps/mail-ngrx/mail.component.ts index 2b43c7e4..31debdae 100644 --- a/src/app/main/apps/mail-ngrx/mail.component.ts +++ b/src/app/main/apps/mail-ngrx/mail.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { FormControl } from '@angular/forms'; import { Store } from '@ngrx/store'; import { Observable } from 'rxjs'; @@ -18,7 +18,8 @@ import { locale as turkish } from 'app/main/apps/mail-ngrx/i18n/tr'; selector : 'mail-ngrx', templateUrl : './mail.component.html', styleUrls : ['./mail.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation : ViewEncapsulation.None }) export class MailNgrxComponent implements OnInit, OnDestroy { diff --git a/src/app/main/apps/mail-ngrx/mail.theme.scss b/src/app/main/apps/mail-ngrx/mail.theme.scss new file mode 100644 index 00000000..9dba5726 --- /dev/null +++ b/src/app/main/apps/mail-ngrx/mail.theme.scss @@ -0,0 +1,130 @@ +@mixin mail-ngrx-theme($theme) { + + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + $accent: map-get($theme, accent); + $is-dark: map-get($theme, is-dark); + + // Mail + mail-ngrx { + + .center { + + .header { + + .search-wrapper { + background: map-get($background, card); + + .sidebar-toggle { + border-right-color: map-get($foreground, divider); + } + + .search { + + input { + background: map-get($background, card); + color: map-get($foreground, text); + } + } + } + } + } + } + + // Mail list + mail-ngrx-list { + border-right-color: map-get($foreground, divider); + } + + // Mail list item + mail-ngrx-list-item { + border-bottom-color: map-get($foreground, divider); + + &.unread { + + .info { + + .row-2 { + color: map-get($foreground, text); + } + } + } + + &.current-mail { + background: map-get($background, hover); + } + + &.selected { + @if ($is-dark) { + background: map-get($background, background); + } @else { + background: map-get($accent, 50); + } + + .info { + + .row-2 { + + .labels { + @if ($is-dark) { + background: map-get($background, background); + } @else { + background: map-get($accent, 50); + } + } + } + } + } + + .info { + + .row-2 { + color: map-get($foreground, secondary-text); + + .labels { + + .label { + background-color: rgba(0, 0, 0, 0.08); + } + } + } + } + } + + // Mail details + mail-ngrx-details { + + .mail-header { + border-bottom-color: map-get($foreground, divider); + + .label { + background-color: rgba(0, 0, 0, 0.08); + } + } + + .mail-content { + + .to { + color: map-get($foreground, secondary-text); + } + + .info { + + .avatar { + background: map-get($accent, default); + } + + .details { + + .detail { + color: map-get($foreground, secondary-text); + } + } + } + } + + .mail-attachments { + border-top-color: map-get($foreground, divider); + } + } +} diff --git a/src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.html b/src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.html index 952081db..6c98f3b0 100644 --- a/src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.html +++ b/src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.html @@ -1,6 +1,6 @@
+ class="header accent p-24 pb-4">