Merge pull request #52 from jacobtoppm/author-locking-ui

Add button styling and text for lock/unlock button
This commit is contained in:
Karl Hobley 2019-11-07 09:10:46 +00:00 committed by GitHub
commit 7fbdbb58d9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 12 deletions

View file

@ -471,3 +471,11 @@ footer .preview {
}
}
}
.lock-status {
margin: 0 0.5em 0.5em 0;
}
.lock-status.status-tag {
color: $color-teal;
}

View file

@ -11,20 +11,43 @@
{% endif %}
<form action="{{ form_action }}" method="POST" class="lock-indicator {{ page.locked|yesno:'locked,unlocked' }}">
{% trans "Edit lock" %}
<span class="lock-status">
{% if page.locked %}
{% trans "This page is locked" %}
{% else %}
{% trans "This page is unlocked" %}
{% endif %}</span>
{% csrf_token %}
<input type="hidden" name="next" value="{% url 'wagtailadmin_pages:edit' page.id %}" />
<button
type="submit"
class="status-tag {{ page.locked|yesno:'primary,secondary' }}{% if not form_action %} disabled{% endif %}"
aria-label="{% if page_perms.page_locked %}{% if page_perms.can_unlock %}{% trans 'Remove editor lock. Current status: Locked' %}{% else %}{% trans 'Current status: Locked' %}{% endif %}{% else %}{% trans 'Apply editor lock. Current status: Unlocked' %}{% endif %}">
{% if page_perms.page_locked %}
{% trans "Locked" %}
{% elif user_has_lock %}
{% trans "Locked by you" %}
{% if page.locked %}
{% if page_perms.can_unlock %}
<input type="hidden" name="next" value="{% url 'wagtailadmin_pages:edit' page.id %}" />
<button
type="submit"
class="status-tag primary lock-status"
aria-label="{% trans 'Remove editor lock' %}">
{% trans "Unlock" %}
</button>
{% else %}
{% trans "Unlocked" %}
<div class="lock-status">
({% trans "You don't have permission to unlock" %})
</div>
{% endif %}
</button>
{% else %}
{% if page_perms.can_lock %}
<input type="hidden" name="next" value="{% url 'wagtailadmin_pages:edit' page.id %}" />
<button
type="submit"
class="status-tag primary lock-status"
aria-label="{% trans 'Apply editor lock' %}">
{% trans "Lock" %}
</button>
{% else %}
<div class="lock-status">
({% trans "You don't have permission to lock" %})
</div>
{% endif %}
{% endif %}
</form>