[gnome-contacts] Window: Put the tilebar into a Hdy.TitleBar

[Niels De Graef <nielsdg src gnome org>]

commit 0427662f1381ffe791eadf4c43f0e6cfcf971c0c
Author: Adrien Plazas <kekun plazas laposte net>
Date:   Thu Oct 18 13:39:19 2018 +0200

    Window: Put the tilebar into a Hdy.TitleBar
    
    This is needed to add good looking sliding animations to the tilte bar.
    
    This also:
    - Adds the sidebar style class to the header separator, which is needed
      for it to remain styled correctly.
    - Sets the selection mode on the title bar rather than its elements.
    - Drops the now useless selection mode separator custom style.

 data/ui/contacts-window.ui | 257 +++++++++++++++++++++++----------------------
 data/ui/style.css          |   4 -
 src/contacts-window.vala   |  14 +--
 3 files changed, 136 insertions(+), 139 deletions(-)
---
diff --git a/data/ui/contacts-window.ui b/data/ui/contacts-window.ui
index 4c0e736..f331c32 100644
--- a/data/ui/contacts-window.ui
+++ b/data/ui/contacts-window.ui
@@ -142,162 +142,170 @@
     <signal name="key-press-event" handler="key_press_event_cb" object="ContactsWindow" after="yes" 
swapped="no"/>
     <signal name="delete-event" handler="delete_event_cb" object="ContactsWindow" after="no" swapped="no"/>
     <child type="titlebar">
-      <object class="GtkGrid">
+      <object class="HdyTitleBar" id="titlebar">
         <property name="visible">True</property>
-        <property name="can_focus">False</property>
         <child>
-          <object class="GtkHeaderBar" id="left_header">
+          <object class="GtkGrid">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="title" translatable="yes">Contacts</property>
-            <property name="show_close_button">True</property>
             <child>
-              <object class="GtkButton" id="add_button">
+              <object class="GtkHeaderBar" id="left_header">
                 <property name="visible">True</property>
-                <property name="can_focus">True</property>
-                <property name="halign">center</property>
-                <property name="valign">center</property>
-                <property name="tooltip_text" translatable="yes">Create new contact</property>
-                <signal name="clicked" handler="new_contact" object="ContactsWindow" after="no" 
swapped="no"/>
-                <child internal-child="accessible">
-                  <object class="AtkObject" id="add_button_atkobject">
-                    <property name="AtkObject::accessible-name" translatable="yes">Add contact</property>
-                  </object>
-                </child>
+                <property name="can_focus">False</property>
+                <property name="title" translatable="yes">Contacts</property>
+                <property name="show_close_button">True</property>
                 <child>
-                  <object class="GtkImage">
+                  <object class="GtkButton" id="add_button">
                     <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="icon_name">list-add-symbolic</property>
-                    <property name="icon_size">1</property>
+                    <property name="can_focus">True</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                    <property name="tooltip_text" translatable="yes">Create new contact</property>
+                    <signal name="clicked" handler="new_contact" object="ContactsWindow" after="no" 
swapped="no"/>
+                    <child internal-child="accessible">
+                      <object class="AtkObject" id="add_button_atkobject">
+                        <property name="AtkObject::accessible-name" translatable="yes">Add contact</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="icon_name">list-add-symbolic</property>
+                        <property name="icon_size">1</property>
+                      </object>
+                    </child>
                   </object>
+                  <packing>
+                    <property name="pack_type">start</property>
+                  </packing>
                 </child>
-              </object>
-              <packing>
-                <property name="pack_type">start</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkMenuButton" id="hamburger_menu_button">
-                <property name="visible">True</property>
-                <property name="can_focus">True</property>
-                <property name="focus_on_click">False</property>
-                <property name="popover">hamburger_menu_popover</property>
                 <child>
-                  <object class="GtkImage">
+                  <object class="GtkMenuButton" id="hamburger_menu_button">
                     <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="icon_name">open-menu-symbolic</property>
+                    <property name="can_focus">True</property>
+                    <property name="focus_on_click">False</property>
+                    <property name="popover">hamburger_menu_popover</property>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="icon_name">open-menu-symbolic</property>
+                      </object>
+                    </child>
                   </object>
+                  <packing>
+                    <property name="pack_type">end</property>
+                  </packing>
                 </child>
-              </object>
-              <packing>
-                <property name="pack_type">end</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkButton" id="select_cancel_button">
-                <property name="visible">False</property>
-                <property name="can_focus">True</property>
-                <property name="focus_on_click">False</property>
-                <property name="tooltip_text" translatable="yes">Cancel selection</property>
                 <child>
-                  <object class="GtkImage">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="icon_name">edit-clear-symbolic</property>
-                    <property name="icon_size">1</property>
+                  <object class="GtkButton" id="select_cancel_button">
+                    <property name="visible">False</property>
+                    <property name="can_focus">True</property>
+                    <property name="focus_on_click">False</property>
+                    <property name="tooltip_text" translatable="yes">Cancel selection</property>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="icon_name">edit-clear-symbolic</property>
+                        <property name="icon_size">1</property>
+                      </object>
+                    </child>
                   </object>
+                  <packing>
+                    <property name="pack_type">end</property>
+                  </packing>
                 </child>
               </object>
-              <packing>
-                <property name="pack_type">end</property>
-              </packing>
             </child>
-          </object>
-        </child>
-        <child>
-          <object class="GtkSeparator" id="header_separator">
-            <property name="visible">True</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkHeaderBar" id="right_header">
-            <property name="visible">True</property>
-            <property name="hexpand">True</property>
-            <property name="show_close_button">True</property>
             <child>
-              <object class="GtkButton" id="cancel_button">
-                <property name="visible">False</property>
-                <property name="can_focus">True</property>
-                <property name="focus_on_click">False</property>
-                <property name="label" translatable="yes">Cancel</property>
-                <property name="width_request">70</property>
-                <property name="valign">center</property>
+              <object class="GtkSeparator" id="header_separator">
+                <property name="visible">True</property>
                 <style>
-                  <class name="text-button"/>
+                  <class name="sidebar"/>
                 </style>
               </object>
-              <packing>
-                <property name="pack_type">start</property>
-              </packing>
             </child>
             <child>
-              <object class="GtkButton" id="edit_button">
-                <property name="visible">False</property>
-                <property name="can_focus">True</property>
-                <property name="focus_on_click">False</property>
-                <property name="valign">center</property>
-                <property name="tooltip_text" translatable="yes">Edit details</property>
-                <signal name="clicked" handler="on_edit_button_clicked"/>
+              <object class="GtkHeaderBar" id="right_header">
+                <property name="visible">True</property>
+                <property name="hexpand">True</property>
+                <property name="show_close_button">True</property>
                 <child>
-                  <object class="GtkImage">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="icon_name">document-edit-symbolic</property>
-                    <property name="icon_size">1</property>
+                  <object class="GtkButton" id="cancel_button">
+                    <property name="visible">False</property>
+                    <property name="can_focus">True</property>
+                    <property name="focus_on_click">False</property>
+                    <property name="label" translatable="yes">Cancel</property>
+                    <property name="width_request">70</property>
+                    <property name="valign">center</property>
+                    <style>
+                      <class name="text-button"/>
+                    </style>
                   </object>
+                  <packing>
+                    <property name="pack_type">start</property>
+                  </packing>
                 </child>
-              </object>
-              <packing>
-                <property name="pack_type">end</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkToggleButton" id="favorite_button">
-                <property name="visible">False</property>
-                <property name="can_focus">True</property>
-                <property name="focus_on_click">False</property>
-                <property name="valign">center</property>
-                <signal name="toggled" handler="on_favorite_button_toggled"/>
                 <child>
-                  <object class="GtkImage">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="icon_name">starred-symbolic</property>
-                    <property name="icon_size">1</property>
+                  <object class="GtkButton" id="edit_button">
+                    <property name="visible">False</property>
+                    <property name="can_focus">True</property>
+                    <property name="focus_on_click">False</property>
+                    <property name="valign">center</property>
+                    <property name="tooltip_text" translatable="yes">Edit details</property>
+                    <signal name="clicked" handler="on_edit_button_clicked"/>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="icon_name">document-edit-symbolic</property>
+                        <property name="icon_size">1</property>
+                      </object>
+                    </child>
                   </object>
+                  <packing>
+                    <property name="pack_type">end</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkToggleButton" id="favorite_button">
+                    <property name="visible">False</property>
+                    <property name="can_focus">True</property>
+                    <property name="focus_on_click">False</property>
+                    <property name="valign">center</property>
+                    <signal name="toggled" handler="on_favorite_button_toggled"/>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="icon_name">starred-symbolic</property>
+                        <property name="icon_size">1</property>
+                      </object>
+                    </child>
+                  </object>
+                  <packing>
+                    <property name="pack_type">end</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkButton" id="done_button">
+                    <property name="visible">False</property>
+                    <property name="can_focus">True</property>
+                    <property name="focus_on_click">False</property>
+                    <property name="label" translatable="yes">Done</property>
+                    <property name="width_request">70</property>
+                    <property name="valign">center</property>
+                    <style>
+                      <class name="text-button"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="pack_type">end</property>
+                  </packing>
                 </child>
               </object>
-              <packing>
-                <property name="pack_type">end</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkButton" id="done_button">
-                <property name="visible">False</property>
-                <property name="can_focus">True</property>
-                <property name="focus_on_click">False</property>
-                <property name="label" translatable="yes">Done</property>
-                <property name="width_request">70</property>
-                <property name="valign">center</property>
-                <style>
-                  <class name="text-button"/>
-                </style>
-              </object>
-              <packing>
-                <property name="pack_type">end</property>
-              </packing>
             </child>
           </object>
         </child>
@@ -404,3 +412,4 @@
     </headerbars>
   </object>
 </interface>
+
diff --git a/data/ui/style.css b/data/ui/style.css
index 4e7131d..d77b446 100644
--- a/data/ui/style.css
+++ b/data/ui/style.css
@@ -2,10 +2,6 @@
  * GNOME Contacts
  */
 
-separator.selection-mode {
-  background-color: mix(@theme_selected_bg_color, #000, 0.2);
-}
-
 .contacts-map {
     background-color: @theme_bg_color;
 }
diff --git a/src/contacts-window.vala b/src/contacts-window.vala
index bf0f1ff..a8e4003 100644
--- a/src/contacts-window.vala
+++ b/src/contacts-window.vala
@@ -31,9 +31,9 @@ public class Contacts.Window : Gtk.ApplicationWindow {
   [GtkChild]
   private SizeGroup left_pane_size_group;
   [GtkChild]
-  private HeaderBar left_header;
+  private TitleBar titlebar;
   [GtkChild]
-  private Separator header_separator;
+  private HeaderBar left_header;
   [GtkChild]
   private HeaderBar right_header;
   [GtkChild]
@@ -222,15 +222,7 @@ public class Contacts.Window : Gtk.ApplicationWindow {
       ((Widget) this.done_button).set_focus_on_click (true);
     }
     // When selecting or editing, we get special headerbars
-    if (this.state == UiState.SELECTING || this.state.editing ()) {
-      this.left_header.get_style_context ().add_class ("selection-mode");
-      this.header_separator.get_style_context ().add_class ("selection-mode");
-      this.right_header.get_style_context ().add_class ("selection-mode");
-    } else {
-      this.left_header.get_style_context ().remove_class ("selection-mode");
-      this.header_separator.get_style_context ().remove_class ("selection-mode");
-      this.right_header.get_style_context ().remove_class ("selection-mode");
-    }
+    this.titlebar.selection_mode = this.state == UiState.SELECTING || this.state.editing ();
   }
 
   [GtkCallback]