sheet,editor: stack the name and avatar vertically

Fixes: https://gitlab.gnome.org/GNOME/gnome-contacts/-/issues/252

4 files changed, 46 insertions, 46 deletions

diff --git a/data/style.css b/data/style.css
index 6593344..4c9efaa 100644
--- a/data/style.css
+++ b/data/style.css
@@ -43,7 +43,12 @@
 
 .contacts-sheet-container,
 .contacts-contact-editor-container {
-  margin: 36px 12px 24px 12px;
+  margin: 24px 12px 24px 12px;
+}
+
+.contacts-sheet-header,
+.contacts-editor-header {
+  margin: 0 0 12px 0;
 }
 
 .contacts-sheet-property,
@@ -57,10 +62,6 @@
 .contacts-sheet {
 }
 
-.contacts-sheet-header {
-  margin: 0 0 12px 0;
-}
-
 .contacts-sheet-property {
 }
 
@@ -68,6 +69,12 @@
 /* Contact Editor-related CSS classes */
 /* ---------------------------------- */
 
+.contacts-editor-header-name {
+  /* The name in the sheet gets some margin from .title-1,
+   * so do something similar here to prevent the name "jumping" */
+  margin: 6px 0;
+}
+
 /* Common class for all widgets editing a property  */
 .contacts-editor-property {
 }
@@ -99,4 +106,3 @@
 .favorite-button {
   font-weight: normal;
 }
-
diff --git a/src/contacts-chunk-sorter.vala b/src/contacts-chunk-sorter.vala
index e47f440..86e1b58 100644
--- a/src/contacts-chunk-sorter.vala
+++ b/src/contacts-chunk-sorter.vala
@@ -25,6 +25,8 @@ public class Contacts.ChunkSorter : Gtk.Sorter {
   private PersonaSorter persona_sorter = new PersonaSorter ();
 
   private const string[] SORTED_PROPERTIES = {
+    "avatar",
+    "full-name",
     "email-addresses",
     "phone-numbers",
     "im-addresses",
diff --git a/src/contacts-contact-editor.vala b/src/contacts-contact-editor.vala
index 3383472..b1f0925 100644
--- a/src/contacts-contact-editor.vala
+++ b/src/contacts-contact-editor.vala
@@ -30,26 +30,19 @@ public class Contacts.ContactEditor : Gtk.Widget {
   /** The set of distinct personas (or null) that are part of the contact */
   private GenericArray<Persona?> personas = new GenericArray<Persona?> ();
 
-  private unowned Gtk.Entry name_entry;
-
   construct {
     var box_layout = new Gtk.BoxLayout (Gtk.Orientation.VERTICAL);
     box_layout.spacing = 12;
     set_layout_manager (box_layout);
 
     add_css_class ("contacts-contact-editor");
+
+    contact.items_changed.connect (on_contact_items_changed);
+    on_contact_items_changed (contact, 0, 0, contact.get_n_items ());
   }
 
   public ContactEditor (Contact contact) {
     Object (contact: contact);
-
-    var header = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 12);
-    header.append (new EditableAvatar (contact, PROFILE_SIZE));
-    header.append (create_name_entry (contact));
-    header.set_parent (this);
-
-    contact.items_changed.connect (on_contact_items_changed);
-    on_contact_items_changed (contact, 0, 0, contact.get_n_items ());
   }
 
   public override void dispose () {
@@ -87,26 +80,6 @@ public class Contacts.ContactEditor : Gtk.Widget {
     // they're still editing
   }
 
-  // Creates the big name entry on the top
-  private Gtk.Widget create_name_entry (Contact contact) {
-    var entry = new Gtk.Entry ();
-    this.name_entry = entry;
-    this.name_entry.hexpand = true;
-    this.name_entry.valign = Gtk.Align.CENTER;
-    this.name_entry.input_purpose = Gtk.InputPurpose.NAME;
-    this.name_entry.placeholder_text = _("Add name");
-
-    var fn_chunk = (FullNameChunk?) contact.get_most_relevant_chunk ("full-name", true);
-    if (fn_chunk == null) {
-      warning ("Contact doesn't have a 'full-name' chunk");
-      return null;
-    }
-
-    fn_chunk.bind_property ("full-name", this.name_entry, "text",
-                            BindingFlags.SYNC_CREATE | BindingFlags.BIDIRECTIONAL);
-    return this.name_entry;
-  }
-
   private Gtk.Label create_persona_store_label (Persona p) {
     var store_name = new Gtk.Label (Utils.format_persona_store_name_for_contact (p));
     var attrList = new Pango.AttrList ();
@@ -130,14 +103,16 @@ public class Contacts.PersonaEditor : Gtk.Widget {
   private ListModel model;
 
   public const string[] IMPORTANT_PROPERTIES = {
+    "avatar",
+    "full-name",
     "email-addresses",
     "phone-numbers",
     null
   };
 
   public const string[] SUPPORTED_PROPERTIES = {
-    // Note that we don't add full-name and avatar here,
-    // since they're handled separately
+    "avatar",
+    "full-name",
     "birthday",
     "email-addresses",
     "nickname",
@@ -267,15 +242,15 @@ public class Contacts.PersonaEditor : Gtk.Widget {
 
   private Gtk.Widget? create_widget_for_chunk (Chunk chunk) {
     switch (chunk.property_name) {
-      case "avatar":
-      case "full-name":
-        return null; // Added separately in the header
-
       // Please keep these sorted
+      case "avatar":
+        return create_widget_for_avatar (chunk);
       case "birthday":
         return create_widget_for_birthday (chunk);
       case "email-addresses":
         return create_widget_for_emails (chunk);
+      case "full-name":
+        return create_widget_for_full_name (chunk);
       case "nickname":
         return create_widget_for_nickname (chunk);
       case "notes":
@@ -294,6 +269,14 @@ public class Contacts.PersonaEditor : Gtk.Widget {
     }
   }
 
+  private Gtk.Widget create_widget_for_avatar (Chunk chunk)
+      requires (chunk is AvatarChunk) {
+    var avatar = new EditableAvatar (contact, PROFILE_SIZE);
+    avatar.halign = Gtk.Align.CENTER;
+    avatar.margin_bottom = 12;
+    return avatar;
+  }
+
   private Gtk.Widget create_widget_for_emails (Chunk chunk)
       requires (chunk is EmailAddressesChunk) {
 
@@ -369,6 +352,16 @@ public class Contacts.PersonaEditor : Gtk.Widget {
     return new ContactEditorProperty (row);
   }
 
+  private Gtk.Widget create_widget_for_full_name (Chunk chunk)
+      requires (chunk is FullNameChunk) {
+    var row = new Adw.EntryRow ();
+    row.title = _("Full name");
+    row.set_input_purpose (Gtk.InputPurpose.NAME);
+    chunk.bind_property ("full-name", row, "text", BindingFlags.SYNC_CREATE | BindingFlags.BIDIRECTIONAL);
+
+    return new ContactEditorProperty (row);
+  }
+
   private Gtk.Widget create_widget_for_nickname (Chunk chunk)
       requires (chunk is NicknameChunk) {
     var row = new Adw.EntryRow ();
diff --git a/src/contacts-contact-sheet.vala b/src/contacts-contact-sheet.vala
index 550b19f..1bbf755 100644
--- a/src/contacts-contact-sheet.vala
+++ b/src/contacts-contact-sheet.vala
@@ -153,18 +153,17 @@ public class Contacts.ContactSheet : Gtk.Widget {
   }
 
   private Gtk.Widget create_header (Contact contact) {
-    var header = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 18);
+    var header = new Gtk.Box (Gtk.Orientation.VERTICAL, 18);
     header.add_css_class ("contacts-sheet-header");
 
     var image_frame = new Avatar.for_contact (PROFILE_SIZE, contact);
-    image_frame.vexpand = false;
-    image_frame.valign = Gtk.Align.START;
+    // image_frame.vexpand = false;
+    // image_frame.valign = Gtk.Align.START;
     header.append (image_frame);
 
     var name_label = new Gtk.Label ("");
     name_label.label = contact.display_name;
     name_label.hexpand = true;
-    name_label.xalign = 0f;
     name_label.wrap = true;
     name_label.wrap_mode = WORD_CHAR;
     name_label.lines = 4;