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 dd00659..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,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")); - } - }; - } else if (attrs.accepted_answer) { - return { - action: attrs.can_unaccept_answer ? "unacceptAnswer" : "", - icon: "check-square", title: "solved.accept_answer", - className: "accepted", - position: "first", - afterButton(h) { - return h("span.accepted", I18n.t("solved.solution")); + 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")); } }; } @@ -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" ); }); } diff --git a/assets/stylesheets/solutions.scss b/assets/stylesheets/solutions.scss index 27d7813..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,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; } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index f1b6a16..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: "Remove solution mark" solution_summary: one: "solution" other: "solutions"