diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared')
5 files changed, 186 insertions, 77 deletions
diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue index caa28bff6db..5b6c6e8d0b9 100644 --- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue +++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue @@ -1,52 +1,64 @@ <script> -import ciIcon from './ci_icon.vue'; -/** - * Renders CI Badge link with CI icon and status text based on - * API response shared between all places where it is used. - * - * Receives status object containing: - * status: { - * details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url - * group:"running" // used for CSS class - * icon: "icon_status_running" // used to render the icon - * label:"running" // used for potential tooltip - * text:"running" // text rendered - * } - * - * Used in: - * - Pipelines table - first column - * - Jobs table - first column - * - Pipeline show view - header - * - Job show view - header - * - MR widget - */ + import ciIcon from './ci_icon.vue'; + import tooltip from '../directives/tooltip'; + /** + * Renders CI Badge link with CI icon and status text based on + * API response shared between all places where it is used. + * + * Receives status object containing: + * status: { + * details_path: "/gitlab-org/gitlab-ce/pipelines/8150156" // url + * group:"running" // used for CSS class + * icon: "icon_status_running" // used to render the icon + * label:"running" // used for potential tooltip + * text:"running" // text rendered + * } + * + * Used in: + * - Pipelines table - first column + * - Jobs table - first column + * - Pipeline show view - header + * - Job show view - header + * - MR widget + */ -export default { - props: { - status: { - type: Object, - required: true, + export default { + props: { + status: { + type: Object, + required: true, + }, + showText: { + type: Boolean, + required: false, + default: true, + }, }, - }, - - components: { - ciIcon, - }, - - computed: { - cssClass() { - const className = this.status.group; + components: { + ciIcon, + }, + directives: { + tooltip, + }, + computed: { + cssClass() { + const className = this.status.group; - return className ? `ci-status ci-${this.status.group}` : 'ci-status'; + return className ? `ci-status ci-${className}` : 'ci-status'; + }, }, - }, -}; + }; </script> <template> <a :href="status.details_path" - :class="cssClass"> + :class="cssClass" + v-tooltip + :title="!showText ? status.text : ''"> <ci-icon :status="status" /> - {{status.text}} + + <template v-if="showText"> + {{status.text}} + </template> </a> </template> diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue index 50d14282cad..52814de8b2d 100644 --- a/app/assets/javascripts/vue_shared/components/commit.vue +++ b/app/assets/javascripts/vue_shared/components/commit.vue @@ -63,14 +63,17 @@ required: false, default: () => ({}), }, + showBranch: { + type: Boolean, + required: false, + default: true, + }, }, computed: { /** * Used to verify if all the properties needed to render the commit * ref section were provided. * - * TODO: Improve this! Use lodash _.has when we have it. - * * @returns {Boolean} */ hasCommitRef() { @@ -80,8 +83,6 @@ * Used to verify if all the properties needed to render the commit * author section were provided. * - * TODO: Improve this! Use lodash _.has when we have it. - * * @returns {Boolean} */ hasAuthor() { @@ -114,31 +115,30 @@ </script> <template> <div class="branch-commit"> - <div - v-if="hasCommitRef" - class="icon-container hidden-xs"> - <i - v-if="tag" - class="fa fa-tag" - aria-hidden="true"> - </i> - <i - v-if="!tag" - class="fa fa-code-fork" - aria-hidden="true"> - </i> - </div> - - <a - v-if="hasCommitRef" - class="ref-name hidden-xs" - :href="commitRef.ref_url" - v-tooltip - data-container="body" - :title="commitRef.name"> - {{commitRef.name}} - </a> + <template v-if="hasCommitRef && showBranch"> + <div + class="icon-container hidden-xs"> + <i + v-if="tag" + class="fa fa-tag" + aria-hidden="true"> + </i> + <i + v-if="!tag" + class="fa fa-code-fork" + aria-hidden="true"> + </i> + </div> + <a + class="ref-name hidden-xs" + :href="commitRef.ref_url" + v-tooltip + data-container="body" + :title="commitRef.name"> + {{commitRef.name}} + </a> + </template> <div v-html="commitIconSvg" class="commit-icon js-commit-icon"> diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue new file mode 100644 index 00000000000..6670b554faf --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/loading_button.vue @@ -0,0 +1,71 @@ +<script> + +/* This is a re-usable vue component for rendering a button + that will probably be sending off ajax requests and need + to show the loading status by setting the `loading` option. + This can also be used for initial page load when you don't + know the action of the button yet by setting + `loading: true, label: undefined`. + + Sample configuration: + + <loading-button + :loading="true" + :label="Hello" + @click="..." + /> + +*/ + +import loadingIcon from './loading_icon.vue'; + +export default { + props: { + loading: { + type: Boolean, + required: false, + default: false, + }, + label: { + type: String, + required: false, + }, + }, + components: { + loadingIcon, + }, + methods: { + onClick(e) { + this.$emit('click', e); + }, + }, +}; +</script> + +<template> + <button + class="btn btn-align-content" + @click="onClick" + type="button" + :disabled="loading" + > + <transition name="fade"> + <loading-icon + v-if="loading" + :inline="true" + class="js-loading-button-icon" + :class="{ + 'append-right-5': label + }" + /> + </transition> + <transition name="fade"> + <span + v-if="label" + class="js-loading-button-label" + > + {{ label }} + </span> + </transition> + </button> +</template> diff --git a/app/assets/javascripts/vue_shared/components/popup_dialog.vue b/app/assets/javascripts/vue_shared/components/popup_dialog.vue index 9279b50cd55..7d8c5936b7d 100644 --- a/app/assets/javascripts/vue_shared/components/popup_dialog.vue +++ b/app/assets/javascripts/vue_shared/components/popup_dialog.vue @@ -16,6 +16,11 @@ export default { required: false, default: 'primary', }, + closeKind: { + type: String, + required: false, + default: 'default', + }, closeButtonLabel: { type: String, required: false, @@ -33,6 +38,11 @@ export default { [`btn-${this.kind}`]: true, }; }, + btnCancelKindClass() { + return { + [`btn-${this.closeKind}`]: true, + }; + }, }, methods: { @@ -70,7 +80,8 @@ export default { <div class="modal-footer"> <button type="button" - class="btn btn-default" + class="btn" + :class="btnCancelKindClass" @click="emitSubmit(false)"> {{closeButtonLabel}} </button> diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue index dd9a2ebb184..1ac61a3c39b 100644 --- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue +++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue @@ -7,6 +7,7 @@ Sample configuration: <user-avatar-image + :lazy="true" :img-src="userAvatarSrc" :img-alt="tooltipText" :tooltip-text="tooltipText" @@ -16,11 +17,17 @@ */ import defaultAvatarUrl from 'images/no_avatar.png'; +import { placeholderImage } from '../../../lazy_loader'; import tooltip from '../../directives/tooltip'; export default { name: 'UserAvatarImage', props: { + lazy: { + type: Boolean, + required: false, + default: false, + }, imgSrc: { type: String, required: false, @@ -56,18 +63,21 @@ export default { tooltip, }, computed: { + // API response sends null when gravatar is disabled and + // we provide an empty string when we use it inside user avatar link. + // In both cases we should render the defaultAvatarUrl + sanitizedSource() { + return this.imgSrc === '' || this.imgSrc === null ? defaultAvatarUrl : this.imgSrc; + }, + resultantSrcAttribute() { + return this.lazy ? placeholderImage : this.sanitizedSource; + }, tooltipContainer() { return this.tooltipText ? 'body' : null; }, avatarSizeClass() { return `s${this.size}`; }, - // API response sends null when gravatar is disabled and - // we provide an empty string when we use it inside user avatar link. - // In both cases we should render the defaultAvatarUrl - imageSource() { - return this.imgSrc === '' || this.imgSrc === null ? defaultAvatarUrl : this.imgSrc; - }, }, }; </script> @@ -76,11 +86,16 @@ export default { <img v-tooltip class="avatar" - :class="[avatarSizeClass, cssClasses]" - :src="imageSource" + :class="{ + lazy, + [avatarSizeClass]: true, + [cssClasses]: true + }" + :src="resultantSrcAttribute" :width="size" :height="size" :alt="imgAlt" + :data-src="sanitizedSource" :data-container="tooltipContainer" :data-placement="tooltipPlacement" :title="tooltipText" |