chore: fix

taiga-family · Sep 20, 2024 · f149bb8 · f149bb8
1 parent d57dff2
commit f149bb8
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 14 deletions.
diff --git a/projects/addon-doc/components/language-switcher/index.html b/projects/addon-doc/components/language-switcher/index.html
@@ -2,16 +2,14 @@
     appearance="whiteblock"
     iconStart="@tui.languages"
     size="s"
-    tuiButton
+    tuiButtonSelect
     tuiIconButton
     type="button"
-    [tuiDropdown]="content"
-    [(tuiDropdownOpen)]="open"
-></button>
-
-<ng-template #content>
-    <tui-data-list [formControl]="language">
-        <tui-opt-group label="Lang of components">
+    [formControl]="language"
+>
+    Language
+    <tui-data-list *tuiTextfieldDropdown>
+        <tui-opt-group label="Language of components">
             <button
                 *ngFor="let name of names"
                 tuiOption
@@ -28,4 +26,4 @@
             </button>
         </tui-opt-group>
     </tui-data-list>
-</ng-template>
+</button>
diff --git a/projects/addon-doc/components/language-switcher/index.ts b/projects/addon-doc/components/language-switcher/index.ts
@@ -1,13 +1,15 @@
 import {NgForOf, TitleCasePipe} from '@angular/common';
 import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {TuiTextfield} from '@taiga-ui/core';
 import {TuiButton} from '@taiga-ui/core/components/button';
 import {TuiDataList} from '@taiga-ui/core/components/data-list';
 import {tuiScrollbarOptionsProvider} from '@taiga-ui/core/components/scrollbar';
 import {TuiDropdown} from '@taiga-ui/core/directives/dropdown';
 import {TuiFlagPipe} from '@taiga-ui/core/pipes/flag';
 import type {TuiCountryIsoCode, TuiLanguageName} from '@taiga-ui/i18n/types';
 import {TuiLanguageSwitcherService} from '@taiga-ui/i18n/utils';
+import {TuiButtonSelect} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
@@ -20,6 +22,8 @@ import {TuiLanguageSwitcherService} from '@taiga-ui/i18n/utils';
         TuiDataList,
         TuiDropdown,
         TuiFlagPipe,
+        TuiButtonSelect,
+        TuiTextfield,
     ],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],

diff --git a/projects/demo/src/modules/app/app.component.ts b/projects/demo/src/modules/app/app.component.ts
@@ -8,6 +8,7 @@ import {TuiDemo} from '@demo/utils';
 import {WA_LOCAL_STORAGE} from '@ng-web-apis/common';
 import {ResizeObserverService} from '@ng-web-apis/resize-observer';
 import {TuiDocLanguageSwitcher} from '@taiga-ui/addon-doc';
+import {TuiButton, TuiDataList, TuiDropdown} from '@taiga-ui/core';
 import {TuiSheetModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 import {distinctUntilChanged, filter, map} from 'rxjs';
 
@@ -29,6 +30,9 @@ import {TUI_VERSION_MANAGER_PROVIDERS} from './version-manager/version-manager.p
         TuiSheetModule,
         TuiTextfieldControllerModule,
         VersionManager,
+        TuiButton,
+        TuiDropdown,
+        TuiDataList,
     ],
     templateUrl: './app.template.html',
     styleUrls: ['./app.style.less'],

diff --git a/projects/demo/src/modules/app/app.style.less b/projects/demo/src/modules/app/app.style.less
@@ -4,6 +4,20 @@ app {
     display: block;
 }
 
+.app-links {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+}
+
+.app-links-dropdown {
+    display: none !important;
+}
+
+.app-link-dropdown {
+    justify-content: flex-start !important;
+}
+
 .app-christmas {
     position: absolute;
     left: 0.3125rem;
@@ -23,6 +37,12 @@ app {
     box-shadow: 0 -1px var(--tui-border-normal);
 }
 
-.app-link {
-    margin-left: 1.25rem;
+@media @tui-mobile {
+    .app-link {
+        display: none;
+    }
+
+    .app-links-dropdown {
+        display: flex !important;
+    }
 }
diff --git a/projects/demo/src/modules/app/app.template.html b/projects/demo/src/modules/app/app.template.html
@@ -1,7 +1,10 @@
 <router-outlet *ngIf="isLanding$ | async; else portal" />
 <ng-template #portal>
     <tui-doc-main>
-        <ng-container ngProjectAs="tuiDocHeader">
+        <div
+            ngProjectAs="tuiDocHeader"
+            class="app-links"
+        >
             <img
                 *ngIf="isChristmas"
                 alt="Santa hat"
@@ -13,6 +16,61 @@
 
             <tui-algolia-search />
 
+            <button
+                appearance="whiteblock"
+                iconStart="@tui.ellipsis"
+                size="s"
+                tuiDropdownOpen
+                tuiIconButton
+                type="button"
+                class="app-links-dropdown"
+                [tuiDropdown]="more"
+            >
+                More
+                <ng-template #more>
+                    <tui-data-list size="m">
+                        <a
+                            href="https://github.com/taiga-family/taiga-ui"
+                            iconStart="assets/images/github.svg"
+                            rel="noreferrer"
+                            target="_blank"
+                            tuiOption
+                            class="app-link-dropdown"
+                        >
+                            GitHub
+                        </a>
+                        <a
+                            href="https://t.me/taiga_ui"
+                            iconStart="assets/icons/telegram.svg"
+                            rel="noreferrer"
+                            target="_blank"
+                            tuiOption
+                            class="app-link-dropdown"
+                        >
+                            Telegram chat
+                        </a>
+                        <a
+                            href="https://discord.gg/zrB2EdJjEy"
+                            iconStart="assets/icons/discord.svg"
+                            rel="noreferrer"
+                            target="_blank"
+                            tuiOption
+                            class="app-link-dropdown"
+                        >
+                            Angular Discord
+                        </a>
+                        <a
+                            iconStart="assets/icons/stackblitz.svg"
+                            tuiOption
+                            class="app-link-dropdown"
+                            [routerLink]="routes.StackblitzStarter"
+                        >
+                            StackBlitz Starter
+                        </a>
+                    </tui-data-list>
+                </ng-template>
+            </button>
+
             <a
                 appearance="icon"
                 href="https://github.com/taiga-family/taiga-ui"
@@ -51,10 +109,10 @@
                 iconStart="assets/icons/stackblitz.svg"
                 title="Taiga UI StackBlitz Starter"
                 tuiLink
-                class="app-link stackblitz"
+                class="app-link"
                 [routerLink]="routes.StackblitzStarter"
             ></a>
-        </ng-container>
+        </div>
         <div
             ngProjectAs="tuiDocNavigation"
             tuiTextfieldAppearance="none"

diff --git a/projects/demo/src/modules/app/search/index.less b/projects/demo/src/modules/app/search/index.less
@@ -73,6 +73,8 @@ html[data-theme='dark'] {
 
 .DocSearch.DocSearch-Button {
     position: relative;
+    block-size: var(--tui-height-s);
+    margin: 0;
     border-radius: var(--tui-radius-m);
     .transition(~'box-shadow, color');