add tab bar

src/core/BaseModel.coffee

@@ -5,7 +5,7 @@ class BaseModel
         @_gui = self.OS.GUI
         me = @
         @on "exit", () -> me.quit()
-        @host = "#workingenv"
+        @host = "#desktop"
         @dialog = undefined
 
     render: (p) ->

src/core/gui.coffee

@@ -221,16 +221,18 @@ self.OS.GUI =
                     it = desktop[0].get "selected"
                     _GUI.openWith it
 
-                ($ "#workingenv").on "click", (e) ->
+                #($ "#workingenv").on "click", (e) ->
-                     desktop[0].set "selected", -1
+                #     desktop[0].set "selected", -1
 
                 desktop.on "click", (e) ->
+                    return unless e.target is desktop[0]
+                    desktop[0].set "selected", -1
                     ($ "#sysdock").get(0).set "selectedApp", null
-                    desktop[0].set "selected", -1 if e.target is desktop[0]
                     console.log "desktop clicked"
             
                 desktop[0].contextmenuHandler = (e, m) ->
                     desktop[0].set "selected", -1 if e.target is desktop[0]
+                    ($ "#sysdock").get(0).set "selectedApp", null
                     console.log "context menu handler for desktop"
                 
                 desktop[0].fetch()
@@ -264,8 +266,9 @@ self.OS.GUI =
         _OS.setting.appearance = conf.appearance if conf.appearance
         _OS.setting.user = conf.user
         _OS.setting.desktop.path = "home:///.desktop" unless _OS.setting.desktop.path
+        _OS.setting.appearance.theme = "antos" unless _OS.setting.appearance.theme
         # load theme
-        _GUI.loadTheme "antos"
+        _GUI.loadTheme _OS.setting.appearance.theme
         # initDM
         _GUI.initDM()
         _courrier.observable.one "syspanelloaded", () ->
@@ -276,5 +279,5 @@ self.OS.GUI =
 
         # startup application here
         _courrier.observable.one "desktoploaded", () ->
-            _GUI.launch "Files"
+            _GUI.launch "DummyApp"
-            _GUI.launch "NotePad"
+            #_GUI.launch "NotePad"

src/core/schemes/dm.html

@@ -4,6 +4,6 @@
 <div id = "workspace">
     <afx-apps-dock id="sysdock"></afx-apps-dock>
     <afx-float-list id = "desktop" ></afx-float-list>
-    <div id = "workingenv"></div>
+    <!--div id = "workingenv"></div-->
 </div>
 <afx-menu id="contextmenu" context="true" style="display:none;"></afx-menu>

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

@@ -27,6 +27,9 @@
         this.root.observable = opts.observable || riot.observable()
         if(!window._zindex) window._zindex = 10
         this.shown = false
+
+        self.root.contextmenuHandler = function (e) {}
+
         self.root.set = function(k,v)
         {
             if(k == "*")

src/core/tags/afx-apps-dock.js

@@ -17,7 +17,8 @@
                 { 
                     for(var i in self.items)
                         self.items[i].app.blur()
-                    //v.show()
+                    if(v)
+                        $("#desktop")[0].set("selected", -1)
                 }
             }
             self.update()

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

@@ -1,8 +1,9 @@
 <afx-float-list ref = "container">
-    <div each={item,i in items } class={float_list_item:true, float_list_item_selected: parent._autoselect(item,i)} ondblclick = {parent._dbclick}  onmousedown = {parent._select} oncontextmenu = {parent._select}>
+    <div ref = "list">
-        <afx-label color = {item.color} iconclass = {item.iconclass} icon = {item.icon} text = {item.text}></afx-label>
+        <div each={item,i in items } class={float_list_item:true, float_list_item_selected: parent._autoselect(item,i)} ondblclick = {parent._dbclick}  onmousedown = {parent._select} oncontextmenu = {parent._select}>
+            <afx-label color = {item.color} iconclass = {item.iconclass} icon = {item.icon} text = {item.text}></afx-label>
+        </div>
     </div>
-
     <script>
         this.items = opts.items || []
         var self = this
@@ -82,7 +83,7 @@
             var cleft = 20
             var gw = $(self.refs.container).width()
             var gh = $(self.refs.container).height()
-            $(self.refs.container)
+            $(self.refs.list)
             .children()
             .each(function(e)
             {

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

@@ -15,6 +15,7 @@
         self.selidx = -1
         self.onlistselect = opts.onlistselect
         self.onlistdbclick = opts.onlistdbclick
+        self.onitemclose = opts.onitemclose
         var onclose = false
         this.rid = $(self.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1
         self.root.set = function(k,v)
@@ -39,6 +40,8 @@
                     return self.items[self.selidx]
                 else
                     return undefined
+            else if(k == "count")
+                return self.items.length
             return self[k]
         }
         self.root.push = function(e,u)
@@ -73,6 +76,7 @@
         {
             this.root.observable = riot.observable()
         }
+        
         this.on("mount", function(){
             if(opts.dropdown == "true")
             {
@@ -108,7 +112,11 @@
         }
         _remove(event)
         {
-            self.root.remove(event.item.item, true)
+            r = true
+            if(self.onitemclose)
+                r = self.onitemclose(event)
+            if(r)
+                self.root.remove(event.item.item, true)
         }
         _autoselect(it,i)
         {

src/core/tags/afx-tab-container.js

@@ -0,0 +1,60 @@
+<afx-tab-container>
+    <afx-list-view   ref = "list" />
+    <script>
+        var self = this
+        this.closable = opts.closable || false
+        self.root.observable = opts.observable || riot.observable()
+        get_observable(){
+            return self.root.observable
+        }
+
+        self.root.get = function (k) {
+            return self.refs.list.root.get(k)
+        }
+
+
+        self.on("mount", function(){
+            self.refs.list.root.observable = self.root.observable
+            /*self.root.observable.on("listselect", function(){
+                console.log("list select")
+            })*/
+            self.refs.list.root.set ("onlistselect",function (e) {
+                self.root.observable.trigger("tabselect", e)
+            })
+        })
+
+        self.root.set = function (k,v){
+            if( k == "*")
+                for(var i in v)
+                    self.refs.list.root.set(i,v[i])
+            else if(k == "closable")
+            {
+                self.closable = v
+            }
+            else
+            {
+                if(k == "items")
+                {
+                    for(var i in v)
+                        v[i].closable = self.closable
+                }
+                self.refs.list.root.set(k,v)
+            }
+            //self.update()
+        }
+
+        self.root.push = function(e,u)
+        {
+            e.closable = self.closable
+            self.refs.list.root.push(e,u)
+        }
+        self.root.unshift = function(e,u)
+        {
+            self.refs.list.root.unshift(e,u)
+        }
+        self.root.remove = function(e,u)
+        {
+            self.refs.list.root.remove(e,u)
+        }
+    </script>
+</afx-tab-container>

src/core/vfs.coffee

@@ -15,7 +15,15 @@ String.prototype.asFileHandler = () ->
 this.OS.API.VFS = {}
 
 class BasicFileHandler
-    constructor: (@path) ->
+    constructor: (path) ->
+        @setPath path
+
+    setPath: (p) ->
+        @ready = false
+        @dirty = false
+        @cache = undefined
+        return unless p
+        @path = p
         list = @path.split ":///"
         @protocol = list[0]
         return unless list.length > 1
@@ -24,8 +32,6 @@ class BasicFileHandler
         @genealogy = re.split("/")
         @basename = @genealogy[@genealogy.length - 1] unless @isRoot()
         @ext = @basename.split( "." ).pop() unless @basename.lastIndexOf(".") is 0 or @basename.indexOf( "." ) is -1
-        @ready = false
-
 
     isRoot: () -> (not @genealogy) or (@genealogy.size is 0)
     
@@ -33,7 +39,9 @@ class BasicFileHandler
         return false if not @basename
         @basename[0] is "."
 
-    hash: () -> @path.hash()
+    hash: () -> 
+        return -1 unless @path
+        return @path.hash()
 
     parent: () ->
         return @ if @isRoot()

src/packages/DummyApp/main.coffee

@@ -76,10 +76,17 @@ class DummyApp extends this.OS.GUI.BaseApplication
             {text:"some thing"},
             {text:"some thing"}
         ]
-        list.set "items",ldata
+        #list.set "items",ldata
         list.set "onlistselect", (e)->
             console.log e
 
+        tabs = @find "mytabs"
+        tabdatas = [
+            {text:"file1.txt"},
+            {text:"file2.cpp"}
+        ]
+        tabs.set "items", tabdatas 
+
         @scheme.set "apptitle", "AntOS feature showcase"
 
         @scheme.contextmenuHandler = (e, m) ->

src/packages/DummyApp/scheme.html

@@ -1,5 +1,6 @@
 <afx-app-window apptitle="Preview" width="650" height="500">
     <afx-vbox>
+        <afx-tab-container data-id="mytabs" closable = true></afx-tab-container>
         <afx-tree-view data-id="mytree"> </afx-tree-view>
         <afx-hbox>
             <afx-button data-height="30" text="Read more" iconclass="fa fa-camera-retro fa-lg" id="button"></afx-button>

src/packages/Files/main.coffee

@@ -48,7 +48,10 @@ class Files extends this.OS.GUI.BaseApplication
         @setting.nav = true if @setting.nav is undefined
         @setting.showhidden = false if @setting.showhidden is undefined
         
-        @favo.set "items", $.extend true, {}, @setting.favorite
+        el.selected = false for el, i in @setting.favorite
+
+        @favo.set "items", @setting.favorite
+        #@favo.set "selected", -1
         @applySetting()
         @chdir null
 

src/packages/NotePad/main.coffee

@@ -70,14 +70,28 @@ class NotePad extends this.OS.GUI.BaseApplication
             { text: "Desktop", path: 'home:///.desktop', iconclass: "fa fa-desktop" },
         ]
 
-        @open @currfile if @currfile
+        @tabarea = @find "tabarea"
+        #@tabarea.set "closable", true
+        @open @currfile
     
     open: (file) ->
+        #find table
+        @newtab "undefined".asFileHandler() unless file
+        return @newtab "undefined".asFileHandler() unless file
         me = @
         file.read (d) ->
             return unless d
             me.scheme.set "apptitle", file.basename
-            me.editor.setValue d, -1
+            file.cache = d
+            me.newtab file
+
+    newtab: (file) ->
+        file.text = if file.basename then file.basename else "undefined"
+        file.cache = "" unless file.cache
+        cnt = @tabarea.get "count"
+        @tabarea.push file, true
+        @tabarea.set "selected", cnt
+        @editor.setValue file.cache, -1
 
     chdir: (p) ->
         me = @

src/packages/NotePad/main.css

@@ -16,4 +16,26 @@ afx-app-window[data-id="notepad"] afx-vbox[data-id="bottom-vbox"]{
 }
 afx-app-window[data-id="notepad"] .afx-window-content {
     background-color: #f6F6F6;
+}
+
+afx-tab-container[data-id="tabarea"] afx-list-view li {
+    background-color: #dfdfdf;
+    color:#272822;
+    border: 0;
+    border-top: 1px solid #a6a6a6;
+    border-right: 1px solid #a6a6a6;
+    border-radius: 0;
+}
+afx-tab-container[data-id="tabarea"] afx-list-view{
+    padding:0;
+    margin: 0;
+    border-left: 1px solid #a6a6a6;
+    border-bottom: 1px solid #a6a6a6;
+}
+/*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 {
+    background-color: #f6F6F6;
+    border-radius: 0;
 }

src/packages/NotePad/scheme.html

@@ -5,6 +5,7 @@
             <afx-file-view data-id = "fileview" view='tree' status = false></afx-file-view>
         </afx-hbox>
         <afx-hbox>
+            <afx-tab-container data-id="tabarea" data-height="26" closable = true></afx-tab-container>
             <div data-id="datarea"></div>
             <afx-vbox data-height="30" data-id="bottom-vbox">
                 <div ><span data-id = "editorstat"></span></div>

src/themes/antos/afx-tab-container.css

@@ -0,0 +1,17 @@
+afx-tab-container {
+    display: block;
+    width: 100%;
+    
+}
+afx-tab-container afx-list-view {
+    padding:0;
+    margin:0;
+}
+afx-tab-container afx-list-view li{
+    float:left;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    padding-bottom: 2px;
+    padding-top:2px;
+    border:1px solid #c3c3c3;
+}

src/themes/antos/antos.css

@@ -42,7 +42,7 @@ html,body{
     cursor: default;
     padding:0px;
 }
-#desktop > div.float_list_item {
+#desktop > div > .float_list_item {
     display:block;
     background-color:transparent;
     text-align: center;
@@ -51,7 +51,7 @@ html,body{
     padding:3px;
 }
 
-#desktop > div.float_list_item_selected {
+#desktop > div > div.float_list_item_selected {
     display:block;
     background-color: #116cd6;
     color:white;
@@ -62,7 +62,7 @@ html,body{
     padding:3px;
 }
 
-#desktop > div.float_list_item i.file:before{
+#desktop > div > div.float_list_item i.file:before{
     content: "\f15b\a"; 
     font-family: "FontAwesome";
     font-size: 32px;
@@ -71,11 +71,11 @@ html,body{
     font-style: normal;
     font-weight: normal;
 }
-#desktop > div.float_list_item span{
+#desktop > div >  div.float_list_item span{
     width: 100%;
     word-wrap: break-word;
 }
-#desktop > div.float_list_item i.dir:before{
+#desktop > div >  div.float_list_item i.dir:before{
     display: block;
     content: "\f07b\a"; 
     font-family: "FontAwesome";