client: Ensure accounts dialog fits on small display devices

- 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

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/>

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>

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>

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;