kalipso/racalmas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesign image editor

Browse Source 
- remove zoom
- separate setting public/private from edit form
- prevent assigning image without it has been published
- prevent publishing image without licence
- show buttons depending on license state
- reload view on state change
- gray out not-selected images
This commit is contained in:
Milan
2019-10-05 14:21:33 +02:00
parent f0be286f47
commit edb2aa29d7
8 changed files with 204 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
website/agenda/planung/templates/edit_image.html
View File

@@ -9,9 +9,25 @@ found no image
<TMPL_LOOP images>
<TMPL_IF filename>
<div id="imageEditor" class="editor">
<button onclick="assignImage('<TMPL_VAR filename escape=none>', '<TMPL_VAR .target>', '<TMPL_VAR .project_id>', '<TMPL_VAR .studio_id>', '<TMPL_VAR .series_id>', '<TMPL_VAR .event_id>', '<TMPL_VAR .pid>'); return false"><TMPL_VAR .loc.select_image></button/>
<TMPL_IF public>
<button onclick="assignImage('<TMPL_VAR filename escape=none>', '<TMPL_VAR .target>', '<TMPL_VAR .project_id>', '<TMPL_VAR .studio_id>', '<TMPL_VAR .series_id>', '<TMPL_VAR .event_id>', '<TMPL_VAR .pid>'); return false">
<TMPL_VAR .label_assign_to_by_label>
</button>
<button onclick="depublishImage('<TMPL_VAR id>', '<TMPL_VAR filename escape=none>'); return false;"><TMPL_VAR .loc.button_depublish></button>
<TMPL_ELSE>
<div class="warn"><TMPL_VAR .label_warn_not_public_by_label></div>
<TMPL_IF missing_licence>
<div class="warn"><TMPL_VAR .loc.label_warn_unknown_licence></div>
<TMPL_ELSE>
<button onclick="publishImage('<TMPL_VAR id>', '<TMPL_VAR filename escape=none>'); return false;"><TMPL_VAR .loc.button_publish></button>
</TMPL_IF>
</TMPL_IF>
<div class="panel-body">
<div id="status"></div>
<form id="save_img_<TMPL_VAR id>"
method="post"
@@ -21,18 +37,16 @@ found no image
<input type="hidden" name="project_id" value="<TMPL_VAR .project_id>">
<input type="hidden" name="studio_id" value="<TMPL_VAR .studio_id>">
<input type="hidden" class="public" name="public" <TMPL_IF public>checked="checked" value="1"<TMPL_ELSE>value="0"</TMPL_IF> /><br>
<label><TMPL_VAR .loc.label_name></label><br>
<input value="<TMPL_VAR name escape=none>" name="update_name" class="field" placeholder="<TMPL_VAR .loc.label_name>"><br>
<label><TMPL_VAR .loc.label_description></label><br>
<textarea class="field" name="update_description" cols="50" rows=5 placeholder="<TMPL_VAR .loc.label_description>"><TMPL_VAR description escape=none></textarea><br>
<input value="<TMPL_VAR name escape=none>" name="update_name" class="field" placeholder="<TMPL_VAR .loc.label_mandatory_field>"><br>
<label><TMPL_VAR .loc.label_author>/<TMPL_VAR .loc.label_licence></label><br>
<input name="licence" value="<TMPL_VAR licence>" class="field<TMPL_IF missing_licence> error</TMPL_IF>" placeholder="<TMPL_VAR .loc.label_licence_missing>"/><br>
<input name="licence" value="<TMPL_VAR licence>" class="field<TMPL_IF missing_licence> error</TMPL_IF>" placeholder="<TMPL_VAR .loc.label_mandatory_field>" required/><br>
<label><TMPL_VAR .loc.label_public></label>
<input type="checkbox" name="public" <TMPL_IF public>checked="checked" value="1"<TMPL_ELSE>value="0"</TMPL_IF> /><br>
<label><TMPL_VAR .loc.label_description></label><br>
<textarea class="field" name="update_description" cols="50" rows="5" ><TMPL_VAR description escape=none></textarea><br>
<TMPL_IF name="update_image">
<input type="hidden" name="save_image" value="<TMPL_VAR filename escape=none>" />
@@ -43,10 +57,12 @@ found no image
<button onclick="askDeleteImage('img_<TMPL_VAR id escape=none>','<TMPL_VAR filename escape=none>');return false;"><TMPL_VAR .loc.button_delete></button>
</TMPL_IF>
<div id="status" ></div>
<TMPL_VAR .loc.label_created_at> <TMPL_VAR created_at> <TMPL_VAR .loc.label_created_by> <TMPL_VAR created_by><br>
<TMPL_VAR .loc.label_modified_at> <TMPL_VAR modified_at> <TMPL_VAR .loc.label_modified_by> <TMPL_VAR modified_by><br>
<TMPL_VAR .loc.label_link>: {{<TMPL_VAR filename escape=none>|<TMPL_VAR name>}}<br>
<button onclick='$("#save_img_<TMPL_VAR id> #properties").show();return false;'><TMPL_VAR .loc.button_properties></button>
<div id="properties" style="display:none">
<TMPL_VAR .loc.label_created_at> <TMPL_VAR created_at> <TMPL_VAR .loc.label_created_by> <TMPL_VAR created_by><br>
<TMPL_VAR .loc.label_modified_at> <TMPL_VAR modified_at> <TMPL_VAR .loc.label_modified_by> <TMPL_VAR modified_by><br>
<TMPL_VAR .loc.label_link>: {{<TMPL_VAR filename escape=none>|<TMPL_VAR name>}}<br>
</div>
</form>

28
website/agenda/planung/templates/image-upload.html
View File

@@ -37,29 +37,29 @@
</tr>
<tr>
<td>Name: </td>
<td><input value="<TMPL_VAR name escape=none>" name="name" size="40" maxlength="100" required> </td>
</tr>
<tr>
<td>Beschreibung: </td>
<td><textarea name="description" cols="50" rows=5><TMPL_VAR description escape=none></textarea></td>
<td><label><TMPL_VAR .loc.label_name></label></td>
<td><input value="<TMPL_VAR name escape=none>" name="name" size="40" maxlength="100" placeholder="<TMPL_VAR .loc.label_name_required>" required> </td>
</tr>
<tr>
<td><label><TMPL_VAR .loc.label_author>/<TMPL_VAR .loc.label_licence></label></td>
<td><input name="licence" value="<TMPL_VAR licence>" placeholder="<TMPL_VAR .loc.label_licence_missing>" required /></td>
</tr>
<tr>
<td><label><TMPL_VAR .loc.label_public></label></td>
<td><input type="checkbox" name="public" <TMPL_IF public>checked="checked" value="1"<TMPL_ELSE>value="0"</TMPL_IF> /></td>
<td><input name="licence" size="40" value="<TMPL_VAR licence>" placeholder="<TMPL_VAR .loc.label_licence_required>" required /></td>
</tr>
<tr>
<td>Datei</td>
<td><input type="file" name="image" accept="image/*" maxlength="2000000" size="10" required/> </td>
<td><label><TMPL_VAR .loc.label_file></label></td>
<td><input type="file" name="image" accept="image/*" maxlength="2000000" size="10" required /></td>
</tr>
<tr>
<td><label><TMPL_VAR .loc.label_description></label></td>
<td><textarea name="description" cols="50" rows=5><TMPL_VAR description escape=none ></textarea></td>
</tr>
<tr>
<td></td>
<td>
<button onclick="uploadImage();return false">Hochladen</button>
<button onclick="uploadImage();return false" ><TMPL_VAR .loc.button_upload></button>
</td>
</tr>
</table>

66
website/agenda/planung/templates/image.html
View File

@@ -1,5 +1,5 @@
<link type="text/css" href="css/image_manager.css" rel="stylesheet"/>
<link type="text/css" href="css/image.css" rel="stylesheet"/>
<script src="js/image.js" type="text/javascript"></script>
<script src="js/page_leave_handler.js" type="text/javascript"></script>
@@ -72,49 +72,43 @@
</div>
<div id="imageList">
<div style="float:right">
<button onclick="decreaseImageSize();return false;" title="<TMPL_VAR .loc.button_zoom_out>">-</button>
<button onclick="increaseImageSize();return false;" title="<TMPL_VAR .loc.button_zoom_in>">+</button>
</div>
<form id="image_manager" action="image.cgi">
<input name="search" value="<TMPL_VAR search escape=none>" style="width:20em;">
<input type="hidden" name="filename" value="<TMPL_VAR filename escape=none>">
<button onclick="searchImage('<TMPL_VAR target>', '<TMPL_VAR .project_id>', '<TMPL_VAR .studio_id>', '<TMPL_VAR .series_id>', '<TMPL_VAR .event_id>', '<TMPL_VAR .pid>'); return false;"><TMPL_VAR .loc.button_search></button>
</form>
<TMPL_VAR count> <TMPL_VAR .loc.label_search_hits><br />
<div style="clear:both;display: flex; flex-direction: row;">
<div class="images"
style="overflow-y:scroll"
target="<TMPL_VAR .target>"
projectId="<TMPL_VAR .project_id>"
studioId="<TMPL_VAR .studio_id>"
seriesId="<TMPL_VAR .series_id>"
eventId="<TMPL_VAR .event_id>"
pid="<TMPL_VAR .pid>"
>
<TMPL_LOOP images>
<div class="image"
id="img_<TMPL_VAR id>"
style="background-image:url('show-image.cgi?project_id=<TMPL_VAR project_id>&studio_id=<TMPL_VAR .studio_id>&type=icon&filename=<TMPL_VAR filename>')"
title="<TMPL_VAR description>"
filename="<TMPL_VAR filename>"
>
<div class="label"><TMPL_VAR name></div>
</div>
</TMPL_LOOP>
<div style="clear:both; display:flex; flex-direction:row;">
<div>
<form id="image_manager" action="image.cgi">
<input name="search" value="<TMPL_VAR search escape=none>" style="width:20em;">
<input type="hidden" name="filename" value="<TMPL_VAR filename escape=none>">
<button onclick="searchImage('<TMPL_VAR target>', '<TMPL_VAR .project_id>', '<TMPL_VAR .studio_id>', '<TMPL_VAR .series_id>', '<TMPL_VAR .event_id>', '<TMPL_VAR .pid>'); return false;"><TMPL_VAR .loc.button_search></button>
</form>
<TMPL_VAR count> <TMPL_VAR .loc.label_search_hits><br />
<div class="images"
style="overflow-y:scroll"
target="<TMPL_VAR .target>"
projectId="<TMPL_VAR .project_id>"
studioId="<TMPL_VAR .studio_id>"
seriesId="<TMPL_VAR .series_id>"
eventId="<TMPL_VAR .event_id>"
pid="<TMPL_VAR .pid>"
>
<TMPL_LOOP images>
<div class="image"
id="img_<TMPL_VAR id>"
style="background-image:url('show-image.cgi?project_id=<TMPL_VAR .project_id>&studio_id=<TMPL_VAR .studio_id>&type=icon&filename=<TMPL_VAR filename>')"
title="<TMPL_VAR description>"
filename="<TMPL_VAR filename>"
>
<div class="label"><TMPL_VAR name></div>
</div>
</TMPL_LOOP>
</div>
</div>
<div id="img_editor" >
</div>
</div>
</div>
</TMPL_IF>
</main>
</main>
</center>
</body>