Merge pull request #22 from infra-geo-ouverte/master

merge master
infra-geo-ouverte · Oct 31, 2019 · f2a365a · f2a365a
2 parents 16532c1 + f443ea8
commit f2a365a
Show file tree

Hide file tree

Showing 43 changed files with 203 additions and 105 deletions.
diff --git 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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,8 +1,8 @@
 <div *ngIf="visible" class="igo-user-button-container">
   <div class="igo-user-button-more-container" [@userButtonState]="expand ? 'expand' : 'collapse'">
 
-    <igo-poi-button [color]="color" [map]="map"></igo-poi-button>
-    <igo-bookmark-button [color]="color" [map]="map"></igo-bookmark-button>
+    <igo-poi-button *ngIf="hasApi" [color]="color" [map]="map"></igo-poi-button>
+    <igo-bookmark-button *ngIf="hasApi" [color]="color" [map]="map"></igo-bookmark-button>
 
     <button
       mat-icon-button

diff --git a/packages/context/src/lib/context-map-button/user-button/user-button.component.ts b/packages/context/src/lib/context-map-button/user-button/user-button.component.ts
@@ -35,13 +35,15 @@ export class UserButtonComponent {
 
   public expand = false;
   public visible = false;
+  public hasApi = false;
 
   constructor(
     private dialog: MatDialog,
     private config: ConfigService,
     public auth: AuthService
   ) {
     this.visible = this.config.getConfig('auth') ? true : false;
+    this.hasApi = this.config.getConfig('context.url') !== undefined;
   }
 
   accountClick() {

diff --git a/packages/context/src/lib/share-map/share-map/share-map.component.html b/packages/context/src/lib/share-map/share-map/share-map.component.html
@@ -27,7 +27,7 @@
     </mat-form-field>
   </div>
 
-  <div *ngIf="hasShareMapButton" class="igo-form-button-group">
+  <div *ngIf="hasApi" class="igo-form-button-group">
     <button
       mat-raised-button
       type="submit"
@@ -41,9 +41,10 @@
 <div *ngIf="url" class="igo-input-container linkToShare">
   <mat-form-field>
     <textarea #textArea matInput readonly rows="1"
+      [ngClass]="{'textAreaWithButton': hasApi}"
       [placeholder]="'igo.context.shareMap.placeholderLink' | translate"
       [value]="url"></textarea>
-    <button
+    <button *ngIf="hasApi"
       mat-icon-button
       tooltip-position="below"
       matTooltipShowDelay="500"
@@ -54,7 +55,7 @@
     </button>
   </mat-form-field>
 
-  <div *ngIf="hasCopyLinkButton" class="igo-form-button-group">
+  <div *ngIf="!hasApi" class="igo-form-button-group">
     <button
       mat-raised-button
       (click)="copyTextToClipboard(textArea)">

diff --git a/packages/context/src/lib/share-map/share-map/share-map.component.scss b/packages/context/src/lib/share-map/share-map/share-map.component.scss
@@ -16,12 +16,15 @@ mat-form-field {
   padding: 25px 5px 5px;
   textarea {
     resize: none;
-    width: calc(100% - 60px);
+    width: 100%;
     line-height: 1.3;
     height: 40px;
     overflow-y: hidden;
     word-wrap: normal;
     word-break: break-all;
+    &.textAreaWithButton {
+      width: calc(100% - 60px);
+    }
   }
   mat-form-field > button {
     float: right;

diff --git a/packages/context/src/lib/share-map/share-map/share-map.component.ts b/packages/context/src/lib/share-map/share-map/share-map.component.ts
@@ -25,24 +25,6 @@ export class ShareMapComponent implements AfterViewInit, OnInit {
   }
   private _map: IgoMap;
 
-  @Input()
-  get hasShareMapButton(): boolean {
-    return this._hasShareMapButton;
-  }
-  set hasShareMapButton(value: boolean) {
-    this._hasShareMapButton = value;
-  }
-  private _hasShareMapButton = true;
-
-  @Input()
-  get hasCopyLinkButton(): boolean {
-    return this._hasCopyLinkButton;
-  }
-  set hasCopyLinkButton(value: boolean) {
-    this._hasCopyLinkButton = value;
-  }
-  private _hasCopyLinkButton = false;
-
   public url: string;
   public hasApi = false;
   public userId;

diff --git a/packages/core/src/style/all.theming.scss b/packages/core/src/style/all.theming.scss
@@ -1,9 +1,10 @@
 @import './theming';
+@import './typography';
 @import '../../../common/src/style/common.theming';
 @import '../../../geo/src/style/geo.theming';
 
-@mixin igo-all-theming($theme) {
-  @include igo-theming($theme);
-  @include igo-common-theming($theme);
-  @include igo-geo-theming($theme);
+@mixin igo-all-theming($theme, $typography: $igo-typography) {
+  @include igo-theming($theme, $typography);
+  @include igo-common-theming($theme, $typography);
+  @include igo-geo-theming($theme, $typography);
 }
diff --git a/packages/core/src/style/core.theming.scss b/packages/core/src/style/core.theming.scss
@@ -1,5 +1,5 @@
 @import '../lib/message/message.theming';
 
-@mixin igo-core-theming($theme) {
+@mixin igo-core-theming($theme, $typography) {
   @include igo-message-theming($theme);
 }
diff --git a/packages/core/src/style/foreground.scss b/packages/core/src/style/foreground.scss
@@ -0,0 +1,20 @@
+@function theme-foreground($palette) {
+    $color: mat-color($palette);
+    @return (
+        base:              $color,
+        divider:           rgba($color, 0.12),
+        dividers:          rgba($color, 0.12),
+        disabled:          rgba($color, 0.38),
+        disabled-button:   rgba($color, 0.26),
+        disabled-text:     rgba($color, 0.38),
+        elevation:         $color,
+        hint-text:         rgba($color, 0.38),
+        secondary-text:    rgba($color, 0.54),
+        icon:              rgba($color, 0.54),
+        icons:             rgba($color, 0.54),
+        text:              rgba($color, 0.87),
+        slider-min:        rgba($color, 0.87),
+        slider-off:        rgba($color, 0.26),
+        slider-off-active: rgba($color, 0.38)
+    );
+};
diff --git a/packages/core/src/style/themes/blue.theme.scss b/packages/core/src/style/themes/blue.theme.scss
@@ -1,9 +1,14 @@
+@import '../foreground';
+
 $primary: mat-palette($mat-blue, 700, 400, 900);
 $accent: mat-palette($mat-blue, 200);
 $warn: mat-palette($mat-red);
 
-$theme: mat-light-theme(
+$temp-theme: mat-light-theme(
     $primary,
     $accent,
     $warn
 );
+
+$foreground: theme-foreground(mat-palette($mat-grey, 900));
+$theme: map-merge($temp-theme, (foreground: $foreground));
diff --git a/packages/core/src/style/theming.scss b/packages/core/src/style/theming.scss
@@ -3,9 +3,9 @@
 @import './material.font';
 @import './core.theming';
 
-@mixin igo-theming($theme) {
-  @include mat-core();
+@mixin igo-theming($theme, $typography) {
+  @include mat-core($typography);
   @include angular-material-theme($theme);
 
-  @include igo-core-theming($theme);
+  @include igo-core-theming($theme, $typography);
 }