add page.AppendFigure

lib/base.js

@@ -12,8 +12,8 @@ Volcanos("base", {help: "基础模块",
     Duration: function(n) {var res = "", h = 0;
         h = parseInt(n/3600000), h > 0 && (res += h+"h"), n = n % 3600000;
         h = parseInt(n/60000), h > 0 && (res += h+"m"), n = n % 60000;
-        h = parseInt(n/1000), h > 0 && (res += h+"s"), n = n % 1000;
-        return n > 0? res + n: res;
+        h = parseInt(n/1000), h > 0 && (res += h), n = n % 1000;
+        return res + (n > 0? "."+parseInt(n/10): "") + "s";
     },
     Format: shy("数据格式化", function(obj) {return JSON.stringify(obj)}),
     Number: shy("数字格式化", function(d, n) {var result = [];
@@ -22,6 +22,18 @@ Volcanos("base", {help: "基础模块",
         result.reverse();
         return result.join("");
     }),
+    Size: function(size) {size = parseInt(size)
+        if (size > 1000000000) {
+            return parseInt(size / 1000000000) + "." + parseInt(size / 10000000 % 100) + "G"
+        }
+        if (size > 1000000) {
+            return parseInt(size / 1000000) + "." + parseInt(size / 10000 % 100) + "M"
+        }
+        if (size > 1000) {
+            return parseInt(size / 1000) + "." + parseInt(size / 10 % 100) + "M"
+        }
+        return size + "B"
+    },
     Time: shy("时间格式化", function(t, fmt) {var now = t? new Date(t): new Date();
         fmt = fmt || "%y-%m-%d %H:%M:%S";
         fmt = fmt.replace("%y", now.getFullYear())

lib/misc.js

@@ -18,6 +18,9 @@ Volcanos("misc", {help: "工具模块",
                 can.core.List(value, function(item) {data.append(key, item)});
             })
             data.append("upload", msg.upload);
+            xhr.upload.onprogress = function(event) {
+                typeof msg._progress == "function" && msg._progress(event, parseInt(event.loaded/event.total*100), event.total, event.loaded)
+            }
         } else {
             // 表单参数
             var data = can.core.Items(form, function(value, index, key) {
@@ -30,6 +33,7 @@ Volcanos("misc", {help: "工具模块",
         ++arguments.callee.meta.order
         xhr.setRequestHeader("Accept", "application/json")
         xhr.send(data)
+        msg._xhr = xhr
     }),
     Run: shy("请求后端", {order: 0}, function(event, can, dataset, cmd, cb) {
         var msg = can.Event(event);

lib/page.js

@@ -190,10 +190,12 @@ Volcanos("page", {help: "网页模块",
         })
     }),
     AppendField: shy("添加插件", function(can, target, type, item) {
+        typeof item.help == "string" && item.help.startsWith("[") && (item.help = JSON.parse(item.help))
+
         var dataset = {}; item && item.name && (dataset.names = item.name);
         var field = can.page.Append(can, target, [{view: [type, "fieldset"], list: [
-            item.pos? undefined: {text: [(item.nick||item.name||"")+"("+(item.help||"")+")", "legend"]},
-            {view: ["option", "form"], dataset: dataset, list: [{type: "input", style: {display: "none"}}]},
+            item.pos? undefined: {text: [(item.nick||item.name||"")+"("+((typeof item.help == "string"? item.help: item.help.length > 0 && item.help[0])||"")+")", "legend"]},
+            {view: ["option", "form"], dataset: dataset, list: []},
             {view: ["action"]}, {view: ["output"]}, {view: ["status"]},
         ]}]).first;
         return field.Meta = item, field;
@@ -262,14 +264,22 @@ Volcanos("page", {help: "网页模块",
         })
     },
 
+    AppendFigure: shy("添加控件", function(event, can, cmd, name) {if (can.figure) {return}
+        return can.figure = can.page.Append(can, document.body, [{view: ["input "+cmd+" "+name, "fieldset"], style: {
+            position: "absolute", left: event.clientX+"px", top: event.clientY+10+"px",
+        }, list: [{text: [name||cmd, "legend"]}, {view: ["action"]}, {view: ["output"]}], onmouseleave: function(event) {
+            if (can.figure.stick) {return}
+            can.page.Remove(can, can.figure.first); delete(can.figure);
+        }}])
+    }),
     AppendAction: shy("添加控件", function(can, action, list, cb) {
         return can.page.Append(can, action, can.core.List(list, function(line) {
-            return typeof line == "string"? {button: [line, cb]}: line.length > 0? {select: [line, cb]}:
+            return line.type == "br"? line: {view: "item", list: [typeof line == "string"? {button: [line, cb]}: line.length > 0? {select: [line, cb]}:
                 line.input && typeof line.input != "string" ? {input: [line.input[0], function(event) {
                     typeof line.input[1] == "function" && line.input[1](event, can)
                 }, function(event) {
                     typeof line.input[2] == "function" && line.input[2](event, can)
-                }]}: line
+                }]}: line]}
         }))
     }),
     AppendStatus: shy("添加控件", function(can, status, list, cb) {
@@ -311,20 +321,7 @@ Volcanos("page", {help: "网页模块",
             item.click()
         })
     },
-    Upload: function(can, url, form, file, cb) {
-        var data = new FormData()
-        can.core.Item(form, function(key, value) {
-            data.append(key, value)
-        })
-        data.append("upload", file)
-
-        var xhr = new XMLHttpRequest()
-        xhr.onreadystatechange = function() {
-        }
-        xhr.open("POST", url)
-        // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
-        xhr.setRequestHeader("Accept", "application/json")
-        xhr.send(data)
+    Upload: function(can, file, cb, cbs) {
     },
 
     DelText: function(target, start, count) {

plugin/input.js

@@ -1,43 +1,43 @@
 Volcanos("onimport", {help: "导入数据", list: [],
     init: shy("添加控件", function(can, item, name, value, option) {
         var input = {type: "input", name: name, data: item};
-        item.type = item.type || item._type || item._input;
-        switch (item.type) {
+        switch (item.type = item.type || item._type || item._input) {
             case "upfile": item.type = "file"; break
+            case "button": item.value = item.value || item.name; break
             case "select":
                 item.values = typeof item.values == "string"? item.values.split(" "): item.values;
                 input.type = "select", input.list = item.values.map(function(value) {
                     return {type: "option", value: value, inner: value};
                 })
-                item.value = value || item.value || item.values[0];
-                can.page.ClassList.add(can, item, "args");
+                item.className || can.page.ClassList.add(can, item, "args");
                 break
             case "textarea":
                 var half = parseFloat(item.half||"1")||1;
-                input.type = "textarea", item.style = "height:"+(item.height||"50px")+";width:"+parseInt(((500-35)/half))+"px";
+                input.type = "textarea", item.style = {
+                    // width: parseInt(((500-35)/half))+"px",
+                    // height: (item.height||50)+"px",
+                }
                 // no break
             case "password":
+                // no break
             case "text":
-                can.page.ClassList.add(can, item, "args");
+                item.className || can.page.ClassList.add(can, item, "args");
                 item.value = value || item.value || "";
                 item.autocomplete = "off";
                 break
-            case "button":
-                item.value = item.value || item.name;
         }
 
-        can.page.ClassList.add(can, item, item.view);
-        can.core.List((item.clist||"").split(" "), function(value) {
-            can.page.ClassList.add(can, item, value);
-        })
-
+        // can.page.ClassList.add(can, item, item.view);
+        // can.core.List((item.clist||"").split(" "), function(value) {
+        //     can.page.ClassList.add(can, item, value);
+        // })
+        //
         var target = can.Dream(option, "input", input)[input.name];
-
         !target.placeholder && (target.placeholder = item.name || "");
-        item.type == "text" && !target.title && (target.title = item.placeholder || item.name || "");
-        item.type == "button" && item.action == "auto" && can.run && can.run({});
+        item.type != "button" && !target.title && (target.title = item.placeholder || item.name || "");
         item.type == "textarea" && can.page.Append(can, option, [{type: "br"}])
-        item.type == "select" && (target.value = item.value)
+        item.type == "select" && (target.value = value || item.value || item.values[item.index||0])
+        item.type == "button" && item.action == "auto" && can.run && can.run({});
         return target;
     }),
     path: function(event, can, value, cmd, target) {
@@ -48,7 +48,8 @@ Volcanos("onfigure", {help: "控件交互", list: []})
 Volcanos("onaction", {help: "控件交互", list: [],
     onclick: function(event, can) {can.Select(event);
         var figure = can.onfigure[can.item.cb] || can.onfigure[can.item.figure]
-        figure? figure.click(event, can, can.item, can.item.name, event.target): can.item.type == "button" && can.run(event)
+        figure? can.page.AppendFigure(event, can, can.item.figure, can._name) && figure.click(event, can, can.item, can.item.name, event.target, can.figure):
+            can.item.type == "button" && can.run(event)
     },
     onchange: function(event, can) {
         can.item.type == "select" && can.item.action == "auto" && can.Runs(event)

plugin/input/date.js

@@ -1,40 +1,36 @@
 Volcanos("onfigure", {help: "控件详情", list: [],
-    date: {click: function(event, can, value, cmd, target) {if (can.date) {return}
+    date: {click: function(event, can, value, cmd, target, figure) {
+        // 设置输入
         target.style.width = "120px"
         function set(now) {
             target.value = can.base.Time(now); 
-            if (can.item.action == "auto") {
-                can.run({});
-            }
+            can.item.action == "auto" && can.run({});
         }
 
-        can.stick = false
-        can.now = target.value? new Date(target.value): new Date();
-        can.date = can.page.Append(can, document.body, [{view: ["date input", "fieldset"], style: {
-            position: "absolute", left: event.clientX+"px", top: event.clientY+10+"px",
-        }, onmouseleave: function(event) {
-            if (can.stick) {can.stick = false; return}
-            can.page.Remove(can, can.date); delete(can.date);
-        }}]).last
+        // 添加插件
+        figure.table = can.page.Append(can, figure.output, [{type: "table"}]).first
 
-        var action = can.page.Append(can, can.date, [{view: ["action"]}]).last
-        var control = can.page.AppendAction(can, action, ["今天", "随机",
+        // 添加控件
+        can.now = target.value? new Date(target.value): new Date();
+        var control = can.page.AppendAction(can, figure.action, ["今天", "随机",
             ["hour"].concat(can.core.List(24)), ["minute"].concat(can.core.List(0, 60, 5)), ["second"].concat(can.core.List(0, 60, 5)), {view: ["", "br"]},
-            "上一月", ["year"].concat(can.core.List(can.now.getFullYear() - 20, can.now.getFullYear() + 20)),
+            {type: "br"}, "上一月", ["year"].concat(can.core.List(can.now.getFullYear() - 20, can.now.getFullYear() + 20)),
             ["month"].concat(can.core.List(1, 13)), "下一月", {view: ["", "br"]},
         ], function(event, value, cmd) {can.stick = true;
+            // 设置时间
             switch (cmd) {
                 case "year": can.now.setFullYear(parseInt(value)); show(can.now); return;
                 case "month": can.now.setMonth(parseInt(value)-1); show(can.now); return;
-                case "hour": can.now.setHours(parseInt(value)); show(can.now); set(can.now); return;
-                case "minute": can.now.setMinutes(parseInt(value)); show(can.now); set(can.now); return;
-                case "second": can.now.setSeconds(parseInt(value)); show(can.now); set(can.now); return;
+                case "hour": can.now.setHours(parseInt(value)); set(show(can.now)); return;
+                case "minute": can.now.setMinutes(parseInt(value)); set(show(can.now)); return;
+                case "second": can.now.setSeconds(parseInt(value)); set(show(can.now)); return;
             }
 
+            // 设置日期
             switch (value) {
-                case "今天": can.now = new Date(); show(can.now); set(can.now); break;
-                case "随机": can.now.setDate((Math.random() * 100 - 50) + can.now.getDate()); show(can.now); set(can.now); break;
-                case "关闭":can.page.Remove(can, can.date); delete(can.date);
+                case "今天": can.now = new Date(); set(show(can.now)); break;
+                case "随机": can.now.setDate((Math.random() * 100 - 50) + can.now.getDate()); set(show(can.now)); break;
+                case "关闭": can.page.Remove(can, figure.first); delete(can.figure);
                 case "前一年": can.now.setFullYear(can.now.getFullYear()-1); show(can.now); break;
                 case "后一年": can.now.setFullYear(can.now.getFullYear()+1); show(can.now); break;
                 case "上一月": can.now.setMonth(can.now.getMonth()-1); show(can.now); break;
@@ -42,50 +38,35 @@ Volcanos("onfigure", {help: "控件详情", list: [],
             }
         })
 
-        var table = can.page.Append(can, can.date, [{type: "table"}]).table
-        function click(event) {
-            var day = new Date(parseInt(event.target.dataset.date))
-            can.now = day;
-            set(can.now);
-        }
         function show(now) {
+            // 设置控件
             control.month.value = now.getMonth()+1;
             control.year.value = now.getFullYear();
             control.hour.value = now.getHours();
             control.minute.value = parseInt(now.getMinutes()/5)*5;
             control.second.value = parseInt(now.getSeconds()/5)*5;
-            var meta = ["日", "一", "二", "三", "四", "五", "六"]
-            can.page.Appends(can, table, [{type: "tr", list: can.core.List(meta, function(day) {return {text: [day, "th"]}})}])
 
+            // 设置组件
+            can.page.Appends(can, figure.table, [{type: "tr", list: can.core.List(["日", "一", "二", "三", "四", "五", "六"], function(day) {return {text: [day, "th"]}})}])
+            var tr; function add(day, type) {if (day.getDay() == 0) {tr = can.page.Append(can, figure.table, [{type: "tr"}]).tr}
+                can.page.Append(can, tr, [{text: [day.getDate(), "td", can.base.Time(day).split(" ")[0] == can.base.Time(now).split(" ")[0]? "select": type],
+                    dataset: {date: day.getTime()}, click: function(event) {set(can.now = new Date(parseInt(event.target.dataset.date)))},
+                }])
+            }
+
+            // 时间区间
             var one = new Date(now); one.setDate(1);
             var end = new Date(now); end.setMonth(now.getMonth()+1); end.setDate(1);
             var head = new Date(one); head.setDate(one.getDate()-one.getDay());
             var tail = new Date(end); tail.setDate(end.getDate()+7-end.getDay());
 
-            var tr;
-            function add(day, type) {
-                if (day.getDay() == 0) {tr = can.page.Append(can, table, [{type: "tr"}]).tr}
-                can.page.Append(can, tr, [{className: can.base.Time(day).split(" ")[0] == can.base.Time(now).split(" ")[0]? "now": type,
-                    text: [day.getDate(), "td"], dataset: {date: day.getTime()}, click: click,
-                }])
-            }
+            // 时间序列
             for (var day = new Date(head); day < one; day.setDate(day.getDate()+1)) {add(day, "last")}
             for (var day = new Date(one); day < end; day.setDate(day.getDate()+1)) {add(day, "main")}
             for (var day = new Date(end); end.getDay() != 0 && day < tail; day.setDate(day.getDate()+1)) {add(day, "next")}
+            return now
         }
 
-        show(can.now);
-        set(can.now);
+        set(show(can.now));
     }},
-    _prepare: function(event, can, value, cmd, target) {if (can.figure) {return}
-        can.figure = can.page.Append(can, document.body, [{view: ["input "+cmd, "fieldset"], style: {
-            position: "absolute", left: "20px", top: event.clientY+10+"px",
-        }, list: [{text: [cmd, "legend"]}, {view: ["action"]}, {view: ["output"]}], onmouseleave: function(event) {
-            !can.figure.stick && can.onfigure._release(event, can, value, cmd, target)
-        }}])
-        return can.figure
-    },
-    _release: function(event, can, value, cmd, target) {
-        can.page.Remove(can, can.figure.first); delete(can.figure);
-    },
 })

plugin/input/key.js

@@ -1,32 +1,12 @@
 Volcanos("onfigure", {help: "控件详情", list: [],
-    key: {click: function(event, can, value, cmd, target) {
-        function add(msg, list, update) {
-            can.page.Append(can, can.figure.output, [{view: "list", list: can.core.List(list, function(item) {
-                return {text: [item, "div", "label"], onclick: function(event) {
-                    target.value = item;
-                    update && can.history.unshift(item);
-                    msg.Option("_refresh") && run()
-                }}
-            })}])
-        }
-        function run() {can.figure.output.innerHTML = ""
+    key: {click: function(event, can, value, cmd, target, figure) {
+        function run() {figure.output.innerHTML = ""
             can.Run(event, ["action", "input", can.item.name, target.value], function(msg) {
-                add(msg, can.history), can.core.List(msg.append, function(key) {add(msg, msg[key], true)})
+                can.page.AppendTable(can, figure.output, msg, msg.append, function(event, value, key, index, tr, td) {
+                    target.value = value; msg.Option("_refresh") && run()
+                })
             }, true)
         }
-
-        can.history = can.history || [];
-        can.onfigure._prepare(event, can, value, cmd ,target) && run()
+        run()
     }},
-    _prepare: function(event, can, value, cmd, target) {if (can.figure) {return}
-        can.figure = can.page.Append(can, document.body, [{view: ["input "+cmd, "fieldset"], style: {
-            position: "absolute", left: "20px", top: event.clientY+10+"px",
-        }, list: [{text: [cmd, "legend"]}, {view: ["action"]}, {view: ["output"]}], onmouseleave: function(event) {
-            !can.figure.stick && can.onfigure._release(event, can, value, cmd, target)
-        }}])
-        return can.figure
-    },
-    _release: function(event, can, value, cmd, target) {
-        can.page.Remove(can, can.figure.first); delete(can.figure);
-    },
 })

plugin/input/province.js

@@ -1,34 +1,18 @@
 Volcanos("onfigure", {help: "控件详情", list: [],
-    province: {click: function(event, can, value, cmd, target) {
-        if (can.figure) {return}
-        can.figure = can.page.Append(can, document.body, [{view: ["date input", "fieldset"], style: {
-            position: "absolute", left: "20px", top: event.clientY+10+"px",
-        }, onmouseleave: function(event) {
-            can.page.Remove(can, can.figure); delete(can.figure);
-        }}]).last
+    province: {click: function(event, can, value, cmd, target, figure) {
+        figure.fieldset.style.left = "20px"
+        figure.fieldset.style.top = "200px"
 
-        can.page.Append(can, can.figure, [{include: ["/plugin/github.com/shylinux/echarts/echarts.js", function(event) {
-            can.page.Append(can, can.figure, [{include: ["/plugin/github.com/shylinux/echarts/china.js", function(event) {
-                var china_chart = echarts.init(can.page.Append(can, can.figure, [{type: "div", style: {width: "600px", height: "400px"}}]).last);
+        var china_chart = echarts.init(can.page.Append(can, figure.output, [{type: "div", style: {width: "600px", height: "400px"}}]).last);
 
-                var option = {geo: {map: 'china'}};
-                china_chart.setOption(option);
+        var option = {geo: {map: 'china'}};
+        china_chart.setOption(option);
 
-                china_chart.on('click', function (params) {
-                    target.value = params.name;
-                });
-            }]}]);
-        }]}]);
+        china_chart.on('click', function (params) {
+            target.value = params.name;
+        });
     }},
-    _prepare: function(event, can, value, cmd, target) {if (can.figure) {return}
-        can.figure = can.page.Append(can, document.body, [{view: ["input "+cmd, "fieldset"], style: {
-            position: "absolute", left: "20px", top: event.clientY+10+"px",
-        }, list: [{text: [cmd, "legend"]}, {view: ["action"]}, {view: ["output"]}], onmouseleave: function(event) {
-            !can.figure.stick && can.onfigure._release(event, can, value, cmd, target)
-        }}])
-        return can.figure
-    },
-    _release: function(event, can, value, cmd, target) {
-        can.page.Remove(can, can.figure.first); delete(can.figure);
-    },
-})
+}, [
+    "/plugin/github.com/shylinux/echarts/echarts.js",
+    "/plugin/github.com/shylinux/echarts/china.js",
+])

plugin/input/upload.js

@@ -1,28 +1,35 @@
 Volcanos("onfigure", {help: "控件详情", list: [],
-    upload: {click: function(event, can, value, cmd, target) {
-        if (!can.onfigure._prepare(event, can, value, cmd, target)) {return}
-        can.figure.stick = true
-        var action = can.page.AppendAction(can, can.figure.action, [{type: "input", data: {name: "upload", type: "file"}}, "上传", "关闭"], function(event, value, cmd) {
-            switch (value) {
-                case "关闭": can.onfigure._release(event, can, value, cmd, target); return
-            }
+    upload: {click: function(event, can, value, cmd, target, figure) {figure.stick = true
+        var begin = new Date();
+        function show(event, value, total, loaded) {
+            var now = new Date(); can.page.Appends(can, figure.output, [
+                {view: ["progress"], style: {height: "10px", border: "solid 2px red"}, list: [{
+                    view: ["progress"], style: {height: "10px", width: value + "%", background: "red"},  
+                }]},
+                {text: [value+"%", "div"], style: {"float": "right"}},
+                {text: [can.base.Duration(now - begin), "div"], style: {"float": "left"}},
+                {text: [can.base.Size(loaded)+"/"+can.base.Size(total), "div"], style: {"text-align": "center"}},
+            ]);
+        }
 
-            var msg = can.Event(event);
-            msg.upload = action.upload.files[0]
-            can.run(event, ["action", "上传"], true, function(msg) {
-                can.user.toast("上传成功")
+        var action = can.page.AppendAction(can, figure.action, [
+            {type: "input", data: {name: "upload", type: "file", onchange: function(event) {
+                var file = action.upload.files[0]
+                console.log(file)
+                show(event, 0, file.size, 0)
+            }}, style: {width: "200px"}}, "上传", "关闭"], function(event, value, cmd) {
+                if (action.upload.files.length == 0) {return action.upload.focus()}
+                if (value == "关闭") {figure.stick = false; return}
+
+                var msg = can.Event(event);
+                msg._progress = show
+                begin = new Date();
+
+                // 上传文件
+                msg.upload = action.upload.files[0];
+                can.run(event, ["action", "upload"], function(msg) {
+                    can.user.toast("上传成功")
+                });
             })
-        })
     }},
-    _prepare: function(event, can, value, cmd, target) {if (can.figure) {return}
-        can.figure = can.page.Append(can, document.body, [{view: ["input "+cmd, "fieldset"], style: {
-            position: "absolute", left: "20px", top: event.clientY+10+"px",
-        }, list: [{text: [cmd, "legend"]}, {view: ["action"]}, {view: ["output"]}], onmouseleave: function(event) {
-            !can.figure.stick && can.onfigure._release(event, can, value, cmd, target)
-        }}])
-        return can.figure
-    },
-    _release: function(event, can, value, cmd, target) {
-        can.page.Remove(can, can.figure.first); delete(can.figure);
-    },
 })

proto.js

@@ -219,7 +219,7 @@ function Volcanos(name, can, libs, cb, msg) { // 封装模块
                     list.push(line)
                     break
             }
-            var ui = can.page.Append(can, target, item? list: [{view: ["item"+style], data: {id: "item"+can.ID(), draggable: false}, list:list}])
+            var ui = can.page.Append(can, target, item? list: [{view: ["item"+style], list:list}])
             return ui["item"+style].Meta = text, ui
         }),
         Cache: shy("缓存器", function(name, output, data) {

style.css

@@ -5,7 +5,6 @@ html, body {
     margin:0px;
 }
 fieldset {
-    position:relative;
     padding:0px;
     min-width:10px;
     overflow:auto;
@@ -17,27 +16,21 @@ legend {
 
 fieldset>form.option {
     padding:0 5px;
+}
+fieldset>form.option>br {
+    clear:both;
+}
+fieldset>form.option>div.item {
     margin-right:3px;
     float:left;
 }
-fieldset>form.option div {
-    margin-right:3px;
-    float:left;
-}
-fieldset>form.option div.hide {
-    display:none;
-}
-fieldset>form.option div.clear {
+fieldset>form.option>div.item.textarea {
+    margin-top:4px;
     clear:both;
 }
 fieldset>form.option label {
     margin-right:3px;
 }
-fieldset>form.option input.args.cmd {
-    color:white;
-    background-color: black;
-    width:160px;
-}
 fieldset>form.option input.args.char {
     width:20px;
 }
@@ -47,66 +40,57 @@ fieldset>form.option input.args.tiny {
 fieldset>form.option input.args {
     width:80px;
 }
+fieldset>form.option input.args.cmd {
+    background-color:black;
+    color:white;
+    width:160px;
+}
 fieldset>form.option input.args.long {
     width:240px;
 }
 fieldset>form.option input.args.full {
     width:480px;
 }
-fieldset>form.option div.item.textarea {
-    float:left;
-    clear:both;
+fieldset>form.option input.opts {
+    width:80px;
+}
+fieldset>form.option textarea.args {
+    width:300px;
+    height:50px;
 }
 fieldset>div.action {
     padding:6px;
     clear:both;
 }
-fieldset>div.action div.space {
+fieldset>div.action>div.item {
+    float:left;
+}
+fieldset>div.action>div.item.space {
     display:inline-block;
     width:10px;
 }
 fieldset>div.action input {
     width:60px;
-    margin-left:5px;
+    margin-left:6px;
+}
+fieldset>div.action input:hover {
+    width:100px;
 }
 fieldset>div.action input:focus {
     width:120px;
 }
-fieldset>div.action input:hover {
-    width:120px;
-}
 fieldset>div.output {
-    clear:both;
-    /* max-height:800px; */
     padding:5px;
+    clear:both;
 }
-fieldset>div.output div.item {
+fieldset>div.output>div.item {
     padding:2px;
 }
-fieldset>div.output div.item:hover {
+fieldset>div.output>div.item:hover {
     cursor:pointer;
     background-color:red;
     border:ridge 2px yellow;
 }
-fieldset>div.output table td {
-    /* word-break:break-word; */
-}
-fieldset>div.output table td.when {
-    /* word-break:break-word; */
-	text-align:center;
-}
-fieldset>div.output table.edit {
-}
-fieldset>div.output table.edit td {
-    min-width:4px;
-    padding:0px;
-}
-fieldset>div.output table.edit td>input {
-    width:600px;
-    padding:0px;
-}
-fieldset>div.output table.edit {
-}
 
 fieldset.dialog {
     padding:10px;
@@ -203,28 +187,20 @@ fieldset.item div.border-bottom {
 }
 
 fieldset.input {
-    z-index: 10000;
     border:solid 2px yellow;
     position:absolute;
 }
-fieldset.input.date table tr:hover {
+fieldset.input>legend {
+    padding-top:4px;
+}
+fieldset.input table tr:hover {
     background-color:yellow;
 }
-fieldset.input.date table td:hover {
+fieldset.input table td:hover {
     background-color:red;
     cursor:pointer;
 }
-fieldset.input.date table td.now {
-    background-color:red;
-}
-fieldset.input div.output div.list {
-    clear:both;
-}
-fieldset.input div.output div.label {
-    padding: 10px;
-    float:left;
-}
-fieldset.input div.output div.label:hover {
+fieldset.input table td.select {
     background-color:red;
 }