Add Octicon SVG spritemap (#10107)

* Add octicon SVG sprite

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Static prefix

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* SVG for all repo icons

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* make vendor

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Swap out octicons

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Move octicons to top of less imports

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Fix JS

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Definitely not a search/replace

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Missed regex

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Move to more generic calls and webpack

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* make svg -> make webpack

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Remove svg-sprite

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Update tests

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Missed a test

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Remove svg from makefile

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Suggestions

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Attempt to fix test

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Update tests

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Revert timetracking test

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Swap .octicon for .svg in less

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Add aria-hidden

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Replace mega-octicon

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Fix webpack globbing on Windows

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Revert

Co-Authored-By: silverwind <me@silverwind.io>

* Fix octions from upstream

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Fix Vue and missed JS function

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Add JS helper and PWA

Signed-off-by: jolheiser <john.olheiser@gmail.com>

* Preload SVG

Signed-off-by: jolheiser <john.olheiser@gmail.com>

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: techknowlogick <matti@mdranta.net>

1 files changed, 17 insertions, 10 deletions

diff --git a/web_src/js/index.js b/web_src/js/index.js
index c84a2c8991..5d195774dd 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -18,8 +18,13 @@ function htmlEncode(text) {
   return jQuery('<div />').text(text).html();
 }
 
+function svg(name, size) {
+  return `<svg class="svg ${name}" width="${size}" height="${size}" aria-hidden="true"><use xlink:href="${staticPrefix}/img/svg/icons.svg#${name}"/></svg>`;
+}
+
 let csrf;
 let suburl;
+let staticPrefix;
 let previewFileModes;
 let simpleMDEditor;
 const commentMDEditors = {};
@@ -377,10 +382,10 @@ function initCommentForm() {
         // adding/removing labels
         if ($(this).hasClass('checked')) {
           $(this).removeClass('checked');
-          $(this).find('.octicon').removeClass('octicon-check');
+          $(this).find('.octicon-check').addClass('invisible');
         } else {
           $(this).addClass('checked');
-          $(this).find('.octicon').addClass('octicon-check');
+          $(this).find('.octicon-check').removeClass('invisible');
         }
 
         updateIssuesMeta(
@@ -395,7 +400,7 @@ function initCommentForm() {
 
       if ($(this).hasClass('checked')) {
         $(this).removeClass('checked');
-        $(this).find('.octicon').removeClass('octicon-check');
+        $(this).find('.octicon-check').addClass('invisible');
         if (hasLabelUpdateAction) {
           if (!($(this).data('id') in labels)) {
             labels[$(this).data('id')] = {
@@ -409,7 +414,7 @@ function initCommentForm() {
         }
       } else {
         $(this).addClass('checked');
-        $(this).find('.octicon').addClass('octicon-check');
+        $(this).find('.octicon-check').removeClass('invisible');
         if (hasLabelUpdateAction) {
           if (!($(this).data('id') in labels)) {
             labels[$(this).data('id')] = {
@@ -452,7 +457,7 @@ function initCommentForm() {
 
       $(this).parent().find('.item').each(function () {
         $(this).removeClass('checked');
-        $(this).find('.octicon').removeClass('octicon-check');
+        $(this).find('.octicon').addClass('invisible');
       });
 
       $list.find('.item').each(function () {
@@ -2361,6 +2366,7 @@ function initTemplateSearch() {
 $(document).ready(async () => {
   csrf = $('meta[name=_csrf]').attr('content');
   suburl = $('meta[name=_suburl]').attr('content');
+  staticPrefix = $('meta[name=_staticprefix]').attr('content');
 
   // Show exact time
   $('.time-since').each(function () {
@@ -2497,7 +2503,7 @@ $(document).ready(async () => {
     $(this).find('h1, h2, h3, h4, h5, h6').each(function () {
       let node = $(this);
       node = node.wrap('<div class="anchor-wrap"></div>');
-      node.append(`<a class="anchor" href="#${encodeURIComponent(node.attr('id'))}"><span class="octicon octicon-link"></span></a>`);
+      node.append(`<a class="anchor" href="#${encodeURIComponent(node.attr('id'))}">${svg('octicon-link', 16)}</a>`);
     });
   });
 
@@ -2779,6 +2785,7 @@ function initVueComponents() {
         reposFilter: 'all',
         searchQuery: '',
         isLoading: false,
+        staticPrefix,
         repoTypes: {
           all: {
             count: 0,
@@ -2881,13 +2888,13 @@ function initVueComponents() {
 
       repoClass(repo) {
         if (repo.fork) {
-          return 'octicon octicon-repo-forked';
+          return 'octicon-repo-forked';
         } if (repo.mirror) {
-          return 'octicon octicon-repo-clone';
+          return 'octicon-repo-clone';
         } if (repo.private) {
-          return 'octicon octicon-lock';
+          return 'octicon-lock';
         }
-        return 'octicon octicon-repo';
+        return 'octicon-repo';
       }
     }
   });