diff --git a/README.md b/README.md index 72e9a59fcd..c9b7bb51e3 100644 --- a/README.md +++ b/README.md @@ -51,14 +51,16 @@ If you want to develop in IGO2 Library, it can be installed by: ### Development server Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the demo's source files. -If you modify files from the lib (../project/*) you must run: +If you modify files from the lib (../packages/*) you must run: 1. npm run build.libs to rebuild all the libs 2. OR -3. npm run build.geo if you have only modifyed the geo project or whatever part of the lib... +3. npm run build.geo if you have only modifyed the geo package or whatever part of the lib... +4. OR +5. npm run start.watch to be aware of any modifications done to the lib. ### Build -Run `npm run build.libs` to build the project. The build artifacts will be stored in the `dist/` directory. +Run `npm run build.libs` to build the whole project. The build artifacts will be stored in the `dist/` directory. ### Running tests diff --git a/demo/src/polyfills.ts b/demo/src/polyfills.ts index 33ec57ee81..92c48eb547 100644 --- a/demo/src/polyfills.ts +++ b/demo/src/polyfills.ts @@ -28,7 +28,7 @@ import 'unorm/lib/unorm.js'; /** IE10 and IE11 requires the following for some object management */ import 'core-js/es7/object'; - +import 'core-js/es7/string'; /** * Web Animations `@angular/platform-browser/animations` * Only required if AnimationBuilder is used within the application and diff --git a/demo/src/styles.scss b/demo/src/styles.scss index fa3e33e470..c73962988c 100644 --- a/demo/src/styles.scss +++ b/demo/src/styles.scss @@ -1,11 +1,12 @@ @import '~dist/core/style/theming'; // replace ~dist by ~@igo2 +@import '~dist/core/style/typography'; @import '~dist/common/style/common.theming'; // replace ~dist by ~@igo2 @import '~dist/geo/style/geo.theming'; // replace ~dist by ~@igo2 @mixin igo-all-theming($theme) { - @include igo-theming($theme); - @include igo-common-theming($theme); - @include igo-geo-theming($theme); + @include igo-theming($theme, $igo-typography); + @include igo-common-theming($theme, $igo-typography); + @include igo-geo-theming($theme, $igo-typography); } .blue-theme { diff --git a/package-lock.json b/package-lock.json index b2201b9173..c434264312 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1071,9 +1071,9 @@ } }, "@mdi/angular-material": { - "version": "4.4.95", - "resolved": "https://registry.npmjs.org/@mdi/angular-material/-/angular-material-4.4.95.tgz", - "integrity": "sha512-WegEz+DtBlsI6Kxq2BSFa/r+teZJHuP4adq/MB+Rurp8xDg0yaoDnG4bh4GY8I+1nl7kY53BSpOTH67ak0qtQA==" + "version": "4.5.95", + "resolved": "https://registry.npmjs.org/@mdi/angular-material/-/angular-material-4.5.95.tgz", + "integrity": "sha512-zhJ3YEvBp5vzIRq1DJi4BcdRDqjpB9lj+Go5gBdCR0qeK6MqonPFkOCsKk8o84aTRm/M4w/tmcBOJ6aa5TTliw==" }, "@mrmlnc/readdir-enhanced": { "version": "2.2.1", diff --git a/package.json b/package.json index 94afaebb0a..7eaa5c9668 100644 --- a/package.json +++ b/package.json @@ -81,7 +81,7 @@ "@ionic-native/network": "^5.12.0", "@ionic/angular": "^4.6.2", "@mat-datetimepicker/core": "^3.0.0-beta.0", - "@mdi/angular-material": "^4.4.95", + "@mdi/angular-material": "^4.5.95", "@ngx-translate/core": "^10.0.1", "@turf/helpers": "^6.1.4", "@turf/line-intersect": "^6.0.2", diff --git a/packages/common/src/lib/tool/shared/index.ts b/packages/common/src/lib/tool/shared/index.ts index 19607f55c6..14c3e0e2b3 100644 --- a/packages/common/src/lib/tool/shared/index.ts +++ b/packages/common/src/lib/tool/shared/index.ts @@ -1,4 +1,5 @@ export * from './tool.interface'; export * from './tool.service'; export * from './tool-component'; +export * from './toolbox.enums'; export * from './toolbox'; diff --git a/packages/common/src/lib/tool/shared/toolbox.enums.ts b/packages/common/src/lib/tool/shared/toolbox.enums.ts new file mode 100644 index 0000000000..bd5bbe854b --- /dev/null +++ b/packages/common/src/lib/tool/shared/toolbox.enums.ts @@ -0,0 +1,5 @@ +export enum ToolboxColor { + White = 'white', + Grey = 'grey', + Primary = 'primary' +} diff --git a/packages/common/src/lib/tool/toolbox/toolbox.component.scss b/packages/common/src/lib/tool/toolbox/toolbox.component.scss index 6ef904c4b8..f767f16326 100644 --- a/packages/common/src/lib/tool/toolbox/toolbox.component.scss +++ b/packages/common/src/lib/tool/toolbox/toolbox.component.scss @@ -23,7 +23,7 @@ } .igo-tool-container-with-toolbar { - left: 51px; + left: 50px; } igo-actionbar { diff --git a/packages/common/src/lib/tool/toolbox/toolbox.component.ts b/packages/common/src/lib/tool/toolbox/toolbox.component.ts index 9527a3dc21..fcb675d5ab 100644 --- a/packages/common/src/lib/tool/toolbox/toolbox.component.ts +++ b/packages/common/src/lib/tool/toolbox/toolbox.component.ts @@ -3,6 +3,7 @@ import { Input, OnDestroy, OnInit, + HostBinding, ChangeDetectionStrategy } from '@angular/core'; @@ -11,6 +12,7 @@ import { map } from 'rxjs/operators'; import { Action, ActionStore } from '../../action'; import { Tool } from '../shared/tool.interface'; +import { ToolboxColor } from '../shared/toolbox.enums'; import { Toolbox } from '../shared/toolbox'; import { toolSlideInOut } from './toolbox.animation'; @@ -22,7 +24,6 @@ import { toolSlideInOut } from './toolbox.animation'; changeDetection: ChangeDetectionStrategy.OnPush }) export class ToolboxComponent implements OnInit, OnDestroy { - /** * Observable of the active tool */ @@ -82,6 +83,27 @@ export class ToolboxComponent implements OnInit, OnDestroy { */ @Input() animate: boolean = false; + /** + * Color of Toolbox + */ + @Input() color: ToolboxColor = ToolboxColor.White; + + /** + * @ignore + */ + @HostBinding('class.color-grey') + get classColorGrey() { + return this.color === ToolboxColor.Grey; + } + + /** + * @ignore + */ + @HostBinding('class.color-primary') + get classColorPrimary() { + return this.color === ToolboxColor.Primary; + } + /** * Initialize the toolbar and subscribe to the active tool * @internal @@ -200,8 +222,11 @@ export class ToolboxComponent implements OnInit, OnDestroy { } let childrenToolActivated = false; - if (activeTool !== undefined && _tool.name === activeTool.parent) { - childrenToolActivated = true; + if ( + activeTool !== undefined && + _tool.name === activeTool.parent + ) { + childrenToolActivated = true; } return { diff --git a/packages/common/src/lib/tool/toolbox/toolbox.theming.scss b/packages/common/src/lib/tool/toolbox/toolbox.theming.scss index 2dd9435e87..439d15bd45 100644 --- a/packages/common/src/lib/tool/toolbox/toolbox.theming.scss +++ b/packages/common/src/lib/tool/toolbox/toolbox.theming.scss @@ -1,13 +1,50 @@ @mixin igo-toolbox-theming($theme) { + $primary: map-get($theme, primary); $accent: map-get($theme, accent); + $foreground: map-get($theme, foreground); + igo-toolbox > igo-actionbar mat-list.mat-list-base igo-actionbar-item mat-list-item { + &:hover { + background-color: mat-color($accent, lighter); + } - igo-toolbox > igo-actionbar igo-actionbar-item mat-list-item.tool-activated { - background-color: mat-color($accent); + &.tool-activated, + &.children-tool-activated { + background-color: mat-color($accent); + cursor: default; + button { + cursor: default; + } + } } - igo-toolbox > igo-actionbar igo-actionbar-item mat-list-item.children-tool-activated { - background-color: mat-color($accent); + + igo-toolbox.color-primary > igo-actionbar:not(.with-title) { + box-shadow: unset; + background-color: mat-color($primary) + } + + igo-toolbox.color-grey > igo-actionbar:not(.with-title) { + box-shadow: unset; + background-color: #737475; } - + + igo-toolbox.color-primary, + igo-toolbox.color-grey { + & > igo-actionbar:not(.with-title) mat-list.mat-list-base { + .mat-list-item.mat-list-item-with-avatar { + color: white; + &:hover { + color: mat-color($foreground, text); + } + + &.tool-activated, + &.children-tool-activated { + background-color: white; + color: mat-color($foreground, text); + } + } + } + } + } diff --git a/packages/common/src/style/common.theming.scss b/packages/common/src/style/common.theming.scss index 4fb731e405..261bdcc334 100644 --- a/packages/common/src/style/common.theming.scss +++ b/packages/common/src/style/common.theming.scss @@ -5,7 +5,7 @@ @import '../lib/panel/panel.theming'; @import '../lib/tool/tool.theming'; -@mixin igo-common-theming($theme) { +@mixin igo-common-theming($theme, $typography) { @include igo-action-theming($theme); @include igo-collapsible-theming($theme); @include igo-entity-theming($theme); diff --git a/packages/context/src/lib/context-map-button/user-button/user-button.component.html b/packages/context/src/lib/context-map-button/user-button/user-button.component.html index 5aa10bf87b..f03f7f6b74 100644 --- a/packages/context/src/lib/context-map-button/user-button/user-button.component.html +++ b/packages/context/src/lib/context-map-button/user-button/user-button.component.html @@ -1,8 +1,8 @@
- - + +
-
+