From 375eddb368212aa63769b4b3fed4c559f4fa5bd8 Mon Sep 17 00:00:00 2001 From: Marvin W Date: Tue, 7 Oct 2025 14:31:16 +0200 Subject: UI: Adopt new design for chat input --- main/data/chat_input.ui | 16 +++---- main/data/conversation_content_view/view.ui | 4 +- main/data/main_window.ui | 3 ++ .../account_preferences_subpage.ui | 4 +- main/data/style-dark.css | 4 +- main/data/style.css | 53 +++++----------------- main/src/ui/chat_input/chat_text_view.vala | 1 + main/src/ui/chat_input/view.vala | 3 -- .../file_image_widget.vala | 2 +- 9 files changed, 29 insertions(+), 61 deletions(-) (limited to 'main') diff --git a/main/data/chat_input.ui b/main/data/chat_input.ui index 7164f733..1487b0c3 100644 --- a/main/data/chat_input.ui +++ b/main/data/chat_input.ui @@ -4,19 +4,21 @@ - \ No newline at end of file + diff --git a/main/data/main_window.ui b/main/data/main_window.ui index df755d17..3a068007 100644 --- a/main/data/main_window.ui +++ b/main/data/main_window.ui @@ -101,6 +101,9 @@ Conversation + diff --git a/main/data/preferences_window/account_preferences_subpage.ui b/main/data/preferences_window/account_preferences_subpage.ui index d9bdd076..96c847c5 100644 --- a/main/data/preferences_window/account_preferences_subpage.ui +++ b/main/data/preferences_window/account_preferences_subpage.ui @@ -45,7 +45,7 @@ @@ -150,4 +150,4 @@ - \ No newline at end of file + diff --git a/main/data/style-dark.css b/main/data/style-dark.css index 791ae9c8..eb194a93 100644 --- a/main/data/style-dark.css +++ b/main/data/style-dark.css @@ -1,3 +1,3 @@ -.overlay-toolbar { +.compact-card-toolbar { background-color: shade(@view_bg_color, 1.5); -} \ No newline at end of file +} diff --git a/main/data/style.css b/main/data/style.css index bc004cb4..5762d264 100644 --- a/main/data/style.css +++ b/main/data/style.css @@ -121,13 +121,13 @@ picture.avatar { /* Overlay Toolbar */ -.overlay-toolbar { +.compact-card-toolbar { padding: 2px; border-radius: 6px; border-spacing: 0; } -.overlay-toolbar > * { +.compact-card-toolbar > * { margin-top: 0; margin-bottom: 0; } @@ -247,41 +247,17 @@ window.dino-main .dino-file-overlay { /* Chat Input*/ -window.dino-main .dino-attach-button { - min-width: 24px; /* Make button the same width as avatars */ +/* These rules are direved from the libadwaita style for activateable entry rows */ +window.dino-main box.dino-chatinput.activatable { + outline: 0 solid transparent; + outline-offset: 5px; + transition: outline-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), outline-offset 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } -window.dino-main .dino-attach-button, -window.dino-main .dino-chatinput-button button { - border: none; - background: transparent; - box-shadow: none; - min-height: 0; - padding: 7px 5px; - color: alpha(@theme_fg_color, 0.7); - outline: none; -} - -window.dino-main .dino-attach-button:hover, -window.dino-main .dino-chatinput-button button:hover { - color: @theme_selected_bg_color; -} - -window.dino-main .dino-attach-button:backdrop, -window.dino-main .dino-chatinput-button button:backdrop { - color: alpha(@theme_unfocused_fg_color, 0.6); -} - -window.dino-main .dino-attach-button:active, -window.dino-main .dino-attach-button:checked, -window.dino-main .dino-chatinput-button button:active, -window.dino-main .dino-chatinput-button button:checked { - color: alpha(@theme_selected_bg_color, 0.8); -} - -window.dino-main .dino-attach-button:checked:backdrop, -window.dino-main .dino-chatinput-button button:checked:backdrop { - color: alpha(@theme_unfocused_selected_bg_color, 0.8); +window.dino-main box.dino-chatinput.activatable:focus-within { + outline-offset: -1px; + outline-width: 2px; + outline-color: color-mix(in srgb, var(--accent-color) 50%, transparent); } .dino-unread-line label { @@ -292,13 +268,6 @@ window.dino-main .dino-chatinput-button button:checked:backdrop { background-color: @theme_selected_bg_color; } -.dino-chatinput, -.dino-chatinput textview, -.dino-chatinput textview text { - background-color: @theme_base_color; -} - - /*Chat input warning*/ box.dino-input-warning frame border { diff --git a/main/src/ui/chat_input/chat_text_view.vala b/main/src/ui/chat_input/chat_text_view.vala index c7429318..201b60ac 100644 --- a/main/src/ui/chat_input/chat_text_view.vala +++ b/main/src/ui/chat_input/chat_text_view.vala @@ -66,6 +66,7 @@ public class ChatTextView : Box { scrolled_window.vadjustment.changed.connect(on_upper_notify); + text_view.remove_css_class("view"); text_view.realize.connect(() => { var minimum_size = Requisition(); scrolled_window.get_preferred_size(out minimum_size, null); diff --git a/main/src/ui/chat_input/view.vala b/main/src/ui/chat_input/view.vala index 96986b58..dbb1f74e 100644 --- a/main/src/ui/chat_input/view.vala +++ b/main/src/ui/chat_input/view.vala @@ -19,7 +19,6 @@ public class View : Box { private Conversation? conversation; private HashMap entry_cache = new HashMap(Conversation.hash_func, Conversation.equals_func); - [GtkChild] public unowned Frame frame; [GtkChild] public unowned Box quote_box; [GtkChild] public unowned ChatTextView chat_text_view; [GtkChild] public unowned Button file_button; @@ -45,8 +44,6 @@ public class View : Box { file_button.tooltip_text = Util.string_if_tooltips_active(_("Send a file")); - Util.force_css(frame, "* { border-radius: 3px; }"); - return this; } diff --git a/main/src/ui/conversation_content_view/file_image_widget.vala b/main/src/ui/conversation_content_view/file_image_widget.vala index dae245e4..6efe2d58 100644 --- a/main/src/ui/conversation_content_view/file_image_widget.vala +++ b/main/src/ui/conversation_content_view/file_image_widget.vala @@ -46,7 +46,7 @@ public class FileImageWidget : Widget { image_overlay_toolbar.append(button); image_overlay_toolbar.add_css_class("card"); image_overlay_toolbar.add_css_class("toolbar"); - image_overlay_toolbar.add_css_class("overlay-toolbar"); + image_overlay_toolbar.add_css_class("compact-card-toolbar"); image_overlay_toolbar.set_cursor_from_name("default"); file_size_label.add_css_class("file-details"); -- cgit v1.3