opt layout

index.css

@@ -35,8 +35,8 @@ body {
 
 	--river-width:var(--project-width); --project-width:230px; --input-width:120px; --button-width:60px;
 	--action-height:32px; --status-height:var(--action-height); --footer-height:var(--action-height); --header-height:48px;
- 	--desktop-height:684px; --float-height:480px; --plug-height:var(--story-height); --story-height:var(--float-height);
+ 	--desktop-height:684px; --float-height:480px; --plug-height:320px; --story-height:var(--float-height);
- 	--desktop-width:1200px; --float-width:1200px; --plug-width:1200px;
+ 	--desktop-width:1200px; --float-width:1200px; --plug-width:800px;
 	--textarea-height:96px; --qrcode-height:364px; --iframe-height:420px;
 	--river-margin:80px; --action-margin:200px; --desktop-icon-size:80px;
 	--plugin-padding:10px; --plugin-margin:var(--plugin-padding);
@@ -56,9 +56,9 @@ body.cmd { background-color:var(--plugin-bg-color); }
 body.cmd { --plug-width:1200px; --plug-height:640px; }
 body.width1 { /* 320-640 手机竖屏 */
 	--svg-font-size:13px;
-   	--river-width:280px;; --project-width:120px; --input-width:80px;
+	--river-width:280px;; --project-width:120px; --input-width:80px;
 	--river-margin:0;
-   	--plugin-margin:0; --button-margin:5px;
+	--plugin-margin:0; --button-margin:5px;
 	--footer-height:60px;
 	--action-button:2; --table-button:2;
 }
@@ -80,6 +80,12 @@ body.width6 { /* 1920-2240 显示器 */
 	--plugin-padding:10px;
 	--river-width:280px; --input-width:180px;
 }
+body.width2>fieldset.Header>div.output>div.state.time { display:none; }
+body.width2>fieldset.Header>div.output>div.state.language { display:none; }
+body.width2>fieldset.Header>div.output>div.state.theme { display:none; }
+body.width2>fieldset.Header>div.output>div.state.qrcode { display:none; }
+body.width3>fieldset.Header>div.output>div.state.time { display:none; }
+body.width3>fieldset.Header>div.output>div.state.language { display:none; }
 /* element */
 * { tab-size:4; box-sizing:border-box; padding:0; border:0; margin:0; }
 legend { font-family:var(--legend-font-family); padding:0 var(--legend-padding); margin-right:var(--button-margin); }
@@ -262,7 +268,6 @@ body div.path { font-family:var(--code-font-family); }
 body div.carte { font-family:var(--code-font-family); }
 /* icon */
 fieldset>legend>i { margin-right:var(--input-margin); }
-fieldset.River div.item>i:first-child { margin-right:var(--button-margin); }
 form.option>div.item.icon { position:relative; height:var(--action-height); overflow:hidden; }
 form.option>div.item.icon { font-size:var(--icon-font-size); padding:0 var(--input-padding); }
 form.option>div.item.icon.refresh { font-size:28px; line-height:28px; height:calc(var(--action-height) - 5px); }
@@ -380,16 +385,32 @@ div.profile:not(.toggle) { border-left:var(--box-border); width:50%; flex:0 0 50
 div.display:not(.toggle) { border-top:var(--box-border); }
 /* output style */
 body.mobile div.output.card { overflow-x:hidden; }
+div.output.card {
+	/* display:flex; flex-wrap:wrap; */
+}
+fieldset:not(.plug)>div.output.card>div.item {
+ 	height:180px;
+	min-width:320px;
+}
+fieldset.plug>div.output.card>div.item {
+	width:100%;
+	margin:0;
+}
 div.output.card>div.item {
+	/* flex-grow:1; */
+ 	position:relative;
 	background-color:var(--plugin-bg-color); padding:var(--plugin-padding); margin:var(--plugin-padding);
 	border:var(--box-border); border-radius:var(--plugin-radius); box-shadow:var(--box-shadow);
-	width:var(--river-width); float:left;
+ 	float:left;
 }
 div.output.card>div.item.stop { color:var(--disable-fg-color); }
 div.output.card>div.item>div.title { font-size:var(--legend-font-size); font-weight:bold; padding-bottom:var(--input-padding); border-bottom:var(--box-border); display:flex; align-items:center; overflow:hidden; }
 div.output.card>div.item>div.title>img { margin-right:var(--button-margin); margin-left:0; height:var(--header-height); width:var(--header-height); float:left; }
 div.output.card>div.item>div.content { font-size:var(--status-font-size); padding:var(--input-padding); height:var(--header-height); }
-div.output.card>div.item>div.action { text-align:right; width:100%; display:flex; }
+div.output.card>div.item>div.action {
+	text-align:right; width:100%; display:flex;
+	position:absolute; bottom:var(--plugin-padding);
+}
 div.output.card>div.item>div.action>input { padding:0 var(--button-padding); margin-right:var(--input-margin); box-shadow:var(--box-shadow); }
 div.output.stats { flex-wrap:wrap; }
 div.output.stats>div.item { text-align:center; padding:var(--plugin-padding); margin:var(--plugin-padding); float:left; flex-direction:column; flex-grow:1; }
@@ -406,7 +427,7 @@ div.flex:not(.hide) { display:flex; align-items:center; justify-content:center;
 fieldset.story, fieldset>div.output, fieldset>div.status, div.output>div.project div.item, div.content:not(.item), div.code, div.story[data-type=spark] { clear:both; }
 fieldset.story { position:sticky; left:0; }
 fieldset.full { position:fixed; left:0; top:0; }
-fieldset.auto, fieldset.full, fieldset.float { position:fixed; z-index:10; box-shadow:var(--box-shadow); }
+fieldset.full, fieldset.float { position:fixed; z-index:10; box-shadow:var(--box-shadow); }
 div.float { position:fixed; z-index:100; box-shadow:var(--box-shadow); }
 fieldset.plug { position:absolute; bottom:0; right:0; }
 div.output { position:relative; }

panel/action.js

@@ -18,7 +18,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg) { var river = can.Conf(chat.R
 		})
 	},
 	_tabs: function(can, sub, meta) {
-		var tabs = [{view: [html.ITEM, "", meta.name], onclick: function(event) { can.onmotion.select(can, can._header_tabs, html.DIV_ITEM, sub._header_tabs)
+		var tabs = [{view: [html.ITEM, "", meta.name], title: meta.help, onclick: function(event) { can.onmotion.select(can, can._header_tabs, html.DIV_ITEM, sub._header_tabs)
 			can.onmotion.select(can, can._action, html.DIV_ITEM, sub._tabs), can.onmotion.select(can, can._output, html.FIELDSET_PLUGIN, sub._target)
 			if (sub._delay_refresh) { sub._delay_refresh = false, sub.onimport.size(sub, can.ConfHeight()-can.Conf(html.MARGIN_Y), can.ConfWidth()-can.Conf(html.MARGIN_X), can.onexport.isauto(can)) }
 			can.onexport.layout(can) == FREE || (can._output.scrollTop = sub._target.offsetTop-10)
@@ -36,8 +36,11 @@ Volcanos(chat.ONACTION, {_init: function(can, target) {
 		can.core.List(["ontouchstart", "ontouchmove", "ontouchend"], function(item) {
 			can.onengine.listen(can, item, function(event, msg) { can.onaction[item](event, can), can.onengine.signal(can, chat.ONACTION_TOUCH, msg) }, target)
 		})
+		can.onaction.layout(can)
+	},
+	onsize: function(can, msg, height, width) {
+		can.Conf({height: can.base.Min(height, 240), width: width})
 	},
-	onsize: function(can, msg, height, width) { can.Conf({height: can.base.Min(height, 240), width: width}) },
 	onlogin: function(can, msg) {
 		can.Conf(html.MARGIN_Y, 2*html.PLUGIN_PADDING+2*html.PLUGIN_MARGIN+html.ACTION_HEIGHT)
 		can.Conf(html.MARGIN_X, 2*html.PLUGIN_PADDING+2*html.PLUGIN_MARGIN)
@@ -103,9 +106,10 @@ Volcanos(chat.ONACTION, {_init: function(can, target) {
 	cloud: function(can) { can.user.opens("https://cloud.shylinux.com/") },
 	portal: function(can) { can.user.opens(can.misc.MergePodCmd(can, {cmd: web.PORTAL})) },
 	desktop: function(can) { can.user.opens(can.misc.MergePodCmd(can, {cmd: web.DESKTOP})) },
-	layout: function(can, button, skip) { can.page.ClassList.del(can, can._target, can._layout||can.onlayout._storage(can)), can._header_tabs && can.onmotion.hidden(can, can._header_tabs)
+	layout: function(can, button, skip) { var before = can._layout||can.onlayout._storage(can)
+		can.page.ClassList.del(can, can._target, before), can._header_tabs && can.onmotion.hidden(can, can._header_tabs)
 		button = (can.onlayout._storage(can, can._layout = button == ice.AUTO? "": button))||can.misc.SearchOrConf(can, html.LAYOUT), can.page.ClassList.add(can, can._target, button)
-		can.onengine.signal(can, chat.ONLAYOUT, can.request({}, {layout: button})), can._root.River && can._river_show === false && can.onmotion.hidden(can, can._root.River._target), skip || can.onlayout._init(can)
+		can.onengine.signal(can, chat.ONLAYOUT, can.request({}, {layout: button, before: before})), can._root.River && can._river_show === false && can.onmotion.hidden(can, can._root.River._target), skip || can.onlayout._init(can)
 		can.isCmdMode() || can.core.List(can._plugins, function(sub) { sub._delay_refresh = false })
 		var cb = can.onlayout[button]; can.base.isFunc(cb) && cb(can) || can.onlayout._plugin(can, button)
 	},
@@ -118,12 +122,22 @@ Volcanos(chat.ONLAYOUT, {
 		can.onmotion.select(can, can._action, html.DIV_ITEM, can.onmotion.select(can, can._action, html.DIV_ITEM)||0, function(target) { target.click() }); return true
 	},
 	tabview: function(can) { can.getActionSize(function(height, width) { can.ConfHeight(height+html.ACTION_HEIGHT), can.ConfWidth(width) })
-		can.core.List(can._plugins, function(sub) { sub._delay_refresh = true }), can.onmotion.toggle(can, can._header_tabs, true)
+		can.core.List(can._plugins, function(sub) { sub._delay_refresh = true })
+		can.onmotion.toggle(can, can._header_tabs, true)
 		can.onmotion.select(can, can._action, html.DIV_ITEM, can.onmotion.select(can, can._action, html.DIV_TABS)||0, function(target) { target.click() }); return true
 	},
-	horizon: function(can) { can.getActionSize(function(height, width) { can.ConfHeight(height), can.ConfWidth(width/2) }) },
+	horizon: function(can) {
-	vertical: function(can) { can.getActionSize(function(height, width) { can.ConfHeight(height/2), can.ConfWidth(width) }) },
+		can.getActionSize(function(height, width) { can.ConfHeight(height), can.ConfWidth(width/2) })
-	grid: function(can) { can.getActionSize(function(height, width) { var m = can.user.isMobile? 1: 2, n = 2, h = height/n, w = width/m; can.ConfHeight(h+html.ACTION_HEIGHT), can.ConfWidth(w) }) },
+		can.onmotion.toggle(can, can._header_tabs, true)
+	},
+	vertical: function(can) {
+		can.getActionSize(function(height, width) { can.ConfHeight(height/2), can.ConfWidth(width) })
+		can.onmotion.toggle(can, can._header_tabs, true)
+	},
+	grid: function(can) {
+		can.getActionSize(function(height, width) { var m = can.user.isMobile? 1: 2, n = 2, h = height/n, w = width/m; can.ConfHeight(h+html.ACTION_HEIGHT), can.ConfWidth(w) })
+		can.onmotion.toggle(can, can._header_tabs, true)
+	},
 	free: function(can) { can.getActionSize(function(height, width) { can.ConfHeight(height*3/4), can.ConfWidth(width*3/4)
 		can.core.List(can._plugins, function(sub, index, array) { can.onmotion.move(can, sub._target, {left: (width/array.length/8*5+20)*index, top: (height/array.length/8*5)*index}) }), can.onmotion.toggle(can, can._header_tabs, true)
 	}) },

panel/header.css

@@ -8,6 +8,8 @@ fieldset.Header>div.output div.item.theme>i:last-child { color:var(--disable-fg-
 fieldset.Header>div.output div.item.theme>i.bi-moon-stars:last-child { font-size:12px; }
 fieldset.Header>div.output div.item.language { user-select:none; }
 fieldset.Header>div.output div.item.language>span:last-child { color:var(--disable-fg-color); }
+fieldset.Header>div.output div.Action>div.tabs { padding-left:40px; height:100%; overflow:auto; }
+fieldset.Header>div.output div.Action>div.tabs div.item { font-style:italic; }
 fieldset.Header>div.output div.state { float:right; }
 fieldset.Header>div.output div.state.avatar { padding:0; }
 fieldset.Header>div.output div.state.avatar>img { height:var(--header-height); clip-path:circle(40%); }

panel/river.css

@@ -12,3 +12,13 @@ fieldset.River>div.output { margin:var(--river-margin) 0; }
 fieldset.River>div.toggle { rotate:90deg; right:calc(50% - 5px); }
 fieldset.River>div.toggle.prev { top:-10px; }
 fieldset.River>div.toggle.next { bottom:-50px; }
+fieldset.River>div.output div.item>i:first-child { margin-right:var(--button-margin); }
+fieldset.River.page { display:none; }
+fieldset.River:not(.auto):not(.tabs):not(.page) { width:var(--header-height); }
+fieldset.River:not(.auto):not(.tabs):not(.page)>div.action { display:none; }
+fieldset.River:not(.auto):not(.tabs):not(.page)>div.output div.item { padding:var(--button-padding); }
+fieldset.River:not(.auto):not(.tabs):not(.page)>div.output div.item>span { display:none; }
+fieldset.River:not(.auto):not(.tabs):not(.page)>div.output>div.item>i:last-child { display:none; }
+fieldset.River:not(.auto):not(.tabs):not(.page)>div.output>div.item>i:first-child { font-size:24px; }
+fieldset.River:not(.auto):not(.tabs):not(.page)>div.output div.item>i:first-child { margin-right:0; }
+fieldset.River:not(.auto):not(.tabs):not(.page)>div.output>div.list { margin-left:var(--input-margin); }

panel/river.js

@@ -8,10 +8,10 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg) { can.onimport._main(can, msg
 		can._main_river = can.misc.SearchOrConf(can, chat.RIVER)||ls[0]||msg.Option(ice.MSG_RIVER)||"project"
 		can._main_storm = can.misc.SearchOrConf(can, chat.STORM)||ls[1]||msg.Option(ice.MSG_STORM)||"studio"
 	},
-	_river: function(can, meta, cb) { return {view: html.ITEM, list: [{icon: meta.icon}, {text: meta.name}, {icon: icon.CHEVRON_DOWN}], _init: function(target) { can.ui.river_list[meta.hash] = target, cb(target) },
+	_river: function(can, meta, cb) { return {view: html.ITEM, title: meta.name, list: [{icon: meta.icon}, {text: meta.name}, {icon: icon.CHEVRON_DOWN}], _init: function(target) { can.ui.river_list[meta.hash] = target, cb(target) },
 		onclick: function(event) { can.onaction.storm(event, can, meta.hash) }, oncontextmenu: function(event) { can.onaction.carte(event, can, can.onaction._menu, meta.hash) },
 	} },
-	_storm: function(can, meta, river) { return {view: html.ITEM, list: [{icon: meta.icon}, {text: meta.name}], _init: function(target) { can.ui.storm_list[can.core.Keys(river, meta.hash)] = target },
+	_storm: function(can, meta, river) { return {view: html.ITEM, title: meta.name, list: [{icon: meta.icon}, {text: meta.name}], _init: function(target) { can.ui.storm_list[can.core.Keys(river, meta.hash)] = target },
 		onclick: function(event) { can.onaction.action(event, can, river, meta.hash) }, oncontextmenu: function(event) { can.onaction.carte(event, can, can.ondetail._menu, river, meta.hash) },
 	} },
 	_menu: function(can, msg) { can.user.isMobile || can.user.mod.isPod? can.onmotion.hidden(can, can._action): can.onappend._action(can, can.onaction.list, can._action) },
@@ -34,7 +34,9 @@ Volcanos(chat.ONACTION, {list: [mdb.CREATE, web.SHARE, web.REFRESH], _init: func
 	onaction_touch: function(can, msg) { can.user.isMobile && can.onmotion.hidden(can) },
 	onaction_notool: function(can, msg, river, storm) { can.ondetail["addcmd"](msg._event, can, "addcmd", river, storm) },
 	onsearch: function(can, msg, arg) { if (arg[0] == chat.STORM) { can.onexport.storm(can, msg, arg) } },
-	onlayout: function(can, layout) { can.user.isMobile || can.onmotion.toggle(can, can._target, !can.base.isIn(layout, "tabview", "horizon","vertical", "page")) },
+	onlayout: function(can, layout, before) { if (can.user.isMobile) { return }
+		can.page.ClassList.del(can, can._target, before||"auto"), can.page.ClassList.add(can, can._target, layout||"auto")
+	},
 	create: function(event, can) { can.user.input(can.request(event, {title: "创建群组"}), can, [
 		{name: mdb.TYPE, values: [aaa.TECH, aaa.VOID], _trans: "类型"},
 		{name: mdb.NAME, value: "hi", _trans: "群名", need: "must"},

plugin/local/code/vimer.js

@@ -57,7 +57,7 @@ Volcanos(chat.ONFIGURE, {
 		sub.onexport.record = function(sub, value, key) { can.onimport.tabview(can, "", value, web.SPACE) }
 		can.page.Select(can, sub._output, html.DIV_ITEM, function(target, index) { can.onappend.style(can, msg.status[index], target) })
 	}), zone.toggle(false) },
-	repos: function(can, target, zone) { can.onimport._zone(can, zone, {index: web.CODE_GIT_SEARCH, args: ["repos"], style: html.OUTPUT, mode: mdb.ZONE}, function(sub, msg) {
+	repos: function(can, target, zone) { can.onimport._zone(can, zone, {index: web.CODE_GIT_SEARCH, style: html.OUTPUT, mode: mdb.ZONE}, function(sub, msg) {
 		sub.onexport.record = function(sub, value, key, data) { can.user.opens(data.html_url) }
 	}), zone.toggle(false) },
 })

plugin/table.js

@@ -8,7 +8,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) {
 			can.onappend.table(can, msg, null, target), can.onappend.board(can, msg, target), can.onmotion.story.auto(can, target)
 		}
 	},
-	card: function(can, msg, target) { can.sup.onexport.outputMargin = function() { return 240 }
+	card: function(can, msg, target) { can.sup.onexport.outputMargin = function() { return 260 }
 		can.page.Appends(can, target||can._output, msg.Table(function(value) { value.icon = value.icon||value.image
 			return {view: [[html.ITEM, value.status]], list: [
 				{view: [wiki.TITLE, html.DIV], list: [value.icon && {img: can.misc.Resource(can, value.icon, value.name)}, {text: value.name}]},