Dropdowns, Labels fixes and more CSS tweaks (#13733)

* Dropdowns and Labels fixes

- Rework dropdown, menu and label styles
- Improve issue sidebar milestone and label sections
- Fix archived repo and private org badge
- Move more colors to CSS vars
- Move issue number to end of title on issue page

* more dropdown fixes

* fix basic blue labels - fixes #13731

* improve class setting on svg

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

1 files changed, 14 insertions, 11 deletions

diff --git a/web_src/js/svg.js b/web_src/js/svg.js
index ee0b576c31..b7d8c75350 100644
--- a/web_src/js/svg.js
+++ b/web_src/js/svg.js
@@ -6,7 +6,9 @@ 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 octiconMilestone from '../../public/img/svg/octicon-milestone.svg';
 import octiconMirror from '../../public/img/svg/octicon-mirror.svg';
+import octiconProject from '../../public/img/svg/octicon-project.svg';
 import octiconRepo from '../../public/img/svg/octicon-repo.svg';
 import octiconRepoForked from '../../public/img/svg/octicon-repo-forked.svg';
 import octiconRepoTemplate from '../../public/img/svg/octicon-repo-template.svg';
@@ -20,7 +22,9 @@ export const svgs = {
   'octicon-issue-opened': octiconIssueOpened,
   'octicon-link': octiconLink,
   'octicon-lock': octiconLock,
+  'octicon-milestone': octiconMilestone,
   'octicon-mirror': octiconMirror,
+  'octicon-project': octiconProject,
   'octicon-repo': octiconRepo,
   'octicon-repo-forked': octiconRepoForked,
   'octicon-repo-template': octiconRepoTemplate,
@@ -29,16 +33,15 @@ export const svgs = {
 const parser = new DOMParser();
 const serializer = new XMLSerializer();
 
-// retrieve a HTML string for given SVG icon name and size in pixels
-export function svg(name, size = 16) {
-  if (name in svgs) {
-    if (size === 16) return svgs[name];
+// retrieve a HTML string for given SVG icon name, size and additional classes
+export function svg(name, size = 16, className = '') {
+  if (!(name in svgs)) return '';
+  if (size === 16 && !className) return svgs[name];
 
-    const document = parser.parseFromString(svgs[name], 'image/svg+xml');
-    const svgNode = document.firstChild;
-    svgNode.setAttribute('width', String(size));
-    svgNode.setAttribute('height', String(size));
-    return serializer.serializeToString(svgNode);
-  }
-  return '';
+  const document = parser.parseFromString(svgs[name], 'image/svg+xml');
+  const svgNode = document.firstChild;
+  if (size !== 16) svgNode.setAttribute('width', String(size));
+  if (size !== 16) svgNode.setAttribute('height', String(size));
+  if (className) svgNode.classList.add(...className.split(/\s+/));
+  return serializer.serializeToString(svgNode);
 }