diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-06-02 16:24:42 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-06-02 16:24:42 +0300 |
commit | 228b73d5e9e68991017dbfc5d072c3831411c383 (patch) | |
tree | cc0435e671819a9e6e51600a2ab82b1659a65aba /app/assets/javascripts/vue_shared | |
parent | 68112433e1c5537538004f6279cfe83d38aaaa0b (diff) |
Pipeline show view real time header section
Diffstat (limited to 'app/assets/javascripts/vue_shared')
4 files changed, 42 insertions, 25 deletions
diff --git a/app/assets/javascripts/vue_shared/components/commit.js b/app/assets/javascripts/vue_shared/components/commit.js index 23bc5fbc034..8e22057e2e9 100644 --- a/app/assets/javascripts/vue_shared/components/commit.js +++ b/app/assets/javascripts/vue_shared/components/commit.js @@ -91,7 +91,7 @@ export default { hasAuthor() { return this.author && this.author.avatar_url && - this.author.web_url && + this.author.path && this.author.username; }, @@ -140,7 +140,7 @@ export default { <user-avatar-link v-if="hasAuthor" class="avatar-image-container" - :link-href="author.web_url" + :link-href="author.path" :img-src="author.avatar_url" :img-alt="userImageAltDescription" :tooltip-text="author.username" diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue index fd0dcd716d6..fe6d6a792e7 100644 --- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue +++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue @@ -1,8 +1,9 @@ <script> import ciIconBadge from './ci_badge_link.vue'; +import loadingIcon from './loading_icon.vue'; import timeagoTooltip from './time_ago_tooltip.vue'; import tooltipMixin from '../mixins/tooltip'; -import userAvatarLink from './user_avatar/user_avatar_link.vue'; +import userAvatarImage from './user_avatar/user_avatar_image.vue'; /** * Renders header component for job and pipeline page based on UI mockups @@ -31,7 +32,8 @@ export default { }, user: { type: Object, - required: true, + required: false, + default: () => ({}), }, actions: { type: Array, @@ -46,8 +48,9 @@ export default { components: { ciIconBadge, + loadingIcon, timeagoTooltip, - userAvatarLink, + userAvatarImage, }, computed: { @@ -58,13 +61,13 @@ export default { methods: { onClickAction(action) { - this.$emit('postAction', action); + this.$emit('actionClicked', action); }, }, }; </script> <template> - <header class="page-content-header top-area"> + <header class="page-content-header"> <section class="header-main-content"> <ci-icon-badge :status="status" /> @@ -79,21 +82,23 @@ export default { by - <user-avatar-link - :link-href="user.web_url" - :img-src="user.avatar_url" - :img-alt="userAvatarAltText" - :tooltip-text="user.name" - :img-size="24" - /> - - <a - :href="user.web_url" - :title="user.email" - class="js-user-link commit-committer-link" - ref="tooltip"> - {{user.name}} - </a> + <template v-if="user"> + <a + :href="user.path" + :title="user.email" + class="js-user-link commit-committer-link" + ref="tooltip"> + + <user-avatar-image + :img-src="user.avatar_url" + :img-alt="userAvatarAltText" + :tooltip-text="user.name" + :img-size="24" + /> + + {{user.name}} + </a> + </template> </section> <section @@ -111,11 +116,17 @@ export default { <button v-else="action.type === 'button'" @click="onClickAction(action)" + :disabled="action.isLoading" :class="action.cssClass" type="button"> {{action.label}} - </button> + <i + v-show="action.isLoading" + class="fa fa-spin fa-spinner" + aria-hidden="true"> + </i> + </button> </template> </section> </header> diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js index 3283a6bcacc..f60f8eeb43d 100644 --- a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js +++ b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js @@ -83,7 +83,7 @@ export default { } else { commitAuthorInformation = { avatar_url: this.pipeline.commit.author_gravatar_url, - web_url: `mailto:${this.pipeline.commit.author_email}`, + path: `mailto:${this.pipeline.commit.author_email}`, username: this.pipeline.commit.author_name, }; } 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 b8db6afda12..cd6f8c7aee4 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 @@ -60,6 +60,12 @@ export default { 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> @@ -68,7 +74,7 @@ export default { <img class="avatar" :class="[avatarSizeClass, cssClasses]" - :src="imgSrc" + :src="imageSource" :width="size" :height="size" :alt="imgAlt" |