itlxrd/Psychotoxical-psysonic
1
0
Fork 0
mirror of https://github.com/Psychotoxical/psysonic.git synced 2026-07-22 07:15:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(settings): add a Compact buttons appearance toggle (#1189)

Browse Source 
* feat(ui): prototype compact hero and toolbar buttons (Large/Small appearance setting)

* feat(settings): rename action-button size toggle to "Compact buttons"

Promote the hero-button prototype to a real, app-wide setting.

- rename heroButtonSize → buttonSize, data-hero-buttons → data-button-size,
  hero-action-bar/hero-btn-label → compact-action-bar/compact-btn-label
- relabel "Hero buttons" → "Compact buttons" and broaden the description
  (action + toolbar buttons across detail pages and browse views) in all 11 locales
- move the feature CSS out of cover-lightbox.css into its own compact-buttons.css
- add tests: themeStore buttonSize toggle, SelectionToggleButton

* docs(changelog): compact buttons appearance toggle (#1189)

* docs(credits): compact buttons appearance toggle (#1189)
This commit is contained in:
Psychotoxical
2026-06-25 14:49:09 +02:00
committed by GitHub
parent 8b89596fcf
commit d49424e95b
40 changed files with 438 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AlbumHeader.tsx
+10 -7
View File
@@ -475,7 +475,7 @@ export default function AlbumHeader({
</div>
</div>
) : (
<div className="album-detail-actions">
<div className="album-detail-actions compact-action-bar">
<div className="album-detail-actions-primary">
<button
className="btn btn-primary"
@@ -483,7 +483,7 @@ export default function AlbumHeader({
onClick={onPlayAll}
{...tooltipAttrs(t('albumDetail.playTooltip'))}
>
<Play size={15} /> {t('common.play', 'Reproducir')}
<Play size={15} /> <span className="compact-btn-label">{t('common.play', 'Reproducir')}</span>
</button>
{onShuffleAll && (
<button
@@ -528,7 +528,7 @@ export default function AlbumHeader({
onClick={onBio}
{...tooltipAttrs(t('albumDetail.artistBioTooltip'))}
>
<Highlighter size={16} /> {t('albumDetail.artistBio')}
<Highlighter size={16} /> <span className="compact-btn-label">{t('albumDetail.artistBio')}</span>
</button>
)}
@@ -548,7 +548,7 @@ export default function AlbumHeader({
onClick={onDownload}
{...tooltipAttrs(t('albumDetail.downloadTooltip'))}
>
<Download size={16} /> {t('albumDetail.download')}{totalSize > 0 ? ` · ${formatMb(totalSize)}` : ''}
<Download size={16} /> <span className="compact-btn-label">{t('albumDetail.download')}{totalSize > 0 ? ` · ${formatMb(totalSize)}` : ''}</span>
</button>
)
)}
@@ -562,28 +562,31 @@ export default function AlbumHeader({
<button
className="btn btn-surface offline-cache-btn offline-cache-btn--queued"
onClick={onCacheOffline}
aria-label={t('albumDetail.offlineQueued')}
data-tooltip={t('albumDetail.removeFromOfflineQueue')}
>
<HardDriveDownload size={16} />
{t('albumDetail.offlineQueued')}
<span className="compact-btn-label">{t('albumDetail.offlineQueued')}</span>
</button>
) : offlineStatus === 'cached' ? (
<button
className="btn btn-surface offline-cache-btn offline-cache-btn--cached"
onClick={onRemoveOffline}
aria-label={t('albumDetail.offlineCached')}
data-tooltip={t('albumDetail.removeOffline')}
>
<HardDriveDownload size={16} />
{t('albumDetail.offlineCached')}
<span className="compact-btn-label">{t('albumDetail.offlineCached')}</span>
</button>
) : (
<button
className="btn btn-surface offline-cache-btn"
onClick={onCacheOffline}
aria-label={t('albumDetail.cacheOffline')}
data-tooltip={t('albumDetail.cacheOffline')}
>
<HardDriveDownload size={16} />
{t('albumDetail.cacheOffline')}
<span className="compact-btn-label">{t('albumDetail.cacheOffline')}</span>
</button>
)
)}