146 lines
6.0 KiB
HTML
146 lines
6.0 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 %}
|
|
<link rel="stylesheet" href="{{ STATIC_PREFIX }}css/lib/flatpickr.min.css"/>
|
|
<link rel="stylesheet" href="{{ STATIC_PREFIX }}css/lib/jquery-explr-1.4.css"/>
|
|
{{ HOOK(H_SLIDESHOW_CONTENT_CSS) }}
|
|
{% endblock %}
|
|
|
|
{% block add_js %}
|
|
<script src="{{ STATIC_PREFIX }}js/lib/jquery-explr-1.4.js"></script>
|
|
<script src="{{ STATIC_PREFIX }}js/slideshow/contents.js"></script>
|
|
<script src="{{ STATIC_PREFIX }}js/lib/jquery-ui.min.js"></script>
|
|
{# <script src="{{ STATIC_PREFIX }} js/lib/jquery-ui-rotatable.min.js"></script> #}
|
|
<script src="{{ STATIC_PREFIX }}js/slideshow/content-composition.js"></script>
|
|
{{ HOOK(H_SLIDESHOW_CONTENT_JAVASCRIPT) }}
|
|
{% endblock %}
|
|
|
|
{% block body_class %}view-content-edit view-content-edit-composition edit-page{% endblock %}
|
|
|
|
{% block 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>
|
|
</div>
|
|
|
|
{% if request.args.get('saved') %}
|
|
<div class="alert alert-success alert-timeout">
|
|
<i class="fa fa-check icon-left"></i>
|
|
{{ l.common_saved }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<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>
|
|
|
|
<div class="elements-holder">
|
|
<h3 class="divide">Elements</h3>
|
|
<div class="form-elements-list" id="elementList">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<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">
|
|
<div class="toolbar">
|
|
<button id="presetGrid2x2">Grid 2x2</button>
|
|
<button id="addElement">Add Element</button>
|
|
<button id="removeAllElements">Remove All Elements</button>
|
|
</div>
|
|
|
|
<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>Element Properties</h3>
|
|
<label for="elem-x">X:</label>
|
|
<input type="number" id="elem-x" name="elem-x"><br>
|
|
<label for="elem-y">Y:</label>
|
|
<input type="number" id="elem-y" name="elem-y"><br>
|
|
<label for="elem-width">Width:</label>
|
|
<input type="number" id="elem-width" name="elem-width"><br>
|
|
<label for="elem-height">Height:</label>
|
|
<input type="number" id="elem-height" name="elem-height"><br>
|
|
<!--<label for="elem-rotate">Rotate (deg):</label>-->
|
|
<!--<input type="number" id="elem-rotate" name="elem-rotate"><br>-->
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% endblock %}
|