Extract out common "cancel" link functionality from modals

This commit is contained in:
Robin Ward
2017-09-13 13:23:19 -04:00
parent 4020409bbf
commit 6e48884274
18 changed files with 22 additions and 29 deletions

View File

@ -106,7 +106,7 @@ const AdminUser = Discourse.User.extend({
message = I18n.messageFormat('admin.user.delete_all_posts_confirm_MF', { "POSTS": user.get('post_count'), "TOPICS": user.get('topic_count') }), message = I18n.messageFormat('admin.user.delete_all_posts_confirm_MF', { "POSTS": user.get('post_count'), "TOPICS": user.get('topic_count') }),
buttons = [{ buttons = [{
"label": I18n.t("composer.cancel"), "label": I18n.t("composer.cancel"),
"class": "cancel-inline", "class": "d-modal-cancel",
"link": true "link": true
}, { }, {
"label": `${iconHTML('exclamation-triangle')} ` + I18n.t("admin.user.delete_all_posts"), "label": `${iconHTML('exclamation-triangle')} ` + I18n.t("admin.user.delete_all_posts"),

View File

@ -44,7 +44,7 @@ export default Ember.Service.extend({
const buttons = [ const buttons = [
{ {
label: I18n.t("composer.cancel"), label: I18n.t("composer.cancel"),
class: "cancel-inline", class: "d-modal-cancel",
link: true link: true
}, },
{ {

View File

@ -10,5 +10,5 @@
<div class="modal-footer"> <div class="modal-footer">
{{d-button action="upload" disabled=disabled class='btn btn-primary' icon='upload' label='admin.customize.theme.upload'}} {{d-button action="upload" disabled=disabled class='btn btn-primary' icon='upload' label='admin.customize.theme.upload'}}
<a href {{action "closeModal"}}>{{i18n 'cancel'}}</a> {{d-modal-cancel close=(action "closeModal")}}
</div> </div>

View File

@ -24,5 +24,5 @@
<div class="modal-footer"> <div class="modal-footer">
<button class='btn btn-primary' {{action "saveAll"}} disabled={{submitDisabled}}>{{i18n 'admin.badges.save'}}</button> <button class='btn btn-primary' {{action "saveAll"}} disabled={{submitDisabled}}>{{i18n 'admin.badges.save'}}</button>
<a {{action "cancel"}}>{{i18n 'cancel'}}</a> {{d-modal-cancel close=(action "closeModal")}}
</div> </div>

View File

@ -23,5 +23,5 @@
<div class="modal-footer"> <div class="modal-footer">
{{d-button action="importTheme" disabled=loading class='btn btn-primary' icon='upload' label='admin.customize.import'}} {{d-button action="importTheme" disabled=loading class='btn btn-primary' icon='upload' label='admin.customize.import'}}
<a href {{action "closeModal"}}>{{i18n 'cancel'}}</a> {{d-modal-cancel close=(action "closeModal")}}
</div> </div>

View File

@ -43,5 +43,5 @@
disabled=submitDisabled disabled=submitDisabled
icon="ban" icon="ban"
label="admin.user.suspend"}} label="admin.user.suspend"}}
<a {{action "closeModal"}} class="cancel-suspend">{{i18n 'cancel'}}</a> {{d-modal-cancel close=(action "closeModal")}}
</div> </div>

View File

@ -0,0 +1,3 @@
export default Ember.Component.extend({
tagName: ''
});

View File

@ -78,7 +78,7 @@ export default Ember.Controller.extend(CanCheckEmails, PreferencesTabController,
model = this.get('model'), model = this.get('model'),
buttons = [ buttons = [
{ label: I18n.t("cancel"), { label: I18n.t("cancel"),
class: "cancel-inline", class: "d-modal-cancel",
link: true, link: true,
callback: () => { this.set('deleting', false); } callback: () => { this.set('deleting', false); }
}, },

View File

@ -0,0 +1 @@
<a {{action close}} class='d-modal-cancel'>{{i18n 'cancel'}}</a>

View File

@ -32,5 +32,5 @@
<div class="modal-footer"> <div class="modal-footer">
{{d-button action="saveAvatarSelection" class="btn-primary" disabled=uploading label="save"}} {{d-button action="saveAvatarSelection" class="btn-primary" disabled=uploading label="save"}}
<a {{action "closeModal"}}>{{i18n 'cancel'}}</a> {{d-modal-cancel close=(action "closeModal")}}
</div> </div>

View File

@ -39,7 +39,7 @@
label="topic.topic_status_update.save" label="topic.topic_status_update.save"
action="saveTimer"}} action="saveTimer"}}
<a {{action "closeModal"}}>{{i18n 'cancel'}}</a> {{d-modal-cancel close=(action "closeModal")}}
{{conditional-loading-spinner size="small" condition=loading}} {{conditional-loading-spinner size="small" condition=loading}}
{{#if topicTimer.execute_at}} {{#if topicTimer.execute_at}}

View File

@ -107,5 +107,5 @@
</div> </div>
{{/d-modal-body}} {{/d-modal-body}}
<div class="modal-footer"> <div class="modal-footer">
<a class="pull-right" {{action "closeModal"}}>{{i18n "cancel"}}</a> {{d-modal-cancel close=(action "closeModal")}}
</div> </div>

View File

@ -7,5 +7,5 @@
<div class='modal-footer'> <div class='modal-footer'>
{{d-button class="btn-primary" action="jump" label="composer.modal_ok"}} {{d-button class="btn-primary" action="jump" label="composer.modal_ok"}}
{{d-button class="btn-danger" action="closeModal" label="composer.modal_cancel"}} {{d-modal-cancel close=(action "closeModal")}}
</div> </div>

View File

@ -15,7 +15,7 @@
label="groups.membership_request.submit" label="groups.membership_request.submit"
action="requestMember"}} action="requestMember"}}
<a {{action "closeModal"}}>{{i18n 'cancel'}}</a> {{d-modal-cancel close=(action "closeModal")}}
{{conditional-loading-spinner size="small" condition=loading}} {{conditional-loading-spinner size="small" condition=loading}}
</div> </div>
</form> </form>

View File

@ -42,6 +42,6 @@
<div class="modal-footer"> <div class="modal-footer">
{{d-button action="upload" class='btn-primary' icon=uploadIcon label='upload'}} {{d-button action="upload" class='btn-primary' icon=uploadIcon label='upload'}}
<a href {{action "closeModal"}}>{{i18n 'cancel'}}</a> {{d-modal-cancel close=(action "closeModal")}}
{{#if remote}}<a {{action "toggleShowMore"}} class="pull-right">{{i18n 'show_more'}}</a>{{/if}} {{#if remote}}<a {{action "toggleShowMore"}} class="pull-right">{{i18n 'show_more'}}</a>{{/if}}
</div> </div>

View File

@ -1,5 +1,4 @@
.suspend-user-modal { .suspend-user-modal {
font-size: 1.1em;
.duration-controls { .duration-controls {
margin-bottom: 1em; margin-bottom: 1em;
@ -17,5 +16,4 @@
box-sizing: border-box; box-sizing: border-box;
height: 2.5em; height: 2.5em;
} }
} }

View File

@ -246,13 +246,12 @@
color: $primary; color: $primary;
} }
} }
.cancel {
float: right;
margin-right: 5px;
}
} }
} }
.d-modal-cancel {
margin-left: 5px;
color: $primary-medium;
}
.delete-user-modal { .delete-user-modal {
.modal-footer { .modal-footer {
@ -265,17 +264,9 @@
display: inline-block; display: inline-block;
margin-left: 0; margin-left: 0;
} }
.cancel {
display: block;
margin-right: 5px;
}
} }
} }
.modal-footer .cancel-inline {
margin-left: 10px;
}
.invite-modal { .invite-modal {
overflow: visible; overflow: visible;
.ember-text-field { .ember-text-field {

View File

@ -10,7 +10,7 @@ QUnit.test("suspend a user - cancel", assert => {
assert.equal(find('.suspend-user-modal:visible').length, 1); assert.equal(find('.suspend-user-modal:visible').length, 1);
}); });
click('.cancel-suspend'); click('.d-modal-cancel');
andThen(() => { andThen(() => {
assert.equal(find('.suspend-user-modal:visible').length, 0); assert.equal(find('.suspend-user-modal:visible').length, 0);
}); });