add calendar view & stuff

Makefile

@@ -13,34 +13,8 @@ coffees= 	src/core/core.coffee\
 			src/core/BaseService.coffee\
 			src/core/BaseEvent.coffee\
         	src/antos.coffee
+ 
 
-tags=	src/core/tags/afx-button.js\
-        src/core/tags/afx-menu.js\
-        src/core/tags/afx-sys-panel.js\
-        src/core/tags/afx-apps-dock.js\
-        src/core/tags/afx-app-window.js\
-        src/core/tags/afx-vbox.js\
-        src/core/tags/afx-hbox.js\
-        src/core/tags/afx-list-view.js\
-		src/core/tags/afx-tree-view.js \
-		src/core/tags/afx-overlay.js\
-		src/core/tags/afx-dummy.js\
-		src/core/tags/afx-feed.js\
-		src/core/tags/afx-grid-view.js 
-
-antos_themes = 	src/themes/antos/font-awesome.css\
-        		src/themes/antos/ubuntu-regular.css\
-        		src/themes/antos/hermit-light.css\
-        		src/themes/antos/antos.css\
-        		src/themes/antos/afx-button.css\
-        		src/themes/antos/afx-menu.css\
-        		src/themes/antos/afx-sys-panel.css\
-        		src/themes/antos/afx-dock.css\
-				src/themes/antos/afx-list-view.css\
-				src/themes/antos/afx-tree-view.css\
-				src/themes/antos/afx-grid-view.css\
-				src/themes/antos/afx-feed.css\
-        		src/themes/antos/afx-app-window.css 
 
 
 
@@ -76,7 +50,7 @@ build_tags:
 	@echo "=======$(BLUE)Building tag files=======$(NC)"
 	-mkdir $(BUILDDIR)/resources 
 	-rm $(BUILDDIR)/resources/antos_tags.js
-	for f in $(tags); do (cat "$${f}"; echo) >> $(BUILDDIR)/resources/antos_tags.js; done
+	for f in src/core/tags/*; do (cat "$${f}"; echo) >> $(BUILDDIR)/resources/antos_tags.js; done
 
 build_themes: antos_themes_build
 
@@ -85,7 +59,7 @@ antos_themes_build:
 	@echo "=======$(BLUE)Building themes name: antos=======$(NC)"
 	-rm -rf $(BUILDDIR)/resources/themes/antos/*
 	-mkdir -p $(BUILDDIR)/resources/themes/antos
-	for f in $(antos_themes); do (cat "$${f}"; echo) >> $(BUILDDIR)/resources/themes/antos/antos.css; done
+	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/

src/core/BaseApplication.coffee

@@ -45,7 +45,7 @@ class BaseApplication extends this.OS.GUI.BaseModel
         if not evt.prevent
             @.appmenu.set "items", [] if @.pid == @.appmenu.pid
             ($ @scheme).remove()
-    
+    meta: () -> _APP[@name].meta
     baseMenu: ->
         mn =
             [{

src/core/BaseModel.coffee

@@ -6,7 +6,6 @@ _GUI  = self.OS.GUI
 class BaseModel
     constructor: (@name) ->
         @observable = riot.observable()
-        @pid = 0
         @_api = self.OS.API
         me = @
         @on "exit", () -> me.quit()
@@ -31,16 +30,20 @@ class BaseModel
     trigger: (e, d) -> @observable.trigger e, d
 
     subscribe: (e, f) -> _MAIL.on e, f, @
-    meta: () -> _APP[@name].meta
+
     publish: (t, m) ->
         mt = @meta()
         _MAIL.trigger t, { id: @pid, name: @name, data: { m: m, icon: mt.icon, iconclass: mt.iconclass } }
+
     notify: (m) ->
         @publish "notification", m
+
     warn: (m) ->
         @publish "warning", m
+
     error: (m) ->
         @publish "error", m
+        
     fail: (m) ->
         @publish "fail", m
 

src/core/schemes/notifications.html

@@ -1,5 +1,6 @@
 <afx-dummy>
     <afx-overlay data-id = "notifyzone" width = "250">
+        <afx-button text = "Clear all" data-id = "btclear"></afx-button>
         <afx-list-view data-id="notifylist"></afx-list-view>
         <style>
             afx-overlay[data-id = "notifyzone"]{
@@ -10,6 +11,13 @@
                 padding:3px;
                 margin: 0;
             }
+            afx-overlay[data-id = "notifyzone"] afx-button button{
+                width: 250px;
+                background-color: rgba(215,215,215,0.9);
+            }
+            afx-overlay[data-id = "notifyzone"] afx-button button:active{
+                color:#414339;
+            }
             afx-list-view[data-id = "notifylist"]
             {
                 padding:0;
@@ -21,7 +29,7 @@
             }
         </style>
     </afx-overlay>
-    <afx-feed data-id = "notifeed"  style = "display: none;"  closable="true">
+    <afx-feed data-id = "notifeed"  style = "display: none;">
         <!--afx-button text = "click me"></afx-button-->
         <style>
             afx-feed[data-id = "notifeed"]{

src/core/tags/afx-button.js

@@ -9,7 +9,7 @@
         this.icon = opts.icon
         this.iconclass = opts.iconclass
         var self = this
-        
+        this.onbtclick = opts.onbtclick
         self.root.set = function(k,v)
         {
             if(k == "*")
@@ -25,10 +25,10 @@
         }
         this._onbtclick = function(e)
         {
-            if(typeof opts.onbtclick == 'string')
+            if(typeof self.onbtclick == 'string')
-                eval(opts.onbtclick())
+                eval(self.onbtclick)
-            else if(opts.onbtclick)
+            else if(self.onbtclick)
-                opts.onbtclick()
+                self.onbtclick(e)
             if(self.root.observable)
             {
                 self.root.observable.trigger("btclick",{id:$(self.root).attr("data-id"),data:self.root})

src/core/tags/afx-feed.js

@@ -1,5 +1,5 @@
 <afx-feed>
-    <div>
+    <div each = {items}>
         <p>
             <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>
@@ -13,11 +13,7 @@
     </div>
     <script>
         var self = this
-        this.icon = opts.icon
+        self.items = opts.items || []
-        this.iconclass = opts.iconclass
-        this.closable = opts.closable
-        this.header = opts.header||""
-        this.text = opts.text || ""
         self.root.set = function(k,v)
         {
             if(k == "*")
@@ -27,6 +23,24 @@
                 self[k] = v
             self.update()
         }
+        self.root.push = function(i,u)
+        {
+            self.items.push(i)
+            if(u) self.update()
+        }
+        self.root.remove = function(e,u)
+        {
+            var i = self.items.indexOf(e)
+            if(i >= 0)
+                self.items.splice(i, 1)
+            if(u)
+                self.update()
+        }
+        self.root.unshift = function(i,u)
+        {
+            self.items.unshift(i)
+            if(u) self.update()
+        }
         self.root.get = function(k)
         {
             return self[k]

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

@@ -6,14 +6,10 @@
         </div>
     </div>
     <script>
-        this.rows= []
+        this.header = opts.header 
-        if(opts.data)
+        this.rows = opts.rows || []
-        {
-            this.header = opts.data.header 
-            this.rows = opts.data.data
-        }
         var self = this 
-        this.rid = $(self.root).attr("data-id")
+        this.rid = $(self.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1
         self.selidx = -1
         self.nrow = 0
         self.root.set = function(k,v)
@@ -27,7 +23,7 @@
                 self[k] = v
             self.update()
         }
-        var calibrate_size = function()
+        this.calibrate_size = function()
         {
             if(self.header)
             {
@@ -58,10 +54,10 @@
                 .css("display","flex")
                 .css("flex-direction","column")
                 .css("width","100%")
-            calibrate_size()
+            self.calibrate_size()
 
             this.root.observable.on("resize",function(){
-                calibrate_size()
+                self.calibrate_size()
                 if(self.refs.gridhead)
                     self.refs.gridhead.calibrate_size()
             })
@@ -71,7 +67,7 @@
                 self.selidx = -1
             if(self.nrow == self.rows.length) return
             self.nrow = self.rows.length
-            calibrate_size()
+            self.calibrate_size()
             if(self.refs.gridhead)
                 self.refs.gridhead.calibrate_size()
         })

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

@@ -1,14 +1,13 @@
 <afx-list-view class = {dropdown: opts.dropdown == "true"}>
     <div class = "list-container" ref = "container">
     <div if = {opts.dropdown == "true"} ref = "current" style = {opts.width?"min-width:" + opts.width + "px;":"min-width:150px;"}  onclick = {show_list}>
-        {selectedText}
     </div>
     <ul  ref = "mlist">
-        <li each={ items } class={selected: selected}  onclick = {parent._select}>
+        <li each={item,i in items } class={selected: parent._autoselect(item,i)}  onclick = {parent._select}>
-            <i if={iconclass} class = {iconclass} ></i>
+            <i if={item.iconclass} class = {item.iconclass} ></i>
-            <i if={icon} class="icon-style" style = { "background: url("+icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i>
+            <i if={item.icon} class="icon-style" style = { "background: url("+item.icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i>
-            { text }
+            { item.text }
-            <i if = {closable} class = "closable" click = {parent._remove}></i>
+            <i if = {item.closable} class = "closable" click = {parent._remove}></i>
         </li>
     </ul>
     </div>
@@ -16,12 +15,16 @@
         this.items = opts.child || []
         var self = this
         self.selidx = -1
-        self.selectedText = ""
         self.onlistselect = opts.onlistselect
+        var onclose = false
         self.root.set = function(k,v)
         {
             if(k == "selected")
-                self._select({item:self.items[v], preventDefault:function(){}})
+            {
+                if(self.selidx != -1)
+                    self.items[self.selidx].selected =false
+                self.items[v].selected = true
+            }
             else if(k == "*")
                 for(var i in v)
                     self[i] = v[i]
@@ -71,7 +74,7 @@
                     .css("left","0")
             }
         })
-        show_list()
+        show_list(event)
         {
             var desktoph = $("#desktop").height()
             var off = $(self.root).offset().top + $(self.refs.mlist).height()
@@ -81,6 +84,8 @@
             else 
                 $(self.refs.mlist).css("top","100%")
             $(self.refs.mlist).show()
+            //event.preventDefault()
+            event.preventUpdate = true
         }
         _remove(event)
         {
@@ -90,20 +95,48 @@
                 self.selidx = -1
             }
             self.items.splice(self.items.indexOf(event.item),1)
-            event.target = self.root
             self.update()
+            onclose = true
+        }
+        _autoselect(it,i)
+        {
+            if(!it.selected || it.selected == false) return false
+            var data = {
+                    id:$(self.root).attr("data-id"), 
+                    data:it, 
+                    idx:i}
+            //if(self.selidx != -1)
+             //   self.items[self.selidx].selected =false
+            self.selidx = i
+            if(opts.dropdown  == "true")
+            {
+                $(self.refs.mlist).hide()
+                $(self.refs.current).html(it.text)
+            }
+            if(self.onlistselect)
+                self.onlistselect(data)
+            this.root.observable.trigger('listselect',data)
+            return true
         }
         _select(event)
         {
-            var data = {
+            if(onclose)
-                    id:$(self.root).attr("data-id"), 
+            {
-                    data:event.item, 
+                onclose = false
-                    idx:self.items.indexOf(event.item)}
+                event.preventUpdate = true
+                return
+            }
             if(self.selidx != -1)
                 self.items[self.selidx].selected =false
+            event.item.item.selected = true
+            /*var data = {
+                    id:$(self.root).attr("data-id"), 
+                    data:event.item.item, 
+                    idx:event.item.i}
+            
             self.selidx = data.idx
             if(!self.items[self.selidx])
-                return
+                return 
             
             self.items[self.selidx].selected = true    
             if(opts.dropdown  == "true")
@@ -111,10 +144,10 @@
                 $(self.refs.mlist).hide()
                 self.selectedText = self.items[self.selidx].text
             }
-            if(self.onlistselect)
+            
-                self.onlistselect(data)
             this.root.observable.trigger('listselect',data)
-            //event.preventDefault()
+            //event.preventDefault()*/
+
         }
     </script>
 </afx-list-view>

src/index.html

@@ -12,6 +12,7 @@
         <script src="scripts/ace/ace.js"></script>
         <script src="scripts/ace/ext-language_tools.js"></script>
         <script src="scripts/ace/ext-modelist.js"></script>
+        <script src="scripts/ace/ext-themelist.js"></script>
         <script src="scripts/antos.js"></script>
     </head>
     <body>

src/packages/DummyApp/scheme.html

@@ -1,14 +1,12 @@
-<afx-app-window apptitle="Preview" width="600" height="400">
+<afx-app-window apptitle="Preview" width="600" height="600">
     <afx-vbox>
         <afx-tree-view data-id="mytree"> </afx-tree-view>
         <afx-hbox>
             <afx-button data-height="50" text="Read more" iconclass="fa fa-camera-retro fa-lg" id="button">
             </afx-button>
-            <afx-list-view data-id = "mylist" dropdown = "true" width="200"></afx-list-view>
+            <afx-calendar-view></afx-calendar-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
+            <afx-list-view data-id = "mylist" dropdown = "true" width="200" data-height = "50"></afx-list-view>
-                magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            
-                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
         </afx-hbox>
     </afx-vbox>
 </afx-app-window>

src/packages/NotePad/main.coffee

@@ -8,8 +8,6 @@ class NotePad extends this.OS.GUI.BaseApplication
         div = @find "datarea"
         ace.require "ace/ext/language_tools"
         @.editor = ace.edit div
-        @.editor.setTheme "ace/theme/monokai"
-        @.editor.getSession().setMode 'ace/mode/text'
         @.editor.setOptions {
             enableBasicAutocompletion: true,
             enableSnippets: true,
@@ -22,22 +20,39 @@ class NotePad extends this.OS.GUI.BaseApplication
         list = @find "modelist"
         @modes = ace.require "ace/ext/modelist"
         ldata = []
-        ldata.push {text:m.name, mode:m.mode} for m in @modes.modes
+        ldata.push {
-        list.set "items",ldata
+            text: m.name,
-        list.set "onlistselect", (e)->
+            mode: m.mode,
+            selected: if m.mode is 'ace/mode/text' then true else false
+        } for m in @modes.modes
+        list.set "items", ldata
+        list.set "onlistselect", (e) ->
             me.editor.session.setMode e.data.mode
 
+        themelist = @find "themelist"
+        themes = ace.require "ace/ext/themelist"
+        ldata = []
+        ldata.push {
+            text: m.caption,
+            mode: m.theme,
+            selected: if m.theme is "ace/theme/monokai" then true else false
+        } for k, m of themes.themesByName
+        console.log themes.themesByName
+        themelist.set "items", ldata
+        themelist.set "onlistselect", (e) ->
+            me.editor.setTheme e.data.mode
+
         stat = @find "editorstat"
         #status
-        stup = (e)->
+        stup = (e) ->
             c = me.editor.session.selection.getCursor()
             l = me.editor.session.getLength()
             $(stat).html "Row #{c.row}, col #{c.column}, lines: #{l}"
         stup(0)
         @.editor.getSession().selection.on "changeCursor", (e)->stup(e)
 
-        @on "resize", ()-> me.editor.resize()
+        @on "resize", () -> me.editor.resize()
-        @on "focus", ()->me.editor.focus()
+        @on "focus", () -> me.editor.focus()
         
     menu: ()->
         menu = [{

src/packages/NotePad/main.css

@@ -1,9 +1,9 @@
-afx-app-window[data-id="notepad"] afx-list-view[data-id="modelist"] {
+afx-app-window[data-id="notepad"] afx-list-view {
     margin: 2px;
     margin-right: 5px;
 }
 
-afx-app-window[data-id="notepad"] afx-list-view[data-id="modelist"] div.list-container{
+afx-app-window[data-id="notepad"] afx-list-view div.list-container{
     z-index: 10;
 }
 

src/packages/NotePad/scheme.html

@@ -17,6 +17,7 @@
         <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>

src/services/PushNotification.coffee

@@ -13,8 +13,10 @@ class PushNotification extends this.OS.GUI.BaseService
     main: ->
         me = @
         mfeed = @find "notifeed"
-        @scheme = @find "notifyzone"
+        @nzone = @find "notifyzone"
         mlist = @find "notifylist"
+        (@find "btclear").set "onbtclick", (e) -> mlist.set "items", []
+        #mlist.set "onlistselect", (e) -> console.log e
         @subscribe "notification", (o) ->
             d = {
                 header: "#{o.name} (#{o.id})"
@@ -37,7 +39,7 @@ class PushNotification extends this.OS.GUI.BaseService
             mlist.push d, true
             me.notifeed d, mfeed
 
-        ($ @scheme).css "right", 0
+        ($ @nzone).css "right", 0
             .css "top", "-3px"
             .css "height", ""
             .css "bottom", "0"
@@ -46,22 +48,22 @@ class PushNotification extends this.OS.GUI.BaseService
             .css "top", "0"
 
     notifeed: (d, mfeed) ->
-        mfeed.set "*", d
+        mfeed.push d, true
         ($ mfeed).show()
         timer = setTimeout () ->
-             ($ mfeed).hide()
+                mfeed.remove d, true
-             clearTimeout timer
+                clearTimeout timer
         , 3000
 
     awake: (e) ->
-        if  @view then ($ @scheme).hide() else ($ @scheme).show()
+        if  @view then ($ @nzone).hide() else ($ @nzone).show()
         @view = not @view
         me = @
         if not @cb
             @cb = (e) ->
                 return if e.originalEvent.item and e.originalEvent.item.closable
-                if not ($ e.target).closest($ me.scheme).length and not ($ e.target).closest($ me.holder.root).length
+                if not ($ e.target).closest($ me.nzone).length and not ($ e.target).closest($ me.holder.root).length
-                    ($ me.scheme).hide()
+                    ($ me.nzone).hide()
                     $(document).unbind "click", me.cb
                     me.view = not me.view
         if @view

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

@@ -1,6 +1,7 @@
 afx-grid-view{
     overflow: hidden;
     padding:5px;
+    display: block;
 }
 afx-grid-view afx-grid-row div{
     padding:3px;