Daniel Legt
78bf3ef11b
Remove hyphens from compound adjectives such as "logged-in", "one-time", "password-protected", "full-height", "multi-file", and "S3-compatible" in comments, test error messages, and UI labels to improve readability and consistency.
220 lines
13 KiB
HTML
220 lines
13 KiB
HTML
{{define "download.html"}}{{template "base" .}}{{end}}
|
|
|
|
{{define "content"}}
|
|
<section class="download-view download-view-wide" aria-labelledby="download-title">
|
|
<div class="card download-card">
|
|
<div class="card-content">
|
|
<div class="file-emblem" aria-hidden="true">
|
|
<span class="svg-icon svg-icon-document"></span>
|
|
</div>
|
|
<h1 id="download-title">{{if .Data.Locked}}Protected box{{else}}Box: {{.Data.Box.ID}} ({{len .Data.Files}} file{{if ne (len .Data.Files) 1}}s{{end}}){{end}}</h1>
|
|
{{if .Data.Locked}}<p class="download-subtitle">Bucket id: {{.Data.Box.ID}}</p>{{end}}
|
|
|
|
{{if .Data.Locked}}
|
|
<form class="unlock-form" action="/d/{{.Data.Box.ID}}/unlock" method="post">
|
|
<label>
|
|
<span>Password</span>
|
|
<input type="password" name="password" autocomplete="current-password" required>
|
|
</label>
|
|
<button class="button button-primary" type="submit">Unlock box</button>
|
|
</form>
|
|
{{if .Data.Obfuscated}}
|
|
<p class="download-subtitle">File names, counts, and previews are hidden until the password is entered.</p>
|
|
{{end}}
|
|
{{end}}
|
|
|
|
{{if .Data.Files}}
|
|
{{$processing := false}}{{range .Data.Files}}{{if .Processing}}{{$processing = true}}{{end}}{{end}}
|
|
{{$failed := false}}{{range .Data.Files}}{{if .Failed}}{{$failed = true}}{{end}}{{end}}
|
|
{{if $processing}}
|
|
<div class="upload-processing-alert" role="status">
|
|
Some files are still processing. You can share this link now, but processing files will become available shortly.
|
|
</div>
|
|
{{end}}
|
|
{{if $failed}}
|
|
<div class="upload-processing-alert upload-processing-alert-error" role="alert">
|
|
Upload processing failed for one or more files. The original upload could not be finalized by the storage backend.
|
|
</div>
|
|
{{end}}
|
|
{{$single := eq (len .Data.Files) 1}}
|
|
<div class="badge-row">
|
|
<span class="badge badge-expiry">Expires {{.Data.ExpiresLabel}}</span>
|
|
{{if .Data.MaxDownloads}}<span class="badge">{{.Data.DownloadCount}} / {{.Data.MaxDownloads}} downloads</span>{{end}}
|
|
</div>
|
|
|
|
{{if not .Data.Locked}}
|
|
<button class="button button-outline button-wide download-share-button" type="button" data-share-box data-share-url="/d/{{.Data.Box.ID}}" data-share-title="{{if .Data.Locked}}Protected Warpbox box{{else}}Warpbox box {{.Data.Box.ID}}{{end}}" data-share-text="Shared files on Warpbox">
|
|
<span class="svg-icon svg-icon-share" aria-hidden="true"></span>
|
|
<span data-share-box-label>Share</span>
|
|
</button>
|
|
{{if or $processing $failed}}
|
|
<span class="button button-outline button-wide is-disabled" aria-disabled="true">
|
|
{{if $failed}}Download unavailable{{else}}Files processing{{end}}
|
|
</span>
|
|
{{else}}
|
|
{{if $single}}
|
|
{{$first := index .Data.Files 0}}
|
|
<a class="button button-primary button-wide" href="{{$first.DownloadURL}}" download="{{$first.Name}}">
|
|
<span class="svg-icon svg-icon-download" aria-hidden="true"></span>
|
|
Download
|
|
</a>
|
|
{{else}}
|
|
<a class="button button-primary button-wide" href="{{.Data.ZipURL}}">
|
|
<span class="svg-icon svg-icon-download" aria-hidden="true"></span>
|
|
Download zip
|
|
</a>
|
|
{{end}}
|
|
{{end}}
|
|
{{end}}
|
|
|
|
<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">
|
|
<span class="svg-icon svg-icon-list" aria-hidden="true"></span>
|
|
<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">
|
|
<span class="svg-icon svg-icon-grid" aria-hidden="true"></span>
|
|
<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 {{if .Processing}}is-processing{{end}} {{if .Failed}}is-failed{{end}}" data-kind="{{.PreviewKind}}" {{if and (not .Processing) (not .Failed)}}data-file-context data-preview-url="{{.URL}}" data-view-url="{{.DownloadURL}}?inline=1" data-download-url="{{.DownloadURL}}"{{end}} data-file-name="{{.Name}}" data-reaction-card data-react-url="{{.ReactURL}}" data-reacted="{{if .Reacted}}true{{else}}false{{end}}">
|
|
{{if or .Processing .Failed}}<div class="file-open" aria-label="{{.Name}} {{if .Failed}}failed processing{{else}}is processing{{end}}">{{else}}<a class="file-open" href="{{.DownloadURL}}?inline=1"{{if not $single}} target="_blank" rel="noopener noreferrer"{{end}} aria-label="Open {{.Name}}">{{end}}
|
|
<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}} · {{if .Failed}}Failed{{else if .Processing}}Processing{{else}}{{.ContentType}}{{end}}</small>
|
|
{{if .Failed}}<small class="file-error">{{.Error}}</small>{{end}}
|
|
</span>
|
|
<span class="file type">{{if .Failed}}Failed{{else if .Processing}}Processing{{else}}{{.ContentType}}{{end}}</span>
|
|
<span class="file-size">{{.Size}}</span>
|
|
{{if or .Processing .Failed}}</div>{{else}}</a>{{end}}
|
|
{{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">
|
|
<span class="svg-icon svg-icon-emoji" aria-hidden="true"></span>
|
|
</button>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
</article>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{if not .Data.Locked}}
|
|
<div class="reaction-picker" data-reaction-picker hidden>
|
|
<div class="reaction-picker-panel" role="dialog" aria-modal="false" aria-label="Choose a reaction">
|
|
<div class="reaction-picker-head">
|
|
<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>
|
|
{{end}}
|
|
</div>
|
|
<label class="reaction-search">
|
|
<span class="sr-only">Search emoji</span>
|
|
<input type="search" data-reaction-search placeholder="Search emoji">
|
|
</label>
|
|
<div class="reaction-grid-wrap">
|
|
{{range $index, $tab := .Data.EmojiTabs}}
|
|
<div class="reaction-grid {{if eq $index 0}}is-active{{end}}" data-reaction-panel="{{$tab.ID}}" role="tabpanel">
|
|
{{range $tab.Emojis}}
|
|
<button class="reaction-emoji" type="button" data-emoji-id="{{.ID}}" data-emoji-label="{{.Label}}" title="{{.Label}}" aria-label="{{.Label}}">
|
|
<img src="{{.URL}}" alt="" loading="lazy">
|
|
</button>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="context-menu" data-file-context-menu role="menu" aria-label="File actions" hidden>
|
|
<div class="context-menu-top">
|
|
<small>File actions</small>
|
|
<div class="context-menu-icons" aria-label="Quick actions">
|
|
<button type="button" role="menuitem" data-context-action="preview" title="Open preview" aria-label="Open preview">
|
|
<span class="svg-icon svg-icon-open" aria-hidden="true"></span>
|
|
</button>
|
|
<button type="button" role="menuitem" data-context-action="copy-preview" title="Copy preview URL" aria-label="Copy preview URL">
|
|
<span class="svg-icon svg-icon-copy" aria-hidden="true"></span>
|
|
<span data-context-label class="sr-only">Copy</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<button type="button" role="menuitem" data-context-action="preview">
|
|
<span class="svg-icon svg-icon-eye" aria-hidden="true"></span>
|
|
<span data-context-label>Preview</span>
|
|
</button>
|
|
<button type="button" role="menuitem" data-context-action="view">
|
|
<span class="svg-icon svg-icon-open" aria-hidden="true"></span>
|
|
<span data-context-label>View raw file</span>
|
|
</button>
|
|
<hr>
|
|
<button type="button" role="menuitem" data-context-action="copy-preview">
|
|
<span class="svg-icon svg-icon-copy" aria-hidden="true"></span>
|
|
<span data-context-label>Copy Preview</span>
|
|
</button>
|
|
<button type="button" role="menuitem" data-context-action="copy-download">
|
|
<span class="svg-icon svg-icon-copy" aria-hidden="true"></span>
|
|
<span data-context-label>Copy Download</span>
|
|
</button>
|
|
<hr>
|
|
<button type="button" role="menuitem" data-context-action="download">
|
|
<span class="svg-icon svg-icon-download" aria-hidden="true"></span>
|
|
<span data-context-label>Download</span>
|
|
</button>
|
|
</div>
|
|
{{end}}
|
|
{{else if not .Data.Locked}}
|
|
<p class="download-subtitle">{{.Data.ExpiresLabel}}</p>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{end}}
|