1.1 --- a/app/main/delegation/_info.lua	Mon Feb 01 23:43:54 2021 +0100
     1.2 +++ b/app/main/delegation/_info.lua	Tue Feb 02 12:42:54 2021 +0100
     1.3 @@ -186,7 +186,8 @@
     1.4    elseif not issue.half_frozen and not info.own_participation then
     1.5      ui.link{
     1.6        attr = {
     1.7 -        class = "float-right mdl-button mdl-js-button mdl-button--icon mdl-button--accent",
     1.8 +        id = "issue_" .. issue.id .. "_interest_link",
     1.9 +        class = "float-right mdl-button mdl-js-button mdl-button--icon mdl-button--feature-off",
    1.10        },
    1.11        form_attr = {
    1.12          onsubmit = "toggleInterest(" .. issue.id .. ", 'issue_" .. issue.id .. "_interest_icon'); return false;"  
    1.13 @@ -205,6 +206,7 @@
    1.14    elseif not issue.half_frozen and info.own_participation then
    1.15      ui.link{
    1.16        attr = {
    1.17 +        id = "issue_" .. issue.id .. "_interest_link",
    1.18          class = "float-right mdl-button mdl-js-button mdl-button--icon mdl-button--accent"
    1.19        },
    1.20        form_attr = {

     2.1 --- a/static/js/xhr.js	Mon Feb 01 23:43:54 2021 +0100
     2.2 +++ b/static/js/xhr.js	Tue Feb 02 12:42:54 2021 +0100
     2.3 @@ -1,9 +1,22 @@
     2.4 -function toggleInterest(issue_id, iconElId) {
     2.5 -  var iconEl = document.getElementById(iconElId);
     2.6 +function toggleInterest(issueId) {
     2.7 +  var linkEl = document.getElementById("issue_" + issueId + "_interest_link");
     2.8 +  var iconEl = document.getElementById("issue_" + issueId + "_interest_icon");
     2.9    var interested = iconEl.innerHTML == "star_outline";
    2.10 +
    2.11 +  if (interested) {
    2.12 +    linkEl.classList.add("mdl-button--accent");
    2.13 +    linkEl.classList.add("mdl-button--feature-on");
    2.14 +    linkEl.classList.remove("mdl-button--feature-off");
    2.15 +    iconEl.innerHTML = "star";
    2.16 +  } else {
    2.17 +    linkEl.classList.remove("mdl-button--accent");
    2.18 +    linkEl.classList.remove("mdl-button--feature-on");
    2.19 +    linkEl.classList.add("mdl-button--feature-off");
    2.20 +    iconEl.innerHTML = "star_outline";
    2.21 +  }
    2.22    
    2.23    var data = new FormData();
    2.24 -  data.append("issue_id", issue_id);
    2.25 +  data.append("issue_id", issueId);
    2.26    data.append("interested", interested);
    2.27  
    2.28    fetch("/lf/interest/xhr_update", {
    2.29 @@ -11,8 +24,8 @@
    2.30        body: data
    2.31    }).then(
    2.32        response => {
    2.33 -        if (response.status == 200) {
    2.34 -          iconEl.innerHTML = interested ? "star" : "star_outline";
    2.35 +        if (response.status != 200) {
    2.36 +          window.alert("Error during update");
    2.37          }
    2.38        }
    2.39    );

     3.1 --- a/static/lf4.css	Mon Feb 01 23:43:54 2021 +0100
     3.2 +++ b/static/lf4.css	Tue Feb 02 12:42:54 2021 +0100
     3.3 @@ -41,6 +41,7 @@
     3.4  .material-icons.icon-red {
     3.5    color: #F44336;
     3.6  }
     3.7 +
     3.8  .mapboxgl-popup-content {
     3.9    max-width: 200px;
    3.10  }
    3.11 @@ -236,6 +237,26 @@
    3.12    padding-bottom: 0;
    3.13    height: 24px;
    3.14  }
    3.15 +
    3.16 +.mdl-button--feature-off i {
    3.17 +  color: #777;
    3.18 +}
    3.19 +
    3.20 +@keyframes feature-on {
    3.21 +  0% {
    3.22 +    transform: scale(0);
    3.23 +  }
    3.24 +  40% {
    3.25 +    transform: scale(3);
    3.26 +  }
    3.27 +  100% {
    3.28 +    transform: scale(1);
    3.29 +  }}
    3.30 +
    3.31 +.mdl-button--feature-on {
    3.32 +  animation: feature-on 0.5s;  
    3.33 +}
    3.34 +
    3.35  .mdl-button--underlined {
    3.36    text-decoration: underline;
    3.37  }