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

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,14 +62,10 @@ function acceptPost(post) {
   }).catch(popupAjaxError);
 }
 
-function initializeWithApi(api) {
+function initializeWithApi(api, container) {
-  const currentUser = api.getCurrentUser();
+  const { mobileView } = container.lookup("site:main");
 
-  TopicStatusIcons.addObject([
+  TopicStatusIcons.addObject(["has_accepted_answer", "check-circle", "solved"]);
-    "has_accepted_answer",
-    "far-check-square",
-    "solved"
-  ]);
 
   api.includePostAttributes(
     "can_accept_answer",
@@ -81,38 +77,48 @@ function initializeWithApi(api) {
     api.addDiscoveryQueryParam("solved", { replace: true, refreshModel: true });
   }
 
-  api.addPostMenuButton("solved", attrs => {
+  if (!mobileView) {
-    const canAccept = attrs.can_accept_answer;
+    api.addPostMenuButton("solved", attrs => {
-    const canUnaccept = attrs.can_unaccept_answer;
+      if (attrs.accepted_answer) {
-    const accepted = attrs.accepted_answer;
+        return {
-    const isOp = currentUser && currentUser.id === attrs.topicCreatedById;
+          action: "",
-    const position =
+          icon: "check-circle",
-      !accepted && canAccept && !isOp ? "second-last-hidden" : "first";
+          title: "solved.accepted_answer",
+          className: "accepted",
+          position: "first",
+          afterButton(h) {
+            return h("span.accepted", I18n.t("solved.solution"));
+          }
+        };
+      }
+    });
 
-    if (canAccept) {
+    api.addPostMenuButton("solve", attrs => {
-      return {
+      if (!attrs.accepted_answer && attrs.can_accept_answer) {
-        action: "acceptAnswer",
+        return {
-        icon: "far-check-square",
+          action: "acceptAnswer",
-        className: "unaccepted",
+          icon: "check-circle",
-        title: "solved.accept_answer",
+          title: "solved.accept_answer",
-        position
+          className: "unaccepted",
-      };
+          position: "first",
-    } else if (canUnaccept || accepted) {
+          afterButton(h) {
-      const title = canUnaccept
+            return h("span.unaccepted", I18n.t("solved.mark_as_solution"));
-        ? "solved.unaccept_answer"
+          }
-        : "solved.accepted_answer";
+        };
-      return {
+      } else if (attrs.accepted_answer && attrs.can_unaccept_answer) {
-        action: "unacceptAnswer",
+        return {
-        icon: "check-square",
+          action: "unacceptAnswer",
-        title,
+          icon: "times-circle",
-        className: "accepted fade-out",
+          title: "solved.unaccept_answer",
-        position,
+          className: "unaccepted",
-        beforeButton(h) {
+          position: "first",
-          return h("span.accepted-text", I18n.t("solved.solution"));
+          afterButton(h) {
-        }
+            return h("span.unaccepted", I18n.t("solved.unmark_as_solution"));
-      };
+          }
-    }
+        };
-  });
+      }
+    });
+  }
 
   api.decorateWidget("post-contents:after-cooked", dec => {
     if (dec.attrs.post_number === 1) {
@@ -155,6 +161,46 @@ function initializeWithApi(api) {
     }
   });
 
+  if (mobileView) {
+    api.decorateWidget("post-contents:after-cooked", dec => {
+      const model = dec.getModel();
+      const result = [];
+      if (model.accepted_answer) {
+        result.push(
+          dec.attach("button", {
+            label: "solved.solution",
+            title: "solved.solution",
+            icon: "check-circle",
+            action: "noop",
+            className: "solved"
+          })
+        );
+      }
+      if (!model.accepted_answer && model.can_accept_answer) {
+        result.push(
+          dec.attach("button", {
+            label: "solved.mark_as_solution",
+            title: "solved.mark_as_solution",
+            icon: "check-circle",
+            action: "acceptAnswer",
+            className: "solve"
+          })
+        );
+      } else if (model.accepted_answer && model.can_unaccept_answer) {
+        result.push(
+          dec.attach("button", {
+            label: "solved.unmark_as_solution",
+            title: "solved.unmark_as_solution",
+            icon: "times-circle",
+            action: "unacceptAnswer",
+            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 +243,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() {
@@ -209,7 +255,7 @@ export default {
         }
 
         return I18n.t("solved.accepted_html", {
-          icon: iconHTML("check-square", { class: "accepted" }),
+          icon: iconHTML("check-circle", { class: "accepted" }),
           username_lower: username.toLowerCase(),
           username: formatUsername(username),
           post_path: this.get("url") + "/" + postNumber,
@@ -227,7 +273,7 @@ export default {
             openTag: "span",
             closeTag: "span",
             title: I18n.t("topic_statuses.solved.help"),
-            icon: "far-check-square"
+            icon: "check-circle"
           });
         } else if (
           this.topic.can_have_answer &&
@@ -245,12 +291,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"
+        "check-circle"
       );
     });
   }

assets/stylesheets/solutions.scss

@@ -1,4 +1,3 @@
-.solved-panel,
 .post-controls .accepted,
 .fa.accepted,
 .accepted-text {
@@ -8,9 +7,61 @@
   }
 }
 
+.topic-body {
+  .solved-container {
+    display: flex;
+
+    .btn {
+      background-color: blend-primary-secondary(5%);
+      padding: 1em;
+    }
+  }
+
+  .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 {
+  &:hover {
+    background: none;
+    cursor: auto;
+  }
+
+  &: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 +71,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: "Unmark as solution"
       solution_summary:
         one: "solution"
         other: "solutions"