mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2025-01-10 17:45:36 +00:00
Code Issues Projects Releases Wiki Activity

Two row layout for title and context of pipeline list (#4625)

Browse source 
Co-authored-by: Anbraten <anton@ju60.de>
Co-authored-by: 6543 <6543@obermui.de>
This commit is contained in:
qwerty287 2024-12-30 11:44:07 +02:00 committed by GitHub
parent 428ba689cb
commit 51dd42ceeb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 50 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
web/src/components/repo/pipeline/PipelineItem.vue
View file

@ -1,8 +1,8 @@
<template>
<ListItem v-if="pipeline" class="p-0 w-full">
<div class="flex items-center w-11">
<div class="flex items-center col-span-4">
<div
class="w-3 h-full"
class="h-full w-2"
:class="{
'bg-wp-state-warn-100': pipeline.status === 'pending',
'bg-wp-error-100 dark:bg-wp-error-200': pipelineStatusColors[pipeline.status] === 'red',
@ -11,36 +11,14 @@
'bg-wp-state-info-100': pipelineStatusColors[pipeline.status] === 'blue',
}"
/>
<div class="flex flex-wrap justify-between items-center w-8 h-full">
<div class="w-12 flex justify-center items-center h-full">
<PipelineRunningIcon v-if="pipeline.status === 'started' || pipeline.status === 'running'" />
<PipelineStatusIcon v-else class="mx-2 md:mx-3" :status="pipeline.status" />
</div>
<PipelineStatusIcon v-else :status="pipeline.status" />
</div>
<div class="flex py-2 px-4 flex-grow min-w-0 <md:flex-wrap">
<div class="<md:hidden flex items-center flex-shrink-0">
<Icon v-if="pipeline.event === 'cron'" name="stopwatch" class="text-wp-text-100" />
<img v-else class="rounded-md w-6" :src="pipeline.author_avatar" />
</div>
<div class="flex items-center md:mx-4 w-full md:w-auto min-w-0">
<!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
<span class="text-wp-text-alt-100 <md:hidden">#{{ pipeline.number }}</span>
<!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
<span class="text-wp-text-alt-100 <md:hidden mx-2">-</span>
<span
class="text-wp-text-100 <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis"
:title="message"
>
{{ shortMessage }}
</span>
</div>
<div
class="flex-shrink-0 gap-x-4 gap-y-2 grid grid-cols-2 grid-rows-2 grid-flow-col md:ml-auto py-2 w-full md:w-96 text-wp-text-100"
>
<div class="flex items-center space-x-2 min-w-0">
<span :title="pipelineEventTitle">
<div class="flex px-2 mr-2 flex-grow min-w-0 <md:flex-wrap w-full flex-col items-center min-w-0 py-4 gap-2">
<div class="w-full flex items-center gap-2">
<span :title="pipelineEventTitle" class="text-wp-text-100">
<Icon v-if="pipeline.event === 'pull_request'" name="pull-request" />
<Icon v-else-if="pipeline.event === 'pull_request_closed'" name="pull-request-closed" />
<Icon v-else-if="pipeline.event === 'deployment'" name="deployment" />
@ -49,24 +27,58 @@
<Icon v-else-if="pipeline.event === 'manual'" name="manual-pipeline" />
<Icon v-else name="push" />
</span>
<span class="truncate">{{ prettyRef }}</span>
<!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
<span class="text-wp-text-alt-100 text-lg">#{{ pipeline.number }}</span>
<span class="text-wp-text-100 text-lg whitespace-nowrap overflow-hidden overflow-ellipsis" :title="message">
{{ shortMessage }}
</span>
</div>
<div class="flex items-center space-x-2 min-w-0">
<div class="flex w-full gap-2">
<div class="flex items-center w-22 text-wp-text-100">
<Icon name="commit" />
<span class="truncate">{{ pipeline.commit.slice(0, 10) }}</span>
<span class="truncate">{{ pipeline.commit.slice(0, 7) }}</span>
</div>
<div class="flex items-center space-x-2 min-w-0" :title="$t('repo.pipeline.duration')">
<div class="flex items-center min-w-0 text-wp-text-100">
<Icon
v-if="pipeline.event === 'pull_request' || pipeline.event === 'pull_request_closed'"
name="pull-request"
/>
<Icon v-else-if="pipeline.event === 'tag' || pipeline.event === 'release'" name="tag" />
<Icon v-else name="push" />
<span class="ml-1 truncate">
{{ prettyRef }}
<!-- eslint-disable @intlify/vue-i18n/no-raw-text-->
<span
v-if="pipeline.event === 'pull_request' || pipeline.event === 'pull_request_closed'"
:title="prTitleWithDescription"
>
({{ prTitle }})
</span>
<!-- eslint-enable @intlify/vue-i18n/no-raw-text-->
</span>
</div>
</div>
</div>
</div>
<div class="<md:hidden flex ml-auto mr-6 items-center">
<div class="flex flex-col w-full w-48 py-2 gap-x-4 gap-y-2 flex-shrink-0 text-wp-text-100 justify-center h-full">
<div class="flex space-x-2 min-w-0" :title="$t('repo.pipeline.duration')">
<Icon name="duration" />
<span class="truncate">{{ duration }}</span>
</div>
<div class="flex items-center space-x-2 min-w-0" :title="$t('repo.pipeline.created', { created })">
<div class="flex space-x-2 min-w-0" :title="$t('repo.pipeline.created', { created })">
<Icon name="since" />
<span class="truncate">{{ since }}</span>
</div>
</div>
<Icon v-if="pipeline.event === 'cron'" name="stopwatch" class="text-wp-text-100 w-8" />
<img v-else class="rounded-md w-8" :src="pipeline.author_avatar" :title="pipeline.author" />
</div>
</ListItem>
</template>
@ -90,7 +102,8 @@ const props = defineProps<{
const { t } = useI18n();
const pipeline = toRef(props, 'pipeline');
const { since, duration, message, shortMessage, prettyRef, created } = usePipeline(pipeline);
const { since, duration, message, shortMessage, prettyRef, created, prTitle, prTitleWithDescription } =
usePipeline(pipeline);
const pipelineEventTitle = computed(() => {
switch (pipeline.value.event) {