font chooser: Add a tweak page

gtk/gtkfontchooserdialog.c

@@ -12,7 +12,8 @@
  * Lesser General Public License for more details.
  *
  * You should have received a copy of the GNU Lesser General Public
- * License along with this library. If not, see <http://www.gnu.org/licenses/>.
+ * License along with this library. If not, see <http://www.gnu.org/licenses/>
+ *
  */
 
 #include "config.h"
@@ -37,6 +38,9 @@
 #include "gtkwidget.h"
 #include "gtksettings.h"
 #include "gtkdialogprivate.h"
+#include "gtktogglebutton.h"
+#include "gtkheaderbar.h"
+#include "gtkactionable.h"
 
 struct _GtkFontChooserDialogPrivate
 {
@@ -44,6 +48,7 @@ struct _GtkFontChooserDialogPrivate
 
   GtkWidget *select_button;
   GtkWidget *cancel_button;
+  GtkWidget *tweak_button;
 };
 
 /**
@@ -137,6 +142,54 @@ gtk_font_chooser_dialog_key_press_event (GtkWidget   *dialog,
   return handled;
 }
 
+static void
+setup_tweak_button (GtkFontChooserDialog *dialog)
+{
+  gboolean use_header;
+
+  if (dialog->priv->tweak_button)
+    return;
+
+  g_object_get (dialog, "use-header-bar", &use_header, NULL);
+  if (use_header)
+    {
+      GtkWidget *button;
+      GtkWidget *image;
+      GtkWidget *header;
+      GActionGroup *actions;
+
+      actions = G_ACTION_GROUP (g_simple_action_group_new ());
+      g_action_map_add_action (G_ACTION_MAP (actions), gtk_font_chooser_widget_get_tweak_action (dialog->priv->fontchooser));
+      gtk_widget_insert_action_group (GTK_WIDGET (dialog), "font", actions);
+      g_object_unref (actions);
+
+      button = gtk_toggle_button_new ();
+      gtk_widget_show (button);
+      gtk_actionable_set_action_name (GTK_ACTIONABLE (button), "font.tweak");
+      gtk_widget_set_focus_on_click (button, FALSE);
+      gtk_widget_set_valign (button, GTK_ALIGN_CENTER);
+
+      image = gtk_image_new_from_icon_name ("emblem-system-symbolic", GTK_ICON_SIZE_BUTTON);
+      gtk_widget_show (image);
+      gtk_container_add (GTK_CONTAINER (button), image);
+
+      header = gtk_dialog_get_header_bar (GTK_DIALOG (dialog));
+      gtk_header_bar_pack_end (GTK_HEADER_BAR (header), button);
+
+      dialog->priv->tweak_button = button;
+    }
+}
+
+static void
+gtk_font_chooser_dialog_map (GtkWidget *widget)
+{
+  GtkFontChooserDialog *dialog = GTK_FONT_CHOOSER_DIALOG (widget);
+
+  setup_tweak_button (dialog);
+
+  GTK_WIDGET_CLASS (gtk_font_chooser_dialog_parent_class)->map (widget);
+}
+
 static void
 gtk_font_chooser_dialog_class_init (GtkFontChooserDialogClass *klass)
 {
@@ -147,6 +200,7 @@ gtk_font_chooser_dialog_class_init (GtkFontChooserDialogClass *klass)
   gobject_class->set_property = gtk_font_chooser_dialog_set_property;
 
   widget_class->key_press_event = gtk_font_chooser_dialog_key_press_event;
+  widget_class->map = gtk_font_chooser_dialog_map;
 
   _gtk_font_chooser_install_properties (gobject_class);
 
@@ -156,6 +210,8 @@ gtk_font_chooser_dialog_class_init (GtkFontChooserDialogClass *klass)
 					       "/org/gtk/libgtk/ui/gtkfontchooserdialog.ui");
 
   gtk_widget_class_bind_template_child_private (widget_class, GtkFontChooserDialog, fontchooser);
+  gtk_widget_class_bind_template_child_private (widget_class, GtkFontChooserDialog, select_button);
+  gtk_widget_class_bind_template_child_private (widget_class, GtkFontChooserDialog, cancel_button);
   gtk_widget_class_bind_template_callback (widget_class, font_activated_cb);
 }
 
@@ -190,10 +246,6 @@ G_GNUC_BEGIN_IGNORE_DEPRECATIONS
                                            GTK_RESPONSE_CANCEL,
                                            -1);
 G_GNUC_END_IGNORE_DEPRECATIONS
-
-  priv->select_button = gtk_dialog_get_widget_for_response (GTK_DIALOG (fontchooserdiag), GTK_RESPONSE_OK);
-  priv->cancel_button = gtk_dialog_get_widget_for_response (GTK_DIALOG (fontchooserdiag), GTK_RESPONSE_CANCEL);
-
   _gtk_font_chooser_set_delegate (GTK_FONT_CHOOSER (fontchooserdiag),
                                   GTK_FONT_CHOOSER (priv->fontchooser));
 

gtk/gtkfontchooserwidget.c

@@ -80,6 +80,7 @@
 
 struct _GtkFontChooserWidgetPrivate
 {
+  GtkWidget    *stack;
   GtkWidget    *search_entry;
   GtkWidget    *family_face_list;
   GtkTreeViewColumn *family_face_column;
@@ -90,11 +91,14 @@ struct _GtkFontChooserWidgetPrivate
   GtkTreeModel *filter_model;
 
   GtkWidget       *preview;
+  GtkWidget       *preview2;
+  GtkWidget       *font_name_label;
   gchar           *preview_text;
   gboolean         show_preview_entry;
 
   GtkWidget *size_spin;
   GtkWidget *size_slider;
+  GtkWidget *size_slider2;
 
   PangoFontMap         *font_map;
 
@@ -108,6 +112,8 @@ struct _GtkFontChooserWidgetPrivate
   guint last_fontconfig_timestamp;
 
   GtkFontChooserLevel level;
+
+  GAction *tweak_action;
 };
 
 
@@ -121,6 +127,11 @@ struct _GtkFontChooserWidgetPrivate
 #define FONT_STYLE_LIST_WIDTH 170
 #define FONT_SIZE_LIST_WIDTH  60
 
+enum {
+  PROP_ZERO,
+  PROP_TWEAK_ACTION
+};
+
 /* Keep in line with GtkTreeStore defined in gtkfontchooserwidget.ui */
 enum {
   FAMILY_COLUMN,
@@ -185,6 +196,8 @@ static void selection_changed (GtkTreeSelection *selection,
 static void                gtk_font_chooser_widget_set_level (GtkFontChooserWidget *fontchooser,
                                                               GtkFontChooserLevel   level);
 static GtkFontChooserLevel gtk_font_chooser_widget_get_level (GtkFontChooserWidget *fontchooser);
+static void selection_changed (GtkTreeSelection *selection,
+                               GtkFontChooserWidget *fontchooser);
 
 static void gtk_font_chooser_widget_iface_init (GtkFontChooserIface *iface);
 
@@ -291,6 +304,9 @@ gtk_font_chooser_widget_get_property (GObject         *object,
 
   switch (prop_id)
     {
+    case PROP_TWEAK_ACTION:
+      g_value_set_object (value, G_OBJECT (fontchooser->priv->tweak_action));
+      break;
     case GTK_FONT_CHOOSER_PROP_FONT:
       g_value_take_string (value, gtk_font_chooser_widget_get_font (fontchooser));
       break;
@@ -428,6 +444,7 @@ gtk_font_chooser_widget_update_marks (GtkFontChooserWidget *fontchooser)
     }
 
   gtk_scale_clear_marks (GTK_SCALE (priv->size_slider));
+  gtk_scale_clear_marks (GTK_SCALE (priv->size_slider2));
 
   adj        = gtk_range_get_adjustment (GTK_RANGE (priv->size_slider));
   spin_adj   = gtk_spin_button_get_adjustment (GTK_SPIN_BUTTON (priv->size_spin));
@@ -456,6 +473,9 @@ gtk_font_chooser_widget_update_marks (GtkFontChooserWidget *fontchooser)
       gtk_scale_add_mark (GTK_SCALE (priv->size_slider),
                           sizes[i],
                           GTK_POS_BOTTOM, NULL);
+      gtk_scale_add_mark (GTK_SCALE (priv->size_slider2),
+                          sizes[i],
+                          GTK_POS_BOTTOM, NULL);
     }
 
   g_free (font_sizes);
@@ -585,21 +605,53 @@ row_deleted_cb  (GtkTreeModel *model,
     gtk_stack_set_visible_child_name (GTK_STACK (priv->list_stack), "empty");
 }
 
+static void
+gtk_font_chooser_widget_map (GtkWidget *widget)
+{
+  GtkFontChooserWidget *fontchooser = GTK_FONT_CHOOSER_WIDGET (widget);
+  GtkFontChooserWidgetPrivate *priv = fontchooser->priv;
+
+  gtk_entry_set_text (GTK_ENTRY (priv->search_entry), "");
+  gtk_stack_set_visible_child_name (GTK_STACK (priv->stack), "list");
+  g_simple_action_set_state (G_SIMPLE_ACTION (priv->tweak_action), g_variant_new_boolean (FALSE));
+
+  GTK_WIDGET_CLASS (gtk_font_chooser_widget_parent_class)->map (widget);
+}
+
 static void
 gtk_font_chooser_widget_class_init (GtkFontChooserWidgetClass *klass)
 {
   GObjectClass *gobject_class = G_OBJECT_CLASS (klass);
   GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (klass);
+  GParamSpec *pspec;
 
   g_type_ensure (GTK_TYPE_DELAYED_FONT_DESCRIPTION);
   g_type_ensure (G_TYPE_THEMED_ICON);
 
   widget_class->screen_changed = gtk_font_chooser_widget_screen_changed;
+  widget_class->map = gtk_font_chooser_widget_map;
 
   gobject_class->finalize = gtk_font_chooser_widget_finalize;
   gobject_class->set_property = gtk_font_chooser_widget_set_property;
   gobject_class->get_property = gtk_font_chooser_widget_get_property;
 
+  /**
+   * GtkFontChooserWidget:tweak-action:
+   *
+   * A toggle action that can be used to switch to the tweak page
+   * of the font chooser widget, which lets the user tweak the
+   * OpenType features and variation axes of the selected font.
+   *
+   * The action will be enabled or disabled depending on whether
+   * the selected font has any features or axes.
+   */
+  pspec = g_param_spec_object ("tweak-action",
+                               P_("The tweak action"),
+                               P_("The toggle action to switch to the tweak page"),
+                               G_TYPE_ACTION,
+                               G_PARAM_READABLE | G_PARAM_STATIC_STRINGS);
+  g_object_class_install_property (gobject_class, PROP_TWEAK_ACTION, pspec);
+
   _gtk_font_chooser_install_properties (gobject_class);
 
   /* Bind class to template */
@@ -615,8 +667,12 @@ gtk_font_chooser_widget_class_init (GtkFontChooserWidgetClass *klass)
   gtk_widget_class_bind_template_child_private (widget_class, GtkFontChooserWidget, model);
   gtk_widget_class_bind_template_child_private (widget_class, GtkFontChooserWidget, filter_model);
   gtk_widget_class_bind_template_child_private (widget_class, GtkFontChooserWidget, preview);
+  gtk_widget_class_bind_template_child_private (widget_class, GtkFontChooserWidget, preview2);
   gtk_widget_class_bind_template_child_private (widget_class, GtkFontChooserWidget, size_spin);
   gtk_widget_class_bind_template_child_private (widget_class, GtkFontChooserWidget, size_slider);
+  gtk_widget_class_bind_template_child_private (widget_class, GtkFontChooserWidget, size_slider2);
+  gtk_widget_class_bind_template_child_private (widget_class, GtkFontChooserWidget, stack);
+  gtk_widget_class_bind_template_child_private (widget_class, GtkFontChooserWidget, font_name_label);
 
   gtk_widget_class_bind_template_callback (widget_class, text_changed_cb);
   gtk_widget_class_bind_template_callback (widget_class, stop_search_cb);
@@ -634,6 +690,28 @@ gtk_font_chooser_widget_class_init (GtkFontChooserWidgetClass *klass)
   gtk_widget_class_set_css_name (widget_class, "fontchooser");
 }
 
+static void
+change_tweak (GSimpleAction *action,
+              GVariant      *state,
+              gpointer       data)
+{
+  GtkFontChooserWidget *fontchooser = data;
+  gboolean tweak = g_variant_get_boolean (state);
+
+  if (tweak)
+    {
+      gtk_entry_grab_focus_without_selecting (GTK_ENTRY (fontchooser->priv->preview2));
+      gtk_stack_set_visible_child_name (GTK_STACK (fontchooser->priv->stack), "tweaks");
+    }
+  else
+    {
+      gtk_entry_grab_focus_without_selecting (GTK_ENTRY (fontchooser->priv->search_entry));
+      gtk_stack_set_visible_child_name (GTK_STACK (fontchooser->priv->stack), "list");
+    }
+
+  g_simple_action_set_state (action, state);
+}
+
 static void
 gtk_font_chooser_widget_init (GtkFontChooserWidget *fontchooser)
 {
@@ -672,6 +750,9 @@ gtk_font_chooser_widget_init (GtkFontChooserWidget *fontchooser)
                                            fontchooser,
                                            NULL);
 
+  priv->tweak_action = G_ACTION (g_simple_action_new_stateful ("tweak", NULL, g_variant_new_boolean (FALSE)));
+  g_signal_connect (priv->tweak_action, "change-state", G_CALLBACK (change_tweak), fontchooser);
+
   /* Load data and set initial style-dependent parameters */
   gtk_font_chooser_widget_load_fonts (fontchooser, TRUE);
   gtk_font_chooser_widget_set_cell_size (fontchooser);
@@ -971,6 +1052,8 @@ gtk_font_chooser_widget_finalize (GObject *object)
 
   g_clear_object (&priv->font_map);
 
+  g_object_unref (priv->tweak_action);
+
   G_OBJECT_CLASS (gtk_font_chooser_widget_parent_class)->finalize (object);
 }
 
@@ -1149,12 +1232,69 @@ gtk_font_chooser_widget_set_font (GtkFontChooserWidget *fontchooser,
   gtk_font_chooser_widget_take_font_desc (fontchooser, font_desc);
 }
 
+static void
+gtk_font_chooser_widget_update_font_name (GtkFontChooserWidget *fontchooser,
+                                          GtkTreeSelection     *selection)
+{
+  GtkFontChooserWidgetPrivate *priv = fontchooser->priv;
+  GtkTreeModel *model;
+  GtkTreeIter iter;
+  PangoFontFamily *family;
+  PangoFontFace *face;
+  GtkDelayedFontDescription *desc;
+  const PangoFontDescription *font_desc;
+  PangoAttrList *attrs;
+  const char *fam_name;
+  const char *face_name;
+  char *title;
+
+  gtk_tree_selection_get_selected (selection, &model, &iter);
+  gtk_tree_model_get (model, &iter,
+                      FAMILY_COLUMN, &family,
+                      FACE_COLUMN, &face,
+                      FONT_DESC_COLUMN, &desc,
+                      -1);
+
+  fam_name = pango_font_family_get_name (family);
+  face_name = pango_font_face_get_face_name (face);
+  font_desc = gtk_delayed_font_description_get (desc);
+
+  g_object_unref (family);
+  g_object_unref (face);
+  gtk_delayed_font_description_unref (desc);
+
+  if (priv->level == GTK_FONT_CHOOSER_LEVEL_FAMILY)
+    title = g_strdup (fam_name);
+  else
+    title = g_strconcat (fam_name, " ", face_name, NULL);
+
+  attrs = gtk_font_chooser_widget_get_preview_attributes (fontchooser, font_desc);
+  gtk_label_set_attributes (GTK_LABEL (priv->font_name_label), attrs);
+  pango_attr_list_unref (attrs);
+
+  gtk_label_set_label (GTK_LABEL (priv->font_name_label), title);
+  g_free (title);
+}
+
 static void
 selection_changed (GtkTreeSelection     *selection,
                    GtkFontChooserWidget *fontchooser)
 {
+  GtkFontChooserWidgetPrivate *priv = fontchooser->priv;
+
   g_object_notify (G_OBJECT (fontchooser), "font");
   g_object_notify (G_OBJECT (fontchooser), "font-desc");
+
+  if (gtk_tree_selection_count_selected_rows (selection) > 0)
+    {
+      gtk_font_chooser_widget_update_font_name (fontchooser, selection);
+      g_simple_action_set_enabled (G_SIMPLE_ACTION (priv->tweak_action), TRUE);
+    }
+  else
+    {
+      g_simple_action_set_state (G_SIMPLE_ACTION (priv->tweak_action), g_variant_new_boolean (FALSE));
+      g_simple_action_set_enabled (G_SIMPLE_ACTION (priv->tweak_action), FALSE);
+    }
 }
 
 static void
@@ -1421,3 +1561,9 @@ gtk_font_chooser_widget_handle_event (GtkWidget   *widget,
 
   return gtk_search_entry_handle_event (GTK_SEARCH_ENTRY (priv->search_entry), event);
 }
+
+GAction *
+gtk_font_chooser_widget_get_tweak_action (GtkWidget *widget)
+{
+  return GTK_FONT_CHOOSER_WIDGET (widget)->priv->tweak_action;
+}

gtk/gtkfontchooserwidgetprivate.h

@@ -25,6 +25,8 @@ G_BEGIN_DECLS
 gboolean gtk_font_chooser_widget_handle_event (GtkWidget   *widget,
                                                GdkEventKey *event);
 
+GAction *gtk_font_chooser_widget_get_tweak_action (GtkWidget *fontchooser);
+
 G_END_DECLS
 
 #endif /* __GTK_FONT_CHOOSER_WIDGET_PRIVATE_H__ */

gtk/ui/gtkfontchooserdialog.ui

@@ -32,7 +32,7 @@
       </object>
     </child>
     <child type="action">
-      <object class="GtkButton" id="ok_button">
+      <object class="GtkButton" id="select_button">
         <property name="visible">1</property>
         <property name="label" translatable="yes">_Select</property>
         <property name="use-underline">1</property>
@@ -41,7 +41,7 @@
     </child>
     <action-widgets>
       <action-widget response="cancel">cancel_button</action-widget>
-      <action-widget response="ok" default="true">ok_button</action-widget>
+      <action-widget response="ok" default="true">select_button</action-widget>
     </action-widgets>
   </template>
 </interface>

gtk/ui/gtkfontchooserwidget.ui

@@ -32,185 +32,279 @@
   </object>
   <template class="GtkFontChooserWidget" parent="GtkBox">
     <child>
-      <object class="GtkGrid" id="grid1">
+      <object class="GtkStack" id="stack">
         <property name="visible">1</property>
-        <property name="row-spacing">6</property>
-        <property name="column-spacing">6</property>
         <child>
-          <object class="GtkSearchEntry" id="search_entry">
-            <property name="visible">1</property>
-            <property name="can-focus">1</property>
-            <property name="hexpand">1</property>
-            <property name="activates-default">1</property>
-            <property name="primary-icon-name">edit-find-symbolic</property>
-            <property name="primary-icon-activatable">0</property>
-            <property name="secondary-icon-activatable">0</property>
-            <property name="primary-icon-sensitive">0</property>
-            <property name="secondary-icon-sensitive">0</property>
-            <property name="placeholder-text" translatable="yes">Search font name</property>
-            <signal name="search-changed" handler="text_changed_cb" swapped="no"/>
-            <signal name="stop-search" handler="stop_search_cb" swapped="no"/>
-          </object>
-          <packing>
-            <property name="left-attach">0</property>
-            <property name="top-attach">0</property>
-            <property name="width">2</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkStack" id="list_stack">
+          <object class="GtkGrid" id="grid1">
             <property name="visible">1</property>
+            <property name="row-spacing">6</property>
+            <property name="column-spacing">6</property>
             <child>
-              <object class="GtkGrid">
+              <object class="GtkSearchEntry" id="search_entry">
+                <property name="visible">1</property>
+                <property name="can-focus">1</property>
+                <property name="hexpand">1</property>
+                <property name="activates-default">1</property>
+                <property name="primary-icon-name">edit-find-symbolic</property>
+                <property name="primary-icon-activatable">0</property>
+                <property name="secondary-icon-activatable">0</property>
+                <property name="primary-icon-sensitive">0</property>
+                <property name="secondary-icon-sensitive">0</property>
+                <property name="placeholder-text" translatable="yes">Search font name</property>
+                <signal name="search-changed" handler="text_changed_cb" swapped="no"/>
+                <signal name="stop-search" handler="stop_search_cb" swapped="no"/>
+              </object>
+              <packing>
+                <property name="left-attach">0</property>
+                <property name="top-attach">0</property>
+                <property name="width">2</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkStack" id="list_stack">
                 <property name="visible">1</property>
-                <property name="row-spacing">6</property>
-                <property name="column-spacing">6</property>
                 <child>
-                  <object class="GtkScrolledWindow" id="list_scrolled_window">
-                    <property name="width-request">400</property>
-                    <property name="height-request">300</property>
+                  <object class="GtkGrid">
                     <property name="visible">1</property>
-                    <property name="can-focus">1</property>
-                    <property name="hexpand">1</property>
-                    <property name="vexpand">1</property>
-                    <property name="hscrollbar-policy">never</property>
-                    <property name="shadow-type">etched-in</property>
+                    <property name="row-spacing">6</property>
+                    <property name="column-spacing">6</property>
                     <child>
-                      <object class="GtkTreeView" id="family_face_list">
+                      <object class="GtkScrolledWindow" id="list_scrolled_window">
+                        <property name="width-request">400</property>
+                        <property name="height-request">300</property>
                         <property name="visible">1</property>
                         <property name="can-focus">1</property>
-                        <property name="model">filter_model</property>
-                        <property name="headers-visible">0</property>
-                        <property name="enable-search">0</property>
-                        <property name="fixed-height-mode">1</property>
-                        <signal name="cursor-changed" handler="cursor_changed_cb" swapped="no"/>
-                        <signal name="row-activated" handler="row_activated_cb" swapped="no"/>
-                        <signal name="style-updated" handler="gtk_font_chooser_widget_set_cell_size" object="GtkFontChooserWidget" after="yes" swapped="yes"/>
-                        <child internal-child="selection">
-                          <object class="GtkTreeSelection" id="treeview-selection1">
-                            <property name="mode">browse</property>
-                            <signal name="changed" handler="selection_changed"/>
-                          </object>
-                        </child>
+                        <property name="hexpand">1</property>
+                        <property name="vexpand">1</property>
+                        <property name="hscrollbar-policy">never</property>
+                        <property name="shadow-type">etched-in</property>
                         <child>
-                          <object class="GtkTreeViewColumn" id="family_face_column">
-                            <property name="sizing">fixed</property>
-                            <property name="title" translatable="yes">Font Family</property>
+                          <object class="GtkTreeView" id="family_face_list">
+                            <property name="visible">1</property>
+                            <property name="can-focus">1</property>
+                            <property name="model">filter_model</property>
+                            <property name="headers-visible">0</property>
+                            <property name="enable-search">0</property>
+                            <property name="fixed-height-mode">1</property>
+                            <signal name="cursor-changed" handler="cursor_changed_cb" swapped="no"/>
+                            <signal name="row-activated" handler="row_activated_cb" swapped="no"/>
+                            <signal name="style-updated" handler="gtk_font_chooser_widget_set_cell_size" object="GtkFontChooserWidget" after="yes" swapped="yes"/>
+                            <child internal-child="selection">
+                              <object class="GtkTreeSelection" id="treeview-selection1">
+                                <property name="mode">browse</property>
+                                <signal name="changed" handler="selection_changed"/>
+                              </object>
+                            </child>
                             <child>
-                              <object class="GtkCellRendererText" id="family_face_cell">
-                                <property name="ellipsize">end</property>
+                              <object class="GtkTreeViewColumn" id="family_face_column">
+                                <property name="sizing">fixed</property>
+                                <property name="title" translatable="yes">Font Family</property>
+                                <child>
+                                  <object class="GtkCellRendererText" id="family_face_cell">
+                                    <property name="ellipsize">end</property>
+                                  </object>
+                                </child>
                               </object>
                             </child>
                           </object>
                         </child>
                       </object>
+                      <packing>
+                        <property name="left-attach">0</property>
+                        <property name="top-attach">1</property>
+                        <property name="width">2</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkEntry" id="preview">
+                        <property name="visible">1</property>
+                        <property name="can-focus">1</property>
+                        <property name="invisible-char">•</property>
+                        <property name="placeholder-text" translatable="yes">Preview text</property>
+                        <signal name="scroll-event" handler="resize_by_scroll_cb" swapped="no"/>
+                      </object>
+                      <packing>
+                        <property name="left-attach">0</property>
+                        <property name="top-attach">2</property>
+                        <property name="width">2</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkScale" id="size_slider">
+                        <property name="visible">1</property>
+                        <property name="can-focus">1</property>
+                        <property name="hexpand">1</property>
+                        <property name="adjustment">slider_adjustment</property>
+                        <property name="draw-value">0</property>
+                        <property name="round-digits">0</property>
+                        <property name="valign">baseline</property>
+                        <signal name="scroll-event" handler="resize_by_scroll_cb" swapped="no"/>
+                      </object>
+                      <packing>
+                        <property name="left-attach">0</property>
+                        <property name="top-attach">3</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkSpinButton" id="size_spin">
+                        <property name="visible">1</property>
+                        <property name="can-focus">1</property>
+                        <property name="invisible-char">•</property>
+                        <property name="valign">baseline</property>
+                        <property name="adjustment">spin_adjustment</property>
+                        <signal name="output" handler="output_cb"/>
+                      </object>
+                      <packing>
+                        <property name="left-attach">1</property>
+                        <property name="top-attach">3</property>
+                      </packing>
                     </child>
                   </object>
                   <packing>
-                    <property name="left-attach">0</property>
-                    <property name="top-attach">1</property>
-                    <property name="width">2</property>
+                    <property name="name">list</property>
                   </packing>
                 </child>
                 <child>
-                  <object class="GtkEntry" id="preview">
+                  <object class="GtkGrid">
                     <property name="visible">1</property>
-                    <property name="can-focus">1</property>
-                    <property name="invisible-char">•</property>
-                    <property name="placeholder-text" translatable="yes">Preview text</property>
-                    <signal name="scroll-event" handler="resize_by_scroll_cb" swapped="no"/>
+                    <property name="row-spacing">12</property>
+                    <property name="hexpand">1</property>
+                    <property name="vexpand">1</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                    <style>
+                      <class name="dim-label"/>
+                    </style>
+                    <child>
+                      <object class="GtkImage">
+                        <property name="visible">1</property>
+                        <property name="gicon">fonticon</property>
+                        <property name="pixel-size">64</property>
+                      </object>
+                      <packing>
+                        <property name="left-attach">0</property>
+                        <property name="top-attach">0</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="visible">1</property>
+                        <property name="label" translatable="yes">No Fonts Found</property>
+                        <attributes>
+                          <attribute name="weight" value="bold"/>
+                          <attribute name="scale" value="1.2"/>
+                        </attributes>
+                      </object>
+                      <packing>
+                        <property name="left-attach">0</property>
+                        <property name="top-attach">1</property>
+                      </packing>
+                    </child>
                   </object>
                   <packing>
-                    <property name="left-attach">0</property>
-                    <property name="top-attach">2</property>
-                    <property name="width">2</property>
+                    <property name="name">empty</property>
                   </packing>
                 </child>
+              </object>
+              <packing>
+                <property name="left-attach">0</property>
+                <property name="top-attach">1</property>
+                <property name="width">2</property>
+              </packing>
+            </child>
+          </object>
+          <packing>
+            <property name="name">list</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkBox">
+            <property name="visible">1</property>
+            <property name="orientation">vertical</property>
+            <property name="spacing">12</property>
+            <property name="margin">12</property>
+
+             <child>
+-              <object class="GtkLabel" id="font_name_label">
+                 <property name="visible">1</property>
+-                <property name="margin-top">6</property>
+-                <property name="margin-bottom">6</property>
+-                <property name="margin-start">12</property>
+-                <property name="margin-end">12</property>
+-                <property name="ellipsize">end</property>
+-                <property name="xalign">0</property>
+-              </object>
+-            </child>
+-            <child>
+-              <object class="GtkEntry" id="preview2">
+                 <property name="visible">1</property>
+-                <property name="can-focus">1</property>
+-                <property name="placeholder-text" translatable="yes">Preview text</property>
+-                <property name="text" bind-source="preview" bind-property="text" bind-flags="bidirectional"/>
+-                <property name="attributes" bind-source="preview" bind-property="attributes" bind-flags="bidirectional"/>
+               </object>
+             </child>
+`
+            <child>
+              <object class="GtkBox">
+                <property name="spacing">6</property>
+                <property name="visible">1</property>
                 <child>
-                  <object class="GtkScale" id="size_slider">
+                  <object class="GtkLabel" id="size_label2">
+                    <property name="visible">1</property>
+                    <property name="label" translatable="yes">Size</property>
+                    <property name="xalign">0</property>
+                    <property name="valign">baseline</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkScale" id="size_slider2">
                     <property name="visible">1</property>
                     <property name="can-focus">1</property>
                     <property name="hexpand">1</property>
                     <property name="adjustment">slider_adjustment</property>
                     <property name="draw-value">0</property>
                     <property name="round-digits">0</property>
+                    <property name="valign">baseline</property>
                     <signal name="scroll-event" handler="resize_by_scroll_cb" swapped="no"/>
                   </object>
-                  <packing>
-                    <property name="left-attach">0</property>
-                    <property name="top-attach">3</property>
-                  </packing>
                 </child>
                 <child>
-                  <object class="GtkSpinButton" id="size_spin">
+                  <object class="GtkSpinButton" id="size_spin2">
                     <property name="visible">1</property>
                     <property name="can-focus">1</property>
-                    <property name="invisible-char">•</property>
                     <property name="adjustment">spin_adjustment</property>
+                    <property name="valign">baseline</property>
                     <signal name="output" handler="output_cb"/>
                   </object>
-                  <packing>
-                    <property name="left-attach">1</property>
-                    <property name="top-attach">3</property>
-                  </packing>
                 </child>
               </object>
-              <packing>
-                <property name="name">list</property>
-              </packing>
             </child>
             <child>
-              <object class="GtkGrid">
+              <object class="GtkBox" id="feature_box">
                 <property name="visible">1</property>
-                <property name="row-spacing">12</property>
-                <property name="hexpand">1</property>
-                <property name="vexpand">1</property>
-                <property name="halign">center</property>
-                <property name="valign">center</property>
-                <style>
-                  <class name="dim-label"/>
-                </style>
+                <property name="orientation">vertical</property>
+                <property name="spacing">12</property>
                 <child>
-                  <object class="GtkImage">
-                    <property name="visible">1</property>
-                    <property name="gicon">fonticon</property>
-                    <property name="pixel-size">64</property>
+                  <object class="GtkComboBox" id="feature_language_combo">
+                    <property name="halign">start</property>
+                    <property name="margin-top">10</property>
+                    <child>
+                      <object class="GtkCellRendererText"/>
+                      <attributes>
+                        <attribute name="text">0</attribute>
+                      </attributes>
+                    </child>
                   </object>
-                  <packing>
-                    <property name="left-attach">0</property>
-                    <property name="top-attach">0</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">1</property>
-                    <property name="label" translatable="yes">No Fonts Found</property>
-                    <attributes>
-                      <attribute name="weight" value="bold"/>
-                      <attribute name="scale" value="1.2"/>
-                    </attributes>
-                  </object>
-                  <packing>
-                    <property name="left-attach">0</property>
-                    <property name="top-attach">1</property>
-                  </packing>
                 </child>
               </object>
-              <packing>
-                <property name="name">empty</property>
-              </packing>
             </child>
           </object>
           <packing>
-            <property name="left-attach">0</property>
-            <property name="top-attach">1</property>
-            <property name="width">2</property>
+            <property name="name">tweaks</property>
           </packing>
         </child>
       </object>
-      <packing>
-        <property name="expand">1</property>
-      </packing>
     </child>
   </template>
   <object class="GThemedIcon" id="fonticon">