fix(tooltip): Fixing linter errors (#83)

* fix(tooltip): Fixing linter errors * fix(tooltip): Pull request fixes * fix(tooltip): Merge request update
positive-js · Jan 17, 2019 · eed4b64 · eed4b64
1 parent 48ad8dc
commit eed4b64
Show file tree

Hide file tree

Showing 6 changed files with 233 additions and 227 deletions.
diff --git a/src/lib-dev/tooltip/module.ts b/src/lib-dev/tooltip/module.ts
@@ -1,13 +1,15 @@
-import { Component, NgModule, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Component, NgModule, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { McButtonModule } from '@ptsecurity/mosaic/button';
+import { McFormFieldModule} from '@ptsecurity/mosaic/form-field';
 import { McInputModule } from '@ptsecurity/mosaic/input';
 import { McListModule } from '@ptsecurity/mosaic/list';
 import { McRadioModule } from '@ptsecurity/mosaic/radio';
-import { McToolTipModule, McTooltip } from '@ptsecurity/mosaic/tooltip';
+import { McToolTipModule } from '@ptsecurity/mosaic/tooltip';
 
 
 /* tslint:disable:no-trailing-whitespace */
@@ -19,7 +21,30 @@ import { McToolTipModule, McTooltip } from '@ptsecurity/mosaic/tooltip';
 })
 export class DemoComponent {
 
-    @ViewChild('manualTooltip') manualTooltip: McTooltip;
+    @ViewChild('manualTooltip') manualTooltip: any;
+    @ViewChild('tooltip') tooltip: any;
+    @ViewChild('tooltipRef') tooltipRef: any;
+
+    triggerTooltip: boolean = false;
+    tooltipPosition: string = 'left';
+    title: string = 'Default text';
+    constructor(){}
+
+    toggleTooltip() {
+        if (!this.tooltip.isTooltipOpen) {
+            this.tooltip.show();
+        } else {
+            this.tooltip.hide();
+        }
+    }
+
+    toggleTooltipExternal(flag) {
+        if (!flag) {
+            this.tooltipRef.show();
+        } else {
+            this.tooltipRef.hide();
+        }
+    }
 
     trigger(e) {
         e.stopPropagation();
@@ -29,6 +54,10 @@ export class DemoComponent {
             this.manualTooltip.show();
         }
     }
+
+    updatePosition(pos: string) {
+        this.tooltipPosition = pos;
+    }
 }
 
 @NgModule({
@@ -37,12 +66,14 @@ export class DemoComponent {
     ],
     imports: [
         BrowserModule,
+        BrowserAnimationsModule,
         FormsModule,
         McToolTipModule,
         McButtonModule,
         McRadioModule,
         McListModule,
-        McInputModule
+        McInputModule,
+        McFormFieldModule
     ],
     bootstrap: [
         DemoComponent

diff --git a/src/lib-dev/tooltip/template.html b/src/lib-dev/tooltip/template.html
@@ -1,5 +1,4 @@
-<section class="container flex-100 layout-row layout-align-center-center">
-    <div class="flex-60 layout-column layout-align-center-center">
+<section class="container flex-100 layout-row layout-align-start-center">
         <div class="flex layout-column layout-align-center-center container-item">
             <span class="mc-title">Focus</span>
             <button class="mc-primary"
@@ -50,68 +49,27 @@
             <button class="mc-primary"
                     mc-button
                     mcTooltip="Обновить"
-                    mcPlacement="bottom">bottom</button>
+                    mcPlacement="bottom"
+                    mcVisible="true">bottom</button>
         </div>
-    </div>
-    <div class="flex layout-column layout-align-center-center container-item">
-        <div class="flex layout-row layout-align-center-center">
-            <div>
-                <span> Mouse over to </span>
-                <button mc-button
-                        (mouseenter)="tooltip.show()"
-                        aria-label="Button that progamatically shows a tooltip on another button"
-                        class="example-action-button">
-                    show
-                </button>
-                <button mc-button
-                        (mouseenter)="tooltip.hide()"
-                        aria-label="Button that progamatically hides a tooltip on another button"
-                        class="example-action-button">
-                    hide
-                </button>
-            </div>
+    <div class="flex layout-row layout-align-center-center">
+        <div class="flex-45 flex-column flex-offset-10">
+            <h3>Change placement</h3>
 
-            <button mc-button #tooltip="mcTooltip"
-                    mcTooltip
-                    mcTitle="Info about the action"
-                    mcPlacement="right">
-                Action
-            </button>
-        </div>
-        <div class="flex layout-row layout-aling-center-center">
-            <mc-list-selection
-                class="mc-no-select"
-                [(ngModel)]="multipleSelected"
-                (selectionChange)="onSelectionChange($event)">
-                <mc-list-option
-                    value="Disabled"
-                    disabled
-                    mcTooltip
-                    mcTooltipDisabled
-                >Disabled</mc-list-option>
-                <mc-list-option
-                    value="Normal"
-                    mcTooltip="Item inside list can have a tooltip with a lot of text.
-                                Tooltip for nex element is disabled."
-                    mcPlacement="left">Normal</mc-list-option>
-                <mc-list-option
-                    value="Hovered"
-                    class="mc-hovered"
-                    mcTooltip="Not empty"
-                    mcPlacement="right"
-                    mcTooltipDisabled>Hovered</mc-list-option>
-                <mc-list-option
-                    value="Focused"
-                    class="mc-focused"
-                    mcTooltip
-                    mcTitle="Focused list item have a tooltip"
-                    mcPlacement="bottom">Focused</mc-list-option>
-                <mc-list-option
-                    value="Selected"
-                    class="mc-selected"
-                    mcTooltip="Выбранный элемент списка"
-                    mcPlacement="right">Selected</mc-list-option>
-            </mc-list-selection>
-        </div>
+            <mc-form-field
+                mcTooltip="{{title}}"
+                #tooltipRef="mcTooltip"
+                mcTrigger="manual"
+                mcPlacement="{{tooltipPosition}}">
+                <input mcInput
+                       #positionSource
+                       class="mc-textarea_monospace"
+                       [value]="'Some text...'"
+                />
+            </mc-form-field>
+
+            <button (click)="updatePosition(positionSource.value)">Update</button>
+            <button (click)="toggleTooltipExternal(tooltipRef.isTooltipOpen)">Trigger</button>
+    </div>
     </div>
 </section>
diff --git a/src/lib/tooltip/tooltip.component.html b/src/lib/tooltip/tooltip.component.html
@@ -1,6 +1,6 @@
 
     <div class="mc-tooltip"
-         [ngClass]="_classMap"
+         [ngClass]="classMap"
          [@fadeAnimation]="''+($visible | async)">
         <div class="mc-tooltip-content">
             <div class="mc-tooltip-arrow"></div>