From 1885ed39262c088166471ce8fcf69b7817f4b05c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=BB=A8=ED=8A=B8=EB=A1=A4DELTA?= Date: Thu, 23 Apr 2026 14:13:33 +0900 Subject: [PATCH] Add Settings Container Component --- src/app/components/dropdown/dropdown.html | 6 +-- src/app/components/dropdown/dropdown.ts | 8 ++-- src/app/features/settings/category.scss | 8 ++++ src/app/features/settings/container.html | 17 +++++++ src/app/features/settings/container.scss | 55 +++++++++++++++++++++ src/app/features/settings/settings.html | 54 ++++++++++----------- src/app/features/settings/settings.scss | 58 +---------------------- src/app/features/settings/settings.ts | 39 ++++++++++++++- src/app/services/settings.service.ts | 1 + 9 files changed, 152 insertions(+), 94 deletions(-) create mode 100644 src/app/features/settings/container.html create mode 100644 src/app/features/settings/container.scss diff --git a/src/app/components/dropdown/dropdown.html b/src/app/components/dropdown/dropdown.html index 53eaada..ea3f397 100644 --- a/src/app/components/dropdown/dropdown.html +++ b/src/app/components/dropdown/dropdown.html @@ -7,7 +7,7 @@
- @if (icon()) { + @if (icon()?.trim()?.length ?? 0 > 0) { } @@ -22,13 +22,13 @@ @if (isOpen()) {
-
    +
      @for (option of filteredOptions(); track option.value; let i = $index) {
    • { return this.isOpen() && this.focusedIndex() >= 0 - ? this.dropdownId + '-option-' + this.focusedIndex() + ? this.dropdownID + '-option-' + this.focusedIndex() : null; }); - private static nextId = 0; + private static nextID = 0; private isLatestMouseDownInsideInput = false; - dropdownId = `dropdown-${Dropdown.nextId++}`; + dropdownID = `dropdown-${Dropdown.nextID++}`; private isLatestMouseDownInsideContainer = false; constructor(private element: ElementRef) { diff --git a/src/app/features/settings/category.scss b/src/app/features/settings/category.scss index d1adb73..2cc2af5 100644 --- a/src/app/features/settings/category.scss +++ b/src/app/features/settings/category.scss @@ -7,3 +7,11 @@ margin: 0; padding: 0; border: none; } + +label { + display: block; + font-weight: 500; + font-size: 14px; + height: 15px; + // color: oklch(0.6830 0 0); // #999999 +} diff --git a/src/app/features/settings/container.html b/src/app/features/settings/container.html new file mode 100644 index 0000000..9357e3a --- /dev/null +++ b/src/app/features/settings/container.html @@ -0,0 +1,17 @@ +@if (settingsType() == SettingsType.Switch) { +
      + @if (labelIcon()?.trim()?.length ?? 0 > 0) { + + } + +
      + +} @else if (settingsType() == SettingsType.Dropdown) { + + +} diff --git a/src/app/features/settings/container.scss b/src/app/features/settings/container.scss new file mode 100644 index 0000000..26cd6ba --- /dev/null +++ b/src/app/features/settings/container.scss @@ -0,0 +1,55 @@ +:host { + width: 100%; + display: flex; + + &:has(> switch) { + height: 32px; + + &:nth-child(1 of settings-container) { + margin-top: 4px; + } + } + + &:has(> dropdown) { + height: 40px; + } + + flex-direction: row; + align-items: center; + justify-content: space-between; + + .settings-name { + display: flex; + flex-direction: row; + align-items: center; + padding-left: 10px; + gap: 8px; + + span, label { + display: inline-block; + font-size: 18px; + + &.settings-icon { + display: inline-block; + width: 24px; + height: 24px; + + font-size: 24px; + + /* + line-height: 24px; + */ + } + } + } + + dropdown { + width: 324px; + } + + .hidden-label { + width: 0; + height: 0; + overflow: hidden; + } +} diff --git a/src/app/features/settings/settings.html b/src/app/features/settings/settings.html index 7684e97..099622d 100644 --- a/src/app/features/settings/settings.html +++ b/src/app/features/settings/settings.html @@ -1,43 +1,41 @@
      profile - {{ settingsService.userName() }} + {{ settingsService.isGuest() ? translation.settings.guest : settingsService.userName() }}
      -
      - -
      + + -
      -
      - - {{ translation.settings.romanisation }} -
      - -
      + +       -
      -
      - - {{ translation.settings.darkMode }} -
      - -
      + + -
      -
      - - {{ translation.settings.reduceAnimation }} -
      - -
      + +
      diff --git a/src/app/features/settings/settings.scss b/src/app/features/settings/settings.scss index 2251376..01cac04 100644 --- a/src/app/features/settings/settings.scss +++ b/src/app/features/settings/settings.scss @@ -24,61 +24,5 @@ gap: 16px; padding-bottom: 12px; - - settings-category { - label { - display: block; - font-weight: 500; - font-size: 14px; - height: 15px; - // color: oklch(0.6830 0 0); // #999999 - } - - & > .settings-container { - width: 100%; - display: flex; - - &:has(> switch) { - height: 32px; - - &:nth-child(1 of .settings-container) { - margin-top: 4px; - } - } - - &:has(> dropdown) { - height: 40px; - } - - flex-direction: row; - align-items: center; - justify-content: space-between; - - .settings-name { - display: flex; - flex-direction: row; - align-items: center; - padding-left: 10px; - gap: 8px; - - span { - display: inline-block; - font-size: 18px; - - &.settings-icon { - display: inline-block; - font-size: 24px; - - width: 24px; - height: 24px; - line-height: 24px; - } - } - } - } - - dropdown { - width: 324px; - } - } } + diff --git a/src/app/features/settings/settings.ts b/src/app/features/settings/settings.ts index 36cfd02..d2d5e4b 100644 --- a/src/app/features/settings/settings.ts +++ b/src/app/features/settings/settings.ts @@ -1,4 +1,4 @@ -import { Component, inject, input } from '@angular/core'; +import { Component, inject, input, output } from '@angular/core'; import { PopupComponent, PopupPosition } from '../../components/popup/popup'; import { Dropdown, DropdownOption } from '../../components/dropdown/dropdown'; import { Switch } from '../../components/switch/switch'; @@ -7,6 +7,10 @@ import { PopupService } from '../../services/popup.service'; import { SettingsService, Language } from '../../services/settings.service'; import { TranslationService } from '../../services/translation.service'; +export enum SettingsType { + Switch = 'switch', Dropdown = 'dropdown', +} + @Component({ selector: 'settings-category', standalone: true, @@ -17,10 +21,39 @@ export class SettingsCategory { headerLabel = input(); } +@Component({ + selector: 'settings-container', + standalone: true, + templateUrl: './container.html', + styleUrl: './container.scss', + imports: [Switch, Dropdown], +}) +export class SettingsContainer { + settingsType = input.required(); + protected readonly SettingsType = SettingsType; + + labelIcon = input(); + labelText = input.required(); + + value = input.required(); + onChange = output(); + + placeholder = input(); + options = input(); + + private static nextID = 0; + labelID = `settings-${SettingsContainer.nextID++}-label`; +} + @Component({ selector: 'settings-popup', standalone: true, - imports: [PopupComponent, Dropdown, Switch, NgOptimizedImage, SettingsCategory], + imports: [ + PopupComponent, + NgOptimizedImage, + SettingsCategory, + SettingsContainer, + ], templateUrl: './settings.html', styleUrl: './settings.scss', }) @@ -62,4 +95,6 @@ export class SettingsPopup { close() { this.popupService.close(SettingsPopup); } + + protected readonly SettingsType = SettingsType; } diff --git a/src/app/services/settings.service.ts b/src/app/services/settings.service.ts index 1d1d581..1117719 100644 --- a/src/app/services/settings.service.ts +++ b/src/app/services/settings.service.ts @@ -23,6 +23,7 @@ export class SettingsService { romanisation = computed(() => this._romanisation()); userName = computed(() => this._userName()); reduceAnimation = computed(() => this._reduceAnimation()); + isGuest = computed(() => true); constructor() { this.request = inject(REQUEST);