mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues Releases Wiki Activity

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

Browse Source 
Only use "class" attribute
pull/32059/head^2
wxiaoguang 2 weeks ago committed by GitHub
parent a52720b5b4
commit 06088ec672
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 20 additions and 30 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 12
      web_src/js/components/ActionRunStatus.vue
  2. 18
      web_src/js/components/DashboardRepoList.vue
  3. 6
      web_src/js/components/RepoBranchTagSelector.vue
  4. 3
      web_src/js/svg.test.ts
  5. 11
      web_src/js/svg.ts

12
web_src/js/components/ActionRunStatus.vue
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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>`;

Write Preview
Loading…
Cancel
Save