UX: consistent share modal & popup, refactoring (#13759)
This commit is contained in:
Kris
GitHub
@@ -49,8 +49,11 @@ export default Component.extend({
|
||||
if (this.element) {
|
||||
const linkInput = this.element.querySelector("#share-link input");
|
||||
linkInput.value = this.link;
|
||||
linkInput.setSelectionRange(0, this.link.length);
|
||||
linkInput.focus();
|
||||
if (!this.site.mobileView) {
|
||||
// if the input is auto-focused on mobile, iOS requires two taps of the copy button
|
||||
linkInput.setSelectionRange(0, this.link.length);
|
||||
linkInput.focus();
|
||||
}
|
||||
}
|
||||
}, 200);
|
||||
},
|
||||
|
||||
@@ -4,13 +4,21 @@
|
||||
{{#if date}}
|
||||
<span class="date">{{displayDate}}</span>
|
||||
{{/if}}
|
||||
|
||||
{{d-button
|
||||
action=(action "close")
|
||||
class="btn btn-flat close"
|
||||
icon="times"
|
||||
aria-label="share.close"
|
||||
title="share.close"
|
||||
}}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="text" aria-label={{i18n "share.url"}}>
|
||||
<div class="share-link-container">
|
||||
<input class="share-link-input" type="text" aria-label={{i18n "share.url"}}> {{copy-button selector="input.share-link-input"}}
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<div class="share-link-actions">
|
||||
<div class="sources">
|
||||
{{#each sources as |s|}}
|
||||
{{share-source source=s title=model.title action=(action "share")}}
|
||||
@@ -19,27 +27,26 @@
|
||||
|
||||
<div class="alt-actions">
|
||||
{{#if topic.details.can_reply_as_new_topic}}
|
||||
<div class="reply-as-new-topic">
|
||||
{{#if topic.isPrivateMessage}}
|
||||
<a href class="new-topic" {{action "replyAsNewTopic"}} aria-label={{i18n "post.reply_as_new_private_message"}} title={{i18n "post.reply_as_new_private_message"}}>
|
||||
{{d-icon "plus"}}
|
||||
{{i18n "user.new_private_message"}}
|
||||
</a>
|
||||
{{else}}
|
||||
<a href class="new-topic" {{action "replyAsNewTopic"}} aria-label={{i18n "post.reply_as_new_topic"}} title={{i18n "post.reply_as_new_topic"}}>
|
||||
{{d-icon "plus"}}
|
||||
{{i18n "topic.create"}}
|
||||
</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#if topic.isPrivateMessage}}
|
||||
{{d-button
|
||||
action=(action "replyAsNewTopic")
|
||||
class="btn btn-default new-topic"
|
||||
icon="plus"
|
||||
aria-label="post.reply_as_new_private_message"
|
||||
title="post.reply_as_new_private_message"
|
||||
label="user.new_private_message"
|
||||
}}
|
||||
{{else}}
|
||||
{{d-button
|
||||
action=(action "replyAsNewTopic")
|
||||
class="btn btn-default new-topic"
|
||||
icon="plus"
|
||||
aria-label="post.reply_as_new_topic"
|
||||
title="post.reply_as_new_topic"
|
||||
label="topic.create"
|
||||
}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{d-button
|
||||
action=(action "close")
|
||||
class="btn btn-flat close"
|
||||
icon="times"
|
||||
aria-label="share.close"
|
||||
title="share.close"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1 +1,7 @@
|
||||
{{d-button action=(action "share" source) class=(concat "share-" source.id) translatedTitle=source.title translatedAriaLabel=source.title icon=(if source.icon source.icon source.htmlIcon)}}
|
||||
{{d-button
|
||||
action=(action "share" source)
|
||||
class=(concat "btn-default share-" source.id)
|
||||
translatedTitle=source.title
|
||||
translatedAriaLabel=source.title
|
||||
icon=(if source.icon source.icon source.htmlIcon)
|
||||
}}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<form>
|
||||
<div class="input-group invite-link">
|
||||
<label for="invite-link">{{i18n "user.invited.invite.instructions"}}</label>
|
||||
<div class="invite-input-with-button">
|
||||
<div class="share-link-container">
|
||||
{{input
|
||||
name="invite-link"
|
||||
class="invite-link"
|
||||
@@ -19,7 +19,7 @@
|
||||
|
||||
<div class="input-group input-email">
|
||||
<label for="invite-email">{{d-icon "envelope"}}{{i18n "user.invited.invite.restrict_email"}}</label>
|
||||
<div class="invite-input-with-button">
|
||||
<div class="invite-email-container">
|
||||
{{input
|
||||
id="invite-email"
|
||||
value=buffered.email
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<form>
|
||||
<div class="input-group invite-link">
|
||||
<label for="invite-link">{{i18n "topic.share.instructions"}}</label>
|
||||
<div class="invite-input-with-button">
|
||||
<div class="share-link-container">
|
||||
{{input
|
||||
name="invite-link"
|
||||
class="invite-link"
|
||||
@@ -12,50 +12,51 @@
|
||||
{{copy-button selector="input.invite-link"}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="share-link-actions">
|
||||
<div class="sources">
|
||||
{{#each sources as |s|}}
|
||||
{{share-source source=s title=topic.title action=(action "share")}}
|
||||
{{/each}}
|
||||
|
||||
<div class="sources">
|
||||
{{#each sources as |s|}}
|
||||
{{share-source source=s title=topic.title action=(action "share")}}
|
||||
{{/each}}
|
||||
|
||||
{{d-button
|
||||
class="btn-default"
|
||||
label="topic.share.notify_users.title"
|
||||
icon="hand-point-right"
|
||||
action=(action "toggleNotifyUsers")
|
||||
}}
|
||||
|
||||
{{#if allowInvites}}
|
||||
{{d-button
|
||||
class="btn-default"
|
||||
label="topic.share.invite_users"
|
||||
icon="user-plus"
|
||||
action=(action "inviteUsers")
|
||||
label="topic.share.notify_users.title"
|
||||
icon="hand-point-right"
|
||||
action=(action "toggleNotifyUsers")
|
||||
}}
|
||||
|
||||
{{#if allowInvites}}
|
||||
{{d-button
|
||||
class="btn-default"
|
||||
label="topic.share.invite_users"
|
||||
icon="user-plus"
|
||||
action=(action "inviteUsers")
|
||||
}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if showNotifyUsers}}
|
||||
<div class="input-group invite-users">
|
||||
<label for="invite-users">{{i18n "topic.share.notify_users.instructions"}}</label>
|
||||
<div class="notify-user-input">
|
||||
{{user-chooser
|
||||
value=users
|
||||
onChange=(action "onChangeUsers")
|
||||
options=(hash
|
||||
topicId=topic.id
|
||||
maximum=(unless currentUser.staff 1)
|
||||
excludeCurrentUser=true
|
||||
)
|
||||
}}
|
||||
{{d-button
|
||||
icon="check"
|
||||
class="btn-primary"
|
||||
disabled=(if users false true)
|
||||
action=(action "notifyUsers")
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if showNotifyUsers}}
|
||||
<div class="input-group invite-users">
|
||||
<label for="invite-users">{{i18n "topic.share.notify_users.instructions"}}</label>
|
||||
<div class="invite-input-with-button">
|
||||
{{user-chooser
|
||||
value=users
|
||||
onChange=(action "onChangeUsers")
|
||||
options=(hash
|
||||
topicId=topic.id
|
||||
maximum=(unless currentUser.staff 1)
|
||||
excludeCurrentUser=true
|
||||
)
|
||||
}}
|
||||
{{d-button
|
||||
icon="check"
|
||||
class="btn-primary"
|
||||
disabled=(if users false true)
|
||||
action=(action "notifyUsers")
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</form>
|
||||
{{/d-modal-body}}
|
||||
|
||||
@@ -30,7 +30,7 @@ acceptance("Share and Invite modal", function (needs) {
|
||||
"it shows the topic sharing url"
|
||||
);
|
||||
|
||||
assert.ok(count("button[class^='share-']") > 1, "it shows social sources");
|
||||
assert.ok(count("button[class*='share-']") > 1, "it shows social sources");
|
||||
|
||||
assert.ok(
|
||||
exists(".btn[aria-label='Notify']"),
|
||||
|
||||
@@ -40,7 +40,7 @@ acceptance("Topic", function (needs) {
|
||||
test("Reply as new topic", async function (assert) {
|
||||
await visit("/t/internationalization-localization/280");
|
||||
await click("button.share:nth-of-type(1)");
|
||||
await click(".reply-as-new-topic a");
|
||||
await click("button.new-topic");
|
||||
|
||||
assert.ok(exists(".d-editor-input"), "the composer input is visible");
|
||||
|
||||
@@ -59,7 +59,7 @@ acceptance("Topic", function (needs) {
|
||||
test("Reply as new message", async function (assert) {
|
||||
await visit("/t/pm-for-testing/12");
|
||||
await click("button.share:nth-of-type(1)");
|
||||
await click(".reply-as-new-topic a");
|
||||
await click("button.new-topic");
|
||||
|
||||
assert.ok(exists(".d-editor-input"), "the composer input is visible");
|
||||
|
||||
|
||||
Reference in New Issue
Block a user