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 tab bar

Browse Source
This commit is contained in:
lxsang 2020-04-03 16:34:52 +02:00
parent 5b21696fa1
commit 8b44c3b3c0
6 changed files with 127 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Makefile
View File

@ -36,6 +36,7 @@ coffees= src/core/core.coffee \
src/core/tags/NSpinnerTag.coffee \
src/core/tags/MenuTag.coffee \
src/core/tags/GridView.coffee \
src/core/tags/TabBarTag.coffee \
src/antos.coffee

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

@ -65,7 +65,7 @@ class ListViewTag extends Ant.OS.GUI.BaseTag
super r, o
@setopt "onlistselect", () ->
@setopt "onlistdbclick", () ->
@setopt "onitemclose", () ->
@setopt "onitemclose", () -> true
@setopt "buttons", []
@setopt "data", {}
@setopt "dropdown", false
@ -76,11 +76,53 @@ class ListViewTag extends Ant.OS.GUI.BaseTag
$(@root)
.css "display", "flex"
.css "flex-direction", "column"
me = @
@root.push = (e) -> me.push e
@root.remove = (e) -> me.remove e
@root.unshift = (e) -> me.unshift e
multiselect: () ->
return false if @get "dropdown"
@get "multiselect"
unshift: (item) ->
@push item, true
has_data: (v) ->
@get("data").includes v
push: (item, flag) ->
el = $("<#{@get "itemtag"}>")
if flag
@get("data").unshift item if not @has_data item
$(@refs.mlist).prepend el[0]
else
@get("data").push item if not @has_data item
el.appendTo @refs.mlist
el[0].uify @observable
me = @
el[0]
.set "data", item
.set "oncontextmenu", (e) ->
me.iclick e
.set "ondbclick", (e) ->
me.idbclick e
.set "onclick", (e) ->
me.iclick e
.set "onselect", (e) ->
me.iselect e
.set "onclose", (e) ->
me.iclose e
remove: (item) ->
el = item.get "data"
data = @get "data"
@set "selectedItem", undefined if @get("selectedItem") is item
list = @get("selectedItems")
list.splice(list.indexOf(item), 1) if list.includes(item)
if data.includes el
data.splice data.indexOf(el), 1
$(item).remove()
__buttons__: (v) ->
return if @get "dropdown"
@ -88,21 +130,7 @@ class ListViewTag extends Ant.OS.GUI.BaseTag
__data__: (data) ->
$( @refs.mlist).empty()
for item in data
el = $("<#{@get "itemtag"}>").appendTo @refs.mlist
el[0].uify @observable
me = @
el[0]
.set "data", item
.set "oncontextmenu", (e) ->
me.iclick e
.set "ondbclick", (e) ->
me.idbclick e
.set "onclick", (e) ->
me.iclick e
.set "onselect", (e) ->
me.iselect e
.set "onclose", (e) ->
me.iclose e
@push item, false
iclick: (e) ->
return if not e.item
@ -140,7 +168,11 @@ class ListViewTag extends Ant.OS.GUI.BaseTag
iclose: (e) ->
return unless e.item
$(e.item).remove()
evt = { id: @aid(), data: e }
r = @get("onitemclose") evt
return unless r
@observable.trigger "itemclose", evt
@remove(e.item)
__dropdown__: (v) ->
$(@refs.container).removeAttr "style"

26
src/core/tags/TabBarTag.coffee Normal file
View File

@ -0,0 +1,26 @@
class TabBarTag extends Ant.OS.GUI.BaseTag
constructor: (r, o) ->
super r, o
@setopt "closable", false
@setopt "ontabselect", (e) ->
@setopt "items", []
__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
$(@refs.list).css "height", "100%"
layout: () ->
[{
el: "afx-list-view", ref: "list"
}]
Ant.OS.GUI.define "afx-tab-bar", TabBarTag

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

@ -3,7 +3,7 @@ class ShowCase extends this.OS.GUI.BaseApplication
constructor: (args) ->
super "ShowCase", args
main:() ->
main: () ->
me = @
@announcer = new Ant.OS.API.Announcer()
@announcer.on "evt1", (data) ->
@ -38,34 +38,35 @@ 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-hbox>
<afx-vbox data-width="150">
<div>box 2</div>
<div>box 2</div>
</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-tab-bar data-height="30" data-id="tab" />
<afx-hbox>
<afx-vbox data-width="150">
<div data-height="grow">box 3</div>
<div data-height="200">box 4
</afx-vbox>
</afx-hbox>
<div>box 2</div>
<div>box 2</div>
</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-vbox>
</afx-app-window>
"""
@ -89,6 +90,12 @@ 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]
list[0].set "data", [
@ -99,9 +106,14 @@ class ShowCase extends this.OS.GUI.BaseApplication
{ text: "some thing 4" },
{ text: "some thing 5" }
]
list[0].unshift { text: "shifted el" }
console.log "after shift", list[0].get("data")
list[0].set "onlistselect", (e) ->
console.log(e.data.items)
me.subwin.observable.on "itemclose", (e) ->
console.log "remove", list[0].get("data")
console.log list[0].get "selectedItem"
console.log list[0].get "selectedItems"
sw = $ "[data-id='switch']", scheme[0]
sw[0].set "onchange", (e) ->
@ -143,7 +155,7 @@ class ShowCase extends this.OS.GUI.BaseApplication
[{ text: "text 7" }, { text: "text 8" }, { text: "text 9" }]
]
mnFile:() ->
mnFile: () ->
#console.log file
me = @
arr = {

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

@ -11,6 +11,10 @@ afx-list-view div.list-container{
position: relative;
background-color: red;
}*/
afx-list-view afx-list-item
{
display: contents;
}
afx-list-view > div.list-container{
overflow: auto;
}
@ -33,8 +37,9 @@ afx-list-view > div.list-container > ul li{
-webkit-user-select:none;
cursor:default;
}
afx-list-view > div.list-container > ul li:nth-of-type(odd){
background-color: #f5F5F5;
afx-list-view > div.list-container > ul afx-list-item:nth-child(even) li,
afx-list-view > div.list-container > ul li:nth-child(even){
background-color:#f5F5F5;
}
afx-list-view i.closable{
width: 16px;
@ -58,6 +63,7 @@ afx-list-view > div.list-container > ul li > i {
margin-right: 3px;
}
afx-list-view > div.list-container > ul > afx-list-item > li.selected,
afx-list-view > div.list-container > ul li.selected {
background-color: #116cd6;
color:white;

2
src/themes/antos/afx-tab-bar.css
View File

@ -7,7 +7,7 @@ afx-tab-bar afx-list-view {
padding:0;
margin:0;
}
afx-tab-bar afx-list-view > div.list-container > ul > li{
afx-tab-bar afx-list-view > div.list-container > ul li{
float:left;
border-top-left-radius: 5px;
border-top-right-radius: 5px;