diff options
author | Clement Ho <ClemMakesApps@gmail.com> | 2017-05-23 12:36:41 -0500 |
---|---|---|
committer | Clement Ho <ClemMakesApps@gmail.com> | 2017-06-06 10:39:23 -0500 |
commit | 7b533ef7f140450783485b01cdf0434b77a9f90e (patch) | |
tree | 16c4bb003c74c02e858ef835602e87e5709b327d /app/assets/javascripts/vue_shared/components/header_ci_component.vue | |
parent | d07e85e1033f8026f155c6171cb3ebcd6b93d9ed (diff) | |
download | gitlab-ce-ch-test-2.tar.gz |
Change from double click to single click to open dropdownch-test-2
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/header_ci_component.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/header_ci_component.vue | 133 |
1 files changed, 133 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue new file mode 100644 index 00000000000..fe6d6a792e7 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue @@ -0,0 +1,133 @@ +<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 userAvatarImage from './user_avatar/user_avatar_image.vue'; + +/** + * Renders header component for job and pipeline page based on UI mockups + * + * Used in: + * - job show page + * - pipeline show page + */ +export default { + props: { + status: { + type: Object, + required: true, + }, + itemName: { + type: String, + required: true, + }, + itemId: { + type: Number, + required: true, + }, + time: { + type: String, + required: true, + }, + user: { + type: Object, + required: false, + default: () => ({}), + }, + actions: { + type: Array, + required: false, + default: () => [], + }, + }, + + mixins: [ + tooltipMixin, + ], + + components: { + ciIconBadge, + loadingIcon, + timeagoTooltip, + userAvatarImage, + }, + + computed: { + userAvatarAltText() { + return `${this.user.name}'s avatar`; + }, + }, + + methods: { + onClickAction(action) { + this.$emit('actionClicked', action); + }, + }, +}; +</script> +<template> + <header class="page-content-header"> + <section class="header-main-content"> + + <ci-icon-badge :status="status" /> + + <strong> + {{itemName}} #{{itemId}} + </strong> + + triggered + + <timeago-tooltip :time="time" /> + + by + + <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 + class="header-action-button nav-controls" + v-if="actions.length"> + <template + v-for="action in actions"> + <a + v-if="action.type === 'link'" + :href="action.path" + :class="action.cssClass"> + {{action.label}} + </a> + + <button + v-else="action.type === 'button'" + @click="onClickAction(action)" + :disabled="action.isLoading" + :class="action.cssClass" + type="button"> + {{action.label}} + + <i + v-show="action.isLoading" + class="fa fa-spin fa-spinner" + aria-hidden="true"> + </i> + </button> + </template> + </section> + </header> +</template> |