312 lines
16 KiB
HTML
312 lines
16 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>
|
|
|
|
{% set contentStyles = json_loads(content.location) %}
|
|
|
|
<div class="form-group">
|
|
<label for="elem-text">Text Label</label>
|
|
<div class="widget">
|
|
<input type="text" id="elem-text" name="textLabel"
|
|
value="{{ contentStyles.textLabel }}">
|
|
</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="fontSize" maxlength="3"
|
|
class="numeric-input chars-3" value="{{ contentStyles.fontSize }}">
|
|
<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="color" class="color-picker"
|
|
data-jscolor="{ value: '#{{ contentStyles.color }}', 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">
|
|
{% set fonts = [
|
|
{"value": "Arial", "name": "Arial"},
|
|
{"value": "Arial Black", "name": "Arial Black"},
|
|
{"value": "Verdana", "name": "Verdana"},
|
|
{"value": "Trebuchet MS", "name": "Trebuchet MS"},
|
|
{"value": "Georgia", "name": "Georgia"},
|
|
{"value": "Times New Roman", "name": "Times New Roman"},
|
|
{"value": "Courier New", "name": "Courier New"},
|
|
{"value": "Comic Sans MS", "name": "Comic Sans MS"},
|
|
{"value": "Impact", "name": "Impact"},
|
|
{"value": "Tahoma", "name": "Tahoma"},
|
|
{"value": "Gill Sans", "name": "Gill Sans"},
|
|
{"value": "Helvetica", "name": "Helvetica"},
|
|
{"value": "Optima", "name": "Optima"},
|
|
{"value": "Garamond", "name": "Garamond"},
|
|
{"value": "Baskerville", "name": "Baskerville"},
|
|
{"value": "Copperplate", "name": "Copperplate"},
|
|
{"value": "Futura", "name": "Futura"},
|
|
{"value": "Monaco", "name": "Monaco"},
|
|
{"value": "Andale Mono", "name": "Andale Mono"}
|
|
] %}
|
|
<select name="fontFamily" id="elem-font-family" class="size-m">
|
|
{% for font in fonts %}
|
|
<option value="{{ font.value }}" {% if font.value == contentStyles.fontFamily %}selected="selected"{% endif %}>
|
|
{{ font.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</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="fontBold" value="bold" {{ 'checked' if contentStyles.fontBold }}>
|
|
<label for="elem-font-bold" class="btn btn-neutral">
|
|
<i class="fa fa-bold"></i>
|
|
</label>
|
|
<input type="checkbox" id="elem-font-italic" name="fontItalic" value="italic" {{ 'checked' if contentStyles.fontItalic }}>
|
|
<label for="elem-font-italic" class="btn btn-neutral">
|
|
<i class="fa fa-italic"></i>
|
|
</label>
|
|
<input type="checkbox" id="elem-text-underline" name="textUnderline" value="underline" {{ 'checked' if contentStyles.textUnderline }}>
|
|
<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="textAlign" value="left" {{ 'checked' if contentStyles.textAlign == '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="textAlign" value="center" {{ 'checked' if contentStyles.textAlign == 'center' }}>
|
|
<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="textAlign" value="right" {{ 'checked' if contentStyles.textAlign == '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="backgroundColor" class="color-picker"
|
|
data-jscolor="{ value: '#{{ contentStyles.backgroundColor }}', backgroundColor: '#333333', shadowColor: '#000000', width: 120, height: 120 }"/>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="divide">
|
|
Scrolling Effect
|
|
</h3>
|
|
|
|
<div class="horizontal">
|
|
<div class="form-group">
|
|
<label for="elem-scroll-enable">Enable</label>
|
|
<div class="widget">
|
|
<div class="toggle">
|
|
<input type="checkbox" name="scrollEnable" id="elem-scroll-enable" {{ 'checked' if contentStyles.scrollEnable }} />
|
|
<label for="elem-scroll-enable"></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="elem-scroll-direction">Direction</label>
|
|
<div class="widget">
|
|
<div class="radio-group">
|
|
<input type="radio" id="elem-scroll-direction-left" name="scrollDirection" value="left" {{ 'checked' if contentStyles.scrollDirection == 'left' }}>
|
|
<label for="elem-scroll-direction-left" class="btn btn-neutral">
|
|
<i class="fa fa-arrow-left"></i>
|
|
</label>
|
|
<input type="radio" id="elem-scroll-direction-right" name="scrollDirection" value="right" {{ 'checked' if contentStyles.scrollDirection == 'right' }}>
|
|
<label for="elem-scroll-direction-right" class="btn btn-neutral">
|
|
<i class="fa fa-arrow-right"></i>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="elem-scroll-speed">Speed</label>
|
|
<div class="widget widget-unit">
|
|
<input type="text" id="elem-scroll-speed" name="scrollSpeed" maxlength="3" class="numeric-input chars-3" value="{{ contentStyles.scrollSpeed }}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<h3 class="divide">
|
|
Layout
|
|
</h3>
|
|
|
|
<div class="horizontal">
|
|
<div class="form-group">
|
|
<label for="elem-single-line">Single Line Only</label>
|
|
<div class="widget">
|
|
<div class="toggle">
|
|
<input type="checkbox" name="singleLine" id="elem-single-line" {{ 'checked' if contentStyles.singleLine }} />
|
|
<label for="elem-single-line"></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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="margin" maxlength="3" class="numeric-input chars-3" value="{{ contentStyles.margin }}">
|
|
<span>pt</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% endblock %}
|