diff --git a/const.js b/const.js index dc49b8a8..19a5fab2 100644 --- a/const.js +++ b/const.js @@ -329,17 +329,20 @@ var http = { Accept: "Accept", ContentType: "Content-Type", ApplicationJSON: "application/json", ApplicationFORM: "application/x-www-form-urlencoded", } var html = {value: { - HEADER_HEIGHT: 48, ACTION_HEIGHT: 32, STATUS_HEIGHT: 32, - RIVER_WIDTH: 230, PROJECT_WIDTH: 230, - RIVER_MARGIN: 80, ACTION_MARGIN: 200, + PROJECT_WIDTH: 230, RIVER_WIDTH: 230, + FLOAT_HEIGHT: 480, FLOAT_WIDTH: 1200, PLUGIN_PADDING: 0, PLUGIN_MARGIN: 0, - ACTION_BUTTON: 3, TABLE_BUTTON: 5, - CODE_FONT_SIZE: 14, - QRCODE_WIDTH: 360, - CARD_BUTTON: 5, - CARD_WIDTH: 320, CARD_HEIGHT: 160, - PLUG_WIDTH: 800, PLUG_HEIGHT: 480, STORY_HEIGHT: 480, FLOAT_HEIGHT: 480, FLOAT_WIDTH: 1200, DESKTOP_WIDTH: 1200, DESKTOP_HEIGHT: 684, + + HEADER_HEIGHT: 48, ACTION_HEIGHT: 32, STATUS_HEIGHT: 32, + CARD_WIDTH: 280, CARD_HEIGHT: 160, QRCODE_WIDTH: 360, + STORY_HEIGHT: 480, + PLUG_HEIGHT: 480, PLUG_WIDTH: 800, + DESKTOP_HEIGHT: 684, DESKTOP_WIDTH: 1200, + + ACTION_BUTTON: 3, TABLE_BUTTON: 5, CARD_BUTTON: 5, + RIVER_MARGIN: 80, ACTION_MARGIN: 200, ORDER_SHOW_LIMIT: 30, ORDER_SHOW_DELAY: 150, + CODE_FONT_SIZE: 14, CODE_LINE_HEIGHT: 20, }, 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]", diff --git a/index.css b/index.css index f8589513..76c6f8e2 100644 --- a/index.css +++ b/index.css @@ -1,26 +1,10 @@ /* variable */ -@media (prefers-color-scheme: light) { -body { - --plugin-bg-color:white; --plugin-fg-color:black; - --code-comment:green; --code-keyword:darkblue; - --code-function:darkcyan; --code-constant:gray; --code-string:brown; - --code-object:purple; --code-datatype:cornflowerblue; --code-package:blue; -} -} body.light { --plugin-bg-color:white; --plugin-fg-color:black; --code-comment:green; --code-keyword:darkblue; --code-function:darkcyan; --code-constant:gray; --code-string:brown; --code-object:purple; --code-datatype:cornflowerblue; --code-package:blue; } -@media (prefers-color-scheme: dark) { -body { - --plugin-bg-color:black; --plugin-fg-color:silver; - --code-comment:green; --code-keyword:royalblue; - --code-function:lightgreen; --code-constant:gray; --code-string:orange; - --code-object:silver; --code-datatype:lavender; --code-package:blue; -} -} body.dark { --plugin-bg-color:black; --plugin-fg-color:silver; --code-comment:green; --code-keyword:royalblue; @@ -38,7 +22,7 @@ body { --float-height:480px; --float-width:1200px; --desktop-icon-size:80px; } body { - --body-bg-color:var(--plugin-bg-color); --body-fg-color:var(--plugin-fg-color); + --body-bg-color:var(--panel-bg-color); --body-fg-color:var(--plugin-fg-color); --legend-bg-color:var(--plugin-bg-color); --legend-fg-color:var(--plugin-fg-color); --input-bg-color:var(--output-bg-color); --input-fg-color: var(--output-fg-color); --output-bg-color:var(--plugin-bg-color); --output-fg-color:var(--plugin-fg-color); @@ -52,15 +36,15 @@ body { --panel-hover-bg-color:var(--hover-bg-color); --panel-hover-fg-color:var(--hover-fg-color); --action-output-bg-color:var(--output-bg-color); + --box-shadow:var(--body-fg-color) 0px 0px 10px; + --notice-box-shadow:var(--notice-bg-color) 0px 0px 10px; + --plugin-box-shadow:var(--box-shadow); --legend-box-shadow:var(--box-shadow); --input-box-shadow:var(--box-shadow); + --th-box-shadow:var(--box-shadow); --box-border:var(--disable-fg-color) solid 1px; --box-notice:var(--notice-bg-color) solid 1px; --box-danger:var(--danger-bg-color) solid 1px; --box-border3:var(--disable-fg-color) solid 3px; --box-notice3:var(--notice-bg-color) solid 3px; --box-danger3:var(--danger-bg-color) solid 3px; --plugin-border-color:var(--box-border); --input-border:var(--box-border); --status-border:var(--box-border); --code-border-color:var(--notice-bg-color); --plugin-radius:var(--plugin-padding); --button-radius:var(--input-padding); - --box-shadow:var(--body-fg-color) 0px 0px 10px; - --notice-box-shadow:var(--notice-bg-color) 0px 0px 10px; - --plugin-box-shadow:var(--box-shadow); --legend-box-shadow:var(--box-shadow); --input-box-shadow:var(--box-shadow); - --th-box-shadow:var(--legend-box-shadow); --plugin-padding:10px; --plugin-margin:var(--plugin-padding); --legend-padding:20px; --legend-margin:20px; --title-margin:var(--legend-padding); @@ -70,7 +54,7 @@ body { --header-height:48px; --footer-height:var(--action-height); --action-height:32px; --status-height:var(--action-height); --textarea-height:96px; --input-width:140px; --button-width:60px; --form-width:360px; --url-input-width:480px; - --card-width:320px; --card-height:160px; --qrcode-width:360px; --qrcode-height:364px; + --card-width:300px; --card-height:160px; --qrcode-width:360px; --qrcode-height:364px; --story-height:var(--float-height); --iframe-height:420px; --plug-height:var(--float-height); --plug-width:var(--float-width); --desktop-height:684px; --desktop-width:var(--float-width); @@ -81,8 +65,8 @@ body { --legend-font-family:var(--body-font-family); --status-font-family:var(--body-font-family); --input-font-family:var(--code-font-family); --table-font-family:var(--code-font-family); --svg-font-family:var(--code-font-family); - --body-font-size:16px; --legend-font-size:20px; --status-font-size:12px; - --code-font-size:14px; --code-line-height:24px; --code-tabs-height:48px; + --body-font-size:14px; --legend-font-size:18px; --status-font-size:12px; + --code-font-size:13px; --code-line-height:21px; --code-tabs-height:38px; --icon-font-size:var(--legend-font-size); --svg-font-size:24px; --svg-stroke-width:1; } body.en { --card-button:3; } @@ -159,7 +143,7 @@ div.title>div.status>div.item.access { background-color:var(--danger-bg-color); div.title>div.status>div.item:not(:hover) { color:var(--disable-fg-color); } div.title>div.status>div.item>i { margin-right:var(--input-margin); } fieldset.store>div.output>fieldset.story:not(.float) { display:none; } -div.output.card>div.item { padding:var(--plugin-padding); margin:var(--plugin-padding); min-width:320px; position:relative; float:left; } +div.output.card>div.item { padding:var(--plugin-padding); margin:var(--plugin-padding); min-width:120px; position:relative; float:left; } div.output.card>div.item { background-color:var(--plugin-bg-color); color:var(--plugin-fg-color); } div.output.card>div.item:hover { background-color:var(--plugin-bg-color); color:var(--plugin-fg-color); } div.output.card>div.item.stop { color:var(--disable-fg-color); } @@ -246,7 +230,7 @@ fieldset.input.key>div.output>div.item img[src*=".jpg"] { padding:5px; } fieldset.input.key>div.output>div.item div.title { padding:var(--input-padding) 0; } fieldset.input.key>div.output>div.item div.status div.item { color:var(--disable-fg-color); font-size:var(--status-font-size); float:left; } fieldset.input.key>div.output>div.item div.status div.item span { padding:0 var(--input-padding); } -fieldset.input.key div.status:not(.hide) { background-color:var(--plugin-bg-color); display:block; position:sticky; bottom:0; } +fieldset.input.key div.status:not(.hide) { background-color:var(--input-bg-color); display:block; position:sticky; bottom:0; } fieldset.input.key.simple th { display:none; } fieldset.input.key.simple td { min-width:var(--button-width); } fieldset.input.icon img { height:var(--desktop-icon-size); width:var(--desktop-icon-size); cursor:pointer; } @@ -307,7 +291,7 @@ body>div.input.process input { background-color:var(--disable-bg-color) !importa body>div.input.process input:hover { background-color:var(--disable-bg-color) !important; color:var(--disable-fg-color); border:var(--box-border) !important; } body>div.input { padding:var(--plugin-padding); } body>div.input { padding:var(--plugin-padding); } -body>div.input>legend { float:right; padding:0; } +body>div.input>legend { background-color:var(--input-bg-color); float:right; padding:0; } body>div.input tr { margin:var(--button-margin); } body>div.input td { padding:var(--table-padding); } body>div.input td:nth-child(2) { padding:var(--table-padding) 0; } @@ -476,16 +460,17 @@ fieldset.panel.auto { background-color:var(--panel-bg-color); color:var(--panel- fieldset.panel.auto>div.output { background-color:var(--panel-bg-color); color:var(--panel-fg-color); } fieldset.panel.main>div.output { background-color:var(--action-output-bg-color); } fieldset:not(.panel) { background-color:var(--plugin-bg-color); color:var(--plugin-fg-color); } -fieldset.input div.output { background-color:var(--plugin-bg-color); } +fieldset.input div.output { background-color:var(--input-bg-color); } +/* fieldset.input div.status { background-color:var(--input-bg-color); } */ fieldset.input tr:hover { background-color:var(--tr-hover-bg-color); } fieldset.input td:hover { background-color:var(--td-hover-bg-color); } fieldset.input>span.close { padding:var(--input-padding); position:absolute; top:var(--input-padding); right:var(--input-padding); } fieldset.input>span.close:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); cursor:pointer; } -div.float { background-color:var(--float-bg-color); color:var(--float-fg-color); } -div.carte div.item { background-color:var(--carte-bg-color); color:var(--carte-fg-color); } +div.float { background-color:var(--input-bg-color); } +/* div.carte div.item { background-color:var(--carte-bg-color); color:var(--carte-fg-color); } */ div.carte div.item:hover { background-color:var(--hover-bg-color); } -div.carte div.item.danger:hover { background-color:var(--danger-bg-color); color:var(--danger-fg-color); } div.carte div.item.notice:hover { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } +div.carte div.item.danger:hover { background-color:var(--danger-bg-color); color:var(--danger-fg-color); } /* z-index */ fieldset.Action>div.toast { z-index:11; } body>div.toast.float { z-index:11; } @@ -533,7 +518,7 @@ fieldset>div.action>div.cmds { box-shadow:var(--legend-box-shadow); } fieldset>div.status>legend { box-shadow:var(--legend-box-shadow); } table.content th { box-shadow:var(--th-box-shadow); } table.content.action td:last-child { box-shadow:var(--th-box-shadow); } -table.content input { box-shadow:var(--input-box-shadow); } +table.content input { background-color:var(--th-bg-color); box-shadow:var(--input-box-shadow); } div.output.card>div.item { box-shadow:var(--box-shadow); } div.output.card>div.item:hover { box-shadow:var(--notice-box-shadow); } div.output.card>div.item>div.action>input { box-shadow:var(--input-box-shadow); } @@ -549,7 +534,8 @@ body.windows { --code-font-family:"Courier New"; } body { font-family:var(--body-font-family); } legend { font-family:var(--legend-font-family); font-style:italic; } input { font-family:var(--input-font-family); } -kbd { font-family:var(--code-font-family); } +kbd { font-family:var(--code-font-family); line-height:var(--code-line-height); } +kbd:hover { background-color:var(--hover-bg-color); } table.content { font-family:var(--table-font-family); } table.content th { font-family:var(--input-font-family); font-style:italic; } body div.code { font-family:var(--table-font-family); } diff --git a/lib/user.js b/lib/user.js index f76eb593..2be88175 100644 --- a/lib/user.js +++ b/lib/user.js @@ -190,9 +190,9 @@ Volcanos("user", { }, input: function(event, can, form, cb, button) { if (!form || form.length == 0) { return cb() } event = event||{}; var msg = can.request(event); event = event._event||event; var need = {} - var title = msg.Option(wiki.TITLE) + var title = msg.Option(wiki.TITLE)||msg.Option(ctx.ACTION) var ui = can.page.Append(can, document.body, [{view: [[html.INPUT].concat((can.ConfIndex()||"").split("."), msg.Option(mdb.TYPE), [chat.FLOAT])], list: [ - title && {view: [wiki.TITLE, html.LEGEND, title]}, + // title && {view: [wiki.TITLE, html.LEGEND, title]}, {view: html.OPTION, list: [{type: html.TABLE, list: can.core.List(form, function(item) { item = can.base.isString(item)? {type: html.TEXT, name: item}: item.length > 0? {type: html.SELECT, name: item[0], values: item.slice(1)}: item item.type = item.type||(item.values? html.SELECT: item.name == html.TEXT? html.TEXTAREA: html.TEXT), need[item.name] = item.need @@ -224,6 +224,7 @@ Volcanos("user", { can.core.CallFunc(cb, {event: can.request(event, {_handle: ice.TRUE})._event, button: button, data: data, list: list, args: args, input: action}) || action.cancel() }, _target: ui._target, _engine: function(event, can, button) { action.submit(event, can, button) }, }); + title && can.page.Select(can, action._target, "input[name=submit]", function(target) { target.value = can.user.trans(can, title) }) if (event && event.target) { can.onlayout.figure(event, can, ui._target) can.user.isMobile && can.page.style(can, ui._target, html.LEFT, (can.page.width()-ui._target.offsetWidth)/2, html.TOP, can.getHeaderHeight(can)) diff --git a/plugin/local/code/inner.css b/plugin/local/code/inner.css index 800b0111..ae20dd57 100644 --- a/plugin/local/code/inner.css +++ b/plugin/local/code/inner.css @@ -43,11 +43,12 @@ fieldset.inner.cmd>div.output>div.layout>div.tabs>div.tabs { justify-content:fle fieldset.inner.cmd>div.output>div.layout>div.tabs>div.tabs:hover { background-color:unset; } fieldset.inner.cmd>div.output>div.layout>div.tabs>div.tabs>div.tabs { padding:var(--input-padding) var(--button-padding); height:var(--code-tabs-height); display:flex; align-items:center; } fieldset.inner.cmd>div.output>div.layout>div.tabs>div.head { flex-direction:row-reverse; } -fieldset.inner.cmd>div.output>div.layout>div.tabs>div.head>div { white-space:pre; padding:10px; } +fieldset.inner.cmd>div.output>div.layout>div.tabs>div.head>div { white-space:pre; padding:0 var(--input-padding); } +fieldset.inner.cmd>div.output>div.layout>div.tabs>div.head>div.item.online.state img { height:var(--code-tabs-height); } fieldset.inner.cmd>div.output>div.layout>div.tabs>div.head>div { height:var(--code-tabs-height); } fieldset.inner.cmd>div.output>div.layout>div.tabs>div.head>div.online { margin-left:0 !important; margin-right:0 !important; height:var(--code-tabs-height); } fieldset.inner.cmd>div.output>div.layout>div.tabs>div.head>div.online span { bottom:12px; } -fieldset.inner.cmd>div.output>div.layout>div.tabs>div.head>div.qrcode i { display:block; margin-top:8px; } +fieldset.inner.cmd>div.output>div.layout>div.tabs>div.head>div.qrcode i { display:block; margin-top:10px; } fieldset.inner.cmd>div.output>div.layout>div.tabs>div.head>div.avatar { padding:0; height:var(--code-tabs-height); } fieldset.inner.cmd>div.output>div.layout>div.tabs>div.head>div.avatar>img { height:var(--code-tabs-height); clip-path:circle(40%); } fieldset.inner.cmd>div.output>div.layout>div.path:not(.hide) { display:flex; } diff --git a/plugin/local/code/vimer.js b/plugin/local/code/vimer.js index bf32b97e..8a084bf7 100644 --- a/plugin/local/code/vimer.js +++ b/plugin/local/code/vimer.js @@ -69,7 +69,11 @@ Volcanos(chat.ONACTION, {list: [ if (msg.IsErr()) { return can.user.toastFailure(can, msg.Result()) } can.onimport.tabview(can, msg.Option(nfs.PATH), msg.Option(nfs.FILE)), can.ui.zone.source.refresh() }) }, - _runs: function(event, can, button, cb) { var meta = can.Conf(); can.request(event, {action: button}), can.user.input(event, can, meta.feature[button], function(args) { can.onaction._run(event, can, button, args, cb) }) }, + _runs: function(event, can, button, cb) { + var meta = can.Conf() + var msg = can.request(event) + msg.Option(ctx.ACTION, button) + can.user.input(event, can, meta.feature[button], function(args) { can.onaction._run(event, can, button, args, cb) }) }, save: function(event, can, button) { can.request(event, {file: can.Option(nfs.FILE), content: can.onexport.content(can)}) function imports(str) { var block = "", count = 0; can.core.List(str.split(lex.NL), function(item) { if (can.base.beginWith(item, "import (")) { block = can.core.Split(item)[0]; return } diff --git a/plugin/local/code/xterm.js b/plugin/local/code/xterm.js index c437e3e6..796ee421 100644 --- a/plugin/local/code/xterm.js +++ b/plugin/local/code/xterm.js @@ -40,7 +40,8 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, cb) { can.page.requireModules ) }, _connect: function(can, item, output, tabs, text) { var term = new Terminal({ - fontSize: html.CODE_FONT_SIZE, tabStopWidth: 4, cursorBlink: true, theme: can.onimport._theme(can, item), + fontSize: html.CODE_FONT_SIZE, + tabStopWidth: 4, cursorBlink: true, theme: can.onimport._theme(can, item), }) term._item = item, term._output = output, output._term = term, output._tabs || (tabs? (output._tabs = tabs): can.onimport._tabs(can, item, output)) var fitAddon = new FitAddon.FitAddon(); term.loadAddon(fitAddon), term._fit = fitAddon, can.onmotion.delay(can, function() { fitAddon.fit() }) diff --git a/plugin/story/studiolayout.css b/plugin/story/studiolayout.css index 912f51bf..61599110 100644 --- a/plugin/story/studiolayout.css +++ b/plugin/story/studiolayout.css @@ -13,5 +13,8 @@ fieldset.studiolayout>div.output>div.layout>div.layout>div.content>fieldset.stor fieldset.studiolayout>div.output>div.layout>div.layout>div.profile>fieldset.story>div.action>div.item.state { display:none; } fieldset.studiolayout>div.output>div.layout>div.layout>div.content>fieldset.story>div.action>div.item.state { display:none; } -body.cmd { --box-shadow:none; } -body.cmd legend { margin-right:0; } +/* body.cmd { --box-shadow:none; } */ +/* body.cmd { --legend-box-shadow:none; } */ +body.cmd { --input-box-shadow:none; } +body.cmd { --th-box-shadow:none; } +/* body.cmd legend { margin-right:0; } */ diff --git a/plugin/story/studiolayout.js b/plugin/story/studiolayout.js index e57aac67..dcde6b61 100644 --- a/plugin/story/studiolayout.js +++ b/plugin/story/studiolayout.js @@ -30,8 +30,10 @@ Volcanos(chat.ONIMPORT, { delete(can.ui.profile._cache[hash]) delete(can.ui.display._cache[hash]) }) - can.core.Item(cb(event, hash, value), function(key, item) { can.onmotion.toggle(can, can.ui[key], true) - can.onappend.plugin(can, item, function(sub) { can.ui["_"+key+"_plugin"] = sub + can.core.Item(cb(event, hash, value), function(key, item) { + if (!item) { return } + can.onmotion.toggle(can, can.ui[key], true) + item && can.onappend.plugin(can, item, function(sub) { can.ui["_"+key+"_plugin"] = sub can.onimport.layout(can), sub.onexport.output = function() { can.onimport.layout(can) } }, can.ui[key]) })