From 0ef8a3bedce3c15e4d47505b52e465f37c8ad6a2 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 7 Jan 2025 10:48:04 +0300
Subject: [PATCH] Fixed configurator click

---
 src/assets/layout/_topbar.scss | 42 -----------------
 src/layout/appconfigurator.ts  | 84 +++++++++++++++++-----------------
 src/views/uikit/miscdoc.ts     |  1 -
 3 files changed, 41 insertions(+), 86 deletions(-)

diff --git a/src/assets/layout/_topbar.scss b/src/assets/layout/_topbar.scss
index f80e275..f5d239c 100644
--- a/src/assets/layout/_topbar.scss
+++ b/src/assets/layout/_topbar.scss
@@ -158,45 +158,3 @@
         }
     }
 }
-
-.config-panel {
-    .config-panel-label {
-        font-size: 0.875rem;
-        color: var(--text-secondary-color);
-        font-weight: 600;
-        line-height: 1;
-    }
-
-    .config-panel-colors {
-        > div {
-            padding-top: 0.5rem;
-            display: flex;
-            gap: 0.5rem;
-            flex-wrap: wrap;
-            justify-content: space-between;
-
-            button {
-                border: none;
-                width: 1.25rem;
-                height: 1.25rem;
-                border-radius: 50%;
-                padding: 0;
-                cursor: pointer;
-                outline-color: transparent;
-                outline-width: 2px;
-                outline-style: solid;
-                outline-offset: 1px;
-
-                &.active-color {
-                    outline-color: var(--primary-color);
-                }
-            }
-        }
-    }
-
-    .config-panel-settings {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-}
diff --git a/src/layout/appconfigurator.ts b/src/layout/appconfigurator.ts
index d9421f3..36835af 100644
--- a/src/layout/appconfigurator.ts
+++ b/src/layout/appconfigurator.ts
@@ -22,55 +22,53 @@ const presets = {
     standalone: true,
     imports: [CommonModule, FormsModule, InputSwitchModule, ButtonModule, RadioButtonModule, SelectButtonModule, ToggleSwitchModule],
     template: `
-        <div class="absolute top-[3.25rem] right-0 w-64 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]">
-            <div class="flex flex-col gap-4">
-                <div>
-                    <span class="text-sm text-muted-color font-semibold">Primary</span>
-                    <div class="pt-2 flex gap-2 flex-wrap justify-between">
-                        @for (primaryColor of primaryColors(); track primaryColor.name) {
-                            <button
-                                type="button"
-                                [title]="primaryColor.name"
-                                (click)="updateColors($event, 'primary', primaryColor)"
-                                [ngClass]="{ 'outline-primary': primaryColor.name === selectedPrimaryColor() }"
-                                class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-                                [style]="{
-                                    'background-color': primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette['500']
-                                }"
-                            ></button>
-                        }
-                    </div>
+        <div class="flex flex-col gap-4">
+            <div>
+                <span class="text-sm text-muted-color font-semibold">Primary</span>
+                <div class="pt-2 flex gap-2 flex-wrap justify-between">
+                    @for (primaryColor of primaryColors(); track primaryColor.name) {
+                        <button
+                            type="button"
+                            [title]="primaryColor.name"
+                            (click)="updateColors($event, 'primary', primaryColor)"
+                            [ngClass]="{ 'outline-primary': primaryColor.name === selectedPrimaryColor() }"
+                            class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+                            [style]="{
+                                'background-color': primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette['500']
+                            }"
+                        ></button>
+                    }
                 </div>
-                <div>
-                    <span class="text-sm text-muted-color font-semibold">Surface</span>
-                    <div class="pt-2 flex gap-2 flex-wrap justify-between">
-                        @for (surface of surfaces; track surface.name) {
-                            <button
-                                type="button"
-                                [title]="surface.name"
-                                (click)="updateColors($event, 'surface', surface)"
-                                [ngClass]="{ 'outline-primary': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : layoutService.layoutConfig().darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
-                                class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-                                [style]="{
-                                    'background-color': surface.name === 'noir' ? 'var(--text-color)' : surface?.palette['500']
-                                }"
-                            ></button>
-                        }
-                    </div>
-                </div>
-                <div class="flex flex-col gap-2">
-                    <span class="text-sm text-muted-color font-semibold">Presets</span>
-                    <p-selectbutton [options]="presets" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false" />
-                </div>
-                <div class="flex flex-col gap-2">
-                    <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
-                    <p-selectbutton [ngModel]="menuMode()" (ngModelChange)="onMenuModeChange($event)" [options]="menuModeOptions" [allowEmpty]="false" />
+            </div>
+            <div>
+                <span class="text-sm text-muted-color font-semibold">Surface</span>
+                <div class="pt-2 flex gap-2 flex-wrap justify-between">
+                    @for (surface of surfaces; track surface.name) {
+                        <button
+                            type="button"
+                            [title]="surface.name"
+                            (click)="updateColors($event, 'surface', surface)"
+                            [ngClass]="{ 'outline-primary': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : layoutService.layoutConfig().darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
+                            class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+                            [style]="{
+                                'background-color': surface.name === 'noir' ? 'var(--text-color)' : surface?.palette['500']
+                            }"
+                        ></button>
+                    }
                 </div>
             </div>
+            <div class="flex flex-col gap-2">
+                <span class="text-sm text-muted-color font-semibold">Presets</span>
+                <p-selectbutton [options]="presets" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false" size="small" />
+            </div>
+            <div class="flex flex-col gap-2">
+                <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
+                <p-selectbutton [ngModel]="menuMode()" (ngModelChange)="onMenuModeChange($event)" [options]="menuModeOptions" [allowEmpty]="false" size="small" />
+            </div>
         </div>
     `,
     host: {
-        class: 'config-panel hidden'
+        class: 'hidden absolute top-[3.25rem] right-0 w-64 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]'
     }
 })
 export class AppConfigurator {
diff --git a/src/views/uikit/miscdoc.ts b/src/views/uikit/miscdoc.ts
index 236060c..16b77b5 100644
--- a/src/views/uikit/miscdoc.ts
+++ b/src/views/uikit/miscdoc.ts
@@ -100,7 +100,6 @@ import { OverlayBadgeModule } from 'primeng/overlaybadge';
                             etiam sit amet nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
                             Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
                         </p>
-                        <p-scrolltop target="parent" [threshold]="100" icon="pi pi-arrow-up"></p-scrolltop>
                     </p-scrollpanel>
                 </div>
             </div>