From 71a18758e2547d7fb83e503ce6bb43358c5a74bc Mon Sep 17 00:00:00 2001 From: mustafahlvc Date: Sat, 12 Aug 2017 11:31:16 +0300 Subject: [PATCH 1/9] (shortcuts) some refinements (perfect scrollbar, star, width, autofocus) + removed !important on some classes of colors --- .../navigation/navigation.service.ts | 8 ++--- .../shortcuts/shortcuts.component.html | 32 ++++++++++--------- .../shortcuts/shortcuts.component.ts | 15 ++++++++- src/app/core/scss/partials/_colors.scss | 12 +++---- 4 files changed, 41 insertions(+), 26 deletions(-) diff --git a/src/app/core/components/navigation/navigation.service.ts b/src/app/core/components/navigation/navigation.service.ts index ef638a84..09d4dcd2 100644 --- a/src/app/core/components/navigation/navigation.service.ts +++ b/src/app/core/components/navigation/navigation.service.ts @@ -44,10 +44,10 @@ export class FuseNavigationService if ( navItem.type === 'nav-item' ) { this.flatNavigation.push({ - title : navItem.title, - titleAbbr: navItem.title.substr(0, 1).toUpperCase(), - icon : navItem.icon || false, - url : navItem.url + title: navItem.title, + type : navItem.type, + icon : navItem.icon || false, + url : navItem.url }); continue; diff --git a/src/app/core/components/shortcuts/shortcuts.component.html b/src/app/core/components/shortcuts/shortcuts.component.html index a331cb0f..c0e595e2 100644 --- a/src/app/core/components/shortcuts/shortcuts.component.html +++ b/src/app/core/components/shortcuts/shortcuts.component.html @@ -7,36 +7,38 @@ {{shortcutItem.icon}} - {{shortcutItem.titleAbbr}} + + {{shortcutItem.title.substr(0, 1).toUpperCase()}} + - - + - - + + + - -

Current Shortcuts

{{shortcutItem.icon}} - {{shortcutItem.titleAbbr}} + {{shortcutItem.title.substr(0, 1).toUpperCase()}} -

{{shortcutItem.title}}

+

{{shortcutItem.title}}

+ star
@@ -46,20 +48,20 @@ - +
{{navigationItem.icon}} - {{navigationItem.titleAbbr}} + {{navigationItem.title.substr(0, 1).toUpperCase()}} -

{{navigationItem.title}}

+

{{navigationItem.title}}

+ star
- - \ No newline at end of file + diff --git a/src/app/core/components/shortcuts/shortcuts.component.ts b/src/app/core/components/shortcuts/shortcuts.component.ts index f369bc8e..e3e1df37 100644 --- a/src/app/core/components/shortcuts/shortcuts.component.ts +++ b/src/app/core/components/shortcuts/shortcuts.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core'; import { FuseNavigationService } from '../navigation/navigation.service'; @Component({ @@ -12,6 +12,7 @@ export class FuseShortcutsComponent implements OnInit navigationItems: any[]; filteredNavigationItems: any[]; searching = false; + @ViewChild('searchInput') searchInputField; constructor(private fuseNavigationService: FuseNavigationService) { @@ -84,4 +85,16 @@ export class FuseShortcutsComponent implements OnInit this.shortcutItems.push(itemToToggle); } + + isInShortcuts(navigationItem) + { + return this.shortcutItems.find(item => { + return item.url === navigationItem.url; + }); + } + + onMenuOpen() + { + this.searchInputField.nativeElement.focus(); + } } diff --git a/src/app/core/scss/partials/_colors.scss b/src/app/core/scss/partials/_colors.scss index 4da83777..51050031 100644 --- a/src/app/core/scss/partials/_colors.scss +++ b/src/app/core/scss/partials/_colors.scss @@ -1,16 +1,16 @@ .secondary-text, .mat-icon, .icon { - color: rgba(0, 0, 0, 0.54) !important; + color: rgba(0, 0, 0, 0.54); } .hint-text, .disabled-text { - color: rgba(0, 0, 0, 0.38) !important; + color: rgba(0, 0, 0, 0.38); } .divider { - color: rgba(0, 0, 0, 0.12) !important; + color: rgba(0, 0, 0, 0.12); } // Material colors map @@ -54,7 +54,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400 .secondary-text, .mat-icon, .icon { - color: rgba(0, 0, 0, 0.54) !important; + color: rgba(0, 0, 0, 0.54); } &.hint-text, @@ -79,7 +79,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400 .mat-icon, .icon { - color: rgba(255, 255, 255, 1) !important; + color: rgba(255, 255, 255, 1); } &.secondary-text, @@ -168,4 +168,4 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400 } } } -} \ No newline at end of file +} From c389d1996300c9b8292f28c4f2bd539ca588a338 Mon Sep 17 00:00:00 2001 From: mustafahlvc Date: Mon, 14 Aug 2017 09:53:18 +0300 Subject: [PATCH 2/9] (fuse-widget) fuseWidgetToggle Directive added for to not use class toggler. --- .../core/components/widget/widget.component.scss | 2 +- .../core/components/widget/widget.component.ts | 7 +++---- .../dashboards/project/project.component.html | 16 ++++++++-------- 3 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/app/core/components/widget/widget.component.scss b/src/app/core/components/widget/widget.component.scss index 7fbc6f26..d5d54a89 100644 --- a/src/app/core/components/widget/widget.component.scss +++ b/src/app/core/components/widget/widget.component.scss @@ -40,7 +40,7 @@ fuse-widget { transform: rotateY(180deg); backface-visibility: hidden; - .fuse-widget-flip-button { + [fuseWidgetToggle] { position: absolute; top: 0; right: 0; diff --git a/src/app/core/components/widget/widget.component.ts b/src/app/core/components/widget/widget.component.ts index 0588c76e..e92e07e6 100644 --- a/src/app/core/components/widget/widget.component.ts +++ b/src/app/core/components/widget/widget.component.ts @@ -11,6 +11,7 @@ import { FuseWidgetToggleDirective } from './widget-toggle.directive'; export class FuseWidgetComponent implements OnInit, AfterContentInit { @HostBinding('class.flipped') flipped = false; + @ContentChildren(FuseWidgetToggleDirective, {descendants: true}) toggleButtons: QueryList; constructor(private el: ElementRef, private renderer: Renderer2) { @@ -25,10 +26,8 @@ export class FuseWidgetComponent implements OnInit, AfterContentInit { setTimeout(() => { - const flipButtons = this.el.nativeElement.querySelectorAll('.fuse-widget-flip-button'); - - flipButtons.forEach(flipButton => { - this.renderer.listen(flipButton, 'click', () => { + this.toggleButtons.forEach(flipButton => { + this.renderer.listen(flipButton.el.nativeElement, 'click', () => { this.toggle(); }); }); diff --git a/src/app/main/content/apps/dashboards/project/project.component.html b/src/app/main/content/apps/dashboards/project/project.component.html index ae277f07..59022f4d 100644 --- a/src/app/main/content/apps/dashboards/project/project.component.html +++ b/src/app/main/content/apps/dashboards/project/project.component.html @@ -57,7 +57,7 @@ - @@ -79,7 +79,7 @@
- @@ -100,7 +100,7 @@
{{widgets.widget2.title}}
-
@@ -121,7 +121,7 @@
- @@ -142,7 +142,7 @@
{{widgets.widget3.title}}
-
@@ -163,7 +163,7 @@
- @@ -184,7 +184,7 @@
{{widgets.widget4.title}}
-
@@ -204,7 +204,7 @@
- From fbeb2ca7f669121ab1a00acf1a72ec8d5273f8b2 Mon Sep 17 00:00:00 2001 From: mustafahlvc Date: Mon, 14 Aug 2017 10:35:58 +0300 Subject: [PATCH 3/9] (Project Dashboard) title bottom margin removed --- .../main/content/apps/dashboards/project/project.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/main/content/apps/dashboards/project/project.component.html b/src/app/main/content/apps/dashboards/project/project.component.html index 59022f4d..ac86f956 100644 --- a/src/app/main/content/apps/dashboards/project/project.component.html +++ b/src/app/main/content/apps/dashboards/project/project.component.html @@ -10,7 +10,7 @@
- Welcome back, John! + Welcome back, John!
From 7cfbf4d8df194828deb2c03d596cf7a7ca64eaf2 Mon Sep 17 00:00:00 2001 From: mustafahlvc Date: Mon, 14 Aug 2017 12:26:50 +0300 Subject: [PATCH 5/9] (Todo App)(Mail App) tag/label restyling --- src/app/fuse-fake-db/mail.ts | 4 +- .../mail-details/mail-details.component.html | 7 ++- .../mail-details/mail-details.component.scss | 16 ++++-- .../mail-list-item.component.html | 13 ++--- .../mail-list-item.component.scss | 53 ++++++++++--------- .../todo-details/todo-details.component.html | 7 ++- .../todo-details/todo-details.component.scss | 13 ++++- .../todo-list-item.component.scss | 2 +- 8 files changed, 72 insertions(+), 43 deletions(-) diff --git a/src/app/fuse-fake-db/mail.ts b/src/app/fuse-fake-db/mail.ts index af387198..44c9df31 100644 --- a/src/app/fuse-fake-db/mail.ts +++ b/src/app/fuse-fake-db/mail.ts @@ -119,8 +119,8 @@ export class MailFakeDb 'important' : false, 'hasAttachments': false, 'labels' : [ - 3, - 4 + 1, + 3 ], 'folder' : 0 }, diff --git a/src/app/main/content/apps/mail/mail-details/mail-details.component.html b/src/app/main/content/apps/mail/mail-details/mail-details.component.html index 7ffea93d..0927817a 100644 --- a/src/app/main/content/apps/mail/mail-details/mail-details.component.html +++ b/src/app/main/content/apps/mail/mail-details/mail-details.component.html @@ -10,11 +10,14 @@
{{mail.subject}}
-
+
{{labels | getById:labelId:'title'}} + fxLayout="row" fxLayoutAlign="start center"> +
+
{{labels | getById:labelId:'title'}}
+
diff --git a/src/app/main/content/apps/mail/mail-details/mail-details.component.scss b/src/app/main/content/apps/mail/mail-details/mail-details.component.scss index d52a462b..98f35cc8 100644 --- a/src/app/main/content/apps/mail/mail-details/mail-details.component.scss +++ b/src/app/main/content/apps/mail/mail-details/mail-details.component.scss @@ -12,7 +12,7 @@ } .mail-header { - padding-bottom: 24px; + padding-bottom: 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); .actions { @@ -25,10 +25,18 @@ } .label { - display: inline-block; font-size: 11px; - padding: 0 5px; - margin: 8px 6px 0 0; + border-radius: 2px; + margin: 4px 4px 4px 0; + padding: 3px 8px; + background-color: rgba(0, 0, 0, 0.08); + + .label-color { + width: 8px; + height: 8px; + margin-right: 8px; + border-radius: 50%; + } } } diff --git a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html index 447054c7..59a8858d 100644 --- a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html +++ b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html @@ -22,14 +22,15 @@
{{mail.message | htmlToPlaintext | slice:0:180}}{{mail.message.length > 180 ? '...' : ''}} - -
-
{{labels | getById:labelId:'title'}} -
-
+
+
+
+
{{labels | getById:labelId:'title'}}
+
+
diff --git a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss index 90b5b544..0e58acde 100644 --- a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss +++ b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.scss @@ -18,10 +18,10 @@ } .message { + } - .labels { - background: #FFFFFF; - } + .labels { + background: #FFFFFF; } } } @@ -33,9 +33,10 @@ .message { - .labels { - background: #FFF8E1; - } + } + + .labels { + background: #FFF8E1; } } } @@ -46,10 +47,9 @@ .info { .message { - - .labels { - background: #E3F2FD; - } + } + .labels { + background: #E3F2FD; } } } @@ -58,6 +58,7 @@ overflow: hidden; width: 0; margin: 0 16px; + position: relative; .name { font-size: 15px; @@ -80,23 +81,27 @@ .message { position: relative; color: rgba(0, 0, 0, 0.54); + } - .labels { - position: absolute; - background: #FAFAFA; - top: 0; - right: 0; - padding-left: 6px; + .labels { + position: absolute; + background: #FAFAFA; + bottom: 0; + right: 0; + padding-left: 6px; - .label { - display: inline-block; - font-size: 11px; - padding: 0 5px; - margin-right: 6px; + .label { + font-size: 11px; + border-radius: 2px; + margin: 0 4px 0 0; + padding: 3px 8px; + background-color: rgba(0, 0, 0, 0.08); - &:first-child { - margin-left: 0; - } + .label-color { + width: 8px; + height: 8px; + margin-right: 8px; + border-radius: 50%; } } } diff --git a/src/app/main/content/apps/todo/todo-details/todo-details.component.html b/src/app/main/content/apps/todo/todo-details/todo-details.component.html index 2e1a1576..23b9397d 100644 --- a/src/app/main/content/apps/todo/todo-details/todo-details.component.html +++ b/src/app/main/content/apps/todo/todo-details/todo-details.component.html @@ -60,8 +60,11 @@
-
{{tags | getById:tagId:'title'}} +
+ +
+ +
{{tags | getById:tagId:'title'}}
diff --git a/src/app/main/content/apps/todo/todo-details/todo-details.component.scss b/src/app/main/content/apps/todo/todo-details/todo-details.component.scss index 04424c0f..215fdfb6 100644 --- a/src/app/main/content/apps/todo/todo-details/todo-details.component.scss +++ b/src/app/main/content/apps/todo/todo-details/todo-details.component.scss @@ -25,8 +25,17 @@ .tag { font-size: 11px; - padding: 0 5px; - margin: 8px 6px 0 0; + border-radius: 2px; + margin: 8px 4px 0 0; + padding: 3px 8px; + background-color: rgba(0, 0, 0, 0.08); + + .tag-color { + width: 8px; + height: 8px; + margin-right: 8px; + border-radius: 50%; + } } .to { diff --git a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.scss b/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.scss index e50ae7eb..ed0db5c7 100644 --- a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.scss +++ b/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.scss @@ -31,9 +31,9 @@ } .tags { - font-size: 12px; .tag { + font-size: 11px; border-radius: 2px; margin: 8px 4px 0 0; padding: 3px 8px; From a522fb3822e6e4eff15e3688cce5b8014f2eef73 Mon Sep 17 00:00:00 2001 From: mustafahlvc Date: Mon, 14 Aug 2017 16:15:19 +0300 Subject: [PATCH 6/9] (fuseIfOndDom) function changed for ie + new polyfills added and activated. --- .editorconfig | 1 - package-lock.json | 15 ++++++ package.json | 7 ++- .../fuse-if-on-dom.directive.ts | 4 +- src/polyfills.ts | 49 +++++++++++-------- 5 files changed, 50 insertions(+), 26 deletions(-) diff --git a/.editorconfig b/.editorconfig index 6e87a003..ff9b6fc9 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,4 +1,3 @@ -# Editor configuration, see http://editorconfig.org root = true [*] diff --git a/package-lock.json b/package-lock.json index ffb9f209..0b158201 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1260,6 +1260,11 @@ } } }, + "classlist.js": { + "version": "1.1.20150312", + "resolved": "https://registry.npmjs.org/classlist.js/-/classlist.js-1.1.20150312.tgz", + "integrity": "sha1-HXCEL3Ai8I2awIbOaeWyUPLFd4k=" + }, "clean-css": { "version": "4.1.7", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.7.tgz", @@ -3948,6 +3953,11 @@ "integrity": "sha1-y8NcYu7uc/Gat7EKgBURQBr8D5A=", "dev": true }, + "intl": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/intl/-/intl-1.2.5.tgz", + "integrity": "sha1-giRKIZDE5Bn4Nx9ao02qNCDiq94=" + }, "invariant": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz", @@ -8261,6 +8271,11 @@ "minimalistic-assert": "1.0.0" } }, + "web-animations-js": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/web-animations-js/-/web-animations-js-2.3.1.tgz", + "integrity": "sha1-Om2bwVGWN3qQ+OKAP6UmIWWwRRA=" + }, "webdriver-js-extender": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/webdriver-js-extender/-/webdriver-js-extender-1.0.0.tgz", diff --git a/package.json b/package.json index 6529c6a5..b67351e7 100644 --- a/package.json +++ b/package.json @@ -24,20 +24,23 @@ "@angular/platform-browser": "^4.3.3", "@angular/platform-browser-dynamic": "^4.3.3", "@angular/router": "^4.3.3", + "@swimlane/ngx-charts": "^6.0.1", "@swimlane/ngx-datatable": "^9.3.1", "@swimlane/ngx-dnd": "^2.2.0", "angular-calendar": "^0.19.0", "angular-in-memory-web-api": "^0.3.2", + "classlist.js": "^1.1.20150312", "core-js": "^2.5.0", + "d3": "^4.10.0", "firebase": "^4.2.0", "hammerjs": "^2.0.8", "highlight.js": "^9.12.0", + "intl": "^1.2.5", "moment": "^2.18.1", - "d3": "^4.10.0", - "@swimlane/ngx-charts": "^6.0.1", "ngx-color-picker": "^4.3.0", "ngx-perfect-scrollbar": "^4.5.3", "rxjs": "^5.4.2", + "web-animations-js": "^2.3.1", "zone.js": "^0.8.16" }, "devDependencies": { diff --git a/src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts b/src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts index 1db64417..3854c0f9 100644 --- a/src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts +++ b/src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts @@ -17,14 +17,14 @@ export class FuseIfOnDomDirective implements AfterContentChecked ngAfterContentChecked() { - if ( this.element.nativeElement.isConnected && !this.isCreated ) + if ( document.body.contains(this.element.nativeElement) && !this.isCreated ) { setTimeout(() => { this.viewContainer.createEmbeddedView(this.templateRef); }, 0); this.isCreated = true; } - else if ( this.isCreated && !this.element.nativeElement.isConnected ) + else if ( this.isCreated && !document.body.contains(this.element.nativeElement) ) { this.viewContainer.clear(); this.isCreated = false; diff --git a/src/polyfills.ts b/src/polyfills.ts index fd01cc9f..03076c57 100644 --- a/src/polyfills.ts +++ b/src/polyfills.ts @@ -19,27 +19,28 @@ */ /** IE9, IE10 and IE11 requires all of the following polyfills. **/ -// import 'core-js/es6/symbol'; -// import 'core-js/es6/object'; -// import 'core-js/es6/function'; -// import 'core-js/es6/parse-int'; -// import 'core-js/es6/parse-float'; -// import 'core-js/es6/number'; -// import 'core-js/es6/math'; -// import 'core-js/es6/string'; -// import 'core-js/es6/date'; -// import 'core-js/es6/array'; -// import 'core-js/es6/regexp'; -// import 'core-js/es6/map'; -// import 'core-js/es6/weak-map'; -// import 'core-js/es6/set'; +import 'core-js/es6/symbol'; +import 'core-js/es6/object'; +import 'core-js/es6/function'; +import 'core-js/es6/parse-int'; +import 'core-js/es6/parse-float'; +import 'core-js/es6/number'; +import 'core-js/es6/math'; +import 'core-js/es6/string'; +import 'core-js/es6/date'; +import 'core-js/es6/array'; +import 'core-js/es6/regexp'; +import 'core-js/es6/map'; +import 'core-js/es6/weak-map'; +import 'core-js/es6/set'; + +import 'core-js/es7/array'; /** IE10 and IE11 requires the following for NgClass support on SVG elements */ -// import 'classlist.js'; // Run `npm install --save classlist.js`. +import 'classlist.js'; // Run `npm install --save classlist.js`. /** IE10 and IE11 requires the following to support `@angular/animation`. */ -// import 'web-animations-js'; // Run `npm install --save web-animations-js`. - +import 'web-animations-js'; // Run `npm install --save web-animations-js`. /** Evergreen browsers require these. **/ import 'core-js/es6/reflect'; @@ -47,7 +48,7 @@ import 'core-js/es7/reflect'; /** ALL Firefox browsers require the following to support `@angular/animation`. **/ -// import 'web-animations-js'; // Run `npm install --save web-animations-js`. +import 'web-animations-js'; // Run `npm install --save web-animations-js`. @@ -57,7 +58,6 @@ import 'core-js/es7/reflect'; import 'zone.js/dist/zone'; // Included with Angular CLI. - /*************************************************************************************************** * APPLICATION IMPORTS */ @@ -66,8 +66,15 @@ import 'zone.js/dist/zone'; // Included with Angular CLI. * Date, currency, decimal and percent pipes. * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 */ -// import 'intl'; // Run `npm install --save intl`. +import 'intl'; // Run `npm install --save intl`. /** * Need to import at least one locale-data with intl. */ -// import 'intl/locale-data/jsonp/en'; +import 'intl/locale-data/jsonp/en'; + +/** + * Fix for ngx-chart to work on ie11 + */ +if (typeof SVGElement.prototype.contains === 'undefined') { + SVGElement.prototype.contains = HTMLDivElement.prototype.contains; +} From 0cbe978f49f212ba91f320588a1ec22197187ce5 Mon Sep 17 00:00:00 2001 From: mustafahlvc Date: Mon, 14 Aug 2017 16:36:54 +0300 Subject: [PATCH 7/9] (Projects Dashboard) Now widget date format corrected. --- .../main/content/apps/dashboards/project/project.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/main/content/apps/dashboards/project/project.component.html b/src/app/main/content/apps/dashboards/project/project.component.html index ac86f956..91dc83f9 100644 --- a/src/app/main/content/apps/dashboards/project/project.component.html +++ b/src/app/main/content/apps/dashboards/project/project.component.html @@ -701,7 +701,7 @@
-
{{dateNow | date: 'd'}},{{dateNow | date: 'h'}}:{{dateNow | date: 'm'}}:{{dateNow | date: 'ss'}}
+
{{dateNow | date: 'EEEE'}}, {{dateNow | date: 'h'}}:{{dateNow | date: 'm'}}:{{dateNow | date: 'ss'}}