diff options
| author | wxiaoguang <wxiaoguang@gmail.com> | 2023-03-23 11:24:16 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-03-23 11:24:16 +0800 |
| commit | 389e83f7eb68c43f6f0313b20acde547aef12442 (patch) | |
| tree | 08edb4fa00247fb394e7f065614f9fb7f55336f4 /web_src/js/components | |
| parent | 1d35fa0e784dffcadacb2322a3d7ac3ec2ff89b2 (diff) | |
| download | gitea-389e83f7eb68c43f6f0313b20acde547aef12442.tar.gz gitea-389e83f7eb68c43f6f0313b20acde547aef12442.zip | |
Improve `<SvgIcon>` to make it output `svg` node and optimize performance (#23570)
Before, the Vue `<SvgIcon>` always outputs DOM nodes like:
```html
<span class="outer-class">
<svg class="class-name-defined" ...></svg>
</span>
```
The `span` is redundant and I guess such layout and the inconsistent
`class/class-name` attributes would cause bugs sooner or later.
This PR makes the `<SvgIcon>` clear, and it's faster than before,
because it doesn't need to parse the whole SVG string.
Before:
<details>
</details>
After:
---------
Co-authored-by: silverwind <me@silverwind.io>
Diffstat (limited to 'web_src/js/components')
| -rw-r--r-- | web_src/js/components/ActionRunStatus.vue | 4 | ||||
| -rw-r--r-- | web_src/js/components/ContextPopup.vue | 2 |
2 files changed, 3 insertions, 3 deletions
diff --git a/web_src/js/components/ActionRunStatus.vue b/web_src/js/components/ActionRunStatus.vue index 3717b64956..b72dfb1aa6 100644 --- a/web_src/js/components/ActionRunStatus.vue +++ b/web_src/js/components/ActionRunStatus.vue @@ -1,10 +1,10 @@ <template> - <SvgIcon name="octicon-check-circle-fill" class="green" :size="size" :class-name="className" v-if="status === 'success'"/> + <SvgIcon name="octicon-check-circle-fill" class="ui text green" :size="size" :class-name="className" v-if="status === 'success'"/> <SvgIcon name="octicon-skip" class="ui text grey" :size="size" :class-name="className" v-else-if="status === 'skipped'"/> <SvgIcon name="octicon-clock" class="ui text yellow" :size="size" :class-name="className" v-else-if="status === 'waiting'"/> <SvgIcon name="octicon-blocked" class="ui text yellow" :size="size" :class-name="className" v-else-if="status === 'blocked'"/> <SvgIcon name="octicon-meter" class="ui text yellow" :size="size" :class-name="'job-status-rotate ' + className" v-else-if="status === 'running'"/> - <SvgIcon name="octicon-x-circle-fill" class="red" :size="size" v-else/> + <SvgIcon name="octicon-x-circle-fill" class="ui text red" :size="size" v-else/> </template> <script> diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue index ad305b23a9..98f9db51f9 100644 --- a/web_src/js/components/ContextPopup.vue +++ b/web_src/js/components/ContextPopup.vue @@ -3,7 +3,7 @@ <div v-if="loading" class="ui active centered inline loader"/> <div v-if="!loading && issue !== null"> <p><small>{{ issue.repository.full_name }} on {{ createdAt }}</small></p> - <p><svg-icon :name="icon" :class="[color]" /> <strong>{{ issue.title }}</strong> #{{ issue.number }}</p> + <p><svg-icon :name="icon" :class="['text', color]" /> <strong>{{ issue.title }}</strong> #{{ issue.number }}</p> <p>{{ body }}</p> <div> <div |