Fix and restyle menu on code line (#15913)
* Fix and restyle menu on code line * fix multiline and more tweaks * move to separate files * remove has-context-menu class Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
parent
0e56e9c9d9
commit
370cfde35e
10 changed files with 60 additions and 84 deletions
|
@ -117,7 +117,7 @@
|
||||||
</div>
|
</div>
|
||||||
</h4>
|
</h4>
|
||||||
<div class="diff-file-body ui attached unstackable table segment">
|
<div class="diff-file-body ui attached unstackable table segment">
|
||||||
<div id="diff-source-{{$i}}" class="file-body file-code has-context-menu code-diff{{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}}">
|
<div id="diff-source-{{$i}}" class="file-body file-code code-diff{{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}}">
|
||||||
{{if $file.IsBin}}
|
{{if $file.IsBin}}
|
||||||
<div class="diff-file-body binary" style="padding: 5px 10px;">{{$.i18n.Tr "repo.diff.bin_not_shown"}}</div>
|
<div class="diff-file-body binary" style="padding: 5px 10px;">{{$.i18n.Tr "repo.diff.bin_not_shown"}}</div>
|
||||||
{{else}}
|
{{else}}
|
||||||
|
@ -131,7 +131,7 @@
|
||||||
{{end}}
|
{{end}}
|
||||||
</div>
|
</div>
|
||||||
{{if or $isImage $isCsv}}
|
{{if or $isImage $isCsv}}
|
||||||
<div id="diff-rendered-{{$i}}" class="file-body file-code has-context-menu{{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}} hide">
|
<div id="diff-rendered-{{$i}}" class="file-body file-code {{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}} hide">
|
||||||
<table class="chroma w-100">
|
<table class="chroma w-100">
|
||||||
{{if $isImage}}
|
{{if $isImage}}
|
||||||
{{template "repo/diff/image_diff" dict "file" . "root" $}}
|
{{template "repo/diff/image_diff" dict "file" . "root" $}}
|
||||||
|
|
|
@ -112,7 +112,7 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
{{if $.Permission.CanRead $.UnitTypeIssues}}
|
{{if $.Permission.CanRead $.UnitTypeIssues}}
|
||||||
<div class="code-view-menu-list ui fluid popup transition hidden">
|
<div class="code-line-menu ui fluid popup transition hidden">
|
||||||
<div class="ui column relaxed equal height">
|
<div class="ui column relaxed equal height">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<div class="ui link list">
|
<div class="ui link list">
|
||||||
|
|
11
web_src/js/code/linebutton.js
Normal file
11
web_src/js/code/linebutton.js
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
import {svg} from '../svg.js';
|
||||||
|
|
||||||
|
export function showLineButton() {
|
||||||
|
if ($('.code-line-menu').length === 0) return;
|
||||||
|
$('.code-line-button').remove();
|
||||||
|
$('.code-view td.lines-code.active').closest('tr').find('td:eq(0)').first().prepend(
|
||||||
|
$(`<button class="code-line-button">${svg('octicon-kebab-horizontal')}</button>`)
|
||||||
|
);
|
||||||
|
$('.code-line-menu').appendTo($('.code-view'));
|
||||||
|
$('.code-line-button').popup({popup: $('.code-line-menu'), on: 'click'});
|
||||||
|
}
|
|
@ -22,6 +22,7 @@ import {initMarkupAnchors} from './markup/anchors.js';
|
||||||
import {initNotificationsTable, initNotificationCount} from './features/notification.js';
|
import {initNotificationsTable, initNotificationCount} from './features/notification.js';
|
||||||
import {initStopwatch} from './features/stopwatch.js';
|
import {initStopwatch} from './features/stopwatch.js';
|
||||||
import {renderMarkupContent} from './markup/content.js';
|
import {renderMarkupContent} from './markup/content.js';
|
||||||
|
import {showLineButton} from './code/linebutton.js';
|
||||||
import {stripTags, mqBinarySearch} from './utils.js';
|
import {stripTags, mqBinarySearch} from './utils.js';
|
||||||
import {svg, svgs} from './svg.js';
|
import {svg, svgs} from './svg.js';
|
||||||
|
|
||||||
|
@ -2213,49 +2214,6 @@ function searchRepositories() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function showCodeViewMenu() {
|
|
||||||
if ($('.code-view-menu-list').length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get clicked tr
|
|
||||||
const $code_tr = $('.code-view td.lines-code.active').parent();
|
|
||||||
|
|
||||||
// Reset code line marker
|
|
||||||
$('.code-view-menu-list').appendTo($('.code-view'));
|
|
||||||
$('.code-line-marker').remove();
|
|
||||||
|
|
||||||
// Generate new one
|
|
||||||
const icon_wrap = $('<div>', {
|
|
||||||
class: 'code-line-marker'
|
|
||||||
}).prependTo($code_tr.find('td:eq(0)').get(0)).hide();
|
|
||||||
|
|
||||||
const a_wrap = $('<a>', {
|
|
||||||
class: 'code-line-link'
|
|
||||||
}).appendTo(icon_wrap);
|
|
||||||
|
|
||||||
$('<i>', {
|
|
||||||
class: 'dropdown icon',
|
|
||||||
style: 'margin: 0px;'
|
|
||||||
}).appendTo(a_wrap);
|
|
||||||
|
|
||||||
icon_wrap.css({
|
|
||||||
left: '-7px',
|
|
||||||
display: 'block',
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.code-view-menu-list').css({
|
|
||||||
'min-width': '220px',
|
|
||||||
});
|
|
||||||
|
|
||||||
// Popup the menu
|
|
||||||
$('.code-line-link').popup({
|
|
||||||
popup: $('.code-view-menu-list'),
|
|
||||||
on: 'click',
|
|
||||||
lastResort: 'bottom left',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function initCodeView() {
|
function initCodeView() {
|
||||||
if ($('.code-view .lines-num').length > 0) {
|
if ($('.code-view .lines-num').length > 0) {
|
||||||
$(document).on('click', '.lines-num span', function (e) {
|
$(document).on('click', '.lines-num span', function (e) {
|
||||||
|
@ -2268,9 +2226,7 @@ function initCodeView() {
|
||||||
}
|
}
|
||||||
selectRange($list, $list.filter(`[rel=${$select.attr('id')}]`), (e.shiftKey ? $list.filter('.active').eq(0) : null));
|
selectRange($list, $list.filter(`[rel=${$select.attr('id')}]`), (e.shiftKey ? $list.filter('.active').eq(0) : null));
|
||||||
deSelect();
|
deSelect();
|
||||||
|
showLineButton();
|
||||||
// show code view menu marker
|
|
||||||
showCodeViewMenu();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$(window).on('hashchange', () => {
|
$(window).on('hashchange', () => {
|
||||||
|
@ -2285,10 +2241,7 @@ function initCodeView() {
|
||||||
if (m) {
|
if (m) {
|
||||||
$first = $list.filter(`[rel=${m[1]}]`);
|
$first = $list.filter(`[rel=${m[1]}]`);
|
||||||
selectRange($list, $first, $list.filter(`[rel=${m[2]}]`));
|
selectRange($list, $first, $list.filter(`[rel=${m[2]}]`));
|
||||||
|
showLineButton();
|
||||||
// show code view menu marker
|
|
||||||
showCodeViewMenu();
|
|
||||||
|
|
||||||
$('html, body').scrollTop($first.offset().top - 200);
|
$('html, body').scrollTop($first.offset().top - 200);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -2296,10 +2249,7 @@ function initCodeView() {
|
||||||
if (m) {
|
if (m) {
|
||||||
$first = $list.filter(`[rel=L${m[2]}]`);
|
$first = $list.filter(`[rel=L${m[2]}]`);
|
||||||
selectRange($list, $first);
|
selectRange($list, $first);
|
||||||
|
showLineButton();
|
||||||
// show code view menu marker
|
|
||||||
showCodeViewMenu();
|
|
||||||
|
|
||||||
$('html, body').scrollTop($first.offset().top - 200);
|
$('html, body').scrollTop($first.offset().top - 200);
|
||||||
}
|
}
|
||||||
}).trigger('hashchange');
|
}).trigger('hashchange');
|
||||||
|
|
|
@ -4,6 +4,7 @@ import octiconGitMerge from '../../public/img/svg/octicon-git-merge.svg';
|
||||||
import octiconGitPullRequest from '../../public/img/svg/octicon-git-pull-request.svg';
|
import octiconGitPullRequest from '../../public/img/svg/octicon-git-pull-request.svg';
|
||||||
import octiconIssueClosed from '../../public/img/svg/octicon-issue-closed.svg';
|
import octiconIssueClosed from '../../public/img/svg/octicon-issue-closed.svg';
|
||||||
import octiconIssueOpened from '../../public/img/svg/octicon-issue-opened.svg';
|
import octiconIssueOpened from '../../public/img/svg/octicon-issue-opened.svg';
|
||||||
|
import octiconKebabHorizontal from '../../public/img/svg/octicon-kebab-horizontal.svg';
|
||||||
import octiconLink from '../../public/img/svg/octicon-link.svg';
|
import octiconLink from '../../public/img/svg/octicon-link.svg';
|
||||||
import octiconLock from '../../public/img/svg/octicon-lock.svg';
|
import octiconLock from '../../public/img/svg/octicon-lock.svg';
|
||||||
import octiconMilestone from '../../public/img/svg/octicon-milestone.svg';
|
import octiconMilestone from '../../public/img/svg/octicon-milestone.svg';
|
||||||
|
@ -20,6 +21,7 @@ export const svgs = {
|
||||||
'octicon-git-pull-request': octiconGitPullRequest,
|
'octicon-git-pull-request': octiconGitPullRequest,
|
||||||
'octicon-issue-closed': octiconIssueClosed,
|
'octicon-issue-closed': octiconIssueClosed,
|
||||||
'octicon-issue-opened': octiconIssueOpened,
|
'octicon-issue-opened': octiconIssueOpened,
|
||||||
|
'octicon-kebab-horizontal': octiconKebabHorizontal,
|
||||||
'octicon-link': octiconLink,
|
'octicon-link': octiconLink,
|
||||||
'octicon-lock': octiconLock,
|
'octicon-lock': octiconLock,
|
||||||
'octicon-milestone': octiconMilestone,
|
'octicon-milestone': octiconMilestone,
|
||||||
|
|
|
@ -560,6 +560,19 @@ a.ui.card:hover,
|
||||||
border-color: var(--color-secondary);
|
border-color: var(--color-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ui.link.list .item,
|
||||||
|
.ui.link.list a.item,
|
||||||
|
.ui.link.list .item a:not(.ui) {
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.link.list.list a.item:hover,
|
||||||
|
.ui.link.list.list .item a:not(.ui):hover,
|
||||||
|
.ui.link.list.list a.item:active,
|
||||||
|
.ui.link.list.list .item a:not(.ui):active {
|
||||||
|
color: var(--color-text-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.dont-break-out {
|
.dont-break-out {
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
@ -1565,20 +1578,8 @@ a.ui.label:hover {
|
||||||
border-bottom: 1px solid var(--color-secondary);
|
border-bottom: 1px solid var(--color-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.code-view {
|
.code-view table {
|
||||||
overflow: auto;
|
width: 100%;
|
||||||
overflow-x: auto;
|
|
||||||
overflow-y: hidden;
|
|
||||||
|
|
||||||
&.has-context-menu {
|
|
||||||
overflow: visible;
|
|
||||||
overflow-x: visible;
|
|
||||||
overflow-y: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.octicon-tiny {
|
.octicon-tiny {
|
||||||
|
|
|
@ -3139,10 +3139,3 @@ td.blob-excerpt {
|
||||||
transform: scale(105%);
|
transform: scale(105%);
|
||||||
box-shadow: 0 .5rem 1rem var(--color-shadow) !important;
|
box-shadow: 0 .5rem 1rem var(--color-shadow) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.code-line-marker {
|
|
||||||
width: 13px;
|
|
||||||
height: 20px;
|
|
||||||
background-color: rgb(34 36 38 / 15%);
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
24
web_src/less/code/linebutton.less
Normal file
24
web_src/less/code/linebutton.less
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
.code-view .lines-num:hover {
|
||||||
|
color: var(--color-text-dark) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-line-menu {
|
||||||
|
width: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-line-button {
|
||||||
|
background-color: var(--color-menu);
|
||||||
|
color: var(--color-text-light);
|
||||||
|
border: 1px solid var(--color-secondary);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
padding: 1px 10px;
|
||||||
|
position: absolute;
|
||||||
|
font-family: var(--fonts-regular);
|
||||||
|
left: 0;
|
||||||
|
transform: translateX(-70%);
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
}
|
|
@ -11,6 +11,7 @@
|
||||||
@import "./features/projects.less";
|
@import "./features/projects.less";
|
||||||
@import "./markup/content.less";
|
@import "./markup/content.less";
|
||||||
@import "./markup/mermaid.less";
|
@import "./markup/mermaid.less";
|
||||||
|
@import "./code/linebutton.less";
|
||||||
|
|
||||||
@import "./chroma/base.less";
|
@import "./chroma/base.less";
|
||||||
@import "./chroma/light.less";
|
@import "./chroma/light.less";
|
||||||
|
|
|
@ -153,12 +153,6 @@
|
||||||
background: #353945;
|
background: #353945;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.link.list .item,
|
|
||||||
.ui.link.list a.item,
|
|
||||||
.ui.link.list .item a:not(.ui) {
|
|
||||||
color: #dbdbdb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui.red.label,
|
.ui.red.label,
|
||||||
.ui.red.labels .label {
|
.ui.red.labels .label {
|
||||||
background-color: #7d3434 !important;
|
background-color: #7d3434 !important;
|
||||||
|
|
Reference in a new issue