Various code view improvements

Author: silverwind

web_src/css/base.css

@@ -1420,7 +1420,7 @@ a.ui.active.label:hover {
   padding-left: 10px;
   padding-right: 10px;
   text-align: right !important;
-  color: var(--color-text-light-1);
+  color: var(--color-text-light-2);
   width: 1%;
   font-family: var(--fonts-monospace);
 }
@@ -1478,8 +1478,8 @@ a.ui.active.label:hover {
   padding-left: 5px;
 }
 
-.lines-code.active,
-.lines-code .active {
+.file-view tr.active,
+.file-view tr.active .lines-code {
   background: var(--color-active-line) !important;
 }
 

web_src/css/modules/message.css

@@ -100,3 +100,15 @@
   color: var(--color-warning-text);
   border-color: var(--color-warning-border);
 }
+
+.ui.message > .close.icon {
+  cursor: pointer;
+  position: absolute;
+  top: 9px;
+  right: 9px;
+  opacity: .7;
+}
+
+.ui.message > .close.icon:hover {
+  opacity: 1;
+}

web_src/css/repo.css

@@ -1612,7 +1612,6 @@
 
 .repository .diff-file-box .file-body.file-code .lines-num {
   text-align: right;
-  color: var(--color-text-light);
   width: 1%;
   min-width: 50px;
 }

web_src/css/repo/linebutton.css

@@ -3,18 +3,16 @@
 }
 
 .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;
+  padding: 1px 4px !important;
   position: absolute;
   font-family: var(--fonts-regular);
   left: 0;
-  transform: translateX(-50%);
+  transform: translateX(calc(-50% + 6px));
   cursor: pointer;
 }
 
 .code-line-button:hover {
-  color: var(--color-primary);
+  background: var(--color-secondary) !important;
 }

web_src/css/themes/theme-gitea-dark.css

@@ -183,7 +183,7 @@
   --color-body: #1c1f25;
   --color-box-header: #1a1d1f;
   --color-box-body: #14171a;
-  --color-box-body-highlight: #121517;
+  --color-box-body-highlight: #1c2227;
   --color-text-dark: #f8f8f9;
   --color-text: #d1d5d8;
   --color-text-light: #bdc3c7;
@@ -208,11 +208,11 @@
   --color-markup-table-row: #e8e8ff06;
   --color-markup-code-block: #e8e8ff16;
   --color-button: #151a1e;
-  --color-code-bg: #191d20;
+  --color-code-bg: #101315;
   --color-code-sidebar-bg: #1b1f22;
   --color-shadow: #00001758;
-  --color-secondary-bg: #2f3135;
-  --color-expand-button: #414348;
+  --color-secondary-bg: #2f3138;
+  --color-expand-button: #2b353e;
   --color-placeholder-text: var(--color-text-light-3);
   --color-editor-line-highlight: var(--color-primary-light-5);
   --color-project-board-bg: var(--color-secondary-light-2);
@@ -233,7 +233,7 @@
   --color-label-active-bg: #73828eff;
   --color-accent: var(--color-primary-light-1);
   --color-small-accent: var(--color-primary-light-5);
-  --color-active-line: #534d1b;
+  --color-active-line: #39301e;
   --color-overlay-backdrop: #080808c0;
   accent-color: var(--color-accent);
   color-scheme: dark;

web_src/css/themes/theme-gitea-light.css

@@ -183,7 +183,7 @@
   --color-body: #ffffff;
   --color-box-header: #f1f3f5;
   --color-box-body: #ffffff;
-  --color-box-body-highlight: #f4faff;
+  --color-box-body-highlight: #ecf5fd;
   --color-text-dark: #01050a;
   --color-text: #181c21;
   --color-text-light: #30363b;
@@ -212,7 +212,7 @@
   --color-code-sidebar-bg: #f2f5f8;
   --color-shadow: #00001726;
   --color-secondary-bg: #f2f5f8;
-  --color-expand-button: #d8efff;
+  --color-expand-button: #cfe8fa;
   --color-placeholder-text: var(--color-text-light-3);
   --color-editor-line-highlight: var(--color-primary-light-6);
   --color-project-board-bg: var(--color-secondary-light-4);

web_src/js/features/repo-code.js

@@ -17,7 +17,7 @@ function changeHash(hash) {
 }
 
 function selectRange($list, $select, $from) {
-  $list.removeClass('active');
+  $list.closest('tr').removeClass('active');
 
   // add hashchange to permalink
   const $refInNewIssue = $('a.ref-in-new-issue');
@@ -69,7 +69,9 @@ function selectRange($list, $select, $from) {
       for (let i = a; i <= b; i++) {
         classes.push(`[rel=L${i}]`);
       }
-      $list.filter(classes.join(',')).addClass('active');
+      $list.filter(classes.join(',')).each(function () {
+        $(this).closest('tr').addClass('active');
+      });
       changeHash(`#L${a}-L${b}`);
 
       updateIssueHref(`L${a}-L${b}`);
@@ -78,7 +80,7 @@ function selectRange($list, $select, $from) {
       return;
     }
   }
-  $select.addClass('active');
+  $select.closest('tr').addClass('active');
   changeHash(`#${$select.attr('rel')}`);
 
   updateIssueHref($select.attr('rel'));
@@ -96,10 +98,10 @@ function showLineButton() {
   }
 
   // find active row and add button
-  const tr = document.querySelector('.code-view td.lines-code.active').closest('tr');
+  const tr = document.querySelector('.code-view tr.active .lines-code').closest('tr');
   const td = tr.querySelector('td');
   const btn = document.createElement('button');
-  btn.classList.add('code-line-button');
+  btn.classList.add('code-line-button', 'ui', 'basic', 'button');
   btn.innerHTML = svg('octicon-kebab-horizontal');
   td.prepend(btn);
 
@@ -130,7 +132,12 @@ export function initRepoCodeView() {
       } else {
         $list = $('.code-view td.lines-code');
       }
-      selectRange($list, $list.filter(`[rel=${$select.attr('id')}]`), (e.shiftKey ? $list.filter('.active').eq(0) : null));
+      const $sel = $list.filter(`[rel=${$select.attr('id')}]`);
+      let $from = null;
+      if (e.shiftKey) {
+        $from = $list.closest('tr').filter('.active').children('.lines-code').eq(0);
+      }
+      selectRange($list, $sel, $from);
 
       if (window.getSelection) {
         window.getSelection().removeAllRanges();