Use full width header on pipeline view and show repo name (#2327)

Co-authored-by: Patrick Schratz <patrick.schratz@gmail.com>
Co-authored-by: 6543 <m.huber@kithara.com>
This commit is contained in:
Robert Kaussow
2023-08-29 15:57:58 +02:00
committed by GitHub
parent c613664753
commit 81aa9b1439
8 changed files with 58 additions and 51 deletions

View File

@@ -6,47 +6,53 @@
disable-hash-mode
:go-back="goBack"
:fluid-content="activeTab !== 'tasks'"
:full-width="true"
>
<template #title>
<span class="flex-shrink-0 text-center">{{ $t('repo.pipeline.pipeline', { pipelineId }) }}</span>
<span class="<md:hidden">-</span>
<span class="text-center truncate">{{ message }}</span>
</template>
<template #title>{{ repo.full_name }}</template>
<template #titleActions>
<PipelineStatusIcon :status="pipeline.status" class="flex flex-shrink-0" />
<div class="flex md:items-center flex-col py-2 gap-x-2 md:flex-row md:justify-between">
<div class="flex content-start gap-x-2 py-2 md:mr-2">
<PipelineStatusIcon :status="pipeline.status" class="flex flex-shrink-0" />
<span class="flex-shrink-0 text-center">{{ $t('repo.pipeline.pipeline', { pipelineId }) }}</span>
<span class="hidden md:inline-block">-</span>
<span class="text-center truncate">{{ message }}</span>
</div>
<template v-if="repoPermissions.push">
<Button
v-if="pipeline.status === 'pending' || pipeline.status === 'running'"
class="flex-shrink-0"
:text="$t('repo.pipeline.actions.cancel')"
:is-loading="isCancelingPipeline"
@click="cancelPipeline"
/>
<Button
v-else-if="pipeline.status !== 'blocked' && pipeline.status !== 'declined'"
class="flex-shrink-0"
:text="$t('repo.pipeline.actions.restart')"
:is-loading="isRestartingPipeline"
@click="restartPipeline"
/>
<Button
v-if="pipeline.status === 'success'"
class="flex-shrink-0"
:text="$t('repo.pipeline.actions.deploy')"
@click="showDeployPipelinePopup = true"
/>
<DeployPipelinePopup
:pipeline-number="pipelineId"
:open="showDeployPipelinePopup"
@close="showDeployPipelinePopup = false"
/>
</template>
<template v-if="repoPermissions.push">
<div class="flex content-start gap-x-2">
<Button
v-if="pipeline.status === 'pending' || pipeline.status === 'running'"
class="flex-shrink-0"
:text="$t('repo.pipeline.actions.cancel')"
:is-loading="isCancelingPipeline"
@click="cancelPipeline"
/>
<Button
v-else-if="pipeline.status !== 'blocked' && pipeline.status !== 'declined'"
class="flex-shrink-0"
:text="$t('repo.pipeline.actions.restart')"
:is-loading="isRestartingPipeline"
@click="restartPipeline"
/>
<Button
v-if="pipeline.status === 'success'"
class="flex-shrink-0"
:text="$t('repo.pipeline.actions.deploy')"
@click="showDeployPipelinePopup = true"
/>
<DeployPipelinePopup
:pipeline-number="pipelineId"
:open="showDeployPipelinePopup"
@close="showDeployPipelinePopup = false"
/>
</div>
</template>
</div>
</template>
<template #tabActions>
<div class="flex justify-between gap-x-4 text-wp-text-100 flex-shrink-0 pb-2 md:p-0 mx-auto md:mr-0">
<div class="flex gap-x-4">
<div class="flex space-x-1 items-center flex-shrink-0" :title="created">
<Icon name="since" />
<span>{{ since }}</span>