Revert "UX: Improve button position and visibility. (#78)"
This reverts commit d394d64285.
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
This commit is contained in:
Sam Saffron
parent
d394d64285
commit
a0191a1e50
|
|
@ -0,0 +1,5 @@
|
|||
{{#if topic.accepted_answer}}
|
||||
<p class="solved">
|
||||
{{{topic.acceptedAnswerHtml}}}
|
||||
</p>
|
||||
{{/if}}
|
||||
|
|
@ -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"
|
||||
);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue