domi/forgejo-domi
1
0
Fork 0
forked from forgejo/forgejo
Code Pull requests Activity

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

Browse source 
* 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:
silverwind 2020-11-29 07:22:04 +01:00 • committed by GitHub
parent da4bb6fc4e
commit e00a355427
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 416 additions and 520 deletions
Download patch file Download diff file Expand all files Collapse all files

31
web_src/js/index.js
View file

@ -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);

25
web_src/js/svg.js
View file

@ -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);
}