diff --git a/page/index.css b/page/index.css index 6871af91..940ebc67 100644 --- a/page/index.css +++ b/page/index.css @@ -14,15 +14,17 @@ input[name=line] { width:40px; } input[name=text] { width:160px; } input[name=url] { width:320px; } +fieldset.plugin.config form.option input[name=key] { width:240px; } table.layout { border-spacing:0; } table.layout td { vertical-align:top; } table.layout td.content { position:relative; } -table.layout div.toggle { background-color:#e1aeae45; height:100px; top:20%; position:absolute; } -table.layout div.toggle>div { color:white; height:95px; display:table-cell; vertical-align:middle; } -table.layout div.toggle.project { left:0px; min-width:10px; border-top-right-radius:10px; border-bottom-right-radius:10px; } -table.layout div.toggle.profile { right:0px; min-width:10px; border-top-left-radius:10px; border-bottom-left-radius:10px; } -table.layout div.toggle.display { overflow:hidden; margin-top:-12px; height:10px; width:100px; position:sticky; left:20%; border-top-left-radius:10px; border-top-right-radius:10px; } -table.layout div.toggle.display>div { color:white; text-align:center; height:10px; width:100px; } +table.layout div.toggle { font-size:24px; background-color:#e1aeae45; position:absolute; } +table.layout div.toggle>div { color:white; display:table-cell; } +table.layout div.toggle.project { padding-top: 50px; height:100px; width:15px; top:20%; left:0px; border-top-right-radius:10px; border-bottom-right-radius:10px; } +table.layout div.toggle.profile { padding-top: 50px; height:100px; width:15px; top:20%; right:0px; border-top-left-radius:10px; border-bottom-left-radius:10px; } +table.layout div.toggle.display { overflow:hidden; margin-top:-17px; height:15px; width:100px; position:sticky; left:40%; border-top-left-radius:10px; border-top-right-radius:10px; } +table.layout div.toggle.display>div { color:white; text-align:center; height:15px; width:100px; } +fieldset.Action.cmd>div.toggle.project { display:none; } table.content tr { background-color:#04272f45; } table.content tr.show { background-color:red; } @@ -99,6 +101,7 @@ body>div.carte { background-color:#295b61; color:white; padding:4px; min-width:8 body>div.carte div.item { padding:3px 12px; } body>div.input { background-color:#0d4142a6; } body>div.input div.item { float:left; } +body>div.input select { width:183px; } body>div.input input[type=text] { width:171px; } body>div.input input[name=username] { width:171px; } body>div.input input[name=password] { width:171px; } @@ -246,3 +249,4 @@ body.white table.content th:hover, body.white table.content td.select, body.whit body.white table.content tr:hover { background-color:#4682b46b; } body.white div.item.select, body.white div.item:hover { background-color:steelblue; } body.white fieldset.float table { color:white; } + diff --git a/panel/action.css b/panel/action.css index 3f5d460f..e5afc9b5 100644 --- a/panel/action.css +++ b/panel/action.css @@ -17,10 +17,17 @@ fieldset.Action div.output fieldset.plugin.Full>legend { float:left; } fieldset.Action div.output fieldset.story.Full { background-color:#073947f2; padding:0; margin:0; position:fixed; left:0; top:0; overflow:auto; z-index:1; } fieldset.Action div.output fieldset.story.Full>legend { float:left; } fieldset.Action>div.project.toggle { - background-color:cornsilk; opacity:0.8; color:teal; font-size: 28px; padding-top: 50px; height: 100px; width:20px; position: fixed; top: 200px; + background-color:cornsilk; opacity:0.4; color:teal; font-size: 28px; padding-top: 50px; height: 100px; width:20px; position: fixed; top: 200px; border-top-right-radius:20px; border-bottom-right-radius:20px; } fieldset.panel.cmd>div.output>fieldset.plugin { padding:0; margin:0; } fieldset.panel.cmd>div.output>fieldset.plugin>legend { background-color:darkcyan; padding:0 10px; margin-right:3px; height:30px; float:left; } body.mobile fieldset.panel.cmd>div.output>fieldset.plugin>legend { height:42px; } + +div.output.form div.item { + margin:10px 40px; +} +div.output.form div.item div.label { + margin:5px 0px; +} diff --git a/panel/action.js b/panel/action.js index 33fb50ca..e9ed7de5 100644 --- a/panel/action.js +++ b/panel/action.js @@ -90,8 +90,8 @@ Volcanos("onengine", {help: "解析引擎", list: [], _engine: function(event, p Volcanos("onaction", {help: "交互操作", list: [], _init: function(can, cb, target) { can.Conf(html.MARGIN_Y, 4*html.PLUGIN_MARGIN+2*html.ACTION_HEIGHT+html.ACTION_MARGIN) can.Conf(html.MARGIN_X, 4*html.PLUGIN_MARGIN) - function toggle(view) { return !can.setRiver("display") } - var gt = "❯", lt = "❮", down = "˅", up = "˄" + + var gt = "❯", lt = "❮"; function toggle(view) { return !can.setRiver("display") } can.page.Append(can, target, [{view: [[html.TOGGLE, chat.PROJECT]], list: [{text: [gt, html.DIV]}], onclick: function(event) { event.target.innerHTML = toggle()? gt: lt }}]) diff --git a/plugin/local/code/inner.css b/plugin/local/code/inner.css index 18ad2072..873d2615 100644 --- a/plugin/local/code/inner.css +++ b/plugin/local/code/inner.css @@ -5,10 +5,6 @@ fieldset.inner>div.action>div.tabs:hover { background-color:#013b675c; } fieldset.inner>div.action>div.tabs.select { background-color:#013b675c; } fieldset.inner>div.output { color:white; } -fieldset.inner>div.output>table.layout div.toggle.project { font-size:24px; min-width:15px; } -fieldset.inner>div.output>table.layout div.toggle.profile { font-size:24px; min-width:15px; } -fieldset.inner>div.output>table.layout div.toggle.display { font-size:24px; height:15px; margin-top:-17px; } - fieldset.inner>div.output div.content { color:white; font-size:1.2rem; font-family:monospace; position:relative; } fieldset.inner>div.output div.content tr.select { background-color:#0000ff6b; } fieldset.inner>div.output div.content tr.select td.line { background-color:blue; border:solid 1px red; border-right:solid 2px red; } diff --git a/plugin/story/form.css b/plugin/story/form.css new file mode 100644 index 00000000..5cb578a6 --- /dev/null +++ b/plugin/story/form.css @@ -0,0 +1,3 @@ +div.output.form div.item { + padding:40px; +} diff --git a/plugin/story/form.js b/plugin/story/form.js new file mode 100644 index 00000000..78b4702a --- /dev/null +++ b/plugin/story/form.js @@ -0,0 +1,62 @@ +Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, cb, target) { + can.page.ClassList.add(can, target, "form") + msg.Push("type", "text") + msg.Push("name", "name") + msg.Push("value", "harveyshao") + msg.Push("action", "key") + + msg.Push("type", "text") + msg.Push("name", "age") + msg.Push("value", "18") + msg.Push("action", "") + + msg.Push("type", "select") + msg.Push("name", "male") + msg.Push("value", "male,female") + msg.Push("action", "") + + msg.Push("type", "textarea") + msg.Push("name", "intro") + msg.Push("value", "program") + msg.Push("action", "") + + msg.Push("type", "button") + msg.Push("name", "submit") + msg.Push("value", "提交") + msg.Push("action", "") + + var action = ""; msg.Table(function(value, index, array) { + switch (value.type) { + case html.BUTTON: action = action||value.name + can.page.Append(can, target, [{view: "item", list: [ + {view: ["input"], list: [{type: html.INPUT, style: {width: (can.ConfWidth()-90)/2}, data: {type: value.type, value: value.value}, onclick: function(event) { + var args = [ctx.ACTION, action] + can.page.Select(can, target, ".args", function(item) { args.push(item.name, item.value)}) + can.run(event, args) + }}]}, + ]}]) + break + case html.SELECT: + can.page.Append(can, target, [{view: "item", list: [ + {view: ["label"], list: [{text: value.name}]}, + {view: ["input"], list: [{type: html.SELECT, className: "args", style: {width: can.ConfWidth()-100}, + data: value, list: can.core.List(can.core.Split(value.value), function(v) { return {type: html.OPTION, name: v, value: v, inner: v} }) }]}, + ]}]) + break + case html.TEXTAREA: + can.page.Append(can, target, [{view: "item", list: [ + {view: ["label"], list: [{text: value.name}]}, + {view: ["input"], list: [{type: html.TEXTAREA, className: "args", style: {width: can.ConfWidth()-100}, data: value}]}, + ]}]) + break + default: + can.page.Append(can, target, [{view: "item", list: [ + {view: ["label"], list: [{text: value.name}]}, + {view: ["input"], list: [{type: "input", className: "args", style: {width: can.ConfWidth()-100}, data: value}]}, + ]}]) + } + }) + }, +}, [""]) + + diff --git a/plugin/story/trend.js b/plugin/story/trend.js index a25e334b..e42a7fe0 100644 --- a/plugin/story/trend.js +++ b/plugin/story/trend.js @@ -5,7 +5,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, can.Conf(html.HEIGHT, can.Conf(html.HEIGHT)||200) can.msg = msg, can.data = msg.Table(), can.onimport._sum(can) - can.Action(html.HEIGHT, msg.Option(html.HEIGHT)||"max") + can.Action(html.HEIGHT, msg.Option(html.HEIGHT)||"auto") can.Action("speed", parseInt(msg.Option("speed")||"100")) can.require(["/plugin/local/wiki/draw.js", "/plugin/local/wiki/draw/path.js"], function() { @@ -43,13 +43,13 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, can.onaction[can.Action("view")]({}, can) }, }, [""]) -Volcanos("onaction", {help: "组件菜单", list: ["edit", ["view", "趋势图", "柱状图", "数据源"], ["height", "100", "200", "400", "600", "800", "max"], ["speed", "10", "20", "50", "100"]], +Volcanos("onaction", {help: "组件菜单", list: ["edit", ["view", "趋势图", "柱状图", "数据源"], ["height", "100", "200", "400", "600", "800", "auto"], ["speed", "10", "20", "50", "100"]], "edit": function(event, can) { can.onmotion.toggle(can, can._action) can.onmotion.toggle(can, can._status) }, "趋势图": function(event, can) { var height = can.Action(html.HEIGHT) - if (height == "max") { + if (height == "auto") { height = can.Conf(html.HEIGHT) } height = parseInt(height)