[gnome-sound-recorder] isolate expanded row

[Bilal Elmoussaoui <bilelmoussaoui src gnome org>]

commit 4a260f5ec2f5f32f84486d26097e84fec651daa4
Author: Kavan Mevada <kavanmevada gmail com>
Date:   Sun Aug 9 03:28:40 2020 +0530

    isolate expanded row

 data/application.css     | 32 +++++++++++++++++++++++++++++---
 src/recordingsListBox.js | 33 +++++++++++++++++++++++++++++++--
 2 files changed, 60 insertions(+), 5 deletions(-)
---
diff --git a/data/application.css b/data/application.css
index 0aad6c13..226ab198 100644
--- a/data/application.css
+++ b/data/application.css
@@ -15,10 +15,36 @@
 }
 
 
-row label.title {
+list row label.title {
   font-weight: bold;
 }
 
-row label.subtitle {
+list row label.subtitle {
   font-size: smaller;
-}
\ No newline at end of file
+}
+
+list row.expanded {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  border-bottom-width: 1px;
+}
+
+list row.expanded-before {
+  border-bottom-width: 1px;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+
+list row.expanded-after {
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+}
+
+list row:first-child.expanded {
+  margin-top:0;
+}
+
+list row:last-child.expanded {
+  margin-bottom: 0;
+}
diff --git a/src/recordingsListBox.js b/src/recordingsListBox.js
index fd8b0132..30eaf4f2 100644
--- a/src/recordingsListBox.js
+++ b/src/recordingsListBox.js
@@ -74,7 +74,9 @@ var RecordingsListBox = new GObject.registerClass(class RecordingsListBox extend
                 if (row === this.activePlayingRow)
                     this.activePlayingRow = null;
 
-                model.remove(row.get_index());
+                const index = row.get_index();
+                this.isolateAt(index, false);
+                model.remove(index);
             });
 
             return row;
@@ -84,10 +86,37 @@ var RecordingsListBox = new GObject.registerClass(class RecordingsListBox extend
     }
 
     vfunc_row_activated(row) {
-        if (this.activeRow && this.activeRow !== row)
+        if (this.activeRow && this.activeRow !== row) {
             this.activeRow.expanded = false;
+            this.isolateAt(this.activeRow.get_index(), false);
+        }
 
         row.expanded = !row.expanded;
+        this.isolateAt(row.get_index(), row.expanded);
+
         this.activeRow = row;
     }
+
+
+    isolateAt(index, expanded) {
+        const before = this.get_row_at_index(index - 1);
+        const current = this.get_row_at_index(index);
+        const after = this.get_row_at_index(index + 1);
+
+        if (expanded) {
+            if (current)
+                current.get_style_context().add_class('expanded');
+            if (before)
+                before.get_style_context().add_class('expanded-before');
+            if (after)
+                after.get_style_context().add_class('expanded-after');
+        } else {
+            if (current)
+                current.get_style_context().remove_class('expanded');
+            if (before)
+                before.get_style_context().remove_class('expanded-before');
+            if (after)
+                after.get_style_context().remove_class('expanded-after');
+        }
+    }
 });