271 lines
13 KiB
HTML
271 lines
13 KiB
HTML
{% set active_pill_route='slideshow_content_list' %}
|
|
{% extends 'base.jinja.html' %}
|
|
|
|
{% block page_title %}
|
|
{{ l.slideshow_content_page_title }}
|
|
{% endblock %}
|
|
|
|
{% block add_css %}
|
|
{{ HOOK(H_SLIDESHOW_CONTENT_CSS) }}
|
|
{% endblock %}
|
|
|
|
{% block add_js %}
|
|
<script src="{{ STATIC_PREFIX }}js/lib/jscolor.min.js"></script>
|
|
<script src="{{ STATIC_PREFIX }}js/slideshow/contents.js"></script>
|
|
<script src="{{ STATIC_PREFIX }}js/slideshow/content-text.js"></script>
|
|
{{ HOOK(H_SLIDESHOW_CONTENT_JAVASCRIPT) }}
|
|
{% endblock %}
|
|
|
|
{% block body_class %}view-content-edit view-content-edit-text edit-page{% endblock %}
|
|
|
|
{% block top_page %}
|
|
<div class="top-content">
|
|
<h1>
|
|
{{ l.slideshow_content_form_edit_title }}
|
|
</h1>
|
|
|
|
{% set icon = enum_content_type.get_fa_icon(content.type) %}
|
|
{% set color = enum_content_type.get_color_icon(content.type) %}
|
|
|
|
<h3>
|
|
<span class="{{ color }} border-{{ color }}">
|
|
<i class="fa {{ icon }} {{ color }}"></i> {{ t(content.type) }}
|
|
</span>
|
|
</h3>
|
|
|
|
<a href="{{ url_for('player', preview_content_id=content.id) }}" target="_blank" class="btn btn-naked">
|
|
<i class="fa fa-external-link"></i>
|
|
</a>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block main_page %}
|
|
<div class="bottom-content">
|
|
<div class="page-panel left-panel">
|
|
<div class="inner dirview">
|
|
<div class="breadcrumb-container">
|
|
<ul class="breadcrumb">
|
|
{% set ns = namespace(breadpath='') %}
|
|
{% for dir in working_folder_path[1:].split('/') %}
|
|
{% set ns.breadpath = ns.breadpath ~ '/' ~ dir %}
|
|
<li>
|
|
<a href="{{ url_for('slideshow_content_cd', path=ns.breadpath) }}">
|
|
<i class="explr-icon explr-icon-folder"></i>
|
|
{{ truncate(dir, 25, '...') }}
|
|
</a>
|
|
</li>
|
|
{% if not loop.last %}
|
|
<li class="divider">
|
|
<i class="fa fa-chevron-right"></i>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="horizontal">
|
|
<div class="form-holder">
|
|
<form class="form"
|
|
action="{{ url_for('slideshow_content_save', content_id=content.id) }}?path={{ working_folder_path }}"
|
|
method="POST">
|
|
<div class="form-group">
|
|
<label for="content-edit-name">{{ l.slideshow_content_form_label_name }}</label>
|
|
<div class="widget">
|
|
<input type="text" name="name" id="content-edit-name" required="required"
|
|
value="{{ content.name }}"/>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="hidden" name="location" id="content-edit-location"
|
|
value="{{ content.location }}"/>
|
|
|
|
<div class="actions actions-right">
|
|
<button type="submit" class="btn btn-info">
|
|
<i class="fa fa-save icon-left"></i>
|
|
{{ l.common_save }}
|
|
</button>
|
|
<a href="{{ url_for('slideshow_content_list') }}" class="btn btn-naked">
|
|
<i class="fa fa-rectangle-xmark icon-left"></i>
|
|
{{ l.common_cancel }}
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="page-content">
|
|
<div class="inner">
|
|
<h3 class="main">
|
|
{{ l.composition_monitor }}
|
|
</h3>
|
|
<div class="screen-holder">
|
|
<div class="screen" id="screen">
|
|
<!-- Elements will be dynamically added here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="page-panel right-panel">
|
|
<div class="form-element-properties">
|
|
<form id="elementForm">
|
|
<h3>
|
|
Text
|
|
</h3>
|
|
|
|
<div class="form-group">
|
|
<label for="elem-text">Text Label</label>
|
|
<div class="widget">
|
|
<input type="text" id="elem-text" name="elem-text"
|
|
value="Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !Hello World !222">
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="divide">
|
|
Style
|
|
</h3>
|
|
|
|
<div class="horizontal">
|
|
|
|
<div class="form-group">
|
|
<label for="elem-font-size">Font Size</label>
|
|
<div class="widget widget-unit">
|
|
<input type="text" id="elem-font-size" name="elem-font-size" maxlength="3"
|
|
class="numeric-input chars-3" value="20">
|
|
<span>pt</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="elem-fg-color">Text Color</label>
|
|
<div class="widget">
|
|
<input type="text" id="elem-fg-color" name="elem-fg-color" class="color-picker"
|
|
data-jscolor="{ value: '#FFFFFFFF', backgroundColor: '#333333', shadowColor: '#000000', width: 120, height: 120 }"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="elem-font-family">Text Font Type</label>
|
|
<div class="widget">
|
|
<select name="elem-font-family" id="elem-font-family" class="size-m">
|
|
<option value="Arial">Arial</option>
|
|
<option value="Arial Black">Arial Black</option>
|
|
<option value="Verdana">Verdana</option>
|
|
<option value="Trebuchet MS">Trebuchet MS</option>
|
|
<option value="Georgia">Georgia</option>
|
|
<option value="Times New Roman">Times New Roman</option>
|
|
<option value="Courier New">Courier New</option>
|
|
<option value="Comic Sans MS">Comic Sans MS</option>
|
|
<option value="Impact">Impact</option>
|
|
<option value="Tahoma">Tahoma</option>
|
|
<option value="Gill Sans">Gill Sans</option>
|
|
<option value="Helvetica">Helvetica</option>
|
|
<option value="Optima">Optima</option>
|
|
<option value="Garamond">Garamond</option>
|
|
<option value="Baskerville">Baskerville</option>
|
|
<option value="Copperplate">Copperplate</option>
|
|
<option value="Futura">Futura</option>
|
|
<option value="Monaco">Monaco</option>
|
|
<option value="Andale Mono">Andale Mono</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="horizontal">
|
|
<div class="form-group">
|
|
<label for="elem-fg-color">Text Style</label>
|
|
<div class="widget">
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="elem-font-bold" name="elem-font-bold" value="bold">
|
|
<label for="elem-font-bold" class="btn btn-neutral">
|
|
<i class="fa fa-bold"></i>
|
|
</label>
|
|
<input type="checkbox" id="elem-font-italic" name="elem-font-italic" value="italic">
|
|
<label for="elem-font-italic" class="btn btn-neutral">
|
|
<i class="fa fa-italic"></i>
|
|
</label>
|
|
<input type="checkbox" id="elem-text-underline" name="elem-text-underline"
|
|
value="underline">
|
|
<label for="elem-text-underline" class="btn btn-neutral">
|
|
<i class="fa fa-underline"></i>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="elem-fg-color">Text Alignment</label>
|
|
<div class="widget">
|
|
<div class="radio-group">
|
|
<input type="radio" id="elem-text-align-left" name="elem-text-align" value="left">
|
|
<label for="elem-text-align-left" class="btn btn-neutral">
|
|
<i class="fa fa-align-left"></i>
|
|
</label>
|
|
<input type="radio" id="elem-text-align-center" name="elem-text-align"
|
|
value="center"
|
|
checked="checked">
|
|
<label for="elem-text-align-center" class="btn btn-neutral">
|
|
<i class="fa fa-align-center"></i>
|
|
</label>
|
|
<input type="radio" id="elem-text-align-right" name="elem-text-align" value="right">
|
|
<label for="elem-text-align-right" class="btn btn-neutral">
|
|
<i class="fa fa-align-right"></i>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="divide">
|
|
Background
|
|
</h3>
|
|
|
|
|
|
<div class="form-group">
|
|
<label for="elem-bg-color">Background Color</label>
|
|
<div class="widget">
|
|
<input type="text" id="elem-bg-color" name="elem-bg-color" class="color-picker"
|
|
data-jscolor="{ value: '#000000FF', backgroundColor: '#333333', shadowColor: '#000000', width: 120, height: 120 }"/>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="divide">
|
|
Layout
|
|
</h3>
|
|
|
|
<div class="horizontal">
|
|
<div class="form-group">
|
|
<label for="elem-container-margin">Container Margin</label>
|
|
<div class="widget widget-unit">
|
|
<input type="text" id="elem-container-margin" name="elem-container-margin" maxlength="3"
|
|
class="numeric-input chars-3" value="0">
|
|
<span>pt</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="elem-single-line">Single Line Only</label>
|
|
<div class="widget">
|
|
<div class="toggle">
|
|
<input type="checkbox" name="elem-single-line" id="elem-single-line" value="1"/>
|
|
<label for="elem-single-line"></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% endblock %}
|