refactor(download): migrate inline SVGs to CSS mask-based icons
Replaces inline SVG elements in the download template with a reusable CSS mask-based icon system. This reduces HTML bloat and centralizes icon management. - Added a generic `.svg-icon` utility class using CSS masks. - Defined specific icon classes mapping to static SVG assets. - Updated `download.html` to use `<span>` tags with the new icon classes. - Adjusted CSS selectors in retro and download stylesheets to target `.svg-icon`.
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
<div class="card download-card">
|
||||
<div class="card-content">
|
||||
<div class="file-emblem" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" role="img" focusable="false"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" /><path d="M14 2v6h6" /></svg>
|
||||
<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}}
|
||||
@@ -44,7 +44,7 @@
|
||||
|
||||
{{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">
|
||||
<svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7" /><path d="M16 6 12 2 8 6" /><path d="M12 2v14" /></svg>
|
||||
<span class="svg-icon svg-icon-share" aria-hidden="true"></span>
|
||||
<span data-share-box-label>Share</span>
|
||||
</button>
|
||||
{{if or $processing $failed}}
|
||||
@@ -55,12 +55,12 @@
|
||||
{{if $single}}
|
||||
{{$first := index .Data.Files 0}}
|
||||
<a class="button button-primary button-wide" href="{{$first.DownloadURL}}" download="{{$first.Name}}">
|
||||
<svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" /></svg>
|
||||
<span class="svg-icon svg-icon-download" aria-hidden="true"></span>
|
||||
Download
|
||||
</a>
|
||||
{{else}}
|
||||
<a class="button button-primary button-wide" href="{{.Data.ZipURL}}">
|
||||
<svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" /></svg>
|
||||
<span class="svg-icon svg-icon-download" aria-hidden="true"></span>
|
||||
Download zip
|
||||
</a>
|
||||
{{end}}
|
||||
@@ -80,11 +80,11 @@
|
||||
<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="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">
|
||||
<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="svg-icon svg-icon-grid" aria-hidden="true"></span>
|
||||
<span class="sr-only">Icon view</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -129,7 +129,7 @@
|
||||
</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>
|
||||
<span class="svg-icon svg-icon-emoji" aria-hidden="true"></span>
|
||||
</button>
|
||||
{{end}}
|
||||
</div>
|
||||
@@ -177,35 +177,35 @@
|
||||
<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">
|
||||
<svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
|
||||
<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">
|
||||
<svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>
|
||||
<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">
|
||||
<svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6Z" /><circle cx="12" cy="12" r="3" /></svg>
|
||||
<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">
|
||||
<svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
|
||||
<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">
|
||||
<svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>
|
||||
<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">
|
||||
<svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" /></svg>
|
||||
<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">
|
||||
<svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" /></svg>
|
||||
<span class="svg-icon svg-icon-download" aria-hidden="true"></span>
|
||||
<span data-context-label>Download</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user