diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared')
4 files changed, 202 insertions, 189 deletions
diff --git a/app/assets/javascripts/vue_shared/components/expand_button.vue b/app/assets/javascripts/vue_shared/components/expand_button.vue index 05e48ed297f..3595a9389e9 100644 --- a/app/assets/javascripts/vue_shared/components/expand_button.vue +++ b/app/assets/javascripts/vue_shared/components/expand_button.vue @@ -11,7 +11,7 @@ * </expand-button> */ export default { - name: 'expandButton', + name: 'ExpandButton', data() { return { isCollapsed: true, diff --git a/app/assets/javascripts/vue_shared/components/modal.vue b/app/assets/javascripts/vue_shared/components/modal.vue index 00089dfef38..66dfd991377 100644 --- a/app/assets/javascripts/vue_shared/components/modal.vue +++ b/app/assets/javascripts/vue_shared/components/modal.vue @@ -1,143 +1,151 @@ <script> -export default { - name: 'modal', + export default { + name: 'Modal', - props: { - id: { - type: String, - required: false, + props: { + id: { + type: String, + required: false, + default: '', + }, + title: { + type: String, + required: false, + default: '', + }, + text: { + type: String, + required: false, + default: '', + }, + hideFooter: { + type: Boolean, + required: false, + default: false, + }, + kind: { + type: String, + required: false, + default: 'primary', + }, + modalDialogClass: { + type: String, + required: false, + default: '', + }, + closeKind: { + type: String, + required: false, + default: 'default', + }, + closeButtonLabel: { + type: String, + required: false, + default: 'Cancel', + }, + primaryButtonLabel: { + type: String, + required: false, + default: '', + }, + submitDisabled: { + type: Boolean, + required: false, + default: false, + }, }, - title: { - type: String, - required: false, - }, - text: { - type: String, - required: false, - }, - hideFooter: { - type: Boolean, - required: false, - default: false, - }, - kind: { - type: String, - required: false, - default: 'primary', - }, - modalDialogClass: { - type: String, - required: false, - default: '', - }, - closeKind: { - type: String, - required: false, - default: 'default', - }, - closeButtonLabel: { - type: String, - required: false, - default: 'Cancel', - }, - primaryButtonLabel: { - type: String, - required: false, - default: '', - }, - submitDisabled: { - type: Boolean, - required: false, - default: false, - }, - }, - computed: { - btnKindClass() { - return { - [`btn-${this.kind}`]: true, - }; + computed: { + btnKindClass() { + return { + [`btn-${this.kind}`]: true, + }; + }, + btnCancelKindClass() { + return { + [`btn-${this.closeKind}`]: true, + }; + }, }, - btnCancelKindClass() { - return { - [`btn-${this.closeKind}`]: true, - }; - }, - }, - methods: { - emitCancel(event) { - this.$emit('cancel', event); - }, - emitSubmit(event) { - this.$emit('submit', event); + methods: { + emitCancel(event) { + this.$emit('cancel', event); + }, + emitSubmit(event) { + this.$emit('submit', event); + }, }, - }, -}; + }; </script> <template> -<div class="modal-open"> - <div - :id="id" - class="modal" - :class="id ? '' : 'show'" - role="dialog" - tabindex="-1" - > + <div class="modal-open"> <div - :class="modalDialogClass" - class="modal-dialog" - role="document" + :id="id" + class="modal" + :class="id !== '' ? '' : 'show'" + role="dialog" + tabindex="-1" > - <div class="modal-content"> - <div class="modal-header"> - <slot name="header"> - <h4 class="modal-title pull-left"> - {{this.title}} - </h4> + <div + :class="modalDialogClass" + class="modal-dialog" + role="document" + > + <div class="modal-content"> + <div class="modal-header"> + <slot name="header"> + <h4 class="modal-title pull-left"> + {{ this.title }} + </h4> + <button + type="button" + class="close pull-right" + @click="emitCancel($event)" + data-dismiss="modal" + aria-label="Close" + > + <span aria-hidden="true">×</span> + </button> + </slot> + </div> + <div class="modal-body"> + <slot name="body" :text="text"> + <p>{{ this.text }}</p> + </slot> + </div> + <div + class="modal-footer" + v-if="!hideFooter" + > <button type="button" - class="close pull-right" + class="btn pull-left" + :class="btnCancelKindClass" @click="emitCancel($event)" data-dismiss="modal" - aria-label="Close" > - <span aria-hidden="true">×</span> + {{ closeButtonLabel }} </button> - </slot> - </div> - <div class="modal-body"> - <slot name="body" :text="text"> - <p>{{this.text}}</p> - </slot> - </div> - <div class="modal-footer" v-if="!hideFooter"> - <button - type="button" - class="btn pull-left" - :class="btnCancelKindClass" - @click="emitCancel($event)" - data-dismiss="modal"> - {{ closeButtonLabel }} - </button> - <button - v-if="primaryButtonLabel" - type="button" - class="btn pull-right js-primary-button" - :disabled="submitDisabled" - :class="btnKindClass" - @click="emitSubmit($event)" - data-dismiss="modal"> - {{ primaryButtonLabel }} - </button> + <button + v-if="primaryButtonLabel" + type="button" + class="btn pull-right js-primary-button" + :disabled="submitDisabled" + :class="btnKindClass" + @click="emitSubmit($event)" + data-dismiss="modal" + > + {{ primaryButtonLabel }} + </button> + </div> </div> </div> </div> + <div + v-if="id !== ''" + class="modal-backdrop fade in"> + </div> </div> - <div - v-if="!id" - class="modal-backdrop fade in"> - </div> -</div> </template> diff --git a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue index 16d60bb2876..c35621c9ef3 100644 --- a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue +++ b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue @@ -1,85 +1,86 @@ <script> -import modal from './modal.vue'; + import modal from './modal.vue'; -export default { - name: 'recaptcha-modal', + export default { + name: 'RecaptchaModal', - props: { - html: { - type: String, - required: false, - default: '', + components: { + modal, }, - }, - data() { - return { - script: {}, - scriptSrc: 'https://www.google.com/recaptcha/api.js', - }; - }, + props: { + html: { + type: String, + required: false, + default: '', + }, + }, - components: { - modal, - }, + data() { + return { + script: {}, + scriptSrc: 'https://www.google.com/recaptcha/api.js', + }; + }, - methods: { - appendRecaptchaScript() { - this.removeRecaptchaScript(); + watch: { + html() { + this.appendRecaptchaScript(); + }, + }, - const script = document.createElement('script'); - script.src = this.scriptSrc; - script.classList.add('js-recaptcha-script'); - script.async = true; - script.defer = true; + mounted() { + window.recaptchaDialogCallback = this.submit.bind(this); + }, - this.script = script; + methods: { + appendRecaptchaScript() { + this.removeRecaptchaScript(); - document.body.appendChild(script); - }, + const script = document.createElement('script'); + script.src = this.scriptSrc; + script.classList.add('js-recaptcha-script'); + script.async = true; + script.defer = true; - removeRecaptchaScript() { - if (this.script instanceof Element) this.script.remove(); - }, + this.script = script; - close() { - this.removeRecaptchaScript(); - this.$emit('close'); - }, + document.body.appendChild(script); + }, - submit() { - this.$el.querySelector('form').submit(); - }, - }, + removeRecaptchaScript() { + if (this.script instanceof Element) this.script.remove(); + }, - watch: { - html() { - this.appendRecaptchaScript(); - }, - }, + close() { + this.removeRecaptchaScript(); + this.$emit('close'); + }, - mounted() { - window.recaptchaDialogCallback = this.submit.bind(this); - }, -}; + submit() { + this.$el.querySelector('form').submit(); + }, + }, + }; </script> <template> -<modal - kind="warning" - class="recaptcha-modal js-recaptcha-modal" - :hide-footer="true" - :title="__('Please solve the reCAPTCHA')" - @cancel="close" -> - <div slot="body"> - <p> - {{__('We want to be sure it is you, please confirm you are not a robot.')}} - </p> - <div - ref="recaptcha" - v-html="html" - ></div> - </div> -</modal> + <modal + kind="warning" + class="recaptcha-modal js-recaptcha-modal" + :hide-footer="true" + :title="__('Please solve the reCAPTCHA')" + @cancel="close" + > + <div slot="body"> + <p> + {{ __('We want to be sure it is you, please confirm you are not a robot.') }} + </p> + <div + ref="recaptcha" + v-html="html" + > + </div> + </div> + </modal> </template> diff --git a/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue b/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue index a5dfcd7ffee..8211d425b1f 100644 --- a/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue +++ b/app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue @@ -24,7 +24,11 @@ <i aria-label="toggle collapse" class="fa" - :class="{ 'fa-angle-double-right': !collapsed, 'fa-angle-double-left': collapsed }" - /> + :class="{ + 'fa-angle-double-right': !collapsed, + 'fa-angle-double-left': collapsed + }" + > + </i> </button> </template> |