* 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>tags/v1.15.0-rc1
@@ -117,7 +117,7 @@ | |||
</div> | |||
</h4> | |||
<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}} | |||
<div class="diff-file-body binary" style="padding: 5px 10px;">{{$.i18n.Tr "repo.diff.bin_not_shown"}}</div> | |||
{{else}} | |||
@@ -131,7 +131,7 @@ | |||
{{end}} | |||
</div> | |||
{{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"> | |||
{{if $isImage}} | |||
{{template "repo/diff/image_diff" dict "file" . "root" $}} |
@@ -112,7 +112,7 @@ | |||
</tbody> | |||
</table> | |||
{{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="column"> | |||
<div class="ui link list"> |
@@ -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 {initStopwatch} from './features/stopwatch.js'; | |||
import {renderMarkupContent} from './markup/content.js'; | |||
import {showLineButton} from './code/linebutton.js'; | |||
import {stripTags, mqBinarySearch} from './utils.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() { | |||
if ($('.code-view .lines-num').length > 0) { | |||
$(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)); | |||
deSelect(); | |||
// show code view menu marker | |||
showCodeViewMenu(); | |||
showLineButton(); | |||
}); | |||
$(window).on('hashchange', () => { | |||
@@ -2285,10 +2241,7 @@ function initCodeView() { | |||
if (m) { | |||
$first = $list.filter(`[rel=${m[1]}]`); | |||
selectRange($list, $first, $list.filter(`[rel=${m[2]}]`)); | |||
// show code view menu marker | |||
showCodeViewMenu(); | |||
showLineButton(); | |||
$('html, body').scrollTop($first.offset().top - 200); | |||
return; | |||
} | |||
@@ -2296,10 +2249,7 @@ function initCodeView() { | |||
if (m) { | |||
$first = $list.filter(`[rel=L${m[2]}]`); | |||
selectRange($list, $first); | |||
// show code view menu marker | |||
showCodeViewMenu(); | |||
showLineButton(); | |||
$('html, body').scrollTop($first.offset().top - 200); | |||
} | |||
}).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 octiconIssueClosed from '../../public/img/svg/octicon-issue-closed.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 octiconLock from '../../public/img/svg/octicon-lock.svg'; | |||
import octiconMilestone from '../../public/img/svg/octicon-milestone.svg'; | |||
@@ -20,6 +21,7 @@ export const svgs = { | |||
'octicon-git-pull-request': octiconGitPullRequest, | |||
'octicon-issue-closed': octiconIssueClosed, | |||
'octicon-issue-opened': octiconIssueOpened, | |||
'octicon-kebab-horizontal': octiconKebabHorizontal, | |||
'octicon-link': octiconLink, | |||
'octicon-lock': octiconLock, | |||
'octicon-milestone': octiconMilestone, |
@@ -560,6 +560,19 @@ a.ui.card:hover, | |||
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 { | |||
overflow-wrap: break-word; | |||
word-wrap: break-word; | |||
@@ -1565,20 +1578,8 @@ a.ui.label:hover { | |||
border-bottom: 1px solid var(--color-secondary); | |||
} | |||
} | |||
.code-view { | |||
overflow: auto; | |||
overflow-x: auto; | |||
overflow-y: hidden; | |||
&.has-context-menu { | |||
overflow: visible; | |||
overflow-x: visible; | |||
overflow-y: visible; | |||
} | |||
table { | |||
width: 100%; | |||
} | |||
.code-view table { | |||
width: 100%; | |||
} | |||
.octicon-tiny { |
@@ -3139,10 +3139,3 @@ td.blob-excerpt { | |||
transform: scale(105%); | |||
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; | |||
} |
@@ -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 "./markup/content.less"; | |||
@import "./markup/mermaid.less"; | |||
@import "./code/linebutton.less"; | |||
@import "./chroma/base.less"; | |||
@import "./chroma/light.less"; |
@@ -153,12 +153,6 @@ | |||
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.labels .label { | |||
background-color: #7d3434 !important; |