From a101a5379d12f36332141b7f18b595fc8cb69e2a Mon Sep 17 00:00:00 2001 From: shy Date: Wed, 22 Nov 2023 10:17:00 +0800 Subject: [PATCH] opt css size --- const.js | 3 +-- index.css | 32 +++++++++++++++++--------------- lib/page.js | 2 ++ panel/action.js | 14 +++++++++----- panel/footer.css | 8 ++++---- panel/header.css | 10 +++++----- panel/header.js | 4 ++++ panel/river.css | 2 +- panel/search.js | 4 ++-- 9 files changed, 45 insertions(+), 34 deletions(-) diff --git a/const.js b/const.js index f6548869..3a3ba44b 100644 --- a/const.js +++ b/const.js @@ -257,8 +257,7 @@ var http = { GET: "GET", PUT: "PUT", POST: "POST", DELETE: "DELETE", Accept: "Accept", ContentType: "Content-Type", ApplicationJSON: "application/json", ApplicationFORM: "application/x-www-form-urlencoded", } -var html = { - PLUGIN_MARGIN: 10, ACTION_HEIGHT: 32, ACTION_MARGIN: 200, +var html = {PLUGIN_MARGIN: 10, PLUGIN_PADDING: 10, ACTION_HEIGHT: 32, ACTION_MARGIN: 200, FIELDSET: "fieldset", LEGEND: "legend", OPTION: "option", ACTION: "action", OUTPUT: "output", STATUS: "status", OPTION_ARGS: "select.args,input.args,textarea.args", INPUT_ARGS: "input.args,textarea.args", INPUT_BUTTON: "input[type=button]", INPUT_FILE: "input[type=file]", FORM_OPTION: "form.option", DIV_ACTION: "div.action", DIV_OUTPUT: "div.output", DIV_STATUS: "div.status", diff --git a/index.css b/index.css index 5d69982e..7579ae57 100644 --- a/index.css +++ b/index.css @@ -11,12 +11,8 @@ body { --legend-bg-color:var(--body-bg-color); --input-fg-color: var(--body-fg-color); - --input-padding:10px; --input-border:var(--box-border); - --input-radius:5px; --input-width:120px; - --button-radius:5px; --button-margin:10px; --output-bg-color: var(--input-bg-color); - --status-font-size:12px; --status-border:var(--box-border); --panel-bg-color:var(--panel-output-bg-color); --panel-fg-color:var(--panel-output-fg-color); @@ -24,7 +20,7 @@ body { --panel-output-bg-color:var(--input-bg-color); --panel-hover-bg-color:var(--hover-bg-color); --panel-hover-fg-color:var(--hover-fg-color); - --plugin-border-color:var(--box-border); --plugin-radius:10px; + --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); @@ -35,18 +31,26 @@ body { --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; - --project-width:230px; } body.mobile { - --input-width:80px; --button-margin:5px; + --plugin-margin:0; --plugin-padding:10px; + --button-margin:5px; + --input-width:80px; --svg-font-size:13px; - --header-height:48px; } body.windows { --code-font-family:"Courier New"; } /* element */ @@ -65,8 +69,8 @@ table.content.full { width:100%; } table.content thead { position:sticky; top:2px; } table.content tr.offline { color:var(--disable-fg-color); } table.content tr.offline a { color:var(--disable-fg-color); } -table.content th { padding:5px; box-shadow:var(--box-shadow); } -table.content td { padding:5px; } +table.content th { padding:var(--table-padding); box-shadow:var(--box-shadow); } +table.content td { padding:var(--table-padding); } table.content.detail td:first-child { width:80px; } table.content.action th:last-child { position:sticky; right:2px; } table.content.action td:last-child { position:sticky; right:2px; text-align:center; } @@ -333,7 +337,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:var(--button-margin); box-shadow:var(--box-shadow); } +div.output.card>div.item>div.action>input { margin-right:10px; 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 */ @@ -468,7 +472,6 @@ body.mobile fieldset.River>div.output { font-size:1.4rem; min-width:240px; } body.mobile fieldset.Action { margin-top:var(--header-height); } body.mobile fieldset.Action.cmd { margin-top:0; } body.mobile fieldset.Action>div.output { overflow-x:hidden; } -body.mobile fieldset.Action>div.output>fieldset.plugin:not(.output):not(.float):not(.full):not(.cmd) { padding:0px; } body.mobile.landscape fieldset.Header { position:unset; } body.mobile.landscape fieldset.Action { margin-top:0; } body.mobile fieldset.word.float>div.output>div.project { top:32px; } @@ -508,9 +511,8 @@ div.output.stats>div.item>div.value span.units { color:var(--disable-fg-color); fieldset.input.icon div.output td { font-size:28px; padding:5px; } fieldset.Search div.story[data-type=spark] { margin:0; } fieldset.Search>div.output>div.profile { border-left:none; width:unset; } -fieldset.Action>div.output>fieldset.plugin:not(.output):not(.float):not(.full):not(.cmd) { padding:10px; margin:10px; box-shadow:var(--box-shadow); } -body.mobile fieldset.Action>div.output>fieldset.plugin:not(.output):not(.float):not(.full):not(.cmd) { padding:10px; margin:10px 0; box-shadow:var(--box-shadow); } -body.mobile fieldset.Action>div.output>fieldset.plugin:not(.output):not(.float):not(.full):not(.cmd):not(:first-child) { margin:20px 0; } +fieldset.Action>div.output>fieldset.plugin:not(.output):not(.float):not(.full):not(.cmd) { padding:var(--plugin-padding); margin:var(--plugin-margin); box-shadow:var(--box-shadow); } +body.mobile fieldset.Action>div.output>fieldset.plugin:not(.output):not(.float):not(.full):not(.cmd) { margin:20px 0; } fieldset.Action>div.output>fieldset.plugin:not(.float):not(.full):not(.cmd)>legend { float:none; } fieldset.cmd>div.item.time { line-height:22px; padding:5px 10px; float:right; } fieldset.cmd>div.item.avatar { padding:0; height:32px; float:right; } diff --git a/lib/page.js b/lib/page.js index da41cc47..1e67ec5f 100644 --- a/lib/page.js +++ b/lib/page.js @@ -373,4 +373,6 @@ Volcanos("page", { const styles = getComputedStyle(document.body); can.core.List(["--plugin-bg-color", "--plugin-fg-color"].concat(can.core.List(arguments).slice(2)), function(key) { msg.Option(key, styles.getPropertyValue(key)) }) return msg }, + styleValue: function(can, key) { const styles = getComputedStyle(document.body); return styles.getPropertyValue(key) }, + styleValueInt: function(can, key) { return can.base.trimSuffix(can.page.styleValue(can, key), "px") } }) diff --git a/panel/action.js b/panel/action.js index 1d85a614..8c19ab20 100644 --- a/panel/action.js +++ b/panel/action.js @@ -3,7 +3,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg) { var river = can.Conf(chat.R can.onmotion.clear(can), can.core.Next(msg.Table(), function(item, next) { item.type = chat.PLUGIN, item.mode = can.Mode(); if (item.deleted == ice.TRUE) { return next() } item.width = can.ConfWidth()-can.Conf(html.MARGIN_X) if (item.style == html.OUTPUT) { item.width = can.ConfWidth() } - if (msg.Length() == 1) { item.height = can.ConfHeight()-html.ACTION_HEIGHT-4*html.PLUGIN_MARGIN } + if (msg.Length() == 1) { item.height = can.ConfHeight()-html.ACTION_HEIGHT-can.Conf(html.MARGIN_Y) } can.onappend.plugin(can, item, function(sub, meta, skip) { can._plugins = (can._plugins||[]).concat([sub]), can.onimport._tabs(can, sub, meta), skip || next() sub.onaction._close = function() { can.onengine.signal(can, chat.ONACTION_REMOVE, can.request({river: river, storm: storm}, item)), can.page.Remove(can, sub._target) } sub.run = function(event, cmds, cb) { return can.run(event, [river, storm, meta.id||meta.index].concat(cmds), cb) } @@ -19,7 +19,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg) { var river = can.Conf(chat.R var tabs = [{view: [html.ITEM, "", meta.name], 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-html.PLUGIN_MARGIN) + can.onexport.layout(can) == FREE || (can._output.scrollTop = sub._target.offsetTop-10) can.onexport.layout(can) && can.misc.SearchHash(can, can.Conf(chat.RIVER), can.Conf(chat.STORM), meta.index) }, oncontextmenu: sub._legend.onclick}]; sub._header_tabs = can.page.Append(can, can._header_tabs, tabs)._target, sub._tabs = can.page.Append(can, can._action, tabs)._target }, @@ -29,13 +29,17 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg) { var river = can.Conf(chat.R }, }) Volcanos(chat.ONACTION, {_init: function(can, target) { - can.Conf(html.MARGIN_Y, (can.user.isMobile? 0: 4)*html.PLUGIN_MARGIN+html.ACTION_HEIGHT), can.Conf(html.MARGIN_X, (can.user.isMobile? 2: 4)*html.PLUGIN_MARGIN) + 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) 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) }) }, onsize: function(can, msg, height, width) { can.Conf({height: can.base.Min(height, 240), width: width}) }, - onlogin: function(can, msg) { can.onimport._menu(can, msg), can.onkeymap._build(can) + 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) + can.onimport._menu(can, msg), can.onkeymap._build(can) can._root.River && can.onmotion.delay(can, function() { if (can.Mode()) { return } var gt = can.page.unicode.next, lt = can.page.unicode.prev, river = can._root.River._target @@ -130,7 +134,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-4*html.PLUGIN_MARGIN, can.ConfWidth()-can.Conf(html.MARGIN_X), false) } + 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) } 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) }, diff --git a/panel/footer.css b/panel/footer.css index 0aee332f..37732c63 100644 --- a/panel/footer.css +++ b/panel/footer.css @@ -1,13 +1,13 @@ -fieldset.Footer>div.output { font-style:italic; height:32px; overflow:hidden; } -fieldset.Footer>div.output div.item { padding:7px; float:left; } -fieldset.Footer>div.output div.title:first-child { font-weight:bold; text-align:center; width:var(--project-width); overflow:auto; } +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>div.output div.title:first-child { font-weight:bold; text-align:center; width:var(--river-width); overflow:auto; } fieldset.Footer>div.output div.state { float:right; } 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:10px; 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]:focus { width:320px; transition:all 0.5s; } +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; } diff --git a/panel/header.css b/panel/header.css index 71a103c5..7c334bf7 100644 --- a/panel/header.css +++ b/panel/header.css @@ -1,12 +1,12 @@ -fieldset.Header>div.output { font-size:1.1rem; line-height:21px; height:48px; overflow:hidden; } -fieldset.Header>div.output div.item { background-color:var(--panel-output-bg-color); padding:13.5px; float:left; } -fieldset.Header>div.output div.title:first-child { font-style:italic; font-weight:bold; text-align:center; width:var(--project-width); overflow:auto; } +fieldset.Header>div.output { font-size:1.1rem; 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; float:left; height:var(--header-height); } +fieldset.Header>div.output div.title:first-child { font-style:italic; font-weight:bold; text-align:center; width:var(--river-width); overflow:auto; } fieldset.Header>div.output div.state { float:right; } fieldset.Header>div.output div.state.avatar { padding:0; } body.mobile fieldset.Header>div.output div.state.avatar { margin-right:10px; } -fieldset.Header>div.output div.state.avatar>img { height:48px; clip-path:circle(40%); } +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:5px; 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:focus { width:320px; transition:all 0.5s; } +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; } diff --git a/panel/header.js b/panel/header.js index 182bd05f..efea8d8f 100644 --- a/panel/header.js +++ b/panel/header.js @@ -62,6 +62,10 @@ Volcanos(chat.ONACTION, {_init: function(can) { can.user.info.email = msg.Option(aaa.EMAIL), can.user.info.repos = msg.Option(nfs.REPOS) msg.Option(nfs.SCRIPT) && can.require(can.base.Obj(msg.Option(nfs.SCRIPT)), function(can) { can.onaction.source(can, msg) }) msg.Option(mdb.PLUGIN) && can.onappend.plugin(can, {index: msg.Option(mdb.PLUGIN)}, function(sub) { can.onmotion.hidden(can, sub._target) }, document.body) + html.ACTION_HEIGHT = can.page.styleValueInt(can, "--action-height") + html.ACTION_MARGIN = can.page.styleValueInt(can, "--action-margin") + html.PLUGIN_MARGIN = can.page.styleValueInt(can, "--plugin-margin") + html.PLUGIN_PADDING = can.page.styleValueInt(can, "--plugin-padding") lang(msg, function() { can.onmotion.clear(can), can.onimport._init(can, can.request(), can._output), can.onengine.signal(can, chat.ONLOGIN) }) } can.run(can.request({}, {_method: http.GET}), [], function(msg) { lang(msg) diff --git a/panel/river.css b/panel/river.css index 82632ea0..4b8fa2bc 100644 --- a/panel/river.css +++ b/panel/river.css @@ -1,4 +1,4 @@ -fieldset.River { width:var(--project-width); float:left; } +fieldset.River { width:var(--river-width); float:left; } fieldset.River>div.action { width:100%; display:flex; justify-content:center; } fieldset.River>div.output div.item { padding:20px 20px; border-left:#00ffae solid 3px; } fieldset.River>div.output div.item>i.bi-chevron-down { float:right; } diff --git a/panel/search.js b/panel/search.js index 55311fae..f2250a94 100644 --- a/panel/search.js +++ b/panel/search.js @@ -7,8 +7,8 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg) { can.onmotion.clear(can, can }, _size: function(can) { can.ui && can.ui.content && can.getActionSize(function(left, top, width, height) { can.page.style(can, can._target, {left: left||0, top: top||0, width: width}), - can.page.style(can, can._output, html.MAX_HEIGHT, height -= 2*html.PLUGIN_MARGIN+(can.user.isMobile? 2: 1)*html.ACTION_HEIGHT+can.onexport.statusHeight(can)) - can.core.List([can.ui.content, can.ui.display], function(target) { can.page.style(can, target, html.MAX_WIDTH, can.ConfWidth(width-2*html.PLUGIN_MARGIN)) }) + can.page.style(can, can._output, html.MAX_HEIGHT, height -= 2*10+(can.user.isMobile? 2: 1)*html.ACTION_HEIGHT+can.onexport.statusHeight(can)) + can.core.List([can.ui.content, can.ui.display], function(target) { can.page.style(can, target, html.MAX_WIDTH, can.ConfWidth(width-2*10)) }) can.ConfHeight(can.base.Min(height-can.ui.content.offsetHeight-can.ui.display.offsetHeight-1, height/2)) }) }, _input: function(can, msg, arg, fields) { if (can.base.contains(arg[1], ";")) { arg = can.core.Split(arg[1], "\t ;", "\t ;") }