diff --git a/js/components/forms/base_form.js b/js/components/forms/base_form.js index dc32687a..074032c2 100644 --- a/js/components/forms/base_form.js +++ b/js/components/forms/base_form.js @@ -1,3 +1,5 @@ +import ally from 'ally.js' + import FormMixin from '../../mixins/form' import textinput from '../text_input' import optionsinput from '../options_input' @@ -19,4 +21,34 @@ export default { levelofwarrant, }, mixins: [FormMixin], + methods: { + closeModal: function(name) { + this.activeModal = null + this.$root.$emit('modalOpen', false) + if (this.$root.allyHandler) this.$root.allyHandler.disengage() + }, + + openModal: function(name) { + this.$root.activeModal = name + this.$root.$emit('modalOpen', true) + const idSelector = `#${this.$root.modalId}` + + this.$root.allyHandler = ally.maintain.disabled({ + filter: idSelector, + }) + }, + }, + data: function() { + return { + activeModal: null, + allyHandler: null, + } + }, + computed: { + modalId: function() { + return !!this.$root.activeModal + ? `modal--${this.$root.activeModal}` + : null + }, + }, } diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 7a33345b..1f24f582 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -297,7 +297,11 @@ .members-table-footer { float: right; - padding: 3 * $gap; + padding: 3 * $gap 0; + + .action-group.save { + padding-right: 3 * $gap; + } } a.modal-link.icon-link { diff --git a/templates/fragments/admin/portfolio_members.html b/templates/fragments/admin/portfolio_members.html index 51c8ae33..75b90078 100644 --- a/templates/fragments/admin/portfolio_members.html +++ b/templates/fragments/admin/portfolio_members.html @@ -10,51 +10,59 @@ {% if g.matchesPath("portfolio-members") %} {% include "fragments/flash.html" %} {% endif %} -