From 42f2becca048cd3911b593f27b6fae351580b10a Mon Sep 17 00:00:00 2001
From: Adrian Heine <adrian.heine@zeit.de>
Date: Fri, 20 Sep 2024 16:59:06 +0200
Subject: [PATCH] WCM-115: More visible sidebrush toggler

---
 core/docs/changelog/WCM-115.changelog         |   1 +
 core/src/zeit/cms/browser/main_template.pt    |   3 +++
 core/src/zeit/cms/browser/resources/cms.css   |  20 +++++++++++++-----
 .../resources/layout/sidebardragger-open.png  | Bin 2962 -> 0 bytes
 .../resources/layout/sidebardragger.png       | Bin 315 -> 0 bytes
 5 files changed, 19 insertions(+), 5 deletions(-)
 create mode 100644 core/docs/changelog/WCM-115.changelog
 delete mode 100644 core/src/zeit/cms/browser/resources/layout/sidebardragger-open.png
 delete mode 100644 core/src/zeit/cms/browser/resources/layout/sidebardragger.png

diff --git a/core/docs/changelog/WCM-115.changelog b/core/docs/changelog/WCM-115.changelog
new file mode 100644
index 0000000000..c6f4608abd
--- /dev/null
+++ b/core/docs/changelog/WCM-115.changelog
@@ -0,0 +1 @@
+WCM-115: More visible sidebrush toggler
diff --git a/core/src/zeit/cms/browser/main_template.pt b/core/src/zeit/cms/browser/main_template.pt
index 32740f20cf..5031c78410 100644
--- a/core/src/zeit/cms/browser/main_template.pt
+++ b/core/src/zeit/cms/browser/main_template.pt
@@ -101,6 +101,9 @@
         </div>
         <div id="sidebar-dragger"
           tal:attributes="class sidebar_css">
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M10 1L4 7L10 13" stroke-width="1.5"/>
+            </svg>
         </div>
 
         <script type="text/javascript" tal:content="string:
diff --git a/core/src/zeit/cms/browser/resources/cms.css b/core/src/zeit/cms/browser/resources/cms.css
index 401819f46a..6ac5286670 100644
--- a/core/src/zeit/cms/browser/resources/cms.css
+++ b/core/src/zeit/cms/browser/resources/cms.css
@@ -3,6 +3,10 @@
  * normal HTML element CSS defs
  *
  * */
+:root {
+  --sidebar-folded-width: 1em;
+}
+
 body {
   position: absolute;
   top: 0;
@@ -156,7 +160,7 @@ pre {
 
 .sidebar-folded #breadcrumbs,
 #visualContentSeparator.sidebar-folded {
-   left: 1em;
+   left: calc(var(--sidebar-folded-width) + 0.66em);
 }
 
 #header.sidebar-folded > #main-navigation {
@@ -209,9 +213,15 @@ pre {
   top: 0em;
   bottom: 0;
   cursor: pointer;
-  background: transparent url("layout/sidebardragger.png") no-repeat center;
   border-right: 1px solid #e4e4e4;
   border-left: 1px solid #e4e4e4;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  stroke: #999999;
+}
+#sidebar-dragger:hover {
+  background: #f7f7f7;
 }
 
 #sidebar.sidebar-folded {
@@ -220,10 +230,10 @@ pre {
 
 #sidebar-dragger.sidebar-folded {
   left: 0;
-  width: 0.34em;
+  width: var(--sidebar-folded-width);
   cursor: pointer;
-  background: transparent url("layout/sidebardragger-open.png") no-repeat center;
   border-right: 1px solid #e4e4e4;
+  transform: rotate(180deg);
 }
 
 #sidebar .required {
@@ -231,7 +241,7 @@ pre {
 }
 
 #visualContentWrapper.sidebar-folded {
-  left: 0.5em;
+  left: calc(var(--sidebar-folded-width) + 0.1em);
 }
 
 #content {
diff --git a/core/src/zeit/cms/browser/resources/layout/sidebardragger-open.png b/core/src/zeit/cms/browser/resources/layout/sidebardragger-open.png
deleted file mode 100644
index 2dd9d38d52f86b19948459900577ef233706ea3b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2962
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
IM6N<$g4t7@jQ{`u

diff --git a/core/src/zeit/cms/browser/resources/layout/sidebardragger.png b/core/src/zeit/cms/browser/resources/layout/sidebardragger.png
deleted file mode 100644
index 3dc1e7cba7a3451304f12a6476bfbf6fad7a5294..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 315
zcmeAS@N?(olHy`uVBq!ia0vp^oIotj!3HF6`lkK{QjEnx?oJHr&dIz4$rgA-7Bet#
z3xhBt!>l<HKtc8rPhVH|o9v?8rZUsg-#!8gNtU=qlsM<-=BDPAFgO>bCYGe8D3oWG
zWGJ|M`UZqI@`(c#t?+bl4AD6MbYdW1lLL>-eUmts^UN_~J9-zf8_L=X+z~bWcROYB
z+_R^Bc3=HjWa^b8+_6bz;!GKrBCB~fR%g!Qs9Ry*@@wDvFAGJsNgfxxy?R=R^I?NC
zuRB*<3p%<rm)jvN?05I~9qV3C*m8e|O3r1Iv)^BOO;2s$-Qp8sWxudy-rC73Nza(7
zrGqV}3O<!pP)b`-Q`7(Z#^vSu7gKlLtc+i4EbOW8@Q6`GF(uY=UDPF@n;AS^{an^L
HB{Ts5K1_8i