voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Replace bespoke add_, create_child buttons with confirm buttons.

Browse source
This commit is contained in:
voussoir 2019-04-27 15:33:28 -07:00
parent ab4f240a30
commit 09e80f5dba
1 changed files with 46 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
frontends/etiquette_flask/templates/album.html
View file

@ -37,6 +37,18 @@ h2, h3
margin-right: auto; margin-right: auto;
} }
#right .confirm_holder_stage2
{
display: flex;
flex-direction: row;
}
#right .confirm_holder_stage2 span,
#right .confirm_holder_stage2 input
{
flex: 1;
min-width: 0;
}
.remove_child_button .remove_child_button
{ {
display: none; display: none;
@ -107,12 +119,16 @@ h2, h3
{% else %} {% else %}
<a href="?view=grid">Grid view</a> <a href="?view=grid">Grid view</a>
{% endif %} {% endif %}
<div> <button
<button id="create_child_prompt_button" class="green_button" onclick="open_create_child(event);">Create album</button> class="green_button button_with_confirm"
<input type="text" id="create_child_title_entry" class="hidden" placeholder="Album title"> data-is-input="1"
<button id="create_child_submit_button" class="green_button hidden" onclick="create_child_form(event);">Create</button> data-prompt="Album title"
<button id="create_child_cancel_button" class="gray_button hidden" onclick="cancel_create_child(event);">Cancel</button> data-confirm-class="green_button"
</div> data-cancel-class="gray_button"
data-onclick="create_child(event.target.input_source.value);"
>
Create child
</button>
</div> </div>
</div> </div>
</body> </body>
@ -165,18 +181,27 @@ ALBUM_ID = undefined;
Delete Delete
</button> </button>
<div> <button
<button id="create_child_prompt_button" class="green_button" onclick="open_create_child(event);">Create child</button> class="green_button button_with_confirm"
<input type="text" id="create_child_title_entry" class="hidden" placeholder="Album title"> data-is-input="1"
<button id="create_child_submit_button" class="green_button hidden" onclick="create_child_form(event);">Create</button> data-prompt="Album title"
<button id="create_child_cancel_button" class="gray_button hidden" onclick="cancel_create_child(event);">Cancel</button> data-confirm-class="green_button"
</div> data-cancel-class="gray_button"
<div> data-onclick="create_child(event.target.input_source.value);"
<button id="add_child_prompt_button" class="green_button" onclick="open_add_child(event);">Add child</button> >
<input type="text" id="add_child_id_entry" class="hidden" placeholder="Album ID"> Create child
<button id="add_child_submit_button" class="green_button hidden" onclick="add_child_form(event);">Add</button> </button>
<button id="add_child_cancel_button" class="gray_button hidden" onclick="cancel_add_child(event);">Cancel</button>
</div> <button
class="green_button button_with_confirm"
data-is-input="1"
data-prompt="Child ID"
data-confirm-class="green_button"
data-cancel-class="gray_button"
data-onclick="add_child(event.target.input_source.value);"
>
Add child
</button>
</div> </div>
<div id="left"> <div id="left">
@ -265,28 +290,9 @@ ALBUM_ID = undefined;
<script id="album_individual_script" type="text/javascript"> <script id="album_individual_script" type="text/javascript">
var ALBUM_ID = "{{album.id}}"; var ALBUM_ID = "{{album.id}}";
function open_add_child(event) function add_child(child_id)
{ {
document.getElementById("add_child_prompt_button").classList.add("hidden"); if (! child_id.trim())
document.getElementById("add_child_id_entry").classList.remove("hidden");
document.getElementById("add_child_id_entry").focus();
document.getElementById("add_child_submit_button").classList.remove("hidden");
document.getElementById("add_child_cancel_button").classList.remove("hidden");
}
function cancel_add_child(event)
{
document.getElementById("add_child_prompt_button").classList.remove("hidden");
document.getElementById("add_child_id_entry").value = "";
document.getElementById("add_child_id_entry").classList.add("hidden");
document.getElementById("add_child_submit_button").classList.add("hidden");
document.getElementById("add_child_cancel_button").classList.add("hidden");
}
function add_child_form(event)
{
var child_id = document.getElementById("add_child_id_entry").value;
if (! child_id)
{ {
return; return;
} }
@ -353,42 +359,14 @@ function on_cancel(ed, edit_element_map, display_element_map)
var title_text = document.getElementById("title_text"); var title_text = document.getElementById("title_text");
var description_text = document.getElementById("description_text"); var description_text = document.getElementById("description_text");
var ed = new editor.Editor([title_text, description_text], on_open, on_save, on_cancel); var ed = new editor.Editor([title_text, description_text], on_open, on_save, on_cancel);
function on_pageload()
{
common.bind_box_to_button(
document.getElementById("add_child_id_entry"),
document.getElementById("add_child_submit_button")
);
}
document.addEventListener("DOMContentLoaded", on_pageload);
</script> </script>
{% endif %} {## Shared ############################################################################} {% endif %} {## Shared ############################################################################}
<script id="album_shared_script" type="text/javascript"> <script id="album_shared_script" type="text/javascript">
function open_create_child(event) function create_child(title)
{ {
document.getElementById("create_child_prompt_button").classList.add("hidden");
document.getElementById("create_child_title_entry").classList.remove("hidden");
document.getElementById("create_child_title_entry").focus();
document.getElementById("create_child_submit_button").classList.remove("hidden");
document.getElementById("create_child_cancel_button").classList.remove("hidden");
}
function cancel_create_child(event)
{
document.getElementById("create_child_prompt_button").classList.remove("hidden");
document.getElementById("create_child_title_entry").value = "";
document.getElementById("create_child_title_entry").classList.add("hidden");
document.getElementById("create_child_submit_button").classList.add("hidden");
document.getElementById("create_child_cancel_button").classList.add("hidden");
}
function create_child_form(event)
{
var title = document.getElementById("create_child_title_entry").value;
if (! title) if (! title)
{ {
title = undefined; title = undefined;
@ -396,14 +374,5 @@ function create_child_form(event)
var parent_id = ALBUM_ID; var parent_id = ALBUM_ID;
api.albums.create(title, parent_id, api.albums.callback_follow); api.albums.create(title, parent_id, api.albums.callback_follow);
} }
function on_pageload()
{
common.bind_box_to_button(
document.getElementById("create_child_title_entry"),
document.getElementById("create_child_submit_button")
);
}
document.addEventListener("DOMContentLoaded", on_pageload);
</script> </script>
</html> </html>