From e29007bca98631655752ce0a1902223e7c0bfda0 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <hello@saschaeggenberger.com>
Date: Sun, 9 Jun 2024 23:34:53 +0200
Subject: [PATCH] Increase visibility of table sorting

---
 dist/css/base/gin.css           |  30 ++++++++++++++++++++++++++++--
 dist/css/theme/accent.css       |   1 +
 dist/media/sprite.svg           | Bin 33690 -> 33141 bytes
 styles/base/_table.scss         |  29 +++++++++++++++++++++++------
 styles/helpers/_svg-sprite.scss |   5 -----
 styles/theme/accent.scss        |   1 +
 6 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/dist/css/base/gin.css b/dist/css/base/gin.css
index 258ae1820..0b6294f14 100644
--- a/dist/css/base/gin.css
+++ b/dist/css/base/gin.css
@@ -1439,6 +1439,10 @@ table.position-sticky thead {
   position: static;
 }
 
+table.position-sticky.--is-processed thead {
+  pointer-events: none;
+}
+
 table.position-sticky.--is-processed thead tr {
   border-color: transparent;
 }
@@ -1495,7 +1499,7 @@ table .draggable-table.tabledrag-disabled tr {
 table tr:hover,
 table .draggable-table.tabledrag-disabled tr:hover {
   color: var(--gin-color-text);
-  background: var(--gin-bg-item-hover);
+  background: var(--gin-bg-item);
 }
 
 table tr.selected:hover,
@@ -1508,7 +1512,7 @@ table .draggable-table.tabledrag-disabled tr.selected:hover {
 }
 
 table tr.selected td {
-  background-color: var(--gin-color-primary-light);
+  background-color: var(--gin-bg-item-hover);
 }
 
 table td a {
@@ -1549,11 +1553,33 @@ table td .group-label {
   }
 }
 
+.sortable-heading.is-active > a::before,
+.sortable-heading > a:hover::before {
+  width: 100%;
+}
+
+[dir="ltr"] .sortable-heading.is-active > a::before,
+[dir="ltr"] .sortable-heading > a:hover::before {
+  left: 0;
+}
+
+[dir="rtl"] .sortable-heading.is-active > a::before,
+[dir="rtl"] .sortable-heading > a:hover::before {
+  right: 0;
+}
+
+.sortable-heading > a:hover::before {
+  border-bottom-width: 3px;
+}
+
 .sortable-heading.is-active > a, .sortable-heading.is-active > a:hover, .sortable-heading.is-active > a:active {
   color: var(--gin-color-primary-active);
 }
 
 .sortable-heading.is-active > a::before {
+  background-color: var(--gin-bg-item);
+  border-top-left-radius: var(--gin-border-s);
+  border-top-right-radius: var(--gin-border-s);
   border-bottom: .1875rem solid var(--gin-color-primary-active);
 }
 
diff --git a/dist/css/theme/accent.css b/dist/css/theme/accent.css
index 34a74bbea..9f7f9a9fd 100644
--- a/dist/css/theme/accent.css
+++ b/dist/css/theme/accent.css
@@ -2,6 +2,7 @@
   --gin-color-primary: rgb(var(--gin-color-primary-rgb));
   --gin-color-primary-light: rgba(var(--gin-color-primary-rgb), .15);
   --gin-bg-app: rgb(var(--gin-bg-app-rgb));
+  --gin-bg-item: rgba(var(--gin-color-primary-rgb), .05);
   --gin-bg-item-hover: rgba(var(--gin-color-primary-rgb), .1);
   --gin-color-primary-light-hover: rgba(var(--gin-color-primary-rgb), .2);
   --gin-color-primary-light-active: rgba(var(--gin-color-primary-rgb), .3);
diff --git a/dist/media/sprite.svg b/dist/media/sprite.svg
index 45c2b6466c7adb6c20d90f0254362b1121c9cad2..dc6af66074727233c3c526fc9abf586fb5001239 100644
GIT binary patch
delta 321
zcmbQ$&h)j3X@h_A=8{ws#>t5eYLm~U$xIGSmE6pnevf(biZqSMoY@kSU!_THw$3(S
zocth5Yx2|_@yQC=5|fYQykIn(ypUIQ@}*pf$!l{YHZ$c-V`4O(e2`Cd^1cG8$**$7
zC%-RvI(bHc+T>q_GLvr<h;P;{a%P--xln!b^kRw0qD2yuj~8E>Tv)6&d4GxQ<PF6V
zo4=G;GBO&2jSVi7n0%*1d~;J7JL6<W1@*}r%H<|!mx)h)T7Hko%wqBbDb>lZDpV$)
zEmxgvTzPTwkqYC<=2ha8`76aYr&fh9O=hW5n|!}UYO-II_-27xZAL~@u(^qK(vyGI
zh;N=;x0aE~+#KxQ^ah#9)pZh^XE)d|PIhcioBX#?a&k+9_-5TEX~xOd8`UP~HA@Q`
RnJ9pflD?gdesNj49RRhWfW80#

delta 626
zcmey`#5Aj&X@h?<n{H-aQhvqci=_(nmU<=%Muy3H=6Yrdh9In91R{$K^(=KkQhH{(
zhQ5Xt3Kq!*x`ujYx_V~1#(IXjhI$sdCVEEBhNgOk5FN&PW(r0MhDHiT#UK@WW*~V5
zLp_UNGX*m}69qGn5egu^dKL<%dPcg2dgcmd^&lh76%4_ALy&S^Lp=~}sbHX>XQXGS
zXRK$WX98wffUHu`Gt4kF)-y^r)H6~r0BHb|mb!X|dWImvNLSBD&q!C#q*zzaL|4xO
zWS*{}o~5&)g`R~1NUMUOg@Pg277GPNi^+_!EquxOxw)xD$*ItQsYx+og#^*Y6y439
z$ySVvW|KE6sZL&*A~X3<hScW!DR-GCyJu-mewraZxg$$_vv8&{<K(t%^~t$eQj?El
zOHN*p^?Y)1p8Di<+2WHo=ZSB=lRcej@_i|_$usk$CV$KqpL{CsDWe70(5v|}le-JW
zH**v?GfplpQlDH@C^30kk>upXg%>Atl&DXhT_iKvtwenDxgsmZ$tk63ll4j@Ca)|N
z-yB=Q&d6vn`GJ(`<gQZr$*;;(CZ8?6$Y?%!Vu0G@qh%_SH7X<~A1LLW%vXMK@{}sI
z$*dJBldn{XZ+55%VVW#fqc(Y0mDJ?$8u87qtF##z%_kq^Q=M#6BRx63PJDA-&05CE
z8|&34JJrcd{!lNmxvb8Hak6rw+T<Jcl9M-viErj;kY;2uv6%c&N@cQVqqLxjg@TcZ
Qf{}@mzMYMJaap<@01*4cv;Y7A

diff --git a/styles/base/_table.scss b/styles/base/_table.scss
index b09603d77..da5bd7194 100644
--- a/styles/base/_table.scss
+++ b/styles/base/_table.scss
@@ -74,11 +74,15 @@ table.position-sticky {
     position: static;
   }
 
-  &.--is-processed thead tr {
-    border-color: transparent;
+  &.--is-processed thead {
+    pointer-events: none;
 
-    .sortable-heading.is-active > a::before {
-      display: none;
+    tr {
+      border-color: transparent;
+
+      .sortable-heading.is-active > a::before {
+        display: none;
+      }
     }
   }
 }
@@ -130,7 +134,7 @@ table {
 
     &:hover {
       color: var(--gin-color-text);
-      background: var(--gin-bg-item-hover);
+      background: var(--gin-bg-item);
     }
 
     &.selected:hover {
@@ -144,7 +148,7 @@ table {
     }
 
     td {
-      background-color: var(--gin-color-primary-light);
+      background-color: var(--gin-bg-item-hover);
     }
   }
 
@@ -182,12 +186,25 @@ table {
     }
   }
 
+  &.is-active > a::before,
+  > a:hover::before {
+    width: 100%;
+    left: 0;
+  }
+
+  > a:hover::before {
+    border-bottom-width: 3px;
+  }
+
   &.is-active > a {
     &, &:hover, &:active {
       color: var(--gin-color-primary-active);
     }
 
     &::before {
+      background-color: var(--gin-bg-item);
+      border-top-left-radius: var(--gin-border-s);
+      border-top-right-radius: var(--gin-border-s);
       border-bottom: .1875rem solid var(--gin-color-primary-active);
     }
   }
diff --git a/styles/helpers/_svg-sprite.scss b/styles/helpers/_svg-sprite.scss
index 6f739eb81..349e0a6a7 100644
--- a/styles/helpers/_svg-sprite.scss
+++ b/styles/helpers/_svg-sprite.scss
@@ -59,7 +59,6 @@ $sprites: (
     'user': "../../media/sprite.svg#user-view",
     'appearance': "../../media/sprite.svg#appearance-view",
     'bat': "../../media/sprite.svg#bat-view",
-    'commerce-inbox': "../../media/sprite.svg#commerce-inbox-view",
     'commerce': "../../media/sprite.svg#commerce-view",
     'config': "../../media/sprite.svg#config-view",
     'content': "../../media/sprite.svg#content-view",
@@ -320,10 +319,6 @@ $sizes: (
         'width': 24px,
         'height': 24px
     ),
-    'commerce-inbox': (
-        'width': 24px,
-        'height': 24px
-    ),
     'commerce': (
         'width': 24px,
         'height': 24px
diff --git a/styles/theme/accent.scss b/styles/theme/accent.scss
index 8addb5a7a..2666422e2 100644
--- a/styles/theme/accent.scss
+++ b/styles/theme/accent.scss
@@ -2,6 +2,7 @@
   --gin-color-primary: rgb(var(--gin-color-primary-rgb));
   --gin-color-primary-light: rgba(var(--gin-color-primary-rgb), .15);
   --gin-bg-app: rgb(var(--gin-bg-app-rgb));
+  --gin-bg-item: rgba(var(--gin-color-primary-rgb), .05);
   --gin-bg-item-hover: rgba(var(--gin-color-primary-rgb), .1);
   --gin-color-primary-light-hover: rgba(var(--gin-color-primary-rgb), .2);
   --gin-color-primary-light-active: rgba(var(--gin-color-primary-rgb), .3);
-- 
GitLab