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}} -

-{{{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 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 (!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")); + } + }; + } + }); - 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.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; -} - -.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 e1ab2d9..939cfc2 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -13,6 +13,8 @@ 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"