Small UI fixes for libAdwaita

This commit is contained in:
Marvin W 2023-01-08 21:40:09 +01:00
parent 6a182ba313
commit 99d9cb383a
No known key found for this signature in database
GPG key ID: 072E9235DB996F2A
9 changed files with 41 additions and 56 deletions

View file

@ -90,7 +90,8 @@ set(RESOURCE_LIST
unified_main_content.ui unified_main_content.ui
unified_window_placeholder.ui unified_window_placeholder.ui
theme.css style.css
style-dark.css
) )
compile_gresources( compile_gresources(

View file

@ -31,7 +31,9 @@
<property name="halign">end</property> <property name="halign">end</property>
<property name="valign">start</property> <property name="valign">start</property>
<style> <style>
<class name="linked"/> <class name="card"/>
<class name="toolbar"/>
<class name="overlay-toolbar"/>
</style> </style>
</object> </object>
</child> </child>

View file

@ -144,7 +144,7 @@
<property name="margin-start">5</property> <property name="margin-start">5</property>
<style> <style>
<class name="conversation_list_row_xbutton"/> <class name="conversation_list_row_xbutton"/>
<class name="circular-button"/> <class name="circular"/>
<class name="flat"/> <class name="flat"/>
</style> </style>
<child> <child>

View file

@ -31,7 +31,8 @@
<property name="halign">end</property> <property name="halign">end</property>
<property name="valign">end</property> <property name="valign">end</property>
<style> <style>
<class name="circular-button"/> <class name="circular"/>
<class name="opaque"/>
</style> </style>
<child> <child>
<object class="GtkImage"> <object class="GtkImage">

3
main/data/style-dark.css Normal file
View file

@ -0,0 +1,3 @@
.dino-main .overlay-toolbar {
background-color: shade(@view_bg_color, 1.5);
}

View file

@ -43,7 +43,7 @@ window.dino-main .dino-conversation .highlight-once {
} }
window.dino-main .dino-conversation .message-box.highlight { window.dino-main .dino-conversation .message-box.highlight {
background: alpha(@theme_fg_color, 0.04); background: @window_bg_color;
} }
window.dino-main .dino-conversation .message-box { window.dino-main .dino-conversation .message-box {
@ -92,11 +92,6 @@ window.dino-main .dino-sidebar > frame {
transition: background .05s ease; transition: background .05s ease;
} }
window.dino-main .circular-button {
padding: 0;
border-radius: 1000px;
}
window.dino-main .dino-conversation .message-box.edit-mode { window.dino-main .dino-conversation .message-box.edit-mode {
background: alpha(@theme_selected_bg_color, 0.1); background: alpha(@theme_selected_bg_color, 0.1);
} }
@ -124,17 +119,17 @@ window.dino-main .dino-quote:hover {
background: alpha(@theme_fg_color, 0.08); background: alpha(@theme_fg_color, 0.08);
} }
/* Message Menu */ /* Overlay Toolbar */
.message-menu-box { .dino-main .overlay-toolbar {
background-color: @theme_base_color; padding: 2px;
border: 1px solid alpha(@theme_fg_color, 0.15); border-radius: 6px;
border-radius: 5px; border-spacing: 0;
} }
.message-menu-button { .dino-main .overlay-toolbar > * {
padding: 6px; margin-top: 0;
border: none; margin-bottom: 0;
} }
/* Fie Widget */ /* Fie Widget */
@ -189,38 +184,23 @@ window.dino-main .multiparty-participants {
/* Reactions */ /* Reactions */
window.dino-main menubutton.reaction-box image { .dino-main .reaction-grid button {
margin-left: 5px; min-height: 16px;
margin-right: 5px; min-width: 30px;
padding: 4px;
} }
window.dino-main button.reaction-box, .dino-main .reaction-grid button.own-reaction,
window.dino-main menubutton.reaction-box > button { .dino-main .reaction-grid .own-reaction button {
border: 1px solid transparent; background-color: alpha(@accent_bg_color, 0.1);
padding: 3px 5px ; border: 1px solid @accent_bg_color;
border-radius: 10px; padding: 3px;
background-color: alpha(@theme_fg_color, 0.07); color: @accent_color;
background-image: none;
box-shadow: none;
min-height: 0;
min-width: 0;
} }
window.dino-main button.reaction-box.own-reaction, .dino-main .reaction-grid button.own-reaction:hover,
window.dino-main menubutton.reaction-box.own-reaction > button { .dino-main .reaction-grid .own-reaction button:hover {
color: mix(@theme_selected_bg_color, @theme_fg_color, 0.4); background-color: alpha(@accent_bg_color, 0.2);
border-color: @theme_selected_bg_color;
background-color: alpha(@theme_selected_bg_color, 0.05);
}
window.dino-main button.reaction-box:hover,
window.dino-main menubutton.reaction-box:hover > button {
background-color: alpha(@theme_fg_color, 0.1);
}
window.dino-main button.reaction-box.own-reaction:hover,
window.dino-main menubutton.reaction-box.own-reaction > button {
background-color: alpha(@theme_selected_bg_color, 0.2);
} }
/* Sidebar */ /* Sidebar */

View file

@ -33,10 +33,6 @@ public class Dino.Ui.Application : Adw.Application, Dino.Application {
Environment.set_application_name("Dino"); Environment.set_application_name("Dino");
Window.set_default_icon_name("im.dino.Dino"); Window.set_default_icon_name("im.dino.Dino");
CssProvider provider = new CssProvider();
provider.load_from_resource("/im/dino/Dino/theme.css");
StyleContext.add_provider_for_display(Gdk.Display.get_default(), provider, STYLE_PROVIDER_PRIORITY_APPLICATION);
create_actions(); create_actions();
add_main_option_entries(options); add_main_option_entries(options);

View file

@ -9,6 +9,7 @@ namespace Dino.Ui.ConversationSummary {
[GtkTemplate (ui = "/im/dino/Dino/conversation_content_view/view.ui")] [GtkTemplate (ui = "/im/dino/Dino/conversation_content_view/view.ui")]
public class ConversationView : Widget, Plugins.ConversationItemCollection, Plugins.NotificationCollection { public class ConversationView : Widget, Plugins.ConversationItemCollection, Plugins.NotificationCollection {
private const int MESSAGE_MENU_BOX_OFFSET = -20;
public Conversation? conversation { get; private set; } public Conversation? conversation { get; private set; }
@ -173,7 +174,7 @@ public class ConversationView : Widget, Plugins.ConversationItemCollection, Plug
currently_highlighted.add_css_class("highlight"); currently_highlighted.add_css_class("highlight");
// Move message menu // Move message menu
message_menu_box.margin_top = (int)(widget_y - 10); message_menu_box.margin_top = (int)(widget_y + MESSAGE_MENU_BOX_OFFSET);
} }
} }

View file

@ -123,9 +123,10 @@ public class ReactionsWidget : Grid {
public ReactionsWidget() { public ReactionsWidget() {
this.row_spacing = this.column_spacing = 5; this.row_spacing = this.column_spacing = 5;
this.margin_top = 2; this.margin_top = 2;
this.add_css_class("reaction-grid");
add_button = new MenuButton() { tooltip_text= _("Add reaction") }; add_button = new MenuButton() { tooltip_text= _("Add reaction") };
add_button.get_style_context().add_class("reaction-box"); add_button.add_css_class("pill");
Util.menu_button_set_icon_with_size(add_button, "dino-emoticon-add-symbolic", 14); Util.menu_button_set_icon_with_size(add_button, "dino-emoticon-add-symbolic", 14);
EmojiChooser chooser = new EmojiChooser(); EmojiChooser chooser = new EmojiChooser();
@ -140,8 +141,8 @@ public class ReactionsWidget : Grid {
Label reaction_label = new Label("<span size='small'>" + reaction + "</span>") { use_markup=true }; Label reaction_label = new Label("<span size='small'>" + reaction + "</span>") { use_markup=true };
Label count_label = new Label("") { use_markup=true }; Label count_label = new Label("") { use_markup=true };
Button button = new Button(); Button button = new Button();
button.get_style_context().add_class("reaction-box"); button.add_css_class("pill");
Box reaction_box = new Box(Orientation.HORIZONTAL, 4); Box reaction_box = new Box(Orientation.HORIZONTAL, 4) { halign=Align.CENTER };
reaction_box.append(reaction_label); reaction_box.append(reaction_label);
reaction_box.append(count_label); reaction_box.append(count_label);
button.set_child(reaction_box); button.set_child(reaction_box);
@ -161,9 +162,9 @@ public class ReactionsWidget : Grid {
reaction_counts[reaction].label = "<span font_family='monospace' size='small'>" + count.to_string() + "</span>"; reaction_counts[reaction].label = "<span font_family='monospace' size='small'>" + count.to_string() + "</span>";
if (own) { if (own) {
reaction_buttons[reaction].get_style_context().add_class("own-reaction"); reaction_buttons[reaction].add_css_class("own-reaction");
} else { } else {
reaction_buttons[reaction].get_style_context().remove_class("own-reaction"); reaction_buttons[reaction].remove_css_class("own-reaction");
} }
// Build tooltip // Build tooltip