From 584dc0f62bab77eebb5b78283c5e859061c135fa Mon Sep 17 00:00:00 2001
From: Christoph Wurst <christoph@winzerhof-wurst.at>
Date: Thu, 24 Sep 2020 11:38:56 +0200
Subject: [PATCH] Improve thread header hover design and align text
It's a nice little touch to show a light background color for the
hovered thread header, as suggested by Marco.
Moreover this aligns the email text with the thread subject and the
header text.
Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
---
src/components/Thread.vue | 4 ++--
src/components/ThreadEnvelope.vue | 8 +++++++-
2 files changed, 9 insertions(+), 3 deletions(-)
diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index 9045170aa..3b5fb7ed6 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -175,7 +175,7 @@ export default {
#mail-thread-header-fields {
// initial width
width: 0;
- padding-left: 38px;
+ padding-left: 60px;
// grow and try to fill 100%
flex: 1 1 auto;
h2,
@@ -206,7 +206,7 @@ export default {
}
#mail-content, .mail-signature {
- margin: 10px 38px 50px 38px;
+ margin: 10px 38px 50px 60px;
.mail-message-body-html & {
margin-bottom: -44px; // accounting for the sticky attachment button
diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
index 416f08646..75ce5fff3 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -364,7 +364,13 @@ export default {
}
.envelope--header {
display: flex;
- padding-bottom: 20px
+ padding: 10px;
+ margin-bottom: 3px;
+ border-radius: var(--border-radius);
+
+ &:hover {
+ background-color: var(--color-background-hover);
+ }
}
.left {
flex-grow: 1;
--
GitLab