From 4300ebc58fe883f924b2084862d145791f9f41f7 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 23 Mar 2024 00:55:45 +0100
Subject: [PATCH] Various code view improvements

---
 web_src/css/base.css                     |  6 +++---
 web_src/css/modules/message.css          | 12 ++++++++++++
 web_src/css/repo.css                     |  1 -
 web_src/css/repo/linebutton.css          |  8 +++-----
 web_src/css/themes/theme-gitea-dark.css  | 10 +++++-----
 web_src/css/themes/theme-gitea-light.css |  4 ++--
 web_src/js/features/repo-code.js         | 19 +++++++++++++------
 7 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 71e61eeb417a0..ace3477f60d17 100644
--- a/web_src/css/base.css
+++ b/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;
 }
 
diff --git a/web_src/css/modules/message.css b/web_src/css/modules/message.css
index a29603cd91a8d..c62dbddd2531f 100644
--- a/web_src/css/modules/message.css
+++ b/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;
+}
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 4503bd69e32d1..2f9124c317961 100644
--- a/web_src/css/repo.css
+++ b/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;
 }
diff --git a/web_src/css/repo/linebutton.css b/web_src/css/repo/linebutton.css
index 79be5a7a9e76f..e99d0399d1b73 100644
--- a/web_src/css/repo/linebutton.css
+++ b/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;
 }
diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css
index 9cf8907e45f2d..bc3db65232a95 100644
--- a/web_src/css/themes/theme-gitea-dark.css
+++ b/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: var(--color-secondary-light-2);
   --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;
diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css
index 2ac83eefed2d2..39283e7f5cc90 100644
--- a/web_src/css/themes/theme-gitea-light.css
+++ b/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);
diff --git a/web_src/js/features/repo-code.js b/web_src/js/features/repo-code.js
index 08fae763b8d22..5cd1936f76cc4 100644
--- a/web_src/js/features/repo-code.js
+++ b/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();