From 463b24949ee341c5d387096c40004fa79f1c72b3 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 24 Oct 2023 09:22:58 -0400 Subject: [PATCH 1/4] Tweak notification styles --- styles/src/style_tree/notification_panel.ts | 43 +++++++++------------ 1 file changed, 19 insertions(+), 24 deletions(-) diff --git a/styles/src/style_tree/notification_panel.ts b/styles/src/style_tree/notification_panel.ts index 3b6a87946a38b6d072daacc46ed6fa9dd76eea4b..ecafc3c8e6c8fc2b8b2cc7a54990fdb74d4e9aa8 100644 --- a/styles/src/style_tree/notification_panel.ts +++ b/styles/src/style_tree/notification_panel.ts @@ -1,12 +1,22 @@ import { background, border, text } from "./components" import { icon_button } from "../component/icon_button" -import { useTheme } from "../theme" -import { interactive } from "../element" +import { useTheme, with_opacity } from "../theme" +import { text_button } from "../component" export default function (): any { const theme = useTheme() const layer = theme.middle + const notification_text = { + padding: { top: 4, bottom: 4 }, + ...text(layer, "sans", "base"), + } + + const notification_read_text_color = with_opacity( + theme.middle.base.default.foreground, + 0.6 + ) + return { background: background(layer), avatar: { @@ -31,34 +41,19 @@ export default function (): any { }, }, read_text: { - padding: { top: 4, bottom: 4 }, - ...text(layer, "sans", "disabled"), + ...notification_text, + color: notification_read_text_color, }, - unread_text: { - padding: { top: 4, bottom: 4 }, - ...text(layer, "sans", "base"), - }, - button: interactive({ - base: { - ...text(theme.lowest, "sans", "on", { size: "xs" }), - background: background(theme.lowest, "on"), - padding: 4, - corner_radius: 6, - margin: { left: 6 }, - }, - - state: { - hovered: { - background: background(theme.lowest, "on", "hovered"), - }, - }, + unread_text: notification_text, + button: text_button({ + variant: "ghost", }), timestamp: text(layer, "sans", "base", "disabled"), avatar_container: { padding: { - right: 6, + right: 8, left: 2, - top: 2, + top: 4, bottom: 2, }, }, From c9e670397f86e9a78bddaf22c09d5bee48a9eecc Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 24 Oct 2023 09:25:49 -0400 Subject: [PATCH 2/4] Give notifications a bit more breathing room by default --- assets/settings/default.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/settings/default.json b/assets/settings/default.json index e70b56335915c8b4b2397dcae73def3d0a7bcda3..19c73ca0212016bf61b7fcf519d62fee33a4417b 100644 --- a/assets/settings/default.json +++ b/assets/settings/default.json @@ -148,7 +148,7 @@ // Where to dock channels panel. Can be 'left' or 'right'. "dock": "right", // Default width of the channels panel. - "default_width": 240 + "default_width": 380 }, "assistant": { // Whether to show the assistant panel button in the status bar. From beb91fa0948346e0a53c8ef6e24e4b8938e6f495 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 24 Oct 2023 09:51:26 -0400 Subject: [PATCH 3/4] Add `meta_text` to style metaline --- crates/collab_ui/src/notification_panel.rs | 2 +- crates/theme/src/theme.rs | 1 + styles/src/style_tree/notification_panel.ts | 7 +++++++ 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/crates/collab_ui/src/notification_panel.rs b/crates/collab_ui/src/notification_panel.rs index e245a919f3a549ddb264720bfe0abe9103434b9c..80c99b5c725203243e8209dc420019db997db33f 100644 --- a/crates/collab_ui/src/notification_panel.rs +++ b/crates/collab_ui/src/notification_panel.rs @@ -257,7 +257,7 @@ impl NotificationPanel { } else { "You declined" }, - style.read_text.text.clone(), + style.meta_text.text.clone(), ) .flex_float() .into_any(), diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index 3f4264886f93723aac2415a97228ad94a6fcb16a..c29f23c63a4604b49f8b88c5d5581695e7c70308 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -674,6 +674,7 @@ pub struct NotificationPanel { pub icon_button: Interactive, pub unread_text: ContainedText, pub read_text: ContainedText, + pub meta_text: ContainedText, pub timestamp: ContainedText, pub button: Interactive, } diff --git a/styles/src/style_tree/notification_panel.ts b/styles/src/style_tree/notification_panel.ts index ecafc3c8e6c8fc2b8b2cc7a54990fdb74d4e9aa8..6bc2b9c6113da7f64d8061473472f3f62aa5eaf3 100644 --- a/styles/src/style_tree/notification_panel.ts +++ b/styles/src/style_tree/notification_panel.ts @@ -44,6 +44,13 @@ export default function (): any { ...notification_text, color: notification_read_text_color, }, + meta_text: { + padding: { top: 4, bottom: 4, right: 4 }, + ...text(layer, "sans", "base"), + color: with_opacity( + theme.middle.base.default.foreground, + 0.6) + }, unread_text: notification_text, button: text_button({ variant: "ghost", From c8dfccff36fcf9a143211d31b78bd1136645f646 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 24 Oct 2023 09:57:33 -0400 Subject: [PATCH 4/4] Revert "Add `meta_text` to style metaline" This reverts commit beb91fa0948346e0a53c8ef6e24e4b8938e6f495. --- crates/collab_ui/src/notification_panel.rs | 2 +- crates/theme/src/theme.rs | 1 - styles/src/style_tree/notification_panel.ts | 7 ------- 3 files changed, 1 insertion(+), 9 deletions(-) diff --git a/crates/collab_ui/src/notification_panel.rs b/crates/collab_ui/src/notification_panel.rs index 80c99b5c725203243e8209dc420019db997db33f..e245a919f3a549ddb264720bfe0abe9103434b9c 100644 --- a/crates/collab_ui/src/notification_panel.rs +++ b/crates/collab_ui/src/notification_panel.rs @@ -257,7 +257,7 @@ impl NotificationPanel { } else { "You declined" }, - style.meta_text.text.clone(), + style.read_text.text.clone(), ) .flex_float() .into_any(), diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index c29f23c63a4604b49f8b88c5d5581695e7c70308..3f4264886f93723aac2415a97228ad94a6fcb16a 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -674,7 +674,6 @@ pub struct NotificationPanel { pub icon_button: Interactive, pub unread_text: ContainedText, pub read_text: ContainedText, - pub meta_text: ContainedText, pub timestamp: ContainedText, pub button: Interactive, } diff --git a/styles/src/style_tree/notification_panel.ts b/styles/src/style_tree/notification_panel.ts index 6bc2b9c6113da7f64d8061473472f3f62aa5eaf3..ecafc3c8e6c8fc2b8b2cc7a54990fdb74d4e9aa8 100644 --- a/styles/src/style_tree/notification_panel.ts +++ b/styles/src/style_tree/notification_panel.ts @@ -44,13 +44,6 @@ export default function (): any { ...notification_text, color: notification_read_text_color, }, - meta_text: { - padding: { top: 4, bottom: 4, right: 4 }, - ...text(layer, "sans", "base"), - color: with_opacity( - theme.middle.base.default.foreground, - 0.6) - }, unread_text: notification_text, button: text_button({ variant: "ghost",