public/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2025-10-31 21:28:11 +09:00
Code Issues Packages Projects Releases Wiki Activity

Remove "class-name" from svg icon (#33540)

Browse Source 
Only use "class" attribute
This commit is contained in:
wxiaoguang
2025-02-10 04:39:54 +08:00
committed by GitHub
parent a52720b5b4
commit 06088ec672
5 changed files with 20 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web_src/js/components/ActionRunStatus.vue
View File

@@ -19,12 +19,12 @@ withDefaults(defineProps<{
<template> <template>
<span :data-tooltip-content="localeStatus ?? status" v-if="status"> <span :data-tooltip-content="localeStatus ?? status" v-if="status">
<SvgIcon name="octicon-check-circle-fill" class="text green" :size="size" :class-name="className" v-if="status === 'success'"/> <SvgIcon name="octicon-check-circle-fill" class="text green" :size="size" :class="className" v-if="status === 'success'"/>
<SvgIcon name="octicon-skip" class="text grey" :size="size" :class-name="className" v-else-if="status === 'skipped'"/> <SvgIcon name="octicon-skip" class="text grey" :size="size" :class="className" v-else-if="status === 'skipped'"/>
<SvgIcon name="octicon-stop" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'cancelled'"/> <SvgIcon name="octicon-stop" class="text yellow" :size="size" :class="className" v-else-if="status === 'cancelled'"/>
<SvgIcon name="octicon-clock" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'waiting'"/> <SvgIcon name="octicon-clock" class="text yellow" :size="size" :class="className" v-else-if="status === 'waiting'"/>
<SvgIcon name="octicon-blocked" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'blocked'"/> <SvgIcon name="octicon-blocked" class="text yellow" :size="size" :class="className" v-else-if="status === 'blocked'"/>
<SvgIcon name="octicon-meter" class="text yellow" :size="size" :class-name="'job-status-rotate ' + className" v-else-if="status === 'running'"/> <SvgIcon name="octicon-meter" class="text yellow" :size="size" :class="'job-status-rotate ' + className" v-else-if="status === 'running'"/>
<SvgIcon name="octicon-x-circle-fill" class="text red" :size="size" v-else/><!-- failure, unknown --> <SvgIcon name="octicon-x-circle-fill" class="text red" :size="size" v-else/><!-- failure, unknown -->
</span> </span>
</template> </template>

18
web_src/js/components/DashboardRepoList.vue
View File

@@ -367,7 +367,7 @@ export default defineComponent({
otherwise if the "input" handles click event for intermediate status, it breaks the internal state--> otherwise if the "input" handles click event for intermediate status, it breaks the internal state-->
<input type="checkbox" class="tw-pointer-events-none" v-bind.prop="checkboxArchivedFilterProps"> <input type="checkbox" class="tw-pointer-events-none" v-bind.prop="checkboxArchivedFilterProps">
<label> <label>
<svg-icon name="octicon-archive" :size="16" class-name="tw-mr-1"/> <svg-icon name="octicon-archive" :size="16" class="tw-mr-1"/>
{{ textShowArchived }} {{ textShowArchived }}
</label> </label>
</div> </div>
@@ -376,7 +376,7 @@ export default defineComponent({
<div class="ui checkbox" ref="checkboxPrivateFilter" :title="checkboxPrivateFilterTitle"> <div class="ui checkbox" ref="checkboxPrivateFilter" :title="checkboxPrivateFilterTitle">
<input type="checkbox" class="tw-pointer-events-none" v-bind.prop="checkboxPrivateFilterProps"> <input type="checkbox" class="tw-pointer-events-none" v-bind.prop="checkboxPrivateFilterProps">
<label> <label>
<svg-icon name="octicon-lock" :size="16" class-name="tw-mr-1"/> <svg-icon name="octicon-lock" :size="16" class="tw-mr-1"/>
{{ textShowPrivate }} {{ textShowPrivate }}
</label> </label>
</div> </div>
@@ -413,7 +413,7 @@ export default defineComponent({
<ul class="repo-owner-name-list"> <ul class="repo-owner-name-list">
<li class="tw-flex tw-items-center tw-py-2" v-for="repo, index in repos" :class="{'active': index === activeIndex}" :key="repo.id"> <li class="tw-flex tw-items-center tw-py-2" v-for="repo, index in repos" :class="{'active': index === activeIndex}" :key="repo.id">
<a class="repo-list-link muted" :href="repo.link"> <a class="repo-list-link muted" :href="repo.link">
<svg-icon :name="repoIcon(repo)" :size="16" class-name="repo-list-icon"/> <svg-icon :name="repoIcon(repo)" :size="16" class="repo-list-icon"/>
<div class="text truncate">{{ repo.full_name }}</div> <div class="text truncate">{{ repo.full_name }}</div>
<div v-if="repo.archived"> <div v-if="repo.archived">
<svg-icon name="octicon-archive" :size="16"/> <svg-icon name="octicon-archive" :size="16"/>
@@ -421,7 +421,7 @@ export default defineComponent({
</a> </a>
<a class="tw-flex tw-items-center" v-if="repo.latest_commit_status_state" :href="repo.latest_commit_status_state_link" :data-tooltip-content="repo.locale_latest_commit_status_state"> <a class="tw-flex tw-items-center" v-if="repo.latest_commit_status_state" :href="repo.latest_commit_status_state_link" :data-tooltip-content="repo.locale_latest_commit_status_state">
<!-- the commit status icon logic is taken from templates/repo/commit_status.tmpl --> <!-- the commit status icon logic is taken from templates/repo/commit_status.tmpl -->
<svg-icon :name="statusIcon(repo.latest_commit_status_state)" :class-name="'tw-ml-2 commit-status icon text ' + statusColor(repo.latest_commit_status_state)" :size="16"/> <svg-icon :name="statusIcon(repo.latest_commit_status_state)" :class="'tw-ml-2 commit-status icon text ' + statusColor(repo.latest_commit_status_state)" :size="16"/>
</a> </a>
</li> </li>
</ul> </ul>
@@ -432,7 +432,7 @@ export default defineComponent({
class="item navigation tw-py-1" :class="{'disabled': page === 1}" class="item navigation tw-py-1" :class="{'disabled': page === 1}"
@click="changePage(1)" :title="textFirstPage" @click="changePage(1)" :title="textFirstPage"
> >
<svg-icon name="gitea-double-chevron-left" :size="16" class-name="tw-mr-1"/> <svg-icon name="gitea-double-chevron-left" :size="16" class="tw-mr-1"/>
</a> </a>
<a <a
class="item navigation tw-py-1" :class="{'disabled': page === 1}" class="item navigation tw-py-1" :class="{'disabled': page === 1}"
@@ -445,13 +445,13 @@ export default defineComponent({
class="item navigation" :class="{'disabled': page === finalPage}" class="item navigation" :class="{'disabled': page === finalPage}"
@click="changePage(page + 1)" :title="textNextPage" @click="changePage(page + 1)" :title="textNextPage"
> >
<svg-icon name="octicon-chevron-right" :size="16" class-name="tw-ml-1"/> <svg-icon name="octicon-chevron-right" :size="16" class="tw-ml-1"/>
</a> </a>
<a <a
class="item navigation tw-py-1" :class="{'disabled': page === finalPage}" class="item navigation tw-py-1" :class="{'disabled': page === finalPage}"
@click="changePage(finalPage)" :title="textLastPage" @click="changePage(finalPage)" :title="textLastPage"
> >
<svg-icon name="gitea-double-chevron-right" :size="16" class-name="tw-ml-1"/> <svg-icon name="gitea-double-chevron-right" :size="16" class="tw-ml-1"/>
</a> </a>
</div> </div>
</div> </div>
@@ -471,7 +471,7 @@ export default defineComponent({
<ul class="repo-owner-name-list"> <ul class="repo-owner-name-list">
<li class="tw-flex tw-items-center tw-py-2" v-for="org in organizations" :key="org.name"> <li class="tw-flex tw-items-center tw-py-2" v-for="org in organizations" :key="org.name">
<a class="repo-list-link muted" :href="subUrl + '/' + encodeURIComponent(org.name)"> <a class="repo-list-link muted" :href="subUrl + '/' + encodeURIComponent(org.name)">
<svg-icon name="octicon-organization" :size="16" class-name="repo-list-icon"/> <svg-icon name="octicon-organization" :size="16" class="repo-list-icon"/>
<div class="text truncate">{{ org.full_name ? `${org.full_name} (${org.name})` : org.name }}</div> <div class="text truncate">{{ org.full_name ? `${org.full_name} (${org.name})` : org.name }}</div>
<div><!-- div to prevent underline of label on hover --> <div><!-- div to prevent underline of label on hover -->
<span class="ui tiny basic label" v-if="org.org_visibility !== 'public'"> <span class="ui tiny basic label" v-if="org.org_visibility !== 'public'">
@@ -481,7 +481,7 @@ export default defineComponent({
</a> </a>
<div class="text light grey tw-flex tw-items-center tw-ml-2"> <div class="text light grey tw-flex tw-items-center tw-ml-2">
{{ org.num_repos }} {{ org.num_repos }}
<svg-icon name="octicon-repo" :size="16" class-name="tw-ml-1 tw-mt-0.5"/> <svg-icon name="octicon-repo" :size="16" class="tw-ml-1 tw-mt-0.5"/>
</div> </div>
</li> </li>
</ul> </ul>

6
web_src/js/components/RepoBranchTagSelector.vue
View File

@@ -226,7 +226,7 @@ export default defineComponent({
<strong ref="dropdownRefName" class="tw-ml-2 tw-inline-block gt-ellipsis">{{ currentRefShortName }}</strong> <strong ref="dropdownRefName" class="tw-ml-2 tw-inline-block gt-ellipsis">{{ currentRefShortName }}</strong>
</template> </template>
</span> </span>
<svg-icon name="octicon-triangle-down" :size="14" class-name="dropdown icon"/> <svg-icon name="octicon-triangle-down" :size="14" class="dropdown icon"/>
</div> </div>
<div class="menu transition" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak> <div class="menu transition" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak>
<div class="ui icon search input"> <div class="ui icon search input">
@@ -235,10 +235,10 @@ export default defineComponent({
</div> </div>
<div v-if="showTabBranches" class="branch-tag-tab"> <div v-if="showTabBranches" class="branch-tag-tab">
<a class="branch-tag-item muted" :class="{active: selectedTab === 'branches'}" href="#" @click="handleTabSwitch('branches')"> <a class="branch-tag-item muted" :class="{active: selectedTab === 'branches'}" href="#" @click="handleTabSwitch('branches')">
<svg-icon name="octicon-git-branch" :size="16" class-name="tw-mr-1"/>{{ textBranches }} <svg-icon name="octicon-git-branch" :size="16" class="tw-mr-1"/>{{ textBranches }}
</a> </a>
<a v-if="showTabTags" class="branch-tag-item muted" :class="{active: selectedTab === 'tags'}" href="#" @click="handleTabSwitch('tags')"> <a v-if="showTabTags" class="branch-tag-item muted" :class="{active: selectedTab === 'tags'}" href="#" @click="handleTabSwitch('tags')">
<svg-icon name="octicon-tag" :size="16" class-name="tw-mr-1"/>{{ textTags }} <svg-icon name="octicon-tag" :size="16" class="tw-mr-1"/>{{ textTags }}
</a> </a>
</div> </div>
<div class="branch-tag-divider"/> <div class="branch-tag-divider"/>

3
web_src/js/svg.test.ts
View File

@@ -16,12 +16,11 @@ test('svgParseOuterInner', () => {
test('SvgIcon', () => { test('SvgIcon', () => {
const root = document.createElement('div'); const root = document.createElement('div');
createApp({render: () => h(SvgIcon, {name: 'octicon-link', size: 24, class: 'base', className: 'extra'})}).mount(root); createApp({render: () => h(SvgIcon, {name: 'octicon-link', size: 24, class: 'base'})}).mount(root);
const node = root.firstChild as Element; const node = root.firstChild as Element;
expect(node.nodeName).toEqual('svg'); expect(node.nodeName).toEqual('svg');
expect(node.getAttribute('width')).toEqual('24'); expect(node.getAttribute('width')).toEqual('24');
expect(node.getAttribute('height')).toEqual('24'); expect(node.getAttribute('height')).toEqual('24');
expect(node.classList.contains('octicon-link')).toBeTruthy(); expect(node.classList.contains('octicon-link')).toBeTruthy();
expect(node.classList.contains('base')).toBeTruthy(); expect(node.classList.contains('base')).toBeTruthy();
expect(node.classList.contains('extra')).toBeTruthy();
}); });

11
web_src/js/svg.ts
View File

@@ -201,7 +201,6 @@ export const SvgIcon = defineComponent({
props: { props: {
name: {type: String as PropType<SvgName>, required: true}, name: {type: String as PropType<SvgName>, required: true},
size: {type: Number, default: 16}, size: {type: Number, default: 16},
className: {type: String, default: ''},
symbolId: {type: String}, symbolId: {type: String},
}, },
render() { render() {
@@ -216,15 +215,7 @@ export const SvgIcon = defineComponent({
attrs[`^width`] = this.size; attrs[`^width`] = this.size;
attrs[`^height`] = this.size; attrs[`^height`] = this.size;
// make the <SvgIcon class="foo" class-name="bar"> classes work together const classes = Array.from(svgOuter.classList);
const classes: Array<string> = [];
for (const cls of svgOuter.classList) {
classes.push(cls);
}
// TODO: drop the `className/class-name` prop in the future, only use "class" prop
if (this.className) {
classes.push(...this.className.split(/\s+/).filter(Boolean));
}
if (this.symbolId) { if (this.symbolId) {
classes.push('tw-hidden', 'svg-symbol-container'); classes.push('tw-hidden', 'svg-symbol-container');
svgInnerHtml = `<symbol id="${this.symbolId}" viewBox="${attrs['^viewBox']}">${svgInnerHtml}</symbol>`; svgInnerHtml = `<symbol id="${this.symbolId}" viewBox="${attrs['^viewBox']}">${svgInnerHtml}</symbol>`;