From 9550ced040b88d8e71cb5ff3a784bd932dcc4a91 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 24 Jul 2019 11:01:47 -0400
Subject: [PATCH] UX: If I can't unselect an answer, show text not a button
 (#80)

* UX: If I can't unselect an answer, show text not a button

* UX: Hide button text when post controls are expanded on mobile
---
 .../extend-for-solved-button.js.es6           | 23 +++++++++++++++++--
 assets/stylesheets/mobile/solutions.scss      | 22 ++++++++++++++++++
 assets/stylesheets/solutions.scss             | 14 +++++++----
 config/locales/client.en.yml                  |  1 +
 4 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/assets/javascripts/discourse/initializers/extend-for-solved-button.js.es6 b/assets/javascripts/discourse/initializers/extend-for-solved-button.js.es6
index ba9f7fe..52d0fdd 100644
--- a/assets/javascripts/discourse/initializers/extend-for-solved-button.js.es6
+++ b/assets/javascripts/discourse/initializers/extend-for-solved-button.js.es6
@@ -8,6 +8,7 @@ import { ajax } from "discourse/lib/ajax";
 import PostCooked from "discourse/widgets/post-cooked";
 import { formatUsername } from "discourse/lib/utilities";
 import { iconHTML } from "discourse-common/lib/icon-library";
+import { iconNode } from "discourse-common/lib/icon-library";
 
 function clearAccepted(topic) {
   const posts = topic.get("postStream.posts");
@@ -95,9 +96,10 @@ function initializeWithApi(api) {
         icon: "far-check-square",
         className: "unaccepted",
         title: "solved.accept_answer",
+        label: "solved.solution",
         position
       };
-    } else if (canUnaccept || accepted) {
+    } else if (canUnaccept && accepted) {
       const title = canUnaccept
         ? "solved.unaccept_answer"
         : "solved.accepted_answer";
@@ -107,8 +109,25 @@ function initializeWithApi(api) {
         title,
         className: "accepted fade-out",
         position,
+        label: "solved.solution"
+      };
+    } else if (!canAccept && accepted) {
+      let solutionText = iconHTML("check");
+      return {
+        className: "hidden",
+        disabled: "true",
+        position,
         beforeButton(h) {
-          return h("span.accepted-text", I18n.t("solved.solution"));
+          return h(
+            "span.accepted-text",
+            {
+              title: I18n.t("solved.accepted_description")
+            },
+            [
+              h("span", iconNode("check")),
+              h("span.accepted-label", I18n.t("solved.solution"))
+            ]
+          );
         }
       };
     }
diff --git a/assets/stylesheets/mobile/solutions.scss b/assets/stylesheets/mobile/solutions.scss
index e391a72..a76eaa1 100644
--- a/assets/stylesheets/mobile/solutions.scss
+++ b/assets/stylesheets/mobile/solutions.scss
@@ -1,3 +1,25 @@
 #topic-title .d-icon-far-check-square {
   margin-top: 0.25em;
 }
+
+.topic-post {
+  nav.post-controls {
+    .extra-buttons {
+      button {
+        max-width: unset;
+        white-space: nowrap;
+      }
+    }
+    &.expanded {
+      .accepted,
+      .unaccepted {
+        .d-icon {
+          margin: 0;
+        }
+        .d-button-label {
+          display: none;
+        }
+      }
+    }
+  }
+}
diff --git a/assets/stylesheets/solutions.scss b/assets/stylesheets/solutions.scss
index 622ed3b..eceb892 100644
--- a/assets/stylesheets/solutions.scss
+++ b/assets/stylesheets/solutions.scss
@@ -13,11 +13,15 @@
   align-items: baseline;
 }
 
-.post-controls .accepted-text {
-  display: inline-block;
-  font-size: inherit;
-  margin-right: -3px;
-  z-index: 2;
+.post-controls span.accepted-text {
+  padding: 8px 10px;
+  font-size: $font-up-1;
+  span {
+    display: inline-block;
+  }
+  .accepted-label {
+    margin-left: 7px;
+  }
 }
 
 // you can style accepted answers however your want
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index e1ab2d9..2bf9f6e 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -9,6 +9,7 @@ en:
       title: "Solved"
       allow_accepted_answers: "Allow topic owner and staff to mark a reply as the solution"
       accept_answer: "Select if this reply solves the problem"
+      accepted_description: "This is the accepted solution to this topic"
       has_no_accepted_answer: "This topic has no solution"
       unaccept_answer: "Unselect if this reply no longer solves the problem"
       accepted_answer: "Solution"