IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-02 05:29:17 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Composer actions menu header should display the icon of selected action (#12449)

Browse Source 
See a video of the change in the PR: https://github.com/discourse/discourse/pull/12449.
This commit is contained in:
Osama Sayegh 2021-03-19 17:48:43 +03:00 committed by GitHub
parent 5b02aad9c1
commit c9923a3e3e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 120 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/assets/javascripts/discourse/app/controllers/composer.js
View File

@ -226,21 +226,31 @@ export default Controller.extend({
isWhispering: or("replyingToWhisper", "model.whisper"),
@discourseComputed("model.action", "isWhispering")
saveIcon(modelAction, isWhispering) {
@discourseComputed("model.action", "isWhispering", "model.privateMessage")
saveIcon(modelAction, isWhispering, privateMessage) {
if (isWhispering) {
return "far-eye-slash";
}
if (privateMessage) {
return "envelope";
}
return SAVE_ICONS[modelAction];
},
@discourseComputed("model.action", "isWhispering", "model.editConflict")
saveLabel(modelAction, isWhispering, editConflict) {
@discourseComputed(
"model.action",
"isWhispering",
"model.editConflict",
"model.privateMessage"
)
saveLabel(modelAction, isWhispering, editConflict, privateMessage) {
if (editConflict) {
return "composer.overwrite_edit";
} else if (isWhispering) {
return "composer.create_whisper";
} else if (privateMessage) {
return "composer.create_pm";
}
return SAVE_LABELS[modelAction];

2
app/assets/javascripts/discourse/app/templates/components/composer-action-title.hbs
View File

@ -8,6 +8,8 @@
tabindex=tabindex
topic=model.topic
post=model.post
whisper=model.whisper
noBump=model.noBump
}}
<span class="action-title">

9
app/assets/javascripts/discourse/app/templates/composer.hbs
View File

@ -25,14 +25,13 @@
{{plugin-outlet name="composer-action-after" noTags=true args=(hash model=model)}}
{{#unless site.mobileView}}
{{#if isWhispering}}
<span class="whisper">{{d-icon "far-eye-slash"}}</span>
{{/if}}
{{#if model.unlistTopic}}
<span class="unlist">({{i18n "composer.unlist"}})</span>
{{/if}}
{{#if model.noBump}}
<span class="no-bump">{{d-icon "anchor"}}</span>
{{#if isWhispering}}
{{#if model.noBump}}
<span class="no-bump">{{d-icon "anchor"}}</span>
{{/if}}
{{/if}}
{{/unless}}

78
app/assets/javascripts/discourse/tests/acceptance/composer-actions-test.js
View File

@ -110,11 +110,25 @@ acceptance("Composer Actions", function (needs) {
"test replying as whisper to topic when initially not a whisper"
);
assert.ok(
queryAll(".composer-actions svg.d-icon-far-eye-slash").length === 0,
"whisper icon is not visible"
);
assert.ok(
queryAll(".composer-actions svg.d-icon-share").length === 1,
"reply icon is visible"
);
await composerActions.expand();
await composerActions.selectRowByValue("toggle_whisper");
assert.ok(
queryAll(".composer-fields .whisper .d-icon-far-eye-slash").length === 1
queryAll(".composer-actions svg.d-icon-far-eye-slash").length === 1,
"whisper icon is visible"
);
assert.ok(
queryAll(".composer-actions svg.d-icon-share").length === 0,
"reply icon is not visible"
);
});
@ -277,25 +291,75 @@ acceptance("Composer Actions", function (needs) {
await click("article#post_3 button.reply");
assert.ok(
queryAll(".composer-fields .no-bump").length === 0,
"no-bump text is not visible"
queryAll(".composer-actions svg.d-icon-anchor").length === 0,
"no-bump icon is not visible"
);
assert.ok(
queryAll(".composer-actions svg.d-icon-share").length === 1,
"reply icon is visible"
);
await composerActions.expand();
await composerActions.selectRowByValue("toggle_topic_bump");
assert.ok(
queryAll(".composer-fields .no-bump").length === 1,
queryAll(".composer-actions svg.d-icon-anchor").length === 1,
"no-bump icon is visible"
);
assert.ok(
queryAll(".composer-actions svg.d-icon-share").length === 0,
"reply icon is not visible"
);
await composerActions.expand();
await composerActions.selectRowByValue("toggle_topic_bump");
assert.ok(
queryAll(".composer-fields .no-bump").length === 0,
queryAll(".composer-actions svg.d-icon-anchor").length === 0,
"no-bump icon is not visible"
);
assert.ok(
queryAll(".composer-actions svg.d-icon-share").length === 1,
"reply icon is visible"
);
});
test("replying to post - whisper and no bump", async function (assert) {
const composerActions = selectKit(".composer-actions");
await visit("/t/internationalization-localization/280");
await click("article#post_3 button.reply");
assert.ok(
queryAll(".composer-actions svg.d-icon-far-eye-slash").length === 0,
"whisper icon is not visible"
);
assert.ok(
queryAll(".composer-fields .whisper .d-icon-anchor").length === 0,
"no-bump icon is not visible"
);
assert.ok(
queryAll(".composer-actions svg.d-icon-share").length === 1,
"reply icon is visible"
);
await composerActions.expand();
await composerActions.selectRowByValue("toggle_topic_bump");
await composerActions.expand();
await composerActions.selectRowByValue("toggle_whisper");
assert.ok(
queryAll(".composer-actions svg.d-icon-far-eye-slash").length === 1,
"whisper icon is visible"
);
assert.ok(
queryAll(".composer-fields .no-bump .d-icon-anchor").length === 1,
"no-bump icon is visible"
);
assert.ok(
queryAll(".composer-actions svg.d-icon-share").length === 0,
"reply icon is not visible"
);
});
test("replying to post as staff", async function (assert) {
@ -428,6 +492,10 @@ acceptance("Composer Actions With New Topic Draft", function (needs) {
queryAll("#reply-control .btn-primary.create .d-button-label").text(),
I18n.t("composer.create_shared_draft")
);
assert.ok(
queryAll(".composer-actions svg.d-icon-far-clipboard").length === 1,
"shared draft icon is visible"
);
assert.ok(queryAll("#reply-control.composing-shared-draft").length === 1);
await click(".modal-footer .btn.btn-default");

21
app/assets/javascripts/discourse/tests/acceptance/composer-test.js
View File

@ -460,7 +460,7 @@ acceptance("Composer", function (needs) {
await menu.selectRowByValue("toggleWhisper");
assert.ok(
queryAll(".composer-fields .whisper .d-icon-far-eye-slash").length === 1,
queryAll(".composer-actions svg.d-icon-far-eye-slash").length === 1,
"it sets the post type to whisper"
);
@ -468,7 +468,7 @@ acceptance("Composer", function (needs) {
await menu.selectRowByValue("toggleWhisper");
assert.ok(
queryAll(".composer-fields .whisper .d-icon-far-eye-slash").length === 0,
queryAll(".composer-actions svg.d-icon-far-eye-slash").length === 0,
"it removes the whisper mode"
);
@ -534,7 +534,7 @@ acceptance("Composer", function (needs) {
);
assert.ok(
queryAll(".composer-fields .whisper .d-icon-far-eye-slash").length === 1,
queryAll(".composer-actions svg.d-icon-far-eye-slash").length === 1,
"it sets the post type to whisper"
);
@ -769,6 +769,21 @@ acceptance("Composer", function (needs) {
);
};
test("reply button has envelope icon when replying to private message", async function (assert) {
await visit("/t/34");
await click("article#post_3 button.reply");
assert.equal(
queryAll(".save-or-cancel button.create").text().trim(),
I18n.t("composer.create_pm"),
"reply button says Message"
);
assert.ok(
queryAll(".save-or-cancel button.create svg.d-icon-envelope").length ===
1,
"reply button has envelope icon"
);
});
test("Image resizing buttons", async function (assert) {
await visit("/");
await click("#create-topic");

10
app/assets/javascripts/select-kit/addon/components/composer-actions.js
View File

@ -37,11 +37,19 @@ export default DropdownSelectBoxComponent.extend({
showFullTitle: false,
},
iconForComposerAction: computed("action", function () {
iconForComposerAction: computed("action", "whisper", "noBump", function () {
if (this.isEditing) {
return "pencil-alt";
} else if (this.action === CREATE_TOPIC) {
return "plus";
} else if (this.action === PRIVATE_MESSAGE) {
return "envelope";
} else if (this.action === CREATE_SHARED_DRAFT) {
return "far-clipboard";
} else if (this.whisper) {
return "far-eye-slash";
} else if (this.noBump) {
return "anchor";
} else {
return "share";
}