fix tree view, add features to Blogger

This commit is contained in:
Xuan Sang LE 2018-02-13 04:59:08 +01:00
parent 7dc275e1e5
commit 133b7512fa
18 changed files with 296 additions and 85 deletions

View File

@ -20,7 +20,6 @@ coffees= src/core/core.coffee\
packages = CoreServices NotePad wTerm ActivityMonitor DummyApp Files MarkOn MarketPlace Blogger packages = CoreServices NotePad wTerm ActivityMonitor DummyApp Files MarkOn MarketPlace Blogger
main: build_coffees build_tags build_themes schemes libs build_packages main: build_coffees build_tags build_themes schemes libs build_packages
@ -78,5 +77,15 @@ build_packages:
for d in $(packages); do (cd src/packages/$$d; make);done for d in $(packages); do (cd src/packages/$$d; make);done
for d in $(packages); do ( test -d $(BUILDDIR)/packages/$$d || mkdir -p $(BUILDDIR)/packages/$$d && cp -rf src/packages/$$d/build/* $(BUILDDIR)/packages/$$d/);done for d in $(packages); do ( test -d $(BUILDDIR)/packages/$$d || mkdir -p $(BUILDDIR)/packages/$$d && cp -rf src/packages/$$d/build/* $(BUILDDIR)/packages/$$d/);done
for d in $(packages); do ( test -d src/packages/$$d/build && rm -r src/packages/$$d/build ); done for d in $(packages); do ( test -d src/packages/$$d/build && rm -r src/packages/$$d/build ); done
package:
read -r -p "Enter package name: " PKG;\
test -d $(BUILDDIR)/packages/$$PKG && rm -rf $(BUILDDIR)/packages/$$PKG/*;\
cd src/packages/$$PKG && make;\
cd ../../../;\
test -d $(BUILDDIR)/packages/$$PKG || mkdir -p $(BUILDDIR)/packages/$$PKG;\
cp -rf src/packages/$$PKG/build/* $(BUILDDIR)/packages/$$PKG/;\
test -d src/packages/$$PKG/build && rm -r src/packages/$$PKG/build;
clean: clean:
rm -rf $(BUILDDIR)/* rm -rf $(BUILDDIR)/*

View File

@ -56,7 +56,7 @@ class BasicDialog extends BaseDialog
@title = @name if not @title @title = @name if not @title
html = "<afx-app-window data-id = 'dia-window' apptitle='#{@title}' width='#{@conf.width}' height='#{@conf.height}'> html = "<afx-app-window data-id = 'dia-window' apptitle='#{@title}' width='#{@conf.width}' height='#{@conf.height}'>
<afx-vbox>" <afx-vbox>"
html += "<#{v.tag} #{v.att} data-id = 'content#{k}'></#{v.tag}>" for k,v of @conf.tags html += "<#{v.tag} #{v.att} style = 'margin-left:5px; margin-right:5px;' data-id = 'content#{k}'></#{v.tag}>" for k,v of @conf.tags
html += "<div data-height = '35' style=' text-align:right;padding-top:3px;'>" html += "<div data-height = '35' style=' text-align:right;padding-top:3px;'>"
html += "<afx-button data-id = 'bt#{k}' text = '#{v.label}' style='margin-right:5px;'></afx-button>" for k,v of @conf.buttons html += "<afx-button data-id = 'bt#{k}' text = '#{v.label}' style='margin-right:5px;'></afx-button>" for k,v of @conf.buttons
html += "</div></afx-vbox></afx-app-window>" html += "</div></afx-vbox></afx-app-window>"
@ -104,7 +104,7 @@ class PromptDialog extends BasicDialog
(d.find "content0").set "text", d.data.label (d.find "content0").set "text", d.data.label
(d.find "content1").value = d.data.value if d.data.value (d.find "content1").value = d.data.value if d.data.value
xtra: (d) -> xtra: (d) ->
$( d.find "content0" ).keyup (e) -> $( d.find "content1" ).keyup (e) ->
(d.find "bt0").trigger() if e.which is 13 (d.find "bt0").trigger() if e.which is 13
} }

View File

@ -3,8 +3,15 @@ class DB
save: (d, f) -> save: (d, f) ->
_API.handler.dbquery "save", { table: @table, data: d }, f _API.handler.dbquery "save", { table: @table, data: d }, f
delete: (id, f) -> delete: (c, f) ->
_API.handler.dbquery "delete", { table: @table, id: id }, f rq = { table: @table }
return _courrier.oserror "Unknown condition for delete command",
(_API.throwe "OS.DB"), c unless c and c inst ""
if isNaN c
rq.cond = c
else
rq.id = c
_API.handler.dbquery "delete", rq, f
get: (id, f) -> get: (id, f) ->
_API.handler.dbquery "get", { table: @table, id: id }, f _API.handler.dbquery "get", { table: @table, id: id }, f
find: (cond, f) -> find: (cond, f) ->

View File

@ -97,6 +97,7 @@ self.OS.GUI =
forceLaunch: (app, args) -> forceLaunch: (app, args) ->
console.log "This method is used for developing only, please use the launch method instead" console.log "This method is used for developing only, please use the launch method instead"
_PM.killAll app _PM.killAll app
($ _OS.APP[app].style).remove() if _OS.APP[app] and _OS.APP[app].style
_OS.APP[app] = undefined _OS.APP[app] = undefined
_GUI.launch app, args _GUI.launch app, args
@ -109,8 +110,9 @@ self.OS.GUI =
#load css file #load css file
css = "#{path}/main.css" css = "#{path}/main.css"
css.asFileHandler().onready (d) -> css.asFileHandler().onready (d) ->
$ '<link>', { rel: 'stylesheet', type: 'text/css', 'href': "#{_API.handler.get}/#{css}" } el = $ '<link>', { rel: 'stylesheet', type: 'text/css', 'href': "#{_API.handler.get}/#{css}" }
.appendTo 'head' .appendTo 'head'
_OS.APP[app].style = el[0] if _OS.APP[app]
, () -> , () ->
#launch #launch
# load app meta data # load app meta data

View File

@ -82,7 +82,7 @@
var tdata = {} var tdata = {}
tdata.name = self.path tdata.name = self.path
tdata.nodes = getTreeData(self.data) tdata.nodes = getTreeData(self.data)
self.refs.treeview.root.set("*", tdata) self.refs.treeview.root.set("data", tdata)
} }
var getTreeData = function(data) var getTreeData = function(data)
{ {
@ -170,20 +170,21 @@
self.refs.treeview.ontreeselect = function(d) self.refs.treeview.ontreeselect = function(d)
{ {
if(!d) return; if(!d) return;
if(!d.data)// select the root var data;
var el = d;
if(d.treepath == 0)// select the root
{ {
var r = self.path.asFileHandler() el = self.path.asFileHandler()
r.size = 0 el.size = 0
r.filename = r.path el.filename = el.path
d.data = { child: r , i:0 }
} }
var data = {id:self.rid, data:d.data.child, idx:d.data.i} var data = {id:self.rid, data:el}
self.root.observable.trigger("fileselect",data) self.root.observable.trigger("fileselect",data)
} }
self.refs.treeview.ontreedbclick = function(d) self.refs.treeview.ontreedbclick = function(d)
{ {
if(!d.data) return; if(!d || d.treepath == 0) return;
var data = {id:self.rid, data:d.data.child, idx:d.data.i} var data = {id:self.rid, data:d}
self.root.observable.trigger("filedbclick",data) self.root.observable.trigger("filedbclick",data)
} }
self.root.observable.on("fileselect", function(e){ self.root.observable.on("fileselect", function(e){

View File

@ -40,6 +40,8 @@
if(dw) if(dw)
{ {
if(dw == "grow") return if(dw == "grow") return
if(dw[dw.length-1] === "%")
dw = Number(dw.slice(0,-1))*avaiWidth/100;
$(this).css("width",dw + "px") $(this).css("width",dw + "px")
ocwidth += Number(dw) ocwidth += Number(dw)
} }
@ -51,10 +53,11 @@
} }
}) })
csize = (avaiWidth - ocwidth)/ (auto_width.length) csize = (avaiWidth - ocwidth)/ (auto_width.length)
$.each(auto_width, function(i,v) if(csize > 0)
{ $.each(auto_width, function(i,v)
$(v).css("width", csize + "px") {
}) $(v).css("width", csize + "px")
})
self.root.observable.trigger("hboxchange", self.root.observable.trigger("hboxchange",
{id:self.rid, w:csize, h:avaiheight}) {id:self.rid, w:csize, h:avaiheight})
} }

View File

@ -6,6 +6,9 @@
<li each={item,i in items } class={selected: parent._autoselect(item,i)} ondblclick = {parent._dbclick} onclick = {parent._select} oncontextmenu = {parent._select}> <li each={item,i in items } class={selected: parent._autoselect(item,i)} ondblclick = {parent._dbclick} onclick = {parent._select} oncontextmenu = {parent._select}>
<afx-label color = {item.color} iconclass = {item.iconclass} icon = {item.icon} text = {item.text}></afx-label> <afx-label color = {item.color} iconclass = {item.iconclass} icon = {item.icon} text = {item.text}></afx-label>
<i if = {item.closable} class = "closable" click = {parent._remove}></i> <i if = {item.closable} class = "closable" click = {parent._remove}></i>
<ul if = {item.complex} class = "complex-content">
<li each = {ctn,j in item.content} class = {ctn.class}>{ctn.text}</li>
</ul>
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -1,41 +1,45 @@
<afx-tree-view> <afx-tree-view>
<div class={afx_tree_item_selected:treeroot.selectedItem && treeroot.selectedItem.path == path, afx_folder_item: isFolder(), afx_tree_item_odd: index%2 != 0 } onclick={select} ondblclick = {_dbclick} oncontextmenu = {select}> <div class={afx_tree_item_selected:treeroot.selectedItem && treeroot.selectedItem.treepath == data.treepath, afx_folder_item: isFolder(), afx_tree_item_odd: index%2 != 0 } onclick={select} ondblclick = {_dbclick} oncontextmenu = {select}>
<ul style = "padding:0;margin:0;white-space: nowrap;"> <ul style = "padding:0;margin:0;white-space: nowrap;">
<li ref = "padding" ></li> <li ref = "padding" ></li>
<li class = "itemname" style="display:inline-block;" > <li class = "itemname" style="display:inline-block;" >
<i if={ !isFolder() && iconclass} class = {iconclass} ></i> <i if={ !isFolder() && data.iconclass} class = {data.iconclass} ></i>
<i if={!isFolder() && icon} class="icon-style" style = { "background: url("+icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i> <i if={!isFolder() && data.icon} class="icon-style" style = { "background: url("+data.icon+");background-size: 100% 100%;background-repeat: no-repeat;" }></i>
<span onclick={ toggle } if={ isFolder() } class={open ? 'afx-tree-view-folder-open' : 'afx-tree-view-folder-close'}></span> <span onclick={ toggle } if={ isFolder() } class={open ? 'afx-tree-view-folder-open' : 'afx-tree-view-folder-close'}></span>
{ name } { data.name }
</li> </li>
</ul> </ul>
</div> </div>
<ul if={ isFolder() } show={ isFolder() && open }> <ul if={ isFolder() } show={ isFolder() && open }>
<li each={ child, i in nodes }> <li each={ child, i in data.nodes }>
<afx-tree-view ontreeselect = {parent.ontreeselect} fetch = {parent.fetch} ontreedbclick = {parent.ontreedbclick} data={child} indent={indent+1} observable = {parent.root.observable} path = {parent.path + ">" + i} treeroot= {parent.treeroot}></afx-tree-view> <afx-tree-view ontreeselect = {parent.ontreeselect} index = {i} fetch = {parent.fetch} ontreedbclick = {parent.ontreedbclick} data={child} indent={indent+1} observable = {parent.root.observable} path = {parent.data.treepath + ">" + i} treeroot= {parent.treeroot}></afx-tree-view>
</li> </li>
</ul> </ul>
<script> <script>
var self = this var self = this
self.open = true self.open = true
self.data = { name:"", nodes:null, treepath: opts.path, i:-1}
if(opts.data) if(opts.data)
{ {
self.name = opts.data.name self.data = opts.data
self.nodes = opts.data.nodes //self.name = opts.data.name
self.icon = opts.data.icon //self.nodes = opts.data.nodes
//self.icon = opts.data.icon
self.open = opts.data.open == undefined?true:opts.data.open self.open = opts.data.open == undefined?true:opts.data.open
self.iconclass = opts.data.iconclass //self.iconclass = opts.data.iconclass
} }
this.rid = $(self.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1 self.rid = $(self.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1
self.data.rid = self.rid
self.data.i = opts.index
self.ontreeselect = opts.ontreeselect self.ontreeselect = opts.ontreeselect
self.ontreedbclick = opts.ontreedbclick self.ontreedbclick = opts.ontreedbclick
self.fetch = opts.fetch self.fetch = opts.fetch
self.indent = opts.indent || 1 self.indent = opts.indent || 0
var istoggle = false var istoggle = false
if(opts.treeroot) if(opts.treeroot)
{ {
@ -47,21 +51,48 @@
this.treeroot = self this.treeroot = self
this.treeroot.counter = 0 this.treeroot.counter = 0
} }
self.path = opts.path || 0 self.data.treepath = opts.path || 0
self.selected = false //self.selected = false
self.selectedItem = null self.selectedItem = null
self.index = this.treeroot.counter self.index = this.treeroot.counter
var _dfind = function(l,d, k, v)
{
if( d[k] == v ) return l.push(d)
if(d.nodes && d.nodes.length > 0)
for(var i in d.nodes)
_dfind(l, d.nodes[i],k,v)
}
self.root.find = function(k, v)
{
var l = []
_dfind(l,self.data,k,v)
return l
}
self.root.set = function(k,v) self.root.set = function(k,v)
{ {
if(k == "*") if(k == "*")
for(var i in v) for(var i in v)
self[i] = v[i] self[i] = v[i]
else if (k == "data")
for(var i in v)
self.data[i] = v[i]
else if (k == "selectedItem")
{
if(self.ontreeselect)
self.ontreeselect(self.data)
self.treeroot.selectedItem = v
self.root.observable.trigger('treeselect',self.data)
}
else else
self[k] = v self[k] = v
self.update() self.update()
} }
self.root.get = function(k) self.root.get = function(k)
{ {
//if(k == "data")
// return {name:self.name, nodes: self.nodes, icon:self.icon, iconclass: self.iconclass, selectedItem:self.selectedItem}
return self[k] return self[k]
} }
@ -83,18 +114,21 @@
}) })
isFolder() { isFolder() {
return self.nodes //&& self.nodes.length return self.data.nodes //&& self.nodes.length
} }
toggle(e) { toggle(e) {
self.open = !self.open self.open = !self.open
e.preventDefault() e.preventDefault()
istoggle = true istoggle = true
if(self.open && self.nodes.length == 0 && self.fetch)
if(self.open && self.data.nodes.length == 0 && self.fetch)
{
self.fetch(e.item, function(d){ self.fetch(e.item, function(d){
self.nodes = d self.data.nodes = d
self.update() self.update()
}) })
}
} }
select(event) select(event)
@ -104,15 +138,15 @@
istoggle = false istoggle = false
return return
} }
var data = { /*var data = {
id:self.rid, id:self.rid,
data:event.item, data:event.item,
path:self.path path:self.data.path
} } */
if(self.ontreeselect) if(self.ontreeselect)
self.ontreeselect(data) self.ontreeselect(self.data)
self.treeroot.selectedItem = data self.treeroot.selectedItem = self.data
this.root.observable.trigger('treeselect',data) this.root.observable.trigger('treeselect',self.data)
event.preventUpdate = true event.preventUpdate = true
self.treeroot.update() self.treeroot.update()
event.preventDefault() event.preventDefault()
@ -124,15 +158,15 @@
istoggle = false istoggle = false
return return
} }
data = { /*data = {
id:self.rid, id:self.rid,
data:event.item, data:event.item,
path: self.path} path: self.data.path}*/
if(self.ontreedbclick) if(self.ontreedbclick)
{ {
self.ontreedbclick(data) self.ontreedbclick(self.data)
} }
self.root.observable.trigger('treedbclick', data) self.root.observable.trigger('treedbclick', self.data)
} }
</script> </script>
</afx-tree-view> </afx-tree-view>

View File

@ -43,6 +43,8 @@
if(dw) if(dw)
{ {
if(dw == "grow") return if(dw == "grow") return
if(dw[dw.length-1] === "%")
dw = Number(dw.slice(0,-1))*avaiheight/100;
$(this).css("height",dw + "px") $(this).css("height",dw + "px")
ocheight += Number(dw) ocheight += Number(dw)
} }
@ -54,10 +56,11 @@
} }
}) })
csize = (avaiheight - ocheight)/ (auto_height.length) csize = (avaiheight - ocheight)/ (auto_height.length)
$.each(auto_height, function(i,v) if(csize > 0)
{ $.each(auto_height, function(i,v)
$(v).css("height", csize + "px") {
}) $(v).css("height", csize + "px")
})
self.root.observable.trigger("vboxchange", self.root.observable.trigger("vboxchange",
{id:self.rid, w:avaiwidth, h:csize}) {id:self.rid, w:avaiwidth, h:csize})
} }

View File

@ -1,4 +1,4 @@
coffee_files = main.coffee coffee_files = dialogs.coffee main.coffee
jsfiles = jsfiles =

View File

@ -0,0 +1,47 @@
class BloggerCategoryDialog extends this.OS.GUI.BasicDialog
constructor: () ->
super "BloggerCategoryDialog", {
tags: [
{ tag: "afx-label", att: "data-height = '20', text = 'Pick a parent:'" },
{ tag: "afx-tree-view" },
{ tag: "afx-label", att: "data-height = '20', text = 'Category name:'" },
{ tag: "input", att: "type = 'text' data-height = '20'" }
],
width: 200,
height: 300,
resizable: true,
buttons: [
{
label: "0k",
onclick: (d) ->
sel = (d.find "content1").get "selectedItem"
return d.notify "Please select a parent category" unless sel
val = (d.find "content3").value
return d.notify "Please enter category name" if val is ""
return d.notify "Parent can not be the category itself" if d.data.cat and d.data.cat.id is sel.id
d.handler { p: sel, value: val } if d.handler
d.quit()
},
{
label: "Cancel",
onclick: (d) -> d.quit()
}
],
filldata: (d) ->
return unless d.data
#console.log d.data
tree = d.find "content1"
tree.set "data", d.data.tree if d.data.tree
if d.data.cat
it = (tree.find "id", d.data.cat.pid)[0]
tree.set "selectedItem", it
(d.find "content3").value = d.data.cat.name
#(d.find "content0").set "text", d.data.label
#(d.find "content1").value = d.data.value if d.data.value
xtra: (d) ->
$( d.find "content3" ).keyup (e) ->
(d.find "bt0").trigger() if e.which is 13
}
this.OS.register "BloggerCategoryDialog", BloggerCategoryDialog

View File

@ -12,11 +12,16 @@ class Blogger extends this.OS.GUI.BaseApplication
] ]
@user = {} @user = {}
@cvlist = @find "cv-list" @cvlist = @find "cv-list"
@cvlist.set "ontreeselect", (d) ->
#console.log d
@bloglist = @find "blog-list" @bloglist = @find "blog-list"
@userdb = new @_api.DB("user")
@cvcatdb = new @_api.DB("cv_cat")
@tabbar.set "onlistselect", (e) -> @tabbar.set "onlistselect", (e) ->
($ el).hide() for el in me.containers ($ el).hide() for el in me.containers
me.fetchData e.idx me.fetchData e.idx
($ me.containers[e.idx]).show() ($ me.containers[e.idx]).show()
me.trigger "calibrate"
@tabbar.set "items", [ @tabbar.set "items", [
{ iconclass: "fa fa-user-circle", selected: true }, { iconclass: "fa fa-user-circle", selected: true },
@ -25,29 +30,90 @@ class Blogger extends this.OS.GUI.BaseApplication
] ]
(@find "bt-user-save").set "onbtclick", (e) -> (@find "bt-user-save").set "onbtclick", (e) ->
me.saveUser() me.saveUser()
(@find "cv-cat-add").set "onbtclick", (e) ->
me.openDialog "BloggerCategoryDialog",
(d) ->
c =
name: d.value,
pid: d.p.id,
publish: 1
me.cvcatdb.save c, (r) ->
me.error "Cannot add new category" if r.error
me.refreshCVCat()
#update the list
, "Add category", { tree: me.cvlist.get "data" }
(@find "cv-cat-edit").set "onbtclick", (e) ->
cat = me.cvlist.get "selectedItem"
return unless cat
me.openDialog "BloggerCategoryDialog", (d) ->
c =
id: cat.id,
publish: cat.publish,
pid: d.p.id,
name: d.value
me.cvcatdb.save c, (r) ->
me.error "Cannot Edit category" if r.error
me.refreshCVCat()
, "Edit category", { tree: (me.cvlist.get "data"), cat: cat }
(@find "cv-cat-del").set "onbtclick", (e) ->
cat = me.cvlist.get "selectedItem"
return unless cat
me.openDialog "YesNoDialog",
(d) ->
return unless d
console.log "delete all child + theirs content"
, "Delete cagegory" ,
{ iconclass: "fa fa-question-circle", text: "Do you really want to delete: #{cat.name} ?" }
fetchData: (idx) -> fetchData: (idx) ->
me = @ me = @
switch idx switch idx
when 0 #user info when 0 #user info
db = new @_api.DB("user")
db.get null, (d) -> @userdb.get null, (d) ->
return me.error "Cannot fetch user data" if d.error return me.error "Cannot fetch user data" if d.error
me.user = d.result[0] me.user = d.result[0]
inputs = me.select "[imput-class='user-input']" inputs = me.select "[imput-class='user-input']"
($ v).val me.user[v.name] for v in inputs ($ v).val me.user[v.name] for v in inputs
when 1 # category
@refreshCVCat()
else else
console.log "Not implemented yet" console.log "Not implemented yet"
refreshCVCat: () ->
me = @
data =
name: "Porfolio",
id:0,
nodes: []
@cvcatdb.get null, (d) ->
return me.notify "Cannot fetch CV categories" if d.error
me.fetchCVCat d.result, data, "0"
me.cvlist.set "data", data
it = (me.cvlist.find "pid", "2")[0]
me.cvlist.set "selectedItem", it
fetchCVCat: (table, data, id) ->
result = (v for v in table when v.pid is id)
return data.nodes = null if result.length is 0
for v in result
v.nodes = []
@fetchCVCat table, v, v.id
#v.nodes = null if v.nodes.length is 0
data.nodes.push v
saveUser:() -> saveUser:() ->
me = @ me = @
inputs = @select "[imput-class='user-input']" inputs = @select "[imput-class='user-input']"
@user[v.name] = ($ v).val() for v in inputs @user[v.name] = ($ v).val() for v in inputs
return @notify "Full name must be entered" if not @user.fullname or @user.fullname is "" return @notify "Full name must be entered" if not @user.fullname or @user.fullname is ""
db = new @_api.DB("user") #console.log @user
console.log @user @userdb.save @user, (r) ->
db.save @user, (r) ->
return me.error "Cannot save user data" if r.error return me.error "Cannot save user data" if r.error
return me.notify "User data updated" return me.notify "User data updated"

View File

@ -4,13 +4,13 @@ afx-app-window[data-id="blogger-win"] afx-list-view[data-id="tabbar"] {
background-color: #333333; background-color: #333333;
} }
afx-app-window[data-id="blogger-win"] afx-list-view[data-id="tabbar"] li { afx-app-window[data-id="blogger-win"] afx-list-view[data-id="tabbar"] > div > ul > li {
background-color: #333333; background-color: #333333;
font-size: 20px; font-size: 20px;
color: #929292; color: #929292;
} }
afx-app-window[data-id="blogger-win"] afx-list-view[data-id="tabbar"] li.selected{ afx-app-window[data-id="blogger-win"] afx-list-view[data-id="tabbar"] > div > ul > li.selected{
color:white; color:white;
} }
afx-app-window[data-id="blogger-win"] afx-hbox[data-id="user-container"] { afx-app-window[data-id="blogger-win"] afx-hbox[data-id="user-container"] {
@ -22,4 +22,21 @@ afx-app-window[data-id="blogger-win"] afx-hbox[data-id="user-container"] afx-hbo
} }
afx-app-window[data-id="blogger-win"] afx-hbox[data-id="user-container"] afx-label{ afx-app-window[data-id="blogger-win"] afx-hbox[data-id="user-container"] afx-label{
font-weight: bold; font-weight: bold;
} }
afx-app-window[data-id="blogger-win"] afx-hbox.cv-side-bar-btn{
padding-left:3px;
padding-top:3px;
background-color: #f6F6F6;
border-top: 1px solid #cbcbcb;
color:#414339;
}
afx-app-window[data-id="blogger-win"] afx-resizer{
border-left: 1px solid #cbcbcb;
background-color: transparent;
}
afx-app-window[data-id="blogger-win"] afx-hbox[data-id="cv-container"] afx-label.cat-header{
background-color: #f6F6F6;
border-bottom: 1px solid #cbcbcb;
text-align: center;
}

View File

@ -1,8 +1,8 @@
<afx-app-window data-id = "blogger-win" apptitle="MarketPlace" width="500" height="400"> <afx-app-window data-id = "blogger-win" apptitle="Blogger" width="500" height="500">
<afx-hbox > <afx-hbox >
<afx-list-view data-id="tabbar" data-width="30"></afx-list-view> <afx-list-view data-id="tabbar" data-width="30"></afx-list-view>
<afx-vbox> <afx-vbox>
<afx-hbox data-id="user-container" data-height="grow"> <afx-hbox data-id="user-container" data-height="100%">
<afx-vbox> <afx-vbox>
<afx-hbox data-height = "30"> <afx-hbox data-height = "30">
<afx-label data-width= "70" text = "Full name:"></afx-label> <afx-label data-width= "70" text = "Full name:"></afx-label>
@ -25,20 +25,29 @@
<input type = "text" name="url" imput-class = "user-input"/> <input type = "text" name="url" imput-class = "user-input"/>
</afx-hbox> </afx-hbox>
<afx-label data-height = "30" text = "Short biblio:"/> <afx-label data-height = "30" text = "Short biblio:"/>
<textarea rows="10" name="shortbiblio" imput-class = "user-input"/> <textarea name="shortbiblio" imput-class = "user-input"/>
<afx-hbox data-height = "30"> <afx-hbox data-height = "35">
<div></div> <div></div>
<afx-button iconclass = "fa fa-save" data-id = "bt-user-save" data-width="55" text = "Save"/> <afx-button iconclass = "fa fa-save" data-id = "bt-user-save" data-width="55" text = "Save"/>
</afx-hbox> </afx-hbox>
</afx-vbox> </afx-vbox>
</afx-hbox> </afx-hbox>
<afx-hbox data-id="cv-container" data-height="grow"> <afx-hbox data-id="cv-container" data-height="100%">
<afx-list-view data-id = "cv-list" data-width="100" ></afx-list-view> <afx-vbox data-width="150" min-width="100">
<afx-label class = "cat-header" data-height = "23" text = "Categories" iconclass = "fa fa-bars"></afx-label>
<afx-tree-view data-id = "cv-list" ></afx-tree-view>
<afx-hbox data-height="30" class = "cv-side-bar-btn">
<afx-button data-id = "cv-cat-add" data-width = "25" text = "" iconclass = "fa fa-plus-circle"></afx-button>
<afx-button data-id = "cv-cat-del" data-width = "25" text = "" iconclass = "fa fa-minus-circle"></afx-button>
<afx-button data-id = "cv-cat-edit" data-width = "25" text = "" iconclass = "fa fa-pencil-square-o"></afx-button>
</afx-hbox>
</afx-vbox>
<afx-resizer data-width = "3"/>
<afx-vbox> <afx-vbox>
info here info here
</afx-vbox> </afx-vbox>
</afx-hbox> </afx-hbox>
<afx-hbox data-id = "blog-container" data-height="grow"> <afx-hbox data-id = "blog-container" data-height="100%">
<afx-list-view data-id = "blog-list" data-width="100"></afx-list-view> <afx-list-view data-id = "blog-list" data-width="100"></afx-list-view>
<afx-vbox> <afx-vbox>
blog here blog here

View File

@ -23,7 +23,7 @@ class DummyApp extends this.OS.GUI.BaseApplication
tdata = { tdata = {
name: 'My Tree', name: 'My Tree',
nodes: [ nodes: [
{ name: 'hello', icon:'fa fa-car'}, { name: 'hello', iconclass:'fa fa-car'},
{ name: 'wat' }, { name: 'wat' },
{ {
name: 'child folder', name: 'child folder',
@ -48,7 +48,7 @@ class DummyApp extends this.OS.GUI.BaseApplication
} }
] ]
} }
tree.set "*",tdata tree.set "data",tdata
list = @find "mylist" list = @find "mylist"
ldata = [ ldata = [
@ -58,7 +58,7 @@ class DummyApp extends this.OS.GUI.BaseApplication
{text:"some thing"}, {text:"some thing"},
{text:"some thing"}, {text:"some thing"},
{text:"some thing"}, {text:"some thing"},
{text:"some thing"}, {text:"some thing", complex:true, content:[{text:"Inner content", class:""}]},
{text:"some thing"}, {text:"some thing"},
{text:"some thing"}, {text:"some thing"},
{text:"some thing"}, {text:"some thing"},

View File

@ -22,7 +22,7 @@ afx-app-window[data-id="notepad"] .afx-window-content {
background-color: #f6F6F6; background-color: #f6F6F6;
} }
afx-tab-container[data-id="tabarea"] afx-list-view li { afx-tab-container[data-id="tabarea"] afx-list-view > div.list-container > ul > li {
background-color: #dfdfdf; background-color: #dfdfdf;
color:#272822; color:#272822;
border: 0; border: 0;
@ -39,7 +39,7 @@ afx-tab-container[data-id="tabarea"] afx-list-view{
/*afx-tab-container[data-id="tabarea"] afx-list-view i.closable:before{ /*afx-tab-container[data-id="tabarea"] afx-list-view i.closable:before{
color: white; color: white;
}*/ }*/
afx-tab-container[data-id="tabarea"] afx-list-view li.selected { afx-tab-container[data-id="tabarea"] afx-list-view > div.list-container > ul > li.selected {
background-color: #f6F6F6; background-color: #f6F6F6;
border-radius: 0; border-radius: 0;
} }

View File

@ -12,7 +12,7 @@ afx-file-view div.status{
border-top: 1px solid #cbcbcb; border-top: 1px solid #cbcbcb;
color:#414339; color:#414339;
} }
afx-file-view afx-list-view li{ afx-file-view afx-list-view > div.list-container > ul > li{
float:left; float:left;
display: block; display: block;
width:70px; width:70px;
@ -23,7 +23,7 @@ afx-file-view afx-list-view li{
margin-right: 5px; margin-right: 5px;
margin-bottom: 5px; margin-bottom: 5px;
} }
afx-file-view afx-list-view li:nth-child(odd){ afx-file-view afx-list-view > div.list-container > ul > li:nth-child(odd){
background-color: transparent; background-color: transparent;
} }
afx-file-view afx-list-view i.dir:before{ afx-file-view afx-list-view i.dir:before{
@ -51,7 +51,7 @@ afx-file-view afx-list-view i.file:before{
font-weight: normal; font-weight: normal;
} }
afx-file-view afx-list-view li.selected, afx-file-view afx-list-view li.selected i:before { afx-file-view afx-list-view > div.list-container > ul > li.selected, afx-file-view afx-list-view div.list-container > ul li.selected i:before {
background-color: #116cd6; background-color: #116cd6;
color:white; color:white;
border-radius: 6px; border-radius: 6px;

View File

@ -11,12 +11,12 @@ afx-list-view div.list-container{
position: relative; position: relative;
background-color: red; background-color: red;
}*/ }*/
afx-list-view ul{ afx-list-view > div.list-container > ul{
margin:0; margin:0;
padding: 0; padding: 0;
} }
afx-list-view li{ afx-list-view > div.list-container > ul > li{
margin:0; margin:0;
padding:0; padding:0;
list-style: none; list-style: none;
@ -29,7 +29,7 @@ afx-list-view li{
-webkit-user-select:none; -webkit-user-select:none;
cursor:default; cursor:default;
} }
afx-list-view li:nth-child(odd){ afx-list-view > div.list-container > ul >li:nth-child(odd){
background-color: #f5F5F5; background-color: #f5F5F5;
} }
afx-list-view i.closable{ afx-list-view i.closable{
@ -49,11 +49,11 @@ afx-list-view i.closable:before{
top:5px; top:5px;
} }
afx-list-view li > i { afx-list-view > div.list-container > ul > li > i {
margin-right: 3px; margin-right: 3px;
} }
afx-list-view li.selected { afx-list-view > div.list-container > ul > li.selected {
background-color: #116cd6; background-color: #116cd6;
color:white; color:white;
} }
@ -76,20 +76,20 @@ afx-list-view.dropdown {
padding:0; padding:0;
margin: 0; margin: 0;
} }
afx-list-view.dropdown div.list-container ul{ afx-list-view.dropdown > div.list-container > ul{
max-height: 150px; max-height: 150px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
background-color: white; background-color: white;
} }
afx-list-view.dropdown div.list-container ul{ afx-list-view.dropdown > div.list-container > ul{
border:1px solid #a6a6a6; border:1px solid #a6a6a6;
box-shadow: 1px 1px 1px #9f9F9F; box-shadow: 1px 1px 1px #9f9F9F;
border-radius: 3px; border-radius: 3px;
padding:2px; padding:2px;
border-top-left-radius: 0px; border-top-left-radius: 0px;
} }
afx-list-view.dropdown div.list-container ul li{ afx-list-view.dropdown > div.list-container > ul > li{
display: inline-block; display: inline-block;
width:100%; width:100%;
} }
@ -112,8 +112,18 @@ afx-list-view.dropdown div.list-container div:before {
top:25%; top:25%;
right: 5px; right: 5px;
} }
afx-list-view.dropdown div.list-container ul li:hover{ afx-list-view.dropdown > div.list-container > ul > li:hover{
background-color: #dcdcdc; background-color: #dcdcdc;
color: #414339; color: #414339;
} }
afx-list-view ul.complex-content{
padding: 0;
margin: 0;
background-color: transparent;
}
afx-list-view ul.complex-content li{
padding:0;
background-color: transparent;
color:#5e5f59;
list-style: none;
}