feat: enhance shortcuts modal and complete logos-to-icons rename
This commit includes graphical keyboard icons integration, modal styling improvements, and comprehensive "Logos" to "Icons" terminology update. Changes: - Add graphical keyboard icons using Iconify MDI (Tab, Ctrl, Cmd, Esc, etc.) - Implement color scheme: black title, green subtitle/headers, blue kbd elements - Add visual boxes with borders and shadows for section grouping - Change modal from 3-column to 2-column grid layout (900px width) - Fix critical bug: all 5 sections now render (was only showing 2) Rename "Logos" to "Icons" across entire codebase: - Go models: ToggleLogos → ToggleIcons, ShowLogos → ShowIcons - Routes: /toggle/logos → /toggle/icons - Templates: desktop-logo-toggle → desktop-icon-toggle, #logoToggle → #iconToggle - JavaScript: logoToggles → iconToggles, sync logic updated - CSS: .show-logos → .show-icons - UI JSON: toggleLogos → toggleIcons - Comments and labels updated Technical details: - Rebuilt Go binary to fix template rendering error - Fixed JSON struct tag: json:"toggleLogos" → json:"toggleIcons" - Updated kbd element styling for icon alignment (inline-flex) - Added margin-bottom to subtitle (0.5rem) - Grid now 2 columns for better 5-section layout All 5 sections now render correctly: 1. Zoom Control 2. View Controls 3. Navigation 4. Actions 5. Browser Defaults
This commit is contained in:
juanatsap
@@ -1,5 +1,5 @@
|
||||
<main id="cv-content"
|
||||
class="cv-paper {{.CVLengthClass}} {{if .ShowLogos}}show-logos{{end}}"
|
||||
class="cv-paper {{.CVLengthClass}} {{if .ShowIcons}}show-icons{{end}}"
|
||||
role="main"
|
||||
aria-live="polite">
|
||||
<!-- PAGE 1 -->
|
||||
|
||||
@@ -65,9 +65,9 @@
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<div class="shortcut-keys">
|
||||
<kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd> to Logos
|
||||
<kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd> to Icons
|
||||
</div>
|
||||
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.ViewControls.ToggleLogos.Description}}</span>
|
||||
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.ViewControls.ToggleIcons.Description}}</span>
|
||||
</div>
|
||||
<div class="shortcut-item">
|
||||
<div class="shortcut-keys">
|
||||
|
||||
@@ -122,27 +122,27 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Logo toggle -->
|
||||
<div class="menu-control-item" id="mobile-logo-toggle">
|
||||
<!-- Icon toggle -->
|
||||
<div class="menu-control-item" id="mobile-icon-toggle">
|
||||
<label class="menu-control-label">
|
||||
<iconify-icon icon="mdi:image-multiple-outline" width="20" height="20"></iconify-icon>
|
||||
<span>{{if eq .Lang "es"}}Logos{{else}}Logos{{end}}</span>
|
||||
<span>{{if eq .Lang "es"}}Iconos{{else}}Icons{{end}}</span>
|
||||
</label>
|
||||
<label class="icon-toggle">
|
||||
<input type="checkbox"
|
||||
id="logoToggleMenu"
|
||||
{{if .ShowLogos}}checked{{end}}
|
||||
hx-post="/toggle/logos?lang={{.Lang}}"
|
||||
id="iconToggleMenu"
|
||||
{{if .ShowIcons}}checked{{end}}
|
||||
hx-post="/toggle/icons?lang={{.Lang}}"
|
||||
hx-swap="none"
|
||||
_="on change
|
||||
if my.checked
|
||||
add .show-logos to .cv-paper
|
||||
set localStorage['cv-logos'] to 'true'
|
||||
set #logoToggle's checked to true
|
||||
add .show-icons to .cv-paper
|
||||
set localStorage['cv-icons'] to 'true'
|
||||
set #iconToggle's checked to true
|
||||
else
|
||||
remove .show-logos from .cv-paper
|
||||
set localStorage['cv-logos'] to 'false'
|
||||
set #logoToggle's checked to false
|
||||
remove .show-icons from .cv-paper
|
||||
set localStorage['cv-icons'] to 'false'
|
||||
set #iconToggle's checked to false
|
||||
end">
|
||||
<span class="icon-toggle-slider">
|
||||
<iconify-icon icon="mdi:image-off-outline" width="16" height="16" class="icon-left"></iconify-icon>
|
||||
|
||||
@@ -29,24 +29,24 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Logo toggle -->
|
||||
<div class="selector-group" id="desktop-logo-toggle">
|
||||
<label class="selector-label">{{if eq .Lang "es"}}Logos{{else}}Logos{{end}}:</label>
|
||||
<!-- Icon toggle -->
|
||||
<div class="selector-group" id="desktop-icon-toggle">
|
||||
<label class="selector-label">{{if eq .Lang "es"}}Iconos{{else}}Icons{{end}}:</label>
|
||||
<label class="icon-toggle">
|
||||
<input type="checkbox"
|
||||
id="logoToggle"
|
||||
{{if .ShowLogos}}checked{{end}}
|
||||
hx-post="/toggle/logos?lang={{.Lang}}"
|
||||
id="iconToggle"
|
||||
{{if .ShowIcons}}checked{{end}}
|
||||
hx-post="/toggle/icons?lang={{.Lang}}"
|
||||
hx-swap="none"
|
||||
_="on change
|
||||
if my.checked
|
||||
add .show-logos to .cv-paper
|
||||
set localStorage['cv-logos'] to 'true'
|
||||
set #logoToggleMenu's checked to true
|
||||
add .show-icons to .cv-paper
|
||||
set localStorage['cv-icons'] to 'true'
|
||||
set #iconToggleMenu's checked to true
|
||||
else
|
||||
remove .show-logos from .cv-paper
|
||||
set localStorage['cv-logos'] to 'false'
|
||||
set #logoToggleMenu's checked to false
|
||||
remove .show-icons from .cv-paper
|
||||
set localStorage['cv-icons'] to 'false'
|
||||
set #iconToggleMenu's checked to false
|
||||
end">
|
||||
<span class="icon-toggle-slider">
|
||||
<iconify-icon icon="mdi:image-off-outline" width="16" height="16" class="icon-left"></iconify-icon>
|
||||
|
||||
Reference in New Issue
Block a user