Wrapping up work on the folderized thangs treema in the level editor.

app/styles/editor/level/thangs-tab-view.sass

@@ -1,7 +1,7 @@
 @import "../../bootstrap/mixins"
    
 #thangs-tab-view
-  $extantThangsWidth: 300px
+  $extantThangsWidth: 250px
   position: absolute
   top: 0
   bottom: 0
@@ -45,7 +45,7 @@
       top: 20px
     #thangs-treema
       position: absolute
-      top: 37px
+      top: 45px
       left: 0
       right: 0
       bottom: 0
@@ -60,13 +60,34 @@
     
     .treema-children .treema-row *
       cursor: pointer !important
+      
+    .treema-key
+      display: none
+      
+    h6
+      margin: 0
+      line-height: 20px
+      
+    .treema-thangs-folder
+      margin-top: 2px
+      color: #253341
+      
+    .treema-thang
+      color: #253341
+      position: relative
+      left: -20px
+      
+    .treema-node
+      border: none
     
     img
       float: left
       width: 18px
       margin-right: 5px
+      margin-left: 5px
       position: relative
-      top: 2px
+      border: 1px solid gray
+      //top: 2px
       
   .world-container
     margin-left: 0

app/templates/editor/level/thangs-tab-view.jade

@@ -2,7 +2,7 @@ button.btn#thangs-container-toggle
   span.icon-list
 button.btn#thangs-palette-toggle
   span.icon-plus
-.thangs-container.hide#all-thangs
+.thangs-container#all-thangs
   h3(data-i18n="editor.level_tab_thangs_title") Current Thangs
   #thangs-treema(title="Double click to configure a thang")
 

app/views/editor/level/thangs/ThangsTabView.coffee

@@ -163,6 +163,8 @@ module.exports = class ThangsTabView extends CocoView
     @thangsTreema = @$el.find('#thangs-treema').treema treemaOptions
     @thangsTreema.build()
     @thangsTreema.open()
+    @openSmallerFolders(@thangsTreema)
+    
     @onThangsChanged()  # Initialize the World with Thangs
     @initSurface()
     thangsHeaderHeight = $('#thangs-header').height()
@@ -170,6 +172,14 @@ module.exports = class ThangsTabView extends CocoView
     $('#thangs-list').height(oldHeight - thangsHeaderHeight)
     if data?.length
       @$el.find('.generate-terrain-button').hide()
+      
+  openSmallerFolders: (folderTreema) ->
+    children = _.values folderTreema.childrenTreemas
+    for child in children
+      continue if child.data.thangType
+      if _.keys(child.data).length < 5
+        child.open()
+        @openSmallerFolders(child)      
 
   initSurface: ->
     surfaceCanvas = $('canvas#surface', @$el)
@@ -583,7 +593,13 @@ class ThangsFolderNode extends TreemaNode.nodeMap.object
     trackedActionDescription
     
   buildValueForDisplay: (valEl, data) ->
-    @buildValueForDisplaySimply valEl, @countThangs(data)
+    el = $("<span><strong>#{@keyForParent}</strong> <span class='text-muted'>(#{@countThangs(data)})</span></span>")
+    
+    # Kind of like having the portraits on the individual thang rows, rather than the parent folder row
+    # but keeping this logic here in case we want to have it the other way.
+#    if thangType = @nameToThangType(@keyForParent)
+#      el.prepend($("<img class='img-circle' src='#{thangType.getPortraitURL()}' />"))
+    valEl.append(el)
     
   countThangs: (data) ->
     return 0 if data.thangType and data.id
@@ -595,12 +611,6 @@ class ThangsFolderNode extends TreemaNode.nodeMap.object
         num += @countThangs(value)
     num
   
-  build: ->
-    res = super(arguments...)
-    if thangType = @nameToThangType(@keyForParent)
-      @$el.prepend($("<img src='#{thangType.getPortraitURL()}' />"))
-    res
-
   nameToThangType: (name) ->
     if not ThangsFolderNode.nameToThangTypeMap
       thangTypes = @settings.supermodel.getModels(ThangType)
@@ -616,12 +626,16 @@ class ThangNode extends TreemaObjectNode
   @thangKindMap: {}
   buildValueForDisplay: (valEl, data) ->
     pos = _.find(data.components, (c) -> c.config?.pos?)?.config.pos  # TODO: hack
-    s = ''
+    s = data.id
     if pos
       s += " (#{Math.round(pos.x)}, #{Math.round(pos.y)})"
     else
       s += ' (non-physical)'
     @buildValueForDisplaySimply valEl, s
 
+    thangType = @settings.supermodel.getModelByOriginal(ThangType, data.thangType)
+    if thangType
+      valEl.prepend($("<img class='img-circle' src='#{thangType.getPortraitURL()}' />"))
+
   onEnterPressed: ->
     Backbone.Mediator.publish 'editor:edit-level-thang', thangID: @getData().id