fix(addon-doc): fix demo component on mobile (#79)

Co-authored-by: Roman Sedov <darragon-nn@yandex.ru>
taiga-family · Jan 9, 2021 · 7676d84 · 7676d84
1 parent e282718
commit 7676d84
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 45 deletions.
diff --git a/projects/addon-doc/src/components/demo/demo.component.ts b/projects/addon-doc/src/components/demo/demo.component.ts
@@ -17,7 +17,7 @@ import {
 } from '@angular/core';
 import {AbstractControl, FormControl, FormGroup} from '@angular/forms';
 import {UrlSerializer} from '@angular/router';
-import {TuiDestroyService} from '@taiga-ui/cdk';
+import {TUI_IS_MOBILE, TuiDestroyService} from '@taiga-ui/cdk';
 import {TuiBrightness, TuiModeDirective} from '@taiga-ui/core';
 import {Subject} from 'rxjs';
 import {startWith, takeUntil} from 'rxjs/operators';
@@ -55,6 +55,8 @@ export class TuiDocDemoComponent implements OnInit, AfterViewInit {
     @ContentChild(TemplateRef)
     readonly template?: TemplateRef<{}>;
 
+    readonly items: readonly TuiBrightness[] = ['onLight', 'onDark'];
+
     private initialX = 0;
     private wrapperWidth = 0;
 
@@ -70,6 +72,7 @@ export class TuiDocDemoComponent implements OnInit, AfterViewInit {
     private readonly isBrowser: boolean;
 
     constructor(
+        @Inject(TUI_IS_MOBILE) readonly isMobile: boolean,
         @Inject(TuiDestroyService) private readonly destroy$: TuiDestroyService,
         @Inject(Renderer2) private readonly renderer: Renderer2,
         @Inject(PLATFORM_ID) platformId: Object,
@@ -79,7 +82,7 @@ export class TuiDocDemoComponent implements OnInit, AfterViewInit {
     ) {
         this.isBrowser = isPlatformBrowser(platformId);
 
-        const parsedMode = locationRef.path().match(/tui-mode=(light|dark)/);
+        const parsedMode = locationRef.path().match(/tui-mode=(onDark|onLight)/);
 
         if (parsedMode !== null && parsedMode.length > 0) {
             this.modeControl.setValue(parsedMode[1]);

diff --git a/projects/addon-doc/src/components/demo/demo.module.ts b/projects/addon-doc/src/components/demo/demo.module.ts
@@ -8,6 +8,7 @@ import {
     TuiDataListModule,
     TuiExpandModule,
     TuiGroupModule,
+    TuiHintControllerModule,
     TuiLinkModule,
     TuiModeModule,
     TuiSvgModule,
@@ -42,6 +43,7 @@ import {TuiDocDemoComponent} from './demo.component';
         TuiDataListWrapperModule,
         TuiDataListModule,
         TuiTextfieldControllerModule,
+        TuiHintControllerModule,
     ],
     declarations: [TuiDocDemoComponent],
     exports: [TuiDocDemoComponent],

diff --git a/projects/addon-doc/src/components/demo/demo.style.less b/projects/addon-doc/src/components/demo/demo.style.less
@@ -115,6 +115,10 @@
     border-radius: 4px;
 }
 
+.mode {
+    width: 200px;
+}
+
 .select {
     max-width: 240px;
 }
@@ -169,9 +173,11 @@
 }
 
 @supports (position: sticky) {
-    :host {
-        position: sticky;
-        top: 8px;
-        z-index: 2;
+    @media screen and (min-height: 600px) {
+        :host {
+            position: sticky;
+            top: 74px;
+            z-index: 2;
+        }
     }
 }
diff --git a/projects/addon-doc/src/components/demo/demo.template.html b/projects/addon-doc/src/components/demo/demo.template.html
@@ -1,45 +1,61 @@
 <div class="bg-toggle" [tuiMode]="null">
-    tuiMode:
-    <tui-tooltip size="l" describeId="form" [content]="tooltip">
-        <ng-template #tooltip>
-            {{texts[0]}}
-            <a tuiLink tuiMode="onDark" routerLink="/tui-mode">
-                <code>tuiMode</code>
-            </a>
-        </ng-template>
-    </tui-tooltip>
-    <div tuiGroup class="tui-space_left-3" [collapsed]="true">
-        <tui-radio-block
-            class="tui-group__auto-width-item"
-            size="s"
-            nativeId="form"
-            [item]="null"
-            [hideRadio]="true"
+    <ng-template #tooltip>
+        {{texts[0]}}
+        <a tuiLink tuiMode="onDark" routerLink="/tui-mode">
+            <code>tuiMode</code>
+        </a>
+    </ng-template>
+    <ng-container *ngIf="isMobile else desktop">
+        <tui-select
+            class="mode"
+            tuiTextfieldSize="s"
+            [tuiTextfieldCleaner]="true"
+            [tuiHintContent]="tooltip"
             [formControl]="modeControl"
         >
-            null
-        </tui-radio-block>
-        <tui-radio-block
-            class="tui-group__auto-width-item"
-            item="onDark"
-            size="s"
-            nativeId="form"
-            [hideRadio]="true"
-            [formControl]="modeControl"
-        >
-            onDark
-        </tui-radio-block>
-        <tui-radio-block
-            class="tui-group__auto-width-item"
-            item="onLight"
-            size="s"
-            nativeId="form"
-            [hideRadio]="true"
-            [formControl]="modeControl"
-        >
-            onLight
-        </tui-radio-block>
-    </div>
+            tuiMode
+            <tui-data-list-wrapper
+                *tuiDataList
+                [items]="items"
+            ></tui-data-list-wrapper>
+        </tui-select>
+    </ng-container>
+    <ng-template #desktop>
+        tuiMode:
+        <tui-tooltip describeId="form" [content]="tooltip"></tui-tooltip>
+        <div tuiGroup class="tui-space_left-3" [collapsed]="true">
+            <tui-radio-block
+                class="tui-group__auto-width-item"
+                size="s"
+                nativeId="form"
+                [item]="null"
+                [hideRadio]="true"
+                [formControl]="modeControl"
+            >
+                null
+            </tui-radio-block>
+            <tui-radio-block
+                class="tui-group__auto-width-item"
+                item="onDark"
+                size="s"
+                nativeId="form"
+                [hideRadio]="true"
+                [formControl]="modeControl"
+            >
+                onDark
+            </tui-radio-block>
+            <tui-radio-block
+                class="tui-group__auto-width-item"
+                item="onLight"
+                size="s"
+                nativeId="form"
+                [hideRadio]="true"
+                [formControl]="modeControl"
+            >
+                onLight
+            </tui-radio-block>
+        </div>
+    </ng-template>
     <tui-checkbox-labeled
         class="tui-space_left-3"
         size="m"

diff --git a/projects/addon-doc/src/components/main/main.style.less b/projects/addon-doc/src/components/main/main.style.less
@@ -25,6 +25,7 @@
 @sidebar-width: 260px;
 
 .tui-doc-page {
+    .createStackingContext();
     height: 100%;
     padding-top: 64px;
     box-sizing: border-box;