feat: Add mobile responsive theme editor and documentation
- ThemesPage: Custom dropdown with theme cards for mobile - ThemesPage: Collapsible variables section - ThemePreview: Responsive grid and compact layout - VariableEditor: Separate radius preview with border-radius - ColorPicker: Mobile-friendly dropdown positioning - README: Complete theme system documentation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -10,6 +10,7 @@ const store = useThemeStore()
|
||||
|
||||
const activeCategory = ref<ThemeCategory>('colors')
|
||||
const variablesCollapsed = ref(false)
|
||||
const mobileDropdownOpen = ref(false)
|
||||
const newThemeName = ref('')
|
||||
const showNewThemeModal = ref(false)
|
||||
const showCloneModal = ref(false)
|
||||
@@ -141,12 +142,58 @@ onMounted(() => {
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h2>Themes</h2>
|
||||
<button class="btn-icon" @click="createNewTheme" title="New theme">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="sidebar-title">
|
||||
<h2>Themes</h2>
|
||||
<button class="btn-icon desktop-only" @click="createNewTheme" title="New theme">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Mobile: theme dropdown + actions -->
|
||||
<div class="mobile-editor-controls">
|
||||
<div class="mobile-theme-dropdown">
|
||||
<button class="mobile-dropdown-trigger" @click="mobileDropdownOpen = !mobileDropdownOpen">
|
||||
<div class="dropdown-color" :style="{ background: store.activeTheme?.variables?.accent?.accent || '#6366f1' }"></div>
|
||||
<span>{{ editingThemeName }}</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" :class="{ rotated: mobileDropdownOpen }">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div v-if="mobileDropdownOpen" class="mobile-dropdown-menu" @click.stop>
|
||||
<div class="dropdown-section">
|
||||
<span class="dropdown-label">System</span>
|
||||
<ThemeListItem
|
||||
v-for="theme in store.systemThemes"
|
||||
:key="theme.id"
|
||||
:theme="theme"
|
||||
:active="store.activeTheme?.id === theme.id"
|
||||
@select="(t) => { handleSelectTheme(t); mobileDropdownOpen = false }"
|
||||
@clone="handleCloneTheme"
|
||||
@setDefault="handleSetDefault"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="store.userThemes.length > 0" class="dropdown-section">
|
||||
<span class="dropdown-label">Custom</span>
|
||||
<ThemeListItem
|
||||
v-for="theme in store.userThemes"
|
||||
:key="theme.id"
|
||||
:theme="theme"
|
||||
:active="store.activeTheme?.id === theme.id"
|
||||
@select="(t) => { handleSelectTheme(t); mobileDropdownOpen = false }"
|
||||
@delete="handleDeleteTheme"
|
||||
@clone="handleCloneTheme"
|
||||
@setDefault="handleSetDefault"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-actions">
|
||||
<button class="btn-sm" @click="handleReset" :disabled="!store.hasUnsavedChanges">Reset</button>
|
||||
<button class="btn-sm primary" @click="handleSave" :disabled="!store.hasUnsavedChanges">Save</button>
|
||||
<button class="btn-sm" @click="handleExport">Export</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="theme-groups">
|
||||
@@ -345,6 +392,13 @@ onMounted(() => {
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1.25rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.sidebar-header h2 {
|
||||
@@ -353,6 +407,118 @@ onMounted(() => {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.mobile-editor-controls {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-theme-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mobile-dropdown-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.mobile-dropdown-trigger:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.mobile-dropdown-trigger .dropdown-color {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mobile-dropdown-trigger svg {
|
||||
transition: transform 0.2s;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.mobile-dropdown-trigger svg.rotated {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.mobile-dropdown-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
left: 0;
|
||||
min-width: 240px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
z-index: 100;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.dropdown-section {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.dropdown-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dropdown-label {
|
||||
display: block;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-muted);
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.dropdown-section :deep(.theme-item) {
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.desktop-only {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mobile-actions {
|
||||
display: flex;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.3rem 0.6rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-sm.primary {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.btn-sm:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
padding: 0.375rem;
|
||||
background: transparent;
|
||||
@@ -659,4 +825,119 @@ onMounted(() => {
|
||||
gap: 0.75rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Mobile responsive */
|
||||
@media (max-width: 900px) {
|
||||
.themes-page {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
max-height: none;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
flex-wrap: wrap;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mobile-editor-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.desktop-only {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.theme-groups {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.editor-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.editor-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.category-tabs {
|
||||
padding: 0.5rem 1rem;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
.category-tabs button {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.variables-content {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.variables-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
}
|
||||
|
||||
.preview-section {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.sidebar-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.sidebar-title h2 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.mobile-editor-controls {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.mobile-theme-select {
|
||||
flex: 1;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.mobile-actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.variables-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.modal {
|
||||
margin: 1rem;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user