mirrors/bookwyrm
1
0
Fork 1
mirror of https://github.com/bookwyrm-social/bookwyrm.git synced 2024-12-02 06:21:09 +00:00
Code Issues Projects Releases Wiki Activity

fix UI for group curated list editing

Browse source 
When creating or editing a list, the group selection dropdown will only appear if the user selects "group" as the curation option (or it is already selected).

- fix typo in bookwyrm.js comments
- add data-hides trigger for hiding elements after they have been unhidden, where simple toggles are not the right approach
This commit is contained in:
Hugh Rundle 2021-09-27 11:03:41 +10:00
parent 0e2095bc5e
commit 762202c4b0
2 changed files with 52 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
bookwyrm/static/js/bookwyrm.js
View file

@ -28,6 +28,12 @@ let BookWyrm = new class {
this.revealForm.bind(this)) this.revealForm.bind(this))
); );
document.querySelectorAll('[data-hides]')
.forEach(button => button.addEventListener(
'change',
this.hideForm.bind(this))
);
document.querySelectorAll('[data-back]') document.querySelectorAll('[data-back]')
.forEach(button => button.addEventListener( .forEach(button => button.addEventListener(
'click', 'click',
@ -119,7 +125,7 @@ let BookWyrm = new class {
} }
/** /**
* Toggle form. * Show form.
* *
* @param {Event} event * @param {Event} event
* @return {undefined} * @return {undefined}
@ -127,10 +133,26 @@ let BookWyrm = new class {
revealForm(event) { revealForm(event) {
let trigger = event.currentTarget; let trigger = event.currentTarget;
let hidden = trigger.closest('.hidden-form').querySelectorAll('.is-hidden')[0]; let hidden = trigger.closest('.hidden-form').querySelectorAll('.is-hidden')[0];
// if the form has already been revealed, there is no '.is-hidden' element
this.addRemoveClass(hidden, 'is-hidden', !hidden); // so this doesn't really work as a toggle
if (hidden) {
this.addRemoveClass(hidden, 'is-hidden', !hidden);
}
} }
/**
* Hide form.
*
* @param {Event} event
* @return {undefined}
*/
hideForm(event) {
let trigger = event.currentTarget;
let targetId = trigger.dataset.hides
let visible = document.getElementById(targetId)
this.addRemoveClass(visible, 'is-hidden', true);
}
/** /**
* Execute actions on targets based on triggers. * Execute actions on targets based on triggers.
* *
@ -227,7 +249,7 @@ let BookWyrm = new class {
} }
/** /**
* Check or uncheck a checbox. * Check or uncheck a checkbox.
* *
* @param {string} checkbox - id of the checkbox * @param {string} checkbox - id of the checkbox
* @param {boolean} pressed - Is the trigger pressed? * @param {boolean} pressed - Is the trigger pressed?

52
bookwyrm/templates/lists/form.html
View file

@ -18,45 +18,45 @@
<fieldset class="field"> <fieldset class="field">
<legend class="label">{% trans "List curation:" %}</legend> <legend class="label">{% trans "List curation:" %}</legend>
<label class="field"> <label class="field" data-hides="list_group_selector">
<input type="radio" name="curation" value="closed"{% if not list or list.curation == 'closed' %} checked{% endif %}> {% trans "Closed" %} <input type="radio" name="curation" value="closed"{% if not list or list.curation == 'closed' %} checked{% endif %}> {% trans "Closed" %}
<p class="help mb-2">{% trans "Only you can add and remove books to this list" %}</p> <p class="help mb-2">{% trans "Only you can add and remove books to this list" %}</p>
</label> </label>
<label class="field"> <label class="field" data-hides="list_group_selector">
<input type="radio" name="curation" value="curated"{% if list.curation == 'curated' %} checked{% endif %}> {% trans "Curated" %} <input type="radio" name="curation" value="curated"{% if list.curation == 'curated' %} checked{% endif %}> {% trans "Curated" %}
<p class="help mb-2">{% trans "Anyone can suggest books, subject to your approval" %}</p> <p class="help mb-2">{% trans "Anyone can suggest books, subject to your approval" %}</p>
</label> </label>
<label class="field"> <label class="field" data-hides="list_group_selector">
<input type="radio" name="curation" value="open"{% if list.curation == 'open' %} checked{% endif %}> {% trans "Open" %} <input type="radio" name="curation" value="open"{% if list.curation == 'open' %} checked{% endif %}> {% trans "Open" %}
<p class="help mb-2">{% trans "Anyone can add books to this list" %}</p> <p class="help mb-2">{% trans "Anyone can add books to this list" %}</p>
</label> </label>
<label class="field"> <label class="field hidden-form">
<input type="radio" name="curation" value="group"{% if list.curation == 'group' %} checked{% endif %}> {% trans "Group" %} <input type="radio" name="curation" value="group"{% if list.curation == 'group' %} checked{% endif %} > {% trans "Group" %}
<p class="help mb-2">{% trans "Group members can add to and remove from this list" %}</p> <p class="help mb-2">{% trans "Group members can add to and remove from this list" %}</p>
</label> <fieldset class="{% if list.curation != 'group' %}is-hidden{% endif %}" id="list_group_selector">
<!-- TODO: add a list picker on-select for group lists --> {% if user_groups %}
{% if user_groups %} <label class="label" for="id_group" id="group">{% trans "Select Group" %}</label>
{% csrf_token %} <div class="field has-addons">
<label class="label" for="id_group">{% trans "Select Group" %}</label> <div class="select control">
<div class="field has-addons"> <select name="group" id="id_group">
<div class="select control"> <option value="" disabled {% if not list.group %} selected{% endif %}>{% trans "Select a list" %}</option>
<select name="group" id="id_group"> {% for group in user_groups %}
<option value="">Select a list</option> <option value="{{ group.id }}" {% if list.group.id == group.id %} selected{% endif %}>{{ group.name }}</option>
{% for group in user_groups %} {% endfor %}
<option value="{{ group.id }}" {% if list.group.id == group.id %} selected{% endif %}>{{ group.name }}</option> </select>
{% endfor %} </div>
</select> </div>
</div> {% else %}
</div> {% with user|username as username %}
{% else %} {% url 'user-groups' user|username as url %}
{% with user|username as username %} <div>{% trans "You must create a " %}<a href="{{ url }}">{% trans "Group" %}</a>{% trans " before you can create Group lists!" %}</div>
{% url 'user-groups' user|username as url %} {% endwith %}
<div>{% trans "You must create a " %}<a href="{{ url }}">{% trans "Group" %}</a>{% trans " before you can create Group lists!" %}</div> </fieldset>
{% endwith %}
{% endif %} {% endif %}
</label>
</fieldset> </fieldset>
</div> </div>
</div> </div>