mirror of
https://github.com/lxsang/antos-frontend.git
synced 2024-12-26 09:28:21 +01:00
core for app development
This commit is contained in:
Xuan Sang LE
parent
f4c54c712d
commit
2985689217
51
Makefile
51
Makefile
@ -1,14 +1,16 @@
|
||||
|
||||
|
||||
BUILDDIR = build/htdocs
|
||||
BLUE=\033[0;34m
|
||||
BLUE=\033[1;34m
|
||||
NC=\033[0m
|
||||
|
||||
coffees= src/define.coffee\
|
||||
src/core/apis/api.coffee\
|
||||
src/core/apis/handlers/InBrowserHandler.coffee\
|
||||
src/core/api.coffee\
|
||||
src/core/processes.coffee\
|
||||
src/core/handlers/InBrowserHandler.coffee\
|
||||
src/core/gui/gui.coffee\
|
||||
src/core/gui/BaseApplication.coffee\
|
||||
src/core/gui/BaseEvent.coffee\
|
||||
src/antos.coffee
|
||||
|
||||
tags= src/core/gui/tags/afx-button.js\
|
||||
@ -18,7 +20,9 @@ tags= src/core/gui/tags/afx-button.js\
|
||||
src/core/gui/tags/afx-app-window.js\
|
||||
src/core/gui/tags/afx-vbox.js\
|
||||
src/core/gui/tags/afx-hbox.js\
|
||||
src/core/gui/tags/afx-list-view.js
|
||||
src/core/gui/tags/afx-list-view.js\
|
||||
src/core/gui/tags/afx-tree-view.js \
|
||||
src/core/gui/tags/afx-grid-view.js
|
||||
|
||||
antos_themes = src/core/gui/themes/antos/font-awesome.css\
|
||||
src/core/gui/themes/antos/ubuntu-regular.css\
|
||||
@ -28,19 +32,23 @@ antos_themes = src/core/gui/themes/antos/font-awesome.css\
|
||||
src/core/gui/themes/antos/afx-menu.css\
|
||||
src/core/gui/themes/antos/afx-sys-panel.css\
|
||||
src/core/gui/themes/antos/afx-dock.css\
|
||||
src/core/gui/themes/antos/afx-list-view.css\
|
||||
src/core/gui/themes/antos/afx-tree-view.css\
|
||||
src/core/gui/themes/antos/afx-grid-view.css\
|
||||
src/core/gui/themes/antos/afx-app-window.css
|
||||
|
||||
|
||||
packages = NotePad
|
||||
|
||||
main: build_coffee build_tag build_theme schemes libs packages_builds
|
||||
packages = NotePad Terminal ActivityMonitor
|
||||
|
||||
main: clean build_coffee build_tag build_theme schemes libs build_packages
|
||||
- cp src/index.html $(BUILDDIR)/
|
||||
|
||||
#%.js: %.coffee
|
||||
# coffee --compile $<
|
||||
|
||||
build_coffee:
|
||||
- echo "$(BLUE)=======Building coffee files=======$(NC)"
|
||||
@echo "$(BLUE)=======Building coffee files=======$(NC)"
|
||||
- mkdir $(BUILDDIR)/scripts
|
||||
- rm $(BUILDDIR)/scripts/antos.js
|
||||
for f in $(coffees); do (cat "$${f}"; echo) >> $(BUILDDIR)/scripts/antos.coffee; done
|
||||
@ -49,36 +57,37 @@ build_coffee:
|
||||
|
||||
|
||||
libs:
|
||||
- echo "$(BLUE)=======Copy lib files=======$(NC)
|
||||
- cp -rf src/libs/* $(BUILDDIR)/scripts
|
||||
@echo "$(BLUE)=======Copy lib files=======$(NC)"
|
||||
cp -rf src/libs/* $(BUILDDIR)/scripts/
|
||||
|
||||
schemes:
|
||||
- echo "$(BLUE)=======Copy schemes files======= $(NC)"
|
||||
@echo "$(BLUE)=======Copy schemes files======= $(NC)"
|
||||
- mkdir -p $(BUILDDIR)/resources/schemes
|
||||
- cp src/core/gui/schemes/* $(BUILDDIR)/resources/schemes
|
||||
cp src/core/gui/schemes/* $(BUILDDIR)/resources/schemes/
|
||||
|
||||
build_tag:
|
||||
- echo "=======$(BLUE)Building tag files=======$(NC)"
|
||||
@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 $(tags); do (cat "$${f}"; echo) >> $(BUILDDIR)/resources/antos_tags.js; done
|
||||
|
||||
build_theme: antos_themes_build
|
||||
|
||||
|
||||
antos_themes_build:
|
||||
- echo "=======$(BLUE)Building themes name: antos=======$(NC)"
|
||||
@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 $(antos_themes); do (cat "$${f}"; echo) >> $(BUILDDIR)/resources/themes/antos/antos.css; done
|
||||
-mkdir -p $(BUILDDIR)/resources/themes/antos/fonts
|
||||
- cp -rf src/core/gui/themes/antos/fonts/* $(BUILDDIR)/resources/themes/antos/fonts
|
||||
- cp src/core/gui/themes/antos/wallpaper.jpg $(BUILDDIR)/resources/themes/antos/
|
||||
cp -rf src/core/gui/themes/antos/fonts/* $(BUILDDIR)/resources/themes/antos/fonts
|
||||
cp src/core/gui/themes/antos/wallpaper.jpg $(BUILDDIR)/resources/themes/antos/
|
||||
|
||||
|
||||
packages_builds:
|
||||
build_packages:
|
||||
- mkdir $(BUILDDIR)/packages
|
||||
- for d in $(packages); do (cd src/packages/$$d; make);done
|
||||
- for d in $(packages); do ( test -d $(BUILDDIR)/packages/$$d || mkdir -p $(BUILDDIR)/packages/$$d && cp -rf src/packages/$$d/build/* $(BUILDDIR)/packages/$$d/);done
|
||||
- for d in $(packages); do ( test -d src/packages/$$d/build && rm -r src/packages/$$d/build ); done
|
||||
for d in $(packages); do (cd src/packages/$$d; make);done
|
||||
for d in $(packages); do ( test -d $(BUILDDIR)/packages/$$d || mkdir -p $(BUILDDIR)/packages/$$d && cp -rf src/packages/$$d/build/* $(BUILDDIR)/packages/$$d/);done
|
||||
for d in $(packages); do ( test -d src/packages/$$d/build && rm -r src/packages/$$d/build ); done
|
||||
clean:
|
||||
rm -rf $(BUILDDIR)/*
|
||||
@ -1,6 +1,7 @@
|
||||
_GUI = self.OS.GUI
|
||||
_API = self.OS.API
|
||||
_APP = self.OS.APP
|
||||
_PM = self.OS.PM
|
||||
this.onload = () ->
|
||||
console.log "Booting the os"
|
||||
self.OS.boot()
|
||||
@ -13,13 +13,12 @@ self.OS.API =
|
||||
_API.request 'config', (result) ->
|
||||
console.log result
|
||||
|
||||
get:(p,c)=>
|
||||
get:(p,c,f)->
|
||||
$.get p
|
||||
.done (data) ->
|
||||
c(data)
|
||||
.fail ->
|
||||
alert "cannot get data"
|
||||
c(null)
|
||||
f()
|
||||
resource: (resource,callback) ->
|
||||
path = "resources/#{resource}"
|
||||
_API.get path,callback
|
||||
@ -1,21 +1,88 @@
|
||||
self = this
|
||||
_PM = self.OS.PM
|
||||
_APP = self.OS.APP
|
||||
class BaseApplication
|
||||
constructor: (@name) ->
|
||||
@observable = riot.observable()
|
||||
@pid = 0
|
||||
@_api = self.OS.API
|
||||
init: ->
|
||||
#first load the scheme
|
||||
me = @
|
||||
# first register some base event to the app
|
||||
@on "exit", ()-> me.quit()
|
||||
@on "focus", () ->
|
||||
me.sysdock.set "selectedApp", me
|
||||
me.appmenu.pid = me.pid
|
||||
me.appmenu.set "items", (me.baseMenu() || [])
|
||||
me.appmenu.set "onmenuselect", (d)->
|
||||
me.trigger("menuselect",d)
|
||||
@on "hide", ()->
|
||||
me.sysdock.set "selectedApp", null
|
||||
me.appmenu.set "items",[]
|
||||
@on "menuselect", (item) ->
|
||||
switch item.data.dataid
|
||||
when "#{me.name}-about" then alert "About " + me.pid + me.name
|
||||
when "#{me.name}-exit" then me.trigger "exit"
|
||||
#now load the scheme
|
||||
path = "packages/#{@name}/scheme.html"
|
||||
@scheme = _GUI.loadScheme path,@observable
|
||||
#if(!scheme) bug repporter go here
|
||||
@event()
|
||||
event: ->
|
||||
#implement by subclasses
|
||||
_GUI.loadScheme path ,this
|
||||
|
||||
on: (e,f) -> @observable.on e,f
|
||||
|
||||
trigger:(e,d) -> @observable.trigger e,d
|
||||
|
||||
show: () ->
|
||||
@observable.trigger "focus"
|
||||
|
||||
blur: () ->
|
||||
@.appmenu.set "items",[] if @.appmenu and @.pid == @.appmenu.pid
|
||||
@observable.trigger "blur"
|
||||
|
||||
hide: () ->
|
||||
@observable.trigger "hide"
|
||||
|
||||
toggle:() ->
|
||||
@observable.trigger "toggle"
|
||||
|
||||
quit: () ->
|
||||
evt = new _GUI.BaseEvent("exit")
|
||||
@exit(evt)
|
||||
if not evt.prevent
|
||||
@.appmenu.set "items",[] if @.pid == @.appmenu.pid
|
||||
_PM.kill(@)
|
||||
($ @scheme).remove()
|
||||
|
||||
find: (id) -> ($ "[data-id='#{id}']",@scheme)[0]
|
||||
|
||||
baseMenu:->
|
||||
menu =
|
||||
[{
|
||||
text:_APP[@name].meta.name,
|
||||
child:[
|
||||
{text:"About", dataid:"#{@name}-about"},
|
||||
{text:"Exit", dataid:"#{@name}-exit"}
|
||||
]
|
||||
}]
|
||||
menu = menu.concat @menu() || []
|
||||
menu
|
||||
|
||||
main: ->
|
||||
#main program
|
||||
# implement by subclasses
|
||||
menu: ->
|
||||
# implement by subclasses
|
||||
# to add menu to application
|
||||
[]
|
||||
open:->
|
||||
#implement by subclasses
|
||||
data:->
|
||||
#implement by subclasses
|
||||
# to return app data
|
||||
update:->
|
||||
#implement by subclasses
|
||||
|
||||
exit: (e) ->
|
||||
#implement by subclasses
|
||||
# to handle the exit event
|
||||
# use e.preventDefault() to
|
||||
# discard the quit command
|
||||
this.OS.GUI.BaseApplication = BaseApplication
|
||||
7
src/core/gui/BaseEvent.coffee
Normal file
7
src/core/gui/BaseEvent.coffee
Normal file
@ -0,0 +1,7 @@
|
||||
class BaseEvent
|
||||
constructor: (@name) ->
|
||||
@prevent = false
|
||||
preventDefault:()->
|
||||
@prevent = true
|
||||
|
||||
this.OS.GUI.BaseEvent = BaseEvent
|
||||
@ -1,82 +1,109 @@
|
||||
self.OS.GUI =
|
||||
tagPath: "resources/tags/"
|
||||
init: () ->
|
||||
query =
|
||||
path: 'VFS/get'
|
||||
data: "#{_GUI.tagPath}/tags.json"
|
||||
self.OS.API.request query, ()->
|
||||
|
||||
loadScheme: (path, obs) ->
|
||||
_API.get path, (x) ->
|
||||
loadScheme: (path,app) ->
|
||||
_API.get path,
|
||||
(x) ->
|
||||
return null unless x
|
||||
scheme = $.parseHTML x
|
||||
($ "#desktop").append scheme
|
||||
riot.mount ($ scheme), {observable:obs}
|
||||
scheme
|
||||
riot.mount ($ scheme), {observable:app.observable}
|
||||
app.scheme = scheme[0]
|
||||
app.show()
|
||||
app.main()
|
||||
, (f) ->
|
||||
alert "cannot load scheme"
|
||||
|
||||
loadTheme: (name) ->
|
||||
path = "resources/themes/#{name}/#{name}.css"
|
||||
$ "head link#ostheme"
|
||||
.attr "href", path
|
||||
|
||||
launch: (app) ->
|
||||
if not _APP[app]
|
||||
# first load it
|
||||
path = "packages/#{app}/main.js"
|
||||
$.getScript path
|
||||
path = "packages/#{app}/"
|
||||
$.getScript path + "main.js"
|
||||
.done (e,s) ->
|
||||
#load css file
|
||||
$.get "#{path}main.css", () ->
|
||||
$ '<link>', {rel:'stylesheet', type:'text/css', 'href':"#{path}main.css"}
|
||||
.appendTo 'head'
|
||||
#launch
|
||||
_app = new _APP[app]
|
||||
_app.init()
|
||||
if _APP[app]
|
||||
# load app meta data
|
||||
_API.get "#{path}package.json",
|
||||
(data) ->
|
||||
_APP[app].meta = data
|
||||
_PM.createProcess app, _APP[app]
|
||||
console.log "Fist time loading "+app
|
||||
,(e,s)->
|
||||
alert "cannot read application, meta-data"
|
||||
.fail (e,s) ->
|
||||
#BUG report here
|
||||
console.log "bug report"
|
||||
else
|
||||
# now launch it
|
||||
_app = new _APP[app]
|
||||
_app.init()
|
||||
if _APP[app]
|
||||
_PM.createProcess app, _APP[app]
|
||||
dock: (app,meta) ->
|
||||
# dock an application to a dock
|
||||
# create a data object
|
||||
data =
|
||||
icon:null
|
||||
iconclass:meta.iconclass||""
|
||||
app:app
|
||||
onbtclick:() ->
|
||||
app.toggle()
|
||||
data.icon = "packages/#{meta.app}/#{meta.icon}" if meta.icon
|
||||
data.iconclass = "fa fa-cogs" if (not meta.icon) and (not meta.iconclass)
|
||||
dock = $ "#sysdock"
|
||||
dock.get(0).newapp data
|
||||
app.sysdock = dock.get(0)
|
||||
app.appmenu = ($ "[data-id = 'appmenu']","#syspanel")[0]
|
||||
app.init()
|
||||
#app.show() -- notwork, sice the scheme is not loaded yet
|
||||
|
||||
undock: (app) ->
|
||||
($ "#sysdock").get(0).removeapp app
|
||||
|
||||
initDM: ->
|
||||
_API.resource "schemes/dm.html", (x) ->
|
||||
return null unless x
|
||||
scheme = $.parseHTML x
|
||||
($ "#wrapper").append scheme
|
||||
#riot.mount $ "#button", $ "#wrapper"
|
||||
($ "#desktop").on "click", (e)->
|
||||
return if e.target isnt ($ "#desktop").get(0)
|
||||
($ "#sysdock").get(0).set "selectedApp",null
|
||||
|
||||
osmenu = {child:[
|
||||
{text:"",icon:"fa fa-circle", child:[
|
||||
{text:"",iconclass:"fa fa-eercast", child:[
|
||||
{text:"About"},
|
||||
{text:"System Preferences", icon:"fa fa-commenting"},
|
||||
{text:"Applications",child:[{text:"Terminal"},{text:"Text edit"}]},
|
||||
{text:"System Preferences", iconclass:"fa fa-commenting"},
|
||||
{text:"Applications",child:[
|
||||
{text:"Terminal",type:"app"},
|
||||
{text:"NotePad",type:"app", icon:"packages/NotePad/icon.png"},
|
||||
{text:"ActivityMonitor",type:"app"}
|
||||
]},
|
||||
{text:"Logout"}
|
||||
]}
|
||||
],
|
||||
onmenuselect: (item)->
|
||||
console.log item
|
||||
_GUI.launch "NotePad"
|
||||
],onmenuselect: (item)->
|
||||
switch item.data.type
|
||||
when "app" then _GUI.launch item.data.text
|
||||
}
|
||||
appmenu = {child:[
|
||||
{text:"Text edit", child:[
|
||||
{text:"About"},
|
||||
{text:"Preferences"},
|
||||
{text:"Exit"}
|
||||
]},
|
||||
{text:"File",child:[
|
||||
{text:"Open"},{text:"Save"}]}
|
||||
],
|
||||
onmenuselect: (item)-> console.log item}
|
||||
appmenu = {child:[]}
|
||||
systray = {child:[
|
||||
{text:"Sun 22:57 6 August 2017"},
|
||||
{text:"",icon:"fa fa-search"},
|
||||
{text:"",icon:"fa fa-commenting"}
|
||||
{text:"",iconclass:"fa fa-search"},
|
||||
{text:"",iconclass:"fa fa-commenting"}
|
||||
|
||||
],
|
||||
onmenuselect: (item)->
|
||||
],onmenuselect: (item)->
|
||||
console.log item
|
||||
}
|
||||
|
||||
riot.mount ($ "#syspanel", $ "#wrapper"),{osmenu:osmenu,appmenu:appmenu,systray:systray}
|
||||
|
||||
docks = {items:[
|
||||
{icon:"fa fa-cogs"},
|
||||
{icon:"fa fa-life-ring"},
|
||||
{icon:"fa fa-cubes"}
|
||||
]}
|
||||
riot.mount ($ "#sysdock", $ "#wrapper"), docks
|
||||
riot.mount ($ "#sysdock", $ "#wrapper"), {items:[]}
|
||||
@ -1,8 +1,8 @@
|
||||
<afx-app-window ref = "window" >
|
||||
<div class = "afx-window-wrapper">
|
||||
<ul class= "afx-window-top" >
|
||||
<li class = "afx-window-close"></li>
|
||||
<li class = "afx-window-minimize"></li>
|
||||
<li class = "afx-window-close" onclick = {close}></li>
|
||||
<li class = "afx-window-minimize" onclick = {minimize}></li>
|
||||
<li class = "afx-window-maximize" onclick={maximize}></li>
|
||||
<li ref = "dragger" class = "afx-window-title">{ apptitle }</li>
|
||||
</ul>
|
||||
@ -25,6 +25,32 @@
|
||||
var height = opts.height || 300
|
||||
this.root.observable = opts.observable || riot.observable()
|
||||
if(!window._zidex) window._zidex = 10
|
||||
this.shown = false
|
||||
self.root.set = function(k,v)
|
||||
{
|
||||
if(k == "*")
|
||||
for(var i in v)
|
||||
self[i] = v[i]
|
||||
else
|
||||
self[k] = v
|
||||
self.update()
|
||||
}
|
||||
self.root.get = function(k)
|
||||
{
|
||||
return self[k]
|
||||
}
|
||||
self.root.update = function()
|
||||
{
|
||||
self.update()
|
||||
}
|
||||
minimize()
|
||||
{
|
||||
this.root.observable.trigger("hide")
|
||||
}
|
||||
close()
|
||||
{
|
||||
this.root.observable.trigger("exit")
|
||||
}
|
||||
this.on('mount', function() {
|
||||
var left,top
|
||||
left = 20 + Math.floor(Math.random() * width)
|
||||
@ -37,8 +63,13 @@
|
||||
.css("height", height + "px")
|
||||
.css("z-index",window._zidex++)
|
||||
$(self.refs.window).on("mousedown", function(e){
|
||||
window._zidex++
|
||||
$(self.refs.window).css("z-index",window._zidex)
|
||||
if(self.shown == false)
|
||||
self.root.observable.trigger("focus")
|
||||
})
|
||||
$(self.refs.window).click(function(e) {
|
||||
//e.stopPropagation()
|
||||
//e.windowactive = true
|
||||
//self.root.observable.trigger("windowselect")
|
||||
})
|
||||
enable_dragging()
|
||||
if(isResize)
|
||||
@ -49,6 +80,34 @@
|
||||
$(self.refs.content).children().each(function(e){
|
||||
this.observable = self.root.observable
|
||||
})
|
||||
|
||||
self.root.observable.on("focus",function(){
|
||||
window._zidex++
|
||||
$(self.refs.window)
|
||||
.show()
|
||||
.css("z-index",window._zidex)
|
||||
.removeClass("unactive")
|
||||
|
||||
self.shown = true
|
||||
})
|
||||
self.root.observable.on("blur", function(){
|
||||
self.shown = false
|
||||
$(self.refs.window)
|
||||
.addClass("unactive")
|
||||
// add css to blur app :)
|
||||
})
|
||||
self.root.observable.on("hide", function()
|
||||
{
|
||||
$(self.refs.window).hide()
|
||||
self.shown = false
|
||||
})
|
||||
|
||||
self.root.observable.on("toggle", function(){
|
||||
if(self.shown)
|
||||
self.root.observable.trigger("hide")
|
||||
else
|
||||
self.root.observable.trigger("focus")
|
||||
})
|
||||
})
|
||||
var enable_dragging = function()
|
||||
{
|
||||
@ -112,7 +171,8 @@
|
||||
.css("width", w +"px")
|
||||
.css("height",h + "px")
|
||||
isMaxi = false
|
||||
self.root.observable.trigger('resize',w,h)
|
||||
self.root.observable.trigger('resize',
|
||||
{id:$(self.root).attr("data-id"),w:w,h:h})
|
||||
})
|
||||
$(window).on("mouseup", function(e){
|
||||
$(window).unbind("mousemove", null)
|
||||
@ -137,7 +197,8 @@
|
||||
.css("width", w + "px")
|
||||
.css("height", h + "px")
|
||||
.css("top","0").css("left","0")
|
||||
self.root.observable.trigger('resize',w,h)
|
||||
self.root.observable.trigger('resize',
|
||||
{id:$(self.root).attr("data-id"),w:w,h:h})
|
||||
isMaxi = true
|
||||
}
|
||||
else
|
||||
@ -147,7 +208,8 @@
|
||||
.css("width",history.width)
|
||||
.css("height",history.height)
|
||||
.css("top",history.top).css("left",history.left)
|
||||
self.root.observable.trigger('resize',history.width, history.height)
|
||||
self.root.observable.trigger('resize',
|
||||
{id:$(self.root).attr("data-id"),w:history.width,h:history.height} )
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,7 +1,60 @@
|
||||
<afx-apps-dock>
|
||||
<afx-button each={ items } icon = {icon} text = {text}>
|
||||
<afx-button class = {selected: parent.selectedApp && app.pid == parent.selectedApp.pid} each={ items } icon = {icon} text = {text} onbtclick = {onbtclick}>
|
||||
</afx-button>
|
||||
<script>
|
||||
this.items = opts.items
|
||||
this.items = opts.items || []
|
||||
var self = this
|
||||
self.selectedApp = null
|
||||
self.root.set = function(k,v)
|
||||
{
|
||||
if(k == "*")
|
||||
for(var i in v)
|
||||
self[i] = v[i]
|
||||
else
|
||||
{
|
||||
self[k] = v
|
||||
if(k == "selectedApp")
|
||||
{
|
||||
for(var i in self.items)
|
||||
self.items[i].app.blur()
|
||||
//v.show()
|
||||
}
|
||||
}
|
||||
self.update()
|
||||
}
|
||||
self.root.newapp = function(i)
|
||||
{
|
||||
self.items.push(i)
|
||||
self.selectedApp = i.app
|
||||
self.update()
|
||||
for(var i in self.items)
|
||||
self.items[i].app.blur()
|
||||
}
|
||||
|
||||
self.root.removeapp = function(a)
|
||||
{
|
||||
var i = -1;
|
||||
for(var k in self.items)
|
||||
if(self.items[k].app.pid == a.pid)
|
||||
{
|
||||
i = k; break;
|
||||
}
|
||||
if(i != -1)
|
||||
{
|
||||
delete self.items[i].app
|
||||
self.items.splice(i,1)
|
||||
|
||||
self.update()
|
||||
}
|
||||
}
|
||||
self.root.get = function(k)
|
||||
{
|
||||
return self[k]
|
||||
}
|
||||
self.root.update = function()
|
||||
{
|
||||
self.update()
|
||||
}
|
||||
|
||||
</script>
|
||||
</afx-apps-dock>
|
||||
@ -1,20 +1,41 @@
|
||||
<afx-button>
|
||||
<button disabled={ enable == "false" } onclick="{ _onbtclick }" >
|
||||
<i class = { icon } ></i>
|
||||
<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>
|
||||
{ opts.text }
|
||||
</button>
|
||||
<script>
|
||||
this.enable = opts.enable
|
||||
this.icon = opts.icon
|
||||
this.iconclass = opts.iconclass
|
||||
var self = this
|
||||
|
||||
self.root.set = function(k,v)
|
||||
{
|
||||
if(k == "*")
|
||||
for(var i in v)
|
||||
self[i] = v[i]
|
||||
else
|
||||
self[k] = v
|
||||
self.update()
|
||||
}
|
||||
self.root.get = function(k)
|
||||
{
|
||||
return self[k]
|
||||
}
|
||||
self.root.update = function()
|
||||
{
|
||||
self.update()
|
||||
}
|
||||
this._onbtclick = function(e)
|
||||
{
|
||||
if(opts.onbtclick)
|
||||
eval(opts.onbtclick)
|
||||
if(typeof opts.onbtclick == 'string')
|
||||
eval(opts.onbtclick())
|
||||
else if(opts.onbtclick)
|
||||
opts.onbtclick()
|
||||
if(self.root.observable)
|
||||
{
|
||||
console.log("btclick")
|
||||
self.root.observable.trigger("btclick",this)
|
||||
self.root.observable.trigger("btclick",{id:$(self.root).attr("data-id"),data:self.root})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
162
src/core/gui/tags/afx-grid-view.js
Normal file
162
src/core/gui/tags/afx-grid-view.js
Normal file
@ -0,0 +1,162 @@
|
||||
<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">
|
||||
<afx-grid-row each={ child, i in rows } class = {selected: child.selected} rootid = {parent.rid} observable = {parent.root.observable} cols = {child} onclick = {parent._select}></afx-grid-row>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
this.rows= []
|
||||
if(opts.data)
|
||||
{
|
||||
this.header = opts.data.header
|
||||
this.rows = opts.data.data
|
||||
}
|
||||
var self = this
|
||||
this.rid = $(self.root).attr("data-id")
|
||||
self.selidx = -1
|
||||
self.nrow = 0
|
||||
self.root.set = function(k,v)
|
||||
{
|
||||
if(k == "selected")
|
||||
self._select({item:self.rows[v], preventDefault:function(){}})
|
||||
else if(k == "*")
|
||||
for(var i in v)
|
||||
self[i] = v[i]
|
||||
else
|
||||
self[k] = v
|
||||
self.update()
|
||||
}
|
||||
var calibrate_size = function()
|
||||
{
|
||||
if(self.header)
|
||||
{
|
||||
$(self.refs.scroller).css("height",
|
||||
$(self.root).height() - $(self.refs.gridhead.root).height()
|
||||
+ "px")
|
||||
}
|
||||
else
|
||||
$(self.refs.scroller).css("height","100%")
|
||||
|
||||
}
|
||||
self.root.get = function(k)
|
||||
{
|
||||
if(k == "selected")
|
||||
return (self.selidx == -1?null:self.rows[self.selidx])
|
||||
return self[k]
|
||||
}
|
||||
|
||||
if(opts.observable)
|
||||
this.root.observable = opts.observable
|
||||
else
|
||||
{
|
||||
this.root.observable = riot.observable()
|
||||
}
|
||||
|
||||
this.on("mount", function(){
|
||||
$(self.refs.container)
|
||||
.css("display","flex")
|
||||
.css("flex-direction","column")
|
||||
.css("width","100%")
|
||||
calibrate_size()
|
||||
|
||||
this.root.observable.on("resize",function(){
|
||||
calibrate_size()
|
||||
if(self.refs.gridhead)
|
||||
self.refs.gridhead.calibrate_size()
|
||||
})
|
||||
})
|
||||
this.on("updated",function(){
|
||||
if(self.selidx >= self.rows.length)
|
||||
self.selidx = -1
|
||||
if(self.nrow == self.rows.length) return
|
||||
self.nrow = self.rows.length
|
||||
calibrate_size()
|
||||
if(self.refs.gridhead)
|
||||
self.refs.gridhead.calibrate_size()
|
||||
})
|
||||
_select(event)
|
||||
{
|
||||
var data = {
|
||||
id:self.rid,
|
||||
data:event.item}
|
||||
if(opts.onlistselect)
|
||||
opts.onlistselect(data)
|
||||
console.log(data)
|
||||
if(self.selidx != -1)
|
||||
self.rows[self.selidx].selected =false
|
||||
self.selidx = event.item.i
|
||||
self.rows[self.selidx].selected = true
|
||||
this.root.observable.trigger('gridselect',data)
|
||||
event.preventUpdate = true
|
||||
self.update()
|
||||
event.preventDefault()
|
||||
}
|
||||
</script>
|
||||
</afx-grid-view>
|
||||
|
||||
<afx-grid-row>
|
||||
<div style = "flex-grow:1;" each = { child,i in cols } class = {string:typeof child.value == "string", number: typeof child.value == "number"} >
|
||||
<i if={child.iconclass} class = {child.iconclass} ></i>
|
||||
<i if={child.icon} class="icon-style" style = { "background: url("+child.icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i>
|
||||
{child.value}
|
||||
</div>
|
||||
<script>
|
||||
this.cols = opts.cols || []
|
||||
var self = this
|
||||
this.rid = opts.rootid
|
||||
this.observable = opts.observable
|
||||
this.header = opts.header||false
|
||||
this.calibrate_size = function()
|
||||
{
|
||||
if(!self.cols || self.cols.length == 0 || !self.observable) return
|
||||
var totalw = $(self.root).parent().width()
|
||||
var ocw = 0
|
||||
var nauto = 0
|
||||
var dist = []
|
||||
$.each(self.cols, function(i,e){
|
||||
if(e.width)
|
||||
{
|
||||
dist.push(e.width)
|
||||
ocw += e.width
|
||||
}
|
||||
else
|
||||
{
|
||||
dist.push(-1)
|
||||
nauto++
|
||||
}
|
||||
})
|
||||
if(nauto > 0)
|
||||
{
|
||||
var cellw = (totalw - ocw)/ nauto
|
||||
$.each(dist,function(i,e){
|
||||
if(e == -1) dist[i] = cellw
|
||||
})
|
||||
}
|
||||
|
||||
self.observable.trigger("cellresize",{id:self.rid,data:dist})
|
||||
}
|
||||
|
||||
self.observable.on("cellresize",function(d){
|
||||
if(d.id && d.id == self.rid)
|
||||
{
|
||||
var i = 0
|
||||
$(self.root)
|
||||
.children()
|
||||
.each(function(){
|
||||
$(this).css("width", d.data[i]+"px")
|
||||
i++
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
this.on("mount", function(){
|
||||
$(self.root)
|
||||
.css("display","flex")
|
||||
.css("flex-direction","row")
|
||||
.css("width","100%")
|
||||
if(self.header)
|
||||
self.calibrate_size()
|
||||
})
|
||||
</script>
|
||||
</afx-grid-row>
|
||||
@ -4,14 +4,30 @@
|
||||
</div>
|
||||
<script>
|
||||
var self = this
|
||||
self.root.set = function(k,v)
|
||||
{
|
||||
if(k == "*")
|
||||
for(var i in v)
|
||||
self[i] = v[i]
|
||||
else
|
||||
self[k] = v
|
||||
self.update()
|
||||
}
|
||||
self.root.get = function(k)
|
||||
{
|
||||
return self[k]
|
||||
}
|
||||
self.root.update = function()
|
||||
{
|
||||
self.update()
|
||||
}
|
||||
this.on('mount', function(){
|
||||
$(self.refs.container)
|
||||
.css("display","flex")
|
||||
.css("flex-direction","column")
|
||||
.css("width","100%")
|
||||
.css("background-color","red")
|
||||
.css("table-layout","fixed")
|
||||
.css("overflow", "hidden")
|
||||
//.css("background-color","red")
|
||||
//.css("overflow", "hidden")
|
||||
|
||||
calibrate_size()
|
||||
|
||||
@ -36,7 +52,7 @@
|
||||
this.observable = self.root.observable
|
||||
$(this)
|
||||
.css("flex-grow","1")
|
||||
.css("border","1px solid black")
|
||||
//.css("border","1px solid black")
|
||||
var dw = $(this).attr("data-height")
|
||||
if(dw)
|
||||
{
|
||||
|
||||
@ -1,28 +1,100 @@
|
||||
<afx-list-view>
|
||||
<ul>
|
||||
<li each={ items } class = {child != null ? "afx-sublist":""} onclick = {parent.onselect}>
|
||||
<afx-list-view if={child != null} child={child} observable = {parent.observable} ></afx-list-view>
|
||||
<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}>
|
||||
<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 }
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<script>
|
||||
this.items = opts.child
|
||||
if(opts.observable)
|
||||
this.observable = opts.observable
|
||||
else if(this.root.observable)
|
||||
this.observable = this.root.observable
|
||||
else
|
||||
var self = this
|
||||
self.selidx = -1
|
||||
self.selectedText = ""
|
||||
self.onlistselect = opts.onlistselect
|
||||
self.root.set = function(k,v)
|
||||
{
|
||||
this.observable = riot.observable()
|
||||
this.observable.on('listselect',function(data){
|
||||
if(opts.listselect)
|
||||
opts.listselect(data)
|
||||
})
|
||||
if(k == "selected")
|
||||
self._select({item:self.items[v], preventDefault:function(){}})
|
||||
else if(k == "*")
|
||||
for(var i in v)
|
||||
self[i] = v[i]
|
||||
else
|
||||
self[k] = v
|
||||
self.update()
|
||||
}
|
||||
self.root.update = function()
|
||||
{
|
||||
self.update()
|
||||
}
|
||||
self.root.get = function(k)
|
||||
{
|
||||
if(k == "selected")
|
||||
return self.items[self.selidx]
|
||||
return self[k]
|
||||
}
|
||||
|
||||
onselect(event)
|
||||
if(opts.observable)
|
||||
this.root.observable = opts.observable
|
||||
else
|
||||
{
|
||||
this.root.observable = riot.observable()
|
||||
}
|
||||
this.on("mount", function(){
|
||||
if(opts.dropdown == "true")
|
||||
{
|
||||
$(document).click(function(event) {
|
||||
if(!$(event.target).closest(self.refs.container).length) {
|
||||
$(self.refs.mlist).hide()
|
||||
}
|
||||
})
|
||||
//$(self.root).css("position","relative")
|
||||
$(self.refs.container)
|
||||
.css("position","absolute")
|
||||
.css("display","inline-block")
|
||||
|
||||
this.observable.trigger('listselect',event.item)
|
||||
$(self.refs.mlist)
|
||||
.css("position","absolute")
|
||||
.css("display","none")
|
||||
.css("top","100%")
|
||||
.css("left","0")
|
||||
}
|
||||
})
|
||||
show_list()
|
||||
{
|
||||
var desktoph = $("#desktop").height()
|
||||
var off = $(self.root).offset().top + $(self.refs.mlist).height()
|
||||
console.log(desktoph,off)
|
||||
if( off > desktoph )
|
||||
$(self.refs.mlist)
|
||||
.css("top","-" + $(self.refs.mlist).outerHeight() + "px")
|
||||
else
|
||||
$(self.refs.mlist).css("top","100%")
|
||||
$(self.refs.mlist).show()
|
||||
}
|
||||
_select(event)
|
||||
{
|
||||
var data = {
|
||||
id:$(self.root).attr("data-id"),
|
||||
data:event.item,
|
||||
idx:self.items.indexOf(event.item)}
|
||||
if(self.selidx != -1)
|
||||
self.items[self.selidx].selected =false
|
||||
self.selidx = data.idx
|
||||
self.items[self.selidx].selected = true
|
||||
if(opts.dropdown == "true")
|
||||
{
|
||||
$(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()
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,17 +1,42 @@
|
||||
<afx-menu>
|
||||
<ul>
|
||||
<li class="afx-corner-fix"></li>
|
||||
<li each={ items } class = {child != null ? "afx-submenu":""}>
|
||||
<li each={ items } class = {afx_submenu:child != null, fix_padding:icon}>
|
||||
<a href="#" onclick = {parent.onselect}>
|
||||
<i class = {icon} ></i>{ text }
|
||||
<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 }
|
||||
</a>
|
||||
|
||||
<afx-menu if={child != null} child={child} observable = {parent.root.observable} ></afx-menu>
|
||||
<afx-menu if={child != null} child={child} onmenuselect={onmenuselect} observable = {parent.root.observable} rootid = {parent.rid}></afx-menu>
|
||||
</li>
|
||||
<li class="afx-corner-fix"></li>
|
||||
</ul>
|
||||
<script>
|
||||
this.items = opts.child
|
||||
if(opts.rootid)
|
||||
this.rid = opts.rootid
|
||||
else
|
||||
this.rid = $(this.root).attr("data-id")
|
||||
var self = this
|
||||
this.onmenuselect = opts.onmenuselect
|
||||
self.root.set = function(k,v)
|
||||
{
|
||||
if(k == "*")
|
||||
for(var i in v)
|
||||
self[i] = v[i]
|
||||
else
|
||||
self[k] = v
|
||||
self.update()
|
||||
}
|
||||
self.root.get = function(k)
|
||||
{
|
||||
return self[k]
|
||||
}
|
||||
self.root.update = function()
|
||||
{
|
||||
self.update()
|
||||
}
|
||||
if(opts.observable)
|
||||
{
|
||||
this.root.observable = opts.observable
|
||||
@ -20,17 +45,24 @@
|
||||
{
|
||||
this.root.observable = riot.observable()
|
||||
this.root.observable.on('menuselect',function(data){
|
||||
if(opts.onmenuselect)
|
||||
//console.log("From root",self.root)
|
||||
if(self.onmenuselect)
|
||||
{
|
||||
opts.onmenuselect(data)
|
||||
self.onmenuselect(data)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
onselect(event)
|
||||
{
|
||||
this.root.observable.trigger('menuselect',event.item)
|
||||
var data = {id:self.rid, data:event.item}
|
||||
/*if(self.onmenuselect)
|
||||
{
|
||||
self.onmenuselect(data)
|
||||
} else*/
|
||||
this.root.observable.trigger('menuselect',data)
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<afx-sys-panel>
|
||||
<div>
|
||||
<afx-menu ref = "aOsmenu" child={osmenu.child} onmenuselect = {osmenu.onmenuselect} class="afx-panel-os-menu"></afx-menu>
|
||||
<afx-menu ref = "aAppmenu" child={appmenu.child} onmenuselect = {appmenu.onmenuselect} class = "afx-panel-os-app"></afx-menu>
|
||||
<afx-menu ref = "aTray" child={systray.child} onmenuselect = {systray.onmenuselect} class = "afx-panel-os-stray"></afx-menu>
|
||||
<afx-menu data-id = "os_menu" ref = "aOsmenu" child={osmenu.child} onmenuselect = {osmenu.onmenuselect} class="afx-panel-os-menu"></afx-menu>
|
||||
<afx-menu data-id = "appmenu" ref = "aAppmenu" child={appmenu.child} onmenuselect = {appmenu.onmenuselect} class = "afx-panel-os-app"></afx-menu>
|
||||
<afx-menu data-id = "sys_tray" ref = "aTray" child={systray.child} onmenuselect = {systray.onmenuselect} class = "afx-panel-os-stray"></afx-menu>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@ -10,6 +10,24 @@
|
||||
this.appmenu = opts.appmenu
|
||||
this.systray = opts.systray
|
||||
var self = this
|
||||
|
||||
self.root.set = function(k,v)
|
||||
{
|
||||
if(k == "*")
|
||||
for(var i in v)
|
||||
self[i] = v[i]
|
||||
else
|
||||
self[k] = v
|
||||
self.update()
|
||||
}
|
||||
self.root.get = function(k)
|
||||
{
|
||||
return self[k]
|
||||
}
|
||||
self.root.update = function()
|
||||
{
|
||||
self.update()
|
||||
}
|
||||
this.on('mount', function() {
|
||||
//console.log(self.refs.aOsmenu.root)
|
||||
$(self.refs.aOsmenu.root).css("z-index",1000000)
|
||||
|
||||
103
src/core/gui/tags/afx-tree-view.js
Normal file
103
src/core/gui/tags/afx-tree-view.js
Normal file
@ -0,0 +1,103 @@
|
||||
<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}>
|
||||
<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>
|
||||
{ name }
|
||||
</div>
|
||||
|
||||
|
||||
<ul if={ isFolder() } show={ isFolder() && open }>
|
||||
<li each={ child, i in nodes }>
|
||||
<afx-tree-view data={child} indent={indent+1} observable = {parent.root.observable} path = {parent.path + ">" + i} treeroot= {parent.treeroot}></afx-tree-view>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
var self = this
|
||||
if(opts.data)
|
||||
{
|
||||
self.name = opts.data.name
|
||||
self.nodes = opts.data.nodes
|
||||
self.icon = opts.data.icon
|
||||
}
|
||||
self.indent = opts.indent || 1
|
||||
self.open = true
|
||||
var istoggle = false
|
||||
if(opts.treeroot)
|
||||
{
|
||||
this.treeroot = opts.treeroot
|
||||
this.treeroot.counter++
|
||||
}
|
||||
else
|
||||
{
|
||||
this.treeroot = self
|
||||
this.treeroot.counter = 0
|
||||
}
|
||||
self.path = opts.path || 0
|
||||
self.selected = false
|
||||
self.selectedItem = null
|
||||
self.index = this.treeroot.counter
|
||||
self.root.set = function(k,v)
|
||||
{
|
||||
if(k == "*")
|
||||
for(var i in v)
|
||||
self[i] = v[i]
|
||||
else
|
||||
self[k] = v
|
||||
self.update()
|
||||
}
|
||||
self.root.update = function()
|
||||
{
|
||||
self.update()
|
||||
}
|
||||
self.root.get = function(k)
|
||||
{
|
||||
return self[k]
|
||||
}
|
||||
|
||||
if(opts.observable)
|
||||
this.root.observable = opts.observable
|
||||
else
|
||||
{
|
||||
this.root.observable = riot.observable()
|
||||
}
|
||||
|
||||
this.on("mount", function(){
|
||||
$(self.refs.namediv).css("padding-left", self.indent*15 + "px" )
|
||||
})
|
||||
|
||||
isFolder() {
|
||||
return self.nodes && self.nodes.length
|
||||
}
|
||||
|
||||
toggle(e) {
|
||||
self.open = !self.open
|
||||
e.preventDefault()
|
||||
istoggle = true
|
||||
}
|
||||
|
||||
select(event)
|
||||
{
|
||||
if(istoggle)
|
||||
{
|
||||
istoggle = false
|
||||
return
|
||||
}
|
||||
var data = {
|
||||
id:$(self.treeroot.root).attr("data-id"),
|
||||
data:event.item,
|
||||
path:self.path
|
||||
}
|
||||
if(opts.ontreeselect)
|
||||
opts.ontreeselect(data)
|
||||
self.treeroot.selectedItem = data
|
||||
this.root.observable.trigger('treeselect',data)
|
||||
event.preventUpdate = true
|
||||
self.treeroot.update()
|
||||
event.preventDefault()
|
||||
}
|
||||
</script>
|
||||
</afx-tree-view>
|
||||
@ -4,6 +4,23 @@
|
||||
</div>
|
||||
<script>
|
||||
var self = this
|
||||
self.root.set = function(k,v)
|
||||
{
|
||||
if(k == "*")
|
||||
for(var i in v)
|
||||
self[i] = v[i]
|
||||
else
|
||||
self[k] = v
|
||||
self.update()
|
||||
}
|
||||
self.root.get = function(k)
|
||||
{
|
||||
return self[k]
|
||||
}
|
||||
self.root.update = function()
|
||||
{
|
||||
self.update()
|
||||
}
|
||||
this.on('mount', function(){
|
||||
$(self.refs.container)
|
||||
.css("display","flex")
|
||||
|
||||
@ -3,16 +3,15 @@ afx-app-window div.afx-window-wrapper{
|
||||
/*box-shadow: 1px 1px 1px #cbcbcb;*/
|
||||
box-shadow: 1px 1px 1px #9f9F9F;
|
||||
border-radius: 5px;
|
||||
background-color:#e7e7e7;
|
||||
background-color:#dfdfdf;
|
||||
padding:0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
afx-app-window{
|
||||
/*width: 600px;
|
||||
height: 400px;*/
|
||||
afx-app-window.unactive > div.afx-window-wrapper{
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
afx-app-window ul.afx-window-top{
|
||||
|
||||
@ -12,7 +12,12 @@ afx-button button{
|
||||
afx-button button[disabled]{
|
||||
color: #a6a6a6;
|
||||
}
|
||||
|
||||
afx-button i.icon-style {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
float:left;
|
||||
}
|
||||
afx-button button:active {
|
||||
background-color: #2786F3;
|
||||
color: white;
|
||||
|
||||
@ -17,8 +17,20 @@ afx-apps-dock afx-button button{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 19px;
|
||||
margin-bottom: 3px;
|
||||
padding:0px;
|
||||
background-color: transparent;
|
||||
border:0;
|
||||
}
|
||||
afx-apps-dock afx-button .icon-style{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-bottom: 0px;
|
||||
border:0;
|
||||
background-color: transparent;
|
||||
|
||||
}
|
||||
|
||||
afx-apps-dock afx-button.selected > button {
|
||||
background-color: #2786F3;
|
||||
color: white;
|
||||
border: 1px solid #dedede;
|
||||
}
|
||||
33
src/core/gui/themes/antos/afx-grid-view.css
Normal file
33
src/core/gui/themes/antos/afx-grid-view.css
Normal file
@ -0,0 +1,33 @@
|
||||
afx-grid-view{
|
||||
overflow: hidden;
|
||||
padding:5px;
|
||||
}
|
||||
afx-grid-view afx-grid-row div{
|
||||
padding:3px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
afx-grid-view afx-grid-row:nth-child(even){
|
||||
background-color: #f5F5F5;
|
||||
}
|
||||
|
||||
afx-grid-view afx-grid-row.grid_row_header div{
|
||||
border-right: 2px solid #e5e5e5;
|
||||
}
|
||||
|
||||
afx-grid-view afx-grid-row i.icon-style {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
float:left;
|
||||
}
|
||||
afx-grid-view afx-grid-row.selected {
|
||||
background-color: #116cd6;
|
||||
color:white;
|
||||
}
|
||||
afx-grid-view afx-grid-row.grid_row_header {
|
||||
font-weight: bold;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-right:0;
|
||||
}
|
||||
104
src/core/gui/themes/antos/afx-list-view.css
Normal file
104
src/core/gui/themes/antos/afx-list-view.css
Normal file
@ -0,0 +1,104 @@
|
||||
afx-list-view{
|
||||
overflow:auto;
|
||||
padding: 5px;
|
||||
}
|
||||
/*
|
||||
afx-list-view div.list-container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
background-color: red;
|
||||
}*/
|
||||
afx-list-view ul{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
afx-list-view li{
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style: none;
|
||||
padding: 5px;
|
||||
padding-top:3px;
|
||||
padding-bottom: 3px;
|
||||
color: #414339;
|
||||
background-color: white;
|
||||
}
|
||||
afx-list-view li:nth-child(odd){
|
||||
background-color: #f5F5F5;
|
||||
}
|
||||
afx-list-view i.icon-style {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
float:left;
|
||||
}
|
||||
|
||||
afx-list-view li > i {
|
||||
margin-right: 3px;
|
||||
}
|
||||
afx-list-view li.selected {
|
||||
background-color: #116cd6;
|
||||
color:white;
|
||||
}
|
||||
|
||||
/*
|
||||
afx-list-view.dropdown div.list-container{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
afx-list-view.dropdown div.list-container ul{
|
||||
position:absolute;
|
||||
top:100%;
|
||||
left:0;
|
||||
display: none;
|
||||
border:1px solid red;
|
||||
}*/
|
||||
|
||||
afx-list-view.dropdown {
|
||||
padding:0;
|
||||
margin: 0;
|
||||
}
|
||||
afx-list-view.dropdown div.list-container ul{
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background-color: white;
|
||||
}
|
||||
afx-list-view.dropdown div.list-container ul{
|
||||
border:1px solid #a6a6a6;
|
||||
box-shadow: 1px 1px 1px #9f9F9F;
|
||||
border-radius: 3px;
|
||||
padding:2px;
|
||||
border-top-left-radius: 0px;
|
||||
}
|
||||
afx-list-view.dropdown div.list-container ul li{
|
||||
display: inline-block;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
afx-list-view.dropdown div.list-container div{
|
||||
padding:3px;
|
||||
border:1px solid #a6a6a6;
|
||||
border-radius: 3px;
|
||||
padding-right:15px;
|
||||
background-color: white;
|
||||
height: 17px;
|
||||
}
|
||||
afx-list-view.dropdown div.list-container div:before {
|
||||
content: "\f107";
|
||||
font-family: "FontAwesome";
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
color: #414339;
|
||||
position: absolute;
|
||||
top:25%;
|
||||
right: 5px;
|
||||
}
|
||||
afx-list-view.dropdown div.list-container ul li:hover{
|
||||
background-color: #dcdcdc;
|
||||
color: #414339;
|
||||
}
|
||||
|
||||
@ -6,8 +6,6 @@ afx-menu {
|
||||
}
|
||||
afx-menu a{
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #414339;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
@ -17,6 +15,14 @@ afx-menu ul{
|
||||
padding:0;
|
||||
margin: 0;
|
||||
}
|
||||
afx-menu i.icon-style {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
float:left;
|
||||
}
|
||||
|
||||
|
||||
afx-menu afx-menu ul {
|
||||
padding: 0;
|
||||
border:1px solid #a6a6a6;
|
||||
@ -35,6 +41,18 @@ afx-menu ul > li{
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
afx-menu ul > li.fix_padding{
|
||||
padding-top:1px;
|
||||
padding-bottom: 0;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
afx-menu afx-menu ul > li.fix_padding{
|
||||
padding:3px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
afx-menu afx-menu {
|
||||
top:100%;
|
||||
left:0;
|
||||
@ -46,7 +64,7 @@ afx-menu afx-menu i{
|
||||
}
|
||||
afx-menu afx-menu li{
|
||||
float:none;
|
||||
width: 150px;
|
||||
min-width: 150px;
|
||||
}
|
||||
afx-menu afx-menu afx-menu{
|
||||
top:-4px;
|
||||
@ -74,11 +92,11 @@ afx-menu li.afx-corner-fix:hover{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
afx-menu afx-menu .afx-submenu:before {
|
||||
afx-menu afx-menu .afx_submenu:before {
|
||||
content: "\f054";
|
||||
font-family: "FontAwesome";
|
||||
font-size: 10px;
|
||||
left:93%;
|
||||
right:5px;
|
||||
color: #414339;
|
||||
position:absolute;
|
||||
top:25%;
|
||||
|
||||
@ -1,4 +1,8 @@
|
||||
|
||||
afx-sys-panel{
|
||||
padding:0;
|
||||
margin: 0;
|
||||
}
|
||||
afx-sys-panel div{
|
||||
width: 100%;
|
||||
height: 23px;
|
||||
@ -7,13 +11,18 @@ afx-sys-panel div{
|
||||
background-color: #e7e7e7;
|
||||
border-bottom: 1px solid #9c9C9C;
|
||||
box-shadow: 1px 1px 1px #9F9F9F;
|
||||
position:absolute;
|
||||
}
|
||||
afx-sys-panel .afx-panel-os-menu{
|
||||
padding:0;
|
||||
margin: 0;
|
||||
float:left;
|
||||
}
|
||||
|
||||
afx-sys-panel .afx-panel-os-stray{
|
||||
float:right;
|
||||
}
|
||||
|
||||
afx-sys-panel .afx-panel-os-stray afx-menu afx-menu{
|
||||
top:-4px;
|
||||
left: -100%;
|
||||
right:0;
|
||||
}
|
||||
59
src/core/gui/themes/antos/afx-tree-view.css
Normal file
59
src/core/gui/themes/antos/afx-tree-view.css
Normal file
@ -0,0 +1,59 @@
|
||||
afx-tree-view{
|
||||
color: #414339;
|
||||
padding:3px;
|
||||
overflow: auto;
|
||||
}
|
||||
afx-tree-view afx-tree-view{
|
||||
padding:0;
|
||||
overflow: hidden;
|
||||
}
|
||||
afx-tree-view ul{
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
afx-tree-view li{
|
||||
list-style: none;
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
afx-tree-view div{
|
||||
padding:3px;
|
||||
background-color: white;
|
||||
}
|
||||
afx-tree-view i.icon-style {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
float:left;
|
||||
margin-right: 3px;
|
||||
}
|
||||
afx-tree-view div.afx_tree_item_selected{
|
||||
background-color: #116cd6;
|
||||
color:white;
|
||||
}
|
||||
afx-tree-view div.afx_tree_item_selected:hover{
|
||||
background-color: #116cd6;
|
||||
color:white;
|
||||
}
|
||||
/*
|
||||
afx-tree-view div:hover{
|
||||
background-color: #f5F5F5;
|
||||
color: #414339;
|
||||
}*/
|
||||
afx-tree-view .afx_folder_item{
|
||||
font-weight: bold;
|
||||
}
|
||||
afx-tree-view .afx-tree-view-folder-open:before{
|
||||
content: "\f147";
|
||||
font-family: "FontAwesome";
|
||||
font-size: 13px;
|
||||
}
|
||||
afx-tree-view .afx-tree-view-folder-close:before{
|
||||
content: "\f196";
|
||||
font-family: "FontAwesome";
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
afx-tree-view .afx_tree_item_odd{
|
||||
background-color: #f5F5F5;
|
||||
}
|
||||
35
src/core/processes.coffee
Normal file
35
src/core/processes.coffee
Normal file
@ -0,0 +1,35 @@
|
||||
self.OS.PM =
|
||||
pidalloc:0
|
||||
processes: new Object
|
||||
createProcess: (app,cls) ->
|
||||
#if it is single ton
|
||||
# and a process is existing
|
||||
# just return it
|
||||
if cls.singleton and _PM.processes[app] and _PM.processes[app].length == 1
|
||||
_PM.processes[app][0].show()
|
||||
return _PM.processes[app][0]
|
||||
else
|
||||
_PM.processes[app] = [] if not _PM.processes[app]
|
||||
obj = new cls
|
||||
obj.birth = (new Date).getTime()
|
||||
_PM.pidalloc++
|
||||
obj.pid = _PM.pidalloc
|
||||
_PM.processes[app].push obj
|
||||
_GUI.dock obj,cls.meta
|
||||
appByPid:(pid)->
|
||||
app = undefined
|
||||
find = (l) ->
|
||||
return a for a in l when a.pid is pid
|
||||
for k,v of _PM.processes
|
||||
app = find v
|
||||
break if app
|
||||
app
|
||||
|
||||
kill: (app) ->
|
||||
return if not _PM.processes[app.name]
|
||||
|
||||
i = _PM.processes[app.name].indexOf app
|
||||
if i >= 0
|
||||
_GUI.undock _PM.processes[app.name][i]
|
||||
delete _PM.processes[app.name][i]
|
||||
_PM.processes[app.name].splice i,1
|
||||
@ -4,11 +4,15 @@ self.OS or=
|
||||
API: new Object()
|
||||
GUI: new Object()
|
||||
APP: new Object()
|
||||
register: (name,x)-> self.OS.APP[name] = x
|
||||
PM: new Object()
|
||||
register: (name,x)->
|
||||
# load the metadata first
|
||||
_APP[name] = x
|
||||
|
||||
boot: ->
|
||||
#first load the configuration
|
||||
#then load the theme
|
||||
_GUI = self.OS.GUI
|
||||
_GUI.loadTheme "antos"
|
||||
_GUI.initDM()
|
||||
_GUI.loadScheme "resources/schemes/test.html",null
|
||||
#_GUI.loadScheme "resources/schemes/test.html",null
|
||||
@ -10,6 +10,8 @@
|
||||
<script src="resources/antos_tags.js" type="riot/tag"></script>
|
||||
<script src="scripts/riot.compiler.min.js"> </script>
|
||||
<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/antos.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
33
src/packages/ActivityMonitor/Makefile
Normal file
33
src/packages/ActivityMonitor/Makefile
Normal file
@ -0,0 +1,33 @@
|
||||
coffee_files = main.coffee
|
||||
|
||||
jsfiles =
|
||||
|
||||
cssfiles = main.css
|
||||
|
||||
copyfiles = scheme.html package.json
|
||||
|
||||
|
||||
BLUE=\033[1;34m
|
||||
NC=\033[0m
|
||||
|
||||
main: title clean js css copy
|
||||
|
||||
title:
|
||||
@echo "$(BLUE)======= Package ActivityMonitor =======$(NC)"
|
||||
|
||||
coffee:
|
||||
- mkdir build
|
||||
for f in $(coffee_files); do (coffee -cs < $$f >build/"$$f.js");done
|
||||
for f in build/*.coffee.js; do (cat "$${f}"; echo) >> build/main.js; done
|
||||
- rm build/*.coffee.js
|
||||
|
||||
js: coffee
|
||||
for f in $(jsfiles); do (cat "$${f}"; echo) >> build/main.js; done
|
||||
|
||||
css:
|
||||
for f in $(cssfiles); do (cat "$${f}"; echo) >> build/main.css; done
|
||||
|
||||
copy:
|
||||
cp -rf $(copyfiles) build/
|
||||
clean:
|
||||
- rm -rf build/*
|
||||
56
src/packages/ActivityMonitor/main.coffee
Normal file
56
src/packages/ActivityMonitor/main.coffee
Normal file
@ -0,0 +1,56 @@
|
||||
_PM = this.OS.PM
|
||||
_APP = this.OS.APP
|
||||
class ActivityMonitor extends this.OS.GUI.BaseApplication
|
||||
constructor: () ->
|
||||
super "ActivityMonitor"
|
||||
main: () ->
|
||||
me = @
|
||||
@scheme.set "apptitle", "Activity Monitor"
|
||||
@grid = @find "mygrid"
|
||||
@on "btclick", (e)->
|
||||
return unless e.id == "btkill"
|
||||
item = me.grid.get "selected"
|
||||
return unless item
|
||||
app = _PM.appByPid item[0].value
|
||||
app.quit() if app
|
||||
|
||||
header = [{width:50,value:"Pid"},{value:"Name"},{width:100,value:"Alive (ms)"}]
|
||||
@gdata =
|
||||
processes:{}
|
||||
alive:[]
|
||||
@grid.set "header",header
|
||||
@monitor()
|
||||
|
||||
monitor: () ->
|
||||
me = @
|
||||
#get all current running process
|
||||
me.gdata.alive = []
|
||||
now = (new Date).getTime()
|
||||
$.each _PM.processes, (i,d)->
|
||||
$.each d , (j,a)->
|
||||
if me.gdata.processes[a.pid] #update it
|
||||
me.gdata.processes[a.pid][2].value = now - a.birth
|
||||
else #add it
|
||||
me.gdata.processes[a.pid] = [
|
||||
{value:a.pid},
|
||||
{icon:_APP[a.name].meta.icon,iconclass:_APP[a.name].meta.iconclass,value:a.name},
|
||||
{value: now - a.birth}
|
||||
]
|
||||
me.gdata.alive.push a.pid
|
||||
@refreshGrid()
|
||||
@timer = setTimeout (()-> me.monitor()),500#one second
|
||||
|
||||
refreshGrid: ()->
|
||||
activeList = []
|
||||
me = @
|
||||
$.each @gdata.processes, (i,e) ->
|
||||
if ($.inArray (Number i),me.gdata.alive) >= 0
|
||||
activeList.push e
|
||||
else
|
||||
me.gdata.processes[i] = undefined
|
||||
@grid.set "rows",activeList
|
||||
exit: (e) ->
|
||||
clearTimeout @timer if @timer
|
||||
|
||||
ActivityMonitor.singleton = true
|
||||
this.OS.register "ActivityMonitor",ActivityMonitor
|
||||
8
src/packages/ActivityMonitor/main.css
Normal file
8
src/packages/ActivityMonitor/main.css
Normal file
@ -0,0 +1,8 @@
|
||||
afx-app-window[data-id="am-window"] afx-button{
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
afx-app-window[data-id="am-window"] afx-grid-view{
|
||||
padding-left:10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
12
src/packages/ActivityMonitor/package.json
Normal file
12
src/packages/ActivityMonitor/package.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"app":"ActivityMonitor",
|
||||
"name":"Activity monitor",
|
||||
"description":"Processes monitor and manager",
|
||||
"author":{
|
||||
"name": "Xuan Sang LE",
|
||||
"email": "xsang.le@gmail.com"
|
||||
},
|
||||
"category":"System",
|
||||
"iconclass":"fa fa-heartbeat",
|
||||
"mimes":["*"]
|
||||
}
|
||||
7
src/packages/ActivityMonitor/scheme.html
Normal file
7
src/packages/ActivityMonitor/scheme.html
Normal file
@ -0,0 +1,7 @@
|
||||
<afx-app-window data-id = "am-window" apptitle="" width="400" height="300">
|
||||
<afx-vbox>
|
||||
<afx-hbox>
|
||||
<afx-grid-view data-id = "mygrid"></afx-grid-view>
|
||||
<afx-button data-height="30" data-id = "btkill" text = "Kill process" iconclass="fa fa-times"></afx-button>
|
||||
</afx-hbox>
|
||||
</afx-app-window>
|
||||
@ -7,27 +7,27 @@ cssfiles = main.css
|
||||
copyfiles = scheme.html package.json
|
||||
|
||||
|
||||
BLUE=\033[0;34m
|
||||
BLUE=\033[1;34m
|
||||
NC=\033[0m
|
||||
|
||||
main: title clean js css copy
|
||||
|
||||
title:
|
||||
- echo "$(BLUE)======= Package NotePad =======$(NC)"
|
||||
@echo "$(BLUE)======= Package NotePad =======$(NC)"
|
||||
|
||||
coffee:
|
||||
- mkdir build
|
||||
- for f in $(coffee_files); do (coffee -cs < $$f >build/"$$f.js");done
|
||||
- for f in build/*.coffee.js; do (cat "$${f}"; echo) >> build/main.js; done
|
||||
for f in $(coffee_files); do (coffee -cs < $$f >build/"$$f.js");done
|
||||
for f in build/*.coffee.js; do (cat "$${f}"; echo) >> build/main.js; done
|
||||
- rm build/*.coffee.js
|
||||
|
||||
js: coffee
|
||||
- for f in $(jsfiles); do (cat "$${f}"; echo) >> build/main.js; done
|
||||
for f in $(jsfiles); do (cat "$${f}"; echo) >> build/main.js; done
|
||||
|
||||
css:
|
||||
- for f in $(cssfiles); do (cat "$${f}"; echo) >> build/main.css; done
|
||||
for f in $(cssfiles); do (cat "$${f}"; echo) >> build/main.css; done
|
||||
|
||||
copy:
|
||||
- cp -rf $(copyfiles) build/
|
||||
cp -rf $(copyfiles) build/
|
||||
clean:
|
||||
- rm -rf build/*
|
||||
@ -1,10 +1,53 @@
|
||||
class NotePad extends this.OS.GUI.BaseApplication
|
||||
constructor: () ->
|
||||
super "NotePad"
|
||||
event: () ->
|
||||
console.log @scheme
|
||||
@on "btclick", (e)->
|
||||
alert "Happy pola"
|
||||
@on "resize", (w,h)->
|
||||
console.log "resize"
|
||||
main: () ->
|
||||
me = @
|
||||
@scheme.set "apptitle", "NotePad"
|
||||
|
||||
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,
|
||||
enableLiveAutocompletion: true,
|
||||
fontSize: "10pt"
|
||||
}
|
||||
@.editor.completers.push {getCompletions:(editor, session, pos, prefix, callback)->}
|
||||
@.editor.getSession().setUseWrapMode true
|
||||
|
||||
list = @find "modelist"
|
||||
@modes = ace.require "ace/ext/modelist"
|
||||
ldata = []
|
||||
ldata.push {text:m.name, mode:m.mode} for m in @modes.modes
|
||||
list.set "items",ldata
|
||||
list.set "onlistselect", (e)->
|
||||
me.editor.session.setMode e.data.mode
|
||||
|
||||
stat = @find "editorstat"
|
||||
#status
|
||||
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 "focus", ()->me.editor.focus()
|
||||
|
||||
menu: ()->
|
||||
menu = [{
|
||||
text:"File",
|
||||
child:[
|
||||
{text:"Open", dataid:"#{@name}-Open"},
|
||||
{text:"Close", dataid:"#{@name}-Close"}
|
||||
]
|
||||
}]
|
||||
menu
|
||||
NotePad.singleton = false
|
||||
this.OS.register "NotePad",NotePad
|
||||
@ -1,3 +1,9 @@
|
||||
fut{
|
||||
background-color: black
|
||||
|
||||
afx-app-window[data-id="notepad"] afx-list-view[data-id="modelist"]{
|
||||
margin:2px;
|
||||
}
|
||||
|
||||
afx-app-window[data-id="notepad"] span[data-id="editorstat"]{
|
||||
padding:5px;
|
||||
display: inline-block;
|
||||
}
|
||||
@ -7,6 +7,6 @@
|
||||
"email": "xsang.le@gmail.com"
|
||||
},
|
||||
"category":"System",
|
||||
"icon":"",
|
||||
"iconclass":"fa fa-pencil-square-o",
|
||||
"mimes":["*"]
|
||||
}
|
||||
@ -1,16 +1,24 @@
|
||||
<afx-app-window apptitle="Preview" width="600" height="400">
|
||||
<afx-vbox>
|
||||
|
||||
<afx-list-view data-width = "250"> </afx-list-view>
|
||||
|
||||
<afx-app-window apptitle="" width="600" height="400" data-id="notepad">
|
||||
<afx-hbox>
|
||||
<afx-button data-height="50" onbtclick="alert('im clicked')" text="Read more" icon="fa fa-camera-retro fa-lg" id="button">
|
||||
|
||||
<!--afx-list-view data-id = "flist" data-width = "150" > </afx-list-view>
|
||||
<afx-hbox>
|
||||
<afx-button data-height="50" text="Read more" iconclass="fa fa-camera-retro fa-lg" id="button">
|
||||
</afx-button>
|
||||
<div 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
|
||||
<div>
|
||||
big text here
|
||||
</div>
|
||||
<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
|
||||
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>
|
||||
<div data-width="100">Test</div>
|
||||
</afx-hbox>
|
||||
|
||||
</afx-hbox-->
|
||||
<div data-id="datarea"></div>
|
||||
<afx-vbox data-height="30">
|
||||
<div ><span data-id = "editorstat"></span></div>
|
||||
<afx-list-view data-width="170" data-id = "modelist" dropdown = "true" width="150"></afx-list-view>
|
||||
|
||||
</afx-vbox>
|
||||
</afx-hbox>
|
||||
</afx-app-window>
|
||||
33
src/packages/Terminal/Makefile
Normal file
33
src/packages/Terminal/Makefile
Normal file
@ -0,0 +1,33 @@
|
||||
coffee_files = main.coffee
|
||||
|
||||
jsfiles =
|
||||
|
||||
cssfiles = main.css
|
||||
|
||||
copyfiles = scheme.html package.json
|
||||
|
||||
|
||||
BLUE=\033[1;34m
|
||||
NC=\033[0m
|
||||
|
||||
main: title clean js css copy
|
||||
|
||||
title:
|
||||
@echo "$(BLUE)======= Package Terminal =======$(NC)"
|
||||
|
||||
coffee:
|
||||
- mkdir build
|
||||
for f in $(coffee_files); do (coffee -cs < $$f >build/"$$f.js");done
|
||||
for f in build/*.coffee.js; do (cat "$${f}"; echo) >> build/main.js; done
|
||||
- rm build/*.coffee.js
|
||||
|
||||
js: coffee
|
||||
for f in $(jsfiles); do (cat "$${f}"; echo) >> build/main.js; done
|
||||
|
||||
css:
|
||||
for f in $(cssfiles); do (cat "$${f}"; echo) >> build/main.css; done
|
||||
|
||||
copy:
|
||||
cp -rf $(copyfiles) build/
|
||||
clean:
|
||||
- rm -rf build/*
|
||||
80
src/packages/Terminal/main.coffee
Normal file
80
src/packages/Terminal/main.coffee
Normal file
@ -0,0 +1,80 @@
|
||||
class Terminal extends this.OS.GUI.BaseApplication
|
||||
constructor: () ->
|
||||
super "Terminal"
|
||||
main: () ->
|
||||
self = @
|
||||
@on "btclick", (e)->
|
||||
alert "#{self.name}: Happy pola"
|
||||
@on "resize", (w,h)->
|
||||
console.log "#{self.name}: resize"
|
||||
#@on "listselect", (i)->
|
||||
# console.log self.name, i
|
||||
@on "treeselect", (i) ->
|
||||
console.log self.name,i
|
||||
@on "focus", ()->
|
||||
console.log self.name, "is focused"
|
||||
tree = @find "mytree"
|
||||
|
||||
@scheme.set "apptitle", "Terminal"
|
||||
tdata = {
|
||||
name: 'My Tree',
|
||||
nodes: [
|
||||
{ name: 'hello', icon:'packages/NotePad/icon.png'},
|
||||
{ name: 'wat' },
|
||||
{
|
||||
name: 'child folder',
|
||||
nodes: [
|
||||
{
|
||||
name: 'child folder',
|
||||
nodes: [
|
||||
{ name: 'hello' },
|
||||
{ name: 'wat' }
|
||||
]
|
||||
},
|
||||
{ name: 'hello' },
|
||||
{ name: 'wat' },
|
||||
{
|
||||
name: 'child folder',
|
||||
nodes: [
|
||||
{ name: 'hello' },
|
||||
{ name: 'wat' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
tree.set "*",tdata
|
||||
|
||||
list = @find "mylist"
|
||||
ldata = [
|
||||
{text:"some thing with avery long text"},
|
||||
{text:"some thing"},
|
||||
{text:"some thing"},
|
||||
{text:"some thing"},
|
||||
{text:"some thing"},
|
||||
{text:"some thing"},
|
||||
{text:"some thing"},
|
||||
{text:"some thing"},
|
||||
{text:"some thing"},
|
||||
{text:"some thing"},
|
||||
{text:"some thing"},
|
||||
{text:"some thing"},
|
||||
{text:"some thing"},
|
||||
{text:"some thing"},
|
||||
{text:"some thing"},
|
||||
{text:"some thing"},
|
||||
{text:"some thing"},
|
||||
{text:"some thing"},
|
||||
{text:"some thing"},
|
||||
{text:"some thing"},
|
||||
{text:"some thing"},
|
||||
{text:"some thing"},
|
||||
{text:"some thing"}
|
||||
]
|
||||
list.set "items",ldata
|
||||
list.set "onlistselect", (e)->
|
||||
console.log e
|
||||
|
||||
Terminal.singleton = false
|
||||
this.OS.register "Terminal",Terminal
|
||||
0
src/packages/Terminal/main.css
Normal file
0
src/packages/Terminal/main.css
Normal file
12
src/packages/Terminal/package.json
Normal file
12
src/packages/Terminal/package.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"app":"Terminal",
|
||||
"name":"Unix terminal like",
|
||||
"description":"Access Unix terminal from web",
|
||||
"author":{
|
||||
"name": "Xuan Sang LE",
|
||||
"email": "xsang.le@gmail.com"
|
||||
},
|
||||
"category":"System",
|
||||
"iconclass":"fa fa-terminal",
|
||||
"mimes":["*"]
|
||||
}
|
||||
@ -1,16 +1,14 @@
|
||||
<afx-app-window apptitle="Preview" width="600" height="400">
|
||||
<afx-vbox>
|
||||
|
||||
<afx-list-view data-width = "250"> </afx-list-view>
|
||||
|
||||
<afx-tree-view data-id="mytree"> </afx-tree-view>
|
||||
<afx-hbox>
|
||||
<afx-button data-height="50" onbtclick="alert('im clicked')" text="Read more" icon="fa fa-camera-retro fa-lg" id="button">
|
||||
<afx-button data-height="50" text="Read more" iconclass="fa fa-camera-retro fa-lg" id="button">
|
||||
</afx-button>
|
||||
<div 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"></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
|
||||
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>
|
||||
<div data-width="100">Test</div>
|
||||
</afx-hbox>
|
||||
</afx-vbox>
|
||||
</afx-app-window>
|
||||
Loading…
Reference in New Issue
Block a user