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
This commit is contained in:
Julian Sparber
2020-01-28 16:35:02 +01:00
parent bcaf92d8d2
commit 06481155fd
6 changed files with 110 additions and 69 deletions

View File

@@ -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>