diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared')
6 files changed, 170 insertions, 71 deletions
diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue index 16c0a8efcd2..564fc5029af 100644 --- a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue +++ b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue @@ -1,4 +1,6 @@ <script> + import Icon from '../../../vue_shared/components/icon.vue'; + export default { props: { isLocked: { @@ -14,12 +16,16 @@ }, }, + components: { + Icon, + }, + computed: { - iconClass() { - return { - 'fa-eye-slash': this.isConfidential, - 'fa-lock': this.isLocked, - }; + warningIcon() { + if (this.isConfidential) return 'eye-slash'; + if (this.isLocked) return 'lock'; + + return ''; }, isLockedAndConfidential() { @@ -30,12 +36,13 @@ </script> <template> <div class="issuable-note-warning"> - <i - aria-hidden="true" - class="fa icon" - :class="iconClass" - v-if="!isLockedAndConfidential" - ></i> + <icon + :name="warningIcon" + :size="16" + class="icon inline" + aria-hidden="true" + v-if="!isLockedAndConfidential"> + </icon> <span v-if="isLockedAndConfidential"> {{ __('This issue is confidential and locked.') }} diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue index 6670b554faf..247943f83e6 100644 --- a/app/assets/javascripts/vue_shared/components/loading_button.vue +++ b/app/assets/javascripts/vue_shared/components/loading_button.vue @@ -26,10 +26,20 @@ export default { required: false, default: false, }, + disabled: { + type: Boolean, + required: false, + default: false, + }, label: { type: String, required: false, }, + containerClass: { + type: String, + required: false, + default: 'btn btn-align-content', + }, }, components: { loadingIcon, @@ -44,10 +54,10 @@ export default { <template> <button - class="btn btn-align-content" @click="onClick" type="button" - :disabled="loading" + :class="containerClass" + :disabled="loading || disabled" > <transition name="fade"> <loading-icon diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue index 6511828e982..a873e00d0f3 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/field.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue @@ -47,8 +47,10 @@ }, }, methods: { - toggleMarkdownPreview() { - this.previewMarkdown = !this.previewMarkdown; + showPreviewTab() { + if (this.previewMarkdown) return; + + this.previewMarkdown = true; /* Can't use `$refs` as the component is technically in the parent component @@ -56,20 +58,22 @@ */ const text = this.$slots.textarea[0].elm.value; - if (!this.previewMarkdown) { - this.markdownPreview = ''; - } else if (text) { + if (text) { this.markdownPreviewLoading = true; this.$http.post(this.markdownPreviewPath, { text }) .then(resp => resp.json()) - .then((data) => { - this.renderMarkdown(data); - }) + .then(data => this.renderMarkdown(data)) .catch(() => new Flash('Error loading markdown preview')); } else { this.renderMarkdown(); } }, + + showWriteTab() { + this.markdownPreview = ''; + this.previewMarkdown = false; + }, + renderMarkdown(data = {}) { this.markdownPreviewLoading = false; this.markdownPreview = data.body || 'Nothing to preview.'; @@ -106,7 +110,8 @@ ref="gl-form"> <markdown-header :preview-markdown="previewMarkdown" - @toggle-markdown="toggleMarkdownPreview" /> + @preview-markdown="showPreviewTab" + @write-markdown="showWriteTab" /> <div class="md-write-holder" v-show="!previewMarkdown"> diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue index 7541731083b..70f5fc1d664 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/header.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue @@ -18,23 +18,31 @@ icon, }, methods: { - toggleMarkdownPreview(e, form) { - if (form && !form.find('.js-vue-markdown-field').length) { - return; - } else if (e.target.blur) { - e.target.blur(); - } + isMarkdownForm(form) { + return form && !form.find('.js-vue-markdown-field').length; + }, + + previewMarkdownTab(event, form) { + if (event.target.blur) event.target.blur(); + if (this.isMarkdownForm(form)) return; + + this.$emit('preview-markdown'); + }, + + writeMarkdownTab(event, form) { + if (event.target.blur) event.target.blur(); + if (this.isMarkdownForm(form)) return; - this.$emit('toggle-markdown'); + this.$emit('write-markdown'); }, }, mounted() { - $(document).on('markdown-preview:show.vue', this.toggleMarkdownPreview); - $(document).on('markdown-preview:hide.vue', this.toggleMarkdownPreview); + $(document).on('markdown-preview:show.vue', this.previewMarkdownTab); + $(document).on('markdown-preview:hide.vue', this.writeMarkdownTab); }, beforeDestroy() { - $(document).on('markdown-preview:show.vue', this.toggleMarkdownPreview); - $(document).off('markdown-preview:hide.vue', this.toggleMarkdownPreview); + $(document).off('markdown-preview:show.vue', this.previewMarkdownTab); + $(document).off('markdown-preview:hide.vue', this.writeMarkdownTab); }, }; </script> @@ -44,17 +52,19 @@ <ul class="nav-links clearfix"> <li :class="{ active: !previewMarkdown }"> <a + class="js-write-link" href="#md-write-holder" tabindex="-1" - @click.prevent="toggleMarkdownPreview($event)"> + @click.prevent="writeMarkdownTab($event)"> Write </a> </li> <li :class="{ active: previewMarkdown }"> <a + class="js-preview-link" href="#md-preview-holder" tabindex="-1" - @click.prevent="toggleMarkdownPreview($event)"> + @click.prevent="previewMarkdownTab($event)"> Preview </a> </li> diff --git a/app/assets/javascripts/vue_shared/components/popup_dialog.vue b/app/assets/javascripts/vue_shared/components/popup_dialog.vue index 9e8c10bdc1a..47efee64c6e 100644 --- a/app/assets/javascripts/vue_shared/components/popup_dialog.vue +++ b/app/assets/javascripts/vue_shared/components/popup_dialog.vue @@ -5,17 +5,27 @@ export default { props: { title: { type: String, - required: true, + 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, @@ -30,6 +40,11 @@ export default { type: String, required: true, }, + submitDisabled: { + type: Boolean, + required: false, + default: false, + }, }, computed: { @@ -57,43 +72,58 @@ export default { </script> <template> -<div - class="modal popup-dialog" - role="dialog" - tabindex="-1"> - <div class="modal-dialog" role="document"> - <div class="modal-content"> - <div class="modal-header"> - <button type="button" - class="close" - @click="close" - aria-label="Close"> - <span aria-hidden="true">×</span> - </button> - <h4 class="modal-title">{{this.title}}</h4> - </div> - <div class="modal-body"> - <slot name="body" :text="text"> - <p>{{text}}</p> - </slot> - </div> - <div class="modal-footer"> - <button - type="button" - class="btn" - :class="btnCancelKindClass" - @click="close"> - {{ closeButtonLabel }} - </button> - <button - type="button" - class="btn" - :class="btnKindClass" - @click="emitSubmit(true)"> - {{ primaryButtonLabel }} - </button> +<div class="modal-open"> + <div + class="modal popup-dialog" + role="dialog" + tabindex="-1" + > + <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="close" + 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="btn pull-left" + :class="btnCancelKindClass" + @click="close"> + {{ closeButtonLabel }} + </button> + <button + type="button" + class="btn pull-right" + :disabled="submitDisabled" + :class="btnKindClass" + @click="emitSubmit(true)"> + {{ primaryButtonLabel }} + </button> + </div> </div> </div> </div> + <div class="modal-backdrop fade in" /> </div> </template> diff --git a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue new file mode 100644 index 00000000000..b06493e6c66 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue @@ -0,0 +1,37 @@ +<script> + export default { + props: { + small: { + type: Boolean, + required: false, + default: false, + }, + lines: { + type: Number, + required: false, + default: 6, + }, + }, + computed: { + lineClasses() { + return new Array(this.lines).fill().map((_, i) => `skeleton-line-${i + 1}`); + }, + }, + }; +</script> + +<template> + <div + class="animation-container" + :class="{ + 'animation-container-small': small, + }" + > + <div + v-for="(css, index) in lineClasses" + :key="index" + :class="css" + > + </div> + </div> +</template> |