From 18e9ce174699fb19accdc27d0e6df6ff8509e9b3 Mon Sep 17 00:00:00 2001
From: Klaus-Uwe Mitterer <git@kumi.email>
Date: Mon, 1 Mar 2021 21:04:44 +0100
Subject: [PATCH] Colored buttons for mood selection

---
 frontend/static/frontend/js/dropdown-to-buttons.js | 4 +++-
 mood/templates/mood/status_edit.html               | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/static/frontend/js/dropdown-to-buttons.js b/frontend/static/frontend/js/dropdown-to-buttons.js
index 4e02fad..5928e37 100644
--- a/frontend/static/frontend/js/dropdown-to-buttons.js
+++ b/frontend/static/frontend/js/dropdown-to-buttons.js
@@ -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"));
 });
\ No newline at end of file
diff --git a/mood/templates/mood/status_edit.html b/mood/templates/mood/status_edit.html
index df6041d..f1a5a35 100644
--- a/mood/templates/mood/status_edit.html
+++ b/mood/templates/mood/status_edit.html
@@ -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>