mirror of
				https://github.com/go-gitea/gitea
				synced 2025-10-31 03:18:24 +00:00 
			
		
		
		
	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>
This commit is contained in:
		| @@ -517,20 +517,23 @@ function initCommentForm() { | ||||
|           $(this).data('id'), | ||||
|         ).then(reload); | ||||
|       } | ||||
|       switch (input_id) { | ||||
|         case '#milestone_id': | ||||
|           $list.find('.selected').html(`<a class="item" href=${$(this).data('href')}>${ | ||||
|             htmlEscape($(this).text())}</a>`); | ||||
|           break; | ||||
|         case '#project_id': | ||||
|           $list.find('.selected').html(`<a class="item" href=${$(this).data('href')}>${ | ||||
|             htmlEscape($(this).text())}</a>`); | ||||
|           break; | ||||
|         case '#assignee_id': | ||||
|           $list.find('.selected').html(`<a class="item" href=${$(this).data('href')}>` + | ||||
|                         `<img class="ui avatar image" src=${$(this).data('avatar')}>${ | ||||
|                           htmlEscape($(this).text())}</a>`); | ||||
|  | ||||
|       let icon = ''; | ||||
|       if (input_id === '#milestone_id') { | ||||
|         icon = svg('octicon-milestone', 18, 'mr-3'); | ||||
|       } else if (input_id === '#project_id') { | ||||
|         icon = svg('octicon-project', 18, 'mr-3'); | ||||
|       } else if (input_id === '#assignee_id') { | ||||
|         icon = `<img class="ui avatar image mr-3" src=${$(this).data('avatar')}>`; | ||||
|       } | ||||
|  | ||||
|       $list.find('.selected').html(` | ||||
|         <a class="item muted sidebar-item-link" href=${$(this).data('href')}> | ||||
|           ${icon} | ||||
|           ${htmlEscape($(this).text())} | ||||
|         </a> | ||||
|       `); | ||||
|  | ||||
|       $(`.ui${select_id}.list .no-select`).addClass('hide'); | ||||
|       $(input_id).val($(this).data('id')); | ||||
|     }); | ||||
| @@ -3324,7 +3327,7 @@ function initTopicbar() { | ||||
|  | ||||
|           const last = viewDiv.children('a').last(); | ||||
|           for (let i = 0; i < topicArray.length; i++) { | ||||
|             const link = $('<a class="ui repo-topic small label topic"></a>'); | ||||
|             const link = $('<a class="ui repo-topic large label topic"></a>'); | ||||
|             link.attr('href', `${AppSubUrl}/explore/repos?q=${encodeURIComponent(topicArray[i])}&topic=1`); | ||||
|             link.text(topicArray[i]); | ||||
|             link.insertBefore(last); | ||||
|   | ||||
| @@ -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); | ||||
| } | ||||
|   | ||||
		Reference in New Issue
	
	Block a user