From 3d723048182c6e13b86a2ecf60e5b1d374950aa0 Mon Sep 17 00:00:00 2001 From: shylinux Date: Mon, 24 Feb 2020 01:41:55 +0800 Subject: [PATCH] add page.AppendFigure --- lib/base.js | 16 ++++++- lib/misc.js | 4 ++ lib/page.js | 33 +++++++------- plugin/input.js | 37 ++++++++-------- plugin/input/date.js | 79 +++++++++++++-------------------- plugin/input/key.js | 32 +++----------- plugin/input/province.js | 42 ++++++------------ plugin/input/upload.js | 53 ++++++++++++---------- proto.js | 2 +- style.css | 94 +++++++++++++++------------------------- 10 files changed, 167 insertions(+), 225 deletions(-) diff --git a/lib/base.js b/lib/base.js index 2d9f85a6..57da5f5a 100644 --- a/lib/base.js +++ b/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()) diff --git a/lib/misc.js b/lib/misc.js index df38286e..0fb6fe54 100644 --- a/lib/misc.js +++ b/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); diff --git a/lib/page.js b/lib/page.js index 34704c05..a57f4a15 100644 --- a/lib/page.js +++ b/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) { diff --git a/plugin/input.js b/plugin/input.js index fff55733..5b9aa794 100644 --- a/plugin/input.js +++ b/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) diff --git a/plugin/input/date.js b/plugin/input/date.js index 08bd15b9..5516f166 100644 --- a/plugin/input/date.js +++ b/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); - }, }) diff --git a/plugin/input/key.js b/plugin/input/key.js index 835a0b28..6aaf6de0 100644 --- a/plugin/input/key.js +++ b/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); - }, }) diff --git a/plugin/input/province.js b/plugin/input/province.js index 3bae60cd..6314cda2 100644 --- a/plugin/input/province.js +++ b/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", +]) diff --git a/plugin/input/upload.js b/plugin/input/upload.js index a1eed6c3..a69b247d 100644 --- a/plugin/input/upload.js +++ b/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); - }, }) diff --git a/proto.js b/proto.js index fe465cf0..dead7f14 100644 --- a/proto.js +++ b/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) { diff --git a/style.css b/style.css index e5b2fc78..eaadf067 100644 --- a/style.css +++ b/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; }