Commit 9adee7c9 authored by Nico's avatar Nico
Browse files

Make multi-line input beautiful

Crediting Dino.im for their work.

What's still needed is to only activate the scrollbar of the input when
it's needed. Otherwise the input gets too big.
https://github.com/dino/dino/blob/231df1/main/src/ui/chat_input/chat_text_view.vala#L51
Related to #71
parent 6b9f691c
......@@ -202,6 +202,8 @@ class PrivateChatPresenter:
self._chat_entry_signal_id = chat_entry.connect(
"key-press-event", self._on_chat_entry_activate
)
# TODO: Activate vscrollbar only if needed (to save space)
# https://github.com/dino/dino/blob/231df1/main/src/ui/chat_input/chat_text_view.vala#L51
chat_entry.grab_focus()
@staticmethod
......
......@@ -55,6 +55,7 @@ class AboutDialogWidget():
code_use_list = [
"GNOME Fractal https://wiki.gnome.org/Apps/Fractal",
"GNOME Lollypop https://wiki.gnome.org/Apps/Lollypop",
"Dino https://dino.im/",
]
self._about_dialog.add_credit_section(
code_use_title, code_use_list
......
......@@ -5,6 +5,8 @@
Based on parts of GNOME Fractal
https://gitlab.gnome.org/GNOME/fractal/blob/4.2.2/fractal-gtk/res/app.css
and Dino
https://github.com/dino/dino/blob/v0.2.0/main/data/theme.css
**/
/** Dialog like windows **/
......@@ -15,13 +17,21 @@
/** Main window **/
.chat-view {
background-color: @theme_base_color;
}
.chat-view frame border {
border-radius: 4px;
}
.messages-box {
background-color: @theme_base_color;
}
.messages-history {
background-color: @theme_base_color;
padding: 0 4px 4px;
padding: 0 4px 0;
}
.history-view {
......@@ -37,18 +47,23 @@
-gtk-outline-radius: 9999px;
}
.message-input-area {
padding: 6px;
.message-input-button {
border: none;
background: transparent;
box-shadow: none;
min-height: 0;
min-width: 24px;
padding: 7px 5px;
color: alpha(@theme_fg_color, 0.7);
outline: none;
}
.message-input-focused {
border: 2px solid #1f78d1;
padding: 5px;
.message-input-button:hover {
color: @theme_selected_bg_color;
}
.messages-scroll {
background-color: @theme_base_color;
border-bottom: 1px solid @borders;
}
.chat-placeholder-title {
......
......@@ -6,6 +6,8 @@
Based on parts of GNOME Fractal
https://gitlab.gnome.org/GNOME/fractal/blob/4.2.2/fractal-gtk/res/ui/main_window.ui
and Dino
https://github.com/dino/dino/blob/v0.2.0/main/data/theme.css
-->
<interface>
<requires lib="gtk+" version="3.22"/>
......@@ -117,66 +119,89 @@
<property name="tightening_threshold">600</property>
<property name="hexpand">True</property>
<child>
<object class="GtkBox">
<object class="GtkFrame">
<property name="visible">True</property>
<property name="margin">14</property>
<child>
<object class="GtkButton" id="entry_emoji_button">
<object class="GtkBox">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="action_name">win.open-emoji-menu</property>
<child>
<object class="GtkImage">
<object class="GtkButton" id="entry_emoji_button">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">face-smile-symbolic</property>
</object>
</child>
<accessibility>
<property name="margin-top">3</property>
<property name="margin-bottom">3</property>
<property name="vexpand">False</property>
<property name="valign">start</property>
<property name="relief">none</property>
<property name="action_name">win.open-emoji-menu</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">face-smile-symbolic</property>
</object>
</child>
<accessibility>
</accessibility>
<child internal-child="accessible">
<object class="AtkObject" id="a11y-entry_emoji_button">
<property name="AtkObject::accessible_name" translatable="yes">Show emojis</property>
</accessibility>
<child internal-child="accessible">
<object class="AtkObject" id="a11y-entry_emoji_button">
<property name="AtkObject::accessible_name" translatable="yes">Show emojis</property>
</object>
</child>
<style>
<class name="message-input-button" />
</style>
</object>
</child>
</object>
</child>
<child>
<object class="GtkScrolledWindow">
<property name="visible">True</property>
<property name="hexpand">True</property>
<property name="shadow_type">in</property>
<property name="border_width">3</property>
<child>
<object class="GtkTextView" id="chat_entry">
<object class="GtkScrolledWindow">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="wrap_mode">word-char</property>
<property name="propagate_natural_height">True</property>
<property name="max_content_height">300</property>
<child>
<object class="GtkTextView" id="chat_entry">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="hexpand">True</property>
<property name="valign">center</property>
<property name="wrap_mode">word-char</property>
</object>
</child>
<style>
<class name="message-input-area" />
</style>
</object>
</child>
<style>
<class name="message-input-area" />
</style>
</object>
</child>
<child>
<object class="GtkButton" id="entry_send_button">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="action_name">win.send-message</property>
<child>
<object class="GtkImage">
<object class="GtkButton" id="entry_send_button">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">media-playback-start</property>
</object>
</child>
<accessibility>
<property name="margin-top">3</property>
<property name="margin-bottom">3</property>
<property name="vexpand">False</property>
<property name="valign">start</property>
<property name="relief">none</property>
<property name="action_name">win.send-message</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">media-playback-start</property>
</object>
</child>
<accessibility>
</accessibility>
<child internal-child="accessible">
<object class="AtkObject" id="a11y-entry_send_button">
<property name="AtkObject::accessible_name" translatable="yes">Send</property>
</accessibility>
<child internal-child="accessible">
<object class="AtkObject" id="a11y-entry_send_button">
<property name="AtkObject::accessible_name" translatable="yes">Send</property>
</object>
</child>
<style>
<class name="message-input-button" />
</style>
</object>
</child>
</object>
......@@ -185,6 +210,9 @@
</child>
</object>
</child>
<style>
<class name="chat-view" />
</style>
</object>
<packing>
<property name="expand">True</property>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment