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

tab container

Browse Source
This commit is contained in:
mrsang 2020-04-26 21:08:26 +02:00
parent 56a79e2db0
commit 8a441e5a59
10 changed files with 145 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Makefile
View File

@ -37,6 +37,7 @@ coffees= src/core/core.coffee \
src/core/tags/MenuTag.coffee \
src/core/tags/GridView.coffee \
src/core/tags/TabBarTag.coffee \
src/core/tags/TabContainer.coffee \
src/core/tags/TreeViewTag.coffee \
src/core/tags/SliderTag.coffee \
src/antos.coffee
@ -44,7 +45,7 @@ coffees= src/core/core.coffee \
packages = CoreServices ActivityMonitor Setting ShowCase # Files MarkOn MarketPlace Preview NotePad wTerm
packages = CoreServices ActivityMonitor Setting ShowCase DummyApp # Files MarkOn MarketPlace Preview NotePad wTerm
main: initd build_coffees build_tags build_themes schemes libs build_packages languages
- cp src/index.html $(BUILDDIR)/

3
src/core/tags/ListViewTag.coffee
View File

@ -105,7 +105,6 @@ class ListViewTag extends Ant.OS.GUI.BaseTag
el[0].uify @observable
me = @
el[0]
.set "data", item
.set "oncontextmenu", (e) ->
me.iclick e, true
.set "ondbclick", (e) ->
@ -116,6 +115,8 @@ class ListViewTag extends Ant.OS.GUI.BaseTag
me.iselect e
.set "onclose", (e) ->
me.iclose e
.set "data", item
el[0]
remove: (item) ->
el = item.get "data"

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

@ -7,6 +7,7 @@ class ResizerTag extends Ant.OS.GUI.BaseTag
@minsize = 0
mount: () ->
$(@root).css " display", "block"
tagname = $(@parent).prop("tagName")
@resizable_el = if $(@root).prev().length is 1 then $(@root).prev()[0] else undefined
if tagname is "AFX-HBOX"

1
src/core/tags/SliderTag.coffee
View File

@ -44,6 +44,7 @@ class SliderTag extends Ant.OS.GUI.BaseTag
evt = { id: me.aid(), data: me.get("value") }
me.get("onchange") evt
me.get("onchanging") evt
@calibrate()
calibrate: () ->
@set "value", @get("max") if @get("value") > @get("max")

12
src/core/tags/TabBarTag.coffee
View File

@ -4,15 +4,19 @@ class TabBarTag extends Ant.OS.GUI.BaseTag
@setopt "closable", false
@setopt "ontabselect", (e) ->
@setopt "items", []
me = @
@root.push = (e) -> me.refs.list.push e
@root.remove = (e) -> me.refs.list.remove e
@root.unshift = (e) -> me.refs.list.unshift e
@refs.list.set "onlistselect", (e) ->
me.get("ontabselect") e
me.observable.trigger "tabselect", e
__items__: (v) ->
@refs.list.set "data", v
mount: () ->
me = @
@refs.list.set "onlistselect", (e) ->
me.get("ontabselect") e
me.observable.trigger "tabselect", e
@root.push = (e) -> me.refs.list.push e
@root.unshift = (e) -> me.refs.list.unshift e
@root.remove = (e) -> me.refs.list.remove e

58
src/core/tags/TabContainer.coffee
View File

@ -2,10 +2,60 @@ class TabContainer extends Ant.OS.GUI.BaseTag
constructor: (r, o) ->
super r, o
@setopt "dir", "column" # or row
@setopt "selectedTab", undefined
@setopt "tabbarwidth", undefined
@setopt "tabbarheight", undefined
me = @
@refs.bar.set "ontabselect", (e) ->
data = e.data.item.get "data"
me.set "selectedTab", data
__selectedTab: (v) ->
return unless v
selected = @get("selectedTab")
$(selected.container).hide() if selected
$(v.container).show()
@observable.trigger "resize"
__tabbarwidth__: (v) ->
return unless v
$(@refs.bar).attr "data-width", "#{@get("tabbarwidth")}"
@refs.wrapper.calibrate()
__tabbarheight__: (v) ->
$(@refs.bar).attr "data-height", "#{@get("tabbarheight")}"
@refs.wrapper.calibrate()
__dir__: (v) ->
return unless v
@refs.wrapper.set "dir", v
@set "tabsize", @get("tabsize")
mount: () ->
me = @
$(@children).each () ->
item = {}
item.text = $(@).attr "title" if $(@).attr "title"
item.icon = $(@).attr "icon" if $(@).attr "icon"
item.iconclass = $(@).attr "iconclass" if $(@).attr "iconclass"
item.container = @
$(@)
.css "width", "100%"
.css "height", "100%"
el = me.refs.bar.push item
el.set "selected", true
@observable.on "resize", (e) -> me.calibrate()
@calibrate()
calibrate: () ->
$(@refs.wrapper).css "height", "#{$(@root).height()}px"
layout: () ->
[{
el: "afx-tile", ref: "wrapper", chidren: [
{ el: "afx-tab-bar" }
el: "afx-tile", ref: "wrapper", children: [
{ el: "afx-tab-bar", ref: "bar" },
{ el: "div", ref: "yield" }
]
}]
}]
Ant.OS.GUI.define "afx-tab-container", TabContainer

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

@ -3,6 +3,10 @@ class TileLayoutTag extends Ant.OS.GUI.BaseTag
super r, o
@setopt "name", undefined
@setopt "dir", undefined
$(@root).css("display", "block")
$(@refs.yield)
.css("display", "flex")
.css("width", "100%")
# @setopt @conf.opt, "grow"
__name__: (v) ->
@ -19,12 +23,9 @@ class TileLayoutTag extends Ant.OS.GUI.BaseTag
@calibrate()
mount: () ->
$(@root).css("display", "block")
$(@refs.yield)
.css("display", "flex")
.css("width", "100%")
me = @
@observable.on "resize", (e) -> me.calibrate()
@calibrate()
calibrate: () ->
return @hcalibrate() if @get("dir") is "row"

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

@ -10,25 +10,27 @@ class Ant.OS.GUI.BaseTag
@root.set = (k, v) -> me.set k, v
@root.get = (k) -> me.get k
@root.aid = () -> me.aid()
@root.calibrate = () -> me.calibrate()
@mounted = false
@root.sync = () -> me.sync()
@refs = {}
@setopt "data-id", (Math.floor(Math.random() * 100000) + 1).toString()
#$(@root).attr "data-id", @get("data-id")
@children = []
__: (k, v) ->
@set k, v if v
@get k
@children = $(@root).children()
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)
$(dom).appendTo(@root)
if @refs.yield
$(v).detach().appendTo @refs.yield for v in @children
else
@children = []
$(@root).children().each () -> @.mkui me.observable
__: (k, v) ->
@set k, v if v
@get k
setopt: (name, val) ->
value = val
@ -52,14 +54,17 @@ class Ant.OS.GUI.BaseTag
aid: () ->
@get "data-id"
calibrate: () ->
get: (opt) ->
return @opts if opt is "*"
@opts[opt]
uify: () ->
sync: () ->
return if @mounted
@mounted = true
@mount()
v.uify(@observable) for v in @children
$(@root).children().each () -> @.mount()
@root
mount: () ->
@ -77,18 +82,28 @@ class Ant.OS.GUI.BaseTag
if tag.ref
@refs[tag.ref] = dom[0]
# dom.mount @observable
dom[0].uify(@observable)
dom[0] #.uify(@observable)
Element.prototype.uify = (observable) ->
Element.prototype.mkui = (observable) ->
tag = @tagName.toLowerCase()
if RegExp("afx-*", "i" ).test(tag) and Ant.OS.GUI.tag[tag]
o = new Ant.OS.GUI.tag[tag](@, observable)
return o.uify()
### else
return o.root
else
$(@).children().each () ->
@uify(observable) ###
@mkui(observable)
return @
Element.prototype.mount = () ->
return @sync() if @sync
$(@).children().each () -> @mount()
@
Element.prototype.uify = (observable) ->
@mkui(observable)
@sync()
Ant.OS.GUI.define = (name, cls) ->
Ant.OS.GUI.tag[name] = cls

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

@ -38,35 +38,42 @@ class ShowCase extends this.OS.GUI.BaseApplication
<afx-app-window data-id="example-show-case" apptitle="Preview" width="650" height="500">
<afx-vbox>
<afx-menu data-height="30" data-id="menu" />
<afx-tab-bar data-height="30" data-id="tab" />
<afx-hbox>
<afx-vbox data-width="150">
<afx-tree-view data-id="tree" />
<afx-slider data-id="slider" data-height="30" value="50"/>
</afx-vbox>
<afx-resizer data-width="5" />
<afx-vbox data-width="grow">
<afx-hbox min-height="50">
<afx-switch data-id="switch" />
<afx-button text="__(This is the label)"
data-id="bttest"
iconclass="fa fa-camera-retro fa-lg"
icon="os://packages/DummyApp/icon.png"/>
<afx-nspinner data-id="spin" value="10" step="2" />
</afx-hbox>
<afx-resizer data-height="5" />
<afx-hbox>
<afx-list-view data-id="list" dropdown="false" multiselect="true" />
</afx-hbox>
<afx-hbox data-height="150">
<afx-grid-view data-id="grid" multiselect="true" />
</afx-hbox>
</afx-vbox>
<afx-vbox data-width="150">
<div data-height="grow">box 3</div>
<div data-height="200">box 4
</afx-vbox>
</afx-hbox>
<afx-tab-container data-id="tabctn" tabbarheight= "30">
<afx-hbox title="Widgets">
<afx-vbox data-width="150">
<afx-tree-view data-id="tree" />
<afx-slider data-id="slider" data-height="30" value="50"/>
</afx-vbox>
<afx-resizer data-width="5" />
<afx-vbox data-width="grow">
<afx-hbox min-height="50">
<afx-switch data-id="switch" />
<afx-button text="__(This is the label)"
data-id="bttest"
iconclass="fa fa-camera-retro fa-lg"
icon="os://packages/DummyApp/icon.png"/>
<afx-nspinner data-id="spin" value="10" step="2" />
</afx-hbox>
<afx-resizer data-height="5" />
<afx-hbox>
<afx-list-view data-id="list" dropdown="false" multiselect="true" />
</afx-hbox>
<afx-hbox data-height="150">
<afx-grid-view data-id="grid" multiselect="true" />
</afx-hbox>
</afx-vbox>
<afx-vbox data-width="150">
<div data-height="grow">box 3</div>
<div data-height="200">box 4</div>
</afx-vbox>
</afx-hbox>
<afx-hbox title="Virtual desktop">
<div data-height="200">desktop</div>
</afx-hbox>
</afx-tab-container>
</afx-vbox>
</afx-app-window>
"""
@ -89,12 +96,6 @@ class ShowCase extends this.OS.GUI.BaseApplication
me.subwin.observable.on "menuselect", (e) ->
console.log e.id
tab = $ "[data-id='tab']", scheme[0]
tab[0].set "items", [
{ text: "data.txt" },
{ text: "antos.conf", closable: true }
]
list = $ "[data-id='list']", scheme[0]

1
src/themes/antos/afx-resizer.css
View File

@ -1,4 +1,3 @@
afx-resizer {
display: block;
background-color: #a6a6a6;
}