# HG changeset patch
# User bsw
# Date 1612266174 -3600
# Node ID 62856200414d6dc5f84de3fe776960a9485f9ec6
# Parent  2f9e1e882de68ae85a14a4f667485719090292c1
Animate interest button

diff -r 2f9e1e882de6 -r 62856200414d app/main/delegation/_info.lua
--- a/app/main/delegation/_info.lua	Mon Feb 01 23:43:54 2021 +0100
+++ b/app/main/delegation/_info.lua	Tue Feb 02 12:42:54 2021 +0100
@@ -186,7 +186,8 @@
   elseif not issue.half_frozen and not info.own_participation then
     ui.link{
       attr = {
-        class = "float-right mdl-button mdl-js-button mdl-button--icon mdl-button--accent",
+        id = "issue_" .. issue.id .. "_interest_link",
+        class = "float-right mdl-button mdl-js-button mdl-button--icon mdl-button--feature-off",
       },
       form_attr = {
         onsubmit = "toggleInterest(" .. issue.id .. ", 'issue_" .. issue.id .. "_interest_icon'); return false;"  
@@ -205,6 +206,7 @@
   elseif not issue.half_frozen and info.own_participation then
     ui.link{
       attr = {
+        id = "issue_" .. issue.id .. "_interest_link",
         class = "float-right mdl-button mdl-js-button mdl-button--icon mdl-button--accent"
       },
       form_attr = {
diff -r 2f9e1e882de6 -r 62856200414d static/js/xhr.js
--- a/static/js/xhr.js	Mon Feb 01 23:43:54 2021 +0100
+++ b/static/js/xhr.js	Tue Feb 02 12:42:54 2021 +0100
@@ -1,9 +1,22 @@
-function toggleInterest(issue_id, iconElId) {
-  var iconEl = document.getElementById(iconElId);
+function toggleInterest(issueId) {
+  var linkEl = document.getElementById("issue_" + issueId + "_interest_link");
+  var iconEl = document.getElementById("issue_" + issueId + "_interest_icon");
   var interested = iconEl.innerHTML == "star_outline";
+
+  if (interested) {
+    linkEl.classList.add("mdl-button--accent");
+    linkEl.classList.add("mdl-button--feature-on");
+    linkEl.classList.remove("mdl-button--feature-off");
+    iconEl.innerHTML = "star";
+  } else {
+    linkEl.classList.remove("mdl-button--accent");
+    linkEl.classList.remove("mdl-button--feature-on");
+    linkEl.classList.add("mdl-button--feature-off");
+    iconEl.innerHTML = "star_outline";
+  }
   
   var data = new FormData();
-  data.append("issue_id", issue_id);
+  data.append("issue_id", issueId);
   data.append("interested", interested);
 
   fetch("/lf/interest/xhr_update", {
@@ -11,8 +24,8 @@
       body: data
   }).then(
       response => {
-        if (response.status == 200) {
-          iconEl.innerHTML = interested ? "star" : "star_outline";
+        if (response.status != 200) {
+          window.alert("Error during update");
         }
       }
   );
diff -r 2f9e1e882de6 -r 62856200414d static/lf4.css
--- a/static/lf4.css	Mon Feb 01 23:43:54 2021 +0100
+++ b/static/lf4.css	Tue Feb 02 12:42:54 2021 +0100
@@ -41,6 +41,7 @@
 .material-icons.icon-red {
   color: #F44336;
 }
+
 .mapboxgl-popup-content {
   max-width: 200px;
 }
@@ -236,6 +237,26 @@
   padding-bottom: 0;
   height: 24px;
 }
+
+.mdl-button--feature-off i {
+  color: #777;
+}
+
+@keyframes feature-on {
+  0% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(3);
+  }
+  100% {
+    transform: scale(1);
+  }}
+
+.mdl-button--feature-on {
+  animation: feature-on 0.5s;  
+}
+
 .mdl-button--underlined {
   text-decoration: underline;
 }