Mirrors/catask
1
0
Fork 0
mirror of https://codeberg.org/catask-org/catask.git synced 2025-04-20 05:43:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

add cws and custom emojis support into inbox

Browse source
This commit is contained in:
mst 2024-10-20 00:02:46 +03:00
parent b671c1ea8f
commit bd343be3d7
1 changed files with 71 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
templates/inbox.html
View file

@ -13,42 +13,66 @@
<div class="card mb-3 mt-3 alert-placeholder question" id="question-{{ question.id }}"> <div class="card mb-3 mt-3 alert-placeholder question" id="question-{{ question.id }}">
<div class="card-header"> <div class="card-header">
<div class="d-flex justify-content-between align-items-center"> <div class="d-flex justify-content-between align-items-center">
<h5 class="card-title mt-1 mb-1"> <h5 class="card-title mt-1 mb-1 markdown-content">
{% if question.from_who %} {% if question.from_who %}
{{ question.from_who }} {{ question.from_who | render_markdown }}
{% else %} {% else %}
<i class="bi bi-incognito" data-bs-toggle="tooltip" data-bs-title="This question was asked anonymously" data-bs-placement="top"></i> {{ cfg.anonName }} <i class="bi bi-incognito" data-bs-toggle="tooltip" data-bs-title="This question was asked anonymously" data-bs-placement="top"></i> {{ cfg.anonName }}
{% endif %} {% endif %}
</h5> </h5>
<h6 class="card-subtitle fw-light text-body-secondary"> <h6 class="card-subtitle fw-light text-body-secondary">
{# {#
reserved for version 1.6.0 or later reserved for version 1.6.0 or later
{% if question.private %} {% if question.private %}
<span class="me-2"><i class="bi bi-lock"></i> <span class="fw-medium" data-bs-toggle="tooltip" data-bs-title="This question was asked privately">Private</span></span> <span class="me-2"><i class="bi bi-lock"></i> <span class="fw-medium" data-bs-toggle="tooltip" data-bs-title="This question was asked privately">Private</span></span>
{% endif %} {% endif %}
#} #}
<span data-bs-toggle="tooltip" data-bs-title="{{ question.creation_date.strftime('%B %d, %Y %H:%M') }}">{{ formatRelativeTime(str(question.creation_date)) }}</span> <span data-bs-toggle="tooltip" data-bs-title="{{ question.creation_date.strftime('%B %d, %Y %H:%M') }}">{{ formatRelativeTime(str(question.creation_date)) }}</span>
</h6> </h6>
</div> </div>
<div class="card-text markdown-content">{{ question.content | render_markdown }}</div> <div class="card-text markdown-content">
{% if question.cw %}
<p class="text-center mb-2 fw-bold cw-text">{{ question.cw }}</p>
<div class="collapse question-cw" id="question-cw-{{ question.id }}">
{{ question.content | render_markdown }}
</div>
<button class="z-0 cw-btn btn btn-sm btn-secondary shadow text-center w-100 sticky-bottom" type="button" data-bs-toggle="collapse" data-bs-target="#question-cw-{{ question.id }}" aria-expanded="false" aria-controls="question-cw-{{ question.id }}">
<span class="fw-medium cw-btn-text">Show content</span>
<span class="text-body-secondary cw-btn-chars">({{ len(question.content) }} characters)</span>
</button>
{% else %}
{{ question.content | render_markdown }}
{% endif %}
</div>
</div> </div>
<div class="card-body"> <div class="card-body">
<form hx-trigger="click from:#answer-btn-{{ question.id }}, keyup[ctrlKey&&key=='Enter']" hx-post="{{ url_for('api.addAnswer', question_id=question.id) }}" hx-target="#question-{{ question.id }}" hx-swap="none"> <form hx-trigger="click from:#answer-btn-{{ question.id }}, keyup[ctrlKey&&key=='Enter']" hx-post="{{ url_for('api.addAnswer', question_id=question.id) }}" hx-target="#question-{{ question.id }}" hx-swap="none">
<div class="form-group d-sm-grid d-md-block gap-2"> <div class="form-group d-sm-grid d-md-block gap-2">
<div class="collapse" id="cw-{{ question.id }}-collapse">
<div class="form-floating mb-2">
<input class="form-control" type="text" name="cw" id="cw" placeholder="Content warning">
<label for="cw">Content warning</label>
</div>
</div>
<label for="answer-{{ question.id }}" class="visually-hidden-focusable">Write your answer...</label> <label for="answer-{{ question.id }}" class="visually-hidden-focusable">Write your answer...</label>
<textarea class="form-control mb-2" required name="answer" id="answer-{{ question.id }}" placeholder="Write your answer..."></textarea> <textarea class="form-control mb-2" required name="answer" id="answer-{{ question.id }}" placeholder="Write your answer..."></textarea>
<div class="d-flex flex-column flex-md-row-reverse gap-2"> <div class="d-md-flex justify-content-between align-items-center">
<button type="submit" class="btn btn-primary" id="answer-btn-{{ question.id }}"> <button class="btn btn-sm btn-outline-secondary mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#cw-{{ question.id }}-collapse" aria-expanded="false" aria-controls="cw-{{ question.id }}-collapse">
<span class="spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span> <i class="bi bi-plus-lg me-1"></i> Add CW
<span class="visually-hidden" role="status">Loading...</span>
Answer
</button> </button>
{% if not cfg.noDeleteConfirm %} <div class="d-flex flex-column flex-md-row-reverse gap-2">
<button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#question-{{ question.id }}-modal">Delete</button> <button type="submit" class="btn btn-primary" id="answer-btn-{{ question.id }}">
{% else %} <span class="spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
<button type="button" class="btn btn-outline-danger" hx-delete="{{ url_for('api.deleteQuestion', question_id=question.id) }}" hx-target="#question-{{ question.id }}" hx-swap="none">Delete</button> <span class="visually-hidden" role="status">Loading...</span>
{% endif %} Answer
</button>
{% if not cfg.noDeleteConfirm %}
<button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#question-{{ question.id }}-modal">Delete</button>
{% else %}
<button type="button" class="btn btn-outline-danger" hx-delete="{{ url_for('api.deleteQuestion', question_id=question.id) }}" hx-target="#question-{{ question.id }}" hx-swap="none">Delete</button>
{% endif %}
</div>
</div> </div>
</div> </div>
</form> </form>
@ -65,7 +89,7 @@
<div class="modal-body"> <div class="modal-body">
<p class="mb-0">Are you sure you want to delete this question?</p> <p class="mb-0">Are you sure you want to delete this question?</p>
</div> </div>
<div class="modal-footer flex-column flex-lg-row align-items-stretch w-100"> <div class="modal-footer flex-row align-items-stretch w-100">
<button type="button" class="btn btn-outline-secondary flex-fill" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-outline-secondary flex-fill" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger flex-fill" data-bs-dismiss="modal" hx-delete="{{ url_for('api.deleteQuestion', question_id=question.id) }}" hx-target="#question-{{ question.id }}" hx-swap="none">Confirm</button> <button type="button" class="btn btn-danger flex-fill" data-bs-dismiss="modal" hx-delete="{{ url_for('api.deleteQuestion', question_id=question.id) }}" hx-target="#question-{{ question.id }}" hx-swap="none">Confirm</button>
</div> </div>
@ -86,6 +110,34 @@
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]'); const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)); const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
document.addEventListener('DOMContentLoaded', function () {
const collapseElements = document.querySelectorAll('.collapse.question-cw');
const toggleButtons = document.querySelectorAll('.cw-btn');
const cwTexts = document.querySelectorAll('.cw-text');
collapseElements.forEach(function (collapseElement, index) {
let toggleButton = toggleButtons[index];
let cwText = cwTexts[index];
let buttonText = toggleButton.querySelector('.cw-btn-text');
let buttonCharsText = toggleButton.querySelector('.cw-btn-chars');
collapseElement.addEventListener('show.bs.collapse', function () {
buttonText.textContent = 'Hide content';
buttonCharsText.classList.add('d-none');
cwText.classList.remove('text-center');
cwText.classList.remove('fw-bold');
});
collapseElement.addEventListener('hide.bs.collapse', function () {
buttonText.textContent = 'Show content';
buttonCharsText.classList.remove('d-none');
cwText.classList.add('text-center');
cwText.classList.add('fw-bold');
});
});
});
document.addEventListener('htmx:afterRequest', function(event) { document.addEventListener('htmx:afterRequest', function(event) {
const jsonResponse = event.detail.xhr.response; const jsonResponse = event.detail.xhr.response;
if (jsonResponse) { if (jsonResponse) {
@ -110,6 +162,6 @@
document.title = `Inbox (${count}) | {{ const.appName }}`; document.title = `Inbox (${count}) | {{ const.appName }}`;
} }
} }
}); })
</script> </script>
{% endblock %} {% endblock %}