feat(*): add delay before showing the tooltip

infra-geo-ouverte · Nov 23, 2017 · ed45862 · ed45862
1 parent 699a85b
commit ed45862
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 3 deletions.
diff --git a/src/lib/catalog/catalog-layer-item/catalog-layer-item.component.html b/src/lib/catalog/catalog-layer-item/catalog-layer-item.component.html
@@ -1,4 +1,8 @@
 <md-list-item>
   <md-icon md-list-avatar>layers</md-icon>
-  <h4 md-line [md-tooltip]="layer.title">{{layer.title}}</h4>
+  <h4 md-line
+    [md-tooltip]="layer.title"
+    mdTooltipShowDelay="500">
+    {{layer.title}}
+  </h4>
 </md-list-item>
diff --git a/src/lib/context/context-item/context-item.component.html b/src/lib/context/context-item/context-item.component.html
@@ -3,6 +3,7 @@
     md-icon-button
     igoStopPropagation
     [md-tooltip]="'igo.context.favorite' | translate"
+    mdTooltipShowDelay="500"
     [color]="default ? 'primary' : 'default'"
     (click)="favorite.emit(context)">
     <md-icon>
@@ -18,6 +19,7 @@ <h4 mdLine>{{context.title}}</h4>
        <button
          md-icon-button
          [md-tooltip]="'igo.context.clone' | translate"
+         mdTooltipShowDelay="500"
          [color]="color"
          (click)="clone.emit(context)">
          <md-icon>content_copy</md-icon>
@@ -32,6 +34,7 @@ <h4 mdLine>{{context.title}}</h4>
      <button *ngIf="collapsed"
        md-icon-button
        [md-tooltip]="'igo.context.save' | translate"
+       mdTooltipShowDelay="500"
        [color]="color"
        (click)="save.emit(context)">
        <md-icon>save</md-icon>
@@ -42,6 +45,7 @@ <h4 mdLine>{{context.title}}</h4>
       <button
         md-icon-button
         [md-tooltip]="'igo.context.managePermissions' | translate"
+        mdTooltipShowDelay="500"
         [color]="color"
         (click)="managePermissions.emit(context)">
         <md-icon>perm_identity</md-icon>
@@ -58,6 +62,7 @@ <h4 mdLine>{{context.title}}</h4>
       <button
         md-icon-button
         [md-tooltip]="'igo.context.clone' | translate"
+        mdTooltipShowDelay="500"
         [color]="color"
         (click)="clone.emit(context)">
         <md-icon>content_copy</md-icon>
@@ -67,6 +72,7 @@ <h4 mdLine>{{context.title}}</h4>
         md-icon-button
         [color]="color"
         [md-tooltip]="'igo.context.edit' | translate"
+        mdTooltipShowDelay="500"
         (click)="edit.emit(context)">
         <md-icon>edit</md-icon>
       </button>
@@ -75,6 +81,7 @@ <h4 mdLine>{{context.title}}</h4>
         md-icon-button
         color="warn"
         [md-tooltip]="'igo.context.delete' | translate"
+        mdTooltipShowDelay="500"
         (click)="delete.emit(context)">
         <md-icon>delete</md-icon>
       </button>

diff --git a/src/lib/context/context-permissions/context-permissions.component.html b/src/lib/context/context-permissions/context-permissions.component.html
@@ -66,6 +66,7 @@ <h4 md-line>{{permission.profil}}</h4>
                <button
                  md-icon-button
                  [md-tooltip]="'igo.permission.delete' | translate"
+                 mdTooltipShowDelay="500"
                  color="warn"
                  (click)="removePermission.emit(permission)">
                  <md-icon>delete</md-icon>

diff --git a/src/lib/layer/layer-item/layer-item.component.html b/src/lib/layer/layer-item/layer-item.component.html
@@ -7,12 +7,13 @@
     [collapsed]="layer.collapsed"
     (toggle)="toggleLegend($event)">
   </md-icon>
-  <h4 mdLine [md-tooltip]="layer.title">{{layer.title}}</h4>
+  <h4 mdLine [md-tooltip]="layer.title" mdTooltipShowDelay="500">{{layer.title}}</h4>
 
   <button
     md-icon-button
     collapsibleButton
     tooltip-position="below"
+    mdTooltipShowDelay="500"
     [md-tooltip]="layer.visible ?
                   ('igo.layer.hideLayer' | translate) :
                   ('igo.layer.showLayer' | translate)"
@@ -50,6 +51,7 @@ <h4 mdLine [md-tooltip]="layer.title">{{layer.title}}</h4>
       [max]="100"
       [(ngModel)]="opacity"
       [md-tooltip]="'igo.layer.opacity' | translate"
+      mdTooltipShowDelay="500"
       tooltip-position="below">
     </md-slider>
   </div>
@@ -60,6 +62,7 @@ <h4 mdLine [md-tooltip]="layer.title">{{layer.title}}</h4>
         *ngIf="layer.dataSource.options.metadata && layer.dataSource.options.metadata.url"
         md-icon-button
         tooltip-position="below"
+        mdTooltipShowDelay="500"
         [md-tooltip]="'igo.layer.showMetadata' | translate"
         [color]="color"
         (click)="openMetadata(layer.dataSource.options.metadata)">
@@ -69,6 +72,7 @@ <h4 mdLine [md-tooltip]="layer.title">{{layer.title}}</h4>
       <button
         md-icon-button
         tooltip-position="below"
+        mdTooltipShowDelay="500"
         [md-tooltip]="'igo.layer.raiseLayer' | translate"
         [color]="color"
         (click)="layer.map.raiseLayer(layer)">
@@ -78,6 +82,7 @@ <h4 mdLine [md-tooltip]="layer.title">{{layer.title}}</h4>
       <button
         md-icon-button
         tooltip-position="below"
+        mdTooltipShowDelay="500"
         [md-tooltip]="'igo.layer.lowerLayer' | translate"
         [color]="color"
         (click)="layer.map.lowerLayer(layer)">
@@ -87,6 +92,7 @@ <h4 mdLine [md-tooltip]="layer.title">{{layer.title}}</h4>
       <button
         md-icon-button
         tooltip-position="below"
+        mdTooltipShowDelay="500"
         [md-tooltip]="'igo.layer.removeLayer' | translate"
         color="warn"
         (click)="layer.map.removeLayer(layer)">

diff --git a/src/lib/tool/toolbar-item/toolbar-item.component.html b/src/lib/tool/toolbar-item/toolbar-item.component.html
@@ -1,7 +1,14 @@
 <md-list-item
   tooltip-position="below"
+  mdTooltipShowDelay="500"
   [md-tooltip]="tool.tooltip | translate"
   (select)="select.emit(tool)">
-  <md-icon *ngIf="withIcon" md-list-avatar>{{tool.icon}}</md-icon>
+  <md-icon *ngIf="withIcon"
+    md-list-avatar
+    tooltip-position="below"
+    mdTooltipShowDelay="500"
+    [md-tooltip]="(tool.tooltip || tool.title) | translate">
+      {{tool.icon}}
+  </md-icon>
   <h4 *ngIf="withTitle" mdLine>{{tool.title | translate}}</h4>
 </md-list-item>