Commit 24971b5b authored by Phil Hughes's avatar Phil Hughes

Merge branch '51259-tooltip' into 'master'

Updates ci header component with gitlab-ui

See merge request gitlab-org/gitlab-ce!23000
parents bb7ef68a c6e704dd
<script> <script>
import { GlTooltipDirective, GlLink, GlButton } from '@gitlab-org/gitlab-ui';
import CiIconBadge from './ci_badge_link.vue'; import CiIconBadge from './ci_badge_link.vue';
import TimeagoTooltip from './time_ago_tooltip.vue'; import TimeagoTooltip from './time_ago_tooltip.vue';
import tooltip from '../directives/tooltip';
import UserAvatarImage from './user_avatar/user_avatar_image.vue'; import UserAvatarImage from './user_avatar/user_avatar_image.vue';
import LoadingButton from '~/vue_shared/components/loading_button.vue';
/** /**
* Renders header component for job and pipeline page based on UI mockups * Renders header component for job and pipeline page based on UI mockups
...@@ -16,9 +17,12 @@ export default { ...@@ -16,9 +17,12 @@ export default {
CiIconBadge, CiIconBadge,
TimeagoTooltip, TimeagoTooltip,
UserAvatarImage, UserAvatarImage,
GlLink,
GlButton,
LoadingButton,
}, },
directives: { directives: {
tooltip, GlTooltip: GlTooltipDirective,
}, },
props: { props: {
status: { status: {
...@@ -98,8 +102,8 @@ export default { ...@@ -98,8 +102,8 @@ export default {
by by
<template v-if="user"> <template v-if="user">
<a <gl-link
v-tooltip v-gl-tooltip
:href="user.path" :href="user.path"
:title="user.email" :title="user.email"
class="js-user-link commit-committer-link" class="js-user-link commit-committer-link"
...@@ -113,7 +117,7 @@ export default { ...@@ -113,7 +117,7 @@ export default {
/> />
{{ user.name }} {{ user.name }}
</a> </gl-link>
<span <span
v-if="user.status_tooltip_html" v-if="user.status_tooltip_html"
v-html="user.status_tooltip_html"></span> v-html="user.status_tooltip_html"></span>
...@@ -127,16 +131,16 @@ export default { ...@@ -127,16 +131,16 @@ export default {
<template <template
v-for="(action, i) in actions" v-for="(action, i) in actions"
> >
<a <gl-link
v-if="action.type === 'link'" v-if="action.type === 'link'"
:key="i" :key="i"
:href="action.path" :href="action.path"
:class="action.cssClass" :class="action.cssClass"
> >
{{ action.label }} {{ action.label }}
</a> </gl-link>
<a <gl-link
v-else-if="action.type === 'ujs-link'" v-else-if="action.type === 'ujs-link'"
:key="i" :key="i"
:href="action.path" :href="action.path"
...@@ -145,31 +149,24 @@ export default { ...@@ -145,31 +149,24 @@ export default {
rel="nofollow" rel="nofollow"
> >
{{ action.label }} {{ action.label }}
</a> </gl-link>
<button <loading-button
v-else-if="action.type === 'button'" v-else-if="action.type === 'button'"
:key="i" :key="i"
:loading="action.isLoading"
:disabled="action.isLoading" :disabled="action.isLoading"
:class="action.cssClass" :class="action.cssClass"
type="button" container-class="d-inline"
:label="action.label"
@click="onClickAction(action)" @click="onClickAction(action)"
> />
{{ action.label }}
<i
v-show="action.isLoading"
class="fa fa-spin fa-spinner"
aria-hidden="true"
>
</i>
</button>
</template> </template>
</section> </section>
<button <gl-button
v-if="hasSidebarButton" v-if="hasSidebarButton"
id="toggleSidebar" id="toggleSidebar"
type="button" class="d-block d-sm-none
class="btn btn-default d-block d-sm-none
sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header" sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header"
@click="onClickSidebarButton" @click="onClickSidebarButton"
> >
...@@ -179,6 +176,6 @@ sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header" ...@@ -179,6 +176,6 @@ sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header"
aria-labelledby="toggleSidebar" aria-labelledby="toggleSidebar"
> >
</i> </i>
</button> </gl-button>
</header> </header>
</template> </template>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment