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

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

diff --git a/assets/javascripts/discourse/connectors/topic-after-cooked/solved-panel.hbs b/assets/javascripts/discourse/connectors/topic-after-cooked/solved-panel.hbs
deleted file mode 100644
index 168f0f6..0000000
--- a/assets/javascripts/discourse/connectors/topic-after-cooked/solved-panel.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-{{#if topic.accepted_answer}}
-<p class="solved">
-{{{topic.acceptedAnswerHtml}}}
-</p>
-{{/if}}
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..c33e8b5 100644
--- a/assets/javascripts/discourse/initializers/extend-for-solved-button.js.es6
+++ b/assets/javascripts/discourse/initializers/extend-for-solved-button.js.es6
@@ -62,14 +62,10 @@ function acceptPost(post) {
   }).catch(popupAjaxError);
 }
 
-function initializeWithApi(api) {
-  const currentUser = api.getCurrentUser();
+function initializeWithApi(api, container) {
+  const { mobileView } = container.lookup("site:main");
 
-  TopicStatusIcons.addObject([
-    "has_accepted_answer",
-    "far-check-square",
-    "solved"
-  ]);
+  TopicStatusIcons.addObject(["has_accepted_answer", "check-circle", "solved"]);
 
   api.includePostAttributes(
     "can_accept_answer",
@@ -81,38 +77,48 @@ function initializeWithApi(api) {
     api.addDiscoveryQueryParam("solved", { replace: true, refreshModel: true });
   }
 
-  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";
-
-    if (canAccept) {
-      return {
-        action: "acceptAnswer",
-        icon: "far-check-square",
-        className: "unaccepted",
-        title: "solved.accept_answer",
-        position
-      };
-    } 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) {
-          return h("span.accepted-text", I18n.t("solved.solution"));
-        }
-      };
-    }
-  });
+  if (!mobileView) {
+    api.addPostMenuButton("solved", attrs => {
+      if (attrs.accepted_answer) {
+        return {
+          action: "",
+          icon: "check-circle",
+          title: "solved.accepted_answer",
+          className: "accepted",
+          position: "first",
+          afterButton(h) {
+            return h("span.accepted", I18n.t("solved.solution"));
+          }
+        };
+      }
+    });
+
+    api.addPostMenuButton("solve", attrs => {
+      if (!attrs.accepted_answer && attrs.can_accept_answer) {
+        return {
+          action: "acceptAnswer",
+          icon: "check-circle",
+          title: "solved.accept_answer",
+          className: "unaccepted",
+          position: "first",
+          afterButton(h) {
+            return h("span.unaccepted", I18n.t("solved.mark_as_solution"));
+          }
+        };
+      } else if (attrs.accepted_answer && attrs.can_unaccept_answer) {
+        return {
+          action: "unacceptAnswer",
+          icon: "times-circle",
+          title: "solved.unaccept_answer",
+          className: "unaccepted",
+          position: "first",
+          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"
       );
     });
   }
diff --git a/assets/stylesheets/solutions.scss b/assets/stylesheets/solutions.scss
index 622ed3b..1caa756 100644
--- a/assets/stylesheets/solutions.scss
+++ b/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;
-}
-

[... diff too long, it was truncated ...]

GitHub sha: d394d642

We need a follow up here, the large accept button should only appear for the OP, staff should have it show up exactly like it did in the past

Also the largeness should go away once accepted

2 Likes

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