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

This reverts commit f788093.

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,9 +62,8 @@ function acceptPost(post) {
   }).catch(popupAjaxError);
 }
 
-function initializeWithApi(api, container) {
+function initializeWithApi(api) {
   const currentUser = api.getCurrentUser();
-  const { mobileView } = container.lookup("site:main");
 
   TopicStatusIcons.addObject([
     "has_accepted_answer",
@@ -83,32 +82,33 @@ function initializeWithApi(api, container) {
   }
 
   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 =
-      !attrs.accepted_answer && attrs.can_accept_answer && !isOp
-        ? "second-last-hidden"
-        : "first";
+      !accepted && canAccept && !isOp ? "second-last-hidden" : "first";
 
-    if (!mobileView && !attrs.accepted_answer && attrs.can_accept_answer) {
+    if (canAccept) {
       return {
         action: "acceptAnswer",
         icon: "far-check-square",
-        title: "solved.accept_answer",
         className: "unaccepted",
-        position,
-        afterButton(h) {
-          return h("span.unaccepted", I18n.t("solved.mark_as_solution"));
-        }
+        title: "solved.accept_answer",
+        position
       };
-    } else if (attrs.accepted_answer) {
+    } else if (canUnaccept || accepted) {
+      const title = canUnaccept
+        ? "solved.unaccept_answer"
+        : "solved.accepted_answer";
       return {
-        action: attrs.can_unaccept_answer ? "unacceptAnswer" : "",
+        action: "unacceptAnswer",
         icon: "check-square",
-        title: "solved.accept_answer",
-        className: "accepted",
-        position: "first",
-        afterButton(h) {
-          return h("span.accepted", I18n.t("solved.solution"));
+        title,
+        className: "accepted fade-out",
+        position,
+        beforeButton(h) {
+          return h("span.accepted-text", I18n.t("solved.solution"));
         }
       };
     }
@@ -155,25 +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 && 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 => {
@@ -216,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() {
@@ -264,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",
-        "far-check-square"
+        "check-square"
       );
     });
   }

assets/stylesheets/solutions.scss

@@ -1,3 +1,4 @@
+.solved-panel,
 .post-controls .accepted,
 .fa.accepted,
 .accepted-text {
@@ -7,56 +8,9 @@
   }
 }
 
-.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: center;
+  align-items: baseline;
 }
 
 .post-controls .accepted-text {
@@ -66,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: "Remove solution mark"
       solution_summary:
         one: "solution"
         other: "solutions"