diff --git a/HISTORY.md b/HISTORY.md index c31806ab..f3e0b2ce 100755 --- a/HISTORY.md +++ b/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" diff --git a/src/gui.js b/src/gui.js index 7d00746f..cf603ee6 100644 --- a/src/gui.js +++ b/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 = () => {