diff options
-rw-r--r-- | templates/user/dashboard/repolist.tmpl | 8 | ||||
-rw-r--r-- | web_src/js/index.js | 12 | ||||
-rw-r--r-- | web_src/js/svg.js | 16 |
3 files changed, 30 insertions, 6 deletions
diff --git a/templates/user/dashboard/repolist.tmpl b/templates/user/dashboard/repolist.tmpl index 4bae23ab1b..ca055e9d87 100644 --- a/templates/user/dashboard/repolist.tmpl +++ b/templates/user/dashboard/repolist.tmpl @@ -61,15 +61,15 @@ <a @click="togglePrivateFilter()"> <div class="ui checkbox" id="privateFilterCheckbox" title="{{.i18n.Tr "home.show_both_private_public"}}" v-if="privateFilter === 'both'"> <input type="checkbox"> - <label><svg class="svg octicon-lock" width="16" height="16" aria-hidden="true"><use xlink:href="#octicon-lock" /></svg>{{.i18n.Tr "home.show_private"}}</label> + <label>{{svg "octicon-lock" 16}}{{.i18n.Tr "home.show_private"}}</label> </div> <div class="ui checkbox" id="privateFilterCheckbox" title="{{.i18n.Tr "home.show_only_public"}}" v-if="privateFilter === 'public'"> <input type="checkbox"> - <label><svg class="svg octicon-lock" width="16" height="16" aria-hidden="true"><use xlink:href="#octicon-lock" /></svg>{{.i18n.Tr "home.show_private"}}</label> + <label>{{svg "octicon-lock" 16}}</svg>{{.i18n.Tr "home.show_private"}}</label> </div> <div class="ui checkbox" id="privateFilterCheckbox" title="{{.i18n.Tr "home.show_only_private"}}" v-if="privateFilter === 'private'"> <input type="checkbox"> - <label><svg class="svg octicon-lock" width="16" height="16" aria-hidden="true"><use xlink:href="#octicon-lock" /></svg>{{.i18n.Tr "home.show_private"}}</label> + <label>{{svg "octicon-lock" 16}}</svg>{{.i18n.Tr "home.show_private"}}</label> </div> </a> </div> @@ -103,7 +103,7 @@ <ul class="repo-owner-name-list"> <li v-for="repo in repos" :class="{'private': repo.private || repo.internal}"> <a :href="suburl + '/' + repo.full_name"> - <svg :class="'svg ' + repoClass(repo)" width="16" height="16" aria-hidden="true"><use :xlink:href="'#' + repoClass(repo)" /></svg> + <component v-bind:is="repoIcon(repo)" size="16"></component> <strong class="text truncate item-name">${repo.full_name}</strong> <i v-if="repo.archived" class="archive icon archived-icon"></i> <span class="ui right text light grey"> diff --git a/web_src/js/index.js b/web_src/js/index.js index 8064e59507..de3522983a 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -19,6 +19,7 @@ import initTableSort from './features/tablesort.js'; import ActivityTopAuthors from './components/ActivityTopAuthors.vue'; import {initNotificationsTable, initNotificationCount} from './features/notification.js'; import {createCodeEditor} from './features/codeeditor.js'; +import {svgs} from './svg.js'; const {AppSubUrl, StaticUrlPrefix, csrf} = window.config; @@ -2625,6 +2626,15 @@ function linkEmailAction(e) { } function initVueComponents() { + // register svg icon vue components, e.g. <octicon-repo size="16"/> + for (const [name, htmlString] of Object.entries(svgs)) { + const template = htmlString + .replace(/height="[0-9]+"/, 'v-bind:height="size"') + .replace(/width="[0-9]+"/, 'v-bind:width="size"'); + + Vue.component(name, {props: ['size'], template}); + } + const vueDelimeters = ['${', '}']; Vue.component('repo-search', { @@ -2950,7 +2960,7 @@ function initVueComponents() { }); }, - repoClass(repo) { + repoIcon(repo) { if (repo.fork) { return 'octicon-repo-forked'; } else if (repo.mirror) { diff --git a/web_src/js/svg.js b/web_src/js/svg.js index 5e66a4dd1a..9a7c7f4e67 100644 --- a/web_src/js/svg.js +++ b/web_src/js/svg.js @@ -1,15 +1,29 @@ import octiconGitMerge from '../../public/img/svg/octicon-git-merge.svg'; import octiconGitPullRequest from '../../public/img/svg/octicon-git-pull-request.svg'; +import octiconInternalRepo from '../../public/img/svg/octicon-internal-repo.svg'; import octiconIssueClosed from '../../public/img/svg/octicon-issue-closed.svg'; import octiconIssueOpened from '../../public/img/svg/octicon-issue-opened.svg'; import octiconLink from '../../public/img/svg/octicon-link.svg'; +import octiconLock from '../../public/img/svg/octicon-lock.svg'; +import octiconRepo from '../../public/img/svg/octicon-repo.svg'; +import octiconRepoClone from '../../public/img/svg/octicon-repo-clone.svg'; +import octiconRepoForked from '../../public/img/svg/octicon-repo-forked.svg'; +import octiconRepoTemplate from '../../public/img/svg/octicon-repo-template.svg'; +import octiconRepoTemplatePrivate from '../../public/img/svg/octicon-repo-template-private.svg'; -const svgs = { +export const svgs = { 'octicon-git-merge': octiconGitMerge, 'octicon-git-pull-request': octiconGitPullRequest, + 'octicon-internal-repo': octiconInternalRepo, 'octicon-issue-closed': octiconIssueClosed, 'octicon-issue-opened': octiconIssueOpened, 'octicon-link': octiconLink, + 'octicon-lock': octiconLock, + 'octicon-repo': octiconRepo, + 'octicon-repo-clone': octiconRepoClone, + 'octicon-repo-forked': octiconRepoForked, + 'octicon-repo-template': octiconRepoTemplate, + 'octicon-repo-template-private': octiconRepoTemplatePrivate, }; const parser = new DOMParser(); |