From 8821a37ed2b2914361ffc7a28a29357ac758a043 Mon Sep 17 00:00:00 2001
From: Mohammed Sadiq <sadiq@sadiqpk.org>
Date: Sat, 12 Oct 2019 14:51:00 +0530
Subject: [PATCH] info: Implement new design

This is based on the design at
https://teams.pages.gitlab.gnome.org/Design/web-experiments/settings/about
---
 panels/info-overview/cc-info-overview-panel.c | 145 ++++--
 .../info-overview/cc-info-overview-panel.ui   | 447 +++++++-----------
 2 files changed, 263 insertions(+), 329 deletions(-)

diff --git a/panels/info-overview/cc-info-overview-panel.c b/panels/info-overview/cc-info-overview-panel.c
index 34ae7e571..e304c4123 100644
--- a/panels/info-overview/cc-info-overview-panel.c
+++ b/panels/info-overview/cc-info-overview-panel.c
@@ -1,5 +1,6 @@
 /* -*- mode: C; c-file-style: "gnu"; indent-tabs-mode: nil; -*-
  *
+ * Copyright (C) 2019 Purism SPC
  * Copyright (C) 2017 Mohammed Sadiq <sadiq@sadiqpk.org>
  * Copyright (C) 2010 Red Hat, Inc
  * Copyright (C) 2008 William Jon McCann <jmccann@redhat.com>
@@ -48,23 +49,29 @@
 #include <gdk/gdkx.h>
 #endif
 
+#include "cc-list-row.h"
+#include "list-box-helper.h"
 #include "cc-info-overview-panel.h"
 
 struct _CcInfoOverviewPanel
 {
-  CcPanel parent_instance;
+  CcPanel          parent_instance;
 
-  GtkLabel  *disk_label;
-  GtkLabel  *graphics_label;
-  GtkLabel  *memory_label;
-  GtkLabel  *name_entry;
-  GtkLabel  *os_name_label;
-  GtkLabel  *os_type_label;
-  GtkLabel  *processor_label;
-  GtkButton *updates_button;
-  GtkLabel  *version_label;
-  GtkLabel  *virt_type_label;
-  GtkLabel  *virt_type_title_label;
+  GtkEntry        *device_name_entry;
+  CcListRow       *disk_row;
+  CcListRow       *gnome_version_row;
+  CcListRow       *graphics_row;
+  GtkListBox      *hardware_box;
+  GtkDialog       *hostname_editor;
+  CcHostnameEntry *hostname_entry;
+  CcListRow       *hostname_row;
+  CcListRow       *memory_row;
+  GtkListBox      *os_box;
+  CcListRow       *os_name_row;
+  CcListRow       *os_type_row;
+  CcListRow       *processor_row;
+  CcListRow       *software_updates_row;
+  CcListRow       *virtualization_row;
 };
 
 typedef struct
@@ -404,7 +411,7 @@ get_primary_disc_info (CcInfoOverviewPanel *self)
     {
       g_warning ("Unable to get UDisks client: %s. Disk information will not be available.",
                  error->message);
-      gtk_label_set_text (self->disk_label, _("Unknown"));
+      cc_list_row_set_secondary_label (self->disk_row,  _("Unknown"));
       return;
     }
 
@@ -430,11 +437,11 @@ get_primary_disc_info (CcInfoOverviewPanel *self)
   if (total_size > 0)
     {
       g_autofree gchar *size = g_format_size (total_size);
-      gtk_label_set_text (self->disk_label, size);
+      cc_list_row_set_secondary_label (self->disk_row, size);
     }
   else
     {
-      gtk_label_set_text (self->disk_label, _("Unknown"));
+      cc_list_row_set_secondary_label (self->disk_row,  _("Unknown"));
     }
 }
 
@@ -519,11 +526,12 @@ set_virtualization_label (CcInfoOverviewPanel *self,
   guint i;
 
   if (virt == NULL || *virt == '\0')
-  {
-    gtk_widget_hide (GTK_WIDGET (self->virt_type_label));
-    gtk_widget_hide (GTK_WIDGET (self->virt_type_title_label));
-    return;
-  }
+    {
+      gtk_widget_hide (GTK_WIDGET (self->virtualization_row));
+      return;
+    }
+
+  gtk_widget_show (GTK_WIDGET (self->virtualization_row));
 
   display_name = NULL;
   for (i = 0; i < G_N_ELEMENTS (virt_tech); i++)
@@ -535,7 +543,7 @@ set_virtualization_label (CcInfoOverviewPanel *self,
         }
     }
 
-  gtk_label_set_text (self->virt_type_label, display_name ? display_name : virt);
+  cc_list_row_set_secondary_label (self->virtualization_row, display_name ? display_name : virt);
 }
 
 static void
@@ -593,31 +601,27 @@ info_overview_panel_setup_overview (CcInfoOverviewPanel *self)
   g_autofree gchar *graphics_hardware_string = NULL;
 
   if (load_gnome_version (&gnome_version, NULL, NULL))
-    {
-      g_autofree gchar *text = NULL;
-      text = g_strdup_printf (_("Version %s"), gnome_version);
-      gtk_label_set_text (self->version_label, text);
-    }
+    cc_list_row_set_secondary_label (self->gnome_version_row, gnome_version);
 
   glibtop_get_mem (&mem);
   memory_text = g_format_size_full (mem.total, G_FORMAT_SIZE_IEC_UNITS);
-  gtk_label_set_text (self->memory_label, memory_text ? memory_text : "");
+  cc_list_row_set_secondary_label (self->memory_row, memory_text);
 
   info = glibtop_get_sysinfo ();
 
   cpu_text = get_cpu_info (info);
-  gtk_label_set_markup (self->processor_label, cpu_text ? cpu_text : "");
+  cc_list_row_set_secondary_markup (self->processor_row, cpu_text);
 
   os_type_text = get_os_type ();
-  gtk_label_set_text (self->os_type_label, os_type_text ? os_type_text : "");
+  cc_list_row_set_secondary_label (self->os_type_row, os_type_text);
 
   os_name_text = get_os_name ();
-  gtk_label_set_text (self->os_name_label, os_name_text ? os_name_text : "");
+  cc_list_row_set_secondary_label (self->os_name_row, os_name_text);
 
   get_primary_disc_info (self);
 
   graphics_hardware_string = get_graphics_hardware_string ();
-  gtk_label_set_markup (self->graphics_label, graphics_hardware_string);
+  cc_list_row_set_secondary_markup (self->graphics_row, graphics_hardware_string);
 }
 
 static gboolean
@@ -633,7 +637,7 @@ does_gpk_update_viewer_exist (void)
 }
 
 static void
-on_updates_button_clicked (CcInfoOverviewPanel *self)
+open_software_update (CcInfoOverviewPanel *self)
 {
   g_autoptr(GError) error = NULL;
   gboolean ret;
@@ -654,6 +658,50 @@ on_updates_button_clicked (CcInfoOverviewPanel *self)
       g_warning ("Failed to spawn %s: %s", argv[0], error->message);
 }
 
+static void
+open_hostname_edit_dialog (CcInfoOverviewPanel *self)
+{
+  GtkWindow *toplevel;
+  CcShell *shell;
+  const gchar *hostname;
+  gint response;
+
+  g_assert (CC_IS_INFO_OVERVIEW_PANEL (self));
+
+  shell = cc_panel_get_shell (CC_PANEL (self));
+  toplevel = GTK_WINDOW (cc_shell_get_toplevel (shell));
+  gtk_window_set_transient_for (GTK_WINDOW (self->hostname_editor), toplevel);
+
+  hostname = gtk_entry_get_text (GTK_ENTRY (self->hostname_entry));
+  gtk_entry_set_text (self->device_name_entry, hostname);
+  gtk_widget_grab_focus (GTK_WIDGET (self->device_name_entry));
+
+  response = gtk_dialog_run (self->hostname_editor);
+  gtk_widget_hide (GTK_WIDGET (self->hostname_editor));
+
+  if (response != GTK_RESPONSE_APPLY)
+    return;
+
+  /* We simply change the CcHostnameEntry text.  CcHostnameEntry
+   * listens to changes and updates hostname on change.
+   */
+  hostname = gtk_entry_get_text (self->device_name_entry);
+  gtk_entry_set_text (GTK_ENTRY (self->hostname_entry), hostname);
+}
+
+static void
+cc_info_panel_row_activated_cb (CcInfoOverviewPanel *self,
+                                CcListRow           *row)
+{
+  g_assert (CC_IS_INFO_OVERVIEW_PANEL (self));
+  g_assert (CC_IS_LIST_ROW (row));
+
+  if (row == self->hostname_row)
+    open_hostname_edit_dialog (self);
+  else if (row == self->software_updates_row)
+    open_software_update (self);
+}
+
 static void
 cc_info_overview_panel_class_init (CcInfoOverviewPanelClass *klass)
 {
@@ -661,20 +709,25 @@ cc_info_overview_panel_class_init (CcInfoOverviewPanelClass *klass)
 
   gtk_widget_class_set_template_from_resource (widget_class, "/org/gnome/control-center/info-overview/cc-info-overview-panel.ui");
 
-  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, disk_label);
-  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, graphics_label);
-  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, memory_label);
-  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, name_entry);
-  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, os_name_label);
-  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, os_type_label);
-  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, processor_label);
-  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, updates_button);
-  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, version_label);
-  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, virt_type_label);
-  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, virt_type_title_label);
+  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, device_name_entry);
+  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, disk_row);
+  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, gnome_version_row);
+  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, graphics_row);
+  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, hardware_box);
+  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, hostname_editor);
+  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, hostname_entry);
+  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, hostname_row);
+  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, memory_row);
+  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, os_box);
+  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, os_name_row);
+  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, os_type_row);
+  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, processor_row);
+  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, software_updates_row);
+  gtk_widget_class_bind_template_child (widget_class, CcInfoOverviewPanel, virtualization_row);
 
-  gtk_widget_class_bind_template_callback (widget_class, on_updates_button_clicked);
+  gtk_widget_class_bind_template_callback (widget_class, cc_info_panel_row_activated_cb);
 
+  g_type_ensure (CC_TYPE_LIST_ROW);
   g_type_ensure (CC_TYPE_HOSTNAME_ENTRY);
 }
 
@@ -682,11 +735,13 @@ static void
 cc_info_overview_panel_init (CcInfoOverviewPanel *self)
 {
   gtk_widget_init_template (GTK_WIDGET (self));
+  gtk_list_box_set_header_func (self->hardware_box, cc_list_box_update_header_func, NULL, NULL);
+  gtk_list_box_set_header_func (self->os_box, cc_list_box_update_header_func, NULL, NULL);
 
   g_resources_register (cc_info_overview_get_resource ());
 
   if (!does_gnome_software_exist () && !does_gpk_update_viewer_exist ())
-    gtk_widget_destroy (GTK_WIDGET (self->updates_button));
+    gtk_widget_hide (GTK_WIDGET (self->software_updates_row));
 
   info_overview_panel_setup_overview (self);
   info_overview_panel_setup_virt (self);
diff --git a/panels/info-overview/cc-info-overview-panel.ui b/panels/info-overview/cc-info-overview-panel.ui
index 7e8992766..691611f4b 100644
--- a/panels/info-overview/cc-info-overview-panel.ui
+++ b/panels/info-overview/cc-info-overview-panel.ui
@@ -8,6 +8,7 @@
       <object class="GtkScrolledWindow">
         <property name="visible">True</property>
         <property name="can-focus">False</property>
+        <property name="min-content-height">480</property>
         <property name="hscrollbar-policy">never</property>
         <child>
           <object class="HdyColumn">
@@ -23,8 +24,7 @@
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
                 <property name="valign">center</property>
-                <property name="halign">center</property>
-                <property name="spacing">18</property>
+                <property name="spacing">30</property>
                 <property name="orientation">vertical</property>
                 <child>
                   <object class="GtkImage">
@@ -35,322 +35,138 @@
                   <packing>
                     <property name="expand">False</property>
                     <property name="fill">False</property>
-                    <property name="position">0</property>
                   </packing>
                 </child>
+
                 <child>
-                  <object class="GtkLabel" id="version_label">
+                  <object class="GtkListBox">
                     <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="label">Version 3.0</property>
-                    <property name="selectable">True</property>
-                    <attributes>
-                      <attribute name="scale" value="1.25"/>
-                    </attributes>
+                    <property name="selection-mode">none</property>
+                    <signal name="row-activated" handler="cc_info_panel_row_activated_cb" swapped="yes"/>
+                    <style>
+                      <class name="frame" />
+                    </style>
+
+                    <!-- Device name -->
+                    <child>
+                      <object class="CcListRow" id="hostname_row">
+                        <property name="visible">True</property>
+                        <property name="title" translatable="yes">Device Name</property>
+                        <property name="secondary-label" bind-source="hostname_entry" bind-property="text" bind-flags="sync-create" />
+                        <property name="icon-name">go-next-symbolic</property>
+                      </object>
+                    </child>
+
                   </object>
-                  <packing>
-                    <property name="expand">False</property>
-                    <property name="fill">False</property>
-                    <property name="position">1</property>
-                  </packing>
                 </child>
+
                 <child>
-                  <object class="GtkGrid">
+                  <object class="GtkListBox" id="hardware_box">
                     <property name="visible">True</property>
-                    <property name="halign">center</property>
-                    <property name="valign">center</property>
-                    <property name="can-focus">False</property>
-                    <property name="column-spacing">12</property>
-                    <property name="row-spacing">5</property>
+                    <property name="selection-mode">none</property>
+                    <style>
+                      <class name="frame" />
+                    </style>
+
+                    <!-- Memory -->
                     <child>
-                      <object class="GtkLabel">
+                      <object class="CcListRow" id="memory_row">
                         <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="xalign">1</property>
-                        <property name="label" translatable="yes">Device name</property>
-                        <property name="mnemonic_widget">name_entry</property>
-                        <style>
-                         <class name="dim-label"/>
-                        </style>
+                        <property name="activatable">False</property>
+                        <property name="title" translatable="yes">Memory</property>
                       </object>
-                      <packing>
-                        <property name="top-attach">0</property>
-                        <property name="left-attach">1</property>
-                      </packing>
                     </child>
+
+                    <!-- Processor -->
                     <child>
-                      <object class="GtkLabel">
+                      <object class="CcListRow" id="processor_row">
                         <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="xalign">1</property>
-                        <property name="label" translatable="yes">Memory</property>
-                        <property name="mnemonic_widget">memory_label</property>
-                        <style>
-                         <class name="dim-label"/>
-                        </style>
+                        <property name="activatable">False</property>
+                        <property name="title" translatable="yes">Processor</property>
                       </object>
-                      <packing>
-                        <property name="top-attach">1</property>
-                        <property name="left-attach">1</property>
-                      </packing>
                     </child>
+
+                    <!-- Graphics -->
                     <child>
-                      <object class="GtkLabel">
+                      <object class="CcListRow" id="graphics_row">
                         <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="xalign">1</property>
-                        <property name="label" translatable="yes">Processor</property>
-                        <property name="mnemonic_widget">processor_label</property>
-                        <style>
-                         <class name="dim-label"/>
-                        </style>
+                        <property name="activatable">False</property>
+                        <property name="title" translatable="yes">Graphics</property>
                       </object>
-                      <packing>
-                        <property name="top-attach">2</property>
-                        <property name="left-attach">1</property>
-                      </packing>
                     </child>
+
+                    <!-- Disk Capacity -->
                     <child>
-                      <object class="GtkLabel">
+                      <object class="CcListRow" id="disk_row">
                         <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="xalign">1</property>
-                        <property name="label" translatable="yes">Graphics</property>
-                        <style>
-                         <class name="dim-label"/>
-                        </style>
+                        <property name="activatable">False</property>
+                        <property name="title" translatable="yes">Disk Capacity</property>
+                        <property name="secondary-label" translatable="yes">Calculating…</property>
                       </object>
-                      <packing>
-                        <property name="top-attach">3</property>
-                        <property name="left-attach">1</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkLabel">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="xalign">1</property>
-                        <property name="label" translatable="yes" comments="To translators: this field contains the distro name and version">OS name</property>
-                        <property name="mnemonic_widget">os_name_label</property>
-                        <style>
-                         <class name="dim-label"/>
-                        </style>
-                      </object>
-                      <packing>
-                        <property name="top-attach">4</property>
-                        <property name="left-attach">1</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkLabel">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="xalign">1</property>
-                        <property name="label" translatable="yes" comments="To translators: this field contains the distro type">OS type</property>
-                        <property name="mnemonic_widget">os_type_label</property>
-                        <style>
-                         <class name="dim-label"/>
-                        </style>
-                      </object>
-                      <packing>
-                        <property name="top-attach">5</property>
-                        <property name="left-attach">1</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkLabel" id="virt_type_title_label">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="xalign">1</property>
-                        <property name="label" translatable="yes">Virtualization</property>
-                        <property name="mnemonic_widget">virt_type_label</property>
-                        <style>
-                         <class name="dim-label"/>
-                        </style>
-                      </object>
-                      <packing>
-                        <property name="top-attach">6</property>
-                        <property name="left-attach">1</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkLabel">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="xalign">1</property>
-                        <property name="label" translatable="yes">Disk</property>
-                        <property name="mnemonic_widget">disk_label</property>
-                        <style>
-                         <class name="dim-label"/>
-                        </style>
-                      </object>
-                      <packing>
-                        <property name="top-attach">7</property>
-                        <property name="left-attach">1</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="CcHostnameEntry" id="name_entry">
-                        <property name="visible">True</property>
-                        <property name="xalign">0</property>
-                      </object>
-                      <packing>
-                        <property name="top-attach">0</property>
-                        <property name="left-attach">2</property>
-                        <property name="width">2</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkLabel" id="memory_label">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="ellipsize">end</property>
-                        <property name="xalign">0</property>
-                        <property name="label">Unknown</property>
-                        <property name="selectable">True</property>
-                      </object>
-                      <packing>
-                        <property name="top-attach">1</property>
-                        <property name="left-attach">2</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkLabel" id="processor_label">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="ellipsize">end</property>
-                        <property name="xalign">0</property>
-                        <property name="label">Unknown</property>
-                        <property name="selectable">True</property>
-                      </object>
-                      <packing>
-                        <property name="top-attach">2</property>
-                        <property name="left-attach">2</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkLabel" id="graphics_label">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="ellipsize">end</property>
-                        <property name="xalign">0</property>
-                        <property name="label">Unknown</property>
-                        <property name="selectable">True</property>
-                      </object>
-                      <packing>
-                        <property name="top-attach">3</property>
-                        <property name="left-attach">2</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkLabel" id="os_name_label">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="ellipsize">end</property>
-                        <property name="xalign">0</property>
-                        <property name="label">Unknown</property>
-                        <property name="selectable">True</property>
-                      </object>
-                      <packing>
-                        <property name="top-attach">4</property>
-                        <property name="left-attach">2</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkLabel" id="os_type_label">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="ellipsize">end</property>
-                        <property name="xalign">0</property>
-                        <property name="label">Unknown</property>
-                        <property name="selectable">True</property>
-                      </object>
-                      <packing>
-                        <property name="top-attach">5</property>
-                        <property name="left-attach">2</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkLabel" id="virt_type_label">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="ellipsize">end</property>
-                        <property name="xalign">0</property>
-                        <property name="label">Unknown</property>
-                        <property name="selectable">True</property>
-                      </object>
-                      <packing>
-                        <property name="top-attach">6</property>
-                        <property name="left-attach">2</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkLabel" id="disk_label">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="ellipsize">end</property>
-                        <property name="xalign">0</property>
-                        <property name="label" translatable="yes">Calculating…</property>
-                        <property name="selectable">True</property>
-                      </object>
-                      <packing>
-                        <property name="top-attach">7</property>
-                        <property name="left-attach">2</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkLabel">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="label">    </property>
-                      </object>
-                      <packing>
-                        <property name="top-attach">1</property>
-                        <property name="left-attach">3</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <placeholder/>
                     </child>
+
                   </object>
-                  <packing>
-                    <property name="expand">False</property>
-                    <property name="fill">False</property>
-                    <property name="position">2</property>
-                  </packing>
                 </child>
+
                 <child>
-                  <object class="GtkButtonBox">
+                  <object class="GtkListBox" id="os_box">
                     <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="layout_style">end</property>
-                    <property name="orientation">horizontal</property>
+                    <property name="selection-mode">none</property>
+                    <signal name="row-activated" handler="cc_info_panel_row_activated_cb" swapped="yes"/>
+                    <style>
+                      <class name="frame" />
+                    </style>
+
+                    <!-- OS Name -->
                     <child>
-                      <placeholder/>
-                    </child>
-                    <child>
-                      <object class="GtkButton" id="updates_button">
-                        <property name="label" translatable="yes">Check for updates</property>
-                        <property name="can_focus">True</property>
-                        <property name="receives_default">True</property>
-                        <property name="use_action_appearance">False</property>
+                      <object class="CcListRow" id="os_name_row">
                         <property name="visible">True</property>
-                        <signal name="clicked" handler="on_updates_button_clicked" object="CcInfoOverviewPanel" swapped="yes"/>
+                        <property name="activatable">False</property>
+                        <property name="title" translatable="yes"
+                                  comments="translators: this field contains the distro name and version">OS Name</property>
                       </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                        <property name="position">1</property>
-                      </packing>
                     </child>
+
+                    <!-- OS Type -->
+                    <child>
+                      <object class="CcListRow" id="os_type_row">
+                        <property name="visible">True</property>
+                        <property name="activatable">False</property>
+                        <property name="title" translatable="yes">OS Type</property>
+                      </object>
+                    </child>
+
+                    <!-- GNOME Version -->
+                    <child>
+                      <object class="CcListRow" id="gnome_version_row">
+                        <property name="visible">True</property>
+                        <property name="activatable">False</property>
+                        <property name="title" translatable="yes">GNOME Version</property>
+                        <property name="secondary-label">3.0</property>
+                      </object>
+                    </child>
+
+                    <!-- Virtualization -->
+                    <child>
+                      <object class="CcListRow" id="virtualization_row">
+                        <property name="visible">False</property>
+                        <property name="title" translatable="yes">Virtualization</property>
+                        <property name="activatable">False</property>
+                      </object>
+                    </child>
+
+                    <!-- Software Updates -->
+                    <child>
+                      <object class="CcListRow" id="software_updates_row">
+                        <property name="visible">True</property>
+                        <property name="title" translatable="yes">Software Updates</property>
+                        <property name="icon-name">go-next-symbolic</property>
+                      </object>
+                    </child>
+
                   </object>
-                  <packing>
-                    <property name="expand">False</property>
-                    <property name="fill">False</property>
-                    <property name="pack_type">end</property>
-                    <property name="position">3</property>
-                  </packing>
                 </child>
+
               </object>
             </child>
           </object>
@@ -358,4 +174,67 @@
       </object>
     </child>
   </template>
+
+  <object class="HdyDialog" id="hostname_editor">
+    <property name="visible">False</property>
+    <property name="modal">True</property>
+    <property name="use-header-bar">1</property>
+    <property name="default-height">24</property>
+    <property name="title" translatable="yes">Rename Device</property>
+    <signal name="delete-event" handler="gtk_widget_hide_on_delete"/>
+
+    <child internal-child="vbox">
+      <object class="GtkBox">
+        <property name="border-width">0</property>
+        <property name="margin-top">18</property>
+        <property name="margin-start">12</property>
+        <property name="margin-end">12</property>
+        <property name="margin-bottom">18</property>
+        <child>
+          <object class="GtkLabel">
+            <property name="visible">True</property>
+            <property name="margin-bottom">18</property>
+            <property name="wrap">True</property>
+            <property name="max-width-chars">35</property>
+            <property name="xalign">0.0</property>
+            <property name="label" translatable="yes">The device name is used to identify this device when it is viewed over the network, or when pairing Bluetooth devices.</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkEntry" id="device_name_entry">
+            <property name="visible">True</property>
+          </object>
+        </child>
+      </object>
+    </child>
+
+    <!-- Rename button -->
+    <child type="action">
+      <object class="GtkButton" id="rename_button">
+        <property name="visible">True</property>
+        <property name="can-default">True</property>
+        <property name="use-underline">True</property>
+        <property name="label" translatable="yes">_Rename</property>
+      </object>
+    </child>
+
+    <!-- Cancel button -->
+    <child type="action">
+      <object class="GtkButton" id="cancel_button">
+        <property name="visible">True</property>
+        <property name="use-underline">True</property>
+        <property name="label" translatable="yes">_Cancel</property>
+      </object>
+    </child>
+
+    <action-widgets>
+      <action-widget response="apply" default="true">rename_button</action-widget>
+      <action-widget response="cancel">cancel_button</action-widget>
+    </action-widgets>
+  </object>
+
+  <object class="CcHostnameEntry" id="hostname_entry">
+    <property name="visible">0</property>
+  </object>
+
 </interface>