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

This reverts commit d394d64285.

We made the UX here a bit too strong, we will followup with a reduction
of noise and ensure the new "loud UX" only appears for the OP
and only appears when no solution is accepted

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

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

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

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

assets/stylesheets/solutions.scss

@@ -1,3 +1,4 @@
+.solved-panel,
 .post-controls .accepted,
 .fa.accepted,
 .accepted-text {
@@ -7,61 +8,9 @@
   }
 }
 
-.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: center;
+  align-items: baseline;
 }
 
 .post-controls .accepted-text {
@@ -71,6 +20,29 @@
   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,8 +13,6 @@ 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"