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

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"))
+            ]
+          );
         }
       };
     }

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;
+        }
+      }
+    }
+  }
+}

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

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"