diff --git a/frame.js b/frame.js index faeaafc5..17effc18 100644 --- a/frame.js +++ b/frame.js @@ -343,7 +343,7 @@ Volcanos(chat.ONAPPEND, { can.onmotion.clear(can, can._option), can.onappend._option(can, {inputs: can.page.inputs(can, sub.onimport.list, html.TEXT) }) } can.onmotion.toggle(can, can._action, true), delete(can._status._cache), delete(can._status._cache_key) var output_old = can._output; sub._target = sub._output = can._output = output = can.page.insertBefore(can, [html.OUTPUT], can._status) - can.page.style(can, can._output, "visibility", "hidden", "position", "fixed") + can.page.ClassList.add(can, can._output, "_prepare") if (sub.Mode() == ice.MSG_RESULT) { can._output.innerHTML = output_old.innerHTML } if (can.page.tagis(can._target, "fieldset.cmd.form.output")) { can.page.ClassList.del(can, can._target, html.FORM), can.page.ClassList.del(can, can._target, html.OUTPUT) @@ -363,10 +363,32 @@ Volcanos(chat.ONAPPEND, { can.onimport.size(can, can.ConfHeight(), can.ConfWidth(), can.Conf("_auto"), can.Mode()) can.isCmdMode() && can.page.style(can, can._output, html.HEIGHT, sub.ConfHeight()) can.onexport.output(sub, msg); if (can.Conf("_output")) { can.Conf("_output")(sub, msg) } - } msg.Defer(), can.base.isFunc(cb) && cb(msg), can.page.style(can, can._target, "visibility", ""), + } msg.Defer(), can.base.isFunc(cb) && cb(msg) can._output.scrollTop = output_old.scrollTop, can._output.scrollLeft = output_old.scrollLeft - can.page.style(can, can._output, "visibility", "", "position", ""), can.page.Remove(can, output_old) can.isCmdMode() && can.user.agent.init(can, can.user.info.titles) + can.page.style(can, can._target, "visibility", "") + can.page.style(can, can._output, "visibility", "") + if (!can.page.ClassList.has(can, can._target, "_back") && !can.page.ClassList.has(can, can._target, "_goto")) { + can.page.style(can, can._output, html.LEFT, 0) + can.page.ClassList.del(can, can._output, "_prepare") + can.page.Remove(can, output_old) + return + } + var width = can.ConfWidth(), begin = width*3/4 + can.page.ClassList.add(can, output_old, "_unload") + can.core.Timer({interval: 5, length: width/20}, function(timer, interval, index, list) { + if (can.page.ClassList.has(can, can._target, "_back")) { + can.page.style(can, can._output, html.LEFT, -width+(width-begin)/list.length*(index+1)+begin) + can.page.style(can, output_old, html.LEFT, (width-begin)/list.length*(index+1)+begin) + } else { + can.page.style(can, can._output, html.LEFT, width-(width-begin)/list.length*(index+1)-begin) + can.page.style(can, output_old, html.LEFT, -(width-begin)/list.length*(index+1)-begin) + } + }, function() { + can.page.style(can, can._output, html.LEFT, 0) + can.page.ClassList.del(can, can._output, "_prepare") + can.page.Remove(can, output_old) + }) }, target: output}), msg.Defer() }) }, @@ -1007,6 +1029,7 @@ Volcanos(chat.ONLAYOUT, { figure: function(event, can, target, right, min, cb) { if (!event || !event.target) { return {} } target = target||can._fields||can._target var rect = event.target == document.body? {left: can.page.width()/2, top: can.page.height()/2, right: can.page.width()/2, bottom: can.page.height()/2}: (event.currentTarget||event.target).getBoundingClientRect() var layout = right? {left: rect.right, top: rect.top}: {left: rect.left, top: rect.bottom} + can.page.tagis(target, "div.input") && can.user.isMobile && (layout.top = 40) can.getActionSize(function(left, top, width, height) { left = left||0, top = top||0, height = can.base.Max(height, can.page.height()-top)-html.ACTION_HEIGHT-(can.isCmdMode()? 0: 20) if (layout.top+target.offsetHeight > top+height) { diff --git a/index.css b/index.css index f74c857b..2f347848 100644 --- a/index.css +++ b/index.css @@ -54,7 +54,7 @@ body { --panel-output-bg-color:var(--panel-bg-color); --panel-output-fg-color:var(--panel-fg-color); --panel-hover-bg-color:var(--hover-bg-color); --panel-hover-fg-color:var(--hover-fg-color); --action-output-bg-color:var(--output-bg-color); - + --box-shadow:var(--shadow-color) 0px 0px 10px; --notice-box-shadow:var(--notice-bg-color) 0px 0px 10px; --plugin-box-shadow:var(--box-shadow); --legend-box-shadow:var(--box-shadow); --input-box-shadow:var(--box-shadow); --th-box-shadow:var(--box-shadow); --keyword-box-shadow:var(--box-shadow); @@ -64,15 +64,15 @@ body { --item-notice:var(--box-notice); --plugin-border:var(--box-border); --input-border:var(--box-border); --status-border:var(--box-border); --plugin-radius:var(--plugin-padding); --button-radius:var(--input-padding); - + --plugin-padding:10px; --plugin-margin:var(--plugin-padding); --legend-padding:20px; --legend-margin:20px; --title-margin:var(--legend-padding); --button-padding:var(--plugin-padding); --button-margin:var(--button-padding); --input-padding:5px; --input-margin:var(--input-padding); --table-padding:var(--button-padding); - + --header-height:48px; --footer-height:var(--action-height); - --action-height:32px; --status-height:32px; --textarea-height:96px; + --action-height:32px; --status-height:32px; --textarea-height:96px; --input-width:140px; --button-width:60px; --form-width:360px; --url-input-width:480px; --card-width:300px; --card-height:160px; --qrcode-width:360px; --qrcode-height:363px; --story-height:var(--float-height); --iframe-height:420px; @@ -82,7 +82,7 @@ body { --action-button:10; --table-button:5; --card-button:5; --order-show-limit:30; --order-show-delay:150; --river-margin:80px; --action-margin:200px; - + --legend-font-family:var(--body-font-family); --status-font-family:var(--body-font-family); --input-font-family:var(--code-font-family); --table-font-family:var(--code-font-family); --svg-font-family:var(--code-font-family); @@ -153,6 +153,19 @@ table.content.detail tr.action input.icons { display:none; } table.content.detail tr.action input { color:var(--notice-bg-color); } table.content.detail tr.action i { display:unset; color:var(--notice-bg-color); } table.content.detail tr.action i.bi-trash { color:var(--danger-bg-color); } +fieldset.plugin.cmd.output>div.output { + top:0; +} +fieldset.plugin.cmd>div.output { + position:absolute; + top:32px; +} +div.output._prepare { + position:absolute; +} +div.output._unload { + position:absolute; +} body.mobile table.content.checkbox th:first-child { padding:var(--table-padding) var(--input-padding); } body.mobile table.content.checkbox td:first-child { padding:var(--table-padding) var(--input-padding); } body.mobile table.content.action th:last-child { padding:var(--table-padding) var(--input-padding); } @@ -1055,9 +1068,9 @@ div.output>fieldset.iframe.story>form.option>div.item.hash input { width:var(--u div.scrollbar { border-radius:var(--button-radius); background-color:var(--hover-bg-color); color:silver; - font-size:8px !important; line-height:10px; + font-size:8px !important; line-height:10px; display:flex; align-items:center; justify-content:center; - position:absolute; visibility:hidden; + position:absolute; visibility:hidden; } div.scrollbar.vertical { writing-mode:tb; width:10px; right:0; top:0; transition:width 3s; cursor:pointer; } div.scrollbar.vertical:hover { width:var(--code-line-height); transition:width .3s; font-size:24px !important; } diff --git a/lib/user.js b/lib/user.js index cebacc09..91b3edcf 100644 --- a/lib/user.js +++ b/lib/user.js @@ -263,8 +263,9 @@ Volcanos("user", { var onclick = target.onclick; target.onclick = function(event) { can.onengine.signal(can, "onevent", can.request(event, {_type: target.name})), onclick && onclick(event) } }) title && can.page.Select(can, action._target, "input[name=submit]", function(target) { target.value = can.user.trans(can, title) }) - if (event && event.target) { can.onlayout.figure(event, can, ui._target) - can.user.isMobile && can.page.style(can, ui._target, html.LEFT, (can.page.width()-ui._target.offsetWidth)/2, html.TOP, 60) + if (event && event.target) { + can.onlayout.figure(event, can, ui._target) + can.user.isMobile && can.page.style(can, ui._target, html.LEFT, (can.page.width()-ui._target.offsetWidth)/2, html.TOP, 40) // can.user.isMobile && can.page.style(can, ui._target, html.LEFT, (can.page.width()-ui._target.offsetWidth)/2, html.TOP, can.getHeaderHeight(can)) } else { can.getActionSize(function(left, top, height) { can.page.style(can, ui._target, html.LEFT, left||0, html.TOP, (height/4||0)) })