From 13be344becd792b6abe0b9bb898a1abe0bce5514 Mon Sep 17 00:00:00 2001 From: Pierre F <81689742+pierrefardel@users.noreply.github.com> Date: Tue, 16 Jun 2026 17:56:02 +0200 Subject: [PATCH] Expose sidebar width as CSS custom property and enable global resize MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Horde computes the sidebar width in JavaScript and applies it as an inline style, which prevents themes from overriding it in pure CSS. This exposes the width as a CSS custom property (--horde-sidebar-width) on so themes can consume it directly. It also adds a global drag-to-resize on the existing #horde-slideleftcursor handle — previously only IMP could resize the sidebar. The width is clamped between --horde-sidebar-min-width / --horde-sidebar-max-width and persisted in localStorage. No existing behaviour is removed: the custom property is inert until a theme consumes it, so the default theme is unaffected. --- js/sidebar.js | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/js/sidebar.js b/js/sidebar.js index cf940fe71..f8e3c74b7 100644 --- a/js/sidebar.js +++ b/js/sidebar.js @@ -56,6 +56,47 @@ var HordeSidebar = { onDomLoad: function() { this.refreshEvents(); + + var s = $('horde-sidebar'); + if (s) { + var saved = localStorage.getItem('horde_sidebar_width'); + var w = saved + ? parseInt(saved) + : (s.offsetWidth || parseInt(s.style.width) || 250); + document.documentElement.style.setProperty('--horde-sidebar-width', w + 'px'); + } + + /* Drag-resize sidebar globale */ + var handle = document.getElementById('horde-slideleftcursor'); + if (!handle) return; + + handle.addEventListener('mousedown', function(e) { + e.preventDefault(); + var root = document.documentElement; + var cs = getComputedStyle(root); + var startX = e.clientX; + var startW = parseInt(cs.getPropertyValue('--horde-sidebar-width')) || 250; + var getMin = function() { return parseInt(cs.getPropertyValue('--horde-sidebar-min-width')) || 250; }; + var getMax = function() { return parseInt(cs.getPropertyValue('--horde-sidebar-max-width')) || 500; }; + + document.body.style.cursor = 'col-resize'; + document.body.style.userSelect = 'none'; + + function onMove(e) { + var newW = Math.min(Math.max(startW + (e.clientX - startX), getMin()), getMax()); + root.style.setProperty('--horde-sidebar-width', newW + 'px'); + } + function onUp() { + document.body.style.cursor = ''; + document.body.style.userSelect = ''; + localStorage.setItem('horde_sidebar_width', + parseInt(getComputedStyle(root).getPropertyValue('--horde-sidebar-width'))); + document.removeEventListener('mousemove', onMove); + document.removeEventListener('mouseup', onUp); + } + document.addEventListener('mousemove', onMove); + document.addEventListener('mouseup', onUp); + }); } };