diff --git a/frame.js b/frame.js index 00bcb930..b2073e5c 100644 --- a/frame.js +++ b/frame.js @@ -340,11 +340,7 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) { sub.onappend._status(sub, sub.onexport&&sub.onexport.list||msg.Option(ice.MSG_STATUS), null, msg), can.user.isMobile || sub.onappend.tools(sub, msg) can.core.Item(can.Action(), function(key) { var value = can.misc.sessionStorage(can, [can.ConfIndex(), ctx.ACTION, key]); value && can.Action(key, msg.Option(key)||value[0]) }) if (msg.Option("sess.online") == ice.TRUE) { can.ondaemon._online(can) } - if (msg.Length() > 9 && !sub.ui.project) { can.onmotion.delay(can, function() { - can.page.insertBefore(can, [ - {view:[[html.ITEM, html.TEXT, html.FILTER, "state"]], _init: function(target) { can.onappend.filter(can, target, can._output) }} - ], (can.page.SelectOne(can, can._action, "div.item._space")||{}).nextSibling, can._action) - }, 300) } + if (msg.Length() > 9 && !sub.ui.project && !can.user.isMobile) { can.onmotion.delay(can, function() { can.onappend._filter(can) }, 300) } } can.onappend.style(sub, sub.Conf(ctx.STYLE)), can.onmotion.story.auto(can, can._output) if (can.onimport.size) { can.page.ClassList.has(can, can._target, html.FLOAT) && !can.page.ClassList.has(can, can._target, html.PLUG)? @@ -486,7 +482,12 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) { }}]) } }, - filter: function(can, target, output) { output = output||target + _filter: function(can) { + can.page.insertBefore(can, [ + {view:[[html.ITEM, html.TEXT, html.FILTER, "state"]], _init: function(target) { can.onappend.filter(can, target, can.ui.content||can._output) }} + ], (can.page.SelectOne(can, can._action, "div.item._space")||{}).nextSibling, can._action) + }, + filter: function(can, target, output) { output = output||can.ui.content||target return can.onappend.input(can, {type: html.TEXT, name: web.FILTER, icon: icon.SEARCH, placeholder: "search in n items", onkeydown: function() {}, onkeyup: function(event) { var value = event.currentTarget? event.currentTarget.value: "" if (event.key == code.ENTER) { diff --git a/index.css b/index.css index cd4803c0..562d1174 100644 --- a/index.css +++ b/index.css @@ -623,7 +623,7 @@ fieldset>form.option>div.item.text.cmd>input { width:100%; } fieldset>form.option>div.item.select>input { min-width:var(--button-width); } fieldset>form.option>div.item.textarea { height:var(--textarea-height); width:100%; } fieldset>div.action div.item.filter input { padding-left:24px; } -body:not(.mobile) fieldset>div.action div.item.state.filter input { width:120px; transition:all 0.8s; } +fieldset>div.action div.item.state.filter input { width:120px; transition:all 0.8s; } fieldset>div.action div.item.state.filter input:focus { width:240px; transition:all 0.5s; } fieldset>div.action div.item { height:var(--action-height); } fieldset>div.action>div.tabs { font-style:italic; padding:var(--input-padding) var(--button-padding); height:var(--action-height); } @@ -763,6 +763,7 @@ legend, select, input[type=button], th, h1, h2, h3, i, img[title^=http], div.ite div.story[data-type=spark] { cursor:copy; } /* mobile */ body.mobile table.content { width:100%; } +body.mobile fieldset.plugin>legend { box-shadow:none; } body.mobile div.output.card { overflow-x:hidden; } body.mobile div.output>div.project { position:absolute; left:0; top:0; z-index:2; } body.mobile div.output>div.project { flex:0 0 240px; width:240px; } @@ -777,7 +778,7 @@ body.mobile fieldset.plugin:not(.float):not(.full):not(.cmd)>div.action>div.butt body.mobile fieldset.Header { padding:0; width:100%; position:fixed; top:0; } body.mobile fieldset.Header>div.output { font-size:1.4rem; line-height:var(--header-height); } body.mobile fieldset.Header>div.output div.item { padding:0px var(--plugin-padding); } -body.mobile fieldset.Header>div.output div.item.title>span { display:none; } +// body.mobile fieldset.Header>div.output div.item.title>span { display:none; } body.mobile fieldset.Header>div.output div.item.text.title.search { display:none; } body.mobile fieldset.Search>div.action>div.item.filter>input { width:100%; } body.mobile fieldset.Search>div.action>div.item.filter>span { position:absolute; } @@ -943,7 +944,8 @@ fieldset.Search>div.output>div.profile { border-left:none; width:unset; } fieldset.Search>div.output>div.content>table.content td { cursor:pointer; } fieldset.Action.tabs table.content { width:100%; } fieldset.Action>div.output>fieldset.plugin:not(.float):not(.full):not(.cmd) { padding:var(--plugin-padding); margin:var(--plugin-margin); } -fieldset.Action>div.output>fieldset.plugin:not(.float):not(.full):not(.cmd)>legend { background-color:var(--plugin-bg-color); float:none; } +fieldset.Action>div.output>fieldset.plugin:not(.float):not(.full):not(.cmd)>legend { float:none; } +fieldset.Action>div.output>fieldset.plugin:not(.float):not(.full):not(.cmd)>legend:not(:hover) { background-color:var(--plugin-bg-color); } body.mobile fieldset.float:not(.full):not(.cmd)>legend { float:none; } body.width6 fieldset.plugin.word>form.option>div.item.text>input { width:var(--project-width); } body.width6 fieldset.plugin.iframe>form.option input[name=hash] { width:var(--form-width); } diff --git a/panel/footer.css b/panel/footer.css index 14c8d722..f1f4afa0 100644 --- a/panel/footer.css +++ b/panel/footer.css @@ -1,21 +1,22 @@ -fieldset.Footer { width:100%; } -fieldset.Footer>div.output { font-style:italic; height:var(--footer-height); overflow:hidden; } -fieldset.Footer>div.output div.item { padding:7px; height:var(--footer-height); float:left; } -fieldset.Footer:not(.tabview)>div.output div.title:first-child { font-weight:bold; text-align:center; width:var(--river-width); } -fieldset.Footer>div.output div.state { font-family:var(--status-font-family); float:right; line-height:18px; } -fieldset.Footer>div.output div.state label { font-size:var(--status-font-size); } +// fieldset.Footer { width:100%; } +fieldset.Footer>div.output { font-style:italic; height:var(--footer-height); display:flex; } +fieldset.Footer>div.output div.item { padding:7px; height:var(--footer-height); } fieldset.Footer>div.output div.title:first-child { margin-left:var(--header-height); } -fieldset.Footer>div.output div.toast { font-family:var(--status-font-family); line-height:18px; max-width:var(--url-input-width); overflow:auto; float:right; } -fieldset.Footer>div.output div.cmd { padding:0; margin-left:20px; } +fieldset.Footer:not(.tabview)>div.output div.title:first-child { font-weight:bold; text-align:center; width:var(--river-width); } fieldset.Footer>div.output input[type=button] { background-color:transparent; color:var(--panel-fg-color); border:0; } +fieldset.Footer>div.output div.toast { font-family:var(--status-font-family); line-height:18px; text-align:right; overflow:auto; flex-grow:1; } +fieldset.Footer>div.output div.state { font-family:var(--status-font-family); line-height:18px; } +fieldset.Footer>div.output div.state label { font-size:var(--status-font-size); } +fieldset.Footer>div.output div.cmd { padding:0; margin-left:20px; } fieldset.Footer>div.output div.cmd>input[name=cmd] { padding-left:30px; } + fieldset.Footer>div.output div.menu>div.River { display:flex; justify-content:space-around; } fieldset.Footer>div.output div.menu>div.River>div.item { height:var(--footer-height); display:flex; flex-direction:column; text-align:center; flex-grow:1; } fieldset.Footer>div.output div.menu>div.River>div.item>i { font-size:24px; margin-right:0; } fieldset.Footer>div.output div.menu>div.River>div.item>span { font-size:var(--status-font-size); } -body.mobile fieldset.Footer>div.output { font-style:italic; height:var(--footer-height); overflow:hidden; } -body.mobile fieldset.Footer>div.output div.toast { display:none; } -body.mobile fieldset.Footer>div.output div.cmd { display:none; } + +body.mobile fieldset.Footer>div.output>div.menu { width:100%; } +body.mobile fieldset.Footer>div.output>div:not(.menu) { display:none; } .picker { box-shadow:var(--notice-bg-color) 0px 0px 20px 5px !important; diff --git a/panel/footer.js b/panel/footer.js index a0537649..5f6d59ee 100644 --- a/panel/footer.js +++ b/panel/footer.js @@ -5,18 +5,21 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { can._wss = can.onda can.Conf(nfs.VERSION, can.base.trimPrefix(window._version, "?_v=").split("&")[0]) can.ConfHeight(can.page.height()), can.ConfWidth(can.page.width()) can.Conf(NKEY, can.core.Item(can.misc.localStorage(can)).length) - can.onimport._title(can, msg, target), can.onimport._command(can, msg, target), can.onimport._storm(can, msg, target) - can.misc.isDebug(can) && can.onimport._state(can, msg, target), can.onimport._toast(can, msg, target) - if (!can.user.isTechOrRoot(can)) { return } + + can.onimport._title(can, msg, target) + can.onimport._storm(can, msg, target) can.core.List([ - {index: code.XTERM, args: [cli.SH]}, - {index: cli.RUNTIME}, - {index: chat.MESSAGE}, {index: chat.TUTOR}, + {index: chat.MESSAGE}, + {index: cli.RUNTIME}, + {index: code.XTERM, args: [cli.SH]}, ], function(value) { value.type = html.BUTTON, value.name = value.index value.onclick = function() { can.onappend._float(can, value.index, value.args) } can.onappend.input(can, value, "", can._output) }) + // can.onimport._command(can, msg, target) + can.onimport._toast(can, msg, target) + can.misc.isDebug(can) && can.onimport._state(can, msg, target) }, _title: function(can, msg, target) { can.user.isMobile || can.core.List(can.Conf(chat.TITLE)||msg.result, function(item) { if (can.base.contains(item, ice.AT)) { item = ''+item+'' } @@ -32,7 +35,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { can._wss = can.onda } }}, "", target, [chat.TITLE]) }, _storm: function(can, msg, target) { can.ui.storm = can.page.Append(can, can._output, [html.MENU])._target }, - _state: function(can, msg, target) { can.user.isMobile || can.core.List(can.base.Obj(can.Conf(chat.STATE)||msg.Option(chat.STATE), can.onexport.list).reverse(), function(item) { + _state: function(can, msg, target) { can.user.isMobile || can.core.List(can.base.Obj(can.Conf(chat.STATE)||msg.Option(chat.STATE), can.onexport.list), function(item) { can.page.Append(can, target, [{view: [[html.ITEM, chat.STATE]], list: [ {text: [item, html.LABEL]}, {text: [": ", html.LABEL]}, {text: [can.Conf(item)||"", "", item]}, ], onclick: function(event) { can.core.CallFunc(can.onexport[item], [can]) }}]) }) diff --git a/panel/header.css b/panel/header.css index fa7046b7..10d5ffdc 100644 --- a/panel/header.css +++ b/panel/header.css @@ -1,7 +1,7 @@ fieldset.Header>div.output { line-height:21px; height:var(--header-height); overflow:hidden; } fieldset.Header>div.output div.item { background-color:var(--panel-output-bg-color); padding:13.5px; height:var(--header-height); float:left; } fieldset.Header>div.output div.item.title:first-child { font-size:var(--legend-font-size); font-style:italic; font-weight:bold; white-space:pre; overflow:hidden; } -fieldset.Header>div.output div.item.title img { padding:0; height:var(--action-height); width:var(--action-height); } +fieldset.Header>div.output div.item.title img { padding:0; height:var(--action-height); width:var(--action-height); margin-right:var(--input-margin); } fieldset.Header>div.output div.item.state { padding:13.5px 10px; float:right; } fieldset.Header>div.output div.item.layout>i { margin-left:var(--input-padding); } fieldset.Header>div.output div.item.layout:not(:hover)>i { visibility:hidden; } diff --git a/panel/header.js b/panel/header.js index d86ff0af..e9000109 100644 --- a/panel/header.js +++ b/panel/header.js @@ -1,5 +1,6 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { - can.onimport._title(can, msg, target), can.onimport._state(can, msg, target), can.onimport._avatar(can, msg, target), can.onimport._background(can, msg, target), can.onimport._search(can, msg, target) + can.onimport._title(can, msg, target), can.onimport._state(can, msg, target), can.onimport._search(can, msg, target) + can.onimport._avatar(can, msg, target), can.onimport._background(can, msg, target) }, _title: function(can, msg, target) { can.core.List(can.base.getValid(can.Conf(chat.TITLE)||msg.result, [ decodeURIComponent(can.misc.Search(can, ice.POD)||location.host)]), function(item) { @@ -17,12 +18,6 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { item == cli.QRCODE && can.page.Appends(can, target, [{icon: icon.qrcode, title: can.user.trans(can, cli.QRCODE)}]) }}]) }) }, - _language: function(can) { can.page.Select(can, can._output, "div.item.language", function(target) { - can.page.Appends(can, target, can.user.info.language.indexOf("zh") == 0? [{text: "中"}, {text: " / "}, {text: "EN"}]: [{text: "EN"}, {text: " / "}, {text: "中"}]) - }) }, - _theme: function(can, theme) { return can.ui.diy&&can.ui.diy[theme]||theme }, - _avatar: function(can, msg) { can.user.isExtension || can.user.isLocalFile || can.page.Modify(can, "div.state.avatar>img", {src: can.onexport.avatar(can)}) }, - _background: function(can, msg) { if (can.user.isExtension || can.user.isLocalFile) { return } can.onlayout.background(can, can.onexport.background(can)) }, _search: function(can, msg, target) { if (!can.user.isTechOrRoot(can)) { return } can.page.Append(can, target, [{view: [[html.ITEM, chat.STATE]], list: [{icon: mdb.SEARCH}], onclick: function(event) { can.onengine.signal(can, chat.ONOPENSEARCH, can.request(event, {type: mdb.FOREACH})) @@ -33,22 +28,24 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { }}, "", target, [chat.STATE]) can.onimport.menu(can, mdb.SEARCH, function() { can.onengine.signal(can, chat.ONOPENSEARCH, can.request(event, {type: mdb.FOREACH, word: can._search.value||""})) }) }, - _const: function(can) { - can.core.Item(html.value, function(key, value) { - html[key] = can.page.styleValueInt(can, "--"+can.base.replaceAll(key.toLowerCase(), "_", "-"))||value - }) - }, + _avatar: function(can, msg) { can.user.isExtension || can.user.isLocalFile || can.page.Modify(can, "div.state.avatar>img", {src: can.onexport.avatar(can)}) }, + _background: function(can, msg) { if (can.user.isExtension || can.user.isLocalFile) { return } can.onlayout.background(can, can.onexport.background(can)) }, + _language: function(can) { can.page.Select(can, can._output, "div.item.language", function(target) { + can.page.Appends(can, target, can.user.info.language.indexOf("zh") == 0? [{text: "中"}, {text: " / "}, {text: "EN"}]: [{text: "EN"}, {text: " / "}, {text: "中"}]) + }) }, + _theme: function(can, theme) { return can.ui.diy&&can.ui.diy[theme]||theme }, + _const: function(can) { can.core.Item(html.value, function(key, value) { html[key] = can.page.styleValueInt(can, "--"+can.base.replaceAll(key.toLowerCase(), "_", "-"))||value }) }, _time: function(can, target) { can.core.Timer({interval: 100}, function() { can.onimport.time(can, target) }), can.onappend.figure(can, {action: "date"}, target) }, time: function(can, target) { can.onimport.theme(can), target.innerHTML = can.user.time(can, null, can.Conf(mdb.TIME)||"%H:%M:%S %w") }, - language: function(can, language) { can.user.toastConfirm(can, can.user.trans(can, "change language to "+language), aaa.LANGUAGE, function() { - can.runAction(event, aaa.LANGUAGE, [language == ice.AUTO? "": language], function(msg) { can.user.reload(true) }) - }) }, avatar: function(event, can, avatar) { can.user.isExtension || can.user.isLocalFile || can.runAction(event, aaa.AVATAR, [avatar], function(msg) { can.user.info.avatar = avatar, can.onimport._avatar(can, msg), can.user.toastSuccess(can) }) }, background: function(event, can, background) { can.user.isExtension || can.user.isLocalFile || can.runAction(event, aaa.BACKGROUND, [background], function(msg) { can.user.info.background = background, can.onimport._background(can, msg), can.user.toastSuccess(can) }) }, + language: function(can, language) { can.user.toastConfirm(can, can.user.trans(can, "change language to "+language), aaa.LANGUAGE, function() { + can.runAction(event, aaa.LANGUAGE, [language == ice.AUTO? "": language], function(msg) { can.user.reload(true) }) + }) }, theme: function(can, theme, event) { theme && theme != ice.AUTO && can.runAction({}, chat.THEME, [theme]) if (theme) { can.onengine.signal(can, "ontheme", can.request(event, {theme: theme})) } theme && can.require(["/chat/theme/"+theme+".css"])