self-hosted/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2024-12-06 08:16:19 +02:00
Code Issues Releases Activity

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

Browse Source 
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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 58 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/layout/FluidContainer.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="w-full p-2 md:p-4 lg:px-0 mx-auto" :class="{ 'max-w-5xl': !fullWidth }">
<div class="w-full p-4 mx-auto" :class="{ 'max-w-5xl': !fullWidth, 'md:px-0': fullWidth }">
<slot />
</div>
</template>

19
web/src/components/layout/scaffold/Header.vue
View File

@ -1,11 +1,12 @@
<template>
<header
class="bg-wp-background-100 border-b-1 border-wp-background-400 dark:border-wp-background-100 dark:bg-wp-background-300 text-wp-text-100"
:class="{ 'md:px-4': fullWidth }"
>
<FluidContainer class="!py-0">
<div class="flex w-full items-center justify-between py-4 <md:flex-row <md:gap-y-4">
<FluidContainer :full-width="fullWidth" class="!py-0">
<div class="flex w-full md:items-center flex-col py-2 gap-y-2 md:flex-row md:justify-between">
<div
class="flex items-center min-w-0 justify-start <md:justify-center"
class="flex items-center content-start"
:class="{
'md:flex-1': searchBoxPresent,
}"
@ -14,7 +15,7 @@
v-if="goBack"
icon="back"
:title="$t('back')"
class="flex-shrink-0 mr-2 <md:hidden"
class="flex-shrink-0 mr-2 <md:hidden md:justify-between w-8 h-8"
@click="goBack"
/>
<h1 class="flex text-xl min-w-0 text-wp-text-100 items-center gap-x-2">
@ -30,7 +31,7 @@
/>
<div
v-if="$slots.titleActions"
class="flex items-center justify-end gap-x-2 <md:w-full <md:justify-center"
class="flex items-center md:justify-end gap-x-2"
:class="{
'md:flex-1': searchBoxPresent,
}"
@ -39,12 +40,9 @@
</div>
</div>
<div v-if="enableTabs" class="flex justify-between">
<div v-if="enableTabs" class="flex md:items-center flex-col py-2 md:flex-row md:justify-between md:py-0">
<Tabs class="<md:order-2" />
<div
v-if="$slots.titleActions"
class="flex items-center justify-end gap-x-2 md:mb-2 <md:w-full <md:justify-center <md:order-1"
>
<div v-if="$slots.titleActions" class="flex content-start md:justify-end">
<slot name="tabActions" />
</div>
</div>
@ -62,6 +60,7 @@ const props = defineProps<{
goBack?: () => void;
enableTabs?: boolean;
search?: string;
fullWidth?: boolean;
}>();
defineEmits(['update:search']);

2
web/src/components/layout/scaffold/Scaffold.vue
View File

@ -3,6 +3,7 @@
:go-back="goBack"
:enable-tabs="enableTabs"
:search="search"
:full-width="fullWidth"
@update:search="(value) => $emit('update:search', value)"
>
<template #title><slot name="title" /></template>
@ -36,6 +37,7 @@ export interface Props {
// Content
fluidContent?: boolean;
fullWidth?: boolean;
}
const props = withDefaults(defineProps<Props>(), {

2
web/src/components/layout/scaffold/Tabs.vue
View File

@ -3,7 +3,7 @@
<button
v-for="tab in tabs"
:key="tab.id"
class="w-full py-2 md:w-auto md:py-2 md:px-8 flex cursor-pointer md:border-b-2 text-wp-text-100 hover:text-wp-text-200 items-center"
class="w-full py-1 md:py-2 md:w-auto md:px-8 flex cursor-pointer md:border-b-2 text-wp-text-100 hover:text-wp-text-200 items-center"
:class="{
'border-wp-text-100': activeTab === tab.id,
'border-transparent': activeTab !== tab.id,

2
web/src/components/repo/pipeline/PipelineLog.vue
View File

@ -1,7 +1,7 @@
<template>
<div v-if="pipeline" class="flex flex-col pt-10 md:pt-0">
<div
class="flex flex-grow flex-col code-box shadow !p-0 !rounded-none md:m-2 md:mt-0 !md:rounded-md overflow-hidden"
class="flex flex-grow flex-col code-box shadow !p-0 !rounded-none md:m-4 md:mt-0 !md:rounded-md overflow-hidden"
@mouseover="showActions = true"
@mouseleave="showActions = false"
>

6
web/src/components/repo/pipeline/PipelineStepList.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="flex flex-col w-full md:w-3/12 md:max-w-md md:min-w-xs md:ml-2 text-wp-text-100 gap-2 pb-2">
<div class="flex flex-col w-full md:w-3/12 md:max-w-md md:min-w-xs md:ml-4 text-wp-text-100 gap-2 pb-2">
<div
class="flex flex-wrap p-4 gap-1 justify-between flex-shrink-0 md:rounded-md border bg-wp-background-100 border-wp-background-400 dark:bg-wp-background-200"
class="flex flex-wrap p-4 gap-1 justify-between flex-shrink-0 rounded-md border bg-wp-background-100 border-wp-background-400 dark:bg-wp-background-200"
>
<div class="flex space-x-1 items-center flex-shrink-0">
<div class="flex items-center">
@ -52,7 +52,7 @@
<div
v-for="workflow in pipeline.workflows"
:key="workflow.id"
class="p-2 md:rounded-md shadow border bg-wp-background-100 border-wp-background-400 dark:bg-wp-background-200"
class="p-2 rounded-md shadow border bg-wp-background-100 border-wp-background-400 dark:bg-wp-background-200"
>
<div class="flex flex-col gap-2">
<div v-if="workflow.environ" class="flex flex-wrap gap-x-1 gap-y-2 text-xs justify-end pt-1 pr-1">

2
web/src/views/repo/RepoWrapper.vue
View File

@ -14,7 +14,7 @@
</span>
</template>
<template #titleActions>
<a v-if="badgeUrl" :href="badgeUrl" target="_blank" class="ml-2">
<a v-if="badgeUrl" :href="badgeUrl" target="_blank">
<img :src="badgeUrl" />
</a>
<IconButton :href="repo.link_url" :title="$t('repo.open_in_forge')" :icon="forge ?? 'repo'" />

74
web/src/views/repo/pipeline/PipelineWrapper.vue
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>