github/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2025-09-20 02:36:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Scroll to selected pipeline step (#5103)

Browse Source
This commit is contained in:
Lukas
2025-04-18 21:58:46 +02:00
committed by GitHub
parent 22d24b8457
commit 925641593e
1 changed files with 17 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -94,7 +94,9 @@
> >
<button <button
v-for="step in workflow.children" v-for="step in workflow.children"
ref="steps"
:key="step.pid" :key="step.pid"
:data-step-id="step.pid"
type="button" type="button"
:title="step.name" :title="step.name"
class="hover-effect hover:bg-wp-background-300 dark:hover:bg-wp-background-400 flex w-full cursor-pointer items-center gap-2 rounded-md border-2 border-transparent p-2" class="hover-effect hover:bg-wp-background-300 dark:hover:bg-wp-background-400 flex w-full cursor-pointer items-center gap-2 rounded-md border-2 border-transparent p-2"
@@ -116,7 +118,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, inject, ref, toRef } from 'vue'; import { computed, inject, nextTick, ref, toRef, useTemplateRef, watch } from 'vue';
import type { Ref } from 'vue'; import type { Ref } from 'vue';
import Badge from '~/components/atomic/Badge.vue'; import Badge from '~/components/atomic/Badge.vue';
@@ -159,4 +161,18 @@ const workflowsCollapsed = ref<Record<PipelineStep['id'], boolean>>(
const singleConfig = computed( const singleConfig = computed(
() => pipelineConfigs?.value?.length === 1 && pipeline.value.workflows && pipeline.value.workflows.length === 1, () => pipelineConfigs?.value?.length === 1 && pipeline.value.workflows && pipeline.value.workflows.length === 1,
); );
const steps = useTemplateRef('steps');
watch(selectedStepId, async (newSelectedStepId, oldSelectedStepId) => {
if (!oldSelectedStepId && newSelectedStepId) {
await nextTick();
const step = steps.value?.find((s) => s.dataset.stepId === newSelectedStepId.toString());
if (step) {
step.scrollIntoView({
behavior: 'auto',
block: 'start',
});
}
}
});
</script> </script>