From 8745ff5ec6f4a995e29fa44ca13627166e7859cb Mon Sep 17 00:00:00 2001 From: harveyshao Date: Sat, 14 Jan 2023 08:44:36 +0800 Subject: [PATCH] opt some --- frame.js | 23 ++++++++++++++++++++--- lib/page.js | 5 +++++ page/index.css | 7 ++++++- plugin/local/code/inner.css | 8 ++++---- 4 files changed, 35 insertions(+), 8 deletions(-) diff --git a/frame.js b/frame.js index 8ff256f9..0c68125c 100644 --- a/frame.js +++ b/frame.js @@ -25,14 +25,26 @@ Volcanos(chat.ONENGINE, {_init: function(can, meta, list, cb, target) { 16: { open: [-27, -158], close: [-82, -158], + refresh: [-194, -241], + back: [-27, -185], }, 18: { open: [-30, -177], close: [-93, -177], + refresh: [-218, -271], + back: [-30, -208], + }, + 20: { + open: [-30, -177], + close: [-103, -197], + refresh: [-242, -301], + back: [-33, -232], }, 24: { open: [-40, -236], close: [-123, -236], + refresh: [-291, -362], + back: [-40, 278], }, }) }, @@ -128,6 +140,10 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) { var action = can.page.Select(can, field, html.DIV_ACTION)[0] var output = can.page.Select(can, field, html.DIV_OUTPUT)[0] var status = can.page.Select(can, field, html.DIV_STATUS)[0] + + can.page.Append(can, option, [{view: "icon s18 close", onclick: function(event) { sub.onaction.close(event, sub) }}]) + can.page.Append(can, option, [{view: "icon s18 back", onclick: function(event) { sub.onimport._back(sub) }}]) + can.page.Append(can, option, [{view: "icon s18 refresh", onclick: function(event) { sub.Update(event) }}]) var sub = Volcanos(meta.name, {_root: can._root||can, _follow: can.core.Keys(can._follow, meta.name), _target: field, _legend: legend, _option: option, _action: action, _output: output, _status: status, _history: [], _inputs: {}, _outputs: [], @@ -162,7 +178,7 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) { sub.onappend._output(sub, msg, meta.display||msg.Option(ice.MSG_DISPLAY)||meta.feature.display) }) } if (can._root && can._root.name == "popup") { can.onmotion.hidden(can, sub._action) } - + can.core.Value(sub._legend, "onclick", function(event) { can.user.carte(event, sub, sub.onaction, sub.onaction.list.concat([[ctx.ACTION].concat(can.core.Item(meta.feature._trans))]), function(event, button, meta) { var _sub = can.core.Value(sub, chat._OUTPUTS_CURRENT) @@ -192,7 +208,7 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) { }) }) } - can.core.Next(([{type: html.BUTTON, name: cli.CLOSE}]).concat(can.base.getValid(can.core.Value(can, [chat.ONIMPORT, mdb.LIST]), can.base.Obj(meta.inputs, []))||[]), add) + can.core.Next((can.user.isMobile? [{type: html.BUTTON, name: cli.CLOSE}]: []).concat(can.base.getValid(can.core.Value(can, [chat.ONIMPORT, mdb.LIST]), can.base.Obj(meta.inputs, []))||[]), add) }, _action: function(can, list, action, meta) { meta = meta||can.onaction||{}, action = action||can._action, can.onmotion.clear(can, action) function what(msg) { @@ -273,6 +289,7 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) { }) } } var br = input.type == html.TEXTAREA? [{type: html.BR, style: {clear: html.BOTH}}]: [] var title = can.Conf(can.core.Keys(ctx.FEATURE, chat.TITLE, item.name))||""; title && (input.title = title) + if (item.type == html.ICON) { return can.page.Append(can, target, [input]) } return can.page.Append(can, target, ([{view: can.base.join(style||[html.ITEM, item.type]), list: [input]}]).concat(br))[item.name] }, table: function(can, msg, cb, target, sort) { if (msg.Length() == 0) { return } var meta = can.base.Obj(msg.Option(mdb.META)) @@ -363,7 +380,7 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) { background-repeat: no-repeat; background-position-x:${value[0]}px; background-position-y:${value[1]}px; }` }).join(ice.NL) }).join(ice.NL) - can.page.Append(can, document.head, ctx.STYLE, {"innerText": text}), console.log("icon", text) + can.page.Append(can, document.head, ctx.STYLE, {"innerText": text}), console.log(html.ICON, text) }, topic: function(can, topic, color, style, list) { const SOLID = " solid 1px", GLASS = "transparent" const INPUT_STYLE = "input-style", INPUT_HOVER_STYLE = "input-hover-style", OUTPUT_STYLE = "output-style", GLASS_STYLE = "glass-style" diff --git a/lib/page.js b/lib/page.js index 7083f908..f8d5d7d0 100644 --- a/lib/page.js +++ b/lib/page.js @@ -170,6 +170,11 @@ Volcanos("page", {ClassList: { item.className || can.page.ClassList.add(can, item, ctx.ARGS); break case html.BUTTON: item.value = item.value||item.name||mdb.LIST; break case html.UPLOAD: item.type = html.FILE, input.name = html.UPLOAD; break + case html.ICON: input = {view: html.ICON+" s"+(item.value||18)+ice.SP+item.name, onclick: function(event) { + if (item.name == "refresh") { can.Update() } else { + !can.sup && can.request(event).RunAction(event, can, [ctx.ACTION, item.name]) || can.runAction(event, item.name) + } + }} } return input }, Format: function(type) { var args = arguments; switch (type) { diff --git a/page/index.css b/page/index.css index f3c3007a..84660e98 100644 --- a/page/index.css +++ b/page/index.css @@ -31,7 +31,6 @@ div.project div.switch { margin-top:2px; width:12px; float:left; rotate:90deg; } div.project div.switch.open { translate:3px -3px; rotate:180deg; } div.project div.zone>div.name { background-color:steelblue; color:white; text-align:center; padding:3px; clear:both; } div.project div.zone>div.list>div.zone>div.name { text-align:left; padding-left:20px; } -// div.project div.zone>div.list>div.zone>div.name:hover { background-color:#3c7da8d9; } div.project div.zone>div.action>div.item { float:right; clear:none; } table.content thead { position:sticky; top:2px; } table.content th { background-color:steelblue; padding:2px 5px; } @@ -118,6 +117,12 @@ div.status>div.item>label { font-size:0.6rem; } div.status>legend { margin-left:2px; margin-right:0; float:right; clear:none; } div.code { position:sticky; left:0; } /* display */ +form.option>div.icon { margin:5px; display:none; float:left; cursor:pointer; } +fieldset.float:not(.input) form.option>div.icon { display:block; } +fieldset.full form.option>div.icon { display:block; } +fieldset.plug form.option>div.icon { display:block; margin-left:5px; } +fieldset:not(.panel):not(.input) form.option>div.icon.refresh { display:block; margin-right:5px; } + form.option, div.action { display:contents; } form.option>div.item>label, div.action>div.item>label, .hidden, .hide { display:none; } legend, form.option, form.option>div.item, div.action, div.action>div.item, div.action>div.tabs, div.status>div.item { float:left; } diff --git a/plugin/local/code/inner.css b/plugin/local/code/inner.css index a0270cd4..23436c94 100644 --- a/plugin/local/code/inner.css +++ b/plugin/local/code/inner.css @@ -22,8 +22,6 @@ fieldset.inner.cmd>div.output>div.layout.flow>div.tabs div.time { float:right; } fieldset.inner.cmd>div.output>div.layout.flow>div.path { padding:5px; display:block; } fieldset.inner.cmd>div.output>div.layout.flow>div.path span.func { margin-left:20px; } -// body.white div.path span.item:hover { background-color:aliceblue; } -// body.white div.carte.path.float div.item:hover { background-color:white; } body.white fieldset.inner.cmd>div.output { background-color:aliceblue; } body.white fieldset.inner.cmd>div.output div.content { background-color:white; } body.white fieldset.inner.cmd>div.output>div.layout.flow>div.tabs div.select { background-color:white; } @@ -46,8 +44,10 @@ body.mobile fieldset.word fieldset.inner>form.option input[type=text] { display: div.zone>div.action>div.item input[type=text] { margin-right:-10px; } div.zone>div.list>div.zone>div.name:hover { margin-left:10px; transition:all 0.3s; } -div.tabs>div div.icon { margin-left:10px; margin-top:1px; float:right; visibility:hidden; } div.tabs>div:hover div.icon { visibility:visible; } -div.action>div div.icon { margin-left:10px; margin-top:1px; float:right; visibility:hidden; } div.action>div:hover div.icon { visibility:visible; } +div.tabs>div div.icon { margin-left:10px; margin-top:1px; float:right; visibility:hidden; } +div.tabs>div:hover div.icon { visibility:visible; } div.tabs>div.select div.icon { visibility:visible; } +div.action>div div.icon { margin-left:10px; margin-top:1px; float:right; visibility:hidden; } +div.action>div:hover div.icon { visibility:visible; } div.action>div.select div.icon { visibility:visible; } div.carte.path.float { font-size:14px; border-radius:0; } div.carte.path.float div.item { padding:5px; } div.path span.item { padding:5px; cursor:pointer; } tr.line>td.line { text-align:right; padding:0 10px; position:sticky; left:0; }