afx-list-view now can add action buttons

src/core/BaseDialog.coffee

@@ -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: "afx-label" },
-                { tag: "input", att: "type = 'text'" }
+                { tag: "input", att: "type = 'text' data-height='25'" }
             ],
             width: 200,
-            height: 100,
+            height: 120,
             resizable: false,
             buttons: [
                 {

src/core/schemes/filedialog.html

@@ -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>

src/core/tags/afx-list-view.tag

@@ -1,16 +1,18 @@
-<afx-list-view class = {dropdown: opts.dropdown == "true"}>
+<afx-list-view class = {dropdown: opts.dropdown == "true"} style = "display:flex; flex-direction:column">
-    <div class = "list-container" ref = "container">
+    <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 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">
+    <div if = {opts.dropdown != "true" && buttons} class = "button_container">
-        <li each={item,i in items } class={selected: parent._autoselect(item,i)} ondblclick = {parent._dbclick}  onclick = {parent._select} oncontextmenu = {parent._select}>
+        <afx-button each = {btn,i in buttons} text = {btn.text} icon = {btn.icon} iconclass = {btn.icon} onbtclick = {btn.onbtclick}></afx-button>
-            <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>
     <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)

src/packages/MarketPlace/dialog.coffee

@@ -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) ->
+        @list.set "buttons", [
-            me.openDialog "PromptDialog", (e) ->
+            {
-                m = e.match /\[([^\]]*)\]\s*(.*)/
+                text: "+",
-                return me.error __("Wrong format: it should be [name] url") if not m or m.length isnt 3
+                onbtclick: () ->
-                me.systemsetting.system.repositories.push {
+                    me.openDialog "PromptDialog", (e) ->
-                    name: m[1],
+                        m = e.match /\[([^\]]*)\]\s*(.*)/
-                    url: m[2],
+                        return me.error __("Wrong format: it should be [name] url") if not m or m.length isnt 3
-                    text: m[1],
+                        me.systemsetting.system.repositories.push {
-                    i: me.systemsetting.system.repositories.length
+                            name: m[1],
-                }
+                            url: m[2],
-                me.refreshList()
+                            text: m[1],
-            , __("Add repository"), { label: __("Format : [name] url") }
+                            i: me.systemsetting.system.repositories.length
-        (@find "btdel").set "onbtclick", (e) ->
+                        }
-            selidx = me.list.get "selidx"
+                        me.refreshList()
-            return unless  selidx >= 0
+                    , __("Add repository"), { label: __("Format : [name] url") }
-            me.systemsetting.system.repositories.splice selidx, selidx
+            },
-            me.refreshList()
+            {
+                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">
+            <div style = "text-align:right; padding:5px" data-height="30" >
-                <afx-button data-id = "btadd" text = "[+]" data-width="30"></afx-button>
+                <afx-button data-id = "btquit" text = "__(Cancel)"></afx-button>
-                <afx-button data-id = "btdel" text = "[-]" data-width="30"></afx-button>
+            </div>
-                <div></div>
-                <afx-button data-id = "btquit" text = "__(Cancel)" data-width="50"></afx-button>
-            </afx-hbox>
         </afx-vbox>
     </afx-app-window>
 """

src/packages/MarketPlace/main.css

@@ -61,3 +61,7 @@ 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;
+}

src/packages/Setting/AppearanceHandler.coffee

@@ -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 = [

src/packages/Setting/main.css

@@ -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;

src/packages/Setting/schemes/appearance.html

@@ -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-vbox>
-            </afx-hbox>
+                    <div data-id = "wp-preview"></div>
-            <div data-height="5"></div>
+                    <div data-height="5"></div>
-            <afx-hbox data-height="30">
+                    <afx-hbox data-height="25">
-                <afx-button data-width="130" text= "__(Add)"></afx-button>
+                        <afx-list-view data-id = "wpsize"  dropdown="true"></afx-list-view>
-                <afx-list-view data-id = "wpsize"  dropdown="true"></afx-list-view>
+                        <div data-width="5"></div>
-                <div data-width="5"></div>
+                        <afx-list-view data-id = "wprepeat"  dropdown="true"></afx-list-view>
-                <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>

src/themes/antos/afx-list-view.css

@@ -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;
+
+}