fix tree view, add features to Blogger

Makefile

@@ -20,7 +20,6 @@ coffees= 	src/core/core.coffee\
 
 
 
-
 packages = CoreServices NotePad wTerm ActivityMonitor DummyApp Files MarkOn MarketPlace Blogger
 
 main:  build_coffees build_tags build_themes schemes libs  build_packages
@@ -78,5 +77,15 @@ build_packages:
 	for d in $(packages); do (cd src/packages/$$d; make);done
 	for d in $(packages); do ( test -d $(BUILDDIR)/packages/$$d || mkdir -p $(BUILDDIR)/packages/$$d && cp -rf src/packages/$$d/build/* $(BUILDDIR)/packages/$$d/);done
 	for d in $(packages); do ( test -d src/packages/$$d/build && rm -r src/packages/$$d/build ); done
+
+package:
+	read -r -p "Enter package name: " PKG;\
+	test -d $(BUILDDIR)/packages/$$PKG && rm -rf $(BUILDDIR)/packages/$$PKG/*;\
+	cd src/packages/$$PKG && make;\
+	cd ../../../;\
+	test -d $(BUILDDIR)/packages/$$PKG || mkdir -p $(BUILDDIR)/packages/$$PKG;\
+	cp -rf src/packages/$$PKG/build/* $(BUILDDIR)/packages/$$PKG/;\
+	test -d src/packages/$$PKG/build && rm -r src/packages/$$PKG/build;
+
 clean:
 	rm -rf $(BUILDDIR)/*

src/core/BaseDialog.coffee

@@ -56,7 +56,7 @@ class BasicDialog extends BaseDialog
         @title = @name if not @title
         html = "<afx-app-window  data-id = 'dia-window' apptitle='#{@title}' width='#{@conf.width}' height='#{@conf.height}'>
                 <afx-vbox>"
-        html += "<#{v.tag} #{v.att} data-id = 'content#{k}'></#{v.tag}>" for k,v of @conf.tags
+        html += "<#{v.tag} #{v.att} style = 'margin-left:5px; margin-right:5px;' data-id = 'content#{k}'></#{v.tag}>" for k,v of @conf.tags
         html += "<div data-height = '35' style=' text-align:right;padding-top:3px;'>"
         html += "<afx-button data-id = 'bt#{k}' text = '#{v.label}' style='margin-right:5px;'></afx-button>" for k,v of @conf.buttons
         html += "</div></afx-vbox></afx-app-window>"
@@ -104,7 +104,7 @@ class PromptDialog extends BasicDialog
                 (d.find "content0").set "text", d.data.label
                 (d.find "content1").value = d.data.value if d.data.value
             xtra: (d) ->
-                $( d.find "content0" ).keyup (e) ->
+                $( d.find "content1" ).keyup (e) ->
                     (d.find "bt0").trigger() if e.which is 13
         }
 

src/core/db.coffee

@@ -3,8 +3,15 @@ class DB
 
     save: (d, f) ->
         _API.handler.dbquery "save", { table: @table, data: d }, f
-    delete: (id, f) ->
+    delete: (c, f) ->
-        _API.handler.dbquery "delete", { table: @table, id: id }, f
+        rq = { table: @table }
+        return  _courrier.oserror "Unknown condition for delete command",
+            (_API.throwe "OS.DB"), c unless c and c inst ""
+        if isNaN c
+            rq.cond = c
+        else
+            rq.id = c
+        _API.handler.dbquery "delete", rq, f
     get: (id, f) ->
         _API.handler.dbquery "get", { table: @table, id: id }, f
     find: (cond, f) ->

src/core/gui.coffee

@@ -97,6 +97,7 @@ self.OS.GUI =
     forceLaunch: (app, args) ->
         console.log "This method is used for developing only, please use the launch method instead"
         _PM.killAll app
+        ($ _OS.APP[app].style).remove() if _OS.APP[app] and _OS.APP[app].style
         _OS.APP[app] = undefined
         _GUI.launch app, args
 
@@ -109,8 +110,9 @@ self.OS.GUI =
                 #load css file
                 css =  "#{path}/main.css"
                 css.asFileHandler().onready (d) ->
-                    $ '<link>', { rel: 'stylesheet', type: 'text/css', 'href': "#{_API.handler.get}/#{css}" }
+                    el = $ '<link>', { rel: 'stylesheet', type: 'text/css', 'href': "#{_API.handler.get}/#{css}" }
                         .appendTo 'head'
+                    _OS.APP[app].style = el[0] if _OS.APP[app]
                 , () ->
                 #launch
                 # load app meta data

src/core/tags/afx-file-view.js

@@ -82,7 +82,7 @@
             var tdata = {}
             tdata.name = self.path
             tdata.nodes = getTreeData(self.data)
-            self.refs.treeview.root.set("*", tdata)
+            self.refs.treeview.root.set("data", tdata)
         }
         var getTreeData = function(data)
         {
@@ -170,20 +170,21 @@
             self.refs.treeview.ontreeselect = function(d)
             {
                 if(!d) return;
-                if(!d.data)// select the root
+                var data;
+                var el = d;
+                if(d.treepath == 0)// select the root
                 {
-                    var r = self.path.asFileHandler()
+                    el = self.path.asFileHandler()
-                    r.size = 0
+                    el.size = 0
-                    r.filename = r.path
+                    el.filename = el.path
-                    d.data = { child: r , i:0  }
                 }
-                var data = {id:self.rid, data:d.data.child, idx:d.data.i}
+                var data = {id:self.rid, data:el}
                 self.root.observable.trigger("fileselect",data)
             }
             self.refs.treeview.ontreedbclick = function(d)
             {
-                if(!d.data) return;
+                if(!d || d.treepath == 0) return;
-                var data = {id:self.rid, data:d.data.child, idx:d.data.i}
+                var data = {id:self.rid, data:d}
                 self.root.observable.trigger("filedbclick",data)
             }
             self.root.observable.on("fileselect", function(e){

src/core/tags/afx-hbox.js

@@ -40,6 +40,8 @@
                     if(dw)
                     {
                         if(dw == "grow") return
+                        if(dw[dw.length-1] === "%")
+	                        dw = Number(dw.slice(0,-1))*avaiWidth/100;
                         $(this).css("width",dw + "px")
                         ocwidth += Number(dw)
                     }
@@ -51,10 +53,11 @@
                     }
                 })
             csize = (avaiWidth - ocwidth)/ (auto_width.length)
-            $.each(auto_width, function(i,v)
+            if(csize > 0)
-            {
+                $.each(auto_width, function(i,v)
-                $(v).css("width", csize + "px")
+                {
-            })
+                    $(v).css("width", csize + "px")
+                })
             self.root.observable.trigger("hboxchange",
                 {id:self.rid, w:csize, h:avaiheight})
         }

src/core/tags/afx-list-view.js

@@ -6,6 +6,9 @@
         <li each={item,i in items } class={selected: parent._autoselect(item,i)} ondblclick = {parent._dbclick}  onclick = {parent._select} oncontextmenu = {parent._select}>
             <afx-label color = {item.color} iconclass = {item.iconclass} icon = {item.icon} text = {item.text}></afx-label>
             <i if = {item.closable} class = "closable" click = {parent._remove}></i>
+            <ul if = {item.complex} class = "complex-content">
+                <li each = {ctn,j in item.content} class = {ctn.class}>{ctn.text}</li>
+            </ul>
         </li>
     </ul>
     </div>

src/core/tags/afx-tree-view.js

@@ -1,41 +1,45 @@
 <afx-tree-view>
 
-  <div class={afx_tree_item_selected:treeroot.selectedItem && treeroot.selectedItem.path == path, afx_folder_item: isFolder(), afx_tree_item_odd: index%2 != 0  } onclick={select} ondblclick = {_dbclick} oncontextmenu = {select}>
+  <div class={afx_tree_item_selected:treeroot.selectedItem && treeroot.selectedItem.treepath == data.treepath, afx_folder_item: isFolder(), afx_tree_item_odd: index%2 != 0  } onclick={select} ondblclick = {_dbclick} oncontextmenu = {select}>
     <ul style = "padding:0;margin:0;white-space: nowrap;">
         <li ref = "padding" ></li>
         <li class = "itemname" style="display:inline-block;" >
-            <i if={ !isFolder() && iconclass} class = {iconclass} ></i>
+            <i if={ !isFolder() && data.iconclass} class = {data.iconclass} ></i>
-            <i if={!isFolder() && icon} class="icon-style" style = { "background: url("+icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i>
+            <i if={!isFolder() && data.icon} class="icon-style" style = { "background: url("+data.icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i>
 
             <span onclick={ toggle } if={ isFolder() } class={open ? 'afx-tree-view-folder-open' : 'afx-tree-view-folder-close'}></span>
-            { name }
+            { data.name }
         </li>
     </ul>
   </div>
 
 
   <ul if={ isFolder() } show={ isFolder() && open }>
-    <li each={ child, i in nodes }>
+    <li each={ child, i in data.nodes }>
-      <afx-tree-view ontreeselect = {parent.ontreeselect} fetch = {parent.fetch} ontreedbclick = {parent.ontreedbclick} data={child} indent={indent+1} observable = {parent.root.observable} path = {parent.path + ">" + i} treeroot= {parent.treeroot}></afx-tree-view>
+      <afx-tree-view ontreeselect = {parent.ontreeselect} index = {i} fetch = {parent.fetch} ontreedbclick = {parent.ontreedbclick} data={child} indent={indent+1} observable = {parent.root.observable} path = {parent.data.treepath + ">" + i} treeroot= {parent.treeroot}></afx-tree-view>
     </li>
   </ul>
 
     <script>
         var self = this
         self.open = true
+        self.data = { name:"", nodes:null, treepath: opts.path, i:-1}
         if(opts.data)
         {
-            self.name = opts.data.name
+            self.data = opts.data
-            self.nodes = opts.data.nodes
+            //self.name = opts.data.name
-            self.icon = opts.data.icon
+            //self.nodes = opts.data.nodes
+            //self.icon = opts.data.icon
             self.open = opts.data.open == undefined?true:opts.data.open
-            self.iconclass = opts.data.iconclass  
+            //self.iconclass = opts.data.iconclass  
         }
-        this.rid = $(self.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1
+        self.rid = $(self.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1
+        self.data.rid = self.rid
+        self.data.i = opts.index
         self.ontreeselect = opts.ontreeselect
         self.ontreedbclick = opts.ontreedbclick
         self.fetch = opts.fetch
-        self.indent = opts.indent || 1
+        self.indent = opts.indent || 0
         var istoggle = false
         if(opts.treeroot)
         {
@@ -47,21 +51,48 @@
             this.treeroot = self
             this.treeroot.counter = 0
         }
-        self.path = opts.path || 0
+        self.data.treepath = opts.path || 0
-        self.selected = false
+        //self.selected = false
         self.selectedItem = null
         self.index = this.treeroot.counter
+        
+        var _dfind = function(l,d, k, v)
+        {
+            if( d[k] == v ) return l.push(d)
+            if(d.nodes && d.nodes.length > 0)
+                for(var i in d.nodes)
+                    _dfind(l, d.nodes[i],k,v)
+        }
+        self.root.find = function(k, v)
+        {
+            var l = []
+            _dfind(l,self.data,k,v)
+            return l
+        }
+
         self.root.set = function(k,v)
         {
             if(k == "*")
                 for(var i in v)
                     self[i] = v[i]
+            else if (k == "data")
+                for(var i in v)
+                    self.data[i] = v[i]
+            else if (k == "selectedItem")
+            {
+                if(self.ontreeselect)
+                    self.ontreeselect(self.data)
+                self.treeroot.selectedItem = v
+                self.root.observable.trigger('treeselect',self.data)
+            }
             else
                 self[k] = v
             self.update()
         }
         self.root.get = function(k)
         {
+            //if(k == "data")
+            //    return {name:self.name, nodes: self.nodes, icon:self.icon, iconclass: self.iconclass, selectedItem:self.selectedItem}
             return self[k]
         }
 
@@ -83,18 +114,21 @@
         })
 
         isFolder() {
-            return self.nodes //&& self.nodes.length
+            return self.data.nodes //&& self.nodes.length
         }
 
         toggle(e) {
             self.open = !self.open
             e.preventDefault()
             istoggle = true
-            if(self.open && self.nodes.length == 0 && self.fetch)
+
+            if(self.open && self.data.nodes.length == 0 && self.fetch)
+            {
                 self.fetch(e.item, function(d){
-                    self.nodes = d
+                    self.data.nodes = d
                     self.update()
                 })
+            }
         }
         
         select(event)
@@ -104,15 +138,15 @@
                 istoggle = false 
                 return
             }
-            var data = {
+            /*var data = {
                 id:self.rid, 
                 data:event.item,
-                path:self.path
+                path:self.data.path
-            } 
+            } */
             if(self.ontreeselect)
-                self.ontreeselect(data)
+                self.ontreeselect(self.data)
-            self.treeroot.selectedItem = data
+            self.treeroot.selectedItem = self.data
-           this.root.observable.trigger('treeselect',data)
+           this.root.observable.trigger('treeselect',self.data)
            event.preventUpdate = true
            self.treeroot.update()
            event.preventDefault()
@@ -124,15 +158,15 @@
                 istoggle = false 
                 return
             }
-            data =  {
+            /*data =  {
                     id:self.rid, 
                     data:event.item,
-                    path: self.path}
+                    path: self.data.path}*/
             if(self.ontreedbclick)
             {
-                self.ontreedbclick(data)
+                self.ontreedbclick(self.data)
             }
-            self.root.observable.trigger('treedbclick', data)
+            self.root.observable.trigger('treedbclick', self.data)
         }
     </script>
 </afx-tree-view>

src/core/tags/afx-vbox.js

@@ -43,6 +43,8 @@
                     if(dw)
                     {
                         if(dw == "grow") return
+                        if(dw[dw.length-1] === "%")
+	                        dw = Number(dw.slice(0,-1))*avaiheight/100;
                         $(this).css("height",dw + "px")
                         ocheight += Number(dw)
                     }
@@ -54,10 +56,11 @@
                     }
                 })
             csize = (avaiheight - ocheight)/ (auto_height.length)
-            $.each(auto_height, function(i,v)
+            if(csize > 0)
-            {
+                $.each(auto_height, function(i,v)
-                $(v).css("height", csize + "px")
+                {
-            })
+                    $(v).css("height", csize + "px")
+                })
             self.root.observable.trigger("vboxchange",
                 {id:self.rid, w:avaiwidth, h:csize})
         }

src/packages/Blogger/Makefile

@@ -1,4 +1,4 @@
-coffee_files = main.coffee
+coffee_files = dialogs.coffee main.coffee
 
 jsfiles =
 

src/packages/Blogger/dialogs.coffee

@@ -0,0 +1,47 @@
+class BloggerCategoryDialog extends this.OS.GUI.BasicDialog
+    constructor: () ->
+        super "BloggerCategoryDialog", {
+            tags: [
+                { tag: "afx-label", att: "data-height = '20', text = 'Pick a parent:'" },
+                { tag: "afx-tree-view" },
+                { tag: "afx-label", att: "data-height = '20', text = 'Category name:'" },
+                { tag: "input", att: "type = 'text' data-height = '20'" }
+            ],
+            width: 200,
+            height: 300,
+            resizable: true,
+            buttons: [
+                {
+                    label: "0k",
+                    onclick: (d) ->
+                        sel = (d.find "content1").get "selectedItem"
+                        return d.notify "Please select a parent category" unless sel
+                        val = (d.find "content3").value
+                        return d.notify "Please enter category name" if val is ""
+                        return d.notify "Parent can not be the category itself" if d.data.cat and d.data.cat.id is sel.id
+                        d.handler { p: sel, value: val } if d.handler
+                        d.quit()
+                },
+                {
+                    label: "Cancel",
+                    onclick: (d) -> d.quit()
+                }
+            ],
+            filldata: (d) ->
+                return unless d.data
+                #console.log d.data
+                tree = d.find "content1"
+                tree.set "data", d.data.tree if d.data.tree
+                if d.data.cat
+                    it = (tree.find "id", d.data.cat.pid)[0]
+                    tree.set "selectedItem", it
+                    (d.find "content3").value = d.data.cat.name
+                #(d.find "content0").set "text", d.data.label
+                #(d.find "content1").value = d.data.value if d.data.value
+            xtra: (d) ->
+                $( d.find "content3" ).keyup (e) ->
+                    (d.find "bt0").trigger() if e.which is 13
+        }
+
+        
+this.OS.register "BloggerCategoryDialog", BloggerCategoryDialog

src/packages/Blogger/main.coffee

@@ -12,11 +12,16 @@ class Blogger extends this.OS.GUI.BaseApplication
         ]
         @user = {}
         @cvlist = @find "cv-list"
+        @cvlist.set "ontreeselect", (d) ->
+            #console.log d
         @bloglist = @find "blog-list"
+        @userdb = new @_api.DB("user")
+        @cvcatdb = new @_api.DB("cv_cat")
         @tabbar.set "onlistselect", (e) ->
             ($ el).hide() for el in me.containers
             me.fetchData e.idx
             ($ me.containers[e.idx]).show()
+            me.trigger "calibrate"
 
         @tabbar.set "items", [
             { iconclass: "fa fa-user-circle", selected: true },
@@ -25,29 +30,90 @@ class Blogger extends this.OS.GUI.BaseApplication
         ]
         (@find "bt-user-save").set "onbtclick", (e) ->
             me.saveUser()
-    
 
+        (@find "cv-cat-add").set "onbtclick", (e) ->
+            me.openDialog "BloggerCategoryDialog",
+            (d) ->
+                c =
+                    name: d.value,
+                    pid: d.p.id,
+                    publish: 1
+                me.cvcatdb.save c, (r) ->
+                    me.error "Cannot add new category" if r.error
+                    me.refreshCVCat()
+                    #update the list
+
+            , "Add category", { tree: me.cvlist.get "data" }
+        
+        (@find "cv-cat-edit").set "onbtclick", (e) ->
+            cat = me.cvlist.get "selectedItem"
+            return unless cat
+            me.openDialog "BloggerCategoryDialog", (d) ->
+                c =
+                    id: cat.id,
+                    publish: cat.publish,
+                    pid: d.p.id,
+                    name: d.value
+                
+                me.cvcatdb.save c, (r) ->
+                    me.error "Cannot Edit category" if r.error
+                    me.refreshCVCat()  
+            , "Edit category", { tree: (me.cvlist.get "data"), cat: cat }
+
+        (@find "cv-cat-del").set "onbtclick", (e) ->
+            cat = me.cvlist.get "selectedItem"
+            return unless cat
+            me.openDialog "YesNoDialog",
+                (d) ->
+                    return unless d
+                    console.log "delete all child + theirs content"
+            , "Delete cagegory" ,
+            { iconclass: "fa fa-question-circle", text: "Do you really want to delete: #{cat.name} ?" }
     fetchData: (idx) ->
         me = @
         switch idx
             when 0 #user info
-                db = new @_api.DB("user")
+                
-                db.get null, (d) ->
+                @userdb.get null, (d) ->
                     return me.error "Cannot fetch user data" if d.error
                     me.user = d.result[0]
                     inputs = me.select "[imput-class='user-input']"
                     ($ v).val me.user[v.name] for v in inputs
+            when 1 # category
+                @refreshCVCat()
             else 
                 console.log "Not implemented yet"
 
+    refreshCVCat: () ->
+        me = @
+        data =
+            name: "Porfolio",
+            id:0,
+            nodes: []
+        @cvcatdb.get null, (d) ->
+            return me.notify "Cannot fetch CV categories" if d.error
+            me.fetchCVCat d.result, data, "0"
+            me.cvlist.set "data", data
+            it = (me.cvlist.find "pid", "2")[0]
+            me.cvlist.set "selectedItem", it
+
+    fetchCVCat: (table, data, id) ->
+        result = (v for v in table when v.pid is id)
+        return data.nodes = null if result.length is 0
+        for v in result
+            v.nodes = []
+            @fetchCVCat table, v, v.id
+            #v.nodes = null if v.nodes.length is 0
+            data.nodes.push v
+            
+
     saveUser:() ->
         me = @
         inputs = @select "[imput-class='user-input']"
         @user[v.name] = ($ v).val() for v in inputs
         return @notify "Full name must be entered" if not @user.fullname or @user.fullname is ""
-        db = new @_api.DB("user")
+        #console.log @user
-        console.log @user
+        @userdb.save @user, (r) ->
-        db.save @user, (r) ->
             return me.error "Cannot save user data" if r.error
             return me.notify "User data updated"
 

src/packages/Blogger/main.css

@@ -4,13 +4,13 @@ afx-app-window[data-id="blogger-win"] afx-list-view[data-id="tabbar"]  {
     background-color: #333333;
 }
 
-afx-app-window[data-id="blogger-win"] afx-list-view[data-id="tabbar"] li {
+afx-app-window[data-id="blogger-win"] afx-list-view[data-id="tabbar"] > div > ul > li {
     background-color: #333333;
     font-size: 20px;
     color: #929292;
 }
 
-afx-app-window[data-id="blogger-win"] afx-list-view[data-id="tabbar"] li.selected{
+afx-app-window[data-id="blogger-win"] afx-list-view[data-id="tabbar"] > div > ul > li.selected{
     color:white;
 }
 afx-app-window[data-id="blogger-win"] afx-hbox[data-id="user-container"] {
@@ -22,4 +22,21 @@ afx-app-window[data-id="blogger-win"] afx-hbox[data-id="user-container"] afx-hbo
 }
 afx-app-window[data-id="blogger-win"] afx-hbox[data-id="user-container"] afx-label{
     font-weight: bold;
-}
+}
+afx-app-window[data-id="blogger-win"] afx-hbox.cv-side-bar-btn{
+    padding-left:3px;
+    padding-top:3px;
+    background-color: #f6F6F6;
+    border-top: 1px solid #cbcbcb;
+    color:#414339;
+}
+afx-app-window[data-id="blogger-win"] afx-resizer{
+    border-left: 1px solid #cbcbcb;
+    background-color: transparent;
+}
+afx-app-window[data-id="blogger-win"] afx-hbox[data-id="cv-container"]  afx-label.cat-header{
+    background-color: #f6F6F6;
+    border-bottom: 1px solid #cbcbcb;
+    text-align: center;
+}
+

src/packages/Blogger/scheme.html

@@ -1,8 +1,8 @@
-<afx-app-window data-id = "blogger-win" apptitle="MarketPlace" width="500" height="400">
+<afx-app-window data-id = "blogger-win" apptitle="Blogger" width="500" height="500">
     <afx-hbox >
         <afx-list-view data-id="tabbar" data-width="30"></afx-list-view>
         <afx-vbox>
-            <afx-hbox data-id="user-container" data-height="grow">
+            <afx-hbox data-id="user-container" data-height="100%">
                 <afx-vbox>
                     <afx-hbox data-height = "30">
                         <afx-label data-width= "70" text = "Full name:"></afx-label>
@@ -25,20 +25,29 @@
                         <input type = "text" name="url" imput-class = "user-input"/>
                     </afx-hbox>
                     <afx-label data-height = "30" text = "Short biblio:"/>
-                    <textarea rows="10" name="shortbiblio" imput-class = "user-input"/>
+                    <textarea name="shortbiblio" imput-class = "user-input"/>
-                    <afx-hbox data-height = "30">
+                    <afx-hbox data-height = "35">
                         <div></div>
                         <afx-button iconclass = "fa fa-save" data-id = "bt-user-save" data-width="55" text = "Save"/>
                     </afx-hbox>
                 </afx-vbox>
             </afx-hbox>
-            <afx-hbox data-id="cv-container" data-height="grow">
+            <afx-hbox data-id="cv-container" data-height="100%">
-                <afx-list-view data-id = "cv-list" data-width="100" ></afx-list-view>
+                <afx-vbox data-width="150" min-width="100">
+                        <afx-label class = "cat-header" data-height = "23" text = "Categories" iconclass = "fa fa-bars"></afx-label>
+                        <afx-tree-view data-id = "cv-list" ></afx-tree-view>
+                        <afx-hbox data-height="30" class = "cv-side-bar-btn">
+                            <afx-button data-id = "cv-cat-add" data-width = "25" text = "" iconclass = "fa fa-plus-circle"></afx-button>
+                            <afx-button data-id = "cv-cat-del" data-width = "25" text = "" iconclass = "fa fa-minus-circle"></afx-button>
+                            <afx-button data-id = "cv-cat-edit" data-width = "25" text = "" iconclass = "fa fa-pencil-square-o"></afx-button>
+                        </afx-hbox>
+                </afx-vbox>
+                <afx-resizer data-width = "3"/>
                 <afx-vbox>
                     info here
                 </afx-vbox>
             </afx-hbox>
-            <afx-hbox data-id = "blog-container" data-height="grow">
+            <afx-hbox data-id = "blog-container" data-height="100%">
                 <afx-list-view data-id = "blog-list" data-width="100"></afx-list-view>
                 <afx-vbox>
                     blog here

src/packages/DummyApp/main.coffee

@@ -23,7 +23,7 @@ class DummyApp extends this.OS.GUI.BaseApplication
         tdata = {
             name: 'My Tree',
             nodes: [
-                { name: 'hello', icon:'fa fa-car'},
+                { name: 'hello', iconclass:'fa fa-car'},
                 { name: 'wat' },
                 {
                     name: 'child folder',
@@ -48,7 +48,7 @@ class DummyApp extends this.OS.GUI.BaseApplication
                 }
             ]
         }
-        tree.set "*",tdata
+        tree.set "data",tdata
 
         list = @find "mylist"
         ldata = [
@@ -58,7 +58,7 @@ class DummyApp extends this.OS.GUI.BaseApplication
             {text:"some thing"},
             {text:"some thing"},
             {text:"some thing"},
-            {text:"some thing"},
+            {text:"some thing", complex:true, content:[{text:"Inner content", class:""}]},
             {text:"some thing"},
             {text:"some thing"},
             {text:"some thing"},

src/packages/NotePad/main.css

@@ -22,7 +22,7 @@ afx-app-window[data-id="notepad"] .afx-window-content {
     background-color: #f6F6F6;
 }
 
-afx-tab-container[data-id="tabarea"] afx-list-view li {
+afx-tab-container[data-id="tabarea"] afx-list-view >  div.list-container > ul > li {
     background-color: #dfdfdf;
     color:#272822;
     border: 0;
@@ -39,7 +39,7 @@ afx-tab-container[data-id="tabarea"] afx-list-view{
 /*afx-tab-container[data-id="tabarea"] afx-list-view i.closable:before{
     color: white;
 }*/
-afx-tab-container[data-id="tabarea"] afx-list-view li.selected {
+afx-tab-container[data-id="tabarea"] afx-list-view  > div.list-container > ul > li.selected {
     background-color: #f6F6F6;
     border-radius: 0;
 }

src/themes/antos/afx-file-view.css

@@ -12,7 +12,7 @@ afx-file-view div.status{
     border-top: 1px solid #cbcbcb;
     color:#414339;
 }
-afx-file-view afx-list-view li{
+afx-file-view afx-list-view > div.list-container > ul > li{
     float:left;
     display: block;
     width:70px;
@@ -23,7 +23,7 @@ afx-file-view afx-list-view li{
     margin-right: 5px;
     margin-bottom: 5px;
 }
-afx-file-view afx-list-view li:nth-child(odd){
+afx-file-view afx-list-view > div.list-container > ul > li:nth-child(odd){
     background-color: transparent;
 }
 afx-file-view afx-list-view i.dir:before{
@@ -51,7 +51,7 @@ afx-file-view afx-list-view i.file:before{
     font-weight: normal;
 }
 
-afx-file-view afx-list-view  li.selected, afx-file-view afx-list-view  li.selected  i:before {
+afx-file-view afx-list-view > div.list-container > ul > li.selected, afx-file-view afx-list-view div.list-container > ul  li.selected  i:before {
     background-color: #116cd6;
     color:white;
     border-radius: 6px;

src/themes/antos/afx-list-view.css

@@ -11,12 +11,12 @@ afx-list-view div.list-container{
     position: relative;
     background-color: red;
 }*/
-afx-list-view  ul{
+afx-list-view > div.list-container >  ul{
     margin:0;
     padding: 0;
 }
 
-afx-list-view  li{
+afx-list-view  > div.list-container > ul > li{
     margin:0;
     padding:0;
     list-style: none;
@@ -29,7 +29,7 @@ afx-list-view  li{
     -webkit-user-select:none;
     cursor:default;
 }
-afx-list-view li:nth-child(odd){
+afx-list-view > div.list-container > ul >li:nth-child(odd){
     background-color: #f5F5F5;
 }
 afx-list-view  i.closable{
@@ -49,11 +49,11 @@ afx-list-view  i.closable:before{
     top:5px;
 }
 
-afx-list-view   li > i {
+afx-list-view  > div.list-container > ul > li > i {
     margin-right: 3px;
     
 }
-afx-list-view   li.selected {
+afx-list-view  > div.list-container > ul > li.selected {
     background-color: #116cd6;
     color:white;
 }
@@ -76,20 +76,20 @@ afx-list-view.dropdown {
     padding:0;
     margin: 0;
 }
-afx-list-view.dropdown div.list-container ul{
+afx-list-view.dropdown > div.list-container > ul{
     max-height: 150px;
     overflow-y: auto;
     overflow-x: hidden;
     background-color: white;
 }
-afx-list-view.dropdown div.list-container ul{
+afx-list-view.dropdown > div.list-container > ul{
     border:1px solid #a6a6a6;
     box-shadow: 1px 1px 1px #9f9F9F;
     border-radius: 3px;
     padding:2px;
     border-top-left-radius: 0px;
 }
-afx-list-view.dropdown div.list-container ul li{
+afx-list-view.dropdown > div.list-container > ul > li{
     display: inline-block;
     width:100%;
 }
@@ -112,8 +112,18 @@ afx-list-view.dropdown div.list-container div:before {
     top:25%;
     right: 5px;
  }
-afx-list-view.dropdown div.list-container ul li:hover{
+afx-list-view.dropdown > div.list-container > ul > li:hover{
     background-color: #dcdcdc;
     color: #414339;
 }
-
+afx-list-view ul.complex-content{
+    padding: 0;
+    margin: 0;
+    background-color: transparent;
+}
+afx-list-view ul.complex-content li{
+    padding:0;
+    background-color: transparent;
+    color:#5e5f59;
+    list-style: none;
+}