add some

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() {
+					if (msg.Length() > 9 && !sub.ui.project && !can.user.isMobile) { can.onmotion.delay(can, function() { can.onappend._filter(can) }, 300) }
-						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) }
 				} 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) {

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); }

panel/footer.css

@@ -1,21 +1,22 @@
-fieldset.Footer { width:100%; }
+// fieldset.Footer { width:100%; }
-fieldset.Footer>div.output { font-style:italic; height:var(--footer-height); overflow:hidden; }
+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); float:left; }
+fieldset.Footer>div.output div.item { padding:7px; height:var(--footer-height); }
-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>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:not(.tabview)>div.output div.title:first-child { font-weight:bold; text-align:center; width:var(--river-width); }
-fieldset.Footer>div.output div.cmd { padding:0; margin-left:20px; }
 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.menu { width:100%; }
-body.mobile fieldset.Footer>div.output div.cmd { display:none; }
+body.mobile fieldset.Footer>div.output>div:not(.menu) { display:none; }
 
 .picker {
 	box-shadow:var(--notice-bg-color) 0px 0px 20px 5px !important;

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)
+		can.onimport._title(can, msg, target)
-		if (!can.user.isTechOrRoot(can)) { return }
+		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 = '<a href="mailto:'+item+'">'+item+'</a>' }
@@ -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]) }}]) })

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; }

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) {
+	_avatar: function(can, msg) { can.user.isExtension || can.user.isLocalFile || can.page.Modify(can, "div.state.avatar>img", {src: can.onexport.avatar(can)}) },
-		can.core.Item(html.value, function(key, value) {
+	_background: function(can, msg) { if (can.user.isExtension || can.user.isLocalFile) { return } can.onlayout.background(can, can.onexport.background(can)) },
-			html[key] = can.page.styleValueInt(can, "--"+can.base.replaceAll(key.toLowerCase(), "_", "-"))||value
+	_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"])