Working on demo

farengeyt451 · Sep 9, 2023 · bc9289b · bc9289b
1 parent 41e19cf
commit bc9289b
Show file tree

Hide file tree

Showing 10 changed files with 427 additions and 8 deletions.
diff --git a/projects/ngx-tippy-demo/src/app/app.module.ts b/projects/ngx-tippy-demo/src/app/app.module.ts
@@ -32,12 +32,19 @@ import {
   TuiSvgModule,
   TuiThemeNightModule,
 } from '@taiga-ui/core';
-import { TuiAccordionModule, TuiBadgeModule, TuiInputModule, TuiIslandModule } from '@taiga-ui/kit';
+import {
+  TuiAccordionModule,
+  TuiBadgeModule,
+  TuiInputModule,
+  TuiIslandModule,
+  TuiRadioLabeledModule,
+} from '@taiga-ui/kit';
 import { NgDompurifySanitizer } from '@tinkoff/ng-dompurify';
 import { HIGHLIGHT_OPTIONS, HighlightModule } from 'ngx-highlightjs';
 import { NgxTippyModule } from 'ngx-tippy-wrapper';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { DefaultOrderKeyvaluePipe } from './pipes';
 
 function initialize(SchemeService: SchemeService) {
   return () => SchemeService.getPreferredScheme();
@@ -61,6 +68,7 @@ function initialize(SchemeService: SchemeService) {
     AppContentComponent,
     ServiceComponent,
     DemoPageComponent,
+    DefaultOrderKeyvaluePipe,
   ],
   imports: [
     AppRoutingModule,
@@ -85,6 +93,7 @@ function initialize(SchemeService: SchemeService) {
     TuiRootModule,
     TuiSvgModule,
     TuiThemeNightModule,
+    TuiRadioLabeledModule,
   ],
   providers: [
     {

diff --git a/projects/ngx-tippy-demo/src/app/components/demo/demo.component.ts b/projects/ngx-tippy-demo/src/app/components/demo/demo.component.ts
@@ -34,7 +34,9 @@ export class DemoComponent implements OnInit, AfterViewInit {
   private listenForSchemeChange(tInstances: Map<string, NgxTippyInstance>) {
     this.schemeService.scheme$.pipe(takeUntil(this.destroy$)).subscribe(scheme => {
       const theme = scheme === Schemes.Dark ? 'light' : 'dark';
-      tInstances?.forEach(tInstance => tInstance.setProps({ theme }));
+      tInstances?.forEach(tInstance => {
+        return tInstance.props.content.toString().includes('theme') ? tInstance : tInstance.setProps({ theme });
+      });
     });
   }
 }
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,9 +1,173 @@
 <div class="demo-page">
-  <h1 class="tui-text_h3">Demo page</h1>
+
   <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 -->
+
+  <h6 class="tui-text_h6">
+    Simple tooltip:
+  </h6>
+
+  <t-demo>
+    <button
+      class="tui-button"
+      size="m"
+      tuiButton
+      ngxTippy="Tooltip content"
+      type="button"
+      appearance="primary"
+      [tippyProps]="{
+        placement: 'right'
+      }"
+    >
+      Button
+    </button>
+  </t-demo>
+
+  <h6 class="tui-text_h6">
+    Placements:
+  </h6>
+
+  <t-demo>
+    <div class="demo-page__grid">
+      <div
+        class="demo-page__child"
+        *ngFor="let tooltip of tooltips | defaultOrderKeyvalue"
+        [ngxTippy]="tooltip.value.content"
+        tippyClassName="demo-page__emojii"
+        [tippyProps]="{
+            placement: tooltip.value.item,
+            arrow: false,
+            offset: [4, 4],
+            animation: 'shift-toward',
+            duration: [250, 200]
+          }"
+      >
+        {{ tooltip.value.item }}
+      </div>
+    </div>
+  </t-demo>
+
+  <h6 class="tui-text_h6">
+    Animations:
+  </h6>
+
+  <t-demo>
+    <div class="demo-page__grid">
+      <div
+        class="demo-page__child"
+        *ngFor="let animation of animations | defaultOrderKeyvalue"
+        [ngxTippy]="animation.value.content"
+        tippyClassName="demo-page__emojii"
+        [tippyProps]="{
+            arrow: false,
+            offset: [4, 4],
+            animation: animation.value.item
+          }"
+      >
+        {{ animation.value.item }}
+      </div>
+    </div>
+  </t-demo>
+
+  <h6 class="tui-text_h6">
+    Custom animation:
+  </h6>
+
+  <t-demo>
+    <div class="demo-page__custom">
+      <div
+        class="demo-page__child"
+        tippyClassName="demo-page__custom-anim"
+        [ngxTippy]="train"
+        [tippyProps]="{
+            arrow: false,
+            offset: [42, 4],
+            animation: 'custom-shift'
+          }"
+      >
+        custom-shift
+      </div>
+
+      <ng-template #train>
+        <img
+          class="demo-page__train"
+          src="assets/img/train.png"
+          alt="train"
+        >
+      </ng-template>
+    </div>
+  </t-demo>
+
+  <h6 class="tui-text_h6">
+    Custom animation with <a
+      href="https://atomiks.github.io/tippyjs/v6/animations/#inertia"
+      target="_blank"
+      rel="noopener noreferrer"
+    >inertia</a>:
+  </h6>
+
+  <t-demo>
+    <div class="demo-page__custom">
+      <div
+        class="demo-page__child"
+        tippyClassName="demo-page__custom-anim"
+        [ngxTippy]="train"
+        [tippyProps]="{
+            arrow: false,
+            offset: [42, 4],
+            animation: 'custom-shift',
+            inertia: true
+          }"
+      >
+        custom-shift + inertia
+      </div>
+
+      <ng-template #train>
+        <img
+          class="demo-page__train"
+          src="assets/img/train.png"
+          alt="train"
+        >
+      </ng-template>
+    </div>
+  </t-demo>
+
+  <h6 class="tui-text_h6">
+    Themes:
+  </h6>
+
+  <t-demo>
+    <div class="demo-page__themes">
+      <div
+        *ngFor="let theme of ['light', 'light-border', 'material', 'transcluded']"
+        class="demo-page__child demo-page__child--theme"
+        [ngxTippy]="theme + ' theme'"
+        tippyClassName="custom-theme"
+        [tippyProps]="{
+            arrow: false,
+            theme,
+            animation: 'shift-toward'
+          }"
+      >
+        {{ theme }}
+      </div>
+
+      <ng-template #train>
+        <img
+          class="demo-page__train"
+          src="assets/img/train.png"
+          alt="train"
+        >
+      </ng-template>
+    </div>
+  </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
@@ -1,3 +1,77 @@
+::ng-deep {
+
+  .demo-page__emojii,
+  .demo-page__custom-anim {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    border: 2px solid var(--tui-primary);
+    font-size: 1.2rem;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+  }
+
+  .demo-page__custom-anim {
+    border-radius: 1rem;
+    width: 200px;
+  }
+
+  .tippy-box[data-animation='custom-shift'][data-state='hidden'] {
+    opacity: 0;
+    transform: translateX(-150px);
+    transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+  }
+
+}
+
 .tui-text_h3 {
   margin-top: 0;
 }
+
+t-demo {
+  margin-top: 1.2rem;
+}
+
+.demo-page__grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  grid-column-gap: 10px;
+  grid-row-gap: 10px;
+}
+
+.demo-page__child {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 4rem;
+  background-color: var(--tui-positive);
+  color: var(--tui-primary-text);
+  font-weight: 600;
+  font-size: 1rem;
+  border-radius: 1rem;
+  cursor: pointer;
+}
+
+.demo-page__custom {
+  width: 33%;
+}
+
+.demo-page__train {
+  width: 100%;
+}
+
+.demo-page__themes {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.demo-page__child--theme {
+  width: 22%;
+}