abstain style

openpoke · Oct 30, 2023 · b5c3d48 · b5c3d48
1 parent 0e131e1
commit b5c3d48
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 21 deletions.
diff --git a/app/cells/decidim/decidim_awesome/voting/three_flags_proposal/show.erb b/app/cells/decidim/decidim_awesome/voting/three_flags_proposal/show.erb
@@ -6,25 +6,24 @@
   <%= vote_block_for(proposal, 1) %>
 </div>
 
+<% if current_component.settings.three_flags_show_abstain %>
+  <%= action_authorized_link_to :vote,
+                                voted_for?(0) ? t("decidim.decidim_awesome.voting.three_flags.abstained") : proposal.manifest.label_for(0),
+                                proposal_vote_path(0),
+                                remote: true,
+                                method: :post,
+                                title: t("decidim.decidim_awesome.voting.three_flags.voting_for", type: proposal.manifest.label_for(0)),
+                                class: "button secondary hollow expanded vote-action abstain-button small #{opacity_class_for(0)}" %>
+<% end %>
+
 <% if voted_for_any? %>
   <p class="text-center">
     <%= action_authorized_link_to :unvote,
                                   t("decidim.decidim_awesome.voting.three_flags.change_vote"),
                                   proposal_vote_path(current_vote&.weight),
-                                  resource: proposal,
                                   remote: true,
                                   method: :delete,
                                   id: "change-vote",
                                   class: "change-vote-button vote-action" %>
   </p>
 <% end %>
-
-<% if current_component.settings.three_flags_show_abstain %>
-  <%= action_authorized_link_to :vote,
-                                proposal.manifest.label_for(0),
-                                proposal_vote_path(0),
-                                resource: proposal,
-                                remote: true,
-                                method: :post,
-                                class: "button expanded abstain-button small #{opacity_class_for(0)}" %>
-<% end %>
diff --git a/app/cells/decidim/decidim_awesome/voting/three_flags_proposal_cell.rb b/app/cells/decidim/decidim_awesome/voting/three_flags_proposal_cell.rb
@@ -53,7 +53,7 @@ def svg_path(weight)
         end
 
         def opacity_class_for(weight)
-          opacity = !voted_for_any? || voted_for?(weight) ? "fully-opaque" : "semi-opaque"
+          opacity = !voted_for_any? || voted_for?(weight) ? "" : "semi-opaque"
           clickable = voted_for_any? ? "non-clickable" : ""
 
           [opacity, clickable].reject(&:empty?).join(" ")

diff --git a/app/packs/src/decidim/decidim_awesome/voting/three_flags.js b/app/packs/src/decidim/decidim_awesome/voting/three_flags.js
@@ -49,6 +49,9 @@ $(() => {
       $card[0].classList = evt.currentTarget.classList + ["voted"];
       if (evt.currentTarget.children.length > 1) {
         $card.html(`${evt.currentTarget.children[1].outerHTML}<p class="vote-label">${evt.currentTarget.children[1].children[0].textContent}</p>`);
+      } else if ($card[0].classList.contains("button")) {
+        $card[0].classList.remove("button");
+        $card.html(`<p class="vote-label">${evt.currentTarget.title}</p>`);
       } else {
         $card.html(`<p class="vote-label">${evt.currentTarget.textContent}</p>`);
       }

diff --git a/app/packs/stylesheets/decidim/decidim_awesome/voting/three_flags.scss b/app/packs/stylesheets/decidim/decidim_awesome/voting/three_flags.scss
@@ -5,10 +5,12 @@
   $red-color: #f44336;
 
   margin-bottom: 1.5rem;
+  border-bottom: 2px solid #d9d9d9;
 
   &.current-choice {
     text-align: center;
     margin-bottom: 0;
+    border-bottom: none;
 
     .vote-card {
       margin-top: .5rem;
@@ -110,10 +112,6 @@
     font-weight: bold;
   }
 
-  .fully-opaque {
-    opacity: 1;
-  }
-
   .semi-opaque {
     opacity: .3;
     pointer-events: none;
@@ -149,9 +147,6 @@
   }
 
   .button.abstain-button {
-    background-color: transparent;
-    color: black;
-    box-shadow: 0 2px 6px 4px rgba(0, 0, 0, .1);
-    margin-top: 1rem;
+    text-transform: uppercase;
   }
 }
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -515,7 +515,8 @@ en:
             skip: Check here to skip this window in the future
           vote_button: Click to vote
           voted: Voted
-          voting_for: My vote is %{type}
+          voting_for: My vote is "%{type}"
+          abstained: ✔ Abstained
           weights:
             weight_0: Abstain
             weight_1: Red