mouse: Redesign Mouse panelcc-illustrated-split-multitasking-mouse-rows

See
https://gitlab.gnome.org/Teams/Design/settings-mockups/-/raw/master/mouse-and-touchpad/mouse-and-touchpad.png

18 files changed, 317 insertions, 261 deletions

diff --git a/panels/mouse/assets/edge-scroll-d.webm b/panels/mouse/assets/edge-scroll-d.webm
new file mode 100644
index 000000000..60240bcb7
--- /dev/null
+++ b/panels/mouse/assets/edge-scroll-d.webm
diff --git a/panels/mouse/assets/edge-scroll-l.webm b/panels/mouse/assets/edge-scroll-l.webm
new file mode 100644
index 000000000..46439becf
--- /dev/null
+++ b/panels/mouse/assets/edge-scroll-l.webm
diff --git a/panels/mouse/assets/scroll-2finger-d.webm b/panels/mouse/assets/scroll-2finger-d.webm
new file mode 100644
index 000000000..1079d8dee
--- /dev/null
+++ b/panels/mouse/assets/scroll-2finger-d.webm
diff --git a/panels/mouse/assets/scroll-2finger-l.webm b/panels/mouse/assets/scroll-2finger-l.webm
new file mode 100644
index 000000000..9ab698584
--- /dev/null
+++ b/panels/mouse/assets/scroll-2finger-l.webm
diff --git a/panels/mouse/assets/scroll-natural-d.webm b/panels/mouse/assets/scroll-natural-d.webm
new file mode 100644
index 000000000..91211f0e7
--- /dev/null
+++ b/panels/mouse/assets/scroll-natural-d.webm
diff --git a/panels/mouse/assets/scroll-natural-l.webm b/panels/mouse/assets/scroll-natural-l.webm
new file mode 100644
index 000000000..a832b7ae2
--- /dev/null
+++ b/panels/mouse/assets/scroll-natural-l.webm
diff --git a/panels/mouse/assets/scroll-traditional-d.webm b/panels/mouse/assets/scroll-traditional-d.webm
new file mode 100644
index 000000000..3439d268b
--- /dev/null
+++ b/panels/mouse/assets/scroll-traditional-d.webm
diff --git a/panels/mouse/assets/scroll-traditional-l.webm b/panels/mouse/assets/scroll-traditional-l.webm
new file mode 100644
index 000000000..c14e37f06
--- /dev/null
+++ b/panels/mouse/assets/scroll-traditional-l.webm
diff --git a/panels/mouse/assets/tap-to-click-d.webm b/panels/mouse/assets/tap-to-click-d.webm
new file mode 100644
index 000000000..18bef4e3e
--- /dev/null
+++ b/panels/mouse/assets/tap-to-click-d.webm
diff --git a/panels/mouse/assets/tap-to-click-l.webm b/panels/mouse/assets/tap-to-click-l.webm
new file mode 100644
index 000000000..9082baeae
--- /dev/null
+++ b/panels/mouse/assets/tap-to-click-l.webm
diff --git a/panels/mouse/assets/touch-scroll-natural-d.webm b/panels/mouse/assets/touch-scroll-natural-d.webm
new file mode 100644
index 000000000..2a304dc8d
--- /dev/null
+++ b/panels/mouse/assets/touch-scroll-natural-d.webm
diff --git a/panels/mouse/assets/touch-scroll-natural-l.webm b/panels/mouse/assets/touch-scroll-natural-l.webm
new file mode 100644
index 000000000..781ae488f
--- /dev/null
+++ b/panels/mouse/assets/touch-scroll-natural-l.webm
diff --git a/panels/mouse/assets/touch-scroll-traditional-d.webm b/panels/mouse/assets/touch-scroll-traditional-d.webm
new file mode 100644
index 000000000..5c74f87d4
--- /dev/null
+++ b/panels/mouse/assets/touch-scroll-traditional-d.webm
diff --git a/panels/mouse/assets/touch-scroll-traditional-l.webm b/panels/mouse/assets/touch-scroll-traditional-l.webm
new file mode 100644
index 000000000..8dca58624
--- /dev/null
+++ b/panels/mouse/assets/touch-scroll-traditional-l.webm
diff --git a/panels/mouse/cc-mouse-panel.c b/panels/mouse/cc-mouse-panel.c
index c46ccafd6..f89b5f6a6 100644
--- a/panels/mouse/cc-mouse-panel.c
+++ b/panels/mouse/cc-mouse-panel.c
@@ -24,6 +24,9 @@
 #include <gdesktop-enums.h>
 #include <gtk/gtk.h>
 
+#include "cc-illustrated-row.h"
+#include "cc-split-row.h"
+
 #include "cc-mouse-caps-helper.h"
 #include "cc-mouse-panel.h"
 #include "cc-mouse-resources.h"
@@ -35,11 +38,9 @@ struct _CcMousePanel
 {
   CcPanel            parent_instance;
 
-  GtkListBoxRow     *edge_scrolling_row;
-  GtkSwitch         *edge_scrolling_switch;
   GtkSwitch         *mouse_accel_switch;
   AdwPreferencesGroup *mouse_group;
-  GtkSwitch         *mouse_natural_scrolling_switch;
+  CcSplitRow        *mouse_scroll_direction_row;
   GtkScale          *mouse_speed_scale;
   CcMouseTest       *mouse_test;
   GtkBox            *primary_button_box;
@@ -47,17 +48,15 @@ struct _CcMousePanel
   GtkToggleButton   *primary_button_right;
   AdwPreferencesPage*preferences;
   GtkStack          *stack;
-  GtkListBoxRow     *tap_to_click_row;
+  CcIllustratedRow  *tap_to_click_row;
   GtkSwitch         *tap_to_click_switch;
   GtkButton         *test_button;
   AdwPreferencesGroup *touchpad_group;
-  GtkListBoxRow     *touchpad_natural_scrolling_row;
-  GtkSwitch         *touchpad_natural_scrolling_switch;
+  CcSplitRow        *touchpad_scroll_direction_row;
+  CcSplitRow        *touchpad_scroll_method_row;
   GtkListBoxRow     *touchpad_speed_row;
   GtkScale          *touchpad_speed_scale;
   GtkSwitch         *touchpad_toggle_switch;
-  GtkListBoxRow     *two_finger_scrolling_row;
-  GtkSwitch         *two_finger_scrolling_switch;
 
   GSettings         *mouse_settings;
   GSettings         *touchpad_settings;
@@ -74,11 +73,56 @@ struct _CcMousePanel
 
 CC_PANEL_REGISTER (CcMousePanel, cc_mouse_panel)
 
+#define ASSET_RESOURCES_PREFIX "/org/gnome/control-center/mouse/assets/"
+
+static void
+setup_illustrations (CcMousePanel *self)
+{
+  AdwStyleManager *style_manager = adw_style_manager_get_default ();
+  gboolean use_dark = adw_style_manager_get_dark (style_manager);
+  struct {
+    CcSplitRow *row;
+    const gchar *default_resource;
+    const gchar *alternative_resource;
+  } row_resources[] = {
+    { self->mouse_scroll_direction_row, "scroll-traditional", "scroll-natural" },
+    { self->touchpad_scroll_method_row, "scroll-2finger", "edge-scroll" },
+    { self->touchpad_scroll_direction_row, "touch-scroll-traditional", "touch-scroll-natural" },
+  };
+
+  for (gsize i = 0; i < G_N_ELEMENTS (row_resources); i++)
+    {
+      g_autofree gchar *alternative_resource = NULL;
+      g_autofree gchar *default_resource = NULL;
+      const gchar *style_suffix;
+
+      style_suffix = use_dark ? "d" : "l";
+      default_resource = g_strdup_printf (ASSET_RESOURCES_PREFIX "%s-%s.webm",
+                                          row_resources[i].default_resource,
+                                          style_suffix);
+      alternative_resource = g_strdup_printf (ASSET_RESOURCES_PREFIX "%s-%s.webm",
+                                              row_resources[i].alternative_resource,
+                                              style_suffix);
+
+      cc_split_row_set_default_illustration_resource (row_resources[i].row, default_resource);
+      cc_split_row_set_alternative_illustration_resource (row_resources[i].row, alternative_resource);
+    }
+
+  /* Tap to click */
+  {
+    g_autofree gchar *resource = NULL;
+
+    resource = g_strdup_printf (ASSET_RESOURCES_PREFIX "%s-%s.webm",
+                                "tap-to-click",
+                                use_dark ? "d" : "l");
+
+    cc_illustrated_row_set_resource (self->tap_to_click_row, resource);
+  }
+}
+
 static void
 setup_touchpad_options (CcMousePanel *self)
 {
-  gboolean edge_scroll_enabled;
-  gboolean two_finger_scroll_enabled;
   gboolean have_two_finger_scrolling;
   gboolean have_edge_scrolling;
   gboolean have_tap_to_click;
@@ -92,41 +136,18 @@ setup_touchpad_options (CcMousePanel *self)
 
   gtk_widget_set_visible (GTK_WIDGET (self->touchpad_group), TRUE);
 
-  gtk_widget_set_visible (GTK_WIDGET (self->two_finger_scrolling_row), have_two_finger_scrolling);
-  gtk_widget_set_visible (GTK_WIDGET (self->edge_scrolling_row), have_edge_scrolling);
+  gtk_widget_set_visible (GTK_WIDGET (self->touchpad_scroll_method_row), have_two_finger_scrolling);
   gtk_widget_set_visible (GTK_WIDGET (self->tap_to_click_row), have_tap_to_click);
-
-  edge_scroll_enabled = g_settings_get_boolean (self->touchpad_settings, "edge-scrolling-enabled");
-  two_finger_scroll_enabled = g_settings_get_boolean (self->touchpad_settings, "two-finger-scrolling-enabled");
-  if (edge_scroll_enabled && two_finger_scroll_enabled)
-  {
-    /* You cunning user set both, but you can only have one set in that UI */
-    gtk_switch_set_active (self->edge_scrolling_switch, FALSE);
-  }
 }
 
 static void
-two_finger_scrolling_changed_event (CcMousePanel *self,
-                                    gboolean      state)
+on_touchpad_scroll_method_changed_cb (CcMousePanel *self)
 {
-  /* Updating the setting will cause the "state" of the switch to be updated. */
-  g_settings_set_boolean (self->touchpad_settings, "two-finger-scrolling-enabled", state);
+  gboolean two_finger;
 
-  /* Disable edge scrolling if two-finger scrolling is enabled */
-  if (state && gtk_widget_get_visible (GTK_WIDGET (self->edge_scrolling_row)))
-    gtk_switch_set_active (self->edge_scrolling_switch, FALSE);
-}
+  two_finger = cc_split_row_get_use_default (self->touchpad_scroll_method_row);
 
-static void
-edge_scrolling_changed_event (CcMousePanel *self,
-                              gboolean      state)
-{
-  /* Updating the setting will cause the "state" of the switch to be updated. */
-  g_settings_set_boolean (self->touchpad_settings, "edge-scrolling-enabled", state);
-
-  /* Disable two-finger scrolling if edge scrolling is enabled */
-  if (state && gtk_widget_get_visible (GTK_WIDGET (self->two_finger_scrolling_row)))
-    gtk_switch_set_active (self->two_finger_scrolling_switch, FALSE);
+  g_settings_set_boolean (self->touchpad_settings, "two-finger-scrolling-enabled", two_finger);
 }
 
 static gboolean
@@ -253,8 +274,8 @@ setup_dialog (CcMousePanel *self)
   handle_secondary_button (self, button, self->left_gesture);
 
   g_settings_bind (self->mouse_settings, "natural-scroll",
-       self->mouse_natural_scrolling_switch, "active",
-       G_SETTINGS_BIND_DEFAULT);
+                   self->mouse_scroll_direction_row, "use-default",
+                   G_SETTINGS_BIND_INVERT_BOOLEAN);
 
   /* Mouse section */
   gtk_widget_set_visible (GTK_WIDGET (self->mouse_group), self->have_mouse);
@@ -280,39 +301,33 @@ setup_dialog (CcMousePanel *self)
                                 touchpad_enabled_set_mapping,
                                 NULL, NULL);
   g_settings_bind_with_mapping (self->touchpad_settings, "send-events",
-                                self->touchpad_natural_scrolling_row, "sensitive",
-                                G_SETTINGS_BIND_GET,
-                                touchpad_enabled_get_mapping,
-                                touchpad_enabled_set_mapping,
-                                NULL, NULL);
-  g_settings_bind_with_mapping (self->touchpad_settings, "send-events",
-                                self->touchpad_speed_row, "sensitive",
+                                self->touchpad_scroll_direction_row, "sensitive",
                                 G_SETTINGS_BIND_GET,
                                 touchpad_enabled_get_mapping,
                                 touchpad_enabled_set_mapping,
                                 NULL, NULL);
   g_settings_bind_with_mapping (self->touchpad_settings, "send-events",
-                                self->tap_to_click_row, "sensitive",
+                                self->touchpad_scroll_method_row, "sensitive",
                                 G_SETTINGS_BIND_GET,
                                 touchpad_enabled_get_mapping,
                                 touchpad_enabled_set_mapping,
                                 NULL, NULL);
   g_settings_bind_with_mapping (self->touchpad_settings, "send-events",
-                                self->two_finger_scrolling_row, "sensitive",
+                                self->touchpad_speed_row, "sensitive",
                                 G_SETTINGS_BIND_GET,
                                 touchpad_enabled_get_mapping,
                                 touchpad_enabled_set_mapping,
                                 NULL, NULL);
   g_settings_bind_with_mapping (self->touchpad_settings, "send-events",
-                                self->edge_scrolling_row, "sensitive",
+                                self->tap_to_click_row, "sensitive",
                                 G_SETTINGS_BIND_GET,
                                 touchpad_enabled_get_mapping,
                                 touchpad_enabled_set_mapping,
                                 NULL, NULL);
 
   g_settings_bind (self->touchpad_settings, "natural-scroll",
-                         self->touchpad_natural_scrolling_switch, "active",
-                         G_SETTINGS_BIND_DEFAULT);
+                   self->touchpad_scroll_direction_row, "use-default",
+                   G_SETTINGS_BIND_INVERT_BOOLEAN);
 
   g_settings_bind (self->touchpad_settings, "speed",
                    gtk_range_get_adjustment (GTK_RANGE (self->touchpad_speed_scale)), "value",
@@ -323,14 +338,21 @@ setup_dialog (CcMousePanel *self)
                    G_SETTINGS_BIND_DEFAULT);
 
   g_settings_bind (self->touchpad_settings, "two-finger-scrolling-enabled",
-                   self->two_finger_scrolling_switch, "state",
-                   G_SETTINGS_BIND_GET);
+                   self->touchpad_scroll_method_row, "use-default",
+                   G_SETTINGS_BIND_DEFAULT);
 
   g_settings_bind (self->touchpad_settings, "edge-scrolling-enabled",
-                   self->edge_scrolling_switch, "state",
-                   G_SETTINGS_BIND_GET);
+                   self->touchpad_scroll_method_row, "use-default",
+                   G_SETTINGS_BIND_INVERT_BOOLEAN);
 
   setup_touchpad_options (self);
+
+  g_signal_connect_object (adw_style_manager_get_default (),
+                           "notify::dark",
+                           G_CALLBACK (setup_illustrations),
+                           self,
+                           G_CONNECT_SWAPPED);
+  setup_illustrations (self);
 }
 
 /* Callback issued when a button is clicked on the dialog */
@@ -412,13 +434,13 @@ cc_mouse_panel_class_init (CcMousePanelClass *klass)
 
   object_class->dispose = cc_mouse_panel_dispose;
 
+  g_type_ensure (CC_TYPE_SPLIT_ROW);
+
   gtk_widget_class_set_template_from_resource (widget_class, "/org/gnome/control-center/mouse/cc-mouse-panel.ui");
 
-  gtk_widget_class_bind_template_child (widget_class, CcMousePanel, edge_scrolling_row);
-  gtk_widget_class_bind_template_child (widget_class, CcMousePanel, edge_scrolling_switch);
   gtk_widget_class_bind_template_child (widget_class, CcMousePanel, mouse_accel_switch);
   gtk_widget_class_bind_template_child (widget_class, CcMousePanel, mouse_group);
-  gtk_widget_class_bind_template_child (widget_class, CcMousePanel, mouse_natural_scrolling_switch);
+  gtk_widget_class_bind_template_child (widget_class, CcMousePanel, mouse_scroll_direction_row);
   gtk_widget_class_bind_template_child (widget_class, CcMousePanel, mouse_speed_scale);
   gtk_widget_class_bind_template_child (widget_class, CcMousePanel, mouse_test);
   gtk_widget_class_bind_template_child (widget_class, CcMousePanel, primary_button_box);
@@ -430,15 +452,12 @@ cc_mouse_panel_class_init (CcMousePanelClass *klass)
   gtk_widget_class_bind_template_child (widget_class, CcMousePanel, tap_to_click_switch);
   gtk_widget_class_bind_template_child (widget_class, CcMousePanel, test_button);
   gtk_widget_class_bind_template_child (widget_class, CcMousePanel, touchpad_group);
-  gtk_widget_class_bind_template_child (widget_class, CcMousePanel, touchpad_natural_scrolling_row);
-  gtk_widget_class_bind_template_child (widget_class, CcMousePanel, touchpad_natural_scrolling_switch);
+  gtk_widget_class_bind_template_child (widget_class, CcMousePanel, touchpad_scroll_direction_row);
+  gtk_widget_class_bind_template_child (widget_class, CcMousePanel, touchpad_scroll_method_row);
   gtk_widget_class_bind_template_child (widget_class, CcMousePanel, touchpad_speed_row);
   gtk_widget_class_bind_template_child (widget_class, CcMousePanel, touchpad_speed_scale);
   gtk_widget_class_bind_template_child (widget_class, CcMousePanel, touchpad_toggle_switch);
-  gtk_widget_class_bind_template_child (widget_class, CcMousePanel, two_finger_scrolling_row);
-  gtk_widget_class_bind_template_child (widget_class, CcMousePanel, two_finger_scrolling_switch);
 
-  gtk_widget_class_bind_template_callback (widget_class, edge_scrolling_changed_event);
+  gtk_widget_class_bind_template_callback (widget_class, on_touchpad_scroll_method_changed_cb);
   gtk_widget_class_bind_template_callback (widget_class, test_button_toggled_cb);
-  gtk_widget_class_bind_template_callback (widget_class, two_finger_scrolling_changed_event);
 }
diff --git a/panels/mouse/cc-mouse-panel.ui b/panels/mouse/cc-mouse-panel.ui
index f865f05eb..d34183a62 100644
--- a/panels/mouse/cc-mouse-panel.ui
+++ b/panels/mouse/cc-mouse-panel.ui
@@ -2,261 +2,270 @@
 <interface>
   <template class="CcMousePanel" parent="CcPanel">
 
-    <child type="titlebar-end">
-      <object class="GtkToggleButton" id="test_button">
-        <property name="use_underline">True</property>
-        <property name="valign">center</property>
-        <property name="label" translatable="yes">Test _Settings</property>
-        <signal name="toggled" handler="test_button_toggled_cb" object="CcMousePanel" swapped="yes"/>
-        <style>
-          <class name="text-button"/>
-        </style>
+    <child type="titlebar">
+      <object class="AdwHeaderBar">
+        <property name="show-end-title-buttons">True</property>
+        <property name="show-start-title-buttons">False</property>
+        <property name="title-widget">
+          <object class="AdwViewSwitcherTitle">
+            <property name="stack">stack</property>
+          </object>
+        </property>
+        <child type="end">
+          <object class="GtkToggleButton" id="test_button">
+            <property name="use_underline">True</property>
+            <property name="valign">center</property>
+            <property name="label" translatable="yes">Test _Settings</property>
+            <signal name="toggled" handler="test_button_toggled_cb" object="CcMousePanel" swapped="yes"/>
+            <style>
+              <class name="text-button"/>
+            </style>
+          </object>
+        </child>
       </object>
     </child>
 
     <child type="content">
-      <object class="GtkStack" id="stack">
+      <object class="AdwViewStack" id="stack">
         <child>
-          <object class="AdwPreferencesPage" id="preferences">
-            <child>
-              <object class="AdwPreferencesGroup">
-                <property name="title" translatable="yes">General</property>
+          <object class="AdwViewStackPage" id="mouse_stack_page">
+            <property name="title" translatable="yes">Mouse</property>
+            <property name="icon-name">input-mouse-symbolic</property>
+            <property name="child">
+
+              <object class="AdwPreferencesPage" id="preferences">
                 <child>
-                  <object class="AdwActionRow" id="primary_button_row">
-                    <property name="title" translatable="yes">Primary Button</property>
-                    <property name="subtitle" translatable="yes">Sets the order of physical buttons on mice and touchpads.</property>
-                    <property name="subtitle-lines">0</property>
+                  <object class="AdwPreferencesGroup">
+                    <property name="title" translatable="yes">General</property>
                     <child>
-                      <object class="GtkBox" id="primary_button_box">
-                        <property name="valign">center</property>
-                        <property name="homogeneous">True</property>
-                        <property name="margin_top">12</property>
-                        <property name="margin_bottom">12</property>
-                        <style>
-                         <class name="linked"/>
-                        </style>
-                        <child>
-                          <object class="GtkToggleButton" id="primary_button_left">
-                            <property name="hexpand">True</property>
-                            <property name="label" translatable="yes">Left</property>
-                            <property name="height_request">35</property>
-                          </object>
-                        </child>
+                      <object class="AdwActionRow" id="primary_button_row">
+                        <property name="title" translatable="yes">Primary Button</property>
+                        <property name="subtitle" translatable="yes">Order of physical buttons on mice and touchpads.</property>
+                        <property name="subtitle-lines">0</property>
                         <child>
-                          <object class="GtkToggleButton" id="primary_button_right">
-                            <property name="hexpand">True</property>
-                            <property name="label" translatable="yes">Right</property>
-                            <property name="group">primary_button_left</property>
-                            <property name="height_request">35</property>
+                          <object class="GtkBox" id="primary_button_box">
+                            <property name="valign">center</property>
+                            <property name="homogeneous">True</property>
+                            <property name="margin_top">12</property>
+                            <property name="margin_bottom">12</property>
+                            <style>
+                             <class name="linked"/>
+                            </style>
+                            <child>
+                              <object class="GtkToggleButton" id="primary_button_left">
+                                <property name="hexpand">True</property>
+                                <property name="label" translatable="yes">Left</property>
+                                <property name="height_request">35</property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkToggleButton" id="primary_button_right">
+                                <property name="hexpand">True</property>
+                                <property name="label" translatable="yes">Right</property>
+                                <property name="group">primary_button_left</property>
+                                <property name="height_request">35</property>
+                              </object>
+                            </child>
                           </object>
                         </child>
                       </object>
                     </child>
                   </object>
                 </child>
-              </object>
-            </child>
 
-            <child>
-              <object class="AdwPreferencesGroup" id="mouse_group">
-                <property name="title" translatable="yes">Mouse</property>
                 <child>
-                  <object class="AdwActionRow" id="mouse_row">
-                    <property name="title" translatable="yes">Mouse Speed</property>
-                    <child type="suffix">
-                      <object class="GtkScale" id="mouse_speed_scale">
-                        <property name="hexpand">True</property>
-                        <accessibility>
-                          <property name="label" translatable="yes">Mouse speed</property>
-                        </accessibility>
-                        <marks>
-                          <mark value="-1" translatable="yes">Slow</mark>
-                          <mark value="0"/>
-                          <mark value="1" translatable="yes">Fast</mark>
-                        </marks>
-                        <property name="adjustment">
-                          <object class="GtkAdjustment">
-                            <property name="lower">-1</property>
-                            <property name="upper">1</property>
-                            <property name="step-increment">0.1</property>
-                            <property name="page-increment">0.1</property>
+                  <object class="AdwPreferencesGroup" id="mouse_group">
+                    <property name="title" translatable="yes">Mouse</property>
+                    <child>
+                      <object class="AdwActionRow" id="mouse_row">
+                        <property name="title" translatable="yes">Pointer Speed</property>
+                        <child type="suffix">
+                          <object class="GtkScale" id="mouse_speed_scale">
+                            <property name="hexpand">True</property>
+                            <accessibility>
+                              <property name="label" translatable="yes">Pointer Speed</property>
+                            </accessibility>
+                            <marks>
+                              <mark value="-1" translatable="yes">Slow</mark>
+                              <mark value="0"/>
+                              <mark value="1" translatable="yes">Fast</mark>
+                            </marks>
+                            <property name="adjustment">
+                              <object class="GtkAdjustment">
+                                <property name="lower">-1</property>
+                                <property name="upper">1</property>
+                                <property name="step-increment">0.1</property>
+                                <property name="page-increment">0.1</property>
+                              </object>
+                            </property>
                           </object>
-                        </property>
+                        </child>
                       </object>
                     </child>
-                  </object>
-                </child>
-                <child>
-                  <object class="AdwActionRow" id="mouse_accel_profile">
-                    <property name="title" translatable="yes">Pointer Assistance</property>
-                    <property name="subtitle" translatable="yes">Recommended for most users and applications</property>
-                    <property name="activatable-widget">mouse_accel_switch</property>
-                    <child type="suffix">
-                      <object class="GtkMenuButton">
-                        <property name="valign">center</property>
-                        <property name="icon-name">help-about-symbolic</property>
-                        <style>
-                          <class name="flat"/>
-                        </style>
-                        <property name="popover">
-                          <object class="GtkPopover">
-                            <child>
-                              <object class="GtkLabel">
-                                <property name="margin-start">8</property>
-                                <property name="margin-end">8</property>
-                                <property name="margin-top">8</property>
-                                <property name="margin-bottom">8</property>
-                                <property name="halign">center</property>
-                                <property name="valign">center</property>
-                                <property name="wrap">True</property>
-                                <property name="label" translatable="yes" comments="Translators: Preserve the line-break separating the two paragraphs.">Turning pointer assistance off can allow faster and more precise movements, but can also make the mouse more difficult to use.
+                    <child>
+                      <object class="AdwActionRow" id="mouse_accel_profile">
+                        <property name="title" translatable="yes">Pointer Assistance</property>
+                        <property name="subtitle" translatable="yes">Recommended for most users and applications</property>
+                        <property name="activatable-widget">mouse_accel_switch</property>
+                        <child type="suffix">
+                          <object class="GtkMenuButton">
+                            <property name="valign">center</property>
+                            <property name="icon-name">help-about-symbolic</property>
+                            <style>
+                              <class name="flat"/>
+                            </style>
+                            <property name="popover">
+                              <object class="GtkPopover">
+                                <child>
+                                  <object class="GtkLabel">
+                                    <property name="margin-start">8</property>
+                                    <property name="margin-end">8</property>
+                                    <property name="margin-top">8</property>
+                                    <property name="margin-bottom">8</property>
+                                    <property name="halign">center</property>
+                                    <property name="valign">center</property>
+                                    <property name="wrap">True</property>
+                                    <property name="label" translatable="yes" comments="Translators: Preserve the line-break separating the two paragraphs.">Turning pointer assistance off can allow faster and more precise movements, but can also make the mouse more difficult to use.
 
 Pointer assistance is also known as pointer acceleration.</property>
-                                <property name="max-width-chars">36</property>
+                                    <property name="max-width-chars">36</property>
+                                  </object>
+                                </child>
                               </object>
-                            </child>
+                            </property>
                           </object>
-                        </property>
-                      </object>
-                    </child>
-                    <child type="suffix">
-                      <object class="GtkSwitch" id="mouse_accel_switch">
-                        <property name="valign">center</property>
-                        <accessibility>
-                          <property name="label" translatable="yes">Pointer Assistance</property>
-                        </accessibility>
+                        </child>
+                        <child type="suffix">
+                          <object class="GtkSwitch" id="mouse_accel_switch">
+                            <property name="valign">center</property>
+                            <accessibility>
+                              <property name="label" translatable="yes">Pointer Assistance</property>
+                            </accessibility>
+                          </object>
+                        </child>
                       </object>
                     </child>
-                  </object>
-                </child>
-                <child>
-                  <object class="AdwActionRow" id="mouse_natural_scrolling_row">
-                    <property name="title" translatable="yes" comments="Translators: This switch reverses the scrolling direction for mices. The term used comes from OS X so use the same translation if possible.">Natural Scrolling</property>
-                    <property name="subtitle" translatable="yes">Scrolling moves the content, not the view.</property>
-                    <property name="activatable-widget">mouse_natural_scrolling_switch</property>
                     <child>
-                      <object class="GtkSwitch" id="mouse_natural_scrolling_switch">
-                        <property name="valign">center</property>
-                        <accessibility>
-                          <property name="label" translatable="yes">Natural Scrolling</property>
-                        </accessibility>
+                      <object class="CcSplitRow" id="mouse_scroll_direction_row">
+                        <property name="title" translatable="yes">Scroll Direction</property>
+                        <property name="default-option-title" translatable="yes">Traditional</property>
+                        <property name="default-option-subtitle" translatable="yes">Scrolling moves the view</property>
+                        <property name="alternative-option-title" translatable="yes">Natural</property>
+                        <property name="alternative-option-subtitle" translatable="yes">Scrolling moves the content</property>
                       </object>
                     </child>
                   </object>
                 </child>
-              </object>
-            </child>
 
-            <child>
-              <object class="AdwPreferencesGroup" id="touchpad_group">
-                <property name="title" translatable="yes">Touchpad</property>
+              </object>
+            </property>
+          </object>
+        </child>
+        <child>
+          <object class="AdwViewStackPage" id="touchpad_stack_page">
+            <property name="name">touchpad</property>
+            <property name="icon-name">input-touchpad-symbolic</property>
+            <property name="title" translatable="yes">Touchpad</property>
+            <property name="child">
+              <object class="AdwPreferencesPage">
                 <child>
-                  <object class="AdwActionRow" id="touchpad_toggle_row">
-                    <property name="title" translatable="yes">Touchpad</property>
-                    <property name="activatable-widget">touchpad_toggle_switch</property>
+                  <object class="AdwPreferencesGroup" id="touchpad_group">
                     <child>
-                      <object class="GtkSwitch" id="touchpad_toggle_switch">
-                        <property name="valign">center</property>
-                        <accessibility>
-                          <property name="label" translatable="yes">Touchpad</property>
-                        </accessibility>
+                      <object class="AdwActionRow" id="touchpad_toggle_row">
+                        <property name="title" translatable="yes">Touchpad</property>
+                        <property name="activatable-widget">touchpad_toggle_switch</property>
+                        <child>
+                          <object class="GtkSwitch" id="touchpad_toggle_switch">
+                            <property name="valign">center</property>
+                            <accessibility>
+                              <property name="label" translatable="yes">Touchpad</property>
+                            </accessibility>
+                          </object>
+                        </child>
                       </object>
                     </child>
-                  </object>
-                </child>
-                <child>
-                  <object class="AdwActionRow" id="touchpad_natural_scrolling_row">
-                    <property name="title" translatable="yes" comments="Translators: This switch reverses the scrolling direction for touchpads. The term used comes from OS X so use the same translation if possible. ">Natural Scrolling</property>
-                    <property name="subtitle" translatable="yes">Scrolling moves the content, not the view.</property>
-                    <property name="activatable-widget">touchpad_natural_scrolling_switch</property>
                     <child>
-                      <object class="GtkSwitch" id="touchpad_natural_scrolling_switch">
-                        <property name="valign">center</property>
-                        <accessibility>
-                          <property name="label" translatable="yes">Natural Scrolling</property>
-                        </accessibility>
-                      </object>
-                    </child>
-                  </object>
-                </child>
-                <child>
-                  <object class="AdwActionRow" id="touchpad_speed_row">
-                    <property name="title" translatable="yes">Touchpad Speed</property>
-                    <child type="suffix">
-                      <object class="GtkScale" id="touchpad_speed_scale">
-                        <property name="hexpand">True</property>
-                        <accessibility>
-                          <property name="label" translatable="yes">Touchpad speed</property>
-                        </accessibility>
-                        <marks>
-                          <mark value="-1" translatable="yes">Slow</mark>
-                          <mark value="0"/>
-                          <mark value="1" translatable="yes">Fast</mark>
-                        </marks>
-                        <property name="adjustment">
-                          <object class="GtkAdjustment">
-                            <property name="lower">-1</property>
-                            <property name="upper">1</property>
-                            <property name="step-increment">0.1</property>
-                            <property name="page-increment">0.1</property>
+                      <object class="AdwActionRow" id="touchpad_speed_row">
+                        <property name="title" translatable="yes">Pointer Speed</property>
+                        <child type="suffix">
+                          <object class="GtkScale" id="touchpad_speed_scale">
+                            <property name="hexpand">True</property>
+                            <accessibility>
+                              <property name="label" translatable="yes">Pointer speed</property>
+                            </accessibility>
+                            <marks>
+                              <mark value="-1" translatable="yes">Slow</mark>
+                              <mark value="0"/>
+                              <mark value="1" translatable="yes">Fast</mark>
+                            </marks>
+                            <property name="adjustment">
+                              <object class="GtkAdjustment">
+                                <property name="lower">-1</property>
+                                <property name="upper">1</property>
+                                <property name="step-increment">0.1</property>
+                                <property name="page-increment">0.1</property>
+                              </object>
+                            </property>
                           </object>
-                        </property>
+                        </child>
                       </object>
                     </child>
                   </object>
                 </child>
                 <child>
-                  <object class="AdwActionRow" id="tap_to_click_row">
-                    <property name="visible">False</property>
-                    <property name="title" translatable="yes">Tap to Click</property>
-                    <property name="activatable-widget">tap_to_click_switch</property>
+                  <object class="AdwPreferencesGroup">
+                    <property name="title" translatable="yes">Clicking</property>
+
                     <child>
-                      <object class="GtkSwitch" id="tap_to_click_switch">
-                        <property name="valign">center</property>
-                        <accessibility>
-                          <property name="label" translatable="yes">Tap to click</property>
-                        </accessibility>
+                      <object class="CcIllustratedRow" id="tap_to_click_row">
+                        <property name="visible">False</property>
+                        <property name="title" translatable="yes">Tap to Click</property>
+                        <property name="subtitle" translatable="yes">Quickly touch the touchpad to click</property>
+                        <property name="activatable-widget">tap_to_click_switch</property>
+                        <child>
+                          <object class="GtkSwitch" id="tap_to_click_switch">
+                            <property name="valign">center</property>
+                            <accessibility>
+                              <property name="label" translatable="yes">Tap to click</property>
+                            </accessibility>
+                          </object>
+                        </child>
                       </object>
                     </child>
                   </object>
                 </child>
+
                 <child>
-                  <object class="AdwActionRow" id="two_finger_scrolling_row">
-                    <property name="visible">False</property>
-                    <property name="title" translatable="yes">Two-finger Scrolling</property>
-                    <property name="activatable-widget">two_finger_scrolling_switch</property>
+                  <object class="AdwPreferencesGroup">
+                    <property name="title" translatable="yes">Scrolling</property>
                     <child>
-                      <object class="GtkSwitch" id="two_finger_scrolling_switch">
-                        <property name="valign">center</property>
-                        <accessibility>
-                          <property name="label" translatable="yes">Two-finger Scrolling</property>
-                        </accessibility>
-                        <signal name="state-set" handler="two_finger_scrolling_changed_event" object="CcMousePanel" swapped="yes"/>
+                      <object class="CcSplitRow" id="touchpad_scroll_method_row">
+                        <property name="title" translatable="yes">Scroll Method</property>
+                        <property name="default-option-title" translatable="yes">Two Finger</property>
+                        <property name="default-option-subtitle" translatable="yes">Drag two fingers on the touchpad</property>
+                        <property name="alternative-option-title" translatable="yes">Edge</property>
+                        <property name="alternative-option-subtitle" translatable="yes">Drag one finger on the edge</property>
+                        <signal name="notify::use-default" handler="on_touchpad_scroll_method_changed_cb" object="CcMousePanel" swapped="yes"/>
                       </object>
                     </child>
-                  </object>
-                </child>
-                <child>
-                  <object class="AdwActionRow" id="edge_scrolling_row">
-                    <property name="visible">False</property>
-                    <property name="title" translatable="yes">Edge Scrolling</property>
-                    <property name="activatable-widget">edge_scrolling_switch</property>
                     <child>
-                      <object class="GtkSwitch" id="edge_scrolling_switch">
-                        <property name="valign">center</property>
-                        <accessibility>
-                          <property name="label" translatable="yes">Edge Scrolling</property>
-                        </accessibility>
-                        <signal name="state-set" handler="edge_scrolling_changed_event" object="CcMousePanel" swapped="yes"/>
+                      <object class="CcSplitRow" id="touchpad_scroll_direction_row">
+                        <property name="title" translatable="yes">Scroll Direction</property>
+                        <property name="default-option-title" translatable="yes">Traditional</property>
+                        <property name="default-option-subtitle" translatable="yes">Scrolling moves the view</property>
+                        <property name="alternative-option-title" translatable="yes">Natural</property>
+                        <property name="alternative-option-subtitle" translatable="yes">Scrolling moves the content</property>
                       </object>
                     </child>
                   </object>
                 </child>
+
               </object>
-            </child>
+            </property>
 
           </object>
         </child>
+
         <child>
           <object class="CcMouseTest" id="mouse_test">
           </object>
diff --git a/panels/mouse/meson.build b/panels/mouse/meson.build
index cbc025ec3..0ebfc23f0 100644
--- a/panels/mouse/meson.build
+++ b/panels/mouse/meson.build
@@ -14,7 +14,21 @@ resource_data = files(
   'cc-mouse-panel.ui',
   'cc-mouse-test.ui',
   'scroll-test-gegl.svg',
-  'scroll-test.svg'
+  'scroll-test.svg',
+  'assets/edge-scroll-d.webm',
+  'assets/edge-scroll-l.webm',
+  'assets/scroll-2finger-d.webm',
+  'assets/scroll-2finger-l.webm',
+  'assets/scroll-traditional-d.webm',
+  'assets/scroll-traditional-l.webm',
+  'assets/scroll-natural-d.webm',
+  'assets/scroll-natural-l.webm',
+  'assets/touch-scroll-natural-d.webm',
+  'assets/touch-scroll-natural-l.webm',
+  'assets/touch-scroll-traditional-d.webm',
+  'assets/touch-scroll-traditional-l.webm',
+  'assets/tap-to-click-l.webm',
+  'assets/tap-to-click-d.webm',
 )
 
 common_sources = gnome.compile_resources(
diff --git a/panels/mouse/mouse.gresource.xml b/panels/mouse/mouse.gresource.xml
index 056870529..a199b2cf6 100644
--- a/panels/mouse/mouse.gresource.xml
+++ b/panels/mouse/mouse.gresource.xml
@@ -5,5 +5,19 @@
     <file preprocess="xml-stripblanks">cc-mouse-test.ui</file>
     <file>scroll-test.svg</file>
     <file>scroll-test-gegl.svg</file>
+    <file>assets/edge-scroll-d.webm</file>
+    <file>assets/edge-scroll-l.webm</file>
+    <file>assets/scroll-2finger-d.webm</file>
+    <file>assets/scroll-2finger-l.webm</file>
+    <file>assets/scroll-traditional-d.webm</file>
+    <file>assets/scroll-traditional-l.webm</file>
+    <file>assets/scroll-natural-d.webm</file>
+    <file>assets/scroll-natural-l.webm</file>
+    <file>assets/touch-scroll-natural-d.webm</file>
+    <file>assets/touch-scroll-natural-l.webm</file>
+    <file>assets/touch-scroll-traditional-d.webm</file>
+    <file>assets/touch-scroll-traditional-l.webm</file>
+    <file>assets/tap-to-click-l.webm</file>
+    <file>assets/tap-to-click-d.webm</file>
   </gresource>
 </gresources>