diff --git a/Makefile b/Makefile index 7ce1573..f80c9d9 100644 --- a/Makefile +++ b/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 diff --git a/src/core/tags/ListViewTag.coffee b/src/core/tags/ListViewTag.coffee index 5391811..469f274 100644 --- a/src/core/tags/ListViewTag.coffee +++ b/src/core/tags/ListViewTag.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,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" diff --git a/src/core/tags/TabBarTag.coffee b/src/core/tags/TabBarTag.coffee new file mode 100644 index 0000000..fc91c5c --- /dev/null +++ b/src/core/tags/TabBarTag.coffee @@ -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 \ No newline at end of file diff --git a/src/packages/ShowCase/coffees/main.coffee b/src/packages/ShowCase/coffees/main.coffee index aa9b723..a938abe 100644 --- a/src/packages/ShowCase/coffees/main.coffee +++ b/src/packages/ShowCase/coffees/main.coffee @@ -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 - - -
box 2
-
box 2
-
- - - - - - - - - - - - - - - + + -
box 3
-
box 4 - - +
box 2
+
box 2
+ + + + + + + + + + + + + + + + + +
box 3
+
box 4 + + """ @@ -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 = { diff --git a/src/themes/antos/afx-list-view.css b/src/themes/antos/afx-list-view.css index a27f5bf..a1c47f7 100644 --- a/src/themes/antos/afx-list-view.css +++ b/src/themes/antos/afx-list-view.css @@ -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; diff --git a/src/themes/antos/afx-tab-bar.css b/src/themes/antos/afx-tab-bar.css index a7188c5..38d3b4d 100644 --- a/src/themes/antos/afx-tab-bar.css +++ b/src/themes/antos/afx-tab-bar.css @@ -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;