github/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2025-11-02 00:18:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Header and Tabs UI Improvements (#1290)

Browse Source 
Some improvements to the Page Header and Tab UI.

Original |  New
:--------:|:-------:

![image](https://user-images.githubusercontent.com/62170586/197360886-046f1016-ca39-4b69-8134-99ba88e3a0c2.png)
|
![image](https://user-images.githubusercontent.com/62170586/197360819-7efd0d82-1412-465d-aefa-039164f97465.png)

![image](https://user-images.githubusercontent.com/62170586/197360872-f2ece5fd-7c0b-4e2c-8629-31524a412af5.png)
|
![image](https://user-images.githubusercontent.com/62170586/197360830-49f09e0d-619e-4fa9-8e38-8d05d9404185.png)

![image](https://user-images.githubusercontent.com/62170586/197281776-e3de6441-9417-4614-8b25-1aaef0b8da61.png)
|
![image](https://user-images.githubusercontent.com/62170586/197281698-40c66d34-76f3-4fd5-97e3-1c422b74844c.png)

![image](https://user-images.githubusercontent.com/62170586/196609248-ff150c6e-2995-4bcc-8573-49ffaf388446.png)
|
![image](https://user-images.githubusercontent.com/62170586/197323734-7c1a1b79-0f41-4bf2-96a3-dd38df9e1415.png)

![image](https://user-images.githubusercontent.com/62170586/196609329-b7a6f37e-e8c2-4004-a98b-73f837122ff8.png)
|
![image](https://user-images.githubusercontent.com/62170586/197323882-10141ffd-7411-4493-8291-b8000adc3cc5.png)


What?
- Create a new Scaffold component, which includes the header and tabs
required for a page.
- Use this component to wrap all the views that have a header.
- Ensures consistency in headers between different pages.
- [x] Add support to use custom html/component in place of title (for
repo page, pipeline page, etc)
- [x] Add support of right icon buttons (for repo page, pipeline page,
etc)
- [x] Refactor tabs handling using compositions (useTabsProvider, useTabsClient)
- [x] Make new header ui resposive
This commit is contained in:
Divya Jain
2022-10-28 04:25:07 +05:30
committed by GitHub
parent 8b7ca464cf
commit e2ab8a46ed
22 changed files with 469 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
web/src/views/repo/pipeline/PipelineWrapper.vue
View File

@@ -1,48 +1,34 @@
<template>
<template v-if="pipeline && repo">
<FluidContainer class="flex flex-col min-w-0 dark:border-gray-600">
<div class="flex mb-2 items-center <md:flex-wrap">
<IconButton icon="back" :title="$t('back')" class="flex-shrink-0" @click="goBack" />
<Scaffold v-model:activeTab="activeTab" enable-tabs disable-hash-mode :go-back="goBack">
<template #title>
<span class="w-full md:w-auto text-center">{{ $t('repo.pipeline.pipeline', { pipelineId }) }}</span>
<span class="<md:hidden">-</span>
<span class="w-full md:w-auto text-center truncate">{{ message }}</span>
</template>
<h1
class="order-3 w-full <md:flex-wrap md:order-none md:w-auto md:ml-2 flex text-center text-xl text-color whitespace-nowrap overflow-hidden overflow-ellipsis"
>
<span class="w-full md:w-auto text-center">{{ $t('repo.pipeline.pipeline', { pipelineId }) }}</span>
<span class="<md:hidden mx-2">-</span>
<span class="w-full md:w-auto text-center truncate">{{ message }}</span>
</h1>
<PipelineStatusIcon :pipeline="pipeline" class="flex flex-shrink-0 ml-auto" />
<template #titleActions>
<PipelineStatusIcon :pipeline="pipeline" class="flex flex-shrink-0" />
<template v-if="repoPermissions.push">
<Button
v-if="pipeline.status === 'pending' || pipeline.status === 'running'"
class="ml-4 flex-shrink-0"
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="ml-4 flex-shrink-0"
class="flex-shrink-0"
:text="$t('repo.pipeline.actions.restart')"
:is-loading="isRestartingPipeline"
@click="restartPipeline"
/>
</template>
</div>
<div class="flex flex-wrap gap-y-2 items-center justify-between">
<Tabs v-model="activeTab" disable-hash-mode class="order-2 md:order-none">
<Tab id="tasks" :title="$t('repo.pipeline.tasks')" />
<Tab id="config" :title="$t('repo.pipeline.config')" />
<Tab
v-if="pipeline.event === 'push' || pipeline.event === 'pull_request'"
id="changed-files"
:title="$t('repo.pipeline.files', { files: pipeline.changed_files?.length || 0 })"
/>
</Tabs>
</template>
<template #tabActions>
<div class="flex justify-between gap-x-4 text-color flex-shrink-0 pb-2 md:p-0 mx-auto md:mr-0">
<div class="flex space-x-1 items-center flex-shrink-0">
<Icon name="since" />
@@ -58,8 +44,16 @@
<span>{{ duration }}</span>
</div>
</div>
</div>
</FluidContainer>
</template>
<Tab id="tasks" :title="$t('repo.pipeline.tasks')" />
<Tab id="config" :title="$t('repo.pipeline.config')" />
<Tab
v-if="pipeline.event === 'push' || pipeline.event === 'pull_request'"
id="changed-files"
:title="$t('repo.pipeline.files', { files: pipeline.changed_files?.length || 0 })"
/>
</Scaffold>
<router-view />
</template>
@@ -72,11 +66,9 @@ import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import Button from '~/components/atomic/Button.vue';
import IconButton from '~/components/atomic/IconButton.vue';
import FluidContainer from '~/components/layout/FluidContainer.vue';
import Scaffold from '~/components/layout/scaffold/Scaffold.vue';
import Tab from '~/components/layout/scaffold/Tab.vue';
import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
import Tab from '~/components/tabs/Tab.vue';
import Tabs from '~/components/tabs/Tabs.vue';
import useApiClient from '~/compositions/useApiClient';
import { useAsyncAction } from '~/compositions/useAsyncAction';
import { useFavicon } from '~/compositions/useFavicon';
@@ -90,13 +82,11 @@ export default defineComponent({
name: 'PipelineWrapper',
components: {
FluidContainer,
Button,
PipelineStatusIcon,
IconButton,
Tabs,
Tab,
Tooltip,
Scaffold,
},
props: {