tab container

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

View File

@ -37,6 +37,7 @@ coffees= src/core/core.coffee \
src/core/tags/MenuTag.coffee \ src/core/tags/MenuTag.coffee \
src/core/tags/GridView.coffee \ src/core/tags/GridView.coffee \
src/core/tags/TabBarTag.coffee \ src/core/tags/TabBarTag.coffee \
src/core/tags/TabContainer.coffee \
src/core/tags/TreeViewTag.coffee \ src/core/tags/TreeViewTag.coffee \
src/core/tags/SliderTag.coffee \ src/core/tags/SliderTag.coffee \
src/antos.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 main: initd build_coffees build_tags build_themes schemes libs build_packages languages
- cp src/index.html $(BUILDDIR)/ - cp src/index.html $(BUILDDIR)/

View File

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

View File

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

View File

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

View File

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

View File

@ -2,10 +2,60 @@ class TabContainer extends Ant.OS.GUI.BaseTag
constructor: (r, o) -> constructor: (r, o) ->
super r, o super r, o
@setopt "dir", "column" # or row @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: () -> layout: () ->
[{ [{
el: "afx-tile", ref: "wrapper", chidren: [ el: "afx-tile", ref: "wrapper", children: [
{ el: "afx-tab-bar" } { el: "afx-tab-bar", ref: "bar" },
{ el: "div", ref: "yield" }
] ]
}] }]
Ant.OS.GUI.define "afx-tab-container", TabContainer

View File

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

View File

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

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

View File

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