add tooltip support

This commit is contained in:
Xuan Sang LE 2018-03-26 14:21:55 +02:00
parent d788f87ab9
commit 9f0986bc8d
7 changed files with 75 additions and 5 deletions

View File

@ -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)

View File

@ -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()

View File

@ -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"

View File

@ -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>

View File

@ -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)

View File

@ -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>

View File

@ -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;