Replace code fold icons with octicons (#12222)

- replace font-awesome icons with octicons
- clean up js and css surrounding the code expansion and file folding
- fix hover color on arc-green
- tweak diff line number colors

Co-authored-by: zeripath <art27@cantab.net>

2 files changed, 13 insertions, 14 deletions

diff --git a/web_src/js/index.js b/web_src/js/index.js
index de3522983a..db6c665ecf 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -19,7 +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';
+import {svg, svgs} from './svg.js';
 
 const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
 
@@ -2017,22 +2017,17 @@ function initCodeView() {
       }
     }).trigger('hashchange');
   }
-  $('.fold-code').on('click', ({target}) => {
-    const box = target.closest('.file-content');
+  $(document).on('click', '.fold-file', ({currentTarget}) => {
+    const box = currentTarget.closest('.file-content');
     const folded = box.dataset.folded !== 'true';
-    target.classList.add(`fa-chevron-${folded ? 'right' : 'down'}`);
-    target.classList.remove(`fa-chevron-${folded ? 'down' : 'right'}`);
+    currentTarget.innerHTML = svg(`octicon-chevron-${folded ? 'right' : 'down'}`, 18);
     box.dataset.folded = String(folded);
   });
-  function insertBlobExcerpt(e) {
-    const $blob = $(e.currentTarget);
-    const $row = $blob.parent().parent();
-    $.get(`${$blob.data('url')}?${$blob.data('query')}&anchor=${$blob.data('anchor')}`, (blob) => {
-      $row.replaceWith(blob);
-      $(`[data-anchor="${$blob.data('anchor')}"]`).on('click', (e) => { insertBlobExcerpt(e) });
-    });
-  }
-  $('.ui.blob-excerpt').on('click', (e) => { insertBlobExcerpt(e) });
+  $(document).on('click', '.blob-excerpt', async ({currentTarget}) => {
+    const {url, query, anchor} = currentTarget.dataset;
+    const blob = await $.get(`${url}?${query}&anchor=${anchor}`);
+    currentTarget.closest('tr').outerHTML = blob;
+  });
 }
 
 function initU2FAuth() {
diff --git a/web_src/js/svg.js b/web_src/js/svg.js
index 9a7c7f4e67..556a191720 100644
--- a/web_src/js/svg.js
+++ b/web_src/js/svg.js
@@ -1,3 +1,5 @@
+import octiconChevronDown from '../../public/img/svg/octicon-chevron-down.svg';
+import octiconChevronRight from '../../public/img/svg/octicon-chevron-right.svg';
 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';
@@ -12,6 +14,8 @@ import octiconRepoTemplate from '../../public/img/svg/octicon-repo-template.svg'
 import octiconRepoTemplatePrivate from '../../public/img/svg/octicon-repo-template-private.svg';
 
 export const svgs = {
+  'octicon-chevron-down': octiconChevronDown,
+  'octicon-chevron-right': octiconChevronRight,
   'octicon-git-merge': octiconGitMerge,
   'octicon-git-pull-request': octiconGitPullRequest,
   'octicon-internal-repo': octiconInternalRepo,