NewCallBox+CallDisplay: UI facelift

This adds a style.css file to allow the use of custom css

Fixes https://source.puri.sm/Librem5/calls/issues/115:
- Making the phone number larger
- Moving the delete button to the bottom
- Rounding all buttons, and making the grid buttons circular
- Making the call button a bit less wide

src/calls-application.c

@@ -158,6 +158,28 @@ static const GActionEntry actions[] =
 };
 
 
+static void
+css_setup ()
+{
+  GtkCssProvider *provider;
+  GFile *file;
+  GError *error = NULL;
+
+  provider = gtk_css_provider_new ();
+  file = g_file_new_for_uri ("resource:///sm/puri/calls/style.css");
+
+  if (!gtk_css_provider_load_from_file (provider, file, &error)) {
+    g_warning ("Failed to load CSS file: %s", error->message);
+    g_clear_error (&error);
+    g_object_unref (file);
+    return;
+  }
+  gtk_style_context_add_provider_for_screen (gdk_screen_get_default (),
+                                             GTK_STYLE_PROVIDER (provider), 600);
+  g_object_unref (file);
+}
+
+
 static void
 startup (GApplication *application)
 {
@@ -175,6 +197,8 @@ startup (GApplication *application)
                                    actions,
                                    G_N_ELEMENTS (actions),
                                    application);
+
+  css_setup ();
 }
 
 

src/calls-new-call-box.c

@@ -298,24 +298,6 @@ calls_new_call_box_init (CallsNewCallBox *self)
 }
 
 
-static void
-constructed (GObject *object)
-{
-  GObjectClass *parent_class = g_type_class_peek (G_TYPE_OBJECT);
-  CallsNewCallBox *self = CALLS_NEW_CALL_BOX (object);
-  GtkWidget *entry = hdy_keypad_get_entry (self->keypad);
-  PangoAttrList *attrs;
-
-  // Increase the size of the number entry text
-  attrs = pango_attr_list_new ();
-  pango_attr_list_insert (attrs, pango_attr_scale_new (1.2));
-  gtk_entry_set_attributes (GTK_ENTRY (entry), attrs);
-  pango_attr_list_unref (attrs);
-
-  parent_class->constructed (object);
-}
-
-
 static void
 dispose (GObject *object)
 {
@@ -340,7 +322,6 @@ calls_new_call_box_class_init (CallsNewCallBoxClass *klass)
   GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (klass);
 
   object_class->set_property = set_property;
-  object_class->constructed = constructed;
   object_class->dispose = dispose;
 
 

src/calls.gresources.xml

@@ -13,6 +13,7 @@
     <file preprocess="xml-stripblanks">call-record-row.ui</file>
   </gresource>
   <gresource prefix="/sm/puri/calls/">
+    <file>style.css</file>
     <file>new-call-symbolic.svg</file>
     <file>call-arrow-incoming-symbolic.svg</file>
     <file>call-arrow-incoming-missed-symbolic.svg</file>

src/style.css

@@ -0,0 +1,16 @@
+hdykeypad > button, .dial-button, .delete-button {
+  border-radius: 9999px;
+  -gtk-outline-radius: 9999px;
+}
+
+.dial-button {
+  padding: 19px 42px
+}
+
+.delete-button {
+  padding: 8px 12px;
+}
+
+.phone-number-entry {
+  font-size: 24px;
+}

src/ui/call-display.ui

@@ -404,6 +404,9 @@
                     <property name="xalign">0.5</property>
                     <signal name="delete-text" handler="block_delete_cb"/>
                     <signal name="insert-text" handler="insert_text_cb"/>
+                    <style>
+                      <class name="phone-number-entry"/>
+                    </style>
                   </object>
                 </child>
                 <child>

src/ui/new-call-box.ui

@@ -53,26 +53,9 @@
             <property name="hexpand">True</property>
             <property name="xalign">0.5</property>
             <property name="margin_right">6</property>
-          </object>
-        </child>
-        <child>
-          <object class="GtkButton" id="backspace">
-            <property name="always_show_image">True</property>
-            <property name="can_focus">True</property>
-            <property name="visible">True</property>
-            <property name="focus-on-click">False</property>
-            <signal name="clicked" handler="backspace_clicked_cb" swapped="yes"/>
-            <child internal-child="accessible">
-              <object class="AtkObject" id="a11y-backspace">
-                <property name="accessible-name" translatable="yes">Backspace through number</property>
-              </object>
-            </child>
-            <child>
-              <object class="GtkImage">
-                <property name="visible">True</property>
-                <property name="icon-name">edit-clear-symbolic</property>
-              </object>
-            </child>
+            <style>
+              <class name="phone-number-entry"/>
+            </style>
           </object>
         </child>
       </object>
@@ -97,49 +80,82 @@
       </packing>
     </child>
     <child>
-      <object class="GtkButton" id="dial">
-        <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">True</property>
-        <property name="valign">start</property>
+      <object class="GtkBox">
         <property name="visible">True</property>
-        <property name="width_request">150</property>
-        <signal name="clicked" handler="dial_clicked_cb" swapped="yes"/>
-        <style>
-          <class name="suggested-action"/>
-          <class name="image-button"/>
-        </style>
-        <child internal-child="accessible">
-          <object class="AtkObject" id="a11y-dial">
-            <property name="accessible-name" translatable="yes">Dial</property>
+        <property name="can_focus">False</property>
+        <property name="orientation">horizontal</property>
+        <child type="center">
+          <object class="GtkButton" id="dial">
+            <property name="always_show_image">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="visible">True</property>
+            <signal name="clicked" handler="dial_clicked_cb" swapped="yes"/>
+            <style>
+              <class name="suggested-action"/>
+              <class name="image-button"/>
+              <class name="dial-button"/>
+            </style>
+            <child internal-child="accessible">
+              <object class="AtkObject" id="a11y-dial">
+                <property name="accessible-name" translatable="yes">Dial</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkImage" id="back_image">
+                <property name="visible">True</property>
+                <property name="icon-name">call-start-symbolic</property>
+                <property name="icon-size">5</property>
+              </object>
+            </child>
           </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+          </packing>
         </child>
         <child>
-          <object class="GtkImage" id="back_image">
+          <object class="GtkButton" id="backspace">
+            <property name="always_show_image">True</property>
+            <property name="can_focus">True</property>
             <property name="visible">True</property>
-            <property name="icon-name">call-start-symbolic</property>
-            <property name="icon-size">5</property>
+            <property name="focus-on-click">False</property>
+            <property name="margin_right">15</property>
+            <property name="valign">center</property>
+            <property name="halign">center</property>
+            <signal name="clicked" handler="backspace_clicked_cb" swapped="yes"/>
+            <child internal-child="accessible">
+              <object class="AtkObject" id="a11y-backspace">
+                <property name="accessible-name" translatable="yes">Backspace through number</property>
+              </object>
+            </child>
+            <style>
+              <class name="delete-button"/>
+            </style>
+            <child>
+              <object class="GtkImage">
+                <property name="visible">True</property>
+                <property name="icon-name">edit-clear-symbolic</property>
+              </object>
+            </child>
           </object>
+          <packing>
+            <property name="pack_type">end</property>
+          </packing>
         </child>
       </object>
-      <packing>
-        <property name="expand">False</property>
-        <property name="fill">True</property>
-      </packing>
     </child>
     <child>
       <object class="GtkLabel" id="status">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <property name="wrap">True</property>
-       </object>
-       <packing>
-         <property name="expand">False</property>
-         <property name="fill">True</property>
-         <property name="padding">16</property>
-       </packing>
-     </child>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="fill">True</property>
+        <property name="padding">16</property>
+      </packing>
+    </child>
   </template>
 </interface>