add body.width6

frame.js

@@ -295,7 +295,7 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) {
 			} }, icon.push({icon: mdb.DELETE, onclick: function(event) { _input.value = "", input.onkeyup({target: event.target.previousSibling}) }})
 		} if (item.range) { input._init = function(target) { can.onappend.figure(can, item, target, function(sub, value, old) { target.value = value, can.core.CallFunc([can.onaction, item.name], [event, can, item.name]) }) } }
 		var _style = can.page.buttonStyle(can, item.name)
-		var _input = can.page.Append(can, target, [{view: [[html.ITEM].concat(style, [item.type, item.name], _style)], list: [item.icon && {icon: item.icon}, input].concat(icon), _init: function(target, _input) {
+		var _input = can.page.Append(can, target, [{view: [[html.ITEM].concat(style, [item.type, item.name, item._className], _style)], list: [item.icon && {icon: item.icon}, input].concat(icon), _init: function(target, _input) {
 			if (item.type == html.SELECT) {
 				_input.select.value = value||_item.value||_item.values[0]
 				can.onappend.select(can, _input.select, _item)
@@ -439,7 +439,8 @@ Volcanos(chat.ONAPPEND, {_init: function(can, meta, list, cb, target, field) {
 			{view: [[html.DISPLAY, html.TOGGLE]], onclick: function() { can.onmotion.toggle(can, can.ui.display), can.onimport.layout(can) }},
 			{view: [[html.PROFILE, html.TOGGLE]], onclick: function() { can.onmotion.toggle(can, can.ui.profile), can.onimport.layout(can) }},
 		])
-		toggle.layout = function() { var up = "\u25B2", down = "\u25BC", left = can.page.unicode.prev, right = can.page.unicode.next
+		toggle.layout = function() {
+			var up = can.page.unicode.prev, down = can.page.unicode.next, left = can.page.unicode.prev, right = can.page.unicode.next
 			// var up = "\u25B2", down = "\u25BC", left = "\u25C0", right = "\u25B6"
 			can.page.Modify(can, toggle.project, can.page.isDisplay(can.ui.project)? left: right)
 			can.page.Modify(can, toggle.display, can.page.isDisplay(can.ui.display)? down: up)

index.css

@@ -14,6 +14,10 @@ body {
 	--input-border:var(--box-border);
 	--output-bg-color: var(--input-bg-color);
 	--status-border:var(--box-border);
+	--tr-hover-bg-color:var(--hover-bg-color);
+	--th-bg-color:var(--plugin-bg-color);
+	--th-fg-color:var(--plugin-fg-color);
+	--td-hover-bg-color:var(--hover-bg-color);
 	--panel-bg-color:var(--panel-output-bg-color);
 	--panel-fg-color:var(--panel-output-fg-color);
 	--panel-output-fg-color: var(--body-fg-color);
@@ -23,42 +27,58 @@ body {
 	--plugin-border-color:var(--box-border);
 	--plugin-bg-color:var(--legend-bg-color);
    	--plugin-fg-color:var(--body-fg-color);
-	--th-bg-color:var(--plugin-bg-color);
-	--th-fg-color:var(--plugin-fg-color);
-	--td-hover-bg-color:var(--hover-bg-color);
-	--tr-hover-bg-color:var(--hover-bg-color);
 	--float-bg-color:var(--plugin-bg-color);
 	--float-fg-color:var(--plugin-fg-color);
 	--carte-bg-color:var(--plugin-bg-color);
 
-	--header-height:48px; --river-width:280px; --footer-height:32px;
-	--plugin-margin:20px; --plugin-radius:10px; --plugin-padding:20px;
-   	--button-margin:20px; --button-radius:5px;
-   	--input-radius:5px; --input-padding:10px; --input-width:120px;
-	--project-width:230px; --table-padding:10px;
-	--action-height:32px; --action-margin:200px;
-	--status-height:32px; --status-font-size:12px;
-
-	--code-font-size:14px; --code-font-family:monospace;
 	--code-bg-color:black; --code-fg-color:silver; --code-border-color:var(--notice-bg-color);
 	--code-comment:green; --code-keyword:royalblue; --code-package:blue;
 	--code-datatype:lavender; --code-function:lightgreen;
    	--code-constant:gray; --code-string:orange; --code-object:silver;
-	--svg-font-size:24px; --svg-stroke-width:1; --desktop-icon-size:80px;
+   	--code-font-size:14px; --svg-font-size:24px; --status-font-size:12px;
+   	--code-font-family:monospace; --svg-stroke-width:1; --desktop-icon-size:80px;
+
+	--header-height:48px; --footer-height:32px; --action-height:32px; --status-height:32px;
+   	--river-width:280px; --input-width:120px; --project-width:230px;
+	--plugin-margin:10px; --action-margin:200px; --button-margin:10px;
+   	--plugin-padding:10px; --input-padding:10px; --table-padding:5px;
+	--plugin-radius:10px; --input-radius:5px; --button-radius:5px;
 }
-body.mobile {
+body.width1 { /* 320-640 手机竖屏 */
-	--plugin-margin:0; --plugin-padding:10px;
+	--river-width:230px; --input-width:80px;
-   	--button-margin:5px;
+	--plugin-margin:0; --button-margin:5px;
-	--input-width:80px;
+	--plugin-padding:10px; --input-padding:5px; --table-padding:5px;
 	--svg-font-size:13px;
 }
+body.width2 { /* 640-960 手机横屏 平板竖屏 笔记本调试 */
+	--river-width:230px;
+	--plugin-margin:10px; --button-margin:5px;
+	--plugin-padding:10px; --input-padding:10px; --table-padding:5px;
+}
+body.width3 { /* 960-1280 平板横屏 */
+
+}
+body.width4 { /* 1280-1600 笔记本 显示器调试 */
+
+}
+body.width5 { /* 1600-1920 */
+
+}
+body.width6 { /* 1920-2240 显示器 */
+	--river-width:320px; --input-width:180px;
+	--plugin-margin:20px; --button-margin:20px;
+	--plugin-padding:20px; --input-padding:10px; --table-padding:20px;
+}
 body.windows { --code-font-family:"Courier New"; }
+
 /* element */
 * { tab-size:4; box-sizing:border-box; padding:0; border:0; margin:0; }
 legend { padding:0 20px; }
 select { padding:0 var(--input-padding); }
 input:not([type=file]) { padding:0 var(--input-padding); }
 input:not([type=button]) { border-radius:0; outline:none; width:var(--input-width); }
+div.item.text.trans input:not([type=button]) { transition:all 1s; }
+div.item.text.trans input:not([type=button]):focus { transition:all 0.5s; width:var(--river-width); }
 body:not(.mobile) input[name=path] { width:160px; }
 input[name=line] { width:60px !important; }
 input[name=limit] { width:60px; }
@@ -319,10 +339,10 @@ div.project div.action div.item.search>i:first-child { position:absolute; paddin
 div.project div.action div.item.search>input { width:100% !important; padding-left:25px; }
 div.project div.action div.item.search>span { right:10px; }
 div.content { position:relative; }
-div.content>div.toggle { position:absolute; }
+div.content>div.toggle { background-color:#4a566e6e; color:var(--panel-fg-color); font-size:32px; padding-top:38px; height:120px; position:absolute; }
-div.content>div.toggle.project { background-color:#4a566e6e; color:var(--panel-fg-color); font-size:32px; padding-top:38px; height:120px; top:20%; left:0; border-top-right-radius:20px; border-bottom-right-radius:20px; }
+div.content>div.toggle.project { top:20%; left:0; border-top-right-radius:20px; border-bottom-right-radius:20px; }
-div.content>div.toggle.profile { background-color:#4a566e6e; color:var(--panel-fg-color); font-size:32px; padding-top:38px; height:120px; top:20%; right:0; border-top-left-radius:20px; border-bottom-left-radius:20px; }
+div.content>div.toggle.profile { top:20%; right:0; border-top-left-radius:20px; border-bottom-left-radius:20px; }
-div.content>div.toggle.display { transform:scale(3, 1); text-align:center; width:80px; left:20%; bottom:0; }
+div.content>div.toggle.display { left:20%; bottom:-52px; rotate:90deg; border-top-left-radius:20px; border-bottom-left-radius:20px; }
 div.content>div.toggle:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); cursor:pointer; }
 div.toggle:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); cursor:pointer; }
 div.output>div.project:not(.toggle) { border-right:var(--box-border); width:var(--project-width); flex:0 0 var(--project-width); }
@@ -337,7 +357,7 @@ div.output.card>div.item { background:var(--plugin-bg-color); padding:10px; bord
 div.output.card>div.item>div.title { font-size:1.2rem; font-weight:bold; padding:10px; border-bottom:var(--box-border); }
 div.output.card>div.item>div.content { padding:10px; height:48px; }
 div.output.card>div.item>div.action { text-align:right; width:100%; display:flex; }
-div.output.card>div.item>div.action>input { margin-right:10px; box-shadow:var(--box-shadow); }
+div.output.card>div.item>div.action>input { margin-right:var(--button-margin); box-shadow:var(--box-shadow); }
 input[type=button].danger:hover { background-color:var(--danger-bg-color); color:var(--danger-fg-color); }
 input[type=button].notice:hover { background-color:var(--notice-bg-color); color:var(--notice-fg-color); }
 /* display */

lib/user.js

@@ -54,6 +54,7 @@ Volcanos("user", {
 		can.user.mod.isCmd && name.push(chat.CMD), can.user.mod.cmd && name.push(can.user.mod.cmd.replaceAll(".", " "))
 		can.user.isMobile && name.push(html.MOBILE) && can.user.isLandscape() && name.push(html.LANDSCAPE)
 		can.user.isWebview && name.push(html.WEBVIEW), can.user.isWindows && name.push("windows")
+		name.push("width"+parseInt((can.page.width()+32)/320))
 		can.page.styleClass(can, document.body, name.join(lex.SP))
 	},
 	title: function(text) { if (window.webview) { return title(text) } return text && (document.title = text), document.title },

panel/action.js

@@ -133,7 +133,7 @@ Volcanos(chat.ONLAYOUT, {
 	page: function(can) { can.page.styleHeight(can, can._output, ""), can.page.style(can, document.body, kit.Dict(html.OVERFLOW, "")) },
 	_plugin: function(can, button) { can.core.List(can._plugins, function(sub) {
 		if (can.page.ClassList.has(can, sub._target, html.OUTPUT)) { return sub.onimport.size(sub, can.ConfHeight(), can.ConfWidth(), true) }
-		if (can._plugins.length == 1) { return sub.onimport.size(sub, can.ConfHeight()-html.ACTION_HEIGHT-can.Conf(html.MARGIN_Y), can.ConfWidth()-can.Conf(html.MARGIN_X), false) }
+		if (can._plugins.length == 1) { return sub.onimport.size(sub, can.ConfHeight()-(can.user.isMobile? 2: 1)*html.ACTION_HEIGHT-can.Conf(html.MARGIN_Y), can.ConfWidth()-can.Conf(html.MARGIN_X), false) }
 		sub.onimport.size(sub, can.ConfHeight()-can.Conf(html.MARGIN_Y)-(button || sub.isCmdMode()? 0: html.ACTION_MARGIN), can.ConfWidth()-can.Conf(html.MARGIN_X), can.onexport.isauto(can)) && can.page.style(can, sub._output, html.MAX_HEIGHT, "")
 	}) },
 	_storage: function(can, value) { return can.misc.sessionStorage(can, can.core.Keys(CAN_LAYOUT, location.pathname), value) },

panel/footer.css

@@ -6,8 +6,7 @@ fieldset.Footer>div.output div.state label { font-size:12px; }
 fieldset.Footer>div.output div.toast { float:right; line-height:18px; }
 fieldset.Footer>div.output div.cmd { padding:0; margin-left:20px; position:relative; }
 fieldset.Footer>div.output div.cmd>i { padding:7px; position:absolute; }
-fieldset.Footer>div.output div.cmd>input[name=cmd] { padding-left:30px; width:120px; transition:all 1s; }
+fieldset.Footer>div.output div.cmd>input[name=cmd] { padding-left:30px; }
-fieldset.Footer>div.output div.cmd>input[name=cmd]:focus { width:var(--river-width); transition:all 0.5s; }
 fieldset.Footer>div.output div.cmd>span.delete { padding:6px; }
 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:60px; display:flex; flex-direction:column; text-align:center; flex-grow:1; }

panel/footer.js

@@ -3,6 +3,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { can.Conf(NKEY, can.
 		can._wss = can.ondaemon._init(can); if (can.user.mod.isCmd) { return } can.Conf("version", can.base.trimPrefix(window._version, "?_v="))
 		can.onimport._title(can, msg, target), can.onimport._command(can, msg, target)
 		can.onimport._storm(can, msg, target)
+		can.ConfHeight(can.page.height()), can.ConfWidth(can.page.width())
 		can.onimport._state(can, msg, target), can.onimport._toast(can, msg, target)
 	},
 	_title: function(can, msg, target) { can.user.isMobile || can.core.List(can.Conf(chat.TITLE)||msg.result, function(item) {
@@ -10,15 +11,15 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { can.Conf(NKEY, can.
 		can.page.Append(can, target, [{view: [[html.ITEM, chat.TITLE], "", item], title: "联系站长"}])
 	}) },
 	_storm: function(can, msg, target) {
-		can.ui.storm = can.page.Append(can, can._output, ["menu"])._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), [NTIP, NLOG, NCMD, NKEY, "version"]).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).reverse(), 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.onexport[item](can) }}])
 	}) },
 	_toast: function(can, msg, target) { can.ui.toast = can.page.Append(can, target, [{view: [[html.ITEM, chat.TOAST]], onclick: function(event) { can.onexport[NTIP](can) }}])._target },
-	_command: function(can, msg, target) { can.onappend.input(can, {type: html.TEXT, icon: icon.TERMINAL, name: ice.CMD, onkeydown: function(event) { can.onkeymap.input(event, can)
+	_command: function(can, msg, target) { can.onappend.input(can, {type: html.TEXT, _className: "args trans", icon: icon.TERMINAL, name: ice.CMD, onkeydown: function(event) { can.onkeymap.input(event, can)
 		function close() { can.ui.cli && can.ui.cli.onaction.close() } if (event.key == code.ESCAPE) { return close() } if (event.key != code.ENTER) { return }
 		close(); switch (event.target.value) {
 		case web.CLEAR:
@@ -46,9 +47,6 @@ Volcanos(chat.ONACTION, {_init: function(can) {},
 	onlogin: function(can, msg) { can.run(can.request({}, {_method: http.GET}), [], function(msg) { can.onmotion.clear(can), can.onimport._init(can, msg, can._output) }) },
 	ontoast: function(can, msg) { can.core.CallFunc(can.onimport.ntip, {can: can, msg: msg}) },
 	onremote: function(can, msg) { can.core.CallFunc(can.onimport.ncmd, {can: can, msg: msg}) },
-	onlayout: function(can, layout) {
-		// can.onmotion.toggle(can, can._target, !layout || layout == html.TABS)
-	},
 	onunload: function(can) { can._wss && can._wss.close() },
 	onaction_cmd: function(can) { can.onappend.style(can, html.HIDE) },
 	oncommand_focus: function(can) { can.page.Select(can, can._output, ["div.cmd", html.INPUT], function(target) { can.onmotion.focus(can, target) }) },
@@ -65,7 +63,8 @@ Volcanos(chat.ONACTION, {_init: function(can) {},
 		})
 	},
 })
-Volcanos(chat.ONEXPORT, {height: function(can) { return can._target.offsetHeight },
+Volcanos(chat.ONEXPORT, {list: [NTIP, NLOG, NCMD, NKEY, html.WIDTH, html.HEIGHT, nfs.VERSION],
+	height: function(can) { return can._target.offsetHeight },
 	ntip: function(can) { can.onexport._float(can, NTIP, "can.toast") },
 	nlog: function(can) { can.onexport._float(can, NLOG, "can.debug") },
 	ncmd: function(can) { can.onexport._float(can, NCMD, "can.debug", [chat.ONREMOTE]) },

panel/header.css

@@ -7,6 +7,5 @@ body.mobile fieldset.Header>div.output div.state.avatar { margin-right:10px; }
 fieldset.Header>div.output div.state.avatar>img { height:var(--header-height); clip-path:circle(40%); }
 fieldset.Header>div.output div.search.title { padding:8px 5px; margin-left:15px; position:relative; }
 fieldset.Header>div.output div.search>i { padding:6px; position:absolute; }
-fieldset.Header>div.output div.search>input { padding-left:30px; transition:all 1s; }
+fieldset.Header>div.output div.search>input { padding-left:30px; }
-fieldset.Header>div.output div.search>input:focus { width:var(--river-width); transition:all 0.5s; }
 fieldset.Header>div.output div.search>span.delete { padding:5px 10px; }

panel/header.js

@@ -18,7 +18,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) {
 		window.parent == window? can.onlayout.background(can, can.onexport.background(can)): can.page.style(can, document.body, html.BACKGROUND_COLOR, "transparent")
 	},
 	_search: function(can, msg, target) {
-		can._search = can.onappend.input(can, {type: html.TEXT, icon: icon.SEARCH, name: mdb.SEARCH, value: can.misc.Search(can, "_search"), onkeydown: function(event) { can.onkeymap.input(event, can)
+		can._search = can.onappend.input(can, {type: html.TEXT, _className: "args trans", icon: icon.SEARCH, name: mdb.SEARCH, value: can.misc.Search(can, "_search"), onkeydown: function(event) { can.onkeymap.input(event, can)
 			event.key == code.ENTER && can.onengine.signal(can, chat.ONOPENSEARCH, can.request(event, {type: mdb.FOREACH, word: event.target.value||""}))
 		}}, "", target, [chat.TITLE])
 		can.onimport.menu(can, mdb.SEARCH, function() { can.onengine.signal(can, chat.ONOPENSEARCH, can.request(event, {type: mdb.FOREACH, word: can._search.value||""})) })

panel/search.js

@@ -24,7 +24,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg) { can.onmotion.clear(can, can
 Volcanos(chat.ONACTION, {_init: function(can) { can.onmotion.hidden(can) }, list: [cli.CLOSE, web.CLEAR, cli.DONE],
 	onsize: function(can, msg, height, width) { can.onimport._size(can), can.core.List(can._plugins, function(sub) { sub.onimport.size(sub, can.ConfHeight(), can.ConfWidth(), true) }) },
 	onlogin: function(can, msg) { can.ui = can.page.Append(can, can._output, [chat.CONTENT, {view: [[chat.DISPLAY, chat.CONTENT], html.TABLE]}, chat.PROFILE])
-		can.onappend._action(can, (can.Conf(html.ACTION)||can.onaction.list).concat({type: html.TEXT, name: html.FILTER, _init: function(target) { can.ui.filter = target }, onkeydown: function(event) {
+		can.onappend._action(can, (can.Conf(html.ACTION)||can.onaction.list).concat({type: html.TEXT, _className: "args trans", name: html.FILTER, _init: function(target) { can.ui.filter = target }, onkeydown: function(event) {
 			if (event.key == code.ESCAPE) { return event.target.blur() }
 			if (event.key == code.ENTER) { can.onkeymap.prevent(event); if (event.shiftKey) { return can.page.SelectOne(can, can.ui.content, [html.TBODY, html.TR, html.TD], function(target) { target.click() }) }
 				return event.ctrlKey? can.onaction.done(event, can): can.ui.input(event, event.target.value)