Finish demo

farengeyt451 · Sep 12, 2023 · ae30e35 · ae30e35
1 parent b10d233
commit ae30e35
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 19 deletions.
diff --git a/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.html b/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.html
@@ -1,12 +1,5 @@
 <div class="demo-page">
 
-  <tui-notification
-    status="warning"
-    class="service-demo tui-space_vertical-4"
-  >
-    In progress
-  </tui-notification>
-
   <h1 class="tui-text_h3">Demo page</h1>
 
   <!-- Simple tooltip -->
@@ -31,14 +24,16 @@ <h6 class="tui-text_h6">
     </button>
   </t-demo>
 
+  <!-- Placements -->
+
   <h6 class="tui-text_h6">
     Placements:
   </h6>
 
   <t-demo>
     <div class="demo-page__grid">
       <div
-        class="demo-page__child"
+        class="demo-page__child demo-page__child--placements"
         *ngFor="let tooltip of tooltips | defaultOrderKeyvalue"
         [ngxTippy]="tooltip.value.content"
         tippyClassName="demo-page__emojii"
@@ -55,6 +50,8 @@ <h6 class="tui-text_h6">
     </div>
   </t-demo>
 
+  <!-- Animations -->
+
   <h6 class="tui-text_h6">
     Animations:
   </h6>
@@ -77,12 +74,14 @@ <h6 class="tui-text_h6">
     </div>
   </t-demo>
 
+  <!-- Custom animation -->
+
   <h6 class="tui-text_h6">
     Custom animation:
   </h6>
 
   <t-demo>
-    <div class="demo-page__custom">
+    <div class="demo-page__grid--long">
       <div
         class="demo-page__child"
         tippyClassName="demo-page__custom-anim"
@@ -106,16 +105,20 @@ <h6 class="tui-text_h6">
     </div>
   </t-demo>
 
+  <!--  Custom animation with inertia -->
+
   <h6 class="tui-text_h6">
-    Custom animation with <a
+    Custom animation with
+    <a
       href="https://atomiks.github.io/tippyjs/v6/animations/#inertia"
       target="_blank"
       rel="noopener noreferrer"
+      tuiLink
     >inertia</a>:
   </h6>
 
   <t-demo>
-    <div class="demo-page__custom">
+    <div class="demo-page__grid--long">
       <div
         class="demo-page__child"
         tippyClassName="demo-page__custom-anim"
@@ -140,6 +143,8 @@ <h6 class="tui-text_h6">
     </div>
   </t-demo>
 
+  <!--  Themes -->
+
   <h6 class="tui-text_h6">
     Themes:
   </h6>
@@ -170,4 +175,113 @@ <h6 class="tui-text_h6">
     </div>
   </t-demo>
 
+  <!-- Custom theme -->
+
+  <h6 class="tui-text_h6">
+    Custom theme:
+  </h6>
+
+  <t-demo>
+    <button
+      class="tui-button"
+      size="m"
+      tuiButton
+      ngxTippy="Custom theme content"
+      type="button"
+      appearance="primary"
+      [tippyProps]="{
+        placement: 'right',
+        theme: 'pastel',
+        arrow: false
+      }"
+    >
+      Custom theme
+    </button>
+  </t-demo>
+
+  <!--  Triggers -->
+
+  <h6 class="tui-text_h6">
+    Triggers:
+  </h6>
+
+  <tui-notification
+    status="info"
+    class="service-demo tui-space_vertical-4"
+  >
+    mouseenter | focus | click | focusin | manual
+  </tui-notification>
+
+
+  <t-demo>
+    <button
+      class="tui-button"
+      size="m"
+      tuiButton
+      ngxTippy="Tooltip content"
+      type="button"
+      appearance="primary"
+      [tippyProps]="{
+        placement: 'bottom',
+        trigger: 'mouseenter focus'
+      }"
+    >
+      mouseenter/focus
+    </button>
+
+    <button
+      class="tui-button demo-page__trigger"
+      size="m"
+      tuiButton
+      ngxTippy="Tooltip content"
+      type="button"
+      appearance="primary"
+      [tippyProps]="{
+        placement: 'bottom',
+        trigger: 'focus',
+        hideOnClick: false
+      }"
+    >
+      focus
+    </button>
+
+    <button
+      class="tui-button demo-page__trigger"
+      size="m"
+      tuiButton
+      ngxTippy="Tooltip content"
+      type="button"
+      appearance="primary"
+      [tippyProps]="{
+        placement: 'bottom',
+        trigger: 'focusin',
+        hideOnClick: false
+      }"
+    >
+      focusin
+    </button>
+
+    <button
+      class="tui-button demo-page__trigger"
+      size="m"
+      tuiButton
+      ngxTippy="Tooltip content"
+      type="button"
+      appearance="primary"
+      tippyName="feistyFawn"
+      [tippyProps]="{
+        placement: 'bottom',
+        trigger: 'manual'
+      }"
+    >
+      manual
+    </button>
+  </t-demo>
+
+  <t-demo>
+    <span
+      (click)="showManualTooltip()"
+      class="demo-page__manual"
+    >Click to show tooltip with 'manual' trigger</span>
+  </t-demo>
 </div>
diff --git a/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.scss b/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.scss
@@ -23,7 +23,6 @@
     transform: translateX(-150px);
     transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
   }
-
 }
 
 .tui-text_h3 {
@@ -48,16 +47,20 @@ t-demo {
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 4rem;
-  background-color: var(--tui-positive);
+  height: 2.75rem;
+  background: var(--tui-primary);
   color: var(--tui-primary-text);
   font-weight: 600;
   font-size: 1rem;
-  border-radius: 1rem;
+  border-radius: 12px;
   cursor: pointer;
 }
 
-.demo-page__custom {
+.demo-page__child--placements {
+  height: 4rem;
+}
+
+.demo-page__grid--long {
   width: 33%;
 }
 
@@ -75,3 +78,12 @@ t-demo {
 .demo-page__child--theme {
   width: 22%;
 }
+
+.demo-page__trigger {
+  margin-left: 1rem;
+}
+
+.demo-page__manual {
+  margin-left: 1.5rem;
+  cursor: pointer;
+}
diff --git a/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.ts b/projects/ngx-tippy-demo/src/app/pages/demo-page/demo-page.component.ts
@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { NgxTippyService } from 'ngx-tippy-wrapper';
 const emojis = [
   '😄',
   '😃',
@@ -57,6 +58,7 @@ const emojis = [
   '😇',
   '😏',
 ];
+
 @Component({
   selector: 'app-demo-page',
   templateUrl: './demo-page.component.html',
@@ -156,8 +158,8 @@ export class DemoPageComponent implements OnInit {
       item: 'perspective',
       content: emojis[Math.floor(Math.random() * emojis.length)],
     },
-    'perspective-suble': {
-      item: 'perspective-suble',
+    'perspective-subtle': {
+      item: 'perspective-subtle',
       content: emojis[Math.floor(Math.random() * emojis.length)],
     },
     'perspective-extreme': {
@@ -166,7 +168,11 @@ export class DemoPageComponent implements OnInit {
     },
   };
 
-  constructor() {}
+  constructor(private readonly tippyService: NgxTippyService) {}
 
   ngOnInit(): void {}
+
+  showManualTooltip() {
+    this.tippyService.show('feistyFawn');
+  }
 }
diff --git a/projects/ngx-tippy-demo/src/styles/common.scss b/projects/ngx-tippy-demo/src/styles/common.scss
@@ -122,3 +122,9 @@ tui-notification {
 .nav__link.nav__link--active {
   color: var(--tui-support-16);
 }
+
+.tippy-box[data-theme='pastel'] {
+  background-color: #7FB069;
+  color: #fff;
+  font-weight: 600;
+}