UX: Improve button position and visibility. (#79)

assets/javascripts/discourse/connectors/topic-after-cooked/solved-panel.hbs

@@ -1,5 +0,0 @@
-{{#if topic.accepted_answer}}
-<p class="solved">
-{{{topic.acceptedAnswerHtml}}}
-</p>
-{{/if}}

assets/javascripts/discourse/initializers/extend-for-solved-button.js.es6

@@ -62,8 +62,9 @@ function acceptPost(post) {
   }).catch(popupAjaxError);
 }
 
-function initializeWithApi(api) {
+function initializeWithApi(api, container) {
   const currentUser = api.getCurrentUser();
+  const { mobileView } = container.lookup("site:main");
 
   TopicStatusIcons.addObject([
     "has_accepted_answer",
@@ -82,33 +83,32 @@ function initializeWithApi(api) {
   }
 
   api.addPostMenuButton("solved", attrs => {
-    const canAccept = attrs.can_accept_answer;
-    const canUnaccept = attrs.can_unaccept_answer;
-    const accepted = attrs.accepted_answer;
     const isOp = currentUser && currentUser.id === attrs.topicCreatedById;
     const position =
-      !accepted && canAccept && !isOp ? "second-last-hidden" : "first";
+      !attrs.accepted_answer && attrs.can_accept_answer && !isOp
+        ? "second-last-hidden"
+        : "first";
 
-    if (canAccept) {
+    if (!mobileView && !attrs.accepted_answer && attrs.can_accept_answer) {
       return {
         action: "acceptAnswer",
         icon: "far-check-square",
-        className: "unaccepted",
         title: "solved.accept_answer",
-        position
+        className: "unaccepted",
-      };
-    } else if (canUnaccept || accepted) {
-      const title = canUnaccept
-        ? "solved.unaccept_answer"
-        : "solved.accepted_answer";
-      return {
-        action: "unacceptAnswer",
-        icon: "check-square",
-        title,
-        className: "accepted fade-out",
         position,
-        beforeButton(h) {
+        afterButton(h) {
-          return h("span.accepted-text", I18n.t("solved.solution"));
+          return h("span.unaccepted", I18n.t("solved.mark_as_solution"));
+        }
+      };
+    } else if (attrs.accepted_answer) {
+      return {
+        action: attrs.can_unaccept_answer ? "unacceptAnswer" : "",
+        icon: "check-square",
+        title: "solved.accept_answer",
+        className: "accepted",
+        position: "first",
+        afterButton(h) {
+          return h("span.accepted", I18n.t("solved.solution"));
         }
       };
     }
@@ -155,6 +155,25 @@ function initializeWithApi(api) {
     }
   });
 
+  if (mobileView) {
+    api.decorateWidget("post-contents:after-cooked", dec => {
+      const model = dec.getModel();
+      const result = [];
+      if (!model.accepted_answer && model.can_accept_answer) {
+        result.push(
+          dec.attach("button", {
+            label: "solved.mark_as_solution",
+            title: "solved.mark_as_solution",
+            icon: "far-check-square",
+            action: "acceptAnswer",
+            className: "solve"
+          })
+        );
+      }
+      return dec.h("div.solved-container", result);
+    });
+  }
+
   api.attachWidgetAction("post", "acceptAnswer", function() {
     const post = this.model;
     const current = post.get("topic.postStream.posts").filter(p => {
@@ -197,7 +216,7 @@ function initializeWithApi(api) {
 
 export default {
   name: "extend-for-solved-button",
-  initialize() {
+  initialize(container) {
     Topic.reopen({
       // keeping this here cause there is complex localization
       acceptedAnswerHtml: function() {
@@ -245,12 +264,12 @@ export default {
       }.property()
     });
 
-    withPluginApi("0.1", initializeWithApi);
+    withPluginApi("0.1", api => initializeWithApi(api, container));
 
     withPluginApi("0.8.10", api => {
       api.replaceIcon(
         "notification.solved.accepted_notification",
-        "check-square"
+        "far-check-square"
       );
     });
   }

assets/stylesheets/solutions.scss

@@ -1,4 +1,3 @@
-.solved-panel,
 .post-controls .accepted,
 .fa.accepted,
 .accepted-text {
@@ -8,9 +7,56 @@
   }
 }
 
+.topic-body {
+  .solved-container {
+    display: flex;
+
+    .btn {
+      background-color: blend-primary-secondary(5%);
+      padding: 0.5em;
+    }
+  }
+
+  .solve,
+  .solved {
+    text-align: center;
+
+    .d-icon {
+      margin-right: 0.5em;
+    }
+  }
+
+  .solved {
+    color: green;
+    flex: 1;
+
+    &.btn .d-icon {
+      color: green;
+    }
+  }
+
+  .solve {
+    flex: 2;
+  }
+}
+
+.post-controls button.accepted {
+  &:active {
+    box-shadow: none;
+  }
+
+  &.btn-flat:hover .d-icon {
+    color: green;
+  }
+}
+
+.post-controls .unaccepted {
+  color: dark-light-choose($primary-low-mid, $secondary-high);
+}
+
 .post-controls span:not(.d-button-label) {
   display: inline-flex;
-  align-items: baseline;
+  align-items: center;
 }
 
 .post-controls .accepted-text {
@@ -20,29 +66,6 @@
   z-index: 2;
 }
 
-// you can style accepted answers however your want
-.quote.accepted-answer {
-  //  background-color: #E9FFE0;
-}
-
-.mobile-view .solved-panel {
-  margin-bottom: 15px;
-}
-
-.solved-panel {
-  .by {
-    display: none;
-  }
-
-  margin-top: 20px;
-  margin-bottom: 0px;
-  font-size: 13px;
-  // margin-bottom: 0px;
-  // padding: 4px 0px;
-  //border-top: 1px solid #ddd;
-  //background-color: #E9FFE0;
-}
-
 aside.quote .title.title-only {
   padding: 12px;
 }

config/locales/client.en.yml

@@ -13,6 +13,8 @@ en:
       unaccept_answer: "Unselect if this reply no longer solves the problem"
       accepted_answer: "Solution"
       solution: "Solution"
+      mark_as_solution: "Mark as solution"
+      unmark_as_solution: "Remove solution mark"
       solution_summary:
         one: "solution"
         other: "solutions"