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