self-hosted/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2025-01-11 17:18:09 +02:00
Code Issues Releases Activity

Refactor icons: harmonize contextually, use filled status icons (#4584)

Browse Source 
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Robert Kaussow <mail@thegeeklab.de>
This commit is contained in:
Patrick Schratz 2024-12-30 10:51:29 +01:00 committed by GitHub
parent 51dd42ceeb
commit c9b80cf282
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 63 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/atomic/Button.vue
View File

@ -15,7 +15,7 @@
:disabled="disabled"
>
<slot>
<Icon v-if="startIcon" :name="startIcon" class="!w-6 !h-6" :class="{ invisible: isLoading, 'mr-1': text }" />
<Icon v-if="startIcon" :name="startIcon" class="!w-5 !h-5" :class="{ invisible: isLoading, 'mr-1': text }" />
<span :class="{ invisible: isLoading }">{{ text }}</span>
<Icon v-if="endIcon" :name="endIcon" class="ml-2 w-6 h-6" :class="{ invisible: isLoading }" />
<div

2
web/src/components/atomic/Error.vue
View File

@ -2,7 +2,7 @@
<div
class="flex items-center gap-2 border-wp-error-300 dark:border-wp-error-300 bg-wp-error-100 dark:bg-wp-error-200 p-2 border border-l-6 border-solid rounded-md text-white"
>
<Icon v-if="!textOnly" name="error" />
<Icon v-if="!textOnly" name="alert" />
<slot>
<span class="whitespace-pre">{{ text }}</span>
</slot>

84
web/src/components/atomic/Icon.vue
View File

@ -1,6 +1,6 @@
<!-- cSpell:ignore radiobox timelapse -->
<template>
<SvgIcon v-if="name === 'duration'" :path="mdiTimelapse" size="1.3rem" />
<SvgIcon v-if="name === 'duration'" :path="mdiTimerOutline" size="1.3rem" />
<SvgIcon v-else-if="name === 'since'" :path="mdiClockTimeEightOutline" size="1.3rem" />
<SvgIcon v-else-if="name === 'push'" :path="mdiSourceBranch" size="1.3rem" />
<SvgIcon v-else-if="name === 'pull-request'" :path="mdiSourcePull" size="1.3rem" />
@ -10,16 +10,17 @@
<SvgIcon v-else-if="name === 'deployment'" :path="mdiPackageVariant" size="1.3rem" />
<SvgIcon v-else-if="name === 'commit'" :path="mdiSourceCommit" size="1.3rem" />
<SvgIcon v-else-if="name === 'back'" :path="mdiArrowLeft" size="1.3rem" />
<SvgIcon v-else-if="name === 'github'" :path="mdiGithub" size="32" />
<SvgIcon v-else-if="name === 'repo'" :path="mdiGit" size="32" />
<SvgIcon v-else-if="name === 'settings'" :path="mdiCog" size="32" />
<SvgIcon v-else-if="name === 'github'" :path="mdiGithub" size="1.3rem" />
<SvgIcon v-else-if="name === 'repo'" :path="mdiGit" size="1.3rem" />
<SvgIcon v-else-if="name === 'settings'" :path="mdiCog" size="1.3rem" />
<SvgIcon v-else-if="name === 'settings-outline'" :path="mdiCogOutline" size="1.3rem" />
<SvgIcon v-else-if="name === 'trash'" :path="mdiTrashCanOutline" size="1.3rem" />
<SvgIcon v-else-if="name === 'status-blocked'" :path="mdiPlayCircleOutline" size="1.3rem" />
<SvgIcon v-else-if="name === 'status-declined'" :path="mdiStopCircleOutline" size="1.3rem" />
<SvgIcon v-else-if="name === 'status-blocked'" :path="mdiPlayCircle" size="1.3rem" />
<SvgIcon v-else-if="name === 'status-declined'" :path="mdiStopCircle" size="1.3rem" />
<SvgIcon
v-else-if="name === 'status-failure' || name === 'status-error' || name === 'status-killed'"
type="mdi"
:path="mdiCloseCircleOutline"
:path="mdiCloseCircle"
size="1.3rem"
/>
<SvgIcon v-else-if="name === 'status-pending'" :path="mdiRadioboxBlank" size="1.3rem" />
@ -29,34 +30,32 @@
:path="mdiRadioboxIndeterminateVariant"
size="1.3rem"
/>
<SvgIcon v-else-if="name === 'status-skipped'" :path="mdiMinusCircleOutline" size="1.3rem" />
<SvgIcon v-else-if="name === 'status-success'" :path="mdiCheckCircleOutline" size="1.3rem" />
<SvgIcon v-else-if="name === 'attention'" :path="mdiAlert" size="1.3rem" />
<SvgIcon v-else-if="name === 'warning'" :path="mdiAlertOutline" size="1.3rem" />
<SvgIcon v-else-if="name === 'error'" :path="mdiAlertCircle" size="1.3rem" />
<SvgIcon v-else-if="name === 'gitlab'" :path="mdiGitlab" size="32" />
<SvgIcon v-else-if="name === 'bitbucket' || name === 'bitbucket-dc'" :path="mdiBitbucket" size="32" />
<SvgIcon v-else-if="name === 'question'" :path="mdiHelpCircleOutline" size="1.3rem" />
<SvgIcon v-else-if="name === 'status-skipped'" :path="mdiMinusCircle" size="1.3rem" />
<SvgIcon v-else-if="name === 'status-success'" :path="mdiCheckCircle" size="1.3rem" />
<SvgIcon v-else-if="name === 'alert'" :path="mdiAlertCircle" size="1.3rem" />
<SvgIcon v-else-if="name === 'question'" :path="mdiHelpCircle" size="1.3rem" />
<SvgIcon v-else-if="name === 'plus'" :path="mdiPlus" size="1.3rem" />
<SvgIcon v-else-if="name === 'list'" :path="mdiFormatListBulleted" size="1.3rem" />
<SvgIcon v-else-if="name === 'heal'" :path="mdiBandage" size="1.3rem" />
<SvgIcon v-else-if="name === 'heal'" :path="mdiWrenchCogOutline" size="1.3rem" />
<SvgIcon v-else-if="name === 'turn-off'" :path="mdiPower" size="1.3rem" />
<SvgIcon v-else-if="name === 'chevron-right'" :path="mdiChevronRight" size="1.3rem" />
<SvgIcon v-else-if="name === 'close'" :path="mdiCloseCircleOutline" size="1.3rem" />
<SvgIcon v-else-if="name === 'edit'" :path="mdiPencil" size="1.3rem" />
<SvgIcon v-else-if="name === 'download'" :path="mdiDownloadCircle" size="1.3rem" />
<SvgIcon v-else-if="name === 'close'" :path="mdiCloseCircle" size="1.3rem" />
<SvgIcon v-else-if="name === 'edit'" :path="mdiPencilOutline" size="1.3rem" />
<SvgIcon v-else-if="name === 'download'" :path="mdiDownloadOutline" size="1.3rem" />
<SvgIcon v-else-if="name === 'stopwatch'" :path="mdiAlarm" size="1.3rem" />
<SvgIcon v-else-if="name === 'auto-scroll'" :path="mdiDownload" size="1.3rem" />
<SvgIcon v-else-if="name === 'auto-scroll-off'" :path="mdiDownloadOff" size="1.3rem" />
<SvgIcon v-else-if="name === 'auto-scroll'" :path="mdiEyeOutline" size="1.3rem" />
<SvgIcon v-else-if="name === 'auto-scroll-off'" :path="mdiEyeOffOutline" size="1.3rem" />
<SvgIcon v-else-if="name === 'pause'" :path="mdiPause" size="1.3rem" />
<SvgIcon v-else-if="name === 'play'" :path="mdiPlay" size="1.3rem" />
<SvgIcon v-else-if="name === 'remove'" :path="mdiClose" size="1.3rem" />
<SvgIcon v-else-if="name === 'play-outline'" :path="mdiPlayOutline" size="1.3rem" />
<SvgIcon v-else-if="name === 'visibility-private'" :path="mdiLockOutline" size="1.3rem" />
<SvgIcon v-else-if="name === 'visibility-internal'" :path="mdiLockOpenOutline" size="1.3rem" />
<SvgIcon v-else-if="name === 'forgejo'" :path="siForgejo.path" size="32" />
<SvgIcon v-else-if="name === 'gitea'" :path="siGitea.path" size="32" />
<SvgIcon v-else-if="name === 'forgejo'" :path="siForgejo.path" size="1.3rem" />
<SvgIcon v-else-if="name === 'gitea'" :path="siGitea.path" size="1.3rem" />
<SvgIcon v-else-if="name === 'gitlab'" :path="mdiGitlab" size="1.3rem" />
<SvgIcon v-else-if="name === 'bitbucket' || name === 'bitbucket-dc'" :path="mdiBitbucket" size="1.3" />
<svg v-else-if="name === 'spinner'" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
@ -84,35 +83,33 @@
<script lang="ts" setup>
import {
mdiAlarm,
mdiAlert,
mdiAlertCircle,
mdiAlertOutline,
mdiArrowLeft,
mdiBandage,
mdiBitbucket,
mdiCheckCircleOutline,
mdiCheckCircle,
mdiChevronRight,
mdiClockTimeEightOutline,
mdiClose,
mdiCloseCircleOutline,
mdiCloseCircle,
mdiCog,
mdiDownload,
mdiDownloadCircle,
mdiDownloadOff,
mdiCogOutline,
mdiDownloadOutline,
mdiEyeOffOutline,
mdiEyeOutline,
mdiFormatListBulleted,
mdiGestureTap,
mdiGit,
mdiGithub,
mdiGitlab,
mdiHelpCircleOutline,
mdiHelpCircle,
mdiLockOpenOutline,
mdiLockOutline,
mdiMinusCircleOutline,
mdiMinusCircle,
mdiPackageVariant,
mdiPause,
mdiPencil,
mdiPencilOutline,
mdiPlay,
mdiPlayCircleOutline,
mdiPlayCircle,
mdiPlayOutline,
mdiPlus,
mdiPower,
mdiRadioboxBlank,
@ -121,10 +118,11 @@ import {
mdiSourceCommit,
mdiSourceMerge,
mdiSourcePull,
mdiStopCircleOutline,
mdiStopCircle,
mdiTagOutline,
mdiTimelapse,
mdiTimerOutline,
mdiTrashCanOutline,
mdiWrenchCogOutline,
} from '@mdi/js';
import { siForgejo, siGitea } from 'simple-icons';
@ -144,6 +142,7 @@ export type IconNames =
| 'github'
| 'repo'
| 'settings'
| 'settings-outline'
| 'trash'
| 'status-blocked'
| 'status-declined'
@ -174,14 +173,11 @@ export type IconNames =
| 'download'
| 'auto-scroll'
| 'auto-scroll-off'
| 'refresh'
| 'play'
| 'play-outline'
| 'pause'
| 'warning'
| 'attention'
| 'alert'
| 'spinner'
| 'error'
| 'remove'
| 'visibility-private'
| 'visibility-internal';

2
web/src/components/atomic/Warning.vue
View File

@ -2,7 +2,7 @@
<div
class="flex gap-4 items-center text-gray-700 font-bold rounded-md p-4 border border-solid border-l-6 border-wp-hint-warn-200 bg-wp-hint-warn-100"
>
<Icon v-if="!textOnly" name="warning" class="flex-shrink-0" />
<Icon v-if="!textOnly" name="alert" class="flex-shrink-0" />
<slot>
<span class="whitespace-pre-wrap">{{ text }}</span>
</slot>

2
web/src/components/form/KeyValueEditor.vue
View File

@ -26,7 +26,7 @@
:title="deleteTitle"
@click="deleteItem(index)"
>
<Icon name="remove" />
<Icon name="close" />
</Button>
</div>
</div>

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

@ -1,10 +1,10 @@
<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="border-wp-background-400 dark:border-wp-background-100 bg-wp-background-100 dark:bg-wp-background-300 border-b-1 text-wp-text-100"
:class="{ 'md:px-4': fullWidth }"
>
<Container :full-width="fullWidth" class="!py-0">
<div class="flex w-full md:items-center flex-col py-3 gap-2 md:gap-10 md:flex-row md:justify-between">
<div class="flex md:flex-row flex-col md:justify-between md:items-center gap-2 md:gap-10 py-3 w-full">
<div
class="flex items-center content-start min-h-10"
:class="{
@ -18,7 +18,7 @@
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">
<h1 class="flex items-center gap-x-2 min-w-0 text-wp-text-100 text-xl">
<slot name="title" />
</h1>
</div>
@ -32,7 +32,7 @@
/>
<div
v-if="$slots.headerActions"
class="flex items-center md:justify-end gap-x-2 min-w-0"
class="flex md:justify-end items-center gap-x-2 min-w-0"
:class="{
'md:flex-1': searchBoxPresent,
}"
@ -41,9 +41,9 @@
</div>
</div>
<div v-if="enableTabs" class="flex md:items-center flex-col py-2 md:flex-row md:justify-between md:py-0">
<div v-if="enableTabs" class="flex md:flex-row flex-col md:justify-between md:items-center py-2 md:py-0">
<Tabs class="<md:order-2" />
<div v-if="$slots.headerActions" class="flex content-start md:justify-end">
<div v-if="$slots.headerActions" class="flex md:justify-end content-start">
<slot name="tabActions" />
</div>
</div>

2
web/src/views/admin/AdminOrgs.vue
View File

@ -14,7 +14,7 @@
:to="{ name: 'org', params: { orgId: org.id } }"
/>
<IconButton
icon="settings"
icon="settings-outline"
:title="$t('admin.settings.orgs.org_settings')"
class="w-8 h-8"
:to="{ name: 'org-settings', params: { orgId: org.id } }"

3
web/src/views/admin/AdminQueue.vue
View File

@ -12,9 +12,10 @@
<Button v-else :text="$t('admin.settings.queue.pause')" start-icon="pause" @click="pauseQueue" />
<Icon
:name="queueInfo.paused ? 'pause' : 'play'"
class="w-6 h-6"
:class="{
'text-wp-error-100': queueInfo.paused,
'text-wp-state-ok-100': !queueInfo.paused,
'text-wp-text-100': !queueInfo.paused,
}"
/>
</div>

4
web/src/views/admin/AdminRepos.vue
View File

@ -16,7 +16,7 @@
class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-100"
>
<span>{{ repo.full_name }}</span>
<div class="ml-auto flex items-center">
<div class="flex items-center ml-auto">
<Badge v-if="!repo.active" class="<md:hidden mr-2" :label="$t('admin.settings.repos.disabled')" />
<IconButton
icon="chevron-right"
@ -25,7 +25,7 @@
:to="{ name: 'repo', params: { repoId: repo.id } }"
/>
<IconButton
icon="settings"
icon="settings-outline"
:title="$t('admin.settings.repos.settings')"
class="w-8 h-8"
:to="{ name: 'repo-settings', params: { repoId: repo.id } }"

2
web/src/views/repo/pipeline/PipelineErrors.vue
View File

@ -6,7 +6,7 @@
<div class="grid grid-cols-[minmax(10rem,auto),3fr]">
<span class="flex items-center gap-x-2">
<Icon
name="attention"
name="alert"
class="flex-shrink-0 my-1"
:class="{
'text-wp-state-warn-100': error.is_warning,

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

@ -77,7 +77,7 @@
<Tab
v-if="pipeline.errors && pipeline.errors.length > 0"
:to="{ name: 'repo-pipeline-errors' }"
icon="attention"
icon="alert"
: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-error-100' : 'text-wp-state-warn-100'"

7
web/src/views/repo/settings/Crons.vue
View File

@ -28,7 +28,12 @@
</span>
<span v-else class="col-span-2 <md:hidden">{{ $t('repo.settings.crons.not_executed_yet') }}</span>
</span>
<IconButton icon="play" class="ml-auto w-8 h-8" :title="$t('repo.settings.crons.run')" @click="runCron(cron)" />
<IconButton
icon="play-outline"
class="ml-auto w-8 h-8"
:title="$t('repo.settings.crons.run')"
@click="runCron(cron)"
/>
<IconButton icon="edit" class="w-8 h-8" :title="$t('repo.settings.crons.edit')" @click="selectedCron = cron" />
<IconButton
icon="trash"