remote handler

Makefile

@@ -6,7 +6,7 @@ NC=\033[0m
 
 coffees= 	src/core/core.coffee\
         	src/core/api.coffee\
-        	src/core/handlers/TestHandler.coffee\
+        	src/core/handlers/RemoteHandler.coffee\
         	src/core/gui.coffee\
 			src/core/BaseModel.coffee\
 			src/core/BaseApplication.coffee\
@@ -22,7 +22,7 @@ coffees= 	src/core/core.coffee\
 packages = NotePad wTerm ActivityMonitor DummyApp Files
 services = PushNotification Spotlight Calendar
 
-main: clean build_coffees build_tags build_themes schemes libs build_services build_packages
+main:  build_coffees build_tags build_themes schemes libs build_services build_packages
 	- cp src/index.html $(BUILDDIR)/
 
 lite: build_coffee build_tag build_theme schemes  build_services build_packages
@@ -67,7 +67,7 @@ antos_themes_build:
 	for f in src/themes/antos/*.css; do (cat "$${f}"; echo) >> $(BUILDDIR)/resources/themes/antos/antos.css;done
 	-mkdir -p $(BUILDDIR)/resources/themes/antos/fonts
 	cp -rf src/themes/antos/fonts/* $(BUILDDIR)/resources/themes/antos/fonts
-	cp src/themes/antos/wallpaper.jpg $(BUILDDIR)/resources/themes/antos/
+	cp src/themes/antos/wp.png $(BUILDDIR)/resources/themes/antos/
 
 
 build_services:

src/antos.coffee

@@ -1,7 +1,7 @@
 _GUI = self.OS.GUI
 _API = self.OS.API
-_APP = self.OS.APP
 _PM  = self.OS.PM
+_OS = self.OS
 _courrier = self.OS.courrier
 this.onload = () ->
     console.log "Booting the os"

src/core/BaseApplication.coffee

@@ -1,7 +1,7 @@
 self = this
 class BaseApplication extends this.OS.GUI.BaseModel
-    constructor: (name) ->
+    constructor: (name, args) ->
-        super name
+        super name, args
 
     init: ->
         me = @
@@ -44,11 +44,11 @@ class BaseApplication extends this.OS.GUI.BaseModel
         if not evt.prevent
             @.appmenu.set "items", [] if @.pid == @.appmenu.pid
             ($ @scheme).remove()
-    meta: () -> _APP[@name].meta
+    meta: () -> _OS.APP[@name].meta
     baseMenu: ->
         mn =
             [{
-                text: _APP[@name].meta.name,
+                text: _OS.APP[@name].meta.name,
                 child: [
                     { text: "About", dataid: "#{@name}-about" },
                     { text: "Exit", dataid: "#{@name}-exit" }

src/core/BaseDialog.coffee

@@ -1,6 +1,6 @@
 class BaseDialog extends this.OS.GUI.BaseModel
     constructor: (name) ->
-        super name
+        super name, null
         @parent = undefined
         @modal = false
         @handler = undefined
@@ -47,8 +47,8 @@ class BasicDialog extends BaseDialog
         html = "<afx-app-window  data-id = 'dia-window' apptitle='#{@name}' width='#{@conf.width}' height='#{@conf.height}'>
                 <afx-hbox>"
         html += "<#{@conf.tag} data-id = 'content'></#{@conf.tag}>"
-        html += "<div data-height = '40' style='padding:5px; text-align:right;'>"
+        html += "<div data-height = '40' style=' text-align:right;padding-top:3px;'>"
-        html += "<afx-button data-id = 'bt#{k}' text = '#{v.label}' style='margin-left:3px;'></afx-button>" for k,v of @conf.buttons
+        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-hbox></afx-app-window>"
         #render the html
         _GUI.htmlToScheme html, @, @host
@@ -60,6 +60,7 @@ class BasicDialog extends BaseDialog
         f = (_v) -> () -> _v.onclick me
         # bind action to button
         ( (me.find "bt#{k}").set "onbtclick", f(v) ) for k, v of @conf.buttons
+        @conf.filldata @ if @conf.filldata
 
 this.OS.GUI.BasicDialog = BasicDialog
 
@@ -115,6 +116,22 @@ class ColorPickerDialog extends BasicDialog
         }
 this.OS.register "ColorPickerDialog", ColorPickerDialog
 
+class InfoDialog extends BasicDialog
+    constructor: () ->
+        super "InfoDialog", {
+            tag: 'afx-grid-view',
+            width: 250,
+            height: 300,
+            resizable: true,
+            buttons: [ { label: 'Cancel', onclick: (d) -> d.quit() } ],
+            filldata: (d) ->
+                return unless d.data
+                rows = []
+                rows.push [ { value: k }, { value: v } ] for k, v of d.data
+                (d.find "content").set "rows", rows
+        }
+this.OS.register "InfoDialog", InfoDialog
+
 class AboutDialog extends BaseDialog
     constructor: () ->
         super "AboutDialog"

src/core/BaseModel.coffee

@@ -1,10 +1,12 @@
 class BaseModel
-    constructor: (@name) ->
+    constructor: (@name, @args) ->
         @observable = riot.observable()
         @_api = self.OS.API
         me = @
         @on "exit", () -> me.quit()
         @host = "#desktop"
+        _OS.setting.applications[@name] = {} if not _OS.setting.applications[@name]
+        @setting = _OS.setting.applications[@name]
         @dialog = undefined
 
     render: (p) ->
@@ -29,7 +31,7 @@ class BaseModel
 
     subscribe: (e, f) -> _courrier.on e, f, @
 
-    openDialog: (d, f) ->
+    openDialog: (d, f, data) ->
         if @dialog
             @dialog.show()
             return
@@ -40,6 +42,7 @@ class BaseModel
         @dialog.parent = @
         @dialog.handler = f
         @dialog.pid = @pid
+        @dialog.data = data
         @dialog.init()
 
     publish: (t, m) ->

src/core/BaseService.coffee

@@ -1,6 +1,6 @@
 class BaseService extends this.OS.GUI.BaseModel
-    constructor: (name) ->
+    constructor: (name, args) ->
-        super name
+        super name, args
         @icon = undefined
         @iconclass = "fa-paper-plane-o"
         @text = ""

src/core/api.coffee

@@ -3,20 +3,20 @@ self.OS.API =
     # fetch user data, used by the API to make requests
     # handlers are defined in /src/handlers
     handler: {}
-    VFS:
-        scandir: (p, c, f) ->
-            _API.handler.request "scandir", { path: p }, c, f
     #request a user data
     post: (p, d, c, f) ->
         q = _courrier.getMID()
         _API.loading q, p
+        
         $.ajax {
-            type: "POST",
+            type: 'POST',
             url: p,
-            data: d,
+            contentType: 'application/json',
-            success: null,
+            data: JSON.stringify d,
-            dataType: 'json'
+            dataType: 'json',
+            success: null
         }
+        #$.getJSON p, d
         .done (data) ->
             _API.loaded q, p, "OK"
             c(data)
@@ -51,7 +51,7 @@ self.OS.API =
             .fail (e, s) ->
                 _API.loaded q, p, "FAIL"
                 f(e, s)
-    resource: (resource, callback) ->
+    resource: (r, c, f) ->
-        path = "resources/#{resource}"
+        path = "resources/#{r}"
-        _API.get path, callback
+        _API.get path, c, f
         

src/core/core.coffee

@@ -2,10 +2,13 @@
 self = this
 self.OS or=
 
-    API: new Object()
+    API: {}
-    GUI: new Object()
+    GUI: {}
-    APP: new Object()
+    APP: {}
-
+    setting:
+        user: {}
+        applications: {}
+        appearance: {}
     courrier:
         observable: riot.observable()
         quota: 0
@@ -15,6 +18,12 @@ self.OS or=
             _courrier.listeners[a.pid].push { e: e, f: f }
             _courrier.observable.on e, f
         trigger: (e, d) -> _courrier.observable.trigger e, d
+        osfail: (m, e, s) ->
+            _courrier.ostrigger "fail", { m: m,  e: e, s: s }
+        oserror: (m, e, s) ->
+            _courrier.ostrigger "error", { m: m,  e: e, s: s }
+        ostrigger: (e, d) ->
+            _courrier.trigger e, { id: 0, data: d, name: "OS" }
         unregister: (app) ->
             return unless _courrier.listeners[app.pid] and _courrier.listeners[app.pid].length > 0
             _courrier.observable.off i.e, i.f for i in _courrier.listeners[app.pid]
@@ -24,12 +33,12 @@ self.OS or=
             _courrier.quota += 1
             _courrier.quota
     register: (name, x) ->
-        if x.type is 3 then self.OS.GUI.dialog[name] = x else _APP[name] = x
+        if x.type is 3 then self.OS.GUI.dialog[name] = x else _OS.APP[name] = x
     
     PM:
         pidalloc: 0
-        processes: new Object
+        processes: {}
-        createProcess: (app, cls) ->
+        createProcess: (app, cls, args) ->
             #if it is single ton
             # and a process is existing
             # just return it
@@ -37,7 +46,7 @@ self.OS or=
                 _PM.processes[app][0].show()
             else
                 _PM.processes[app] = [] if not _PM.processes[app]
-                obj = new cls
+                obj = new cls(args)
                 obj.birth = (new Date).getTime()
                 _PM.pidalloc++
                 obj.pid = _PM.pidalloc
@@ -55,20 +64,28 @@ self.OS or=
             app
             
         kill: (app) ->
-            return if not _PM.processes[app.name]
+            return if not app.name or not _PM.processes[app.name]
 
             i = _PM.processes[app.name].indexOf app
             if i >= 0
-                if _APP[app.name].type == 1 then _GUI.undock app else _GUI.detachservice app
+                if _OS.APP[app.name].type == 1 then _GUI.undock app else _GUI.detachservice app
                 _courrier.unregister app
                 delete _PM.processes[app.name][i]
                 _PM.processes[app.name].splice i, 1
+        
+        killAll: (app) ->
+            return unless _PM.processes[app]
+            tmp = []
+            tmp.push a for a in _PM.processes[app]
+            a.quit() for a in tmp
 
     boot: ->
-        #first load the configuration
+        #first login
-        #then load the theme
+        _API.handler.auth (d) ->
-        _GUI = self.OS.GUI
+            # in case someone call it more than once :)
-        _GUI.loadTheme "antos"
+            if d.error
-        _GUI.initDM()
+                # show login screen
-        _courrier.observable.one "syspanelloaded", () ->
+                _GUI.login()
-             _GUI.pushServices ["PushNotification", "Spotlight", "Calendar"]
+            else
+                # startX :)
+                _GUI.startAntOS d.result

src/core/gui.coffee

@@ -18,11 +18,11 @@ self.OS.GUI =
             return null unless x
             _GUI.htmlToScheme x, app, parent
         , (e, s) ->
-            _courrier.trigger "fail",
+            _courrier.osfail "Cannot load scheme file: #{path} for #{app.name} (#{app.pid})",e,s
-                    {id: 0, data: {
+
-                        m: "Cannot load scheme file: #{path} for #{app.name} (#{app.pid})",e: e, s: s },
+    clearTheme: () ->
-                    name:"OS"
+         $ "head link#ostheme"
-                    }
+            .attr "href", ""
 
     loadTheme: (name) ->
         path = "resources/themes/#{name}/#{name}.css"
@@ -37,19 +37,23 @@ self.OS.GUI =
         f i for i in srvs
 
     pushService: (srv) ->
-        return _PM.createProcess srv, _APP[srv] if _APP[srv]
+        return _PM.createProcess srv, _OS.APP[srv] if _OS.APP[srv]
         path = "services/#{srv}.js"
         _API.script path,
             (d) ->
-                _PM.createProcess srv, _APP[srv]
+                _PM.createProcess srv, _OS.APP[srv]
             , (e, s) ->
                 _courrier.trigger "srvroutineready", srv
-                _courrier.trigger "fail",
+                _courrier.osfail "Cannot read service script: #{srv} ", e, s
-                    { id:0,data:{m: "Cannot read service script: #{srv} ", e: e, s: s },
-                    name:"0S"}
     
-    launch: (app) ->
+    forceLaunch: (app, args) ->
-        if not _APP[app]
+        console.log "This method is used for developing only, please use the launch method instead"
+        _PM.killAll app
+        _OS.APP[app] = undefined
+        _GUI.launch app, args
+
+    launch: (app, args) ->
+        if not _OS.APP[app]
             # first load it
             path = "packages/#{app}/"
             _API.script path + "main.js",
@@ -61,26 +65,23 @@ self.OS.GUI =
                                 .appendTo 'head'
                         , () ->
                     #launch
-                    if _APP[app]
+                    if _OS.APP[app]
                         # load app meta data
                         _API.get "#{path}package.json",
                             (data) ->
-                                _APP[app].meta = data
+                                _OS.APP[app].meta = data
-                                _PM.createProcess app, _APP[app]
+                                _PM.createProcess app, _OS.APP[app], args
                             , (e, s) ->
-                                _courrier.trigger "fail",
+                                _courrier.osfail "Cannot read application metadata: #{app}", e, s
-                                    {id:0, data:{ m: "Cannot read application metadata: #{app} ",e: e, s: s }, name:"OS"}
                                 alert "cannot read application, meta-data"
                 , (e, s) ->
                     #BUG report here
-                    _courrier.trigger "fail",
+                    _courrier.osfail "Cannot load application script: #{app}", e, s
-                        {id :0, data:{m: "Cannot load application script: #{app}", 
-                        e: e, s:s }, name:"OS"}
                     console.log "bug report", e, s, path
         else
             # now launch it
-            if _APP[app]
+            if _OS.APP[app]
-                _PM.createProcess app, _APP[app]
+                _PM.createProcess app, _OS.APP[app], args
     dock: (app, meta) ->
         # dock an application to a dock
         # create a data object
@@ -118,6 +119,7 @@ self.OS.GUI =
         handler event.target
         event.preventDefault()
     initDM: ->
+        # check login first
         _API.resource "schemes/dm.html", (x) ->
             return null unless x
             scheme =  $.parseHTML x
@@ -134,4 +136,42 @@ self.OS.GUI =
                 console.log "context menu handler for desktop"
             # system menu
             riot.mount ($ "#syspanel", $ "#wrapper")
-            riot.mount ($ "#sysdock", $ "#wrapper"), { items: [] }
+            riot.mount ($ "#sysdock", $ "#wrapper"), { items: [] }
+        , (e, s) ->
+            alert "System fall: Cannot init desktop manager"
+    
+    login: () ->
+        ($ "#wrapper").empty()
+        _GUI.clearTheme()
+        _API.resource "schemes/login.html", (x) ->
+            return null unless x
+            scheme = $.parseHTML x
+            ($ "#wrapper").append scheme
+            ($ "#btlogin").click () ->
+                data =
+                    username: ($ "#txtuser").val(),
+                    password: ($ "#txtpass").val()
+                _API.handler.login data, (d) ->
+                    console.log d
+                    if d.error then ($ "#login_error").html d.error else _GUI.startAntOS d.result
+        , (e, s) ->
+            alert "System fall: Cannot init login screen"
+    
+    startAntOS: (conf) ->
+        ($ "#wrapper").empty()
+        _GUI.clearTheme()
+        _courrier.observable = riot.observable()
+        _OS.APP = {}
+        _PM.processes = {}
+        _PM.pidalloc = 0
+        _OS.setting.applications = conf.applications if conf.applications
+        _OS.setting.appearance = conf.appearance if conf.appearance
+        _OS.setting.user = conf.user
+        # get setting from conf
+        # load packages list
+        # load theme
+        # initDM
+        _GUI.loadTheme "antos"
+        _GUI.initDM()
+        _courrier.observable.one "syspanelloaded", () ->
+            _GUI.pushServices ["PushNotification", "Spotlight", "Calendar"]

src/core/handlers/RemoteHandler.coffee

@@ -0,0 +1,26 @@
+self.OS.API.handler =
+    scandir: (p, c ) ->
+        path = "lua-api/fs/scandir"
+        _API.post path, { path: p }, c, (e, s) ->
+            _courrier.osfail "Fail to make request: #{path}", e, s
+    
+    auth: (c) ->
+        p = "lua-api/system/auth"
+        _API.post p, {}, c, () ->
+            alert "Resource not found: #{p}"
+    login: (d, c) ->
+        p = "lua-api/system/login"
+        _API.post p, d, c, () ->
+            alert "Resource not found: #{p}"
+    logout: () ->
+        p = "lua-api/system/logout"
+        _API.post p, {}, (d) ->
+                _OS.boot()
+            , () ->
+                alert "Resource not found #{p}"
+    setting: () ->
+        p = "lua-api/system/settings"
+        _API.post p, _OS.setting, (d) ->
+            _courrier.oserror "Cannot save system setting", d.error if d.error
+        , (e, s) ->
+            _courrier.osfail "Fail to make request: #{p}", e, s

src/core/handlers/TestHandler.coffee

@@ -1,8 +1,6 @@
 self.OS.API.handler =
-    request: ( p, d, c, f) ->
+    scandir: (p, c ) ->
-        path = switch p
+        path = 'resources/jsons/scandir.json'
-            when 'scandir' then 'resources/jsons/scandir.json'
+        _API.get path , c, (e, s) ->
-            else undefined
+            _courrier.osfail "System fall: Cannot read #{path}", e, s
-        return unless path
+               
-        _API.get path, c, f
-                

src/core/schemes/login.html

@@ -0,0 +1,78 @@
+<!--
+    Since nothing is loaded, the login form is a standalone element, 
+    it deserves it own unique style
+    For now, it can not be themed !!!
+-->
+<style>
+    body, html{
+        background-color: rgba(215,215,215,0.7);
+    }
+    #login_form{
+        width:300px;
+        height: 200px;
+        display: block;
+        border:1px solid #a6a6a6;
+        border-radius: 6px;
+        box-shadow: 1px 1px 1px #9f9F9F;
+        position: absolute;
+        margin: auto;
+        top:0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        font-family:Verdana, Geneva, Tahoma, sans-serif;
+        font-size: 13px;
+        text-align: center;
+        background-color: white;
+        color: #414339;
+    } 
+    
+    #login_form p{
+        display: inline-block;
+        background-color:#dfdfdf;
+        border-bottom: 1px solid #a6a6a6;
+        padding:10px;
+        width: calc(100% - 20px);
+        border-top-left-radius: 6px;
+        border-top-right-radius: 6px;
+        font-weight: bold;
+        margin:0;
+        
+    }
+    #login_form input {
+        width: 250px;
+        outline: none;
+        margin-top:10px;
+        border-radius: 6px;
+        box-sizing: border-box;
+        font-size: 13px;
+        padding: 5px;
+        border: 1px solid #a6a6a6;
+        background-color: white;
+        color: #414339;
+    }
+    #login_form button{
+        margin-top:10px;
+        width: 250px;
+        height: 30px;
+        background-color: #2786F3;
+        color: white;
+        border: 1px solid #dedede;
+        border-radius: 6px;
+        font-family: Verdana, Geneva, Tahoma, sans-serif;
+        font-size: 13px;
+        padding:5px;
+    }
+    #login_error{
+        padding:3px;
+        color:red;
+        font-weight: normal;
+    }
+</style>
+<div id = "login_form">
+    <p>Welcome to AntOS, plese identify</p>
+    <input id = "txtuser" type = "text" value = "User name" />
+    <input id = "txtpass" type = "password" value = "password" />
+    <button id = "btlogin">Login</button>
+    <span id = "login_error"></span>
+</div>

src/core/tags/afx-app-window.js

@@ -77,7 +77,15 @@
             $(self.refs.content).children().each(function(e){
                 this.observable = self.root.observable
             })
-
+            var fn = function()
+            {
+                var ch = $(self.refs.content).height()/ $(self.refs.content).children().length
+                $(self.refs.content).children().each(function(e){
+                    $(this).css("height",ch+"px")
+                })
+            }
+            fn()
+            self.root.observable.on("resize", function(){ fn()})
             self.root.observable.on("focus",function(){
                 window._zindex++
                 $(self.refs.window)

src/core/tags/afx-button.js

@@ -1,11 +1,12 @@
 <afx-button>
     <button disabled={ enable == "false" } onclick="{ _onbtclick }"  > 
-        <afx-label icon={icon} iconclass = {iconclass} text = {text} ></afx-label>
+        <afx-label color = {color} icon={icon} iconclass = {iconclass} text = {text} ></afx-label>
     </button>
     <script>
         this.enable = opts.enable
         this.icon = opts.icon
         this.iconclass = opts.iconclass
+        this.color = opts.color
         this.text = opts.text || ""
         var self = this
         this.onbtclick = opts.onbtclick

src/core/tags/afx-color-picker.js

@@ -56,6 +56,12 @@
         colorctx.fillRect(0, 0, colorctx.canvas.width, colorctx.canvas.height)
         //$(self.refs.palette).css("position", "absolute")
         // now add mouse move event
+        var getHex = function(c)
+        {
+            s = c.toString(16)
+            if(s.length == 1) s = "0" + s
+            return s
+        }
         var pick_color = function(e)
         {
             $(self.refs.palette).css("cursor","crosshair")
@@ -68,7 +74,7 @@
                 g:color.data[1],
                 b:color.data[2],
                 text:'rgb(' + color.data[0] + ', ' + color.data[1] + ', ' + color.data[2] + ')',
-                hex:'#' + color.data[0].toString(16) + color.data[1].toString(16) + color.data[2].toString(16)
+                hex:'#' + getHex(color.data[0]) + getHex(color.data[1]) + getHex(color.data[2])
             }
             return data
         }

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

@@ -1,7 +1,9 @@
 <afx-file-view>
     <afx-list-view  ref="listview"  observable = {root.observable}></afx-list-view>
     <afx-grid-view  ref = "gridview" header = {header}  observable = {root.observable}></afx-grid-view>
-    <afx-tree-view  ref = "treeview" observable = {root.observable}></afx-tree-view>
+    <div class = "treecontainer" ref="treecontainer">
+        <afx-tree-view  ref = "treeview" observable = {root.observable}></afx-tree-view>
+    </div>
     <div if = {status == true} class = "status" ref = "stbar"></div>
     <script>
         var self = this
@@ -12,8 +14,11 @@
         self.onfileselect
         this.status = opts.status == undefined?true:opts.status
         this.selectedFile = undefined
+        this.showhidden = opts.showhidden
+        this.fetch = opts.fetch
+        this.chdir = opts.chdir
         this.rid = $(self.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1
-        this.header = [{value:"File name"},{value: "Type", width:100}, {value: "Size", width:70}]
+        this.header = [{value:"File name"},{value: "Type", width:150}, {value: "Size", width:70}]
 
         self.root.set = function(k,v)
         {
@@ -36,35 +41,50 @@
         }
         var calibre_size = function()
         {
-            var h = $(self.root).height()
+            var h = $(self.root).outerHeight()
+            var w = $(self.root).width()
             if(self.refs.stbar)
-                h -= $(self.refs.stbar).height()
+                h -= ($(self.refs.stbar).height() + 10)
             $(self.refs.listview.root).css("height", h + "px")
             $(self.refs.gridview.root).css("height", h + "px")
-            $(self.refs.treeview.root).css("height", h + "px")
+            $(self.refs.treecontainer).css("height", h + "px")
+            $(self.refs.listview.root).css("width", w + "px")
+            $(self.refs.gridview.root).css("width", w + "px")
+            $(self.refs.treecontainer).css("width", w + "px")
         }
         var refreshList = function(){
+            var items = []
             $.each(self.data, function(i, v){
+                if(v.filename[0] == '.' && !self.showhidden) return
                 v.text = v.filename
                 if(v.text.length > 10)
                     v.text = v.text.substring(0,9) + "..."
                 v.iconclass = v.type
+                items.push(v)
             })
-            self.refs.listview.root.set("items", self.data)
+            self.refs.listview.root.set("items", items)
         }
         var refreshGrid = function(){
             var rows = []
             $.each(self.data, function(i,v){
+                if(v.filename[0] == '.' && !self.showhidden) return
                 var row = [{value:v.filename, iconclass: v.type},{value:v.mime},{value:v.size}]
                 rows.push(row)
             })
             self.refs.gridview.root.set("rows",rows)
         }
         var refreshTree = function(){
+            self.refs.treeview.root.set("selectedItem", null)
             var tdata = {}
             tdata.name = self.path
-            tdata.nodes = []
+            tdata.nodes = getTreeData(self.data)
-            $.each(self.data, function(i,v){
+            self.refs.treeview.root.set("*", tdata)
+        }
+        var getTreeData = function(data)
+        {
+            nodes = []
+            $.each(data, function(i,v){
+                if(v.filename[0] == '.' && !self.showhidden) return
                 v.name = v.filename
                 if(v.type == 'dir')
                 {
@@ -72,9 +92,9 @@
                     v.open = false
                 }
                 v.iconclass = v.type
-                tdata.nodes.push(v)
+                nodes.push(v)
             })
-            self.refs.treeview.root.set("*", tdata)
+            return nodes
         }
         var refreshData = function(){
             self.data.sort(sortByType)
@@ -89,10 +109,16 @@
         {
             $(self.refs.listview.root).hide()
             $(self.refs.gridview.root).hide()
-            $(self.refs.treeview.root).hide()
+            $(self.refs.treecontainer).hide()
             self.selectedFile = undefined
             self.refs.listview.root.set("selected", -1)
             self.refs.treeview.selectedItem = undefined
+            self.refs.treeview.root.set("fetch",function(e,f){
+                if(!self.fetch) return
+                self.fetch(e, function(d){
+                    f(getTreeData(d))
+                })
+            })
             $(self.refs.stbar).html("")
             switch (self.view) {
                 case 'icon':
@@ -102,7 +128,7 @@
                     $(self.refs.gridview.root).show()
                     break;
                 case 'tree':
-                    $(self.refs.treeview.root).show()
+                    $(self.refs.treecontainer).show()
                     break;
                 default:
                     break;
@@ -120,22 +146,43 @@
                 data.id = self.rid
                 self.root.observable.trigger("fileselect",data)
             }
+            self.refs.listview.onlistdbclick = function(data)
+            {
+                data.id = self.rid
+                self.root.observable.trigger("filedbclick",data)
+            }
             self.refs.gridview.root.observable = self.root.observable
             self.refs.gridview.ongridselect = function(d)
             {
                 var data = {id:self.rid, data:self.data[d.data.i], idx:d.data.i}
                 self.root.observable.trigger("fileselect",data)
             }
+            self.refs.gridview.ongriddbclick = function(d)
+            {
+                var data = {id:self.rid, data:self.data[d.data.i], idx:d.data.i}
+                self.root.observable.trigger("filedbclick",data)
+            }
             self.refs.treeview.ontreeselect = function(d)
             {
+                if(!d.data) return;
                 var data = {id:self.rid, data:d.data.child, idx:d.data.i}
                 self.root.observable.trigger("fileselect",data)
             }
+            self.refs.treeview.ontreedbclick = function(d)
+            {
+                if(!d.data) return;
+                var data = {id:self.rid, data:d.data.child, idx:d.data.i}
+                self.root.observable.trigger("filedbclick",data)
+            }
             self.root.observable.on("fileselect", function(e){
                 if(e.id != self.rid) return
                 self.selectedFile = e.data
                 $(self.refs.stbar).html("Selected: " + e.data.filename + " (" + e.data.size + " bytes)")
             })
+            self.root.observable.on("filedbclick", function(e){
+                if(e.id != self.rid || e.data.type == 'file' || !self.chdir) return
+                self.chdir(e.data.path)
+            })
             calibre_size()
             self.root.observable.on("resize", function(e){
                 calibre_size()

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

@@ -1,8 +1,8 @@
 <afx-grid-view>
     <afx-grid-row ref="gridhead" rootid = {rid} observable = {root.observable}  header="true" class = {grid_row_header:header} if = {header} cols = {header}> </afx-grid-row>
     <div ref = "scroller" style="width:100%; overflow:auto;">
-        <div ref = "container">
+        <div ref = "container" style ="padding-bottom:10px">
-            <afx-grid-row each={ child, i in rows } class = {selected: child.selected}  rootid = {parent.rid} observable = {parent.root.observable} index = {i}  cols = {child}  onclick = {parent._select} head = {parent.refs.gridhead} ></afx-grid-row>
+            <afx-grid-row each={ child, i in rows } class = {selected: child.selected}  rootid = {parent.rid} observable = {parent.root.observable} index = {i}  cols = {child} ondblclick = {parent._dbclick} onclick = {parent._select} oncontextmenu = {parent._select} head = {parent.refs.gridhead} ></afx-grid-row>
         </div>
     </div>
     <script>
@@ -13,6 +13,7 @@
         self.selidx = -1
         self.nrow = 0
         self.ongridselect = opts.ongridselect
+        self.ongriddbclick = opts.ongriddbclick
         self.root.observable = opts.observable 
         self.root.set = function(k,v)
         {
@@ -82,13 +83,22 @@
             self.update()
             //event.preventDefault()
         }
+        _dbclick(event)
+        {
+            data =  {
+                    id:self.rid, 
+                    data:event.item}
+            if(self.ongriddbclick)
+                self.ongriddbclick(data)
+            self.root.observable.trigger('griddbclick', data)
+        }
         
     </script>
 </afx-grid-view>
 
 <afx-grid-row>
     <div style = {!header? "display: table-cell;" :""} onclick = {parent._cell_select}  each = { child,i in cols } class = {string:typeof child.value == "string", number: typeof child.value == "number", cellselected: parent._auto_cell_select(child,i)} >
-        <afx-label icon = {child.icon} iconclass = {child.iconclass} text = {child.value} ></afx-label>
+        <afx-label color={child.color} icon = {child.icon} iconclass = {child.iconclass} text = {child.value} ></afx-label>
     </div>
     <script>
         this.cols = opts.cols || []

src/core/tags/afx-hbox.js

@@ -1,4 +1,4 @@
-<afx-hbox>
+<afx-hbox style = "display:block;">
     <div ref = "container" class="afx-hbox-container">
          <yield/>
     </div>
@@ -26,8 +26,8 @@
         {
             var auto_height = []
             var csize, ocheight = 0, avaiheight;
-            avaiheight = $(self.root).parent().height()
+            avaiheight = $(self.root).height()
-            avaiwidth = $(self.root).parent().width()
+            avaiwidth = $(self.root).width()
             $(self.refs.container).css("height",avaiheight + "px")
             $(self.refs.container)
                 .children()

src/core/tags/afx-label.js

@@ -1,5 +1,5 @@
 <afx-label>
-    <span>
+    <span style = {color?"color:" + color:""} >
         <i if={iconclass} class = {iconclass} ></i>
         <i if={icon} class="icon-style" style = { "background: url("+icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i>
         { text }
@@ -8,11 +8,13 @@
         this.iconclass = opts.iconclass
         this.icon = opts.icon
         this.text = opts.text
+        this.color = opts.color
         var self = this
         this.on("update",function(){
             self.iconclass = opts.iconclass
             self.icon = opts.icon
             self.text = opts.text
+            self.color = opts.color
         })
         self.root.set = function(k,v)
         {

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

@@ -3,8 +3,8 @@
     <div if = {opts.dropdown == "true"} ref = "current" style = {opts.width?"min-width:" + opts.width + "px;":"min-width:150px;"}  onclick = {show_list}>
     </div>
     <ul  ref = "mlist">
-        <li each={item,i in items } class={selected: parent._autoselect(item,i)}  onclick = {parent._select}>
+        <li each={item,i in items } class={selected: parent._autoselect(item,i)} ondblclick = {parent._dbclick}  onclick = {parent._select} oncontextmenu = {parent._select}>
-            <afx-label iconclass = {item.iconclass} icon = {item.icon} text = {item.text}></afx-label>
+            <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>
         </li>
     </ul>
@@ -14,6 +14,7 @@
         var self = this
         self.selidx = -1
         self.onlistselect = opts.onlistselect
+        self.onlistdbclick = opts.onlistdbclick
         var onclose = false
         this.rid = $(self.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1
         self.root.set = function(k,v)
@@ -138,5 +139,15 @@
                 self.items[self.selidx].selected =false
             event.item.item.selected = true
         }
+        _dbclick(event)
+        {
+            data =  {
+                    id:self.rid, 
+                    data:event.item.item,
+                    idx: event.item.i}
+            if(self.onlistdbclick)
+                self.onlistdbclick(data)
+            self.root.observable.trigger('listdbclick', data)
+        }
     </script>
 </afx-list-view>

src/core/tags/afx-menu.js

@@ -4,7 +4,7 @@
         <li ref = "container" each={ data,i in items } class = {afx_submenu:data.child != null, fix_padding:data.icon} no-reorder>
             <a href="#" onclick = {parent.onselect}>
                 <afx-switch if = {data.switch || data.radio} class = {checked:parent.checkItem(data)} enable = false swon = {data.checked} ></afx-switch>
-                <afx-label iconclass = {data.iconclass} icon = {data.icon} text = {data.text} ></afx-label>
+                <afx-label color = {data.color} iconclass = {data.iconclass} icon = {data.icon} text = {data.text} ></afx-label>
             </a>
             
             <afx-menu  if={data.child != null} child={data.child} onmenuselect = {data.onmenuselect}  observable = {parent.root.observable} rootid = {parent.rid}></afx-menu>
@@ -22,7 +22,7 @@
         }
         else
         {
-            this.rid = $(this.root).attr("data-id")
+            this.rid = $(this.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1
             isRoot = true
         }
         var self = this
@@ -94,7 +94,6 @@
         {
             this.root.observable = riot.observable()
             this.root.observable.on('menuselect',function(data){
-                //console.log("From root",self.root)
                 if(self.onmenuselect)
                     self.onmenuselect(data)
 

src/core/tags/afx-sys-panel.js

@@ -21,12 +21,17 @@
                         onmenuselect: function(d)
                         {
                             if(d.e.item.data.type == "app")
-                                window.OS.GUI.launch(d.e.item.data.text)
+                                window.OS.GUI.launch(d.e.item.data.text, null)
                         }
                     },
-                    {text:"Logout"}
+                    {text:"Logout", dataid: "sys-logout"}
                     ]}
-                ]
+                ],
+                onmenuselect: function(d)
+                {
+                    if(d.e.item.data.dataid == "sys-logout")
+                        window.OS.API.handler.logout()
+                }
             }
         this.appmenu = { child: [] }
         this.systray = { 

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

@@ -1,17 +1,22 @@
 <afx-tree-view>
 
-  <div ref = namediv class={afx_tree_item_selected:treeroot.selectedItem && treeroot.selectedItem.path == path, afx_folder_item: isFolder(), afx_tree_item_odd: index%2 != 0  } click={select}>
+  <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}>
-    <i if={ !isFolder() && iconclass} class = {iconclass} ></i>
+    <ul style = "padding:0;margin:0;white-space: nowrap;">
-    <i if={!isFolder() && icon} class="icon-style" style = { "background: url("+icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i>
+        <li ref = "padding" ></li>
+        <li class = "itemname" style="display:inline-block;" >
+            <i if={ !isFolder() && iconclass} class = {iconclass} ></i>
+            <i if={!isFolder() && icon} class="icon-style" style = { "background: url("+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>
+            <span onclick={ toggle } if={ isFolder() } class={open ? 'afx-tree-view-folder-open' : 'afx-tree-view-folder-close'}></span>
-    { name }
+            { name }
+        </li>
+    </ul>
   </div>
 
 
   <ul if={ isFolder() } show={ isFolder() && open }>
     <li each={ child, i in nodes }>
-      <afx-tree-view ontreeselect = {parent.ontreeselect} 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} 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>
     </li>
   </ul>
 
@@ -28,6 +33,8 @@
         }
         this.rid = $(self.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1
         self.ontreeselect = opts.ontreeselect
+        self.ontreedbclick = opts.ontreedbclick
+        self.fetch = opts.fetch
         self.indent = opts.indent || 1
         var istoggle = false
         if(opts.treeroot)
@@ -66,7 +73,13 @@
         }
         
         this.on("mount", function(){
-            $(self.refs.namediv).css("padding-left", self.indent*15 + "px" )
+            $(self.refs.padding)
+                .css("display", "inline-block")
+                .css("height","1px")
+                .css("padding",0)
+                .css("margin", 0)
+                .css("background-color","transparent")
+                .css("width", self.indent*15 + "px" )
         })
 
         isFolder() {
@@ -77,6 +90,11 @@
             self.open = !self.open
             e.preventDefault()
             istoggle = true
+            if(self.open && self.nodes.length == 0 && self.fetch)
+                self.fetch(e.item, function(d){
+                    self.nodes = d
+                    self.update()
+                })
         }
 
         select(event)
@@ -99,5 +117,22 @@
            self.treeroot.update()
            event.preventDefault()
         }
+        _dbclick(event)
+        {
+            if(istoggle)
+            {
+                istoggle = false 
+                return
+            }
+            data =  {
+                    id:self.rid, 
+                    data:event.item,
+                    path: self.path}
+            if(self.ontreedbclick)
+            {
+                self.ontreedbclick(data)
+            }
+            self.root.observable.trigger('treedbclick', data)
+        }
     </script>
 </afx-tree-view>

src/core/tags/afx-vbox.js

@@ -1,4 +1,4 @@
-<afx-vbox>
+<afx-vbox style = "display:block;">
     <div ref = "container" class="afx-vbox-container">
          <yield/>
     </div>
@@ -23,8 +23,8 @@
         {
             var auto_width = []
             var csize, ocwidth = 0, avaiheight;
-            avaiheight = $(self.root).parent().height()
+            avaiheight = $(self.root).height()
-            avaiWidth = $(self.root).parent().width()
+            avaiWidth = $(self.root).width()
             $(self.refs.container).css("height",avaiheight + "px")
             $(self.refs.container)
                 .children()

src/packages/ActivityMonitor/main.coffee

@@ -1,8 +1,8 @@
 _PM = this.OS.PM
 _APP = this.OS.APP
 class ActivityMonitor extends this.OS.GUI.BaseApplication
-    constructor: () ->
+    constructor: (args) ->
-        super "ActivityMonitor"
+        super "ActivityMonitor", args
     main: () ->
         me = @
         @scheme.set "apptitle", "Activity Monitor"

src/packages/DummyApp/main.coffee

@@ -1,7 +1,7 @@
 _GUI = this.OS.GUI
 class DummyApp extends this.OS.GUI.BaseApplication
-    constructor: () ->
+    constructor: (args) ->
-        super "DummyApp"
+        super "DummyApp", args
     main: () ->
         self = @
         @on "btclick", (e)->
@@ -83,7 +83,14 @@ class DummyApp extends this.OS.GUI.BaseApplication
         @scheme.set "apptitle", "AntOS feature showcase"
 
         @scheme.contextmenuHandler = (e, m) ->
-            mdata = [ { text: " Child 1" }, { text: "child2", child: [{text: "sub child", child:[{text:"sub sub child"}] }]}]
+            mdata = [ 
+                { text: " Child 1" }, 
+                { text: "child2", child: [
+                    {text: "sub child", child:[{text:"sub sub child"}] },
+                    {text: "sub child 1" }
+                    ], onmenuselect: (e) -> console.log e
+                }
+            ]
             m.set "items", mdata
             m.show(e)
 

src/packages/Files/main.coffee

@@ -1,62 +1,146 @@
 class Files extends this.OS.GUI.BaseApplication
-    constructor: () ->
+    constructor: (args) ->
-        super "Files"
+        super "Files", args
     main: () ->
         me = @
         @scheme.set "apptitle", "Files manager"
         @view = @find "fileview"
-        @scheme.contextmenuHandler = (e, m) ->
+        @navinput = @find "navinput"
-            mdata = [ { text: " Child 1" }, { text: "child2", child: [{text: "sub child", child:[{text:"sub sub child"}] }]}]
+        @navbar = @find "nav-bar"
-            m.set "items", mdata
+        @prepaths = []
+        @favo = @find "favouri"
+        @loadSetting()
+
+        @view.contextmenuHandler = (e, m) ->
+            m.set "items", [ me.mnFile(), me.mnEdit() ]
             m.show(e)
-        @on "fileselect", (d) -> console.log d
+        #@on "fileselect", (d) -> console.log d
-        #load home directory
+        @on "filedbclick", (e) ->
-        p = 'home:///'
+            #if e.data.type is 'dir' then me.chdir e.data.path, true
-        @_api.VFS.scandir p,
+        @favo.set "onlistselect", (e) -> me.chdir e.data.path, true
+        
+        ($ @find "btback").click () ->
+            return if me.prepaths.length is 0
+            p = me.prepaths.pop()
+            me.favo.set "selected", -1
+            me.chdir p, false
+
+        ($ @navinput).keyup (e) ->
+            me.chdir ($ me.navinput).val() if e.keyCode is 13 #enter
+        
+        @view.set "chdir", (p) -> me.chdir p, true
+        @view.set "fetch", (e, f) ->
+            return unless e.child
+            me._api.handler.scandir e.child.path,
+                (d) -> f d.result
+                , (e, s) -> me.error "Cannot fetch child dir #{e.child.path}"
+
+        @favo.set "items", @setting.favorite
+
+    loadSetting: () ->
+        # view setting
+        @view.set "view", @setting.view if @setting.view
+        @view.set "showhidden", @setting.showhidden if @setting.showhidden
+        @setting.favorite = [
+            { text: "Applications", path: 'apps:///', iconclass:"fa  fa-adn"},
+            { text: "Home", path: 'home:///', iconclass:"fa fa-home", selected:true},
+            { text: "OS", path: 'os:///', iconclass:"fa fa-inbox" },
+            { text: "Desktop", path: 'home:///.desktop', iconclass: "fa fa-desktop" },
+        ] if not @setting.favorite
+        @setting.sidebar = true if @setting.sidebar is undefined
+        @toggleSidebar @setting.sidebar
+        @setting.nav = true if @setting.nav is undefined
+        @toggleNav @setting.nav
+
+    chdir: (p, push) ->
+        me = @
+        me._api.handler.scandir p,
             (d) ->
+                if(d.error)
+                    return me.error "Resource not found #{p}"
+                v = ($ me.navinput).val()
+                me.prepaths.push v if push and v isnt ""
+                ($ me.navinput).val p
                 me.view.set "path", p
                 me.view.set "data", d.result
             , (e, s) ->
-                alert "cannot open dir"
+                me.error "Cannot chdir #{p}"
 
+    mnFile:() ->
+        {
+            text: "File",
+            child: [
+                { text: "New file", dataid: "#{@name}-mkf" },
+                { text: "New folder", dataid: "#{@name}-mkdir" },
+                { text: "Upload", dataid: "#{@name}-upload" }
+            ]
+        }
+    mnEdit: () ->
+        me = @
+        {
+            text: "Edit",
+            child: [
+                { text: "Rename", dataid: "#{@name}-mv" },
+                { text: "Delete", dataid: "#{@name}-rm" },
+                { text: "Information", dataid: "#{@name}-info" },
+                { text: "Open with", dataid: "#{@name}-open" },
+                { text: "Download", dataid: "#{@name}-download" },
+            ], onmenuselect: (e) -> me.actionEdit e
+        }
     menu: () ->
         me = @
         menu = [
-            {
+            @mnFile(),
-                text: "File",
+            @mnEdit(),
-                child: [
-                    { text: "New file", dataid: "#{@name}-mkf" },
-                    { text: "New folder", dataid: "#{@name}-mkdir" },
-                    { text: "Upload", dataid: "#{@name}-upload" }
-                ]
-            },
-            {
-                text: "Edit",
-                child: [
-                    { text: "Rename", dataid: "#{@name}-mv" },
-                    { text: "Delete", dataid: "#{@name}-rm" },
-                    { text: "Information", dataid: "#{@name}-info" },
-                    { text: "Open with", dataid: "#{@name}-open" },
-                    { text: "Download", dataid: "#{@name}-download" },
-                ]
-            },
             {
                 text: "View",
                 child: [
                     { text: "Refresh", dataid: "#{@name}-refresh" },
-                    { text: "Sidebar", switch: true, dataid: "#{@name}-side" },
+                    { text: "Sidebar", switch: true, checked: @setting.sidebar, dataid: "#{@name}-side" },
-                    { text: "Navigation bar", switch: true , dataid: "#{@name}-nav" },
+                    { text: "Navigation bar", switch: true, checked: @setting.nav, dataid: "#{@name}-nav" },
-                    { text: "Hidden files", switch: true, dataid: "#{@name}-hidden" },
+                    { text: "Hidden files", switch: true, checked: @setting.showhidden, dataid: "#{@name}-hidden" },
                     { text: "Type", child: [
-                        { text: "Icon view", radio: true, dataid: "#{@name}-icon", type: 'icon' },
+                        { text: "Icon view", radio: true, checked: @setting.view is 'icon', dataid: "#{@name}-icon", type: 'icon' },
-                        { text: "List view", radio:true, checked: true, dataid: "#{@name}-list", type: 'list' },
+                        { text: "List view", radio:true, checked: @setting.view is 'list' or not @setting.view, dataid: "#{@name}-list", type: 'list' },
-                        { text: "Tree view", radio:true, dataid: "#{@name}-tree", type: 'tree' }
+                        { text: "Tree view", radio:true, checked: @setting.view is 'tree', dataid: "#{@name}-tree", type: 'tree' }
                      ], onmenuselect: (e) ->
                         me.view.set 'view', e.item.data.type
+                        me.setting.view = e.item.data.type
                     },
-                ]
+                ], onmenuselect: (e) -> me.actionView e
             },
         ]
         menu
 
-this.OS.register "Files",Files
+    toggleSidebar: (b) ->
+        if b then ($ @favo).show() else ($ @favo).hide()
+        @trigger "resize"
+    
+    toggleNav: (b) ->
+        if b then ($ @navbar).show() else ($ @navbar).hide()
+        @trigger "resize"
+
+    actionView: (e) ->
+        switch e.item.data.dataid
+            when "#{@name}-hidden"
+                @.view.set "showhidden", e.item.data.checked
+                @.setting.showhidden = e.item.data.checked
+            when "#{@name}-refresh"
+                @.chdir ($ @.navinput).val(), false
+            when "#{@name}-side"
+                @setting.sidebar = e.item.data.checked
+                @toggleSidebar e.item.data.checked
+            when "#{@name}-nav"
+                @setting.nav = e.item.data.checked
+                @toggleNav e.item.data.checked
+
+    actionEdit: (e) ->
+        switch e.item.data.dataid
+            when "#{@.name}-info"
+                file = @view.get "selectedFile"
+                return unless file
+                @openDialog "InfoDialog", null, file
+            else
+                @_api.handler.setting()
+
+this.OS.register "Files", Files

src/packages/Files/main.css

@@ -0,0 +1,36 @@
+afx-app-window[data-id ='files-app-window'] afx-list-view{
+    border-top:1px solid #A6A6A6;
+}
+afx-app-window[data-id ='files-app-window'] afx-list-view[data-id='favouri']{
+    background-color: #f6F6F6;
+    border-right: 1px solid #cbcbcb;
+    border-top:1px solid #A6A6A6;
+    padding:0;
+}
+
+afx-app-window[data-id ='files-app-window'] afx-list-view[data-id='favouri'] li{
+    background-color: transparent;
+}
+afx-app-window[data-id ='files-app-window'] afx-list-view[data-id='favouri']   li.selected {
+    background-color: #cecece;
+    color:#414339;
+}
+afx-app-window[data-id ='files-app-window'] .afx-window-top{
+    border-bottom: 0;
+}
+afx-app-window[data-id ='files-app-window'] afx-vbox[data-id = "nav-bar"]{
+    background-color: #dfdfdf;
+}
+afx-app-window[data-id ='files-app-window'] afx-grid-view afx-grid-row.grid_row_header div{
+    border-top:1px solid #A6A6A6;
+}
+afx-app-window[data-id ='files-app-window'] button{
+    height: 23px;
+    border-radius: 3px;
+    padding-top:2px;
+    margin-left: 5px;
+}
+
+afx-app-window[data-id ='files-app-window'] input{
+    border-radius: 3px;
+}

src/packages/Files/scheme.html

@@ -1,5 +1,14 @@
-<afx-app-window apptitle="Files" width="600" height="400">
+<afx-app-window data-id = "files-app-window" apptitle="Files" width="600" height="400">
-    <afx-vbox>
+        <afx-hbox>
-        <afx-file-view data-id = "fileview"></afx-file-view>
+            <afx-vbox data-height = "30" data-id = "nav-bar"> 
-    </afx-vbox>
+                <afx-button data-width = "30" data-id = "btback" iconclass = "fa fa-arrow-left"></afx-button>
-</afx-app-window>
+                <input type = "text" data-id = "navinput"></input>
+                <div data-width = "5"></div>
+            </afx-vbox>
+            <afx-vbox>
+                <afx-list-view data-id = "favouri" data-width = "150">
+                </afx-list-view>
+                <afx-file-view data-id = "fileview"></afx-file-view>
+            </afx-vbox>
+        </afx-hbox>
+    </afx-app-window>

src/packages/NotePad/main.coffee

@@ -1,10 +1,12 @@
 class NotePad extends this.OS.GUI.BaseApplication
-    constructor: () ->
+    constructor: (args) ->
-        super "NotePad"
+        super "NotePad", args
     main: () ->
         me = @
         @scheme.set "apptitle", "NotePad"
-        
+        @sidebar = @find "sidebar"
+        @location = @find "location"
+        @fileview = @find "fileview"
         div = @find "datarea"
         ace.require "ace/ext/language_tools"
         @.editor = ace.edit div
@@ -52,7 +54,32 @@ class NotePad extends this.OS.GUI.BaseApplication
 
         @on "resize", () -> me.editor.resize()
         @on "focus", () -> me.editor.focus()
+
+        @fileview.set "chdir", (d) -> me.chdir d
+        @fileview.set "fetch", (e, f) ->
+            return unless e.child
+            me._api.handler.scandir e.child.path,
+                (d) -> f d.result
+                , (e, s) -> me.error "Cannot fetch child dir #{e.child.path}"
         
+        @location.set "onlistselect", (e) -> me.chdir e.data.path
+        @location.set "items", [
+            { text: "Home", path: 'home:///', iconclass:"fa fa-home", selected:true},
+            { text: "OS", path: 'os:///', iconclass:"fa fa-inbox" },
+            { text: "Desktop", path: 'home:///.desktop', iconclass: "fa fa-desktop" },
+        ]
+
+    chdir: (p) ->
+        me = @
+        me._api.handler.scandir p,
+            (d) ->
+                if(d.error)
+                    return me.error "Resource not found #{p}"
+                me.fileview.set "path", p
+                me.fileview.set "data", d.result
+            , (e, s) ->
+                me.error "Cannot chdir #{p}"
+
     menu: ()->
         menu = [{
                 text:"File", 

src/packages/NotePad/main.css

@@ -13,4 +13,7 @@ afx-app-window[data-id="notepad"] span[data-id="editorstat"]{
 }
 afx-app-window[data-id="notepad"] afx-vbox[data-id="bottom-vbox"]{
     background-color: #dfdfdf;
+}
+afx-app-window[data-id="notepad"] .afx-window-content {
+    background-color: #f6F6F6;
 }

src/packages/NotePad/scheme.html

@@ -1,25 +1,17 @@
 <afx-app-window apptitle="" width="600" height="400" data-id="notepad">
-    <afx-hbox>
+    <afx-vbox>
-        
+        <afx-hbox data-width = "175" data-id = "sidebar">
-        <!--afx-list-view data-id = "flist" data-width = "150" > </afx-list-view>
+            <afx-list-view data-id = "location" dropdown = "true" data-height= "30" width = "150"></afx-list-view>
+            <afx-file-view data-id = "fileview" view='tree' status = false></afx-file-view>
+        </afx-hbox>
         <afx-hbox>
-            <afx-button data-height="50" text="Read more" iconclass="fa fa-camera-retro fa-lg" id="button">
+            <div data-id="datarea"></div>
-            </afx-button>
+            <afx-vbox data-height="30" data-id="bottom-vbox">
-            <div>
+                <div ><span data-id = "editorstat"></span></div>
-                big text here
+                <afx-list-view data-width="160" data-id = "themelist" dropdown = "true" width="135"></afx-list-view>
-            </div>
+                <afx-list-view data-width="125" data-id = "modelist" dropdown = "true" width="100"></afx-list-view>
-            <div data-height="100" style=" vertical-align: top; width:100%;height:100%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+                
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            </afx-vbox>
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+        </afx-hbox>
-                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+    </afx-vbox>
-            
-        </afx-hbox-->
-        <div data-id="datarea"></div>
-        <afx-vbox data-height="30" data-id="bottom-vbox">
-            <div ><span data-id = "editorstat"></span></div>
-            <afx-list-view data-width="170" data-id = "themelist" dropdown = "true" width="150"></afx-list-view>
-             <afx-list-view data-width="170" data-id = "modelist" dropdown = "true" width="150"></afx-list-view>
-             
-        </afx-vbox>
-    </afx-hbox>
 </afx-app-window>

src/packages/wTerm/main.coffee

@@ -1,6 +1,6 @@
 class wTerm extends this.OS.GUI.BaseApplication
-    constructor: () ->
+    constructor: (args) ->
-        super "wTerm"
+        super "wTerm", args
     
     main: () ->
         me = @

src/services/Calendar.coffee

@@ -1,6 +1,6 @@
 class Calendar extends this.OS.GUI.BaseService
-    constructor: () ->
+    constructor: (args) ->
-        super "Calendar"
+        super "Calendar", args
         #@iconclass = "fa fa-commenting"
         @text = ""
         @iconclass = "fa fa-calendar"

src/services/PushNotification.coffee

@@ -1,6 +1,6 @@
 class PushNotification extends this.OS.GUI.BaseService
-    constructor: () ->
+    constructor: (args) ->
-        super "PushNotification"
+        super "PushNotification", args
         @iconclass = "fa fa-bars"
         @onmenuselect = (e) -> console.log e
         @cb = undefined
@@ -13,9 +13,11 @@ class PushNotification extends this.OS.GUI.BaseService
     spin: (b) ->
         if b and @iconclass is "fa fa-bars"
             @iconclass = "fa fa-spinner fa-spin"
+            @color = "#f90e00"
             @update()
         else if not b and @iconclass is "fa fa-spinner fa-spin"
             @iconclass = "fa fa-bars"
+            @color = "#414339"
             @update()
 
     main: ->

src/services/Spotlight.coffee

@@ -1,6 +1,6 @@
 class Spotlight extends this.OS.GUI.BaseService
-    constructor: () ->
+    constructor: (args) ->
-        super "Spotlight"
+        super "Spotlight", args
         @iconclass = "fa fa-search"
     init: ->
         @child = [

src/themes/antos/afx-button.css

@@ -2,7 +2,7 @@ afx-button button{
     outline: none;
     padding: 4px;
     border: 1px solid #a6a6a6;
-    background-color: white;
+    background-color: #f6F6F6;
     color: #414339;
     border-radius: 6px;
     font-family: "Ubuntu";

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

@@ -3,13 +3,13 @@ afx-file-view {
 }
 afx-file-view div.status{
     position: absolute;
-    bottom: 0px;
+    bottom: 1px;
     left:0px;
     padding:3px;
     right: 0px;
     height: 15px;
-    background-color: #dfdfdf;
+    background-color: #f6F6F6;
-    border-top: 1px solid #a6A6a6;
+    border-top: 1px solid #cbcbcb;
 }
 afx-file-view afx-list-view li{
     float:left;
@@ -29,7 +29,7 @@ afx-file-view afx-list-view i.dir:before{
     content: "\f07b"; 
     font-family: "FontAwesome";
     font-size: 32px;
-    color: #414339;
+    color: #76D2F9;
     font-weight: normal;
     font-style: normal;
 }
@@ -55,7 +55,9 @@ afx-file-view afx-list-view  li.selected, afx-file-view afx-list-view  li.select
     color:white;
     border-radius: 6px;
 }
-
+afx-file-view afx-grid-view{
+    padding:0;
+}
 afx-file-view afx-grid-view i.file:before{
     content: "\f016"; 
     font-family: "FontAwesome";
@@ -68,7 +70,7 @@ afx-file-view afx-grid-view i.dir:before{
     content: "\f07b"; 
     font-family: "FontAwesome";
     font-size: 16px;
-    color: #414339;
+    color: #76D2F9;
     font-style: normal;
     font-weight: normal;
 }
@@ -83,21 +85,30 @@ afx-file-view afx-grid-view afx-grid-row.grid_row_header{
     background-color: #dfdfdf;
 }
 afx-file-view afx-grid-view afx-grid-row.grid_row_header div{
-    border: 1px solid #a6a6a6;
+    border-top: 1px solid #a6a6a6;
+    border-right: 1px solid #a6a6a6;
 }
 
 afx-file-view afx-tree-view .afx-tree-view-folder-close:before{
     content: "\f07b"; 
     font-family: "FontAwesome";
     font-size: 16px;
+    color:#76D2F9;
 }
 afx-file-view afx-tree-view .afx-tree-view-folder-open:before{
     content: "\f07c"; 
     font-family: "FontAwesome";
+    color:#76D2F9;
     font-size: 16px;   
 }
-afx-file-view afx-tree-view {
+afx-file-view afx-tree-view{
     margin:0;
+    overflow: hidden;
+    display: inline-block;
+    background-color: transparent;
+}
+afx-file-view afx-tree-view .afx_tree_item_odd{
+    background-color: transparent;
 }
 afx-file-view afx-tree-view i.file:before{
     content: "\f016"; 
@@ -107,8 +118,41 @@ afx-file-view afx-tree-view i.file:before{
     font-style: normal;
     font-weight: normal;
 }
+afx-file-view afx-tree-view div{
+    overflow: hidden;
+    white-space: nowrap;
+    background-color: transparent;
+    padding:0;
+}
+afx-file-view  div.treecontainer{
+    display: block;
+    overflow: auto;
+    padding:0;
+    margin:0;
+}
+afx-file-view afx-tree-view div.afx_tree_item_selected, afx-file-view afx-tree-view div.afx_tree_item_selected:hover{
+    background-color: transparent;
+    color:#414339;
+}
 
-afx-file-view afx-tree-view div.afx_tree_item_selected i.file:before{
+afx-file-view afx-tree-view li.itemname{
+    padding:3px;
+    padding-right: 5px;
+}
+afx-file-view afx-tree-view div.afx_tree_item_selected .itemname{
     background-color: #116cd6;
     color:white;
-}
+    border-radius: 3px;
+    
+}
+afx-file-view afx-tree-view div.afx_tree_item_selected i.file:before{
+    color:white;
+}
+
+afx-file-view afx-tree-view .afx_folder_item{
+    font-weight: normal;
+}
+
+afx-file-view afx-tree-view afx-tree-view{
+    display: inline-block;
+}

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

@@ -7,6 +7,7 @@ afx-tree-view{
 afx-tree-view afx-tree-view{
     padding:0;
     overflow: hidden;
+    display: block;
 }
 afx-tree-view ul{
     margin:0;

src/themes/antos/antos.css

@@ -5,8 +5,9 @@ html,body{
     font-size: 13px;
     width: 100%;
     height: 100%;
-    background-image: url(wallpaper.jpg);
+    background-image: url(wp.png);
-    background-size: cover;
+    /*background-size: cover;*/
+    background-repeat: repeat;
     overflow: hidden;
 }
 #wrapper{
@@ -46,7 +47,7 @@ input {
     padding: 2px;
     height:23px;
     border: 1px solid #a6a6a6;
-    background-color: white;
+    background-color: #f6F6F6;
     color: #414339;
     border-radius: 5px;
     box-sizing: border-box;