aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMarvin W <git@larma.de>2023-01-08 21:40:09 +0100
committerMarvin W <git@larma.de>2023-01-24 19:21:25 +0100
commit99d9cb383abb1a33f6d0572deb4292dbf358f3ce (patch)
tree187b30814b296d8d3e0613b300565cdd10d41927
parent6a182ba313026b93d54a9d2246a0ab68894c6833 (diff)
downloaddino-99d9cb383abb1a33f6d0572deb4292dbf358f3ce.tar.gz
dino-99d9cb383abb1a33f6d0572deb4292dbf358f3ce.zip
Small UI fixes for libAdwaita
-rw-r--r--main/CMakeLists.txt3
-rw-r--r--main/data/conversation_content_view/view.ui4
-rw-r--r--main/data/conversation_row.ui2
-rw-r--r--main/data/conversation_view.ui3
-rw-r--r--main/data/style-dark.css3
-rw-r--r--main/data/style.css (renamed from main/data/theme.css)64
-rw-r--r--main/src/ui/application.vala4
-rw-r--r--main/src/ui/conversation_content_view/conversation_view.vala3
-rw-r--r--main/src/ui/conversation_content_view/reactions_widget.vala11
9 files changed, 41 insertions, 56 deletions
diff --git a/main/CMakeLists.txt b/main/CMakeLists.txt
index de5f2667..363b4185 100644
--- a/main/CMakeLists.txt
+++ b/main/CMakeLists.txt
@@ -90,7 +90,8 @@ set(RESOURCE_LIST
unified_main_content.ui
unified_window_placeholder.ui
- theme.css
+ style.css
+ style-dark.css
)
compile_gresources(
diff --git a/main/data/conversation_content_view/view.ui b/main/data/conversation_content_view/view.ui
index f6819b94..3415e6c9 100644
--- a/main/data/conversation_content_view/view.ui
+++ b/main/data/conversation_content_view/view.ui
@@ -31,7 +31,9 @@
<property name="halign">end</property>
<property name="valign">start</property>
<style>
- <class name="linked"/>
+ <class name="card"/>
+ <class name="toolbar"/>
+ <class name="overlay-toolbar"/>
</style>
</object>
</child>
diff --git a/main/data/conversation_row.ui b/main/data/conversation_row.ui
index 7be699ba..2eb9071b 100644
--- a/main/data/conversation_row.ui
+++ b/main/data/conversation_row.ui
@@ -144,7 +144,7 @@
<property name="margin-start">5</property>
<style>
<class name="conversation_list_row_xbutton"/>
- <class name="circular-button"/>
+ <class name="circular"/>
<class name="flat"/>
</style>
<child>
diff --git a/main/data/conversation_view.ui b/main/data/conversation_view.ui
index f13e583d..6e24f4b5 100644
--- a/main/data/conversation_view.ui
+++ b/main/data/conversation_view.ui
@@ -31,7 +31,8 @@
<property name="halign">end</property>
<property name="valign">end</property>
<style>
- <class name="circular-button"/>
+ <class name="circular"/>
+ <class name="opaque"/>
</style>
<child>
<object class="GtkImage">
diff --git a/main/data/style-dark.css b/main/data/style-dark.css
new file mode 100644
index 00000000..3bd0add0
--- /dev/null
+++ b/main/data/style-dark.css
@@ -0,0 +1,3 @@
+.dino-main .overlay-toolbar {
+ background-color: shade(@view_bg_color, 1.5);
+} \ No newline at end of file
diff --git a/main/data/theme.css b/main/data/style.css
index 6b93bc8f..63d0a606 100644
--- a/main/data/theme.css
+++ b/main/data/style.css
@@ -43,7 +43,7 @@ window.dino-main .dino-conversation .highlight-once {
}
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 {
@@ -92,11 +92,6 @@ window.dino-main .dino-sidebar > frame {
transition: background .05s ease;
}
-window.dino-main .circular-button {
- padding: 0;
- border-radius: 1000px;
-}
-
window.dino-main .dino-conversation .message-box.edit-mode {
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);
}
-/* Message Menu */
+/* Overlay Toolbar */
-.message-menu-box {
- background-color: @theme_base_color;
- border: 1px solid alpha(@theme_fg_color, 0.15);
- border-radius: 5px;
+.dino-main .overlay-toolbar {
+ padding: 2px;
+ border-radius: 6px;
+ border-spacing: 0;
}
-.message-menu-button {
- padding: 6px;
- border: none;
+.dino-main .overlay-toolbar > * {
+ margin-top: 0;
+ margin-bottom: 0;
}
/* Fie Widget */
@@ -189,38 +184,23 @@ window.dino-main .multiparty-participants {
/* Reactions */
-window.dino-main menubutton.reaction-box image {
- margin-left: 5px;
- margin-right: 5px;
-}
-
-window.dino-main button.reaction-box,
-window.dino-main menubutton.reaction-box > button {
- border: 1px solid transparent;
- padding: 3px 5px ;
- border-radius: 10px;
- background-color: alpha(@theme_fg_color, 0.07);
- background-image: none;
- box-shadow: none;
- min-height: 0;
- min-width: 0;
-}
-
-window.dino-main button.reaction-box.own-reaction,
-window.dino-main menubutton.reaction-box.own-reaction > button {
- color: mix(@theme_selected_bg_color, @theme_fg_color, 0.4);
- border-color: @theme_selected_bg_color;
- background-color: alpha(@theme_selected_bg_color, 0.05);
+.dino-main .reaction-grid button {
+ min-height: 16px;
+ min-width: 30px;
+ padding: 4px;
}
-window.dino-main button.reaction-box:hover,
-window.dino-main menubutton.reaction-box:hover > button {
- background-color: alpha(@theme_fg_color, 0.1);
+.dino-main .reaction-grid button.own-reaction,
+.dino-main .reaction-grid .own-reaction button {
+ background-color: alpha(@accent_bg_color, 0.1);
+ border: 1px solid @accent_bg_color;
+ padding: 3px;
+ color: @accent_color;
}
-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);
+.dino-main .reaction-grid button.own-reaction:hover,
+.dino-main .reaction-grid .own-reaction button:hover {
+ background-color: alpha(@accent_bg_color, 0.2);
}
/* Sidebar */
diff --git a/main/src/ui/application.vala b/main/src/ui/application.vala
index 8e252dc6..6f0fdf62 100644
--- a/main/src/ui/application.vala
+++ b/main/src/ui/application.vala
@@ -33,10 +33,6 @@ public class Dino.Ui.Application : Adw.Application, Dino.Application {
Environment.set_application_name("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();
add_main_option_entries(options);
diff --git a/main/src/ui/conversation_content_view/conversation_view.vala b/main/src/ui/conversation_content_view/conversation_view.vala
index 70115512..5481cfc5 100644
--- a/main/src/ui/conversation_content_view/conversation_view.vala
+++ b/main/src/ui/conversation_content_view/conversation_view.vala
@@ -9,6 +9,7 @@ namespace Dino.Ui.ConversationSummary {
[GtkTemplate (ui = "/im/dino/Dino/conversation_content_view/view.ui")]
public class ConversationView : Widget, Plugins.ConversationItemCollection, Plugins.NotificationCollection {
+ private const int MESSAGE_MENU_BOX_OFFSET = -20;
public Conversation? conversation { get; private set; }
@@ -173,7 +174,7 @@ public class ConversationView : Widget, Plugins.ConversationItemCollection, Plug
currently_highlighted.add_css_class("highlight");
// Move message menu
- message_menu_box.margin_top = (int)(widget_y - 10);
+ message_menu_box.margin_top = (int)(widget_y + MESSAGE_MENU_BOX_OFFSET);
}
}
diff --git a/main/src/ui/conversation_content_view/reactions_widget.vala b/main/src/ui/conversation_content_view/reactions_widget.vala
index 890c1206..fe465676 100644
--- a/main/src/ui/conversation_content_view/reactions_widget.vala
+++ b/main/src/ui/conversation_content_view/reactions_widget.vala
@@ -123,9 +123,10 @@ public class ReactionsWidget : Grid {
public ReactionsWidget() {
this.row_spacing = this.column_spacing = 5;
this.margin_top = 2;
+ this.add_css_class("reaction-grid");
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);
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 count_label = new Label("") { use_markup=true };
Button button = new Button();
- button.get_style_context().add_class("reaction-box");
- Box reaction_box = new Box(Orientation.HORIZONTAL, 4);
+ button.add_css_class("pill");
+ Box reaction_box = new Box(Orientation.HORIZONTAL, 4) { halign=Align.CENTER };
reaction_box.append(reaction_label);
reaction_box.append(count_label);
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>";
if (own) {
- reaction_buttons[reaction].get_style_context().add_class("own-reaction");
+ reaction_buttons[reaction].add_css_class("own-reaction");
} else {
- reaction_buttons[reaction].get_style_context().remove_class("own-reaction");
+ reaction_buttons[reaction].remove_css_class("own-reaction");
}
// Build tooltip