Small UI fixes for libAdwaita
This commit is contained in:
parent
6a182ba313
commit
99d9cb383a
|
@ -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(
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
3
main/data/style-dark.css
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
.dino-main .overlay-toolbar {
|
||||||
|
background-color: shade(@view_bg_color, 1.5);
|
||||||
|
}
|
|
@ -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 */
|
|
@ -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);
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue