dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2024-11-08 05:58:22 +01:00
Code Issues 1 Actions Projects Releases Wiki Activity

add calendar view & stuff

Browse Source
This commit is contained in:
Xuan Sang LE 2017-08-17 00:42:05 +02:00
parent 1a054dbc9c
commit c4fe3ba415
15 changed files with 143 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
Makefile
View File

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

2
src/core/BaseApplication.coffee
View File

@ -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 =
[{

7
src/core/BaseModel.coffee
View File

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

10
src/core/schemes/notifications.html
View File

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

10
src/core/tags/afx-button.js
View File

@ -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')
eval(opts.onbtclick())
else if(opts.onbtclick)
opts.onbtclick()
if(typeof self.onbtclick == 'string')
eval(self.onbtclick)
else if(self.onbtclick)
self.onbtclick(e)
if(self.root.observable)
{
self.root.observable.trigger("btclick",{id:$(self.root).attr("data-id"),data:self.root})

26
src/core/tags/afx-feed.js
View File

@ -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
this.iconclass = opts.iconclass
this.closable = opts.closable
this.header = opts.header||""
this.text = opts.text || ""
self.items = opts.items || []
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]

18
src/core/tags/afx-grid-view.js
View File

@ -6,14 +6,10 @@
</div>
</div>
<script>
this.rows= []
if(opts.data)
{
this.header = opts.data.header
this.rows = opts.data.data
}
this.header = opts.header
this.rows = opts.rows || []
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()
})

69
src/core/tags/afx-list-view.js
View File

@ -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}>
<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 }
<i if = {closable} class = "closable" click = {parent._remove}></i>
<li each={item,i in items } class={selected: parent._autoselect(item,i)} onclick = {parent._select}>
<i if={item.iconclass} class = {item.iconclass} ></i>
<i if={item.icon} class="icon-style" style = { "background: url("+item.icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i>
{ item.text }
<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 = {
id:$(self.root).attr("data-id"),
data:event.item,
idx:self.items.indexOf(event.item)}
if(onclose)
{
onclose = false
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>

1
src/index.html
View File

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

10
src/packages/DummyApp/scheme.html
View File

@ -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>
<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>
<afx-calendar-view></afx-calendar-view>
<afx-list-view data-id = "mylist" dropdown = "true" width="200" data-height = "50"></afx-list-view>
</afx-hbox>
</afx-vbox>
</afx-app-window>

31
src/packages/NotePad/main.coffee
View File

@ -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
list.set "items",ldata
list.set "onlistselect", (e)->
ldata.push {
text: m.name,
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 "focus", ()->me.editor.focus()
@on "resize", () -> me.editor.resize()
@on "focus", () -> me.editor.focus()
menu: ()->
menu = [{

4
src/packages/NotePad/main.css
View File

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

1
src/packages/NotePad/scheme.html
View File

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

18
src/services/PushNotification.coffee
View File

@ -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()
clearTimeout timer
mfeed.remove d, true
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
($ me.scheme).hide()
if not ($ e.target).closest($ me.nzone).length and not ($ e.target).closest($ me.holder.root).length
($ me.nzone).hide()
$(document).unbind "click", me.cb
me.view = not me.view
if @view

1
src/themes/antos/afx-grid-view.css
View File

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