From a0191a1e50f538b13d80688007e31182e268c481 Mon Sep 17 00:00:00 2001 From: Sam Saffron Date: Sat, 29 Jun 2019 08:12:41 +1000 Subject: [PATCH] Revert "UX: Improve button position and visibility. (#78)" This reverts commit d394d64285dfbc0f42dfe22162977b50b7ea5c3f. 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 --- .../topic-after-cooked/solved-panel.hbs | 5 + .../extend-for-solved-button.js.es6 | 132 ++++++------------ assets/stylesheets/solutions.scss | 78 ++++------- config/locales/client.en.yml | 2 - 4 files changed, 73 insertions(+), 144 deletions(-) create mode 100644 assets/javascripts/discourse/connectors/topic-after-cooked/solved-panel.hbs diff --git a/assets/javascripts/discourse/connectors/topic-after-cooked/solved-panel.hbs b/assets/javascripts/discourse/connectors/topic-after-cooked/solved-panel.hbs new file mode 100644 index 0000000..168f0f6 --- /dev/null +++ b/assets/javascripts/discourse/connectors/topic-after-cooked/solved-panel.hbs @@ -0,0 +1,5 @@ +{{#if topic.accepted_answer}} +

+{{{topic.acceptedAnswerHtml}}} +

+{{/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 c33e8b5..ba9f7fe 100644 --- a/assets/javascripts/discourse/initializers/extend-for-solved-button.js.es6 +++ b/assets/javascripts/discourse/initializers/extend-for-solved-button.js.es6 @@ -62,10 +62,14 @@ function acceptPost(post) { }).catch(popupAjaxError); } -function initializeWithApi(api, container) { - const { mobileView } = container.lookup("site:main"); +function initializeWithApi(api) { + 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 => { - 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("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"; - 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")); - } - }; - } - }); - } + 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")); + } + }; + } + }); 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" ); }); } diff --git a/assets/stylesheets/solutions.scss b/assets/stylesheets/solutions.scss index 1caa756..622ed3b 100644 --- a/assets/stylesheets/solutions.scss +++ b/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; } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 939cfc2..e1ab2d9 100644 --- a/config/locales/client.en.yml +++ b/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"