adjusted scene album rendering

HISTORY.md

@@ -10,6 +10,7 @@
 
 ### 2021-05-11
 * gui: add multi-scene projects 
+* gui: adjusted scene album rendering
 
 ### 2021-05-10
 * gui: project menu entries for "new scene" and "add scene" 

src/gui.js

@@ -1884,7 +1884,7 @@ IDE_Morph.prototype.createCorralBar = function () {
 
 IDE_Morph.prototype.createCorral = function (keepSceneAlbum) {
     // assumes the corral bar has already been created
-    var frame, padding = 5, myself = this,
+    var frame, padding = 5, line = this.padding, myself = this,
         album = this.corral? this.corral.album : null;
 
     this.createStageHandle();
@@ -1925,10 +1925,14 @@ IDE_Morph.prototype.createCorral = function (keepSceneAlbum) {
     this.corral.add(frame);
 
     // scenes +++
+    this.corral.albumFrame = new Morph();
+    this.corral.albumFrame.color = this.backgroundColor;
+    this.corral.add(this.corral.albumFrame);
+
     this.corral.album = keepSceneAlbum ? album
             : new SceneAlbumMorph(this, this.sliderColor);
-    this.corral.album.color = this.frameColor; // this.groupColor;
-    this.corral.add(this.corral.album);
+    this.corral.album.color = this.groupColor; // this.frameColor;
+    this.corral.albumFrame.add(this.corral.album);
 
     this.corral.fixLayout = function () {
         this.stageIcon.setCenter(this.center());
@@ -1936,14 +1940,24 @@ IDE_Morph.prototype.createCorral = function (keepSceneAlbum) {
 
         // scenes +++
         if (myself.scenes.length() < 2) {
-            this.album.hide();
+            this.albumFrame.hide();
         } else {
             this.stageIcon.setTop(this.top());
-            this.album.show();
+            this.albumFrame.show();
+
+            this.albumFrame.setLeft(this.left());
+            this.albumFrame.setTop(this.stageIcon.bottom() + padding);
+            this.albumFrame.setWidth(this.stageIcon.width() + padding * 2);
+            this.albumFrame.setHeight(
+                this.height() - this.stageIcon.height() - padding
+            );
+
             this.album.setLeft(this.left());
-            this.album.setTop(this.stageIcon.bottom() + padding);
-            this.album.setWidth(this.stageIcon.width() + padding * 2);
-            this.album.setHeight(this.height() - this.stageIcon.height() - padding); // +++
+            this.album.setTop(this.stageIcon.bottom() + padding + line);
+            this.album.setWidth(this.stageIcon.width() + padding * 2 - line);
+            this.album.setHeight(
+                this.height() - this.stageIcon.height() - padding - line
+            );
         }
 
         this.frame.setLeft(this.stageIcon.right() + padding);
@@ -10230,9 +10244,9 @@ SceneIconMorph.prototype.init = function (aScene) {
     var colors, action, query;
 
     colors = [
-        IDE_Morph.prototype.frameColor,
         IDE_Morph.prototype.groupColor,
-        IDE_Morph.prototype.groupColor
+        IDE_Morph.prototype.frameColor,
+        IDE_Morph.prototype.frameColor
     ];
 
     action = () => {