101 lines
4.4 KiB
Handlebars
101 lines
4.4 KiB
Handlebars
<div class="page-header">
|
|
<div>
|
|
<h2>Fonts</h2>
|
|
<p>Upload shared font files for the editor and player.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{#if stylesheetHref}}
|
|
<link rel="stylesheet" href="{{stylesheetHref}}" />
|
|
{{/if}}
|
|
|
|
<div class="card card-outline card-primary mb-4">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Upload font</h3>
|
|
</div>
|
|
<style>
|
|
.font-upload-form .invalid-feedback {
|
|
display: none !important;
|
|
}
|
|
</style>
|
|
<form method="post" action="/settings/fonts" enctype="multipart/form-data" class="font-upload-form">
|
|
<div class="card-body">
|
|
<div class="row g-3 align-items-end">
|
|
<div class="col-12 col-lg-5">
|
|
<input id="font-family" name="font_family" class="form-control" maxlength="128" data-limit-text-length placeholder="Acme Sans" required />
|
|
</div>
|
|
<div class="col-12 col-lg-5">
|
|
<input id="font-file" name="font_file" type="file" class="form-control" accept=".woff2,.woff,.ttf,.otf" aria-label="Font file" required />
|
|
</div>
|
|
<div class="col-12 col-lg-2 d-grid">
|
|
<button type="submit" class="btn btn-primary">Upload font</button>
|
|
</div>
|
|
</div>
|
|
<div class="text-muted small mt-3">Accepted formats: WOFF2, WOFF, TTF, and OTF.</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="card card-outline card-primary" data-table-search-container data-table-pagination-card>
|
|
<div class="card-header">
|
|
<h3 class="card-title">Managed fonts</h3>
|
|
<div class="card-tools d-flex flex-nowrap align-items-center gap-2">
|
|
<div class="input-group input-group-sm flex-shrink-1 table-search-group" style="width: min(14rem, 100%);">
|
|
<span class="input-group-text" role="button" tabindex="0" aria-label="Search" data-table-search-toggle><i class="bi bi-search"></i></span>
|
|
<input type="search" class="form-control" placeholder="Search fonts" aria-label="Search fonts" data-table-search />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body table-responsive p-0">
|
|
<table class="table table-striped align-middle mb-0" data-table-searchable>
|
|
<thead>
|
|
<tr>
|
|
<th data-table-sort-key="family">Family</th>
|
|
<th>Preview</th>
|
|
<th data-table-sort-key="file">File</th>
|
|
<th data-table-sort-key="format">Format</th>
|
|
<th data-table-sort-key="status">Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{#if fonts.length}}
|
|
{{#each fonts}}
|
|
<tr data-table-search-row data-font-toggle-row data-font-enabled="{{#if enabled}}true{{else}}false{{/if}}">
|
|
<td data-label="Family" class="fw-semibold">{{family}}</td>
|
|
<td data-label="Preview" style="font-family: '{{family}}'; font-size: 1.25rem;">Aa Bb Cc 123</td>
|
|
<td data-label="File" class="text-break">{{fileName}}</td>
|
|
<td data-label="Format">{{format}}</td>
|
|
<td data-label="Status">
|
|
{{#if enabled}}
|
|
<span class="badge text-bg-success" data-font-status-badge>Enabled</span>
|
|
{{else}}
|
|
<span class="badge text-bg-secondary" data-font-status-badge>Disabled</span>
|
|
{{/if}}
|
|
</td>
|
|
<td data-label="Actions" class="text-nowrap">
|
|
<form method="post" action="/settings/fonts/{{id}}/toggle" class="d-inline" data-async-command>
|
|
<input type="hidden" name="enabled" value="{{#if enabled}}0{{else}}1{{/if}}" />
|
|
<button type="submit" class="btn btn-secondary btn-sm">{{#if enabled}}Disable{{else}}Enable{{/if}}</button>
|
|
</form>
|
|
<form method="post" action="/settings/fonts/{{id}}/delete" class="d-inline ms-1" data-confirm-message="Delete this font?">
|
|
<input type="hidden" name="family" value="{{family}}" />
|
|
{{#if inUse}}
|
|
<button type="submit" class="btn btn-outline-danger btn-sm" disabled>Delete</button>
|
|
{{else}}
|
|
<button type="submit" class="btn btn-danger btn-sm">Delete</button>
|
|
{{/if}}
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
{{/each}}
|
|
{{else}}
|
|
<tr data-table-search-empty-default>
|
|
<td colspan="6" class="empty">No managed fonts yet.</td>
|
|
</tr>
|
|
{{/if}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{{> table-pagination pagination=pagination basePath="/settings/fonts" alwaysShow=true}}
|
|
</div> |