add tooltip support

src/core/BaseApplication.coffee

@@ -34,6 +34,7 @@ class BaseApplication extends this.OS.GUI.BaseModel
         @on "exit", () -> me.quit()
         # first register some base event to the app
         @on "focus", () ->
+            me.sysdock.update()
             me.sysdock.set "selectedApp", me
             me.appmenu.pid = me.pid
             me.appmenu.set "items", (me.baseMenu() || [])
@@ -48,6 +49,7 @@ class BaseApplication extends this.OS.GUI.BaseModel
             switch d.e.item.data.dataid
                 when "#{me.name}-about" then me.openDialog "AboutDialog", ()->
                 when  "#{me.name}-exit" then me.trigger "exit"
+        @on "apptitlechange", () -> me.sysdock.update()
         @loadScheme()
 
     loadScheme: () ->
@@ -87,6 +89,8 @@ class BaseApplication extends this.OS.GUI.BaseModel
     toggle: () ->
         @trigger "toggle"
 
+    title: () ->
+        @scheme.get "apptitle"
         
     onexit: (evt) ->
         @cleanup(evt)

src/core/core.coffee

@@ -112,6 +112,7 @@ self.OS or=
         _PM.killAll a, true for a, v of _PM.processes
         _courrier.observable.off("*") if _courrier.observable
         $(window).off('keydown')
+        ($ "#workspace").off("mouseover")
         delete _courrier.observable
         ($ "#wrapper").empty()
         _GUI.clearTheme()

src/core/gui.coffee

@@ -40,8 +40,8 @@ self.OS.GUI =
             
         $(app.scheme).remove() if app.scheme
         ($ parent).append scheme
-        riot.mount ($ scheme), { observable: app.observable }
         app.scheme = scheme[0]
+        riot.mount ($ scheme), { observable: app.observable }
         app.main()
         app.show()
     loadScheme: (path, app, parent) ->
@@ -176,6 +176,7 @@ self.OS.GUI =
             # now launch it
             if _OS.APP[app]
                 _PM.createProcess app, _OS.APP[app], args
+
     dock: (app, meta) ->
         # dock an application to a dock
         # create a data object
@@ -243,6 +244,31 @@ self.OS.GUI =
             .css("background-size", wp.size)
             .css("background-repeat", wp.repeat)
 
+    showTooltip: (e, el, text) ->
+        el = el[0]
+        label = ($ "#systooltip")[0]
+        $("#workspace").on "mousemove", (ev) ->
+            if $(ev.target).closest(el).length is 0
+                $(label).hide()
+                $("#workspace").off "mousemove"
+        arr = text.split /:(.+)/
+        tip = text
+        tip = arr[1] if arr.length > 1
+        offset = $(el).offset()
+        w = $(el).width()
+        h = $(el).height()
+        label.set "text", tip
+        $(label).show()
+        switch arr[0]
+            when "cr" # center right of the element
+                left = offset.left + w + 5
+                top = offset.top + h / 2 - $(label).height() / 2
+                $(label).css "top", top + "px"
+                    .css "left", left + "px"
+            else
+                $(label).css "top", e.clientY + 5 + "px"
+                    .css "left", e.clientX + 5 +  "px"
+
     initDM: ->
         # check login first
         _API.resource "schemes/dm.html", (x) ->
@@ -276,11 +302,16 @@ self.OS.GUI =
                     event.preventDefault()
             # system menu and dock
             riot.mount ($ "#syspanel", $ "#wrapper")
-            riot.mount ($ "#sysdock", $ "#wrapper"), { items: [] }
+            riot.mount ($ "#sysdock", $ "#workspace"), { items: [] }
-
+            riot.mount ($ "#systooltip", $ "#wrapper")
             # context menu
-            riot.mount ($ "#contextmenu")
+            riot.mount ($ "#contextmenu", $ "#wrapper")
             ($ "#workspace").contextmenu (e) -> _GUI.bindContextMenu e
+            # tooltip
+            ($ "#workspace").mouseover (e) ->
+                el = $(e.target).closest "[tooltip]"
+                return unless el.length > 0
+                _GUI.showTooltip e, el, $(el).attr "tooltip"
             
             # desktop default file manager
             desktop = $ "#desktop"

src/core/schemes/dm.html

@@ -7,3 +7,4 @@
     <!--div id = "workingenv"></div-->
 </div>
 <afx-menu id="contextmenu" data-id="contextmenu" context="true" style="display:none;"></afx-menu>
+<afx-label id="systooltip" data-id="systooltip" style="display:none;position:absolute;"></afx-label>

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

@@ -43,6 +43,8 @@
                     self[i] = v[i]
             else
                 self[k] = v
+            if(k == "apptitle")
+                self.root.observable.trigger("apptitlechange")
             self.update()
         }
         self.root.get = function(k)

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

@@ -1,5 +1,5 @@
 <afx-apps-dock>
-    <afx-button class = {selected: parent.selectedApp && app.pid == parent.selectedApp.pid} each={ items } icon = {icon} text = {text} onbtclick = {onbtclick}>
+    <afx-button class = {selected: parent.selectedApp && it.app.pid == parent.selectedApp.pid} each={ it,i in items} iconclass = {it.iconclass} icon = {it.icon} appindex = {i} text = {it.text} onbtclick = {it.onbtclick} tooltip= {"cr:" + it.app.title()} >
     </afx-button>
     <script>
         this.items = opts.items || []
@@ -48,6 +48,10 @@
                 self.update()
             }
         }
+        self.root.update = function()
+        {
+            self.update()
+        }
         self.root.get = function(k)
         {
             return self[k]
@@ -56,5 +60,23 @@
             window.OS.courrier.trigger("sysdockloaded")
         })
         
+        self.root.contextmenuHandler = function(e, m) 
+        {
+            if(e.target == self.root) return;
+            var appidx = $(e.target).parent().attr("appindex")
+            var app = self.items[appidx].app
+            m.set("items", [
+                { text: "__(Show)", dataid:"show" },
+                { text: "__(Hide)", dataid:"hide" },
+                { text: "__(Close)", dataid:"quit" }
+            ])
+            m.set("onmenuselect", function(evt)
+            {
+                if(app[evt.item.data.dataid])
+                    app[evt.item.data.dataid]()
+            })
+            m.show(e)
+        }
+
     </script>
 </afx-apps-dock>

src/themes/antos/antos.css

@@ -81,6 +81,15 @@ html,body{
     font-weight: normal;
     font-style: normal;
 }
+#systooltip {
+    border:1px solid #a6a6a6;
+    border-radius: 3px;
+    padding-left:3px;
+    padding-right:3px;
+    /*box-shadow: 2px 2px 2px #cbcbcb;*/
+    box-shadow: 1px 1px 1px #9f9F9F;
+    background-color: #e7e7e7;
+}
 input {
     outline: none;
     padding: 2px;