From dfe4a54e0bd031027d084e16f8a86b967f3eaff7 Mon Sep 17 00:00:00 2001
From: Mechiel Lukkien <mechiel@ueber.net>
Date: Fri, 23 Aug 2024 14:28:05 +0200
Subject: [PATCH] webmail: when a ui element (eg button) is disabled, make that
 clear with styles

since we have more of our own styling (probably since dark mode), we weren't
indicating anymore that a button was disabled. this actually only applies to
the button for the current mailbox of a message, when attempting to move it.

we now don't show any hover effects in that case, and we show the button
semitransparent.
---
 webmail/webmail.js | 7 ++++---
 webmail/webmail.ts | 7 ++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/webmail/webmail.js b/webmail/webmail.js
index 638e960..d6f37c5 100644
--- a/webmail/webmail.js
+++ b/webmail/webmail.js
@@ -1491,14 +1491,15 @@ const zindexes = {
 ensureCSS('.button', { display: 'inline-block' });
 ensureCSS('button, .button, select', { color: styles.color, backgroundColor: styles.buttonBackground, border: '1px solid', borderColor: styles.buttonBorderColor, borderRadius: '.15em', padding: '0 .15em' });
 ensureCSS('button.active, .button.active, button.active:hover, .button.active:hover', { backgroundColor: styles.highlightBackground });
-ensureCSS('button:hover, .button:hover, select:hover', { backgroundColor: styles.buttonHoverBackground });
+ensureCSS('button:hover:not(:disabled), .button:hover:not(:disabled), select:hover:not(:disabled)', { backgroundColor: styles.buttonHoverBackground });
+ensureCSS('button:disabled, .button:disabled, select:disabled', { opacity: .5 });
 ensureCSS('input, textarea', { backgroundColor: styles.backgroundColor, color: styles.color, border: '1px solid', borderColor: '#888', borderRadius: '.15em', padding: '0 .15em' });
-ensureCSS('input:hover, textarea:hover', { borderColor: styles.colorMilder });
+ensureCSS('input:hover:not(:disabled), textarea:hover:not(:disabled)', { borderColor: styles.colorMilder });
 ensureCSS('.btngroup button, .btngroup .button', { borderRadius: 0, borderRightWidth: 0 });
 ensureCSS('.btngroup button:first-child, .btngroup .button:first-child', { borderRadius: '.15em 0 0 .15em' });
 ensureCSS('.btngroup button:last-child, .btngroup .button:last-child', { borderRadius: '0 .15em .15em 0', borderRightWidth: '1px' });
 const keywordButtonStyle = css('keywordButton', { cursor: 'pointer' });
-ensureCSS('.keywordButton:hover', { backgroundColor: styles.highlightBackgroundHover });
+ensureCSS('.keywordButton:hover:not(:disabled)', { backgroundColor: styles.highlightBackgroundHover });
 const yscrollStyle = css('yscroll', { overflowY: 'scroll', position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 });
 const yscrollAutoStyle = css('yscrollAuto', { overflowY: 'auto', position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 });
 // Input elements that automatically grow based on input, with additional JS.
diff --git a/webmail/webmail.ts b/webmail/webmail.ts
index 2c5134b..5c2a24b 100644
--- a/webmail/webmail.ts
+++ b/webmail/webmail.ts
@@ -106,16 +106,17 @@ const zindexes = {
 ensureCSS('.button', {display: 'inline-block'})
 ensureCSS('button, .button, select', {color: styles.color, backgroundColor: styles.buttonBackground, border: '1px solid', borderColor: styles.buttonBorderColor, borderRadius: '.15em', padding: '0 .15em'})
 ensureCSS('button.active, .button.active, button.active:hover, .button.active:hover', {backgroundColor: styles.highlightBackground})
-ensureCSS('button:hover, .button:hover, select:hover', {backgroundColor: styles.buttonHoverBackground})
+ensureCSS('button:hover:not(:disabled), .button:hover:not(:disabled), select:hover:not(:disabled)', {backgroundColor: styles.buttonHoverBackground})
+ensureCSS('button:disabled, .button:disabled, select:disabled', {opacity: .5})
 ensureCSS('input, textarea', {backgroundColor: styles.backgroundColor, color: styles.color, border: '1px solid', borderColor: '#888', borderRadius: '.15em', padding: '0 .15em'})
-ensureCSS('input:hover, textarea:hover', {borderColor: styles.colorMilder})
+ensureCSS('input:hover:not(:disabled), textarea:hover:not(:disabled)', {borderColor: styles.colorMilder})
 
 ensureCSS('.btngroup button, .btngroup .button', {borderRadius: 0, borderRightWidth: 0 })
 ensureCSS('.btngroup button:first-child, .btngroup .button:first-child', {borderRadius: '.15em 0 0 .15em'})
 ensureCSS('.btngroup button:last-child, .btngroup .button:last-child', {borderRadius: '0 .15em .15em 0', borderRightWidth: '1px'})
 
 const keywordButtonStyle = css('keywordButton', {cursor: 'pointer'})
-ensureCSS('.keywordButton:hover', {backgroundColor: styles.highlightBackgroundHover})
+ensureCSS('.keywordButton:hover:not(:disabled)', {backgroundColor: styles.highlightBackgroundHover})
 
 
 const yscrollStyle = css('yscroll', {overflowY: 'scroll', position: 'absolute', top: 0, bottom: 0, left: 0, right: 0})