nettika/geary
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

client: Ensure accounts dialog fits on small display devices

Browse source 
- Replace ellipsizing by wrapping
- Switch to vertical boxing if not enough space
- Fix welcome dialog
This commit is contained in:
Cédric Bellegarde 2023-08-21 11:22:36 +02:00
parent 88a31454d8
commit 42cb76282e
8 changed files with 106 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/client/accounts/accounts-editor-edit-pane.vala
View file

@ -389,7 +389,8 @@ private class Accounts.MailboxRow : AccountRow<EditorEditPane,Gtk.Label> {
public MailboxRow(Geary.AccountInformation account,
Geary.RFC822.MailboxAddress mailbox) {
var label = new Gtk.Label("");
label.ellipsize = Pango.EllipsizeMode.END;
label.set_line_wrap_mode(Pango.WrapMode.WORD_CHAR);
label.set_line_wrap(true);
base(account, "", label);
this.mailbox = mailbox;
enable_drag();

3
src/client/accounts/accounts-editor-list-pane.vala
View file

@ -276,7 +276,8 @@ private class Accounts.AccountListRow : AccountRow<EditorListPane,Gtk.Grid> {
this.value.add(this.unavailable_icon);
this.value.add(this.service_label);
this.service_label.set_ellipsize(Pango.EllipsizeMode.END);
this.service_label.set_line_wrap_mode(Pango.WrapMode.WORD_CHAR);
this.service_label.set_line_wrap(true);
this.service_label.show();
this.account.changed.connect(on_account_changed);

73
src/client/accounts/accounts-editor-row.vala
View file

@ -14,7 +14,10 @@ internal class Accounts.EditorRow<PaneType> : Gtk.ListBoxRow {
};
protected Gtk.Grid layout { get; private set; default = new Gtk.Grid(); }
protected Gtk.Box layout {
get;
private set;
default = new Gtk.Box(Gtk.Orientation.HORIZONTAL, 5); }
private Gtk.Container drag_handle;
private bool drag_picked_up = false;
@ -26,13 +29,10 @@ internal class Accounts.EditorRow<PaneType> : Gtk.ListBoxRow {
public EditorRow() {
get_style_context().add_class("geary-settings");
get_style_context().add_class("geary-labelled-row");
this.layout.orientation = Gtk.Orientation.HORIZONTAL;
this.layout.show();
add(this.layout);
// We'd like to add the drag handle only when needed, but
// GNOME/gtk#1495 prevents us from doing so.
Gtk.EventBox drag_box = new Gtk.EventBox();
@ -48,9 +48,25 @@ internal class Accounts.EditorRow<PaneType> : Gtk.ListBoxRow {
this.drag_handle.hide();
// Translators: Tooltip for dragging list items
this.drag_handle.set_tooltip_text(_("Drag to move this item"));
this.layout.add(drag_handle);
var box = new Gtk.Box(Gtk.Orientation.HORIZONTAL, 5);
box.add(drag_handle);
box.add(this.layout);
box.show();
add(box);
this.layout.show();
this.show();
this.size_allocate.connect((allocation) => {
if (allocation.width < 500) {
if (this.layout.orientation == Gtk.Orientation.HORIZONTAL) {
this.layout.orientation = Gtk.Orientation.VERTICAL;
}
} else if (this.layout.orientation == Gtk.Orientation.VERTICAL) {
this.layout.orientation = Gtk.Orientation.HORIZONTAL;
}
});
}
public virtual void activated(PaneType pane) {
@ -216,8 +232,10 @@ internal class Accounts.LabelledEditorRow<PaneType,V> : EditorRow<PaneType> {
public LabelledEditorRow(string label, V value) {
this.label.halign = Gtk.Align.START;
this.label.valign = Gtk.Align.CENTER;
this.label.hexpand = true;
this.label.set_text(label);
this.label.set_ellipsize(Pango.EllipsizeMode.END);
this.label.set_line_wrap_mode(Pango.WrapMode.WORD_CHAR);
this.label.set_line_wrap(true);
this.label.show();
this.layout.add(this.label);
@ -228,10 +246,15 @@ internal class Accounts.LabelledEditorRow<PaneType,V> : EditorRow<PaneType> {
Gtk.Entry? entry = value as Gtk.Entry;
if (entry != null) {
expand_label = false;
entry.xalign = 1;
entry.hexpand = true;
}
Gtk.Label? vlabel = value as Gtk.Label;
if (vlabel != null) {
vlabel.set_line_wrap_mode(Pango.WrapMode.WORD_CHAR);
vlabel.set_line_wrap(true);
}
widget.halign = Gtk.Align.START;
widget.valign = Gtk.Align.CENTER;
widget.show();
this.layout.add(widget);
@ -499,6 +522,7 @@ internal class Accounts.TlsComboBox : Gtk.ComboBox {
set_id_column(0);
Gtk.CellRendererText text_renderer = new Gtk.CellRendererText();
text_renderer.ellipsize = Pango.EllipsizeMode.END;
pack_start(text_renderer, true);
add_attribute(text_renderer, "text", 2);
@ -510,7 +534,7 @@ internal class Accounts.TlsComboBox : Gtk.ComboBox {
}
internal class Accounts.OutgoingAuthComboBox : Gtk.ComboBoxText {
internal class Accounts.OutgoingAuthComboBox : Gtk.ComboBox {
public string label { get; private set; }
@ -535,29 +559,54 @@ internal class Accounts.OutgoingAuthComboBox : Gtk.ComboBoxText {
// account
this.label = _("Login");
append(
Gtk.ListStore store = new Gtk.ListStore(
2, typeof(string), typeof(string)
);
Gtk.TreeIter iter;
store.append(out iter);
store.set(
iter,
0,
Geary.Credentials.Requirement.NONE.to_value(),
1,
// Translators: ComboBox value for source of SMTP
// authentication credentials (none) when adding a new
// account
_("No login needed")
);
append(
store.append(out iter);
store.set(
iter,
0,
Geary.Credentials.Requirement.USE_INCOMING.to_value(),
1,
// Translators: ComboBox value for source of SMTP
// authentication credentials (use IMAP) when adding a new
// account
_("Use same login as receiving")
);
append(
store.append(out iter);
store.set(
iter,
0,
Geary.Credentials.Requirement.CUSTOM.to_value(),
1,
// Translators: ComboBox value for source of SMTP
// authentication credentials (custom) when adding a new
// account
_("Use a different login")
);
this.model = store;
set_id_column(0);
Gtk.CellRendererText text_renderer = new Gtk.CellRendererText();
text_renderer.ellipsize = Pango.EllipsizeMode.END;
pack_start(text_renderer, true);
add_attribute(text_renderer, "text", 1);
}
}

8
src/client/accounts/accounts-editor.vala
View file

@ -78,6 +78,14 @@ public class Accounts.Editor : Gtk.Dialog {
push(this.editor_list_pane);
update_command_actions();
if (this.accounts.size > 1) {
this.default_height = 650;
this.default_width = 800;
} else {
// Welcome dialog
this.default_width = 600;
}
}
public override bool key_press_event(Gdk.EventKey event) {

2
ui/accounts_editor.ui
View file

@ -4,8 +4,6 @@
<requires lib="gtk+" version="3.20"/>
<template class="AccountsEditor" parent="GtkDialog">
<property name="modal">True</property>
<property name="default_width">800</property>
<property name="default_height">650</property>
<property name="type_hint">dialog</property>
<child type="titlebar">
<placeholder/>

44
ui/accounts_editor_edit_pane.ui
View file

@ -220,7 +220,27 @@
<child>
<object class="GtkButtonBox">
<property name="visible">True</property>
<property name="layout_style">end</property>
<child>
<object class="GtkButton" id="remove_button">
<property name="visible">True</property>
<property name="receives_default">False</property>
<property name="tooltip_text" translatable="yes">Remove this account from Geary</property>
<signal name="clicked" handler="on_remove_account_clicked" swapped="no"/>
<style>
<class name="destructive-action"/>
</style>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="icon_name">user-trash-symbolic</property>
</object>
</child>"
</object>
<packing>
<property name="pack_type">end</property>
<property name="secondary">True</property>
</packing>
</child>"
<child>
<object class="GtkButton">
<property name="label" translatable="yes" comments="This is a button in the account settings to show server settings.">Server Settings</property>
@ -231,27 +251,7 @@
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="pack_type">end</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkButton" id="remove_button">
<property name="label" translatable="yes" comments="This is the remove account button in the account settings.">Remove Account</property>
<property name="visible">True</property>
<property name="receives_default">False</property>
<property name="tooltip_text" translatable="yes">Remove this account from Geary</property>
<signal name="clicked" handler="on_remove_account_clicked" swapped="no"/>
<style>
<class name="destructive-action"/>
</style>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="pack_type">end</property>
<property name="position">1</property>
<property name="secondary">True</property>
<property name="pack_type">start</property>
</packing>
</child>
<style>

8
ui/accounts_editor_list_pane.ui
View file

@ -35,7 +35,7 @@
<property name="vexpand">True</property>
<property name="vadjustment">pane_adjustment</property>
<property name="hscrollbar_policy">never</property>
<property name="min_content_height">400</property>
<property name="min_content_height">300</property>
<child>
<object class="GtkViewport">
<property name="visible">True</property>
@ -50,11 +50,13 @@
<object class="GtkGrid" id="welcome_panel">
<property name="visible">True</property>
<property name="halign">center</property>
<property name="valign">center</property>
<property name="vexpand">True</property>
<property name="column_spacing">12</property>
<child>
<object class="GtkImage" id="welcome_icon">
<property name="visible">True</property>
<property name="pixel_size">64</property>
<property name="pixel_size">128</property>
<property name="use_fallback">True</property>
</object>
<packing>
@ -69,7 +71,7 @@
<property name="halign">start</property>
<property name="valign">start</property>
<property name="wrap">True</property>
<property name="label" translatable="yes">To get started, select an email provider below.</property>
<property name="label" translatable="yes">To get started, add an email provider above.</property>
<property name="xalign">0</property>
<property name="wrap">True</property>
</object>

26
ui/geary.css
View file

@ -386,33 +386,23 @@ row.geary-labelled-row {
padding: 0px;
}
row.geary-labelled-row > grid > * {
row.geary-labelled-row > box > box {
margin: 18px 6px;
}
row.geary-labelled-row > grid > *:first-child:dir(ltr),
row.geary-labelled-row > grid > *:last-child:dir(rtl) {
margin-left: 18px;
}
row.geary-labelled-row > grid > *:last-child:dir(ltr),
row.geary-labelled-row > grid > *:first-child:dir(rtl) {
margin-right: 18px;
}
/* Images should have some padding to offset them from adjacent
widgets, but care ust be taken since images are also used as children
of other widgets like entries, comboboxes and switches, and these
shouldn't be be touched. */
row.geary-labelled-row widget > image,
row.geary-labelled-row grid > image {
row.geary-labelled-row box > box > image {
padding: 0px 6px;
}
row.geary-labelled-row > grid > combobox,
row.geary-labelled-row > grid > entry,
row.geary-labelled-row:not(.geary-add-row) > grid > image,
row.geary-labelled-row > grid > switch {
row.geary-labelled-row > box > box > combobox,
row.geary-labelled-row > box > box > entry,
row.geary-labelled-row:not(.geary-add-row) > box > image,
row.geary-labelled-row > box > box > switch {
/* These use more space than labels, so set their valign to center
when adding them and free up some space around them here to keep a
consistent row height. */
@ -428,10 +418,6 @@ grid.geary-account-view image:dir(rtl) {
margin-left: 6px;
}
grid.geary-welcome-panel {
margin-bottom: 32px;
}
label.geary-settings-heading {
font-weight: bold;
margin-top: 24px;