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>

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 582b66d5db6e52dfd08c6b218e459df49f11d892..d8678c95c6e3106ef9c29636bb75c3a30e8d430b 100644 (file)
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -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" $}}

diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index e3a52a887083ac52474af7e66f37f580ba91dbde..8c73f1252b85f5ae36611441b8952711291f4f97 100644 (file)
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -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">

diff --git a/web_src/js/code/linebutton.js b/web_src/js/code/linebutton.js
new file mode 100644 (file)
index 0000000..c177ca6
--- /dev/null
+++ b/web_src/js/code/linebutton.js
@@ -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'});
+}

diff --git a/web_src/js/index.js b/web_src/js/index.js
index d7fa9c8b9bc41cd3b4d41037b9f3d54e84f4dade..6cb47cf10499855c1a6f6f1e6bb14a5adac9de86 100644 (file)
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -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');

diff --git a/web_src/js/svg.js b/web_src/js/svg.js
index b7d8c7535074ee1add1be58cb1c69a3077eaf187..0960256e2121cf666435404c1cea4022e8308c99 100644 (file)
--- a/web_src/js/svg.js
+++ b/web_src/js/svg.js
@@ -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,

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 224586b079b33fdac342f2be7349bea2ee3e6c9c..78488109402b45ad14267772050ae79af180c554 100644 (file)
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -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 {

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index ef241661ddf136c1b245d3196a90caf5dc41a834..b90e287b44eb06b02b506677093515f4655fdc4e 100644 (file)
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -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;
-}

diff --git a/web_src/less/code/linebutton.less b/web_src/less/code/linebutton.less
new file mode 100644 (file)
index 0000000..a2956ff
--- /dev/null
+++ b/web_src/less/code/linebutton.less
@@ -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);
+  }
+}

diff --git a/web_src/less/index.less b/web_src/less/index.less
index f52953f2a4874ed00d6667ec1f57a667ab06f748..d96fe3df82612c357e7df91105ec7f78561d4341 100644 (file)
--- a/web_src/less/index.less
+++ b/web_src/less/index.less
@@ -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";

diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index c493a255c746a9dc8a4f1e294451c58d65a92144..e638f3b4613fbbfb370b4761630f3aa961fbea09 100644 (file)
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.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;