add calendar view & stuff

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

View File

@ -14,33 +14,7 @@ coffees= src/core/core.coffee\
src/core/BaseEvent.coffee\ src/core/BaseEvent.coffee\
src/antos.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)" @echo "=======$(BLUE)Building tag files=======$(NC)"
-mkdir $(BUILDDIR)/resources -mkdir $(BUILDDIR)/resources
-rm $(BUILDDIR)/resources/antos_tags.js -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 build_themes: antos_themes_build
@ -85,7 +59,7 @@ antos_themes_build:
@echo "=======$(BLUE)Building themes name: antos=======$(NC)" @echo "=======$(BLUE)Building themes name: antos=======$(NC)"
-rm -rf $(BUILDDIR)/resources/themes/antos/* -rm -rf $(BUILDDIR)/resources/themes/antos/*
-mkdir -p $(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 -mkdir -p $(BUILDDIR)/resources/themes/antos/fonts
cp -rf src/themes/antos/fonts/* $(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/ cp src/themes/antos/wallpaper.jpg $(BUILDDIR)/resources/themes/antos/

View File

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

View File

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

View File

@ -1,5 +1,6 @@
<afx-dummy> <afx-dummy>
<afx-overlay data-id = "notifyzone" width = "250"> <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> <afx-list-view data-id="notifylist"></afx-list-view>
<style> <style>
afx-overlay[data-id = "notifyzone"]{ afx-overlay[data-id = "notifyzone"]{
@ -10,6 +11,13 @@
padding:3px; padding:3px;
margin: 0; 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"] afx-list-view[data-id = "notifylist"]
{ {
padding:0; padding:0;
@ -21,7 +29,7 @@
} }
</style> </style>
</afx-overlay> </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--> <!--afx-button text = "click me"></afx-button-->
<style> <style>
afx-feed[data-id = "notifeed"]{ afx-feed[data-id = "notifeed"]{

View File

@ -9,7 +9,7 @@
this.icon = opts.icon this.icon = opts.icon
this.iconclass = opts.iconclass this.iconclass = opts.iconclass
var self = this var self = this
this.onbtclick = opts.onbtclick
self.root.set = function(k,v) self.root.set = function(k,v)
{ {
if(k == "*") if(k == "*")
@ -25,10 +25,10 @@
} }
this._onbtclick = function(e) 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) if(self.root.observable)
{ {
self.root.observable.trigger("btclick",{id:$(self.root).attr("data-id"),data:self.root}) self.root.observable.trigger("btclick",{id:$(self.root).attr("data-id"),data:self.root})

View File

@ -1,5 +1,5 @@
<afx-feed> <afx-feed>
<div> <div each = {items}>
<p> <p>
<i if={iconclass} class = {iconclass} ></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> <i if={icon} class="icon-style" style = { "background: url("+icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i>
@ -13,11 +13,7 @@
</div> </div>
<script> <script>
var self = this 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) self.root.set = function(k,v)
{ {
if(k == "*") if(k == "*")
@ -27,6 +23,24 @@
self[k] = v self[k] = v
self.update() 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) self.root.get = function(k)
{ {
return self[k] return self[k]

View File

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

View File

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

View File

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

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-vbox>
<afx-tree-view data-id="mytree"> </afx-tree-view> <afx-tree-view data-id="mytree"> </afx-tree-view>
<afx-hbox> <afx-hbox>
<afx-button data-height="50" text="Read more" iconclass="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> </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-hbox>
</afx-vbox> </afx-vbox>
</afx-app-window> </afx-app-window>

View File

@ -8,8 +8,6 @@ class NotePad extends this.OS.GUI.BaseApplication
div = @find "datarea" div = @find "datarea"
ace.require "ace/ext/language_tools" ace.require "ace/ext/language_tools"
@.editor = ace.edit div @.editor = ace.edit div
@.editor.setTheme "ace/theme/monokai"
@.editor.getSession().setMode 'ace/mode/text'
@.editor.setOptions { @.editor.setOptions {
enableBasicAutocompletion: true, enableBasicAutocompletion: true,
enableSnippets: true, enableSnippets: true,
@ -22,22 +20,39 @@ class NotePad extends this.OS.GUI.BaseApplication
list = @find "modelist" list = @find "modelist"
@modes = ace.require "ace/ext/modelist" @modes = ace.require "ace/ext/modelist"
ldata = [] 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 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" stat = @find "editorstat"
#status #status
stup = (e)-> stup = (e) ->
c = me.editor.session.selection.getCursor() c = me.editor.session.selection.getCursor()
l = me.editor.session.getLength() l = me.editor.session.getLength()
$(stat).html "Row #{c.row}, col #{c.column}, lines: #{l}" $(stat).html "Row #{c.row}, col #{c.column}, lines: #{l}"
stup(0) stup(0)
@.editor.getSession().selection.on "changeCursor", (e)->stup(e) @.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: ()->
menu = [{ menu = [{

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: 2px;
margin-right: 5px; 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; z-index: 10;
} }

View File

@ -17,6 +17,7 @@
<div data-id="datarea"></div> <div data-id="datarea"></div>
<afx-vbox data-height="30" data-id="bottom-vbox"> <afx-vbox data-height="30" data-id="bottom-vbox">
<div ><span data-id = "editorstat"></span></div> <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-list-view data-width="170" data-id = "modelist" dropdown = "true" width="150"></afx-list-view>
</afx-vbox> </afx-vbox>

View File

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

View File

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