Fix and restyle menu on code line

Author: silverwind

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">

web_src/js/index.js

@@ -2214,46 +2214,13 @@ 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',
-  });
+  if ($('.code-line-menu').length === 0) return;
+  $('.code-line-menu').appendTo($('.code-view'));
+  $('.code-line-button').remove();
+  $('.code-view td.lines-code.active').closest('tr').find('td:eq(0)').prepend(
+    $(`<button class="code-line-button">${svg('octicon-kebab-horizontal')}</button>`)
+  );
+  $('.code-line-button').popup({popup: $('.code-line-menu'), on: 'click'});
 }
 
 function initCodeView() {

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,

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 {

web_src/less/_repository.less

@@ -3140,9 +3140,23 @@ td.blob-excerpt {
   box-shadow: 0 .5rem 1rem var(--color-shadow) !important;
 }
 
-.code-line-marker {
-  width: 13px;
-  height: 20px;
-  background-color: rgb(34 36 38 / 15%);
+.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);
+  }
 }

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;