afx-list-view now can add action buttons

This commit is contained in:
Xuan Sang LE 2018-03-12 11:33:33 +01:00
parent 6c7aec69b7
commit 7fd6492a31
9 changed files with 94 additions and 55 deletions

View File

@ -57,9 +57,9 @@ class BasicDialog extends BaseDialog
html = "<afx-app-window data-id = 'dia-window' width='#{@conf.width}' height='#{@conf.height}'>
<afx-vbox>"
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 = '30' 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 += "</div><div data-height='5'></div></afx-vbox></afx-app-window>"
html += "</div><div data-height='2'></div></afx-vbox></afx-app-window>"
#render the html
_GUI.htmlToScheme html, @, @host
@ -80,11 +80,11 @@ class PromptDialog extends BasicDialog
constructor: () ->
super "PromptDialog", {
tags: [
{ tag: "afx-label", att: "data-height = '20'" },
{ tag: "input", att: "type = 'text'" }
{ tag: "afx-label" },
{ tag: "input", att: "type = 'text' data-height='25'" }
],
width: 200,
height: 100,
height: 120,
resizable: false,
buttons: [
{

View File

@ -4,7 +4,7 @@
<afx-vbox>
<afx-file-view data-id = "fileview" view='tree' status = false></afx-file-view>
<input data-height = '26' type = "text" data-id = "filename" style="margin-left:5px; margin-right:5px;display:none;" />
<div data-height = '30' style=' text-align:right;padding-top:3px;'>
<div data-height = '30' style=' text-align:right;padding:3px;'>
<afx-button data-id = "bt-ok" text = "__(Ok)"></afx-button>
<afx-button data-id = "bt-cancel" text = "__(Cancel)"></afx-button>
</div>

View File

@ -1,16 +1,18 @@
<afx-list-view class = {dropdown: opts.dropdown == "true"}>
<div class = "list-container" ref = "container">
<div if = {opts.dropdown == "true"} ref = "current" style = {opts.width?"min-width:" + opts.width + "px;":""} onclick = {show_list}>
<afx-list-view class = {dropdown: opts.dropdown == "true"} style = "display:flex; flex-direction:column">
<div class = "list-container" ref = "container" style="flex:1;">
<div if = {opts.dropdown == "true"} ref = "current" style = {opts.width?"min-width:" + opts.width + "px;":""} onclick = {show_list}></div>
<ul ref = "mlist" >
<li each={item,i in items } class={selected: parent._autoselect(item,i)} ondblclick = {parent._dbclick} onclick = {parent._select} oncontextmenu = {parent._select}>
<afx-label class = {item.class} color = {item.color} iconclass = {item.iconclass} icon = {item.icon} text = {item.text}></afx-label>
<i if = {item.closable} class = "closable" click = {parent._remove}></i>
<ul if = {item.complex} class = "complex-content">
<li each = {ctn,j in item.detail} class = {ctn.class}>{ctn.text}</li>
</ul>
</li>
</ul>
</div>
<ul ref = "mlist">
<li each={item,i in items } class={selected: parent._autoselect(item,i)} ondblclick = {parent._dbclick} onclick = {parent._select} oncontextmenu = {parent._select}>
<afx-label class = {item.class} color = {item.color} iconclass = {item.iconclass} icon = {item.icon} text = {item.text}></afx-label>
<i if = {item.closable} class = "closable" click = {parent._remove}></i>
<ul if = {item.complex} class = "complex-content">
<li each = {ctn,j in item.detail} class = {ctn.class}>{ctn.text}</li>
</ul>
</li>
</ul>
<div if = {opts.dropdown != "true" && buttons} class = "button_container">
<afx-button each = {btn,i in buttons} text = {btn.text} icon = {btn.icon} iconclass = {btn.icon} onbtclick = {btn.onbtclick}></afx-button>
</div>
<script>
this.items = opts.items || []
@ -19,6 +21,7 @@
self.onlistselect = opts.onlistselect
self.onlistdbclick = opts.onlistdbclick
self.onitemclose = opts.onitemclose
self.buttons = opts.buttons
var onclose = false
this.rid = $(self.root).attr("data-id") || Math.floor(Math.random() * 100000) + 1
self.root.set = function(k,v)

View File

@ -22,23 +22,33 @@ class RepositoryDialog extends this.OS.GUI.BaseDialog
me.refreshList()
, __("Edit repository"), { label: __("Format : [name] url"), value: "[#{e.data.text}] #{e.data.url}" }
(@find "btadd").set "onbtclick", (e) ->
me.openDialog "PromptDialog", (e) ->
m = e.match /\[([^\]]*)\]\s*(.*)/
return me.error __("Wrong format: it should be [name] url") if not m or m.length isnt 3
me.systemsetting.system.repositories.push {
name: m[1],
url: m[2],
text: m[1],
i: me.systemsetting.system.repositories.length
}
me.refreshList()
, __("Add repository"), { label: __("Format : [name] url") }
(@find "btdel").set "onbtclick", (e) ->
selidx = me.list.get "selidx"
return unless selidx >= 0
me.systemsetting.system.repositories.splice selidx, selidx
me.refreshList()
@list.set "buttons", [
{
text: "+",
onbtclick: () ->
me.openDialog "PromptDialog", (e) ->
m = e.match /\[([^\]]*)\]\s*(.*)/
return me.error __("Wrong format: it should be [name] url") if not m or m.length isnt 3
me.systemsetting.system.repositories.push {
name: m[1],
url: m[2],
text: m[1],
i: me.systemsetting.system.repositories.length
}
me.refreshList()
, __("Add repository"), { label: __("Format : [name] url") }
},
{
text: "-",
onbtclick: () ->
selidx = me.list.get "selidx"
return unless selidx >= 0
me.systemsetting.system.repositories.splice selidx, selidx
me.refreshList()
}
]
(@find "btquit").set "onbtclick", (e) -> me.quit()
@refreshList()
refreshList: () ->
@ -57,12 +67,9 @@ RepositoryDialog.scheme = """
<afx-app-window data-id = "repository-dialog-win" apptitle="__(Repositories)" width="250" height="250">
<afx-vbox >
<afx-list-view data-id="repo-list"></afx-list-view>
<afx-hbox data-height = "30">
<afx-button data-id = "btadd" text = "[+]" data-width="30"></afx-button>
<afx-button data-id = "btdel" text = "[-]" data-width="30"></afx-button>
<div></div>
<afx-button data-id = "btquit" text = "__(Cancel)" data-width="50"></afx-button>
</afx-hbox>
<div style = "text-align:right; padding:5px" data-height="30" >
<afx-button data-id = "btquit" text = "__(Cancel)"></afx-button>
</div>
</afx-vbox>
</afx-app-window>
"""

View File

@ -60,4 +60,8 @@ afx-app-window[data-id="marketplace-win"] ul[data-id='app-detail'] span{
}
afx-app-window[data-id="marketplace-win"] span.info-header{
font-weight: bold;
}
afx-app-window[data-id = "repository-dialog-win"] afx-list-view[data-id="repo-list"] ul.complex-content > li{
font-size: 11px;
font-style: italic;
}

View File

@ -7,7 +7,18 @@ class AppearanceHandler extends SettingHandler
@wpsize = @find "wpsize"
@wprepeat = @find "wprepeat"
@themelist = @find "theme-list"
@wpsize.set "onlistselect", (e)->
@wplist.set "onlistselect", (e) ->
$(me.wpreview).css("background-image", "url(#{me.parent._api.handler.get}/#{e.data.path})" )
.css("background-size", "cover")
me.parent.systemsetting.appearance.wp.url = e.data.path
me.parent._gui.wallpaper()
@wplist.set "buttons", [
{ text: "+", onbtclick: (e) -> console.log "click +" }
]
@wpsize.set "onlistselect", (e) ->
me.parent.systemsetting.appearance.wp.size = e.data.text
me.parent._gui.wallpaper()
@ -17,11 +28,6 @@ class AppearanceHandler extends SettingHandler
{ text: "contain", selected: me.parent.systemsetting.appearance.wp.size is "contain" }
]
@wpsize.set "items", sizes
@wplist.set "onlistselect", (e) ->
$(me.wpreview).css("background-image", "url(#{me.parent._api.handler.get}/#{e.data.path})" )
.css("background-size", "cover")
me.parent.systemsetting.appearance.wp.url = e.data.path
me.parent._gui.wallpaper()
repeats = [

View File

@ -24,6 +24,7 @@ afx-app-window[data-id = "setting-window"] afx-vbox[data-id="appearance"] div[da
afx-app-window[data-id = "setting-window"] afx-vbox[data-id="appearance"] afx-list-view[data-id="wplist"]
{
border:1px solid #cbcbcb;
padding:2px;
}
afx-app-window[data-id = "setting-window"] afx-vbox[data-id="appearance"] afx-resizer{
border:0;

View File

@ -7,14 +7,15 @@
<afx-hbox>
<afx-list-view data-width="120" data-id="wplist"></afx-list-view>
<afx-resizer data-width="5"></afx-resizer>
<div data-id = "wp-preview"></div>
</afx-hbox>
<div data-height="5"></div>
<afx-hbox data-height="30">
<afx-button data-width="130" text= "__(Add)"></afx-button>
<afx-list-view data-id = "wpsize" dropdown="true"></afx-list-view>
<div data-width="5"></div>
<afx-list-view data-id = "wprepeat" dropdown="true"></afx-list-view>
<afx-vbox>
<div data-id = "wp-preview"></div>
<div data-height="5"></div>
<afx-hbox data-height="25">
<afx-list-view data-id = "wpsize" dropdown="true"></afx-list-view>
<div data-width="5"></div>
<afx-list-view data-id = "wprepeat" dropdown="true"></afx-list-view>
</afx-hbox>
</afx-vbox>
</afx-hbox>
<div data-height="5"></div>
<afx-label text = "__(Theme)" iconclass = "fa fa-window-restore" class = "header" data-height="23"></afx-label>

View File

@ -133,3 +133,20 @@ afx-list-view ul.complex-content li{
afx-list-view > div.list-container > ul > li.selected ul.complex-content li{
color:white;
}
/*
afx-list-view div.button_container {
padding-top:2px;
border-top:1px solid #cbcbcb;
}
*/
afx-list-view div.button_container afx-button{
margin-right: 2px;
}
afx-list-view div.button_container afx-button button{
border-radius: 0;
padding-left:5px;
padding-top:1px;
padding-bottom: 1px;
padding-right: 5px;
}