dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2024-07-01 11:09:49 +02:00
Code Issues Projects Releases Wiki Activity

add more tagesr

Browse Source
This commit is contained in:
lxsang 2020-02-28 18:35:20 +01:00
parent 2a990491d9
commit 0de9f88dcf
12 changed files with 303 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@ -30,6 +30,8 @@ coffees= src/core/core.coffee \
src/core/tags/TileLayoutTags.coffee \
src/core/tags/ResizerTag.coffee \
src/core/tags/LabelTag.coffee \
src/core/tags/ButtonTag.coffee \
src/core/tags/ListViewTag.coffee \
src/antos.coffee

5
src/core/gui.coffee
View File

@ -20,6 +20,7 @@ Ant.OS.GUI =
subwindows: new Object()
dialog: undefined
fullscreen: false
workspace: "#desktop"
shortcut:
ALT: {}
CTRL: {}
@ -331,7 +332,7 @@ Ant.OS.GUI =
Ant.OS.GUI.showTooltip el, ($(el).attr "tooltip"), e
# desktop default file manager
desktop = $ "#desktop"
desktop = $ Ant.OS.GUI.workspace
fp = Ant.OS.setting.desktop.path.asFileHandle()
desktop[0].fetch = () ->
fn = () ->
@ -413,7 +414,7 @@ Ant.OS.GUI =
alert __("System fail: Cannot init desktop manager")
console.log s, e
refreshDesktop: () ->
($ "#desktop")[0].fetch()
($ Ant.OS.GUI.workspace)[0].fetch()
refreshSystemMenu: () ->
Ant.OS.GUI.SYS_MENU[0].child.length = 1

48
src/core/tags/ButtonTag.coffee
View File

@ -6,13 +6,55 @@ class ButtonTag extends Ant.OS.GUI.BaseTag
@setopt "iconclass", undefined
@setopt "text", ""
@setopt "enable", true
@setopt "selected", false
@setopt "toggle", false
@setopt "onbtclick", () ->
on_color_changed: (v) ->
console.log @refs
@refs.label.set "color", v
on_icon_changed: (v) ->
@refs.label.set "icon", v
on_iconclass_changed: (v) ->
@refs.label.set "iconclass", v
on_text_changed: (v) ->
@refs.label.set "text", v
on_enable_changed: (v) ->
$(@refs.button).prop "disabled", !(@get "enable")
on_selected_changed: (v) ->
$(@button).removeClass()
$(@button).addClass "selected" if v
mount: () ->
me = @
@root.trigger = () ->
($me.refs.button).trigger "click"
$(@refs.button).click (e) ->
me.btclickhd e
btclickhd: (e) ->
hd = @get "onbtclick"
if typeof hd is "string"
eval hd
else if hd
hd e
@observable.trigger "btclick", { id: @aid(), data: @root }
if @toggle
@set "selected", !@get "selected"
layout: () ->
{
[{
el: "Button", ref: "button", children: [
{ el: "afx-label", ref: "label" }
]
}
}]
Ant.OS.GUI.define "afx-button", ButtonTag

13
src/core/tags/LabelTag.coffee
View File

@ -4,8 +4,12 @@ class LabelTag extends Ant.OS.GUI.BaseTag
@setopt "color", undefined
@setopt "icon", undefined
@setopt "iconclass", undefined
@refs.text = document.createTextNode ""
$(@refs.container).append @refs.text
@setopt "text", ""
mount: () ->
on_color_changed: (v) ->
return unless v
$(@refs.container).css "color", v
@ -32,16 +36,15 @@ class LabelTag extends Ant.OS.GUI.BaseTag
on_text_changed: (v) ->
$(@refs.text).text v.__() if v
@refs.text.nodeValue = v.__() if v
layout: () ->
{
[{
el: "span", ref: "container", children: [
{ el: "i", ref: "iclass" },
{ el: "i", ref: "i", class: "icon-style" },
{ el: "i", ref: "text" }
{ el: "i", ref: "i", class: "icon-style" }
]
}
}]
Ant.OS.GUI.define "afx-label", LabelTag

194
src/core/tags/ListViewTag.coffee Normal file
View File

@ -0,0 +1,194 @@
class ListViewItemTag extends Ant.OS.GUI.BaseTag
constructor: (r, o) ->
super r, o
me = @
@setopt "data", {}
@setopt "oncontextmenu", (e) ->
@setopt "onclick", (e) ->
@setopt "onselect", (e) ->
@setopt "ondbclick", (e) ->
@setopt "onclose", (e) ->
@setopt "index", 0
@setopt "closable", false
@setopt "selected", false
class ListItemSimpleTag extends ListViewItemTag
constructor: (r, o) ->
super r, o
mount: () ->
me = @
@refs.item.oncontextmenu = (e) ->
me.get("oncontextmenu")(e)
$(@refs.item).click (e) ->
e.item = me.root
me.get("onclick")(e)
$(@refs.item).dblclick (e) ->
e.item = me.root
me.get("ondbclick")(e)
$(@refs.btcl).click (e) ->
e.item = me.root
me.get("onclose")(e)
on_closable_changed: (v) ->
if v then $(@refs.btcl).show() else $(@refs.btcl).hide()
on_selected_changed: (v) ->
$(@refs.item).removeClass()
return unless v
$(@refs.item).addClass "selected"
@get("onselect")({ item: @root })
on_data_changed: (v) ->
return unless v
@refs.label.set "class", v.class if v.class
@refs.label.set "color", v.color if v.color
@refs.label.set "iconclass", v.iconclass if v.iconclass
@refs.label.set "icon", v.icon if v.icon
@refs.label.set "text", v.text if v.text
@set "selected", v.selected if v.selected
@set "closable", v.closable if v.closable
layout: () ->
[{
el: "li", ref: "item", children: [
{ el: "afx-label", ref: "label" },
{ el: "i", class: "closable", ref: "btcl" }
]
}]
class ListViewTag extends Ant.OS.GUI.BaseTag
constructor: (r, o) ->
super r, o
@setopt "onlistselect", () ->
@setopt "onlistdbclick", () ->
@setopt "onitemclose", () ->
@setopt "buttons", []
@setopt "data", {}
@setopt "dropdown", false
@setopt "itemtag", "afx-list-item"
@setopt "multiselect", false
@setopt "selectedItem", undefined
@setopt "selectedIndex", -1
@items = []
$(@root)
.css "display", "flex"
.css "flex-direction", "column"
on_buttons_changed: (v) ->
return if @get "dropdown"
on_data_changed: (data) ->
$( @refs.mlist).empty()
for item in data
el = $("<#{@get "itemtag"}>").appendTo @refs.mlist
el[0].uify @observable
console.log el
me = @
el[0]
.set "data", item
.set "oncontextmenu", (e) ->
me.icontextmenu e
.set "ondbclick", (e) ->
me.idbclick e
.set "onclick", (e) ->
return if not e.item or e.item is me.selectedItem
e.item.set "selected", true
.set "onselect", (e) ->
me.iselect e
.set "onclose", (e) ->
me.iclose e
icontextmenu: (e) ->
console.log "context menu", e
idbclick: (e) ->
console.log "db click", e
iselect: (e) ->
return unless e.item
@selectedItem.set "selected", false if @selectedItem
@selectedItem = e.item
@get("onlistselect")(e)
iclose: (e) ->
console.log "close", e
on_dropdown_changed: (v) ->
$(@refs.container).removeAttr "style"
$(@refs.mlist).removeAttr "style"
$(@refs.container).css "flex", 1
$(@root).removeClass()
me = @
drop = (e) ->
me.dropoff e
show = (e) ->
me.showlist e
calib = (e) ->
me.calibrate e
if v
$(@root).addClass "dropdown"
$(@refs.current).show()
@observable.on "calibrate", calib
@observable.on "resize", calib
$(document).on "click", drop
$(@refs.current).on "click", show
$(@refs.container)
.css "position", "absolute"
.css "display", "inline-block"
$(@refs.mlist)
.css "position", "absolute"
.css "display", "none"
.css "top", "100%"
.css "left", "0"
@calibrate()
else
$(@refs.current).hide()
@observable.off "calibrate", calib
@observable.off "resize", calib
$(document).off "click", drop
$(@refs.current).off "click", show
showlist: (e) ->
return unless @get "dropdown"
desktoph = $(Ant.OS.GUI.workspace).height()
offset = $(@root).offset().top + $(@refs.mlist).height()
if offset > desktoph
$(@refs.mlist)
.css "top", "-#{$(@refs.mlist).outerHeight()}px"
else
$(@mlist).css "top", "100%"
$(@refs.mlist).show()
dropoff: (e) ->
$(@refs.mlist).hide() if $(e.target).closest(@refs.container).length is 0
calibrate: (e) ->
return unless @get "dropdown"
w = "#{$(@root).width()}px"
$(@refs.container).css "width", w
$(@refs.current).css "width", w
$(@refs.mlist).css "width", w
layout: () ->
[
{
el: "div",
class: "list-container",
ref: "container",
children: [
{
el: "div", ref: "current", children: [
{ el: "afx-label", ref: "drlabel" }
]
},
{ el: "ul", ref: "mlist" }
]
},
{ el: "div", class: "button_container", ref: "btlist" }
]
Ant.OS.GUI.define "afx-list-view", ListViewTag
Ant.OS.GUI.define "afx-list-item", ListItemSimpleTag

2
src/core/tags/ResizerTag.coffee
View File

@ -62,6 +62,6 @@ class ResizerTag extends Ant.OS.GUI.BaseTag
@observable.trigger "calibrate", @resizable_el.aid()
layout: () ->
return undefined
[]
Ant.OS.GUI.define "afx-resizer", ResizerTag

4
src/core/tags/TileLayoutTags.coffee
View File

@ -19,9 +19,9 @@ class TileLayoutTag extends Ant.OS.GUI.BaseTag
layout: () ->
{
[{
el: "div", ref: "yield"
}
}]
class HBoxTag extends TileLayoutTag

6
src/core/tags/WindowTag.coffee
View File

@ -4,7 +4,7 @@ class WindowTag extends Ant.OS.GUI.BaseTag
@setopt "minimizable", true
@setopt "resizable", true
@setopt "apptitle", "Untitled"
@setopt "desktop", "#desktop"
@setopt "desktop", Ant.OS.GUI.workspace
@setopt "width", 400
@setopt "height", 300
@shown = false
@ -179,7 +179,7 @@ class WindowTag extends Ant.OS.GUI.BaseTag
@observable.trigger 'resize', { id: @aid(), w: history.width, h: history.height }
layout: () ->
{
[{
el: "div", class: "afx-window-wrapper", children: [
{
el: "ul", class: "afx-window-top", children: [
@ -193,6 +193,6 @@ class WindowTag extends Ant.OS.GUI.BaseTag
{ el: "div", ref: "yield", class: "afx-window-content" },
{ el: "div", ref: "grip", class: "afx-window-grip" }
]
}
}]
Ant.OS.GUI.define "afx-app-window", WindowTag

2
src/core/tags/afx-label.tag
View File

@ -1,7 +1,7 @@
<afx-label>
<span style = {color?"color:" + color:""} >
<i if={iconclass} class = {iconclass} ></i>
<i if={icon} class="icon-style" style = { "background: url("+window.OS.API.handler.get+"/"+icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i>
<i if={icon} class="icon-style" style = { "background: url("+window.OS.API.handle.get+"/"+icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i>
{ text?text.__():"" }
</span>
<script>

30
src/core/tags/tag.coffee
View File

@ -13,15 +13,17 @@ class Ant.OS.GUI.BaseTag
@refs = {}
@setopt "data-id", Math.floor(Math.random() * 100000) + 1
@children = []
dom = @mkui()
if dom
if @refs.yield
@children = $(@root).children()
$(v).detach().appendTo @refs.yield for v in @children
$(dom).appendTo(@root)
else
$(@root).empty()
$(dom).appendTo(@root)
for obj in @layout()
dom = @mkui obj
if dom
if @refs.yield
@children = $(@root).children()
$(v).detach().appendTo @refs.yield for v in @children
$(dom).appendTo(@root)
else
# $(@root).empty()
$(dom).appendTo(@root)
setopt: (name, val) ->
value = val
@ -36,6 +38,7 @@ class Ant.OS.GUI.BaseTag
set: (opt, value) ->
@opts[opt] = value
@["on_#{opt}_changed"](value) if @["on_#{opt}_changed"]
@
aid: () ->
@get "data-id"
@ -52,20 +55,19 @@ class Ant.OS.GUI.BaseTag
mount: () ->
layout: () ->
[]
# should be defined by subclasses
mkui: (obj) ->
tag = obj
tag = @layout() unless tag
mkui: (tag) ->
return undefined unless tag
dom = $("<#{tag.el}>")
$(dom).addClass tag.class if tag.class
if tag.children
$(@mkui(v)).appendTo(dom) for v in tag.children
if tag.ref
@refs[tag.ref] = dom
@refs[tag.ref] = dom[0]
# dom.mount @observable
dom
dom[0].uify(@observable)
Element.prototype.uify = (observable) ->
tag = @tagName.toLowerCase()

24
src/packages/ShowCase/coffees/main.coffee
View File

@ -43,14 +43,14 @@ class ShowCase extends this.OS.GUI.BaseApplication
<afx-resizer data-width="5" />
<afx-vbox data-width="grow">
<afx-hbox min-height="50">
<afx-label text="__(This is the label)"
<afx-button text="__(This is the label)"
data-id="bttest"
iconclass="fa fa-camera-retro fa-lg"
icon="os://packages/DummyApp/icon.png"/>
</afx-hbox>
<afx-resizer data-height="5" />
<afx-hbox>
<div>box center 3</div>
<div>box center 4</div>
<afx-list-view data-id="list" />
</afx-hbox>
<afx-hbox data-height="150">
<div>box center 3</div>
@ -66,6 +66,9 @@ class ShowCase extends this.OS.GUI.BaseApplication
"""
($ "#desktop").append scheme[0]
obj = scheme[0].uify()
bt = $ "[data-id='bttest']", scheme[0]
bt[0].set "onbtclick", (e) ->
console.log "btclicked"
obj.set "resizable", true
obj.set "minimizable", false
obj.observable.on "exit", () ->
@ -73,5 +76,20 @@ class ShowCase extends this.OS.GUI.BaseApplication
obj.observable.off "*"
$(obj).remove()
obj.observable.on "btclick", (e) ->
console.log "button clicked"
list = $ "[data-id='list']", scheme[0]
list[0].set "data", [
{ text: "some thing with avery long text" },
{ text: "some thing 1" },
{ text: "some thing 2" },
{ text: "some thing 3" },
{ text: "some thing 4" },
{ text: "some thing 5" }
]
ShowCase.singleton = true
this.OS.register "ShowCase", ShowCase

14
src/themes/antos/afx-list-view.css
View File

@ -19,7 +19,7 @@ afx-list-view > div.list-container > ul{
padding: 0;
}
afx-list-view > div.list-container > ul > li{
afx-list-view > div.list-container > ul li{
margin:0;
padding:0;
list-style: none;
@ -33,7 +33,7 @@ afx-list-view > div.list-container > ul > li{
-webkit-user-select:none;
cursor:default;
}
afx-list-view > div.list-container > ul >li:nth-child(odd){
afx-list-view > div.list-container > ul li:nth-of-type(odd){
background-color: #f5F5F5;
}
afx-list-view i.closable{
@ -54,11 +54,11 @@ afx-list-view i.closable:before{
font-style: normal;
}
afx-list-view > div.list-container > ul > li > i {
afx-list-view > div.list-container > ul li > i {
margin-right: 3px;
}
afx-list-view > div.list-container > ul > li.selected {
afx-list-view > div.list-container > ul li.selected {
background-color: #116cd6;
color:white;
}
@ -98,7 +98,7 @@ afx-list-view.dropdown > div.list-container > ul{
border-top-left-radius: 0px;
z-index: 10;
}
afx-list-view.dropdown > div.list-container > ul > li{
afx-list-view.dropdown > div.list-container > ul li{
display: inline-block;
width:100%;
}
@ -125,7 +125,7 @@ afx-list-view.dropdown div.list-container div:before {
top:25%;
right: 5px;
}
afx-list-view.dropdown > div.list-container > ul > li:hover{
afx-list-view.dropdown > div.list-container > ul li:hover{
background-color: #dcdcdc;
color: #414339;
}
@ -140,7 +140,7 @@ afx-list-view ul.complex-content li{
color:#5e5f59;
list-style: none;
}
afx-list-view > div.list-container > ul > li.selected ul.complex-content li{
afx-list-view > div.list-container > ul li.selected ul.complex-content li{
color:white;
}
/*