romfast/roa2web-service-auto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui-fixes-phase6): Complete US-604 - Toggle Temă cu 3 Stări în Meniul Mobil

Browse Source 
Implemented by Ralph autonomous loop.
Iteration: 5

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude Agent
2026-01-13 16:18:22 +00:00
parent 496fd8014e
commit 0737f0626b
3 changed files with 51 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src/shared/components/mobile/MobileDrawerMenu.vue
View File

@@ -195,28 +195,17 @@
</div>
</div>
<!-- Theme Selector -->
<div class="theme-selector">
<div class="theme-selector-label">
<i class="pi pi-palette"></i>
<span>Temă</span>
</div>
<div class="theme-options">
<button
v-for="option in themeOptions"
:key="option.value"
class="theme-option"
:class="{ active: currentTheme === option.value }"
@click="selectTheme(option.value)"
:title="option.label"
:aria-label="`Selectează tema ${option.label}`"
:aria-pressed="currentTheme === option.value"
>
<i :class="option.icon"></i>
<span class="theme-option-label">{{ option.label }}</span>
</button>
</div>
</div>
<!-- Theme Toggle (compact cyclic button) -->
<button
type="button"
class="drawer-link theme-toggle-link"
@click="cycleTheme"
:aria-label="`Schimbă tema: ${currentThemeOption.label}`"
>
<i :class="['drawer-icon', currentThemeOption.icon]"></i>
<span class="drawer-label">{{ currentThemeOption.label }}</span>
<i class="pi pi-chevron-right theme-cycle-hint"></i>
</button>
<!-- Divider before logout -->
<div class="drawer-divider profile-divider"></div>
@@ -519,11 +508,14 @@ const applyTheme = (theme) => {
}
/**
* Select a specific theme
* Cycle through themes: auto → light → dark → auto
*/
const selectTheme = (theme) => {
currentTheme.value = theme
applyTheme(theme)
const cycleTheme = () => {
const themes = ['auto', 'light', 'dark']
const currentIndex = themes.indexOf(currentTheme.value)
const nextTheme = themes[(currentIndex + 1) % themes.length]
currentTheme.value = nextTheme
applyTheme(nextTheme)
}
// Initialize theme from localStorage on mount
@@ -954,75 +946,22 @@ onMounted(() => {
}
/* ================================================
Theme Selector
Theme Toggle (compact cyclic button) - US-604
================================================ */
.theme-selector {
padding: var(--space-sm) var(--space-lg);
.theme-toggle-link {
position: relative;
}
.theme-selector-label {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--text-color-secondary);
margin-bottom: var(--space-sm);
}
.theme-selector-label i {
font-size: var(--text-base);
}
.theme-options {
display: flex;
gap: var(--space-xs);
background: var(--surface-ground);
padding: var(--space-xs);
border-radius: var(--radius-md);
}
.theme-option {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: var(--space-sm);
min-height: 48px;
background: transparent;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition-fast);
color: var(--text-color-secondary);
}
.theme-option:hover {
background: var(--surface-hover);
color: var(--text-color);
}
.theme-option:active {
transform: scale(0.98);
}
.theme-option.active {
background: var(--surface-card);
.theme-toggle-link .drawer-icon {
color: var(--color-primary);
box-shadow: var(--shadow-sm);
}
.theme-option i {
font-size: var(--text-lg);
}
.theme-option-label {
.theme-cycle-hint {
font-size: var(--text-xs);
font-weight: var(--font-medium);
white-space: nowrap;
color: var(--text-color-secondary);
margin-left: auto;
opacity: 0.6;
}
/* ================================================
@@ -1235,28 +1174,13 @@ onMounted(() => {
background: var(--red-900);
}
/* Dark mode: Theme Selector */
[data-theme="dark"] .theme-selector-label {
color: var(--text-color-secondary);
}
[data-theme="dark"] .theme-options {
background: var(--surface-ground);
}
[data-theme="dark"] .theme-option {
color: var(--text-color-secondary);
}
[data-theme="dark"] .theme-option:hover {
background: var(--surface-hover);
color: var(--text-color);
}
[data-theme="dark"] .theme-option.active {
background: var(--surface-card);
/* Dark mode: Theme Toggle */
[data-theme="dark"] .theme-toggle-link .drawer-icon {
color: var(--blue-400);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .theme-cycle-hint {
color: var(--text-color-secondary);
}
/* Auto dark mode (when no manual theme is set) */
@@ -1430,28 +1354,13 @@ onMounted(() => {
background: var(--red-900);
}
/* Auto dark mode: Theme Selector */
:root:not([data-theme]) .theme-selector-label {
color: var(--text-color-secondary);
}
:root:not([data-theme]) .theme-options {
background: var(--surface-ground);
}
:root:not([data-theme]) .theme-option {
color: var(--text-color-secondary);
}
:root:not([data-theme]) .theme-option:hover {
background: var(--surface-hover);
color: var(--text-color);
}
:root:not([data-theme]) .theme-option.active {
background: var(--surface-card);
/* Auto dark mode: Theme Toggle */
:root:not([data-theme]) .theme-toggle-link .drawer-icon {
color: var(--blue-400);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
:root:not([data-theme]) .theme-cycle-hint {
color: var(--text-color-secondary);
}
}
</style>