feedback (see commit description for details)

* fill blank space when no theme is selected
* animate row's height in themes/components list when selecting, and hide children list
* show warning when you move to a different page and have unsaved changes
* refactor `adminCustomizeThemes.show` controller
* allow collapsing/expanding children lists
* fix a bug when adding components to a theme (changed the way it works slightly)
* a bunch of other minor things

app/assets/javascripts/admin/components/themes-list-item.js.es6

@@ -1,32 +1,136 @@
-import { default as computed } from "ember-addons/ember-computed-decorators";
+import {
+  default as computed,
+  observes
+} from "ember-addons/ember-computed-decorators";
 
 const MAX_COMPONENTS = 4;
 
 export default Ember.Component.extend({
+  childrenExpanded: false,
   classNames: ["themes-list-item"],
-  classNameBindings: ["theme.active:active"],
+  classNameBindings: ["theme.selected:selected"],
   hasComponents: Em.computed.gt("children.length", 0),
-  hasMore: Em.computed.gt("moreCount", 0),
+  displayComponents: Em.computed.and("hasComponents", "theme.isActive"),
+  displayHasMore: Em.computed.gt("theme.childThemes.length", MAX_COMPONENTS),
+
+  click(e) {
+    if (!$(e.target).hasClass("others-count")) {
+      this.navigateToTheme();
+    }
+  },
+
+  init() {
+    this._super(...arguments);
+    this.scheduleAnimation();
+  },
+
+  @observes("theme.selected")
+  triggerAnimation() {
+    this.animate();
+  },
+
+  scheduleAnimation() {
+    Ember.run.schedule("afterRender", () => {
+      this.animate(true);
+    });
+  },
+
+  animate(isInitial) {
+    const $container = this.$();
+    const $list = this.$(".components-list");
+    if ($list.length === 0 || Ember.testing) {
+      return;
+    }
+    const duration = 300;
+    if (this.get("theme.selected")) {
+      this.collapseComponentsList($container, $list, duration);
+    } else if (!isInitial) {
+      this.expandComponentsList($container, $list, duration);
+    }
+  },
 
   @computed(
     "theme.component",
     "theme.childThemes.@each.name",
-    "theme.childThemes.length"
+    "theme.childThemes.length",
+    "childrenExpanded"
   )
   children() {
     const theme = this.get("theme");
-    const children = theme.get("childThemes");
+    let children = theme.get("childThemes");
     if (theme.get("component") || !children) {
       return [];
     }
-    return children.slice(0, MAX_COMPONENTS).map(t => t.get("name"));
+    children = this.get("childrenExpanded")
+      ? children
+      : children.slice(0, MAX_COMPONENTS);
+    return children.map(t => t.get("name"));
   },
 
-  @computed("theme.childThemes.length", "theme.component", "children.length")
-  moreCount(childrenCount, component) {
-    if (component || !childrenCount) {
+  @computed(
+    "theme.childThemes.length",
+    "theme.component",
+    "childrenExpanded",
+    "children.length"
+  )
+  moreCount(childrenCount, component, expanded) {
+    if (component || !childrenCount || expanded) {
       return 0;
     }
     return childrenCount - MAX_COMPONENTS;
+  },
+
+  expandComponentsList($container, $list, duration) {
+    $container.css("height", `${$container.height()}px`);
+    $list.css("display", "");
+    $container.animate(
+      {
+        height: `${$container.height() + $list.outerHeight(true)}px`
+      },
+      {
+        duration,
+        done: () => {
+          $list.css("display", "");
+          $container.css("height", "");
+        }
+      }
+    );
+    $list.animate(
+      {
+        opacity: 1
+      },
+      {
+        duration
+      }
+    );
+  },
+
+  collapseComponentsList($container, $list, duration) {
+    $container.animate(
+      {
+        height: `${$container.height() - $list.outerHeight(true)}px`
+      },
+      {
+        duration,
+        done: () => {
+          $list.css("display", "none");
+          $container.css("height", "");
+        }
+      }
+    );
+    $list.animate(
+      {
+        opacity: 0
+      },
+      {
+        duration
+      }
+    );
+  },
+
+  actions: {
+    toggleChildrenExpanded() {
+      this.toggleProperty("childrenExpanded");
+    }
   }
 });

app/assets/javascripts/admin/components/themes-list.js.es6

@@ -1,7 +1,7 @@
 import { THEMES, COMPONENTS } from "admin/models/theme";
 import { default as computed } from "ember-addons/ember-computed-decorators";
 
-const NUM_ENTRIES = 8;
+const MAX_LIST_HEIGHT = 700;
 
 export default Ember.Component.extend({
   THEMES: THEMES,
@@ -63,15 +63,24 @@ export default Ember.Component.extend({
   },
 
   didRender() {
-    let height = -1;
-    this.$(".themes-list-item")
-      .slice(0, NUM_ENTRIES)
-      .each(function() {
-        height += $(this).outerHeight();
-      });
-    if (height >= 485 && height <= 800) {
-      this.$(".themes-list-container").css("max-height", `${height}px`);
+    this._super(...arguments);
+
+    // hide scrollbar
+    const $container = this.$(".themes-list-container");
+    const containerNode = $container[0];
+    if (containerNode) {
+      const width = containerNode.offsetWidth - containerNode.clientWidth;
+      $container.css("width", `calc(100% + ${width}px)`);
     }
+
+    let height = -1;
+    Array.from(this.$(".themes-list-item")).forEach(node => {
+      const nodeHeight = $(node).outerHeight();
+      if (height + nodeHeight <= MAX_LIST_HEIGHT) {
+        height += nodeHeight;
+      }
+    });
+    $container.css("max-height", `${height}px`);
   },
 
   actions: {
@@ -79,6 +88,11 @@ export default Ember.Component.extend({
       if (newTab !== this.get("currentTab")) {
         this.set("currentTab", newTab);
       }
+    },
+    navigateToTheme(theme) {
+      Em.getOwner(this)
+        .lookup("router:main")
+        .transitionTo("adminCustomizeThemes.show", theme);
     }
   }
 });