From 44cdadaec9b6a6a90d72dc7e4c077931a6c0b43b Mon Sep 17 00:00:00 2001 From: mustafahlvc Date: Fri, 8 Sep 2017 19:21:35 +0300 Subject: [PATCH 1/3] (Scrumboard, Chat) some css style refinements --- .../search-bar/search-bar.component.scss | 6 +- .../chat/chat-view/chat-view.component.scss | 1 + .../content/apps/chat/chat.component.scss | 8 +- .../sidenavs/left/user/user.component.scss | 4 + .../right/contact/contact.component.scss | 4 + .../scrumboard/board/board.component.html | 21 +-- .../edit-board-name.component.html | 4 +- .../edit-board-name.component.scss | 2 + .../edit-list-name.component.html | 4 +- .../scrumboard/board/list/list.component.scss | 2 +- .../apps/scrumboard/scrumboard.component.html | 47 +++--- .../apps/scrumboard/scrumboard.component.scss | 159 +----------------- src/app/main/toolbar/toolbar.component.scss | 4 +- 13 files changed, 60 insertions(+), 206 deletions(-) diff --git a/src/app/core/components/search-bar/search-bar.component.scss b/src/app/core/components/search-bar/search-bar.component.scss index aac6fb90..7a737fcc 100644 --- a/src/app/core/components/search-bar/search-bar.component.scss +++ b/src/app/core/components/search-bar/search-bar.component.scss @@ -7,7 +7,7 @@ height: 64px; font-size: 13px; - @include media-breakpoint-down('xs') { + @include media-breakpoint-down('sm') { height: 56px; } @@ -20,7 +20,7 @@ height: 64px !important; line-height: 64px !important; - @include media-breakpoint-down('xs') { + @include media-breakpoint-down('sm') { height: 56px !important; line-height: 56px !important; } @@ -30,7 +30,7 @@ width: 64px !important; height: 64px !important; line-height: 64px !important; - @include media-breakpoint-down('xs') { + @include media-breakpoint-down('sm') { height: 56px !important; line-height: 56px !important; } diff --git a/src/app/main/content/apps/chat/chat-view/chat-view.component.scss b/src/app/main/content/apps/chat/chat-view/chat-view.component.scss index 9e0e496b..bb255c29 100644 --- a/src/app/main/content/apps/chat/chat-view/chat-view.component.scss +++ b/src/app/main/content/apps/chat/chat-view/chat-view.component.scss @@ -3,6 +3,7 @@ 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%; .chat { diff --git a/src/app/main/content/apps/chat/chat.component.scss b/src/app/main/content/apps/chat/chat.component.scss index db816f66..c7b2e19f 100644 --- a/src/app/main/content/apps/chat/chat.component.scss +++ b/src/app/main/content/apps/chat/chat.component.scss @@ -9,8 +9,8 @@ max-width: 1400px; margin: 0 auto; - @include media-breakpoint(xs) { - padding: 8px !important; + @include media-breakpoint-down(md) { + padding: 0 !important; } .content-card { @@ -33,6 +33,10 @@ height: auto; } + > .mat-drawer-content { + max-width: 100%; + } + md-sidenav { display: flex; flex-direction: column; diff --git a/src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss b/src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss index 5b1ce733..d591906b 100644 --- a/src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss +++ b/src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss @@ -11,6 +11,10 @@ .toolbar-bottom { height: 240px; + + @include media-breakpoint-down(md) { + height: 180px; + } } } diff --git a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss b/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss index 5b1ce733..d591906b 100644 --- a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss +++ b/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss @@ -11,6 +11,10 @@ .toolbar-bottom { height: 240px; + + @include media-breakpoint-down(md) { + height: 180px; + } } } diff --git a/src/app/main/content/apps/scrumboard/board/board.component.html b/src/app/main/content/apps/scrumboard/board/board.component.html index 6283d982..de67df7d 100644 --- a/src/app/main/content/apps/scrumboard/board/board.component.html +++ b/src/app/main/content/apps/scrumboard/board/board.component.html @@ -3,7 +3,7 @@
-
+
@@ -20,19 +20,16 @@ -
-
- remove_red_eye - - -
+ remove_red_eye + +
@@ -53,10 +50,10 @@
-
+
-
diff --git a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html b/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html index e07254d1..28ca94a5 100644 --- a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html +++ b/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html @@ -6,7 +6,7 @@
-
@@ -15,7 +15,7 @@ -
diff --git a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.scss b/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.scss index 36f8f043..4b15e90b 100644 --- a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.scss +++ b/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.scss @@ -1,4 +1,6 @@ :host { + display: block !important; + .board-name { text-overflow: ellipsis; overflow: hidden; diff --git a/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html b/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html index c8218cad..9f742826 100644 --- a/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html +++ b/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html @@ -2,7 +2,7 @@ {{list.name}}
-
@@ -11,7 +11,7 @@ -
diff --git a/src/app/main/content/apps/scrumboard/board/list/list.component.scss b/src/app/main/content/apps/scrumboard/board/list/list.component.scss index 5c19900b..c5e713f4 100644 --- a/src/app/main/content/apps/scrumboard/board/list/list.component.scss +++ b/src/app/main/content/apps/scrumboard/board/list/list.component.scss @@ -20,7 +20,7 @@ padding: 0 8px 0 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); - @include media-breakpoint(xs) { + @include media-breakpoint-down(sm) { height: 48px; min-height: 48px; } diff --git a/src/app/main/content/apps/scrumboard/scrumboard.component.html b/src/app/main/content/apps/scrumboard/scrumboard.component.html index f617a2d9..8c5a97a2 100644 --- a/src/app/main/content/apps/scrumboard/scrumboard.component.html +++ b/src/app/main/content/apps/scrumboard/scrumboard.component.html @@ -1,36 +1,31 @@ -
- - -
+
+

Scrumboard App

+
- -
- - -
- assessment -
{{board.name}}
-
- - - -
- add_circle -
Add new board
-
- + +
+ +
+ assessment +
{{board.name}}
- + + + +
+ add_circle +
Add new board
+
+
- - +
diff --git a/src/app/main/content/apps/scrumboard/scrumboard.component.scss b/src/app/main/content/apps/scrumboard/scrumboard.component.scss index 13eb32d4..23b5efdd 100644 --- a/src/app/main/content/apps/scrumboard/scrumboard.component.scss +++ b/src/app/main/content/apps/scrumboard/scrumboard.component.scss @@ -3,11 +3,12 @@ :host { min-height: 100%; - #board-selector { - margin-top: 88px; + #boards { + width: 100%; .board-list { padding: 32px 0; + max-height: none!important; .board-list-item { min-width: 210px; @@ -31,157 +32,3 @@ } } -#scrumboard { - height: 100%; - - > .header { - position: relative; - height: 96px; - min-height: 96px; - max-height: 96px; - background-image: none; - z-index: 49; - - .header-content { - - .header-boards-button { - margin: 0; - } - - .header-board-name { - font-size: 16px; - - .board-subscribe { - margin-right: 8px; - } - - .editable-buttons { - - md-icon { - color: #FFFFFF !important; - } - } - } - - .right-side { - - > .md-button:last-child { - margin-right: 0; - } - } - - } - } - - #board-selector { - position: absolute; - top: 96px; - right: 0; - left: 0; - height: 192px; - z-index: 48; - padding: 24px; - opacity: 1; - - .board-list-item { - width: 128px; - height: 192px; - padding: 16px; - cursor: pointer; - position: relative; - - .board-name { - text-align: center; - padding: 16px 0; - } - - .selected-icon { - position: absolute; - top: 0; - left: 50%; - width: 32px; - height: 32px; - margin-left: -16px; - border-radius: 50%; - text-align: center; - color: white; - - i { - line-height: 32px !important; - } - } - - &.add-new-board { - opacity: 0.6; - } - } - } - - .content { - padding: 0; - background: transparent; - } - - .editable-click { - cursor: pointer; - text-decoration: none; - color: inherit; - border-bottom: none; - } - - .editable-wrap { - display: block; - position: relative; - - .editable-controls { - display: flex; - flex-direction: row; - align-items: center; - width: 100%; - - .editable-input { - width: inherit; - background-color: white; - padding: 8px; - border: 1px solid rgba(0, 0, 0, 0.12); - } - - .editable-buttons { - display: inherit; - - .md-button { - margin: 0; - - &:first-of-type { - padding-right: 0; - } - - .icon-cancel { - color: rgba(0, 0, 0, 0.32); - } - } - } - } - } - - .board-selector-backdrop { - z-index: 47; - } -} - -// RESPONSIVE -@include media-breakpoint(xs) { - #scrumboard { - - .header { - height: 120px; - max-height: 120px; - min-height: 120px; - - } - - #board-selector { - top: 120px; - } - } -} diff --git a/src/app/main/toolbar/toolbar.component.scss b/src/app/main/toolbar/toolbar.component.scss index 3d56a105..be33c4c4 100644 --- a/src/app/main/toolbar/toolbar.component.scss +++ b/src/app/main/toolbar/toolbar.component.scss @@ -27,7 +27,7 @@ min-width: 64px; height: 64px; - @include media-breakpoint-down('xs') { + @include media-breakpoint-down(sm) { height: 56px; } } @@ -42,7 +42,7 @@ width: 1px; background: rgba(0, 0, 0, .12); - @include media-breakpoint-down('xs') { + @include media-breakpoint-down(sm) { height: 56px; } } From 2f4ce6221e09f5728e5407f02d1255c054849be4 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 11 Sep 2017 12:30:01 +0300 Subject: [PATCH 2/3] horizontal navigation layout + added boxed layout option + added a close overlay to theme options + moved the buy button to the footer + added fade-in-out animation + File Manager app min row height --- src/app/core/animations.ts | 13 + .../nav-horizontal-collapse.component.html | 19 + .../nav-horizontal-collapse.component.scss | 3 + .../nav-horizontal-collapse.component.ts | 50 +++ .../nav-horizontal-item.component.html | 6 + .../nav-horizontal-item.component.scss | 3 + .../nav-item/nav-horizontal-item.component.ts | 12 + .../nav-subheader/nav-subheader.component.ts | 21 - .../navigation/navigation.component.html | 26 +- .../navigation/navigation.component.ts | 10 +- .../navigation/navigation.module.ts | 16 +- .../navigation/navigation.service.ts | 8 +- .../nav-vertical-collapse.component.html} | 4 +- .../nav-vertical-collapse.component.scss} | 0 .../nav-vertical-collapse.component.ts} | 12 +- .../nav-vertical-item.component.html} | 0 .../nav-vertical-item.component.scss} | 0 .../nav-item/nav-vertical-item.component.ts} | 8 +- .../nav-vertical-subheader.component.html} | 0 .../nav-vertical-subheader.component.scss} | 0 .../nav-vertical-subheader.component.ts | 21 + .../theme-options.component.html | 21 +- .../theme-options.component.scss | 25 +- .../theme-options/theme-options.component.ts | 22 +- src/app/core/modules/shared.module.ts | 4 +- src/app/core/scss/partials/_navigation.scss | 50 +++ src/app/core/services/config.service.ts | 7 +- .../file-list/file-list.component.scss | 1 + src/app/main/footer/footer.component.html | 15 +- src/app/main/footer/footer.component.scss | 1 + src/app/main/main.component.html | 27 +- src/app/main/main.component.scss | 6 + src/app/main/main.component.ts | 2 + src/app/main/main.module.ts | 10 +- .../navbar-horizontal.component.html | 1 + .../navbar-horizontal.component.scss} | 4 +- .../horizontal/navbar-horizontal.component.ts | 18 + .../main/navbar/navbar-toggle.directive.ts | 29 -- .../navbar-vertical-toggle.directive.ts | 29 ++ .../navbar-vertical.component.html} | 6 +- .../vertical/navbar-vertical.component.scss | 137 ++++++ .../navbar-vertical.component.ts} | 18 +- .../navbar-vertical.service.ts} | 2 +- src/app/main/toolbar/toolbar.component.html | 17 +- src/app/main/toolbar/toolbar.component.scss | 24 + src/app/main/toolbar/toolbar.component.ts | 12 +- src/app/navigation.model.ts | 415 +++++++++++++++++- src/index.html | 2 +- 48 files changed, 1001 insertions(+), 136 deletions(-) create mode 100644 src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html create mode 100644 src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.scss create mode 100644 src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts create mode 100644 src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html create mode 100644 src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.scss create mode 100644 src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.ts delete mode 100644 src/app/core/components/navigation/nav-subheader/nav-subheader.component.ts rename src/app/core/components/navigation/{nav-collapse/nav-collapse.component.html => vertical/nav-collapse/nav-vertical-collapse.component.html} (64%) rename src/app/core/components/navigation/{nav-collapse/nav-collapse.component.scss => vertical/nav-collapse/nav-vertical-collapse.component.scss} (100%) rename src/app/core/components/navigation/{nav-collapse/nav-collapse.component.ts => vertical/nav-collapse/nav-vertical-collapse.component.ts} (90%) rename src/app/core/components/navigation/{nav-item/nav-item.component.html => vertical/nav-item/nav-vertical-item.component.html} (100%) rename src/app/core/components/navigation/{nav-item/nav-item.component.scss => vertical/nav-item/nav-vertical-item.component.scss} (100%) rename src/app/core/components/navigation/{nav-item/nav-item.component.ts => vertical/nav-item/nav-vertical-item.component.ts} (51%) rename src/app/core/components/navigation/{nav-subheader/nav-subheader.component.html => vertical/nav-subheader/nav-vertical-subheader.component.html} (100%) rename src/app/core/components/navigation/{nav-subheader/nav-subheader.component.scss => vertical/nav-subheader/nav-vertical-subheader.component.scss} (100%) create mode 100644 src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.ts create mode 100644 src/app/main/navbar/horizontal/navbar-horizontal.component.html rename src/app/main/navbar/{navbar.component.scss => horizontal/navbar-horizontal.component.scss} (98%) create mode 100644 src/app/main/navbar/horizontal/navbar-horizontal.component.ts delete mode 100644 src/app/main/navbar/navbar-toggle.directive.ts create mode 100644 src/app/main/navbar/vertical/navbar-vertical-toggle.directive.ts rename src/app/main/navbar/{navbar.component.html => vertical/navbar-vertical.component.html} (74%) create mode 100644 src/app/main/navbar/vertical/navbar-vertical.component.scss rename src/app/main/navbar/{navbar.component.ts => vertical/navbar-vertical.component.ts} (88%) rename src/app/main/navbar/{navbar.service.ts => vertical/navbar-vertical.service.ts} (85%) diff --git a/src/app/core/animations.ts b/src/app/core/animations.ts index 614d7774..d6f3ff61 100644 --- a/src/app/core/animations.ts +++ b/src/app/core/animations.ts @@ -4,6 +4,19 @@ import { sequence, trigger, stagger, animate, style, group, query, transition, k export class Animations { + public static fadeInOut = trigger('fadeInOut', [ + state('0', style({ + display: 'none', + opacity: 0 + })), + state('1', style({ + display: 'block', + opacity: 1 + })), + transition('1 => 0', animate('300ms ease-out')), + transition('0 => 1', animate('300ms ease-in')) + ]); + public static slideInOut = trigger('slideInOut', [ state('0', style({ height : '0px', diff --git a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html new file mode 100644 index 00000000..045e077d --- /dev/null +++ b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html @@ -0,0 +1,19 @@ + + {{item.icon}} + {{item.title}} + keyboard_arrow_right + + +
+ +
+ + + + + + +
+ +
\ No newline at end of file diff --git a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.scss b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.scss new file mode 100644 index 00000000..32c65c8c --- /dev/null +++ b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.scss @@ -0,0 +1,3 @@ +:host { + +} diff --git a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts new file mode 100644 index 00000000..84954253 --- /dev/null +++ b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.ts @@ -0,0 +1,50 @@ +import { Component, HostBinding, HostListener, Input, OnDestroy } from '@angular/core'; +import { Animations } from '../../../../animations'; +import { FuseConfigService } from '../../../../services/config.service'; +import { Subscription } from 'rxjs/Subscription'; + +@Component({ + selector : 'fuse-nav-horizontal-collapse', + templateUrl: './nav-horizontal-collapse.component.html', + styleUrls : ['./nav-horizontal-collapse.component.scss'], + animations : [Animations.slideInOut] +}) +export class FuseNavHorizontalCollapseComponent implements OnDestroy +{ + onSettingsChanged: Subscription; + fuseSettings: any; + isOpen = false; + + @HostBinding('class') classes = 'nav-item nav-collapse'; + @Input() item: any; + + @HostListener('mouseenter') + open() + { + this.isOpen = true; + } + + @HostListener('mouseleave') + close() + { + this.isOpen = false; + } + + constructor( + private fuseConfig: FuseConfigService + ) + { + this.onSettingsChanged = + this.fuseConfig.onSettingsChanged + .subscribe( + (newSettings) => { + this.fuseSettings = newSettings; + } + ); + } + + ngOnDestroy() + { + this.onSettingsChanged.unsubscribe(); + } +} diff --git a/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html b/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html new file mode 100644 index 00000000..54045a83 --- /dev/null +++ b/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html @@ -0,0 +1,6 @@ + + {{item.icon}} + {{item.title}} + {{item.badge.title}} + \ No newline at end of file diff --git a/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.scss b/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.scss new file mode 100644 index 00000000..32c65c8c --- /dev/null +++ b/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.scss @@ -0,0 +1,3 @@ +:host { + +} diff --git a/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.ts b/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.ts new file mode 100644 index 00000000..8f9d0b25 --- /dev/null +++ b/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.ts @@ -0,0 +1,12 @@ +import { Component, HostBinding, Input } from '@angular/core'; + +@Component({ + selector : 'fuse-nav-horizontal-item', + templateUrl: './nav-horizontal-item.component.html', + styleUrls : ['./nav-horizontal-item.component.scss'] +}) +export class FuseNavHorizontalItemComponent +{ + @HostBinding('class') classes = 'nav-item'; + @Input() item: any; +} diff --git a/src/app/core/components/navigation/nav-subheader/nav-subheader.component.ts b/src/app/core/components/navigation/nav-subheader/nav-subheader.component.ts deleted file mode 100644 index d2ed28b9..00000000 --- a/src/app/core/components/navigation/nav-subheader/nav-subheader.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Component, HostBinding, Input, OnInit } from '@angular/core'; - -@Component({ - selector : 'fuse-nav-subheader', - templateUrl: './nav-subheader.component.html', - styleUrls : ['./nav-subheader.component.scss'] -}) -export class FuseNavSubheaderComponent implements OnInit -{ - @HostBinding('class') classes = 'nav-subheader'; - @Input() item: any; - - constructor() - { - } - - ngOnInit() - { - } - -} diff --git a/src/app/core/components/navigation/navigation.component.html b/src/app/core/components/navigation/navigation.component.html index 1eb592cd..12b31aff 100644 --- a/src/app/core/components/navigation/navigation.component.html +++ b/src/app/core/components/navigation/navigation.component.html @@ -1,11 +1,27 @@ -