kumi/kumify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Colored buttons for mood selection

Browse source
This commit is contained in:
Kumi 2021-03-01 21:04:44 +01:00
parent f80b909c6e
commit a8a7637a48
2 changed files with 4 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/static/frontend/js/dropdown-to-buttons.js
View file

@ -8,7 +8,7 @@ hidden.insertAfter($('.dtb'));
var checked = false;
$(".dtb option").unwrap().each(function() {
var btn = $('<div data-value="' + $(this).attr("value") + '" class="dtb-btn btn-secondary"><i class="' + $(this).attr("data-icon") + '"></i> ' + $(this).text() + '</div>');
var btn = $('<div data-style="background-color: ' + $(this).attr("data-color") + ' !important; border-color: ' + $(this).attr("data-color") + ' !important;" data-value="' + $(this).attr("value") + '" class="dtb-btn btn-secondary"><i class="' + $(this).attr("data-icon") + '"></i> ' + $(this).text() + '</div>');
if($(this).is(':checked') && !checked) {
btn.removeClass("btn-secondary");
btn.addClass('btn-primary');
@ -20,7 +20,9 @@ $(".dtb option").unwrap().each(function() {
$(document).on('click', '.dtb-btn', function() {
$('.dtb-btn').removeClass('btn-primary');
$('.dtb-btn').addClass('btn-secondary');
$('.dtb-btn').attr('style', "");
$(this).removeClass('btn-secondary');
$(this).addClass('btn-primary');
$(this).attr('style', $(this).attr('data-style'));
$('input[name="'+selectName+'"]').val($(this).attr("data-value"));
});

2
mood/templates/mood/status_edit.html
View file

@ -28,7 +28,7 @@
<option value="" {% if not object.mood %}selected{% endif %}>---------</option>
{% for mood in request.user.mood_set.all|dictsort:"value" %}
<option data-icon="{{ mood.icon }}" value="{{ mood.id }}" {% if object.mood == mood %}selected{% endif %}>{{ mood }}</option>
<option data-color="{{ mood.color }}" data-icon="{{ mood.icon }}" value="{{ mood.id }}" {% if object.mood == mood %}selected{% endif %}>{{ mood }}</option>
{% endfor %}
</select></td></tr>