diff options
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/confirm_modal.js | 33 | ||||
-rw-r--r-- | app/assets/javascripts/editor/editor_lite.js | 1 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/components/confirm_modal.vue | 58 | ||||
-rw-r--r-- | app/assets/stylesheets/framework.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/editor-lite.scss | 5 |
5 files changed, 35 insertions, 63 deletions
diff --git a/app/assets/javascripts/confirm_modal.js b/app/assets/javascripts/confirm_modal.js index ff29d5fa355..4b4fdf03873 100644 --- a/app/assets/javascripts/confirm_modal.js +++ b/app/assets/javascripts/confirm_modal.js @@ -3,40 +3,9 @@ import ConfirmModal from '~/vue_shared/components/confirm_modal.vue'; const mountConfirmModal = () => { return new Vue({ - data() { - return { - path: '', - method: '', - modalAttributes: null, - showModal: false, - }; - }, - mounted() { - document.querySelectorAll('.js-confirm-modal-button').forEach(button => { - button.addEventListener('click', e => { - e.preventDefault(); - - this.path = button.dataset.path; - this.method = button.dataset.method; - this.modalAttributes = JSON.parse(button.dataset.modalAttributes); - this.showModal = true; - }); - }); - }, - methods: { - dismiss() { - this.showModal = false; - }, - }, render(h) { return h(ConfirmModal, { - props: { - path: this.path, - method: this.method, - modalAttributes: this.modalAttributes, - showModal: this.showModal, - }, - on: { dismiss: this.dismiss }, + props: { selector: '.js-confirm-modal-button' }, }); }, }).$mount(); diff --git a/app/assets/javascripts/editor/editor_lite.js b/app/assets/javascripts/editor/editor_lite.js index c2723b1d506..663d14bcfcb 100644 --- a/app/assets/javascripts/editor/editor_lite.js +++ b/app/assets/javascripts/editor/editor_lite.js @@ -11,6 +11,7 @@ export default class Editor { this.instance = null; this.model = null; this.options = { + extraEditorClassName: 'gl-editor-lite', ...defaultEditorOptions, ...options, }; diff --git a/app/assets/javascripts/vue_shared/components/confirm_modal.vue b/app/assets/javascripts/vue_shared/components/confirm_modal.vue index c77827205d6..52ff906ccec 100644 --- a/app/assets/javascripts/vue_shared/components/confirm_modal.vue +++ b/app/assets/javascripts/vue_shared/components/confirm_modal.vue @@ -1,49 +1,45 @@ <script> import { GlModal } from '@gitlab/ui'; import csrf from '~/lib/utils/csrf'; +import { uniqueId } from 'lodash'; export default { components: { GlModal, }, props: { - modalAttributes: { - type: Object, - required: false, - default: () => { - return {}; - }, - }, - path: { - type: String, - required: false, - default: '', - }, - method: { + selector: { type: String, - required: false, - default: '', - }, - showModal: { - type: Boolean, - required: false, - default: false, + required: true, }, }, - watch: { - showModal(val) { - if (val) { - // Wait for v-if to render - this.$nextTick(() => { - this.openModal(); - }); - } - }, + data() { + return { + modalId: uniqueId('confirm-modal-'), + path: '', + method: '', + modalAttributes: {}, + }; + }, + mounted() { + document.querySelectorAll(this.selector).forEach(button => { + button.addEventListener('click', e => { + e.preventDefault(); + + this.path = button.dataset.path; + this.method = button.dataset.method; + this.modalAttributes = JSON.parse(button.dataset.modalAttributes); + this.openModal(); + }); + }); }, methods: { openModal() { this.$refs.modal.show(); }, + closeModal() { + this.$refs.modal.hide(); + }, submitModal() { this.$refs.form.submit(); }, @@ -54,11 +50,11 @@ export default { <template> <gl-modal - v-if="showModal" ref="modal" + :modal-id="modalId" v-bind="modalAttributes" @primary="submitModal" - @canceled="$emit('dismiss')" + @cancel="closeModal" > <form ref="form" :action="path" method="post"> <!-- Rails workaround for <form method="delete" /> diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index 9032dd28b80..338a8c5497c 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -70,3 +70,4 @@ @import 'framework/system_messages'; @import "framework/spinner"; @import 'framework/card'; +@import 'framework/editor-lite'; diff --git a/app/assets/stylesheets/framework/editor-lite.scss b/app/assets/stylesheets/framework/editor-lite.scss new file mode 100644 index 00000000000..75d511d7f66 --- /dev/null +++ b/app/assets/stylesheets/framework/editor-lite.scss @@ -0,0 +1,5 @@ +.monaco-editor.gl-editor-lite { + .line-numbers { + @include gl-pt-0; + } +} |