mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-06-13 19:09:38 +00:00
Use pipeline wrapper and improve scaffold UI (#1368)
Co-authored-by: Anbraten <anton@ju60.de> Co-authored-by: 6543 <6543@obermui.de>
This commit is contained in:
parent
0c96880d70
commit
d785d05718
|
@ -1,13 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="w-full max-w-5xl p-2 md:p-4 lg:px-0 mx-auto">
|
<div class="w-full p-2 md:p-4 lg:px-0 mx-auto" :class="{ 'max-w-5xl': !fullWidth }">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
export interface Props {
|
||||||
|
fullWidth?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
export default defineComponent({
|
defineProps<Props>();
|
||||||
name: 'FluidContainer',
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -10,9 +10,10 @@
|
||||||
<template v-if="$slots.tabActions" #tabActions><slot name="tabActions" /></template>
|
<template v-if="$slots.tabActions" #tabActions><slot name="tabActions" /></template>
|
||||||
</Header>
|
</Header>
|
||||||
|
|
||||||
<FluidContainer>
|
<FluidContainer v-if="fluidContent">
|
||||||
<slot />
|
<slot />
|
||||||
</FluidContainer>
|
</FluidContainer>
|
||||||
|
<slot v-else />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
@ -32,6 +33,9 @@ export interface Props {
|
||||||
enableTabs?: boolean;
|
enableTabs?: boolean;
|
||||||
disableHashMode?: boolean;
|
disableHashMode?: boolean;
|
||||||
activeTab: string;
|
activeTab: string;
|
||||||
|
|
||||||
|
// Content
|
||||||
|
fluidContent?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
@ -42,6 +46,8 @@ const props = withDefaults(defineProps<Props>(), {
|
||||||
// eslint-disable-next-line vue/no-boolean-default
|
// eslint-disable-next-line vue/no-boolean-default
|
||||||
enableTabs: false,
|
enableTabs: false,
|
||||||
activeTab: '',
|
activeTab: '',
|
||||||
|
// eslint-disable-next-line vue/no-boolean-default
|
||||||
|
fluidContent: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(['update:activeTab', 'update:search']);
|
const emit = defineEmits(['update:activeTab', 'update:search']);
|
||||||
|
|
|
@ -24,7 +24,11 @@ onMounted(() => {
|
||||||
id: props.id || props.title.toLocaleLowerCase().replace(' ', '-') || tabs.value.length.toString(),
|
id: props.id || props.title.toLocaleLowerCase().replace(' ', '-') || tabs.value.length.toString(),
|
||||||
title: props.title,
|
title: props.title,
|
||||||
};
|
};
|
||||||
tabs.value.push(tab.value);
|
|
||||||
|
// don't add tab if tab id is already present
|
||||||
|
if (!tabs.value.find(({ id }) => id === props.id)) {
|
||||||
|
tabs.value.push(tab.value);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const isActive = computed(() => tab.value && tab.value.id === activeTab.value);
|
const isActive = computed(() => tab.value && tab.value.id === activeTab.value);
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col flex-grow">
|
<FluidContainer full-width class="flex flex-col flex-grow">
|
||||||
<div class="flex w-full min-h-0 flex-grow">
|
<div class="flex w-full min-h-0 flex-grow">
|
||||||
<PipelineStepList
|
<PipelineStepList
|
||||||
v-if="pipeline?.steps?.length || 0 > 0"
|
v-if="pipeline?.steps?.length || 0 > 0"
|
||||||
|
@ -46,7 +46,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</FluidContainer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
@ -56,6 +56,7 @@ import { useRoute, useRouter } from 'vue-router';
|
||||||
|
|
||||||
import Button from '~/components/atomic/Button.vue';
|
import Button from '~/components/atomic/Button.vue';
|
||||||
import Icon from '~/components/atomic/Icon.vue';
|
import Icon from '~/components/atomic/Icon.vue';
|
||||||
|
import FluidContainer from '~/components/layout/FluidContainer.vue';
|
||||||
import PipelineLog from '~/components/repo/pipeline/PipelineLog.vue';
|
import PipelineLog from '~/components/repo/pipeline/PipelineLog.vue';
|
||||||
import PipelineStepList from '~/components/repo/pipeline/PipelineStepList.vue';
|
import PipelineStepList from '~/components/repo/pipeline/PipelineStepList.vue';
|
||||||
import useApiClient from '~/compositions/useApiClient';
|
import useApiClient from '~/compositions/useApiClient';
|
||||||
|
@ -72,6 +73,7 @@ export default defineComponent({
|
||||||
PipelineStepList,
|
PipelineStepList,
|
||||||
Icon,
|
Icon,
|
||||||
PipelineLog,
|
PipelineLog,
|
||||||
|
FluidContainer,
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
|
|
|
@ -1,20 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<FluidContainer v-if="pipeline" class="flex flex-col gap-y-6 text-color justify-between py-0">
|
<Panel v-if="pipeline">
|
||||||
<Panel>
|
<div v-if="pipeline.changed_files === undefined || pipeline.changed_files.length < 1" class="w-full">
|
||||||
<div v-if="pipeline.changed_files === undefined || pipeline.changed_files.length < 1" class="w-full">
|
<span class="text-color">{{ $t('repo.pipeline.no_files') }}</span>
|
||||||
<span class="text-color">{{ $t('repo.pipeline.no_files') }}</span>
|
</div>
|
||||||
</div>
|
<div v-for="file in pipeline.changed_files" v-else :key="file" class="w-full">
|
||||||
<div v-for="file in pipeline.changed_files" v-else :key="file" class="w-full">
|
<div>- {{ file }}</div>
|
||||||
<div>- {{ file }}</div>
|
</div>
|
||||||
</div>
|
</Panel>
|
||||||
</Panel>
|
|
||||||
</FluidContainer>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, inject, Ref } from 'vue';
|
import { defineComponent, inject, Ref } from 'vue';
|
||||||
|
|
||||||
import FluidContainer from '~/components/layout/FluidContainer.vue';
|
|
||||||
import Panel from '~/components/layout/Panel.vue';
|
import Panel from '~/components/layout/Panel.vue';
|
||||||
import { Pipeline } from '~/lib/api/types';
|
import { Pipeline } from '~/lib/api/types';
|
||||||
|
|
||||||
|
@ -22,7 +19,6 @@ export default defineComponent({
|
||||||
name: 'PipelineChangedFiles',
|
name: 'PipelineChangedFiles',
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
FluidContainer,
|
|
||||||
Panel,
|
Panel,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -1,16 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<FluidContainer v-if="pipelineConfigs" class="flex flex-col gap-y-6 text-color justify-between !pt-0">
|
<div class="flex flex-col gap-y-6">
|
||||||
<Panel v-for="pipelineConfig in pipelineConfigs" :key="pipelineConfig.hash" :title="pipelineConfig.name">
|
<Panel v-for="pipelineConfig in pipelineConfigs || []" :key="pipelineConfig.hash" :title="pipelineConfig.name">
|
||||||
<SyntaxHighlight class="font-mono whitespace-pre overflow-auto" language="yaml" :code="pipelineConfig.data" />
|
<SyntaxHighlight class="font-mono whitespace-pre overflow-auto" language="yaml" :code="pipelineConfig.data" />
|
||||||
</Panel>
|
</Panel>
|
||||||
</FluidContainer>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, inject, onMounted, Ref, ref, watch } from 'vue';
|
import { defineComponent, inject, onMounted, Ref, ref, watch } from 'vue';
|
||||||
|
|
||||||
import SyntaxHighlight from '~/components/atomic/SyntaxHighlight';
|
import SyntaxHighlight from '~/components/atomic/SyntaxHighlight';
|
||||||
import FluidContainer from '~/components/layout/FluidContainer.vue';
|
|
||||||
import Panel from '~/components/layout/Panel.vue';
|
import Panel from '~/components/layout/Panel.vue';
|
||||||
import useApiClient from '~/compositions/useApiClient';
|
import useApiClient from '~/compositions/useApiClient';
|
||||||
import { Pipeline, PipelineConfig, Repo } from '~/lib/api/types';
|
import { Pipeline, PipelineConfig, Repo } from '~/lib/api/types';
|
||||||
|
@ -19,7 +18,6 @@ export default defineComponent({
|
||||||
name: 'PipelineConfig',
|
name: 'PipelineConfig',
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
FluidContainer,
|
|
||||||
Panel,
|
Panel,
|
||||||
SyntaxHighlight,
|
SyntaxHighlight,
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,6 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<template v-if="pipeline && repo">
|
<template v-if="pipeline && repo">
|
||||||
<Scaffold v-model:activeTab="activeTab" enable-tabs disable-hash-mode :go-back="goBack">
|
<Scaffold
|
||||||
|
v-model:activeTab="activeTab"
|
||||||
|
enable-tabs
|
||||||
|
disable-hash-mode
|
||||||
|
:go-back="goBack"
|
||||||
|
:fluid-content="activeTab !== 'tasks'"
|
||||||
|
>
|
||||||
<template #title>
|
<template #title>
|
||||||
<span class="w-full md:w-auto text-center">{{ $t('repo.pipeline.pipeline', { pipelineId }) }}</span>
|
<span class="w-full md:w-auto text-center">{{ $t('repo.pipeline.pipeline', { pipelineId }) }}</span>
|
||||||
<span class="<md:hidden">-</span>
|
<span class="<md:hidden">-</span>
|
||||||
|
@ -53,9 +59,8 @@
|
||||||
id="changed-files"
|
id="changed-files"
|
||||||
:title="$t('repo.pipeline.files', { files: pipeline.changed_files?.length || 0 })"
|
:title="$t('repo.pipeline.files', { files: pipeline.changed_files?.length || 0 })"
|
||||||
/>
|
/>
|
||||||
|
<router-view />
|
||||||
</Scaffold>
|
</Scaffold>
|
||||||
|
|
||||||
<router-view />
|
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue