Update UI to better reflect the design

* Make the Answer button look nice and laid out properly.
* Merge the time and status labels, displaying simply the text
  "Calling..." until the call becomes active and then the call time
  afterwards.
* Fix info display bar in both the call and main windows so they use a
  GtkRevealer and work a lot better.
* Add a "new-call-symbolic" icon for the "Add call" button.
* General tweaks and clean-ups

Closes #55
Closes #35

data/new-call-symbolic.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg4542" version="1.1" viewBox="0 0 4.2333332 4.2333332" height="16" width="16">
+  <defs id="defs4536"/>
+  <metadata id="metadata4539">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g transform="translate(0,-292.76667)" id="layer1">
+    <path id="path13805" d="m 3.7124547,293.29678 c 0.1412992,0 0.2562986,0.11297 0.2562986,0.2563 v 0.0165 c 0,1.74963 -1.424292,3.16672 -3.17498208,3.16672 h -0.01 c -0.14419918,0 -0.25629855,-0.118 -0.25629855,-0.26458 v -0.26459 -0.52916 c 0,-0.14658 0.11799934,-0.26459 0.26449851,-0.26459 H 1.3211682 c 0.1465992,0 0.2645985,0.11801 0.2645985,0.26459 v 0.12402 c 0.6764962,-0.23915 1.2077932,-0.77043 1.4468919,-1.44693 H 2.9086593 c -0.1465992,0 -0.2645985,-0.118 -0.2645985,-0.26458 v -0.52917 c 0,-0.14657 0.1179993,-0.26457 0.2645985,-0.26457 h 0.2645985 0.2645985 0.2562985 0.01 0.01 z" style="opacity:1;fill:#2e3436;fill-opacity:1;stroke:none;stroke-width:0.17638887"/>
+    <path style="color:#bebebe;display:inline;overflow:visible;visibility:visible;fill:#2e3436;fill-opacity:1;stroke:none;stroke-width:0.17638887;marker:none" d="m 0.79367122,292.76757 v 0.79374 H -2.429749e-5 v 0.52917 H 0.79367122 v 0.79375 H 1.3228682 v -0.79375 h 0.7936955 v -0.52917 H 1.3228682 v -0.79374 z" id="path13807"/>
+  </g>
+</svg>

src/calls-call-display.c

@@ -41,16 +41,17 @@ struct _CallsCallDisplay
   GTimer *timer;
   guint timeout;
 
+  GtkLabel *incoming_phone_call;
   GtkBox *party_box;
   GtkLabel *primary_contact_info;
   GtkLabel *secondary_contact_info;
   GtkLabel *status;
-  GtkLabel *time;
 
-  GtkButton *answer;
+  GtkBox *controls;
-  GtkToggleButton *mute;
+  GtkBox *gsm_controls;
+  GtkBox *general_controls;
   GtkButton *hang_up;
-  GtkToggleButton *speaker;
+  GtkButton *answer;
 
   GtkRevealer *dial_pad_revealer;
 };
@@ -88,6 +89,12 @@ hang_up_clicked_cb (GtkButton        *button,
     }
 }
 
+static void
+hold_toggled_cb (GtkToggleButton  *togglebutton,
+                 CallsCallDisplay *self)
+{
+}
+
 static void
 mute_toggled_cb (GtkToggleButton  *togglebutton,
                  CallsCallDisplay *self)
@@ -101,6 +108,13 @@ speaker_toggled_cb (GtkToggleButton  *togglebutton,
 }
 
 
+static void
+add_call_clicked_cb (GtkButton  *button,
+                     CallsCallDisplay *self)
+{
+}
+
+
 static void
 dial_pad_symbol_clicked_cb (CallsCallDisplay *self,
                             gchar             symbol,
@@ -157,7 +171,7 @@ timeout_cb (CallsCallDisplay *self)
 
   g_string_append_printf (str, "%02u", (guint)elapsed);
 
-  gtk_label_set_text (self->time, str->str);
+  gtk_label_set_text (self->status, str->str);
 
   g_string_free (str, TRUE);
   return TRUE;
@@ -167,38 +181,91 @@ timeout_cb (CallsCallDisplay *self)
 #undef MINUTE
 }
 
+
+static void
+stop_timeout (CallsCallDisplay *self)
+{
+  if (self->timeout == 0)
+    {
+      return;
+    }
+
+  g_source_remove (self->timeout);
+  self->timeout = 0;
+}
+
+
 static void
 call_state_changed_cb (CallsCallDisplay *self,
                        CallsCallState    state)
 {
-  GString *state_str = g_string_new("");
+  GtkStyleContext *hang_up_style;
 
   g_return_if_fail (CALLS_IS_CALL_DISPLAY (self));
 
-  calls_call_state_to_string (state_str, state);
+  hang_up_style = gtk_widget_get_style_context
-  gtk_label_set_text (self->status, state_str->str);
+    (GTK_WIDGET (self->hang_up));
-  g_debug ("Call state changed to `%s'", state_str->str);
-  g_string_free (state_str, TRUE);
 
+  /* Widgets */
   switch (state)
     {
     case CALLS_CALL_STATE_INCOMING:
+      gtk_widget_hide (GTK_WIDGET (self->status));
+      gtk_widget_hide (GTK_WIDGET (self->controls));
+      gtk_widget_show (GTK_WIDGET (self->incoming_phone_call));
       gtk_widget_show (GTK_WIDGET (self->answer));
-      gtk_widget_hide (GTK_WIDGET (self->mute));
+      gtk_style_context_remove_class
-      gtk_widget_hide (GTK_WIDGET (self->speaker));
+        (hang_up_style, GTK_STYLE_CLASS_DESTRUCTIVE_ACTION);
       break;
-    case CALLS_CALL_STATE_ACTIVE:
+
-    case CALLS_CALL_STATE_HELD:
     case CALLS_CALL_STATE_DIALING:
     case CALLS_CALL_STATE_ALERTING:
+    case CALLS_CALL_STATE_ACTIVE:
+    case CALLS_CALL_STATE_HELD:
     case CALLS_CALL_STATE_WAITING:
+      gtk_style_context_add_class
+        (hang_up_style, GTK_STYLE_CLASS_DESTRUCTIVE_ACTION);
       gtk_widget_hide (GTK_WIDGET (self->answer));
-      gtk_widget_show (GTK_WIDGET (self->mute));
+      gtk_widget_hide (GTK_WIDGET (self->incoming_phone_call));
-      gtk_widget_show (GTK_WIDGET (self->speaker));
+      gtk_widget_show (GTK_WIDGET (self->controls));
+      gtk_widget_show (GTK_WIDGET (self->status));
+
+      gtk_widget_set_visible
+        (GTK_WIDGET (self->gsm_controls),
+         state != CALLS_CALL_STATE_DIALING
+         && state != CALLS_CALL_STATE_ALERTING);
       break;
+
     case CALLS_CALL_STATE_DISCONNECTED:
       break;
     }
+
+  /* Status text */
+  switch (state)
+    {
+    case CALLS_CALL_STATE_INCOMING:
+      break;
+
+    case CALLS_CALL_STATE_DIALING:
+    case CALLS_CALL_STATE_ALERTING:
+      gtk_label_set_text (self->status, _("Calling..."));
+      break;
+
+    case CALLS_CALL_STATE_ACTIVE:
+    case CALLS_CALL_STATE_HELD:
+    case CALLS_CALL_STATE_WAITING:
+      if (self->timeout == 0)
+        {
+          self->timeout = g_timeout_add
+            (500, (GSourceFunc)timeout_cb, self);
+          timeout_cb (self);
+        }
+      break;
+
+    case CALLS_CALL_STATE_DISCONNECTED:
+      stop_timeout (self);
+      break;
+    }
 }
 
 
@@ -230,7 +297,7 @@ set_party (CallsCallDisplay *self, CallsParty *party)
   const gchar *name, *number;
 
   image = calls_party_create_image (party);
-  gtk_box_pack_end (self->party_box, image, TRUE, FALSE, 0);
+  gtk_box_pack_end (self->party_box, image, TRUE, TRUE, 0);
   gtk_image_set_pixel_size (GTK_IMAGE (image), 100);
   gtk_widget_show (image);
 
@@ -276,8 +343,6 @@ constructed (GObject *object)
   CallsCallDisplay *self = CALLS_CALL_DISPLAY (object);
 
   self->timer = g_timer_new ();
-  self->timeout = g_timeout_add (500, (GSourceFunc)timeout_cb, self);
-  timeout_cb (self);
 
   call_state_changed_cb (self, calls_call_get_state (self->call));
 
@@ -296,6 +361,7 @@ dispose (GObject *object)
   GObjectClass *parent_class = g_type_class_peek (GTK_TYPE_OVERLAY);
   CallsCallDisplay *self = CALLS_CALL_DISPLAY (object);
 
+  stop_timeout (self);
   g_clear_object (&self->call);
 
   parent_class->dispose (object);
@@ -307,7 +373,6 @@ finalize (GObject *object)
   GObjectClass *parent_class = g_type_class_peek (GTK_TYPE_OVERLAY);
   CallsCallDisplay *self = CALLS_CALL_DISPLAY (object);
 
-  g_source_remove (self->timeout);
   g_timer_destroy (self->timer);
 
   parent_class->finalize (object);
@@ -335,20 +400,23 @@ calls_call_display_class_init (CallsCallDisplayClass *klass)
 
 
   gtk_widget_class_set_template_from_resource (widget_class, "/sm/puri/calls/ui/call-display.ui");
+  gtk_widget_class_bind_template_child (widget_class, CallsCallDisplay, incoming_phone_call);
   gtk_widget_class_bind_template_child (widget_class, CallsCallDisplay, party_box);
   gtk_widget_class_bind_template_child (widget_class, CallsCallDisplay, primary_contact_info);
   gtk_widget_class_bind_template_child (widget_class, CallsCallDisplay, secondary_contact_info);
   gtk_widget_class_bind_template_child (widget_class, CallsCallDisplay, status);
-  gtk_widget_class_bind_template_child (widget_class, CallsCallDisplay, time);
+  gtk_widget_class_bind_template_child (widget_class, CallsCallDisplay, controls);
-  gtk_widget_class_bind_template_child (widget_class, CallsCallDisplay, answer);
+  gtk_widget_class_bind_template_child (widget_class, CallsCallDisplay, gsm_controls);
-  gtk_widget_class_bind_template_child (widget_class, CallsCallDisplay, mute);
+  gtk_widget_class_bind_template_child (widget_class, CallsCallDisplay, general_controls);
   gtk_widget_class_bind_template_child (widget_class, CallsCallDisplay, hang_up);
-  gtk_widget_class_bind_template_child (widget_class, CallsCallDisplay, speaker);
+  gtk_widget_class_bind_template_child (widget_class, CallsCallDisplay, answer);
   gtk_widget_class_bind_template_child (widget_class, CallsCallDisplay, dial_pad_revealer);
   gtk_widget_class_bind_template_callback (widget_class, answer_clicked_cb);
   gtk_widget_class_bind_template_callback (widget_class, hang_up_clicked_cb);
+  gtk_widget_class_bind_template_callback (widget_class, hold_toggled_cb);
   gtk_widget_class_bind_template_callback (widget_class, mute_toggled_cb);
   gtk_widget_class_bind_template_callback (widget_class, speaker_toggled_cb);
+  gtk_widget_class_bind_template_callback (widget_class, add_call_clicked_cb);
   gtk_widget_class_bind_template_callback (widget_class, dial_pad_symbol_clicked_cb);
   gtk_widget_class_bind_template_callback (widget_class, hide_dial_pad_clicked_cb);
 }

src/calls-call-window.c

@@ -45,6 +45,8 @@ struct _CallsCallWindow
 
   GListStore *call_holders;
 
+  GtkRevealer *info_revealer;
+  guint info_timeout;
   GtkInfoBar *info;
   GtkLabel *info_label;
 
@@ -85,6 +87,15 @@ update_visibility (CallsCallWindow *self)
 }
 
 
+static gboolean
+show_message_timeout_cb (CallsCallWindow *self)
+{
+  gtk_revealer_set_reveal_child (self->info_revealer, FALSE);
+  self->info_timeout = 0;
+  return FALSE;
+}
+
+
 static void
 show_message (CallsCallWindow *self,
               const gchar     *text,
@@ -92,8 +103,27 @@ show_message (CallsCallWindow *self,
 {
   gtk_info_bar_set_message_type (self->info, type);
   gtk_label_set_text (self->info_label, text);
-  gtk_widget_show (GTK_WIDGET (self->info));
+  gtk_revealer_set_reveal_child (self->info_revealer, TRUE);
-  gtk_widget_queue_allocate (GTK_WIDGET (self));
+
+  if (self->info_timeout)
+    {
+      g_source_remove (self->info_timeout);
+    }
+  self->info_timeout = g_timeout_add_seconds
+    (3,
+     (GSourceFunc)show_message_timeout_cb,
+     self);
+}
+
+
+static inline void
+stop_info_timeout (CallsCallWindow *self)
+{
+  if (self->info_timeout)
+    {
+      g_source_remove (self->info_timeout);
+      self->info_timeout = 0;
+    }
 }
 
 
@@ -102,8 +132,8 @@ info_response_cb (GtkInfoBar      *infobar,
                   gint             response_id,
                   CallsCallWindow *self)
 {
-  gtk_widget_hide (GTK_WIDGET (self->info));
+  stop_info_timeout (self);
-  gtk_widget_queue_allocate (GTK_WIDGET (self));
+  gtk_revealer_set_reveal_child (self->info_revealer, FALSE);
 }
 
 
@@ -376,6 +406,7 @@ dispose (GObject *object)
     }
 
   g_clear_object (&self->call_holders);
+  stop_info_timeout (self);
 
   parent_class->dispose (object);
 }
@@ -401,6 +432,7 @@ calls_call_window_class_init (CallsCallWindowClass *klass)
   g_object_class_install_properties (object_class, PROP_LAST_PROP, props);
 
   gtk_widget_class_set_template_from_resource (widget_class, "/sm/puri/calls/ui/call-window.ui");
+  gtk_widget_class_bind_template_child (widget_class, CallsCallWindow, info_revealer);
   gtk_widget_class_bind_template_child (widget_class, CallsCallWindow, info);
   gtk_widget_class_bind_template_child (widget_class, CallsCallWindow, info_label);
   gtk_widget_class_bind_template_child (widget_class, CallsCallWindow, main_stack);

src/calls-call.h

@@ -35,7 +35,7 @@ G_DECLARE_INTERFACE (CallsCall, calls_call, CALLS, CALL, GObject);
 
 typedef enum
 {
-  CALLS_CALL_STATE_ACTIVE,
+  CALLS_CALL_STATE_ACTIVE = 1,
   CALLS_CALL_STATE_HELD,
   CALLS_CALL_STATE_DIALING,
   CALLS_CALL_STATE_ALERTING,

src/calls-main-window.c

@@ -44,6 +44,8 @@ struct _CallsMainWindow
 
   CallsProvider *provider;
 
+  GtkRevealer *info_revealer;
+  guint info_timeout;
   GtkInfoBar *info;
   GtkLabel *info_label;
 
@@ -145,13 +147,41 @@ calls_main_window_new (GtkApplication *application, CallsProvider *provider)
 }
 
 
+static gboolean
+show_message_timeout_cb (CallsMainWindow *self)
+{
+  gtk_revealer_set_reveal_child (self->info_revealer, FALSE);
+  self->info_timeout = 0;
+  return FALSE;
+}
+
+
 static void
 show_message (CallsMainWindow *self, const gchar *text, GtkMessageType type)
 {
   gtk_info_bar_set_message_type (self->info, type);
   gtk_label_set_text (self->info_label, text);
-  gtk_widget_show (GTK_WIDGET (self->info));
+  gtk_revealer_set_reveal_child (self->info_revealer, TRUE);
-  gtk_widget_queue_allocate (GTK_WIDGET (self));
+
+  if (self->info_timeout)
+    {
+      g_source_remove (self->info_timeout);
+    }
+  self->info_timeout = g_timeout_add_seconds
+    (3,
+     (GSourceFunc)show_message_timeout_cb,
+     self);
+}
+
+
+static inline void
+stop_info_timeout (CallsMainWindow *self)
+{
+  if (self->info_timeout)
+    {
+      g_source_remove (self->info_timeout);
+      self->info_timeout = 0;
+    }
 }
 
 
@@ -160,8 +190,8 @@ info_response_cb (GtkInfoBar      *infobar,
                   gint             response_id,
                   CallsMainWindow *self)
 {
-  gtk_widget_hide (GTK_WIDGET (self->info));
+  stop_info_timeout (self);
-  gtk_widget_queue_allocate (GTK_WIDGET (self));
+  gtk_revealer_set_reveal_child (self->info_revealer, FALSE);
 }
 
 
@@ -269,6 +299,7 @@ dispose (GObject *object)
   GObjectClass *parent_class = g_type_class_peek (GTK_TYPE_APPLICATION_WINDOW);
   CallsMainWindow *self = CALLS_MAIN_WINDOW (object);
 
+  stop_info_timeout (self);
   g_clear_object (&self->provider);
 
   parent_class->dispose (object);
@@ -296,6 +327,7 @@ calls_main_window_class_init (CallsMainWindowClass *klass)
 
 
   gtk_widget_class_set_template_from_resource (widget_class, "/sm/puri/calls/ui/main-window.ui");
+  gtk_widget_class_bind_template_child (widget_class, CallsMainWindow, info_revealer);
   gtk_widget_class_bind_template_child (widget_class, CallsMainWindow, info);
   gtk_widget_class_bind_template_child (widget_class, CallsMainWindow, info_label);
   gtk_widget_class_bind_template_child (widget_class, CallsMainWindow, main_stack);

src/calls.gresources.xml

@@ -11,4 +11,7 @@
     <file preprocess="xml-stripblanks">new-call-box.ui</file>
     <file preprocess="xml-stripblanks">new-call-header-bar.ui</file>
   </gresource>
+  <gresource prefix="/sm/puri/calls/">
+    <file>new-call-symbolic.svg</file>
+  </gresource>
 </gresources>

src/meson.build

@@ -76,7 +76,7 @@ calls_enum_sources = gnome.mkenums_simple('enum-types',
 calls_resources = gnome.compile_resources(
    'calls-resources',
    'calls.gresources.xml',
-   source_dir: 'ui',
+   source_dir: ['ui', '../data'],
    c_name: 'call',
 )
 

src/ui/call-display.ui

@@ -9,144 +9,302 @@
       <object class="GtkBox">
         <property name="can_focus">False</property>
         <property name="halign">center</property>
-        <property name="margin_bottom">8</property>
+        <property name="margin_bottom">12</property>
         <property name="margin_left">12</property>
         <property name="margin_right">12</property>
-        <property name="margin_top">8</property>
+        <property name="margin_top">12</property>
         <property name="orientation">vertical</property>
-        <property name="valign">center</property>
+        <property name="vexpand">True</property>
         <property name="visible">True</property>
         <property name="width_request">300</property>
         <property name="sensitive" bind-source="dial_pad_revealer" bind-property="reveal-child" bind-flags="invert-boolean|bidirectional|sync-create"/>
-        <child>
-          <object class="GtkBox" id="party_box">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="orientation">vertical</property>
-            <child>
-              <object class="GtkLabel" id="primary_contact_info">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="margin_top">6</property>
-                <property name="margin_bottom">6</property>
-                <attributes>
-                  <attribute name="weight" value="bold"/>
-                  <attribute name="scale" value="1.6"/>
-                </attributes>
-              </object>
-            </child>
-            <child>
-              <object class="GtkLabel" id="secondary_contact_info">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="margin_top">4</property>
-                <property name="margin_bottom">4</property>
-              </object>
-            </child>
-          </object>
-        </child>
         <child>
           <object class="GtkBox">
             <property name="visible">True</property>
             <property name="can_focus">False</property>
             <property name="orientation">vertical</property>
+            <property name="vexpand">True</property>
             <child>
-              <object class="GtkLabel" id="status">
+              <object class="GtkLabel" id="incoming_phone_call">
-                <property name="visible">True</property>
+                <property name="visible">False</property>
                 <property name="can_focus">False</property>
-                <property name="label" translatable="yes">Active</property>
+                <property name="margin_top">40</property>
+                <property name="margin_bottom">12</property>
+                <property name="label" translatable="yes">Incoming phone call</property>
               </object>
             </child>
             <child>
-              <object class="GtkLabel" id="time">
+              <object class="GtkBox" id="party_box">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="label" translatable="yes">00:00</property>
+                <property name="orientation">vertical</property>
-                <property name="margin_top">30</property>
+                <property name="vexpand">True</property>
-                <property name="margin_bottom">40</property>
+                <child>
-                <attributes>
+                  <object class="GtkLabel" id="primary_contact_info">
-                  <attribute name="scale" value="1.6"/>
+                    <property name="visible">True</property>
-                </attributes>
+                    <property name="can_focus">False</property>
-              </object>
+                    <property name="margin_top">6</property>
-            </child>
+                    <property name="margin_bottom">6</property>
-            <child>
+                    <attributes>
-              <object class="GtkButton" id="answer">
+                      <attribute name="weight" value="bold"/>
-                <property name="label" translatable="yes">Answer</property>
+                      <attribute name="scale" value="1.6"/>
-                <property name="visible">True</property>
+                    </attributes>
-                <property name="can_focus">True</property>
+                  </object>
-                <property name="receives_default">True</property>
+                </child>
-                <property name="no_show_all">True</property>
+                <child>
-                <signal name="clicked" handler="answer_clicked_cb" swapped="no"/>
+                  <object class="GtkLabel" id="secondary_contact_info">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="margin_top">4</property>
+                    <property name="margin_bottom">4</property>
+                  </object>
+                </child>
               </object>
             </child>
             <child>
               <object class="GtkBox">
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="spacing">12</property>
+                <property name="orientation">vertical</property>
-                <property name="homogeneous">True</property>
-                <property name="height_request">65</property>
-                <property name="margin_bottom">65</property>
                 <child>
-                  <object class="GtkToggleButton" id="mute">
+                  <object class="GtkLabel" id="status">
                     <property name="visible">True</property>
-                    <property name="can_focus">True</property>
+                    <property name="can_focus">False</property>
-                    <property name="receives_default">True</property>
+                    <property name="margin_top">30</property>
-                    <property name="no_show_all">True</property>
+                    <property name="margin_bottom">40</property>
-                    <signal name="toggled" handler="mute_toggled_cb" swapped="no"/>
+                    <attributes>
-                    <child>
+                      <attribute name="scale" value="1.6"/>
-                      <object class="GtkImage">
+                    </attributes>
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="icon_name">microphone-sensitivity-muted-symbolic</property>
-                        <property name="icon_size">3</property>
-                      </object>
-                    </child>
                   </object>
                 </child>
                 <child>
-                  <object class="GtkToggleButton" id="dial_pad">
+                  <object class="GtkBox" id="controls">
                     <property name="visible">True</property>
-                    <property name="can_focus">True</property>
+                    <property name="can_focus">False</property>
-                    <property name="receives_default">True</property>
+                    <property name="spacing">12</property>
-                    <property name="no_show_all">True</property>
+                    <property name="homogeneous">True</property>
-                    <property name="active" bind-source="dial_pad_revealer" bind-property="reveal-child" bind-flags="bidirectional|sync-create"/>
+                    <property name="orientation">vertical</property>
+                    <property name="vexpand">False</property>
                     <child>
-                      <object class="GtkImage">
+                      <object class="GtkBox" id="general_controls">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
-                        <property name="icon_name">input-dialpad-symbolic</property>
+                        <property name="spacing">12</property>
-                        <property name="icon_size">3</property>
+                        <property name="height_request">65</property>
+                        <property name="homogeneous">True</property>
+                        <property name="hexpand">True</property>
+                        <child>
+                          <object class="GtkToggleButton" id="mute">
+                            <property name="visible">True</property>
+                            <property name="can_focus">True</property>
+                            <property name="receives_default">True</property>
+                            <property name="no_show_all">True</property>
+                            <property name="hexpand">True</property>
+                            <property name="sensitive">False</property>
+                            <signal name="toggled" handler="mute_toggled_cb" swapped="no"/>
+                            <child>
+                              <object class="GtkBox">
+                                <property name="visible">True</property>
+                                <property name="can_focus">False</property>
+                                <property name="orientation">vertical</property>
+                                <child>
+                                  <object class="GtkImage">
+                                    <property name="visible">True</property>
+                                    <property name="can_focus">False</property>
+                                    <property name="icon_name">microphone-sensitivity-muted-symbolic</property>
+                                    <property name="icon_size">3</property>
+                                    <property name="vexpand">True</property>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkLabel">
+                                    <property name="visible">True</property>
+                                    <property name="can_focus">False</property>
+                                    <property name="margin_bottom">4</property>
+                                    <property name="label" translatable="yes">Mute</property>
+                                  </object>
+                                </child>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkToggleButton" id="speaker">
+                            <property name="visible">True</property>
+                            <property name="can_focus">True</property>
+                            <property name="receives_default">True</property>
+                            <property name="no_show_all">True</property>
+                            <property name="hexpand">True</property>
+                            <property name="sensitive">False</property>
+                            <signal name="toggled" handler="speaker_toggled_cb" swapped="no"/>
+                            <child>
+                              <object class="GtkBox">
+                                <property name="visible">True</property>
+                                <property name="can_focus">False</property>
+                                <property name="orientation">vertical</property>
+                                <child>
+                                  <object class="GtkImage">
+                                    <property name="visible">True</property>
+                                    <property name="can_focus">False</property>
+                                    <property name="icon_name">audio-volume-high-symbolic</property>
+                                    <property name="icon_size">3</property>
+                                    <property name="vexpand">True</property>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkLabel">
+                                    <property name="visible">True</property>
+                                    <property name="can_focus">False</property>
+                                    <property name="margin_bottom">4</property>
+                                    <property name="label" translatable="yes">Speaker</property>
+                                  </object>
+                                </child>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkButton" id="add_call">
+                            <property name="visible">True</property>
+                            <property name="can_focus">True</property>
+                            <property name="receives_default">True</property>
+                            <property name="no_show_all">True</property>
+                            <property name="sensitive">False</property>
+                            <signal name="clicked" handler="add_call_clicked_cb" swapped="no"/>
+                            <child>
+                              <object class="GtkBox">
+                                <property name="visible">True</property>
+                                <property name="can_focus">False</property>
+                                <property name="orientation">vertical</property>
+                                <child>
+                                  <object class="GtkImage">
+                                    <property name="visible">True</property>
+                                    <property name="can_focus">False</property>
+                                    <property name="resource">/sm/puri/calls/new-call-symbolic.svg</property>
+                                    <property name="icon_size">3</property>
+                                    <property name="vexpand">True</property>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkLabel">
+                                    <property name="visible">True</property>
+                                    <property name="can_focus">False</property>
+                                    <property name="margin_bottom">4</property>
+                                    <property name="label" translatable="yes">Add call</property>
+                                  </object>
+                                </child>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
                       </object>
                     </child>
-                  </object>
-                </child>
-                <child>
-                  <object class="GtkToggleButton" id="speaker">
-                    <property name="visible">True</property>
-                    <property name="can_focus">True</property>
-                    <property name="receives_default">True</property>
-                    <property name="no_show_all">True</property>
-                    <signal name="toggled" handler="speaker_toggled_cb" swapped="no"/>
                     <child>
-                      <object class="GtkImage">
+                      <object class="GtkBox" id="gsm_controls">
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
-                        <property name="icon_name">audio-volume-high-symbolic</property>
+                        <property name="spacing">12</property>
-                        <property name="icon_size">3</property>
+                        <property name="height_request">65</property>
+                        <child>
+                          <object class="GtkToggleButton" id="hold">
+                            <property name="visible">True</property>
+                            <property name="can_focus">True</property>
+                            <property name="receives_default">True</property>
+                            <property name="no_show_all">True</property>
+                            <property name="hexpand">True</property>
+                            <property name="sensitive">False</property>
+                            <signal name="toggled" handler="hold_toggled_cb" swapped="no"/>
+                            <child>
+                              <object class="GtkBox">
+                                <property name="visible">True</property>
+                                <property name="can_focus">False</property>
+                                <property name="orientation">vertical</property>
+                                <child>
+                                  <object class="GtkImage">
+                                    <property name="visible">True</property>
+                                    <property name="can_focus">False</property>
+                                    <property name="icon_name">media-playback-pause-symbolic</property>
+                                    <property name="icon_size">3</property>
+                                    <property name="vexpand">True</property>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkLabel">
+                                    <property name="visible">True</property>
+                                    <property name="can_focus">False</property>
+                                    <property name="margin_bottom">4</property>
+                                    <property name="label" translatable="yes">Hold</property>
+                                  </object>
+                                </child>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkToggleButton" id="dial_pad">
+                            <property name="visible">True</property>
+                            <property name="can_focus">True</property>
+                            <property name="receives_default">True</property>
+                            <property name="no_show_all">True</property>
+                            <property name="active" bind-source="dial_pad_revealer" bind-property="reveal-child" bind-flags="bidirectional|sync-create"/>
+                            <property name="hexpand">True</property>
+                            <child>
+                              <object class="GtkBox">
+                                <property name="visible">True</property>
+                                <property name="can_focus">False</property>
+                                <property name="orientation">vertical</property>
+                                <child>
+                                  <object class="GtkImage">
+                                    <property name="visible">True</property>
+                                    <property name="can_focus">False</property>
+                                    <property name="icon_name">input-dialpad-symbolic</property>
+                                    <property name="icon_size">3</property>
+                                    <property name="vexpand">True</property>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkLabel">
+                                    <property name="visible">True</property>
+                                    <property name="can_focus">False</property>
+                                    <property name="margin_bottom">4</property>
+                                    <property name="label" translatable="yes">Dial pad</property>
+                                  </object>
+                                </child>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkBox" id="blank">
+                            <property name="visible">True</property>
+                            <property name="can_focus">True</property>
+                            <property name="receives_default">True</property>
+                            <property name="no_show_all">True</property>
+                            <property name="hexpand">True</property>
+                          </object>
+                        </child>
                       </object>
                     </child>
                   </object>
                 </child>
               </object>
             </child>
-            <child>
+          </object>
-              <object class="CallsEncryptionIndicator" id="encryption_indicator">
+        </child>
-                <property name="can_focus">False</property>
+        <child>
-                <property name="margin_bottom">30</property>
+          <object class="CallsEncryptionIndicator" id="encryption_indicator">
-                <property name="visible">True</property>
+            <property name="can_focus">False</property>
-              </object>
+            <property name="margin_top">50</property>
-            </child>
+            <property name="margin_bottom">30</property>
+            <property name="visible">True</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkBox" id="action_box">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="orientation">horizontal</property>
+            <property name="hexpand">True</property>
             <child>
               <object class="GtkButton" id="hang_up">
                 <property name="always_show_image">True</property>
@@ -157,6 +315,7 @@
                 <property name="valign">start</property>
                 <property name="visible">True</property>
                 <property name="width_request">150</property>
+                <property name="hexpand">True</property>
                 <signal name="clicked" handler="hang_up_clicked_cb" swapped="no"/>
                 <style>
                   <class name="destructive-action"/>
@@ -176,6 +335,37 @@
                 </child>
               </object>
             </child>
+            <child>
+              <object class="GtkButton" id="answer">
+                <property name="always_show_image">True</property>
+                <property name="can_focus">True</property>
+                <property name="halign">center</property>
+                <property name="height_request">65</property>
+                <property name="receives_default">False</property>
+                <property name="valign">start</property>
+                <property name="visible">True</property>
+                <property name="width_request">150</property>
+                <property name="hexpand">True</property>
+                <property name="margin_left">12</property>
+                <signal name="clicked" handler="answer_clicked_cb" swapped="no"/>
+                <style>
+                  <class name="suggested-action"/>
+                  <class name="image-button"/>
+                </style>
+                <child internal-child="accessible">
+                  <object class="AtkObject" id="a11y-answer">
+                    <property name="accessible-name" translatable="yes">Answer</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkImage">
+                    <property name="visible">True</property>
+                    <property name="icon-name">call-start-symbolic</property>
+                    <property name="icon-size">5</property>
+                  </object>
+                </child>
+              </object>
+            </child>
           </object>
         </child>
       </object>
@@ -254,4 +444,14 @@
       </object>
     </child>
   </template>
+  <object class="GtkSizeGroup">
+    <widgets>
+      <widget name="mute"/>
+      <widget name="speaker"/>
+      <widget name="add_call"/>
+      <widget name="dial_pad"/>
+      <widget name="hold"/>
+      <widget name="blank"/>
+    </widgets>
+  </object>
 </interface>

src/ui/call-window.ui

@@ -11,40 +11,52 @@
     <property name="title" translatable="yes">Calls</property>
     <signal name="delete-event" handler="gtk_widget_hide_on_delete"/>
     <child>
-      <object class="GtkBox">
+      <object class="GtkOverlay">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="orientation">vertical</property>
+        <child type="overlay">
-        <child>
+          <object class="GtkRevealer" id="info_revealer">
-          <object class="GtkInfoBar" id="info">
+            <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="no_show_all">True</property>
+            <property name="valign">start</property>
-            <property name="show_close_button">True</property>
+            <property name="reveal_child">False</property>
-            <signal name="response" handler="info_response_cb" swapped="no"/>
+            <property name="transition-type">slide-down</property>
-            <child internal-child="action_area">
+            <child>
-              <object class="GtkButtonBox">
+              <object class="GtkInfoBar" id="info">
+                <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="spacing">6</property>
+                <property name="show_close_button">True</property>
-                <property name="layout_style">end</property>
+                <signal name="response" handler="info_response_cb" swapped="no"/>
-                <child>
+                <child internal-child="action_area">
-                  <placeholder/>
+                  <object class="GtkButtonBox">
-                </child>
-              </object>
-              <packing>
-                <property name="expand">False</property>
-                <property name="fill">False</property>
-              </packing>
-            </child>
-            <child internal-child="content_area">
-              <object class="GtkBox">
-                <property name="can_focus">False</property>
-                <property name="spacing">16</property>
-                <child>
-                  <object class="GtkLabel" id="info_label">
-                    <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <property name="label" translatable="yes">label</property>
+                    <property name="spacing">6</property>
-                    <property name="wrap">True</property>
+                    <property name="layout_style">end</property>
+                    <child>
+                      <placeholder/>
+                    </child>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">False</property>
+                  </packing>
+                </child>
+                <child internal-child="content_area">
+                  <object class="GtkBox">
+                    <property name="can_focus">False</property>
+                    <property name="spacing">16</property>
+                    <child>
+                      <object class="GtkLabel" id="info_label">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="label" translatable="yes">label</property>
+                        <property name="wrap">True</property>
+                      </object>
+                      <packing>
+                        <property name="expand">True</property>
+                        <property name="fill">True</property>
+                      </packing>
+                    </child>
                   </object>
                   <packing>
                     <property name="expand">True</property>
@@ -52,10 +64,6 @@
                   </packing>
                 </child>
               </object>
-              <packing>
-                <property name="expand">True</property>
-                <property name="fill">True</property>
-              </packing>
             </child>
           </object>
         </child>
@@ -102,10 +110,6 @@
               </packing>
             </child>
           </object>
-          <packing>
-            <property name="expand">True</property>
-            <property name="fill">True</property>
-          </packing>
         </child>
       </object>
     </child>

src/ui/main-window.ui

@@ -10,61 +10,61 @@
     <property name="show_menubar">False</property>
     <signal name="delete-event" handler="gtk_widget_hide_on_delete"/>
     <child>
-      <object class="GtkBox">
+      <object class="GtkOverlay">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="orientation">vertical</property>
+        <child type="overlay">
-        <child>
+          <object class="GtkRevealer" id="info_revealer">
-          <object class="GtkInfoBar" id="info">
+            <property name="visible">True</property>
             <property name="can_focus">False</property>
-            <property name="no_show_all">True</property>
+            <property name="valign">start</property>
-            <property name="show_close_button">True</property>
+            <property name="reveal-child">False</property>
-            <signal name="response" handler="info_response_cb" swapped="no"/>
+            <property name="transition-type">slide-down</property>
-            <child internal-child="action_area">
+            <child>
-              <object class="GtkButtonBox">
+              <object class="GtkInfoBar" id="info">
+                <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="spacing">6</property>
+                <property name="show_close_button">True</property>
-                <property name="layout_style">end</property>
+                <signal name="response" handler="info_response_cb" swapped="no"/>
-                <child>
+                <child internal-child="action_area">
-                  <placeholder/>
+                  <object class="GtkButtonBox">
-                </child>
-              </object>
-              <packing>
-                <property name="expand">False</property>
-                <property name="fill">False</property>
-                <property name="position">0</property>
-              </packing>
-            </child>
-            <child internal-child="content_area">
-              <object class="GtkBox">
-                <property name="can_focus">False</property>
-                <property name="spacing">16</property>
-                <child>
-                  <object class="GtkLabel" id="info_label">
-                    <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <property name="label" translatable="yes">label</property>
+                    <property name="spacing">6</property>
-                    <property name="wrap">True</property>
+                    <property name="layout_style">end</property>
+                    <child>
+                      <placeholder/>
+                    </child>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">False</property>
+                  </packing>
+                </child>
+                <child internal-child="content_area">
+                  <object class="GtkBox">
+                    <property name="can_focus">False</property>
+                    <property name="spacing">16</property>
+                    <child>
+                      <object class="GtkLabel" id="info_label">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="label" translatable="yes">label</property>
+                        <property name="wrap">True</property>
+                      </object>
+                      <packing>
+                        <property name="expand">True</property>
+                        <property name="fill">True</property>
+                      </packing>
+                    </child>
                   </object>
                   <packing>
                     <property name="expand">True</property>
                     <property name="fill">True</property>
-                    <property name="position">0</property>
                   </packing>
                 </child>
               </object>
-              <packing>
-                <property name="expand">True</property>
-                <property name="fill">True</property>
-                <property name="position">0</property>
-              </packing>
             </child>
           </object>
-          <packing>
-            <property name="expand">True</property>
-            <property name="fill">True</property>
-            <property name="position">1</property>
-          </packing>
         </child>
         <child>
           <object class="GtkStack" id="main_stack">
@@ -81,11 +81,6 @@
               </packing>
             </child>
           </object>
-          <packing>
-            <property name="expand">True</property>
-            <property name="fill">True</property>
-            <property name="position">2</property>
-          </packing>
         </child>
       </object>
     </child>