From d1bdb4eeda3c19a3b50b619f67f2cb21a48b5d99 Mon Sep 17 00:00:00 2001
From: CharlesG <charlesg99@gmail.com>
Date: Sun, 8 Apr 2018 08:12:52 -0500
Subject: [PATCH] Add settings for window preview padding

---
 Settings.ui                                   | 56 ++++++++++++++++++-
 prefs.js                                      | 24 +++++---
 ...shell.extensions.dash-to-panel.gschema.xml |  9 ++-
 stylesheet.css                                |  2 +-
 windowPreview.js                              | 13 +++--
 5 files changed, 86 insertions(+), 18 deletions(-)

diff --git a/Settings.ui b/Settings.ui
index ca69118..5401bfa 100644
--- a/Settings.ui
+++ b/Settings.ui
@@ -1781,6 +1781,11 @@
     <property name="step_increment">10</property>
     <property name="page_increment">50</property>
   </object>
+  <object class="GtkAdjustment" id="preview_padding_adjustment">
+    <property name="upper">50</property>
+    <property name="step_increment">1</property>
+    <property name="page_increment">5</property>
+  </object>
   <object class="GtkAdjustment" id="preview_timeout_adjustment">
     <property name="upper">9999</property>
     <property name="step_increment">25</property>
@@ -2185,7 +2190,7 @@
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
                         <property name="hexpand">True</property>
-                        <property name="label" translatable="yes">Width of the window previews</property>
+                        <property name="label" translatable="yes">Width of the window previews (px)</property>
                         <property name="use_markup">True</property>
                         <property name="xalign">0</property>
                       </object>
@@ -2231,7 +2236,54 @@
                         <property name="visible">True</property>
                         <property name="can_focus">False</property>
                         <property name="hexpand">True</property>
-                        <property name="label" translatable="yes">Height of the window previews</property>
+                        <property name="label" translatable="yes">Height of the window previews (px)</property>
+                        <property name="use_markup">True</property>
+                        <property name="xalign">0</property>
+                      </object>
+                      <packing>
+                        <property name="left_attach">0</property>
+                        <property name="top_attach">0</property>
+                      </packing>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="GtkListBoxRow" id="listbox_preview_padding">
+                <property name="width_request">100</property>
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <child>
+                  <object class="GtkGrid" id="grid_preview_padding">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="margin_left">12</property>
+                    <property name="margin_right">12</property>
+                    <property name="margin_top">12</property>
+                    <property name="margin_bottom">12</property>
+                    <property name="column_spacing">32</property>
+                    <child>
+                      <object class="GtkSpinButton" id="preview_padding_spinbutton">
+                        <property name="visible">True</property>
+                        <property name="can_focus">True</property>
+                        <property name="width_chars">4</property>
+                        <property name="text">50</property>
+                        <property name="adjustment">preview_padding_adjustment</property>
+                        <property name="numeric">True</property>
+                        <property name="value">50</property>
+                      </object>
+                      <packing>
+                        <property name="left_attach">1</property>
+                        <property name="top_attach">0</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkLabel" id="preview_padding_label">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="hexpand">True</property>
+                        <property name="label" translatable="yes">Padding of the window previews (px)</property>
                         <property name="use_markup">True</property>
                         <property name="xalign">0</property>
                       </object>
diff --git a/prefs.js b/prefs.js
index 4bbbb29..050f92e 100644
--- a/prefs.js
+++ b/prefs.js
@@ -704,14 +704,19 @@ const Settings = new Lang.Class({
                 this._settings.set_int('peek-mode-opacity', widget.get_value());
             }));
 
-            this._builder.get_object('preview_width_spinbutton').set_value(this._settings.get_int('window-previews-width'));
+            this._builder.get_object('preview_width_spinbutton').set_value(this._settings.get_int('window-preview-width'));
             this._builder.get_object('preview_width_spinbutton').connect('value-changed', Lang.bind (this, function(widget) {
-                this._settings.set_int('window-previews-width', widget.get_value());
+                this._settings.set_int('window-preview-width', widget.get_value());
             }));
 
-            this._builder.get_object('preview_height_spinbutton').set_value(this._settings.get_int('window-previews-height'));
+            this._builder.get_object('preview_height_spinbutton').set_value(this._settings.get_int('window-preview-height'));
             this._builder.get_object('preview_height_spinbutton').connect('value-changed', Lang.bind (this, function(widget) {
-                this._settings.set_int('window-previews-height', widget.get_value());
+                this._settings.set_int('window-preview-height', widget.get_value());
+            }));
+
+            this._builder.get_object('preview_padding_spinbutton').set_value(this._settings.get_int('window-preview-padding'));
+            this._builder.get_object('preview_padding_spinbutton').connect('value-changed', Lang.bind (this, function(widget) {
+                this._settings.set_int('window-preview-padding', widget.get_value());
             }));
 
             dialog.connect('response', Lang.bind(this, function(dialog, id) {
@@ -727,11 +732,14 @@ const Settings = new Lang.Class({
                     this._settings.set_value('peek-mode-opacity', this._settings.get_default_value('peek-mode-opacity'));
                     this._builder.get_object('peek_mode_opacity_spinbutton').set_value(this._settings.get_int('peek-mode-opacity'));
 
-                    this._settings.set_value('window-previews-width', this._settings.get_default_value('window-previews-width'));
-                    this._builder.get_object('preview_width_spinbutton').set_value(this._settings.get_int('window-previews-width'));
+                    this._settings.set_value('window-preview-width', this._settings.get_default_value('window-preview-width'));
+                    this._builder.get_object('preview_width_spinbutton').set_value(this._settings.get_int('window-preview-width'));
                     
-                    this._settings.set_value('window-previews-height', this._settings.get_default_value('window-previews-height'));
-                    this._builder.get_object('preview_height_spinbutton').set_value(this._settings.get_int('window-previews-height'));
+                    this._settings.set_value('window-preview-height', this._settings.get_default_value('window-preview-height'));
+                    this._builder.get_object('preview_height_spinbutton').set_value(this._settings.get_int('window-preview-height'));
+
+                    this._settings.set_value('window-preview-padding', this._settings.get_default_value('window-preview-padding'));
+                    this._builder.get_object('preview_padding_spinbutton').set_value(this._settings.get_int('window-preview-padding'));
 
                     this._settings.set_value('preview-middle-click-close', this._settings.get_default_value('preview-middle-click-close'));
 
diff --git a/schemas/org.gnome.shell.extensions.dash-to-panel.gschema.xml b/schemas/org.gnome.shell.extensions.dash-to-panel.gschema.xml
index 339c7f0..ded9478 100644
--- a/schemas/org.gnome.shell.extensions.dash-to-panel.gschema.xml
+++ b/schemas/org.gnome.shell.extensions.dash-to-panel.gschema.xml
@@ -262,16 +262,21 @@
       <summary>Display title in preview</summary>
       <description>Display window title in preview</description>
     </key>
-    <key type="i" name="window-previews-width">
+    <key type="i" name="window-preview-width">
       <default>350</default>
       <summary>Window previews width</summary>
       <description>The width of the window previews</description>
     </key>
-    <key type="i" name="window-previews-height">
+    <key type="i" name="window-preview-height">
       <default>200</default>
       <summary>Window previews height</summary>
       <description>The height of the window previews</description>
     </key>
+    <key type="i" name="window-preview-padding">
+      <default>20</default>
+      <summary>Window previews padding</summary>
+      <description>The padding of the window previews</description>
+    </key>
     <key type="b" name="isolate-workspaces">
       <default>false</default>
       <summary>Provide workspace isolation</summary>
diff --git a/stylesheet.css b/stylesheet.css
index a8af2da..762ec06 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -65,7 +65,7 @@
 }
 
 #dashtopanelThumbnailList .popup-menu-item {
-	padding: 1em;
+	padding: 0;
 	border-radius: 5px;
 	spacing: 0;
 }
diff --git a/windowPreview.js b/windowPreview.js
index 7c9549d..81f1914 100644
--- a/windowPreview.js
+++ b/windowPreview.js
@@ -512,8 +512,8 @@ var thumbnailPreview = new Lang.Class({
         if(!scaleFactor)
             scaleFactor = 1;
 
-        this._thumbnailWidth = this._dtpSettings.get_int('window-previews-width')*scaleFactor;
-        this._thumbnailHeight = this._dtpSettings.get_int('window-previews-height')*scaleFactor;
+        this._thumbnailWidth = this._dtpSettings.get_int('window-preview-width')*scaleFactor;
+        this._thumbnailHeight = this._dtpSettings.get_int('window-preview-height')*scaleFactor;
 
         this.parent({reactive: true});
         this._workId = Main.initializeDeferredWork(this.actor, Lang.bind(this, this._onResize));
@@ -525,6 +525,8 @@ var thumbnailPreview = new Lang.Class({
         this.actor.remove_child(this._ornamentLabel);
         this.actor._delegate = this;
 
+        this.actor.set_style('padding: ' + this._dtpSettings.get_int('window-preview-padding') + 'px;');
+
         this.animatingOut = false;
 
         this._windowBox = new St.BoxLayout({ style_class: 'window-box',
@@ -898,10 +900,11 @@ var thumbnailPreviewList = new Lang.Class({
 
         this.actor.connect('destroy', Lang.bind(this, this._onDestroy));
 
-        this._dtpSettings.connect('changed::window-previews-width', () => this._resetPreviews());
-        this._dtpSettings.connect('changed::window-previews-height', () => this._resetPreviews());
+        this._dtpSettings.connect('changed::window-preview-width', () => this._resetPreviews());
+        this._dtpSettings.connect('changed::window-preview-height', () => this._resetPreviews());
         this._dtpSettings.connect('changed::window-preview-show-title', () => this._resetPreviews());
-        
+        this._dtpSettings.connect('changed::window-preview-padding', () => this._resetPreviews());
+
         this._stateChangedId = this.window ? 0 : 
                                this.app.connect('windows-changed', Lang.bind(this, this._queueRedisplay));
     },