[gnome-contacts] Window: Use separators to simplify style

[Niels De Graef <nielsdg src gnome org>]

commit d78e07eaad1d6b370b8542f0002b4817e52fc71a
Author: Adrien Plazas <kekun plazas laposte net>
Date:   Thu Aug 23 13:47:57 2018 +0200

    Window: Use separators to simplify style
    
    Drop custom styling for the contacts list and its header bar and use
    separators instead.

 data/ui/contacts-list-pane.ui |  2 +-
 data/ui/contacts-window.ui    | 24 +++++++++++++++---------
 data/ui/style.css             | 27 ++-------------------------
 src/contacts-window.vala      |  4 ++++
 4 files changed, 22 insertions(+), 35 deletions(-)
---
diff --git a/data/ui/contacts-list-pane.ui b/data/ui/contacts-list-pane.ui
index 87b0b1f..00ec107 100644
--- a/data/ui/contacts-list-pane.ui
+++ b/data/ui/contacts-list-pane.ui
@@ -6,7 +6,7 @@
     <property name="can_focus">False</property>
     <property name="hexpand">False</property>
     <property name="hexpand_set">True</property>
-    <property name="shadow_type">in</property>
+    <property name="shadow_type">none</property>
     <child>
       <object class="GtkGrid">
         <property name="orientation">vertical</property>
diff --git a/data/ui/contacts-window.ui b/data/ui/contacts-window.ui
index d8f2c30..83ff946 100644
--- a/data/ui/contacts-window.ui
+++ b/data/ui/contacts-window.ui
@@ -89,10 +89,6 @@
             <property name="can_focus">False</property>
             <property name="title" translatable="yes">Contacts</property>
             <property name="show_close_button">True</property>
-            <style>
-              <class name="contacts-left-header-bar"/>
-              <class name="titlebar"/>
-            </style>
             <child>
               <object class="GtkButton" id="add_button">
                 <property name="visible">True</property>
@@ -158,15 +154,16 @@
             </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>
-            <style>
-              <class name="contacts-right-header-bar"/>
-              <class name="titlebar"/>
-            </style>
             <child>
               <object class="GtkButton" id="cancel_button">
                 <property name="visible">False</property>
@@ -252,13 +249,22 @@
           <object class="GtkGrid" id="content_grid">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
+            <child>
+              <object class="GtkSeparator">
+                <property name="visible">True</property>
+              </object>
+              <packing>
+                <property name="left_attach">1</property>
+                <property name="top_attach">0</property>
+              </packing>
+            </child>
             <child>
               <object class="GtkOverlay" id="contact_pane_container">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
               </object>
               <packing>
-                <property name="left_attach">1</property>
+                <property name="left_attach">2</property>
                 <property name="top_attach">0</property>
               </packing>
             </child>
diff --git a/data/ui/style.css b/data/ui/style.css
index 848f849..4e7131d 100644
--- a/data/ui/style.css
+++ b/data/ui/style.css
@@ -2,12 +2,8 @@
  * GNOME Contacts
  */
 
-ContactsListPane.frame:dir(ltr) {
-  border-width: 0 1px 0 0;
-}
-
-ContactsListPane.frame:dir(rtl) {
-  border-width: 0 0 0 1px;
+separator.selection-mode {
+  background-color: mix(@theme_selected_bg_color, #000, 0.2);
 }
 
 .contacts-map {
@@ -33,25 +29,6 @@ row.contact-data-row {
   background-color: shade(@theme_bg_color, 0.9);
 }
 
-/* Border on the right in the left menu toolbar */
-.contacts-left-header-bar:dir(ltr) {
- border-right-width: 1px;
-}
-
-.contacts-left-header-bar:dir(rtl) {
- border-left-width: 1px;
-}
-
-.contacts-left-header-bar:dir(ltr),
-.contacts-right-header-bar:dir(rtl) {
-  border-top-right-radius: 0;
-}
-
-.contacts-right-header-bar:dir(ltr),
-.contacts-left-header-bar:dir(rtl) {
-  border-top-left-radius: 0;
-}
-
 /* Give the avatar in the ContactSheet some margin,
  * so it doesn't jump when switching to the editor. */
 .contacts-contact-sheet .contacts-avatar {
diff --git a/src/contacts-window.vala b/src/contacts-window.vala
index 59c6d8b..04c2632 100644
--- a/src/contacts-window.vala
+++ b/src/contacts-window.vala
@@ -32,6 +32,8 @@ public class Contacts.Window : Gtk.ApplicationWindow {
   [GtkChild]
   private HeaderBar left_header;
   [GtkChild]
+  private Separator header_separator;
+  [GtkChild]
   private HeaderBar right_header;
   [GtkChild]
   private Overlay notification_overlay;
@@ -215,9 +217,11 @@ public class Contacts.Window : Gtk.ApplicationWindow {
     // 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");
     }
   }