Skip to content

Commit

Permalink
Update config
Browse files Browse the repository at this point in the history
  • Loading branch information
@cetincakiroglu
cetincakiroglu committed Mar 21, 2024
1 parent 0a37bb8 commit db1eac8
Showing 1 changed file with 92 additions and 108 deletions.
200 changes: 92 additions & 108 deletions src/app/showcase/layout/config/app.config.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,98 @@
<span [ngClass]="{ 'p-disabled': isDarkToggleDisabled }" class="text-xl font-semibold">Dark Mode</span>
<p-inputSwitch [ngModel]="isDarkMode" (onChange)="toggleDarkMode()" [disabled]="isDarkToggleDisabled" />
</section>

<section class="py-4 border-bottom-1 surface-border">
<div class="text-xl font-semibold mb-3">Themes</div>
<div class="flex align-items-center gap-2 mb-3">
<img src="https://primefaces.org/cdn/primevue/images/themes/aura.png" alt="Aura"
class="border-circle" style="width: 1.5rem" />
<span class="font-medium">Aura</span>
</div>
<div class="flex align-items-center justify-content-between gap-3 mb-3">
<button
[ngClass]="{ 'border-primary': isThemeActive('aura', 'green'), 'hover:border-500 surface-border': !isThemeActive('aura', 'green') }"
class="bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200"
style="border-radius: 30px" (click)="changeTheme('aura', 'green')">
<span class="block h-1rem w-full"
style="border-radius: 30px; background: linear-gradient(180deg, #4dac9c 0%, rgba(77, 172, 156, 0.5) 100%)"></span>
</button>
<button
[ngClass]="{ 'border-primary': isThemeActive('aura', 'cyan'), 'hover:border-500 surface-border': !isThemeActive('aura', 'cyan') }"
class="bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200"
style="border-radius: 30px" (click)="changeTheme('aura', 'cyan')">
<span class="block h-1rem w-full"
style="border-radius: 30px; background: linear-gradient(180deg, #06b6d4 0%, rgba(6, 182, 212, 0.5) 100%)"></span>
</button>
<button
[ngClass]="{ 'border-primary': isThemeActive('aura', 'blue'), 'hover:border-500 surface-border': !isThemeActive('aura', 'blue') }"
class="bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200"
style="border-radius: 30px" (click)="changeTheme('aura', 'blue')">
<span class="block h-1rem w-full"
style="border-radius: 30px; background: linear-gradient(180deg, #4378e6 0%, rgba(67, 120, 230, 0.5) 100%)"></span>
</button>
<button
[ngClass]="{ 'border-primary': isThemeActive('aura', 'indigo'), 'hover:border-500 surface-border': !isThemeActive('aura', 'indigo') }"
class="bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200"
style="border-radius: 30px" (click)="changeTheme('aura', 'indigo')">
<span class="block h-1rem w-full"
style="border-radius: 30px; background: linear-gradient(180deg, #585fe0 0%, rgba(88, 95, 224, 0.5) 100%)"></span>
</button>
</div>
<div class="flex align-items-center justify-content-between gap-3 mb-3">
<button
[ngClass]="{ 'border-primary': isThemeActive('aura', 'purple'), 'hover:border-500 surface-border': !isThemeActive('aura', 'purple') }"
class="bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200"
style="border-radius: 30px" (click)="changeTheme('aura', 'purple')">
<span class="block h-1rem w-full"
style="border-radius: 30px; background: linear-gradient(180deg, #7758e4 0%, rgba(119, 88, 228, 0.5) 100%)"></span>
</button>
<button
[ngClass]="{ 'border-primary': isThemeActive('aura', 'amber'), 'hover:border-500 surface-border': !isThemeActive('aura', 'amber') }"
class="bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200"
style="border-radius: 30px" (click)="changeTheme('aura', 'amber')">
<span class="block h-1rem w-full"
style="border-radius: 30px; background: linear-gradient(180deg, #f59e0b 0%, rgba(245, 158, 11, 0.5) 100%)"></span>
</button>

<button
[ngClass]="{ 'border-primary': isThemeActive('aura', 'amber'), 'hover:border-500 surface-border': !isThemeActive('aura', 'amber') }"
class="bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200"
style="border-radius: 30px" (click)="changeTheme('aura', 'amber')">
<span class="block h-1rem w-full"
style="border-radius: 30px; background:linear-gradient(180deg, #14b8a6 0%, rgba(20, 184, 166, 0.5) 100%)"></span>
</button>
<button
[ngClass]="{ 'border-primary': isThemeActive('aura', 'pink'), 'hover:border-500 surface-border': !isThemeActive('aura', 'pink') }"
class="bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200"
style="border-radius: 30px" (click)="changeTheme('aura', 'pink')"
>
<span class="block h-1rem w-full"
style="border-radius: 30px; background: linear-gradient(180deg, #ec4899 0%, rgba(236, 72, 153, 0.5) 100%)"></span>
</button>
</div>
<div class="flex align-items-center justify-content-between gap-3">
<button
[ngClass]="{ 'border-primary': isThemeActive('aura', 'noir'), 'hover:border-500 surface-border': !isThemeActive('aura', 'noir') }"
class="bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200"
style="border-radius: 30px" (click)="changeTheme('aura', 'noir')"
>
<span class="block h-1rem w-full"
style="border-radius: 30px; background: linear-gradient(180deg, #0f172a 0%, rgba(0, 0, 0, 0.5) 100%)"></span>
</button>
<button
[ngClass]="{ 'border-primary': isThemeActive('aura', 'lime'), 'hover:border-500 surface-border': !isThemeActive('aura', 'lime') }"
class="bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200"
style="border-radius: 30px" (click)="changeTheme('aura', 'lime')"
>
<span class="block h-1rem w-full"
style="border-radius: 30px; background:linear-gradient(180deg, #84cc16 0%, rgb(132, 204, 22, 0.5) 100%)"></span>
</button>
<span class="w-3"></span>
<span class="w-3"></span>
</div>
</section>

<section class="py-4 border-bottom-1 surface-border">
<div class="text-xl font-semibold mb-3">Themes</div>
<div class="flex align-items-center gap-2 mb-3">
Expand Down Expand Up @@ -131,113 +223,5 @@
<div class="w-3"></div>
</div>
</section>

<section class="py-4 border-bottom-1 surface-border">
<div class="flex align-items-center gap-2 mb-3">
<img src="https://primefaces.org/cdn/primeng/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap"
class="border-circle" style="width: 1.5rem" />
<span class="font-medium">Bootstrap</span>
</div>
<div class="flex align-items-center justify-content-between gap-3">
<button
[ngClass]="{ 'border-primary': isThemeActive('bootstrap4', 'blue'), 'hover:border-500 surface-border': !isThemeActive('bootstrap4', 'blue') }"
class="bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200"
style="border-radius: 30px" (click)="changeTheme('bootstrap4', 'blue')">
<span class="block h-1rem w-full"
style="border-radius: 30px; background: linear-gradient(180deg, #027bff 0%, rgba(2, 123, 255, 0.5) 100%)"></span>
</button>
<button
[ngClass]="{ 'border-primary': isThemeActive('bootstrap4', 'purple'), 'hover:border-500 surface-border': !isThemeActive('bootstrap4', 'purple') }"
class="bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200"
style="border-radius: 30px" (click)="changeTheme('bootstrap4', 'purple')">
<span class="block h-1rem w-full"
style="border-radius: 30px; background: linear-gradient(180deg, #893cae 0%, rgba(137, 60, 174, 0.5) 100%)"></span>
</button>
<div class="w-3"></div>
<div class="w-3"></div>
</div>
</section>

<section class="py-4 border-bottom-1 surface-border">
<div class="flex gap-3">
<div class="w-3">
<div class="flex align-items-center gap-2 mb-3">
<img src="https://primefaces.org/cdn/primeng/images/themes/soho-light.png" alt="Soho"
class="border-circle" style="width: 1.5rem" />
<span class="font-medium">Soho</span>
</div>
<button
[ngClass]="{ 'border-primary': isThemeActive('soho'), 'hover:border-500 surface-border': !isThemeActive('soho') }"
class="bg-transparent border-1 cursor-pointer p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200"
style="border-radius: 30px" (click)="changeTheme('soho')">
<span class="block h-1rem w-full"
style="border-radius: 30px; background: linear-gradient(180deg, #664beb 0%, rgba(102, 75, 235, 0.5) 100%)"></span>
</button>
</div>
<div class="w-3">
<div class="flex align-items-center gap-2 mb-3">
<img src="https://primefaces.org/cdn/primeng/images/themes/viva-light.svg" alt="Viva"
class="border-circle" style="width: 1.5rem" />
<span class="font-medium">Viva</span>
</div>
<button
[ngClass]="{ 'border-primary': isThemeActive('viva'), 'hover:border-500 surface-border': !isThemeActive('viva') }"
class="bg-transparent border-1 cursor-pointer p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200"
style="border-radius: 30px" (click)="changeTheme('viva')">
<span class="block h-1rem w-full"
style="border-radius: 30px; background: linear-gradient(180deg, #4a67c9 0%, rgba(74, 103, 201, 0.5) 100%)"></span>
</button>
</div>
<div class="w-3"></div>
<div class="w-3"></div>
</div>
</section>
<section class="py-4">
<div class="flex gap-3">
<div class="w-3">
<div class="flex align-items-center gap-2 mb-3">
<img src="https://primefaces.org/cdn/primeng/images/themes/fluent-light.png" alt="Fluent"
class="border-circle" style="width: 1.5rem" />
<span class="font-medium">Fluent</span>
</div>
<button
[ngClass]="{ 'border-primary': isThemeActive('fluent-light'), 'hover:border-500 surface-border': !isThemeActive('fluent-light') }"
class="bg-transparent border-1 cursor-pointer p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200"
style="border-radius: 30px" (click)="changeTheme('fluent-light')">
<span class="block h-1rem w-full"
style="border-radius: 30px; background: linear-gradient(180deg, #0078d4 0%, rgba(0, 120, 212, 0.5) 100%)"></span>
</button>
</div>
<div class="w-3">
<div class="flex align-items-center gap-2 mb-3">
<img src="https://primefaces.org/cdn/primeng/images/themes/mira.jpg" alt="Mira"
class="border-circle" style="width: 1.5rem" />
<span class="font-medium">Mira</span>
</div>
<button
[ngClass]="{ 'border-primary': isThemeActive('mira'), 'hover:border-500 surface-border': !isThemeActive('mira') }"
class="bg-transparent border-1 cursor-pointer p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200"
style="border-radius: 30px" (click)="changeTheme('mira', 'blue')">
<span class="block h-1rem w-full"
style="border-radius: 30px; background: linear-gradient(180deg, #81a1c1 0%, rgba(129, 161, 193, 0.5) 100%)"></span>
</button>
</div>
<div class="w-3">
<div class="flex align-items-center gap-2 mb-3">
<img src="https://primefaces.org/cdn/primeng/images/themes/nano.jpg" alt="Nano"
class="border-circle" style="width: 1.5rem" />
<span class="font-medium">Nano</span>
</div>
<button
[ngClass]="{ 'border-primary': isThemeActive('nano'), 'hover:border-500 surface-border': !isThemeActive('nano') }"
class="bg-transparent border-1 cursor-pointer p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200"
style="border-radius: 30px" (click)="changeTheme('nano')">
<span class="block h-1rem w-full"
style="border-radius: 30px; background: linear-gradient(180deg, #1469b4 0%, rgba(20, 105, 180, 0.5) 100%)"></span>
</button>
</div>
<div class="w-3"></div>
</div>
</section>
</div>
</p-sidebar>

0 comments on commit db1eac8

Please sign in to comment.