diff options
author | Clement Ho <ClemMakesApps@gmail.com> | 2018-09-21 03:53:19 +0300 |
---|---|---|
committer | Clement Ho <ClemMakesApps@gmail.com> | 2018-09-21 03:53:19 +0300 |
commit | e05b99b8274a355330173dce894b4214e204d3b3 (patch) | |
tree | 61ab2d44a836426fe06b3a6b66db969081acabdd | |
parent | c604438a9f5a0cfa4c6bf900662285336f890698 (diff) |
Use eventhub to trigger gl-ui-modalch-modal-trigger-eventhub
4 files changed, 22 insertions, 11 deletions
diff --git a/app/assets/javascripts/header.js b/app/assets/javascripts/header.js index 0c38a1afaf7..610a4be2c46 100644 --- a/app/assets/javascripts/header.js +++ b/app/assets/javascripts/header.js @@ -3,7 +3,7 @@ import Vue from 'vue'; import Translate from '~/vue_shared/translate'; import { highCountTrim } from '~/lib/utils/text_utility'; import setStatusModalTrigger from './set_status_modal/set_status_modal_trigger.vue'; -// import setStatusModalWrapper from './set_status_modal/set_status_modal_wrapper.vue'; +import setStatusModalWrapper from './set_status_modal/set_status_modal_wrapper.vue'; /** * Updates todo counter when todos are toggled. @@ -24,7 +24,7 @@ export default function initTodoToggle() { document.addEventListener('DOMContentLoaded', () => { const setStatusModalTriggerEl = document.querySelector('.js-set-status-modal-trigger'); - // const setStatusModalWrapperEl = document.querySelector('.js-set-status-modal-wrapper'); + const setStatusModalWrapperEl = document.querySelector('.js-set-status-modal-wrapper'); if (setStatusModalTriggerEl || setStatusModalWrapperEl) { Vue.use(Translate); @@ -36,11 +36,11 @@ document.addEventListener('DOMContentLoaded', () => { }, }); - // new Vue({ - // el: setStatusModalWrapperEl, - // render(createElement) { - // return createElement(setStatusModalWrapper); - // }, - // }); + new Vue({ + el: setStatusModalWrapperEl, + render(createElement) { + return createElement(setStatusModalWrapper); + }, + }); } }); diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_trigger.vue b/app/assets/javascripts/set_status_modal/set_status_modal_trigger.vue index 1bae4dc8216..217da735b7a 100644 --- a/app/assets/javascripts/set_status_modal/set_status_modal_trigger.vue +++ b/app/assets/javascripts/set_status_modal/set_status_modal_trigger.vue @@ -1,5 +1,6 @@ <script> import { s__, sprintf } from '~/locale'; +import eventHub from './eventHub'; export default { computed: { @@ -11,6 +12,9 @@ export default { onSubmit() { console.log('Do something'); }, + openModal() { + eventHub.$emit('openModal'); + } }, }; </script> @@ -18,13 +22,13 @@ export default { <template> <li> <button - v-gl-modal="modalId" type="button" class="btn menu-item" + @click="openModal" > {{ s__('SetStatusModal|Set a status') }} </button> - <gl-ui-modal + <!-- <gl-ui-modal :title="s__('SetStatusModal|Set a Status')" :ok-title="s__('SetStatusModal|Set status')" :modal-id="modalId" @@ -55,6 +59,6 @@ export default { name="emoji" /> </form> - </gl-ui-modal> + </gl-ui-modal> --> </li> </template> diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue index 7faa53ad485..8f44c311429 100644 --- a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue +++ b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue @@ -8,10 +8,16 @@ export default { return 'set-status-modal'; }, }, + mounted() { + eventHub.$on('openModal', this.openModal); + }, methods: { onSubmit() { console.log('Do something'); }, + openModal() { + this.$root.$emit('bv::show::modal', this.modalId) + }, }, }; </script> diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml index 044b49c12cc..dc1d4f8565f 100644 --- a/app/views/layouts/header/_default.html.haml +++ b/app/views/layouts/header/_default.html.haml @@ -70,6 +70,7 @@ - sign_in_text = allow_signup? ? _('Sign in / Register') : _('Sign in') = link_to sign_in_text, new_session_path(:user, redirect_to_referer: 'yes'), class: 'btn btn-sign-in' + .js-set-status-modal-wrapper %button.navbar-toggler.d-block.d-sm-none{ type: 'button' } %span.sr-only= _('Toggle navigation') = sprite_icon('ellipsis_h', size: 12, css_class: 'more-icon js-navbar-toggle-right') |