Fix scrolling, add bg to table

farengeyt451 · Aug 15, 2023 · 12e21e3 · 12e21e3
1 parent 9661bb6
commit 12e21e3
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 68 deletions.
diff --git a/projects/ngx-tippy-demo/src/app/components/nav/nav.component.html b/projects/ngx-tippy-demo/src/app/components/nav/nav.component.html
@@ -21,7 +21,7 @@
         Usage
       </a>
 
-      <tui-expand [expanded]="isSublistExpanded">
+      <tui-expand [expanded]="isSubListExpanded">
         <ul class="nav__sub-list">
           <li class="nav__sub-item">
             <a

diff --git a/projects/ngx-tippy-demo/src/app/components/nav/nav.component.ts b/projects/ngx-tippy-demo/src/app/components/nav/nav.component.ts
@@ -1,5 +1,5 @@
 import { ViewportScroller } from '@angular/common';
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { DestroyService } from '@services';
 import { ScrollComponent } from '@shared';
@@ -11,16 +11,20 @@ import { ScrollComponent } from '@shared';
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [DestroyService],
 })
-export class NavComponent extends ScrollComponent implements OnInit {
-  public isSublistExpanded: boolean = true;
+export class NavComponent extends ScrollComponent implements OnInit, AfterViewInit {
+  public isSubListExpanded: boolean = true;
 
   constructor(
     protected readonly activatedRoute: ActivatedRoute,
     protected readonly scroller: ViewportScroller,
     protected readonly destroy$: DestroyService
   ) {
-    super(activatedRoute, scroller, destroy$);
+    super(activatedRoute, scroller);
   }
 
   ngOnInit() {}
+
+  ngAfterViewInit() {
+    super.scrollToAnchorOnInit();
+  }
 }
diff --git a/projects/ngx-tippy-demo/src/app/pages/app-content/app-content.component.ts b/projects/ngx-tippy-demo/src/app/pages/app-content/app-content.component.ts
@@ -23,7 +23,7 @@ export class AppContentComponent extends ScrollComponent implements OnInit {
     protected readonly scroller: ViewportScroller,
     protected readonly destroy$: DestroyService
   ) {
-    super(activatedRoute, scroller, destroy$);
+    super(activatedRoute, scroller);
   }
 
   ngOnInit() {}

diff --git a/projects/ngx-tippy-demo/src/app/pages/props/props.component.html b/projects/ngx-tippy-demo/src/app/pages/props/props.component.html
@@ -71,50 +71,49 @@ <h1 class="tui-text_h3">Applying properties</h1>
     NgxTippy props
   </h6>
 
-  <table class="tui-table">
-    <tbody>
-      <tr class="tui-table__tr tui-table__tr_border_none tui-table__tr_bg">
-        <th class="tui-table__th tui-table__th_first">Name</th>
-        <th class="tui-table__th tui-table__th_first">Description</th>
-        <th class="tui-table__th">Type/Interface</th>
-        <th class="tui-table__th tui-table__th_last">Example</th>
-      </tr>
-
-      <tr class="tui-table__tr tui-table__tr_border_none">
-        <td class="tui-table__td tui-table__td_first"><strong>tippyProps</strong></td>
-        <td class="tui-table__td">To pass and apply
-          <a
-            tuiLink
-            href="https://atomiks.github.io/tippyjs/v6/all-props/"
-          >
-            properties
-          </a>
-        </td>
-        <td class="tui-table__td">NgxTippyProps</td>
-        <td class="tui-table__td tui-table__td_last">[tippyProps]="&#123; arrow: false, placement: 'bottom' &#125;"</td>
-      </tr>
-
-      <tr class="tui-table__tr tui-table__tr_border_none">
-        <td class="tui-table__td tui-table__td_first"><strong>tippyName</strong></td>
-        <td class="tui-table__td">ID for tippy instance, required for accessing and control specific instance</td>
-        <td class="tui-table__td">string</td>
-        <td class="tui-table__td tui-table__td_last">tippyClassName="new-class another-class"</td>
-      </tr>
-
-      <tr class="tui-table__tr tui-table__tr_border_none">
-        <td class="tui-table__td tui-table__td_first"><strong>tippyClassName</strong></td>
-        <td class="tui-table__td">To add a custom class to the tippy-box element</td>
-        <td class="tui-table__td">string</td>
-        <td class="tui-table__td tui-table__td_last">tippyClassName="new-class another-class"</td>
-      </tr>
-
-      <tr class="tui-table__tr tui-table__tr_border_none">
-        <td class="tui-table__td tui-table__td_first"><strong>tippyContext</strong></td>
-        <td class="tui-table__td">A way to bind context to the template when using ng-template</td>
-        <td class="tui-table__td">NgxTippyContext</td>
-        <td class="tui-table__td tui-table__td_last">[tippyContext]="&#123; focal: 'fossa' &#125;"</td>
-      </tr>
-    </tbody>
-  </table>
+  <div class="tui-table-wrapper">
+    <table class="tui-table">
+      <tbody>
+        <tr class="tui-table__tr tui-table__tr_border_none tui-table__tr_bg">
+          <th class="tui-table__th tui-table__th_first">Name</th>
+          <th class="tui-table__th tui-table__th_first">Description</th>
+          <th class="tui-table__th">Type/Interface</th>
+          <th class="tui-table__th tui-table__th_last">Example</th>
+        </tr>
+        <tr class="tui-table__tr tui-table__tr_border_none">
+          <td class="tui-table__td tui-table__td_first"><strong>tippyProps</strong></td>
+          <td class="tui-table__td">To pass and apply
+            <a
+              tuiLink
+              href="https://atomiks.github.io/tippyjs/v6/all-props/"
+            >
+              properties
+            </a>
+          </td>
+          <td class="tui-table__td">NgxTippyProps</td>
+          <td class="tui-table__td tui-table__td_last">[tippyProps]="&#123; arrow: false, placement: 'bottom' &#125;"
+          </td>
+        </tr>
+        <tr class="tui-table__tr tui-table__tr_border_none">
+          <td class="tui-table__td tui-table__td_first"><strong>tippyName</strong></td>
+          <td class="tui-table__td">ID for tippy instance, required for accessing and control specific instance</td>
+          <td class="tui-table__td">string</td>
+          <td class="tui-table__td tui-table__td_last">tippyClassName="new-class another-class"</td>
+        </tr>
+        <tr class="tui-table__tr tui-table__tr_border_none">
+          <td class="tui-table__td tui-table__td_first"><strong>tippyClassName</strong></td>
+          <td class="tui-table__td">To add a custom class to the tippy-box element</td>
+          <td class="tui-table__td">string</td>
+          <td class="tui-table__td tui-table__td_last">tippyClassName="new-class another-class"</td>
+        </tr>
+        <tr class="tui-table__tr tui-table__tr_border_none">
+          <td class="tui-table__td tui-table__td_first"><strong>tippyContext</strong></td>
+          <td class="tui-table__td">A way to bind context to the template when using ng-template</td>
+          <td class="tui-table__td">NgxTippyContext</td>
+          <td class="tui-table__td tui-table__td_last">[tippyContext]="&#123; focal: 'fossa' &#125;"</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 
 </div>
diff --git a/projects/ngx-tippy-demo/src/app/shared/scroll.component.ts b/projects/ngx-tippy-demo/src/app/shared/scroll.component.ts
@@ -1,21 +1,13 @@
 import { ViewportScroller } from '@angular/common';
-import { Directive, OnInit } from '@angular/core';
+import { Directive } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { DestroyService } from '@services';
-import { takeUntil } from 'rxjs';
 
-@Directive({
-  providers: [DestroyService],
-})
-export class ScrollComponent implements OnInit {
-  constructor(
-    protected readonly activatedRoute: ActivatedRoute,
-    protected readonly scroller: ViewportScroller,
-    protected readonly destroy$: DestroyService
-  ) {}
+@Directive({})
+export class ScrollComponent {
+  constructor(protected readonly activatedRoute: ActivatedRoute, protected readonly scroller: ViewportScroller) {}
 
-  ngOnInit() {
-    this.activatedRoute.fragment.pipe(takeUntil(this.destroy$)).subscribe(anchor => {
+  protected scrollToAnchorOnInit() {
+    this.activatedRoute.fragment.subscribe(anchor => {
       anchor &&
         setTimeout(() => {
           this.scroller.scrollToAnchor(anchor);

diff --git a/projects/ngx-tippy-demo/src/styles/common.scss b/projects/ngx-tippy-demo/src/styles/common.scss
@@ -72,10 +72,22 @@ t-demo {
   font-weight: 400 !important;
 }
 
-.tui-table {
+tui-notification {
+  margin-top: 1rem;
+}
+
+.tui-table-wrapper {
   margin-top: 2rem;
+  padding: 0.5rem 1.25rem;
+  background: var(--tui-clear);
+  border-radius: 0.75rem;
+  @include transition-color-bgc;
 }
 
-tui-notification {
-  margin-top: 1rem;
+.tui-table-wrapper .tui-table__tr:not(.tui-table__tr_hover_disabled):hover {
+  background-color: var(--tui-base-02);
+
+  .light-scheme & {
+    background-color: var(--tui-base-04);
+  }
 }