Skip to content

Commit

Permalink
Update design of feedback page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Xpirix
Xpirix committed Sep 26, 2024
1 parent 6756cd1 commit c197bb9
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 28 deletions.
2 changes: 1 addition & 1 deletion qgis-app/plugins/forms.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,7 @@ class VersionFeedbackForm(forms.Form):
"- [ ] second task"
),
"rows": "5",
"class": "span12"
"class": "textarea is-fullwidth"
}
)
)
Expand Down
86 changes: 59 additions & 27 deletions qgis-app/plugins/templates/plugins/plugin_feedback.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,36 +19,53 @@ <h2>{% trans "Feedback Plugin" %} {{ version.plugin.name }} {{ version.version }
<p>Please tick the checkbox when the task is completed and click the "Update" button to update status.</p>
{% for feedback in feedbacks %}
<div class="previous-feedback {% if feedback.reviewer == request.user %}with-box{% endif %}" data-feedback-id="{{ feedback.id }}">
<span style="font-weight: bolder;">
{% if feedback.reviewer.first_name %}
{{ feedback.reviewer.first_name }} {{ feedback.reviewer.last_name }}
{% else %}
{{ feedback.reviewer.username }}
{% endif %}
</span>
<span class="feedback-info">wrote {{ feedback.created_on|timesince }} ago</span>
<div>
<input type="checkbox" class="statusCheckbox pull-left" name="statusCheckbox" data-feedback-id="{{ feedback.id }}" {% if feedback.is_completed %}checked disabled{% endif %}>
<label class="feedback">
<span id="feedbackTask">{{ feedback.task }}</span>
<span id="editedOn" class="feedback-info">
{% if feedback.modified_on %}
&mdash; (edited) {{ feedback.modified_on|timesince }} ago
<div class="field ">
<label class="checkbox">
<input type="checkbox" class="statusCheckbox" name="statusCheckbox" data-feedback-id="{{ feedback.id }}" {% if feedback.is_completed %}checked disabled{% endif %}>
<span class="has-text-weight-bold">
{% if feedback.reviewer.first_name %}
{{ feedback.reviewer.first_name }} {{ feedback.reviewer.last_name }}
{% else %}
{{ feedback.reviewer.username }}
{% endif %}
</span>
<span class="feedback-info">wrote {{ feedback.created_on|timesince }} ago</span>
</label>
<p class="control is-expanded mt-3">
<label class="feedback">
<span id="feedbackTask">{{ feedback.task }}</span>
<span id="editedOn" class="feedback-info">
{% if feedback.modified_on %}
&mdash; (edited) {{ feedback.modified_on|timesince }} ago
{% endif %}
</span>
</label>
</p>
{% if feedback.reviewer == request.user %}
<div class="pull-right">
<button type="button" id="editButton" class="button is-success is-small" data-feedback-id="{{ feedback.id }}"><i class="icon-pencil"></i></button>
<button type="button" class="button is-danger is-small deleteButton" data-feedback-id="{{ feedback.id }}"><i class="icon-remove"></i></button>
<div class="control has-text-right">
<button type="button" id="editButton" class="button is-small is-outlined is-success" data-feedback-id="{{ feedback.id }}">
<span class="icon is-small">
<i class="fas fa-pencil-alt"></i>
</span>
</button>
<button type="button" class="button is-small is-outlined is-danger deleteButton" data-feedback-id="{{ feedback.id }}">
<span class="icon is-small">
<i class="fas fa-trash-alt"></i>
</span>
</button>
</div>
{% endif %}
</div>
</div>
{% endfor %}
{% if feedbacks %}
<div class="text-center update-feedback">
<button type="button" id="updateButton" class="button is-success">Update</button>
<div class="has-text-centered update-feedback">
<button type="button" id="updateButton" class="button is-success">
<span class="icon">
<i class="fas fa-check"></i>
</span>
<span>Update</span>
</button>
</div>
{% endif %}

Expand All @@ -57,8 +74,13 @@ <h2>{% trans "Feedback Plugin" %} {{ version.plugin.name }} {{ version.version }
<form method="post" action="{% url 'version_feedback' version.plugin.package_name version.version %}">{% csrf_token %}
<b>New Feedback</b>
{{ form.feedback }}
<div class="text-right">
<button class="button is-success" type="submit">{% trans "Submit New Feedback" %}</button>
<div class="has-text-right mt-3">
<button class="button" type="submit">
<span class="icon">
<i class="fas fa-paper-plane"></i>
</span>
<span>{% trans "Submit New Feedback" %}</span>
</button>
</div>
</form>
</div>
Expand Down Expand Up @@ -189,15 +211,25 @@ <h2>{% trans "Feedback Plugin" %} {{ version.plugin.name }} {{ version.version }
var originalContent = $feedbackDiv.html();

var inputForm = `
<input type="text" class="form-control" id="editFeedbackInput" value="${feedbackTask}" style="width: 100%;margin-bottom: 0 !important;">
<div style="display: flex;gap: 10px;">
<button type="button" class="button btn-success is-small" id="saveButton" data-feedback-id="${feedbackId}">Save</button>
<button type="button" class="button btn-secondary is-small" id="cancelButton" data-feedback-id="${feedbackId}">Cancel</button>
<textarea class="textarea" id="editFeedbackInput" style="width: 100%; margin-bottom: 0 !important;">${feedbackTask}</textarea>
<div style="display: flex; gap: 10px; margin-top: 10px;">
<button type="button" class="button is-success is-small" id="saveButton" data-feedback-id="${feedbackId}">
<span class="icon is-small mr-3">
<i class="fas fa-save"></i>
</span>
Save
</button>
<button type="button" class="button is-secondary is-small" id="cancelButton" data-feedback-id="${feedbackId}">
<span class="icon is-small mr-3">
<i class="fas fa-times"></i>
</span>
Cancel
</button>
</div>
`;

$feedbackDiv.html(inputForm);
$feedbackDiv.attr("style", "display: flex;justify-content: space-between;align-items: center;gap: 10px;");
$feedbackDiv.attr("style", "display: flex;justify-content: space-between;align-items: center;gap: 10px; flex-direction: column;");

$(document).on('click', '#cancelButton', function() {
// Restore the original content
Expand Down

0 comments on commit c197bb9

Please sign in to comment.