mirror of
https://github.com/lxsang/antos-frontend.git
synced 2024-12-27 01:38:21 +01:00
add tab bar
This commit is contained in:
lxsang
parent
5b21696fa1
commit
8b44c3b3c0
1
Makefile
1
Makefile
@ -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
|
||||
|
||||
|
||||
|
||||
@ -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,19 +76,29 @@ 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
|
||||
|
||||
__buttons__: (v) ->
|
||||
return if @get "dropdown"
|
||||
has_data: (v) ->
|
||||
@get("data").includes v
|
||||
|
||||
__data__: (data) ->
|
||||
$( @refs.mlist).empty()
|
||||
for item in data
|
||||
el = $("<#{@get "itemtag"}>").appendTo @refs.mlist
|
||||
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]
|
||||
@ -104,6 +114,24 @@ class ListViewTag extends Ant.OS.GUI.BaseTag
|
||||
.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"
|
||||
|
||||
__data__: (data) ->
|
||||
$( @refs.mlist).empty()
|
||||
for item in data
|
||||
@push item, false
|
||||
|
||||
iclick: (e) ->
|
||||
return if not e.item
|
||||
list = @get("selectedItems")
|
||||
@ -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
26
src/core/tags/TabBarTag.coffee
Normal 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
|
||||
@ -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,6 +38,7 @@ 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">
|
||||
<div>box 2</div>
|
||||
@ -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 = {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user