mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2025-03-12 00:12:37 +01:00
Remove "class-name" from svg icon (#33540)
Only use "class" attribute (cherry picked from commit 06088ec672a053b11a20ca6dd21588380d67f396)
This commit is contained in:
parent
d81baf21e9
commit
0ff2c11432
5 changed files with 20 additions and 30 deletions
|
@ -29,12 +29,12 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<span class="tw-flex tw-items-center" :data-tooltip-content="localeStatus ?? status" v-if="status">
|
<span class="tw-flex tw-items-center" :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>
|
||||||
|
|
|
@ -359,7 +359,7 @@ export default sfc; // activate the IDE's Vue plugin
|
||||||
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>
|
||||||
|
@ -368,7 +368,7 @@ export default sfc; // activate the IDE's Vue plugin
|
||||||
<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>
|
||||||
|
@ -405,7 +405,7 @@ export default sfc; // activate the IDE's Vue plugin
|
||||||
<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"/>
|
||||||
|
@ -413,7 +413,7 @@ export default sfc; // activate the IDE's Vue plugin
|
||||||
</a>
|
</a>
|
||||||
<a class="tw-flex tw-items-center" v-if="repo.latest_commit_status" :href="repo.latest_commit_status.TargetURL" :data-tooltip-content="repo.locale_latest_commit_status">
|
<a class="tw-flex tw-items-center" v-if="repo.latest_commit_status" :href="repo.latest_commit_status.TargetURL" :data-tooltip-content="repo.locale_latest_commit_status">
|
||||||
<!-- 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>
|
||||||
|
@ -424,7 +424,7 @@ export default sfc; // activate the IDE's Vue plugin
|
||||||
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}"
|
||||||
|
@ -437,13 +437,13 @@ export default sfc; // activate the IDE's Vue plugin
|
||||||
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>
|
||||||
|
@ -454,7 +454,7 @@ export default sfc; // activate the IDE's Vue plugin
|
||||||
<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.name }}</div>
|
<div class="text truncate">{{ 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'">
|
||||||
|
@ -464,7 +464,7 @@ export default sfc; // activate the IDE's Vue plugin
|
||||||
</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>
|
||||||
|
|
|
@ -256,7 +256,7 @@ export default sfc; // activate IDE's Vue plugin
|
||||||
<strong ref="dropdownRefName" class="tw-ml-2 tw-inline-block gt-ellipsis">{{ refNameText }}</strong>
|
<strong ref="dropdownRefName" class="tw-ml-2 tw-inline-block gt-ellipsis">{{ refNameText }}</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"/>
|
||||||
</button>
|
</button>
|
||||||
<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">
|
||||||
|
@ -265,10 +265,10 @@ export default sfc; // activate IDE's Vue plugin
|
||||||
</div>
|
</div>
|
||||||
<div v-if="showBranchesInDropdown" class="branch-tag-tab">
|
<div v-if="showBranchesInDropdown" class="branch-tag-tab">
|
||||||
<a class="branch-tag-item muted" :class="{active: mode === 'branches'}" href="#" @click="handleTabSwitch('branches')">
|
<a class="branch-tag-item muted" :class="{active: mode === '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="!noTag" class="branch-tag-item muted" :class="{active: mode === 'tags'}" href="#" @click="handleTabSwitch('tags')">
|
<a v-if="!noTag" class="branch-tag-item muted" :class="{active: mode === '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"/>
|
||||||
|
|
|
@ -192,7 +192,6 @@ export const SvgIcon = {
|
||||||
props: {
|
props: {
|
||||||
name: {type: String, required: true},
|
name: {type: String, required: true},
|
||||||
size: {type: Number, default: 16},
|
size: {type: Number, default: 16},
|
||||||
className: {type: String, default: ''},
|
|
||||||
symbolId: {type: String},
|
symbolId: {type: String},
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
|
@ -207,15 +206,7 @@ export const SvgIcon = {
|
||||||
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 = [];
|
|
||||||
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>`;
|
||||||
|
|
|
@ -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;
|
const node = root.firstChild;
|
||||||
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();
|
|
||||||
});
|
});
|
||||||
|
|
Loading…
Add table
Reference in a new issue