feat(ui): limit visible reactions and overhaul retro theme
- Limit the number of initially visible reactions per file to 2 and calculate the overflow count on the backend. - Redesign the retro theme CSS to mimic a classic Windows 98 Explorer window, including title bars, toolbars, and sunken panes. - Add local storage persistence for the file browser view preference (list vs. thumbnails).
This commit is contained in:
@@ -45,48 +45,75 @@
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
<div class="view-toolbar" aria-label="File view options">
|
||||
<button class="button button-outline is-active" type="button" data-view-button="list">List</button>
|
||||
<button class="button button-outline" type="button" data-view-button="thumbs">Thumbnails</button>
|
||||
<button class="button button-outline" type="button" data-preview-images>Preview images only</button>
|
||||
</div>
|
||||
|
||||
<div class="download-list file-browser is-list" data-file-browser>
|
||||
{{range .Data.Files}}
|
||||
<article class="download-item file-card" data-kind="{{.PreviewKind}}" data-file-context data-preview-url="{{.URL}}" data-view-url="{{.DownloadURL}}?inline=1" data-download-url="{{.DownloadURL}}" data-file-name="{{.Name}}" data-reaction-card>
|
||||
<a class="file-open" href="{{.DownloadURL}}?inline=1"{{if not $single}} target="_blank" rel="noopener noreferrer"{{end}} aria-label="Open {{.Name}}">
|
||||
<span class="file-media">
|
||||
{{if .HasThumbnail}}
|
||||
<img class="file-thumb" src="{{.ThumbnailURL}}" alt="" loading="lazy">
|
||||
{{else}}
|
||||
{{if .IconURL}}<img class="file-icon file-icon-standard" src="{{.IconURL}}" alt="" loading="lazy">{{end}}
|
||||
{{if .IconRetroURL}}<img class="file-icon file-icon-retro" src="{{.IconRetroURL}}" alt="" loading="lazy">{{end}}
|
||||
{{end}}
|
||||
</span>
|
||||
<span class="file-main">
|
||||
<strong class="file-name" title="{{.Name}}">{{.Name}}</strong>
|
||||
<small>{{.Size}} · {{.ContentType}}</small>
|
||||
</span>
|
||||
</a>
|
||||
{{if not $.Data.Locked}}
|
||||
<div class="file-reaction-dock" data-reaction-dock>
|
||||
<div class="file-reactions" data-reaction-list>
|
||||
{{range .Reactions}}
|
||||
<span class="reaction-pill" title="{{.Label}}">
|
||||
<img src="{{.URL}}" alt="{{.Label}}" loading="lazy">
|
||||
<span>{{.Count}}</span>
|
||||
</span>
|
||||
<div class="file-browser-window" data-file-browser-window>
|
||||
<div class="file-browser-titlebar">
|
||||
<div>
|
||||
<strong>File Browser</strong>
|
||||
<span>{{len .Data.Files}} item{{if ne (len .Data.Files) 1}}s{{end}}</span>
|
||||
</div>
|
||||
<div class="file-browser-window-actions" aria-hidden="true">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-browser-toolbar" aria-label="File view options">
|
||||
<div class="view-toolbar">
|
||||
<button class="button button-outline icon-button" type="button" data-view-button="list" aria-pressed="false" aria-label="List view" title="List view">
|
||||
<svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" /></svg>
|
||||
<span class="sr-only">List view</span>
|
||||
</button>
|
||||
<button class="button button-outline icon-button is-active" type="button" data-view-button="thumbs" aria-pressed="true" aria-label="Icon view" title="Icon view">
|
||||
<svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></svg>
|
||||
<span class="sr-only">Icon view</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-browser-head" aria-hidden="true">
|
||||
<span>Name</span>
|
||||
<span>Type</span>
|
||||
<span>Size</span>
|
||||
</div>
|
||||
<div class="download-list file-browser is-thumbs" data-file-browser>
|
||||
{{range .Data.Files}}
|
||||
<article class="download-item file-card" data-kind="{{.PreviewKind}}" data-file-context data-preview-url="{{.URL}}" data-view-url="{{.DownloadURL}}?inline=1" data-download-url="{{.DownloadURL}}" data-file-name="{{.Name}}" data-reaction-card data-react-url="{{.ReactURL}}" data-reacted="{{if .Reacted}}true{{else}}false{{end}}">
|
||||
<a class="file-open" href="{{.DownloadURL}}?inline=1"{{if not $single}} target="_blank" rel="noopener noreferrer"{{end}} aria-label="Open {{.Name}}">
|
||||
<span class="file-media">
|
||||
{{if .HasThumbnail}}
|
||||
<img class="file-thumb" src="{{.ThumbnailURL}}" alt="" loading="lazy">
|
||||
{{else}}
|
||||
{{if .IconURL}}<img class="file-icon file-icon-standard" src="{{.IconURL}}" alt="" loading="lazy">{{end}}
|
||||
{{if .IconRetroURL}}<img class="file-icon file-icon-retro" src="{{.IconRetroURL}}" alt="" loading="lazy">{{end}}
|
||||
{{end}}
|
||||
</span>
|
||||
<span class="file-main">
|
||||
<strong class="file-name" title="{{.Name}}">{{.Name}}</strong>
|
||||
<small>{{.Size}} · {{.ContentType}}</small>
|
||||
</span>
|
||||
<span class="file-type">{{.ContentType}}</span>
|
||||
<span class="file-size">{{.Size}}</span>
|
||||
</a>
|
||||
{{if not $.Data.Locked}}
|
||||
<div class="file-reaction-dock" data-reaction-dock>
|
||||
<div class="file-reactions" data-reaction-list>
|
||||
{{range .Reactions}}
|
||||
<button class="reaction-pill {{if not .Visible}}is-hidden-summary{{end}}" type="button" title="{{.Label}}" data-reaction-pill data-reaction-emoji-id="{{.EmojiID}}" data-reaction-label="{{.Label}}" data-reaction-url="{{.URL}}" data-reaction-count="{{.Count}}" aria-label="{{if $.Data.Locked}}Reaction{{else}}React with {{.Label}}{{end}}">
|
||||
<img src="{{.URL}}" alt="{{.Label}}" loading="lazy">
|
||||
<span>{{.Count}}</span>
|
||||
</button>
|
||||
{{end}}
|
||||
{{if .ReactionMore}}
|
||||
<button class="reaction-more" type="button" data-reaction-more aria-label="Show all reactions">+{{.ReactionMore}}</button>
|
||||
{{end}}
|
||||
</div>
|
||||
{{if not .Reacted}}
|
||||
<button class="reaction-button" type="button" data-reaction-button data-react-url="{{.ReactURL}}" aria-label="React to {{.Name}}" title="React">
|
||||
<svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 21a9 9 0 1 0-9-9 9 9 0 0 0 9 9Z" /><path d="M8 14s1.4 2 4 2 4-2 4-2" /><path d="M9 9h.01M15 9h.01" /></svg>
|
||||
</button>
|
||||
{{end}}
|
||||
</div>
|
||||
{{if not .Reacted}}
|
||||
<button class="reaction-button" type="button" data-reaction-button data-react-url="{{.ReactURL}}" aria-label="React to {{.Name}}" title="React">
|
||||
<svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 21a9 9 0 1 0-9-9 9 9 0 0 0 9 9Z" /><path d="M8 14s1.4 2 4 2 4-2 4-2" /><path d="M9 9h.01M15 9h.01" /></svg>
|
||||
</button>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</article>
|
||||
{{end}}
|
||||
{{end}}
|
||||
</article>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{if not .Data.Locked}}
|
||||
<div class="reaction-picker" data-reaction-picker hidden>
|
||||
@@ -95,6 +122,11 @@
|
||||
<strong>React</strong>
|
||||
<button class="button button-ghost reaction-picker-close" type="button" data-reaction-close aria-label="Close reaction picker">Close</button>
|
||||
</div>
|
||||
<div class="reaction-existing" data-reaction-existing hidden>
|
||||
<small>Existing reactions</small>
|
||||
<div class="reaction-existing-list" data-reaction-existing-list></div>
|
||||
</div>
|
||||
<p class="reaction-readonly-note" data-reaction-readonly hidden>You already reacted to this file.</p>
|
||||
<div class="reaction-picker-tabs" role="tablist" aria-label="Emoji themes">
|
||||
{{range $index, $tab := .Data.EmojiTabs}}
|
||||
<button type="button" class="reaction-tab {{if eq $index 0}}is-active{{end}}" data-reaction-tab="{{$tab.ID}}" role="tab" aria-selected="{{if eq $index 0}}true{{else}}false{{end}}">{{$tab.Label}}</button>
|
||||
|
||||
Reference in New Issue
Block a user