Skip to content

Commit

Permalink
use mdi/si directly
Browse files Browse the repository at this point in the history
  • Loading branch information
@qwerty287
qwerty287 committed Jun 21, 2024
1 parent 439dc00 commit e440ea7
Show file tree
Hide file tree
Showing 4 changed files with 81 additions and 95 deletions.
3 changes: 3 additions & 0 deletions web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,9 @@
},
"dependencies": {
"@intlify/unplugin-vue-i18n": "^4.0.0",
"@jamescoyle/vue-icon": "^0.1.2",
"@kyvg/vue3-notification": "^3.2.1",
"@mdi/js": "^7.4.47",
"@vueuse/core": "^10.10.0",
"ansi_up": "^6.0.2",
"dayjs": "^1.11.11",
Expand All @@ -30,6 +32,7 @@
"pinia": "^2.1.7",
"prismjs": "^1.29.0",
"semver": "^7.6.2",
"simple-icons": "^12.3.0",
"vue": "^3.4.27",
"vue-i18n": "^9.13.1",
"vue-router": "^4.3.2"
Expand Down
25 changes: 25 additions & 0 deletions web/pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion web/src/components/atomic/Button.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
'bg-wp-control-error-200': color === 'red',
}"
>
<Icon name="spinner" />
<Icon name="spinner" fill="#FFFFFF" />
</div>
</slot>
</component>
Expand Down
146 changes: 52 additions & 94 deletions web/src/components/atomic/Icon.vue
View file
Original file line number Diff line number Diff line change
@@ -1,103 +1,61 @@
<!-- cSpell:ignore radiobox timelapse -->
<template>
<IMdiTimelapse v-if="name === 'duration'" class="h-6 w-6" />
<IMdiClockTimeEightOutline v-else-if="name === 'since'" class="h-6 w-6" />
<IMdiSourceBranch v-else-if="name === 'push'" class="h-6 w-6" />
<IMdiSourcePull v-else-if="name === 'pull-request'" class="h-6 w-6" />
<IMdiSourceMerge v-else-if="name === 'pull-request-closed'" class="h-6 w-6" />
<IMdiGestureTap v-else-if="name === 'manual-pipeline'" class="h-6 w-6" />
<IMdiTagOutline v-else-if="name === 'tag'" class="h-6 w-6" />
<IMdiPackageVariant v-else-if="name === 'deployment'" class="h-6 w-6" />
<IMdiSourceCommit v-else-if="name === 'commit'" class="h-6 w-6" />
<IMdiArrowLeft v-else-if="name === 'back'" class="w-8 h-8" />
<IMdiGithub v-else-if="name === 'github'" class="h-8 w-8" />
<IMdiGit v-else-if="name === 'repo'" class="h-8 w-8" />
<IMdiSettings v-else-if="name === 'settings'" class="w-8 h-8" />
<IMdiTrashCanOutline v-else-if="name === 'trash'" class="h-6 w-6" />
<IMdiPlay v-else-if="name === 'status-blocked'" class="h-6 w-6" />
<IMdiStop v-else-if="name === 'status-declined'" class="h-6 w-6" />
<IMdiCloseThick
v-else-if="name === 'status-failure' || name === 'status-error' || name === 'status-killed'"
class="h-6 w-6"
/>
<IMdiRadioboxBlank v-else-if="name === 'status-pending'" class="h-6 w-6" />
<IMdiRadioboxIndeterminateVariant
v-else-if="name === 'status-running' || name === 'status-started'"
class="h-6 w-6"
/>
<IMdiMinusCircle v-else-if="name === 'status-skipped'" class="h-6 w-6" />
<IMdiCheckCircle v-else-if="name === 'status-success'" class="h-6 w-6" />
<IMdiWarning v-else-if="name === 'attention'" class="h-5 w-5" />
<IMdiWarningOutline v-else-if="name === 'warning'" class="h-5 w-5" />
<IMdiErrorOutline v-else-if="name === 'error'" class="h-5 w-5" />
<IMdiGitlab v-else-if="name === 'gitlab'" class="h-8 w-8" />
<IMdiBitbucket v-else-if="name === 'bitbucket' || name === 'bitbucket-dc'" class="h-8 w-8" />
<IMdiQuestionMarkCircleOutline v-else-if="name === 'question'" class="h-6 w-6" />
<IMdiAdd v-else-if="name === 'plus'" class="h-6 w-6" />
<IMdiFormatListBulleted v-else-if="name === 'list'" class="h-6 w-6" />
<IMdiPlaster v-else-if="name === 'heal'" class="h-6 w-6" />
<IMdiPower v-else-if="name === 'turn-off'" class="h-6 w-6" />
<IMdiChevronRight v-else-if="name === 'chevron-right'" class="h-6 w-6" />
<IMdiCloseCircleOutline v-else-if="name === 'close'" class="h-6 w-6" />
<IMdiEdit v-else-if="name === 'edit'" class="h-6 w-6" />
<IMdiDownloadCircle v-else-if="name === 'download'" class="h-6 w-6" />
<IMdiAlarmClock v-else-if="name === 'stopwatch'" class="h-6 w-6" />
<IMdiDownload v-else-if="name === 'auto-scroll'" class="h-6 w-6" />
<IMdiDownloadOff v-else-if="name === 'auto-scroll-off'" class="h-6 w-6" />
<IMdiPlayArrow v-else-if="name === 'play'" class="h-6 w-6" />
<IMdiPause v-else-if="name === 'pause'" class="h-6 w-6" />
<IMdiClose v-else-if="name === 'times'" class="h-6 w-6" />
<ISimpleIconsGitea v-else-if="name === 'gitea'" class="h-8 w-8" />
<ISimpleIconsForgejo v-else-if="name === 'forgejo'" class="h-8 w-8" />
<ISvgSpinners180RingWithBg v-else-if="name === 'spinner'" class="h-6 w-6" />
<SvgIcon type="mdi" :path="mdiTimelapse" v-if="name === 'duration'" :size="24"/>
<SvgIcon type="mdi" :path="mdiClockTimeEightOutline" v-else-if="name === 'since'" :size="24"/>
<SvgIcon type="mdi" :path="mdiSourceBranch" v-else-if="name === 'push'" :size="24"/>
<SvgIcon type="mdi" :path="mdiSourcePull" v-else-if="name === 'pull-request'" :size="24"/>
<SvgIcon type="mdi" :path="mdiSourceMerge" v-else-if="name === 'pull-request-closed'" :size="24"/>
<SvgIcon type="mdi" :path="mdiGestureTap" v-else-if="name === 'manual-pipeline'" :size="24"/>
<SvgIcon type="mdi" :path="mdiTagOutline" v-else-if="name === 'tag'" :size="24"/>
<SvgIcon type="mdi" :path="mdiPackageVariant" v-else-if="name === 'deployment'" :size="24"/>
<SvgIcon type="mdi" :path="mdiSourceCommit" v-else-if="name === 'commit'" :size="24"/>
<SvgIcon type="mdi" :path="mdiArrowLeft" v-else-if="name === 'back'" :size="24"/>
<SvgIcon type="mdi" :path="mdiGithub" v-else-if="name === 'github'" :size="32"/>
<SvgIcon type="mdi" :path="mdiGit" v-else-if="name === 'repo'" :size="32"/>
<SvgIcon type="mdi" :path="mdiCog" v-else-if="name === 'settings'" :size="32"/>
<SvgIcon type="mdi" :path="mdiTrashCanOutline" v-else-if="name === 'trash'" :size="24"/>
<SvgIcon type="mdi" :path="mdiPlay" v-else-if="name === 'status-blocked' || name === 'play'" :size="24"/>
<SvgIcon type="mdi" :path="mdiStop" v-else-if="name === 'status-declined'" :size="24"/>
<SvgIcon type="mdi" :path="mdiCloseThick" v-else-if="name === 'status-failure' || name === 'status-error' || name === 'status-killed'" :size="24"/>
<SvgIcon type="mdi" :path="mdiRadioboxBlank" v-else-if="name === 'status-pending'" :size="24"/>
<SvgIcon type="mdi" :path="mdiRadioboxIndeterminateVariant" v-else-if="name === 'status-running' || name === 'status-started'" :size="24"/>
<SvgIcon type="mdi" :path="mdiMinusCircle" v-else-if="name === 'status-skipped'" :size="24"/>
<SvgIcon type="mdi" :path="mdiCheckCircle" v-else-if="name === 'status-success'" :size="24"/>
<SvgIcon type="mdi" :path="mdiAlert" v-else-if="name === 'attention'" :size="24"/>
<SvgIcon type="mdi" :path="mdiAlertOutline" v-else-if="name === 'warning'" :size="20"/>
<SvgIcon type="mdi" :path="mdiAlertCircle" v-else-if="name === 'error'" :size="20"/>
<SvgIcon type="mdi" :path="mdiGitlab" v-else-if="name === 'gitlab'" :size="32"/>
<SvgIcon type="mdi" :path="mdiBitbucket" v-else-if="name === 'bitbucket' || name === 'bitbucket-dc'" :size="32"/>
<SvgIcon type="mdi" :path="mdiHelpCircleOutline" v-else-if="name === 'question'" :size="24"/>
<SvgIcon type="mdi" :path="mdiPlus" v-else-if="name === 'plus'" :size="24"/>
<SvgIcon type="mdi" :path="mdiFormatListBulleted" v-else-if="name === 'list'" :size="24"/>
<SvgIcon type="mdi" :path="mdiBandage" v-else-if="name === 'heal'" :size="24"/>
<SvgIcon type="mdi" :path="mdiPower" v-else-if="name === 'turn-off'" :size="24"/>
<SvgIcon type="mdi" :path="mdiChevronRight" v-else-if="name === 'chevron-right'" :size="24"/>
<SvgIcon type="mdi" :path="mdiCloseCircleOutline" v-else-if="name === 'close'" :size="24"/>
<SvgIcon type="mdi" :path="mdiPencil" v-else-if="name === 'edit'" :size="24"/>
<SvgIcon type="mdi" :path="mdiDownloadCircle" v-else-if="name === 'download'" :size="24"/>
<SvgIcon type="mdi" :path="mdiAlarm" v-else-if="name === 'stopwatch'" :size="24"/>
<SvgIcon type="mdi" :path="mdiDownload" v-else-if="name === 'auto-scroll'" :size="24"/>
<SvgIcon type="mdi" :path="mdiDownloadOff" v-else-if="name === 'auto-scroll-off'" :size="24"/>
<SvgIcon type="mdi" :path="mdiPause" v-else-if="name === 'pause'" :size="24"/>
<SvgIcon type="mdi" :path="mdiClose" v-else-if="name === 'times'" :size="24"/>

<SvgIcon type="simple-icons" :path="siForgejo.path" v-else-if="name === 'forgejo'" class="h-8 w-8"/>
<SvgIcon type="simple-icons" :path="siGitea.path" v-else-if="name === 'gitea'" :size="32"/>

<svg v-else-if="name === 'spinner'" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/>
<path d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"><animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"/></path>
</svg>

<div v-else-if="name === 'blank'" class="h-6 w-6" />
</template>

<script lang="ts" setup>
import IMdiAdd from '~icons/mdi/add';
import IMdiAlarmClock from '~icons/mdi/alarm-clock';
import IMdiArrowLeft from '~icons/mdi/arrow-left';
import IMdiBitbucket from '~icons/mdi/bitbucket';
import IMdiCheckCircle from '~icons/mdi/check-circle';
import IMdiChevronRight from '~icons/mdi/chevron-right';
import IMdiClockTimeEightOutline from '~icons/mdi/clock-time-eight-outline';
import IMdiClose from '~icons/mdi/close';
import IMdiCloseCircleOutline from '~icons/mdi/close-circle-outline';
import IMdiCloseThick from '~icons/mdi/close-thick';
import IMdiDownload from '~icons/mdi/download';
import IMdiDownloadCircle from '~icons/mdi/download-circle';
import IMdiDownloadOff from '~icons/mdi/download-off';
import IMdiEdit from '~icons/mdi/edit';
import IMdiErrorOutline from '~icons/mdi/error-outline';
import IMdiFormatListBulleted from '~icons/mdi/format-list-bulleted';
import IMdiGestureTap from '~icons/mdi/gesture-tap';
import IMdiGit from '~icons/mdi/git';
import IMdiGithub from '~icons/mdi/github';
import IMdiGitlab from '~icons/mdi/gitlab';
import IMdiMinusCircle from '~icons/mdi/minus-circle';
import IMdiPackageVariant from '~icons/mdi/package-variant';
import IMdiPause from '~icons/mdi/pause';
import IMdiPlaster from '~icons/mdi/plaster';
import IMdiPlay from '~icons/mdi/play';
import IMdiPlayArrow from '~icons/mdi/play-arrow';
import IMdiPower from '~icons/mdi/power';
import IMdiQuestionMarkCircleOutline from '~icons/mdi/question-mark-circle-outline';
import IMdiRadioboxBlank from '~icons/mdi/radiobox-blank';
import IMdiRadioboxIndeterminateVariant from '~icons/mdi/radiobox-indeterminate-variant';
import IMdiSettings from '~icons/mdi/settings';
import IMdiSourceBranch from '~icons/mdi/source-branch';
import IMdiSourceCommit from '~icons/mdi/source-commit';
import IMdiSourceMerge from '~icons/mdi/source-merge';
import IMdiSourcePull from '~icons/mdi/source-pull';
import IMdiStop from '~icons/mdi/stop';
import IMdiTagOutline from '~icons/mdi/tag-outline';
import IMdiTimelapse from '~icons/mdi/timelapse';
import IMdiTrashCanOutline from '~icons/mdi/trash-can-outline';
import IMdiWarning from '~icons/mdi/warning';
import IMdiWarningOutline from '~icons/mdi/warning-outline';
import ISimpleIconsForgejo from '~icons/simple-icons/forgejo';
import ISimpleIconsGitea from '~icons/simple-icons/gitea';
import ISvgSpinners180RingWithBg from '~icons/svg-spinners/180-ring-with-bg';
import SvgIcon from '@jamescoyle/vue-icon'
import { mdiTimelapse, mdiClockTimeEightOutline, mdiSourceBranch, mdiSourcePull, mdiSourceMerge, mdiGestureTap, mdiTagOutline, mdiPackageVariant, mdiSourceCommit, mdiArrowLeft, mdiGithub, mdiGit, mdiCog, mdiTrashCanOutline, mdiPlay, mdiStop, mdiCloseThick, mdiRadioboxBlank, mdiRadioboxIndeterminateVariant, mdiMinusCircle, mdiCheckCircle, mdiAlert, mdiAlertOutline, mdiAlertCircle, mdiGitlab, mdiBitbucket, mdiHelpCircleOutline, mdiPlus, mdiFormatListBulleted, mdiBandage, mdiPower, mdiChevronRight, mdiCloseCircleOutline, mdiPencil, mdiDownloadCircle, mdiAlarm, mdiDownload, mdiDownloadOff, mdiPause, mdiClose } from '@mdi/js'
import { siForgejo, siGitea } from 'simple-icons';
export type IconNames =
| 'duration'
Expand Down

0 comments on commit e440ea7

Please sign in to comment.