chore: update appbar section

telerik · Sep 19, 2024 · e7def50 · e7def50
1 parent 4a6d271
commit e7def50
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 39 deletions.
diff --git a/examples-standalone/coffee-warehouse/angular.json b/examples-standalone/coffee-warehouse/angular.json
@@ -40,7 +40,7 @@
             "styles": [
               "src/styles/main.scss",
               {
-                "input": "node_modules/@progress/kendo-theme-default/dist/all.css"
+                "input": "node_modules/@progress/kendo-theme-default/dist/default-turquoise.css"
               },
               "node_modules/@progress/kendo-theme-utils/dist/all.css"
             ],

diff --git a/examples-standalone/coffee-warehouse/package-lock.json b/examples-standalone/coffee-warehouse/package-lock.json
diff --git a/examples-standalone/coffee-warehouse/src/app/components/menu-window/menu-window.component.ts b/examples-standalone/coffee-warehouse/src/app/components/menu-window/menu-window.component.ts
@@ -1,8 +1,6 @@
-import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
-import { WindowRef, WindowService } from '@progress/kendo-angular-dialog';
 import { accessibilityIcon, SVGIcon } from '@progress/kendo-svg-icons';
-import { SettingsListComponent } from '../settings-list/settings-list.component';
 
 @Component({
     selector: 'app-menu-window',
@@ -13,44 +11,41 @@ import { SettingsListComponent } from '../settings-list/settings-list.component'
             size="large" 
             themeColor="inverse"
             (click)="toggle()"></kendo-button>
-        <ng-template #windowTitleBar let-win>
-            <span class="k-window-title">Accessibility Settings</span>
-            <button kendoWindowCloseAction [window]="win"></button>
-        </ng-template>
+        <kendo-window *ngIf="show"
+            [top]="top"
+            [left]="left"
+            [width]="400"
+            (close)="show = false;"
+            [resizable]="false"
+            class="!k-rounded-lg">
+            <kendo-window-titlebar class="!k-rounded-tl-lg !k-rounded-tr-lg" [style.backgroundColor]="'var(--kendo-color-inverse)'" [style.color]="'var(--kendo-color-on-inverse)'">
+                <span class="k-window-title">Accessibility Settings</span>
+                <button kendoWindowCloseAction></button>
+            </kendo-window-titlebar>
+            <app-settings-list-component>
+            </app-settings-list-component>
+        </kendo-window>
     `
 })
 export class MenuWindowComponent implements OnInit {
     @ViewChild('button') public button: ButtonComponent;
-    @ViewChild('windowTitleBar') public titleBar: TemplateRef<any>;
     public a11yIcon: SVGIcon = accessibilityIcon;
     public show = false;
-    private windowRef: WindowRef | null = null;
+    public left: number;
+    public top: number;
 
-    constructor(private windowService: WindowService) { }
+    constructor() { }
 
     ngOnInit() { }
 
     public toggle(): void {
-        if (!this.windowRef) {
-            const {bottom, left, width} = document.querySelector('.k-appbar')!.getBoundingClientRect();
-
-            this.windowRef = this.windowService.open({
-                width: 400,
-                top: bottom,
-                left: left - 400 + width,
-                content: SettingsListComponent,
-                resizable: false,
-                titleBarContent: this.titleBar
-            });
-
-            const closeSub = this.windowRef.result.subscribe(() => {
-                this.windowRef = null;
-                closeSub.unsubscribe();
-                this.button.focus();
-            });
-        } else {
-            this.windowRef.close();
-            this.windowRef = null;
+        if (!this.show) {
+            const { left, width} = this.button.element.getBoundingClientRect();
+            const { bottom } = document.querySelector('.k-appbar')!.getBoundingClientRect();
+            this.top = bottom;
+            this.left = left - 400 + width;
         }
+
+        this.show = !this.show;
     }
 }
diff --git a/examples-standalone/coffee-warehouse/src/app/header/header.commponent.html b/examples-standalone/coffee-warehouse/src/app/header/header.commponent.html
@@ -14,18 +14,17 @@
         </p>
     </div>
 </div>
-
-<kendo-appbar [positionMode]="'sticky'">
+<kendo-appbar [themeColor]="'inherit'">
     <kendo-appbar-section class="k-flex-basis-0 k-flex-grow k-gap-2">
-        <a href="#" className="k-d-none k-d-md-flex">
+        <a href="#" class="k-d-inline-flex">
             <img src="assets/HW-site-logo.svg" alt="Logo" />
         </a>
     </kendo-appbar-section>
     <kendo-appbar-section class="k-flex-basis-0 k-flex-grow k-justify-content-center">
-        <kendo-buttongroup selection="single">
-            <button kendoButton [toggleable]="true" fillMode="flat" themeColor="primary">Team</button>
-            <button kendoButton [toggleable]="true" fillMode="flat" themeColor="primary">Profile</button>
-            <button kendoButton [toggleable]="true" fillMode="flat" themeColor="primary">Info</button>
+        <kendo-buttongroup selection="single" class="appbar-button-group">
+            <button kendoButton [toggleable]="true" fillMode="link" themeColor="primary" [size]="'large'" class="!k-px-6">Team</button>
+            <button kendoButton [toggleable]="true" fillMode="link" themeColor="primary" [size]="'large'" class="!k-px-6">Profile</button>
+            <button kendoButton [toggleable]="true" fillMode="link" themeColor="primary" [size]="'large'" class="!k-px-6">Info</button>
           </kendo-buttongroup>
     </kendo-appbar-section>
     <kendo-appbar-section class="k-flex-basis-0 k-flex-grow k-justify-content-end">

diff --git a/examples-standalone/coffee-warehouse/src/styles/main.scss b/examples-standalone/coffee-warehouse/src/styles/main.scss
@@ -128,3 +128,11 @@ kendo-recurrence-frequency-editor .k-edit-field {
 .daterange-center {
     align-self: center;
 }
+
+// Header
+.appbar-button-group.k-button-group >.k-button {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+}