Add icons to all pipeline tabs

This commit is contained in:
Robert Kaussow 2024-11-20 22:49:35 +01:00
parent bd349c8eaf
commit 74e07f7f57
No known key found for this signature in database
GPG key ID: 4E692A2EAECC03C0
3 changed files with 19 additions and 7 deletions

View file

@ -51,6 +51,10 @@
<SvgIcon v-else-if="name === 'pause'" :path="mdiPause" size="24" />
<SvgIcon v-else-if="name === 'play'" :path="mdiPlay" size="24" />
<SvgIcon v-else-if="name === 'remove'" :path="mdiClose" size="24" />
<SvgIcon v-else-if="name === 'tray-full'" :path="mdiTrayFull" size="24" />
<SvgIcon v-else-if="name === 'file-cog-outlined'" :path="mdiFileCogOutline" size="24" />
<SvgIcon v-else-if="name === 'magnify-scan'" :path="mdiMagnifyScan" size="24" />
<SvgIcon v-else-if="name === 'file-alert-outline'" :path="mdiFileAlertOutline" size="24" />
<SvgIcon v-else-if="name === 'forgejo'" :path="siForgejo.path" size="32" />
<SvgIcon v-else-if="name === 'gitea'" :path="siGitea.path" size="32" />
@ -96,12 +100,15 @@ import {
mdiDownload,
mdiDownloadCircle,
mdiDownloadOff,
mdiFileAlertOutline,
mdiFileCogOutline,
mdiFormatListBulleted,
mdiGestureTap,
mdiGit,
mdiGithub,
mdiGitlab,
mdiHelpCircleOutline,
mdiMagnifyScan,
mdiMinusCircleOutline,
mdiPackageVariant,
mdiPause,
@ -120,6 +127,7 @@ import {
mdiTagOutline,
mdiTimelapse,
mdiTrashCanOutline,
mdiTrayFull,
} from '@mdi/js';
import { siForgejo, siGitea } from 'simple-icons';
@ -176,7 +184,11 @@ export type IconNames =
| 'attention'
| 'spinner'
| 'error'
| 'remove';
| 'remove'
| 'tray-full'
| 'file-cog-outlined'
| 'magnify-scan'
| 'file-alert-outline';
defineProps<{
name: IconNames;

View file

@ -5,14 +5,14 @@
:key="tab.title"
v-slot="{ isActive, isExactActive }"
:to="tab.to"
class="border-transparent w-full py-1 md:py-2 md:w-auto md:px-6 flex cursor-pointer md:border-b-2 text-wp-text-100 hover:text-wp-text-200 items-center"
class="border-transparent w-full py-1 md:py-2 md:w-auto md:px-4 flex cursor-pointer md:border-b-2 text-wp-text-100 hover:text-wp-text-200 items-center"
:active-class="tab.matchChildren ? '!border-wp-text-100' : ''"
:exact-active-class="tab.matchChildren ? '' : '!border-wp-text-100'"
>
<Icon v-if="isExactActive || (isActive && tab.matchChildren)" name="chevron-right" class="md:hidden" />
<Icon v-else name="blank" class="md:hidden" />
<span class="flex gap-2 items-center flex-row">
<Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" />
<Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" size="20" />
<span>{{ tab.title }}</span>
<CountBadge v-if="tab.count" :value="tab.count" />
</span>

View file

@ -73,16 +73,15 @@
</div>
</template>
<Tab :to="{ name: 'repo-pipeline' }" :title="$t('repo.pipeline.tasks')" />
<Tab icon="tray-full" :to="{ name: 'repo-pipeline' }" :title="$t('repo.pipeline.tasks')" />
<Tab
v-if="pipeline.errors && pipeline.errors.length > 0"
:to="{ name: 'repo-pipeline-errors' }"
icon="attention"
icon="file-alert-outline"
:title="pipeline.errors.some((e) => !e.is_warning) ? $t('repo.pipeline.errors') : $t('repo.pipeline.warnings')"
:count="pipeline.errors?.length"
:icon-class="pipeline.errors.some((e) => !e.is_warning) ? 'text-wp-state-error-100' : 'text-wp-state-warn-100'"
/>
<Tab :to="{ name: 'repo-pipeline-config' }" :title="$t('repo.pipeline.config')" />
<Tab icon="file-cog-outlined" :to="{ name: 'repo-pipeline-config' }" :title="$t('repo.pipeline.config')" />
<Tab
v-if="pipeline.changed_files && pipeline.changed_files.length > 0"
:to="{ name: 'repo-pipeline-changed-files' }"
@ -91,6 +90,7 @@
/>
<Tab
v-if="repoPermissions && repoPermissions.push"
icon="magnify-scan"
:to="{ name: 'repo-pipeline-debug' }"
:title="$t('repo.pipeline.debug.title')"
/>