Add template animation editor
This commit is contained in:
@@ -11,6 +11,7 @@
|
||||
<link rel="stylesheet" href="/assets/adminlte/bootstrap-icons/css/bootstrap-icons.min.css" />
|
||||
<link rel="stylesheet" href="/assets/adminlte/css/adminlte.min.css" />
|
||||
<link rel="stylesheet" href="/assets/css/theme-custom.css?v={{appVersion}}" />
|
||||
<link rel="stylesheet" href="/assets/vendor/animate.css/animate.min.css?v={{appVersion}}" />
|
||||
{{#if stylesheets.length}}
|
||||
{{#each stylesheets}}
|
||||
<link rel="stylesheet" href="{{assetHref this}}" />
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
{{#> modal-shell modalId="animation-advanced-modal" modalLabelId="animation-advanced-modal-label" modalDialogClass="modal-dialog-centered modal-xl modal-dialog-scrollable" modalBackdropStatic=true modalKeyboardDisabled=true}}
|
||||
<div class="modal-header">
|
||||
<div>
|
||||
<h2 class="modal-title fs-5" id="animation-advanced-modal-label" data-animation-modal-title>Advanced animation settings</h2>
|
||||
<p class="text-body-secondary mb-0">Fine-tune the selected region animation JSON without editing raw data.</p>
|
||||
</div>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body d-grid gap-4">
|
||||
<div class="alert alert-secondary mb-0">Changes here are saved into the region animation JSON and stay in sync with the preset dropdowns.</div>
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-lg-4">
|
||||
<div class="card border-secondary-subtle">
|
||||
<div class="card-header bg-transparent">
|
||||
<strong class="text-capitalize">Intro</strong>
|
||||
</div>
|
||||
<div class="card-body d-grid gap-3 align-content-start">
|
||||
<label class="d-grid gap-1">
|
||||
Preset
|
||||
<select class="form-select" data-animation-modal-step="intro" data-animation-modal-field="preset">
|
||||
{{#each animationPresets.advanced.intro}}
|
||||
<option value="{{value}}">{{label}}</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
</label>
|
||||
<label class="d-grid gap-1">
|
||||
Duration ms
|
||||
<input class="form-control" type="number" min="0" step="1" data-animation-modal-step="intro" data-animation-modal-field="duration_ms" placeholder="1000" />
|
||||
</label>
|
||||
<label class="d-grid gap-1">
|
||||
Delay ms
|
||||
<input class="form-control" type="number" min="0" step="1" data-animation-modal-step="intro" data-animation-modal-field="delay_ms" placeholder="0" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-4">
|
||||
<div class="card border-secondary-subtle">
|
||||
<div class="card-header bg-transparent">
|
||||
<strong class="text-capitalize">Outro</strong>
|
||||
</div>
|
||||
<div class="card-body d-grid gap-3 align-content-start">
|
||||
<label class="d-grid gap-1">
|
||||
Preset
|
||||
<select class="form-select" data-animation-modal-step="outro" data-animation-modal-field="preset">
|
||||
{{#each animationPresets.advanced.outro}}
|
||||
<option value="{{value}}">{{label}}</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
</label>
|
||||
<label class="d-grid gap-1">
|
||||
Duration ms
|
||||
<input class="form-control" type="number" min="0" step="1" data-animation-modal-step="outro" data-animation-modal-field="duration_ms" placeholder="1000" />
|
||||
</label>
|
||||
<label class="d-grid gap-1">
|
||||
Delay ms
|
||||
<input class="form-control" type="number" min="0" step="1" data-animation-modal-step="outro" data-animation-modal-field="delay_ms" placeholder="0" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-4">
|
||||
<div class="card border-secondary-subtle">
|
||||
<div class="card-header bg-transparent">
|
||||
<strong class="text-capitalize">Attention seekers</strong>
|
||||
</div>
|
||||
<div class="card-body d-grid gap-3 align-content-start">
|
||||
<label class="d-grid gap-1">
|
||||
Preset
|
||||
<select class="form-select" data-animation-modal-step="loop" data-animation-modal-field="preset">
|
||||
{{#each animationPresets.advanced.attentionSeekers}}
|
||||
<option value="{{value}}">{{label}}</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
</label>
|
||||
<label class="d-grid gap-1">
|
||||
Duration ms
|
||||
<input class="form-control" type="number" min="0" step="1" data-animation-modal-step="loop" data-animation-modal-field="duration_ms" placeholder="1000" />
|
||||
</label>
|
||||
<label class="d-grid gap-1">
|
||||
Delay ms
|
||||
<input class="form-control" type="number" min="0" step="1" data-animation-modal-step="loop" data-animation-modal-field="delay_ms" placeholder="0" />
|
||||
</label>
|
||||
<label class="d-grid gap-1">
|
||||
Repeat
|
||||
<input class="form-control" type="number" min="1" step="1" data-animation-modal-step="loop" data-animation-modal-field="iterations" placeholder="1" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer justify-content-between">
|
||||
<button type="button" class="btn btn-outline-secondary" data-animation-modal-reset>Reset to defaults</button>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" data-animation-modal-apply>Apply changes</button>
|
||||
</div>
|
||||
</div>
|
||||
{{/modal-shell}}
|
||||
@@ -31,10 +31,17 @@
|
||||
</div>
|
||||
<div class="template-designer-sidebar">
|
||||
<div class="card card-outline card-primary admin-form-card">
|
||||
<div class="card-body d-grid">
|
||||
<div class="card-body d-grid gap-3 pb-0">
|
||||
<div class="btn-group" role="group" aria-label="Template actions">
|
||||
{{{saveActionButtons formId="template-form" saveUrl=formAction cancelUrl=cancelUrl deleteUrl=deleteUrl deleteDisabled=deleteDisabled showSaveAndClose=showSaveSecondaryActions showSaveAndNew=showSaveSecondaryActions}}}
|
||||
</div>
|
||||
<div class="d-grid gap-2 template-preview-card" id="template-preview-card" hidden>
|
||||
<div class="btn-group flex-wrap gap-0" role="group" aria-label="Template animation preview controls">
|
||||
<button type="button" class="btn btn-outline-secondary" id="template-preview-intro" data-preview-control data-preview-action="intro" aria-pressed="false">Intro</button>
|
||||
<button type="button" class="btn btn-outline-secondary" id="template-preview-out" data-preview-control data-preview-action="out" aria-pressed="false">Outro</button>
|
||||
<button type="button" class="btn btn-outline-secondary" id="template-preview-continuous" data-preview-control data-preview-action="continuous" aria-pressed="false">Attention</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-outline card-secondary admin-form-card region-info-card mb-3">
|
||||
@@ -148,10 +155,57 @@
|
||||
<label>Width<input class="form-control" type="number" name="region_width[]" value="300" required /></label>
|
||||
<label>Height<input class="form-control" type="number" name="region_height[]" value="120" required /></label>
|
||||
<label>Lock ratio<input class="form-control" type="text" name="region_lock_ratio[]" value="" placeholder="16:9 or 5:4" /></label>
|
||||
<label>Remove<button type="button" class="btn btn-sm btn-outline-danger w-100" data-region-remove-button{{#if isEdit}} disabled{{/if}}>Remove</button></label>
|
||||
<label>Remove<button type="button" class="btn btn-outline-danger w-100" data-region-remove-button{{#if isEdit}} disabled{{/if}}>Remove</button></label>
|
||||
</div>
|
||||
<div class="region-field-grid region-field-grid--animation">
|
||||
<div class="d-grid gap-1">
|
||||
<label>
|
||||
Intro
|
||||
<select class="form-select" data-animation-preset="intro">
|
||||
{{#each animationPresets.basic.intro}}
|
||||
<option value="{{value}}">{{label}}</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
</label>
|
||||
<button type="button" class="btn btn-outline-secondary w-100" data-animation-reset-button="intro" hidden>Reset to basic</button>
|
||||
</div>
|
||||
<div class="d-grid gap-1">
|
||||
<label>
|
||||
Outro
|
||||
<select class="form-select" data-animation-preset="outro">
|
||||
{{#each animationPresets.basic.outro}}
|
||||
<option value="{{value}}">{{label}}</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
</label>
|
||||
<button type="button" class="btn btn-outline-secondary w-100" data-animation-reset-button="outro" hidden>Reset to basic</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="region-field-grid region-field-grid--animation">
|
||||
<div class="d-grid gap-1">
|
||||
<label>
|
||||
Attention seekers
|
||||
<select class="form-select" data-animation-preset="loop">
|
||||
{{#each animationPresets.basic.attentionSeekers}}
|
||||
<option value="{{value}}">{{label}}</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
</label>
|
||||
<button type="button" class="btn btn-outline-secondary w-100" data-animation-reset-button="loop" hidden>Reset to basic</button>
|
||||
</div>
|
||||
<div class="d-grid gap-1">
|
||||
<label>
|
||||
Advanced
|
||||
<button type="button" class="btn btn-outline-secondary w-100" data-animation-advanced-button>Advanced</button>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<textarea class="visually-hidden" name="region_animation_json[]" data-animation-json-input rows="1"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
{{> signage/templates/animation-advanced-modal}}
|
||||
|
||||
<textarea id="template-editor-data" hidden>{{json template.regions}}</textarea>
|
||||
Reference in New Issue
Block a user