From d95a8e99b4eac5619df824a1209907bd7fd02091 Mon Sep 17 00:00:00 2001 From: shy Date: Sun, 2 Mar 2025 22:08:23 +0800 Subject: [PATCH] add some --- frame.js | 17 ++++++++- index.css | 50 +++++++----------------- panel/footer.css | 2 +- plugin/story/weight.js | 86 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 115 insertions(+), 40 deletions(-) create mode 100644 plugin/story/weight.js diff --git a/frame.js b/frame.js index 23938f78..1c773905 100644 --- a/frame.js +++ b/frame.js @@ -651,6 +651,15 @@ Volcanos(chat.ONAPPEND, { } } var option = can.core.Item(can.Option()) + if (can.core.List(option).length == 1) { + if (msg.IsDetail()) { + var key = can.core.List(option)[0], i = msg.key.indexOf(key) + if (i > 0) { var k = msg.key[i], v = msg.value[i]; for (i; i > 0; i--) { msg.key[i] = msg.key[i-1], msg.value[i] = msg.value[i-1] } msg.key[0] = k, msg.value[0] = v } + } else { + var key = can.core.List(option)[0], i = msg.append.indexOf(key) + if (i > 0) { var v = msg.append[i]; for (i; i > 0; i--) { msg.append[i] = msg.append[i-1] } msg.append[0] = v } + } + } var table = can.page.AppendTable(can, msg, target||can.ui.content||can._output, msg.append, cb||function(value, key, index, data, list) { var _value = value if (msg.IsDetail()) { if (key == mdb.VALUE) { key = data.key } data = {} can.core.List(list, function(item) { data[item.key] = item.value }) @@ -667,7 +676,7 @@ Volcanos(chat.ONAPPEND, { if (key == "user_avatar" && value) { _value = img(can.misc.Resource(can, data[key])) } if (key == "auth_avatar" && value) { _value = img(can.misc.Resource(can, data[key])) } if (key == nfs.IMAGE && value) { _value = can.core.List(can.core.Split(data[key]), function(item) { return img(can.misc.ShareCache(can, item, data.space)) }).join("") } - if (key == mdb.HASH && can.ConfIndex() == web.TOKEN) { _value = value.slice(0, 4)+"****" } + if (key == mdb.HASH && can.base.isIn(can.ConfIndex(), web.TOKEN, aaa.SESS)) { _value = value.slice(0, 4)+"****" } if (key == "secret" && value) { _value = value.slice(0, 4)+"****" } if (key == "secretKey" && value) { _value = value.slice(0, 4)+"****" } if (key == "SecretKey" && value) { _value = value.slice(0, 4)+"****" } @@ -715,7 +724,10 @@ Volcanos(chat.ONAPPEND, { can.page.SelectChild(can, can._option, html.DIV_ITEM_TEXT, function(target) { can.page.ClassList.set(can, target, "will", can.page.ClassList.has(can, target, key)) }) }, _init: function(target) { if (msg.IsDetail() && key != "key") { can.onappend.style(can, key, target.parentNode) } - if (option.indexOf(key) > -1) { can.onappend.style(can, "k-"+(value.split(">").pop()), target.parentNode) } + if (option.indexOf(key) > -1) { + can.onappend.style(can, "k-"+(value.split(">").pop()), target.parentNode) + if (msg.IsDetail()) { can.onappend.style(can, html.OPTION, target.parentNode) } + } if (key == mdb.TYPE) { can.onappend.style(can, value, target.parentNode) } if (key == mdb.STATUS) { can.onappend.style(can, value, target.parentNode) } if (key == mdb.ENABLE) { can.onappend.style(can, value == ice.FALSE? mdb.DISABLE: mdb.ENABLE, target.parentNode) } @@ -737,6 +749,7 @@ Volcanos(chat.ONAPPEND, { }) keys && can.page.RangeTable(can, table, can.core.List(keys, function(key) { return can.page.Select(can, table, html.TH, function(th, index) { if (th.innerHTML == key) { return index } })[0] })) can.onappend.style(can, chat.CONTENT, table), msg.append && msg.append[msg.append.length-1] == ctx.ACTION && can.onappend.style(can, ctx.ACTION, table) + if (can.core.List(option).length == 1) { can.onappend.style(can, html.OPTION, table) } if (msg.IsDetail()) { can.onappend.style(can, mdb.DETAIL, table), can.onappend.style(can, msg.Append(mdb.TYPE), table), can.onappend.style(can, msg.Append(mdb.STATUS), table) } can.onappend.style(can, html.FULL, table) return table diff --git a/index.css b/index.css index 86e92a6e..ce945b9b 100644 --- a/index.css +++ b/index.css @@ -120,12 +120,7 @@ table.content th.select[data-asc="0"] i.bi-sort-up { display:none; } table.content th.select[data-asc="1"] i.bi-sort-down-alt { display:none; } table.content td.option { cursor:pointer; } table.content td { padding:var(--table-padding); } -fieldset.log.debug table.content td:last-child { - // white-space:pre-line; - // word-break:break-all; - white-space:pre; - max-width:800px; min-width:600px; -} +fieldset.log.debug table.content td:last-child { white-space:pre; max-width:800px; min-width:600px; } table.content td i { padding:var(--input-padding); } table.content:not(.detail) td img { height:48px; width:auto; } table.content:not(.detail) td input.icons { display:none; } @@ -142,6 +137,10 @@ table.content.action td:last-child input.danger:hover { background-color:var(--h table.content.detail td:first-child { word-break:keep-all; white-space:pre; } table.content.detail td:first-child { text-align:center; } table.content.detail td:first-child { position:sticky; left:0; } +table.content.option td.option { position:sticky; left:2px; z-index:1; box-shadow:var(--box-shadow); background-color:var(--th-bg-color); } +table.content.option th.option { position:sticky; left:2px; z-index:2; } +table.content.option.checkbox td.option { left:50px; } +table.content.option.checkbox th.option { left:50px; } table.content.detail tr td:first-child { background-color:var(--plugin-bg-color); cursor:default; } body:not(.mobile) table.content.detail tr:hover:not(.action) td:first-child { background-color:var(--hover-bg-color); } table.content.detail td i { display:none; } @@ -150,19 +149,12 @@ table.content.detail tr.action { background-color:var(--plugin-bg-color); positi table.content.detail tr.action input.icons { display:none; } table.content.detail tr.action input { color:var(--notice-bg-color); } table.content.detail tr.action input.danger { color:var(--danger-bg-color); } -table.content.detail tr.action input.notice:not(:hover) { - background-color:var(--notice-bg-color); color:var(--notice-fg-color); -} +table.content.detail tr.action input.notice:not(:hover) { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } table.content.detail tr.action i { display:unset; color:var(--notice-bg-color); } table.content.detail tr.action i.bi-trash { color:var(--danger-bg-color); } fieldset.plugin.cmd.output>div.output { top:0; } -// div.output._prepare { position:absolute; } div.output._unload { position:absolute; } -fieldset._process input { - // border:var(--box-border) !important; - background-color:transparent !important; - color:var(--disable-fg-color) !important; -} +fieldset._process input { background-color:transparent !important; color:var(--disable-fg-color) !important; } body.width1 table.content.checkbox th:first-child { padding:var(--table-padding) var(--input-padding); } body.width1 table.content.checkbox td:first-child { padding:var(--table-padding) var(--input-padding); } body.width1 table.content.action th:last-child { padding:var(--table-padding) var(--input-padding); } @@ -186,7 +178,6 @@ div.title>div.status>div.item.access { background-color:var(--danger-bg-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: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); } div.output.card>div.item>div.title { border-bottom:var(--box-border); font-size:var(--legend-font-size); font-weight:bold; padding-bottom:var(--input-padding); display:flex; align-items:center; } @@ -196,7 +187,6 @@ div.output.card>div.item>div.title>div.title>span.exists { color:var(--notice-bg div.output.card>div.item>div.title>img { height:var(--header-height); width:var(--header-height); margin:0; float:left; } div.output.card>div.item>div.title>img.jpg { padding:var(--input-padding); } div.item.card:not(.hide) { position:relative; display:flex; align-items:center; padding:0; } -// div.output>div.item.card { border:solid 5px var(--plugin-bg-color); } div.item.card img { height:60px; width:60px; margin:5px; } div.item.card div.info { width:100%; } div.item.card div.title { font-size:16px; } @@ -417,11 +407,7 @@ body div.input.float td span.must { color:red; padding:0 5px; } body div.input.float td:nth-child(2) { padding:var(--table-padding) 0; } body.width1 div.input.float table { width:100%; } body.width1 div.input.float tr:not(.hide) { display:flex; flex-direction:column; margin:var(--button-margin); } -body.width1 div.input.float td { - // padding:0 var(--button-padding); - padding:0; - margin:var(--button-margin); -} +body.width1 div.input.float td { padding:0; margin:var(--button-margin); } body.widht1 div.input.float td:nth-child(1) { color:gray; font-size:var(--status-font-size); padding-left:var(--button-padding); margin-bottom:0; } body.width1 div.input.float td:nth-child(2) { display:none; } body div.input.float tr.img td:last-child>span { display:none; } @@ -433,10 +419,7 @@ body div.input.float tr.icon td:last-child { position:relative; } body div.input.float tr.icon td:last-child img:first-child { height:28px; width:28px; position:absolute; left:12px; top:12px; } body div.input.float tr.icon td:last-child input { padding-left:var(--action-height); } body div.input.float tr.icons td:last-child img { height:28px; width:28px; position:absolute; left:2px; top:2px; } -body div.input.float tr.icons td:last-child span:not(.icon) { - font-family:var(--code-font-family); position:absolute; left:33px; - line-height:var(--action-height); -} +body div.input.float tr.icons td:last-child span:not(.icon) { font-family:var(--code-font-family); position:absolute; left:33px; line-height:var(--action-height); } body div.input.float tr.icons td:last-child input { padding-left:var(--action-height); } body div.input.float td span.icon { margin-left:-20px; visibility:hidden; } body div.input.float td span.icons { margin-left:-20px; visibility:hidden; } @@ -505,7 +488,6 @@ fieldset.vimer>div.output div.project fieldset.plug>div.output { height:100%; } fieldset.vimer>div.output div.project fieldset.plug div.output.card>div.item { min-width:120px; width:calc(100% - 2*var(--input-margin)); } div.float { position:fixed; } div.output { position:relative; } -// div.content { position:relative; } div.output>div.code { position:sticky; left:0; } div.output>div.code>img { margin:5px; max-width:100%; } div.output.flex { overflow:hidden; align-items:flex-start; justify-content: flex-start; } @@ -537,13 +519,10 @@ input[type=button] { border:var(--input-border); border-radius:var(--button-radi body:not(.mobile) input[type=button]:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } input[type=button].danger:hover { color:var(--danger-fg-color); } input[type=button].notice:hover { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } -// input[type=button].danger { color:var(--danger-bg-color) !important; } input[type=button].notice { border:var(--box-notice); color:var(--notice-bg-color); } input[type=button].danger { border:var(--box-danger); color:var(--danger-bg-color); } body:not(.mobile) table.content tr:hover { background-color:var(--tr-hover-bg-color); } table.content tr.select { background-color:var(--tr-hover-bg-color); } -// table.content tr.danger { background-color:var(--danger-bg-color); color:var(--danger-fg-color); } -// table.content tr.notice { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } table.content tr.disable { color:var(--disable-fg-color); } table.content tr.offline { color:var(--disable-fg-color); } table.content tr.invalid { color:var(--disable-fg-color); } @@ -554,7 +533,7 @@ table.content td.select { background-color:var(--td-hover-bg-color); color:var(- table.content td i:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } table.content td.action { background-color:var(--th-bg-color); color:var(--th-fg-color); } table.content.checkbox td:first-child { background-color:var(--th-bg-color); } -body:not(.mobile) table.content:hover td.option:not(:hover) { background-color:var(--tr-hover-bg-color); color:var(--hover-fg-color); } +body:not(.mobile) table.content:not(.option):hover td.option:not(:hover) { background-color:var(--tr-hover-bg-color); color:var(--hover-fg-color); } hr, td.hr { border-bottom:var(--box-border); margin:var(--input-margin); } h1:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } h2:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } @@ -621,6 +600,7 @@ div.carte div.item:hover { background-color:var(--hover-bg-color); } div.carte div.item.notice:hover { background-color:var(--notice-bg-color) !important; color:var(--notice-fg-color) !important; } div.carte div.item.danger:hover { background-color:var(--danger-bg-color) !important; color:var(--danger-fg-color) !important; } /* z-index */ +table.content.action th:last-child { z-index:2; } table.content.action td:last-child { z-index:1; } table.content.checkbox td:first-child { z-index:1; } table.content.checkbox th:first-child { z-index:2; } @@ -668,7 +648,7 @@ fieldset.input.key table.content th { box-shadow:none; } fieldset.input.key table.content.checkbox td:first-child { box-shadow:none; } table.content.checkbox td:first-child { box-shadow:var(--th-box-shadow); } table.content.action td:last-child { box-shadow:var(--th-box-shadow); } -table.content.detail tr.action td { box-shadow:var(--th-box-shadow); } +table.content.detail tr.action td { box-shadow:var(--th-box-shadow); position:sticky; bottom:2px; } div.project:not(.toggle) { border-right:var(--box-border); overflow-x:hidden; } div.layout>div.profile:not(.toggle) { border-left:var(--box-border); } div.layout>div.display:not(.toggle) { border-top:var(--box-border); } @@ -682,7 +662,6 @@ 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); line-height:var(--code-line-height); } -// kbd:hover { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } table.content { font-family:var(--table-font-family); } table.content th { font-family:var(--input-font-family); font-style:italic; } body div.output>div.code { font-family:var(--table-font-family); padding:var(--table-padding); } @@ -704,12 +683,12 @@ table.content col.action { width:var(--project); } table.content.detail td:first-child { width:var(--input-width); box-shadow:var(--th-box-shadow); } body.mobile table.content.detail td:first-child { max-width:150px; word-break:break-all; white-space:break-spaces; } table.content.detail td { min-width:90px; } +table.content.detail tr.option td { top:34px; z-index:2; } fieldset.web.chat.island.portal>div.output>table.content.detail td { min-width:80px; text-align:center; } body.void fieldset.web.chat.island.portal>div.status { display:none; } table.content, div.code, div.story[data-type=spark] { white-space:pre; margin:0; } div.output>div.code video { max-width:100%; } div.story[data-type=spark] { border-left:var(--box-notice3); padding:var(--input-padding) var(--table-padding); } -// div.story[data-type=spark][data-name=shell] { box-shadow:var(--plugin-box-shadow); } fieldset.inner.result>div.output { border-left:var(--box-danger3); } iframe { height:var(--iframe-height); width:100%; } fieldset>form.option>div.item.text.cmd { width:100%; } @@ -754,14 +733,12 @@ body.windows form.option>div.item.icon.refresh { font-size:24px; line-height:28p body.windows form.option>div.item.icon.goback { font-size:24px; line-height:28px; } body.windows div.item.button.refresh>span.icon { font-size:22px; line-height:28px; } body.windows div.item.button.create>span.icon { line-height:28px; } -// div.item.text { position:relative; display:flex; align-items:center; } div.item.text { position:relative; align-items:center; } div.item.text.filter input { padding-left:24px; } div.item.text._icon input { padding-left:24px; } div.item.select._icon i:first-child { color:var(--disable-fg-color); position:absolute; left:0; padding:var(--input-padding); } div.item.select._icon:hover i:first-child { color:unset; } div.item.text>input { width:var(--input-width); height:var(--action-height); } -// fieldset.story>form.option>div.item.text>input { max-width:100px; } div.item.text.id>input { width:80px; } div.item.text.url>input { width:var(--river-width); } div.item.text.port>input { width:80px; } @@ -910,7 +887,6 @@ body.mobile.landscape fieldset.Action { margin-top:0; } body.mobile.landscape>div.input.login { padding:0; } body.mobile.landscape>div.input.login>div.output { height:290px; } body.mobile.landscape>div.input.login>div.output img { max-height:280px; } -// html.login body.mobile>fieldset.panel.Action>div.output { background-color:var(--panel-bg-color); } /* print */ body.print { -webkit-filter: grayscale(100%); } body.print { background-color:white; color:black; } diff --git a/panel/footer.css b/panel/footer.css index 8baa1c12..508f819b 100644 --- a/panel/footer.css +++ b/panel/footer.css @@ -3,7 +3,7 @@ fieldset.Footer>div.output div.item { padding:7px; height:var(--footer-height); fieldset.Footer>div.output div.item.button { padding:7px 0; } fieldset.Footer>div.output div.title:first-child { margin-left:var(--header-height); white-space:pre; } fieldset.Footer:not(.tabview)>div.output div.title:first-child { font-weight:bold; text-align:center; width:var(--river-width); } -fieldset.Footer>div.output input[type=button] { background-color:transparent; color:var(--panel-fg-color); border:0; } +fieldset.Footer>div.output input[type=button] { background-color:transparent; color:var(--panel-fg-color); font-style:italic; 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; justify-content:flex-end; } fieldset.Footer>div.output div.state { font-family:var(--status-font-family); line-height:18px; white-space:pre; } fieldset.Footer>div.output div.state label { font-size:var(--status-font-size); } diff --git a/plugin/story/weight.js b/plugin/story/weight.js new file mode 100644 index 00000000..0d24e7ef --- /dev/null +++ b/plugin/story/weight.js @@ -0,0 +1,86 @@ +Volcanos(chat.ONIMPORT, { + _init: function(can, msg, cb) { can.ui = can.onappend.layout(can) + can.page.requireDraw(can, function() { can.db.delay = 50, can.onappend.style(can, "pie"), can.onaction.list = [] + can.list = can.onimport._data(can, msg, can.Conf(mdb.FIELD)||msg.append[1]||mdb.VALUE) + can.core.List(can.list, function(item) { msg.Push("weight", item.value.weight = parseInt(item.span*100/360)+"%").Push(cli.COLOR, ' ') }) + can.onappend.table(can, msg, null, can.ui.profile), can.page.Select(can, can.ui.profile, html.TR, function(tr, index) { can.ui.table = tr.parentNode + can.page.Modify(can, tr, {onmouseenter: function(event) { can._draw(can.db.which = index-1) }}) + }), can.base.isFunc(cb) && cb(msg), can.onappend._status(can, msg.append) + }) + }, + _data: function(can, msg, field) { var list = [] + var color = [ + "#8085e9", + "#95a2ff", + "#73abf5", + "#3cb9fc", + "#0082fc", + "#87e885", + "#90ed7d", + "#22ed7c", + "#05f8d6", + "#cb9bff", + "#bf19ff", + "#f47a75", + "#fa8080", + "#f7a35c", + "#ffc076", + "#f9e264", + "#fae768", + "#5f45ff", + "#02cdff", + "#0090ff", + "#854cff", + "#09b0d3", + "#1d27c9", + "#765005", + "#314976", + "#009db2", + "#024b51", + "#0780cf", + ] + var total = 0; msg.Table(function(value) { total += can.onimport._parseInt(can, value[field]) }) + var begin = 0; msg[cli.COLOR] = [], msg["weight"] = [], msg.Table(function(value, index) { + list.push({span: can.onimport._parseInt(can, value[field])/total*360, color: color[index%color.length], value: value}) + }); return list + }, + _draw: function(can, x, y, r, margin, which) { if (which == can._last) { return } can._last = which + if (can.list.length == 1) { return can.onimport.draw(can, {shape: svg.CIRCLE, points: [{x: x, y: y}, {x: x, y: y+r}], style: {fill: cli.BLUE}}) } + function pos(x, y, r, angle) { angle -= 90; return [x + r * Math.cos(angle * Math.PI / 180), y + r * Math.sin(angle * Math.PI / 180)] } + function pie(x, y, r, begin, span, color, title, cb) { can.onimport.draw(can, {shape: svg.PATH, style: kit.Dict( + svg.STROKE, color, svg.FILL, color, "d", can.base.joins([ + ["M", x, y], ["L"].concat(pos(x, y, r, begin)), ["A", r, r, "0", span>180? "1": "0", "1"].concat(pos(x, y, r, begin+span)), ["Z"] + ], lex.SP, mdb.FS), + ), onmouseenter: function(event) { can.base.isFunc(cb) && cb(event) } }) } + can.onmotion.clear(can, can.ui.svg), can.ui.svg.Value(mdb.COUNT, 0) + var begin = 0; can.core.Next(can.list, function(item, next, index) { var p = index==which? pos(x, y, 1*margin, begin+item.span/2): [x, y] + pie(p[0], p[1], r, begin, item.span, item.color, item.name||item.command, function(event) { can.onimport._draw(can, x, y, r, margin, can.db.which = index) }), begin += item.span + index == which && (can.db.current = item.value) + can.onmotion.select(can, can.ui.table, html.TR, index), can.Status(item.value), can.onmotion.delay(can, next, can.db.delay) + }, function() { + can.onmotion.select(can, can.ui.table, html.TR, which), can.Status(can.db.current), can.db.delay = 0 + }) + }, + _parseInt: function(can, value) { value = value.toLowerCase() + if (can.base.endWith(value, "m")) { return parseInt(value)*1000000 } + if (can.base.endWith(value, "g")) { return parseInt(value)*1000000000 } + if (can.base.endWith(value, "gi")) { return parseInt(value)*1000000000 } + if (can.base.endWith(value, "mi")) { return parseInt(value)*1000000 } + return parseInt(value) + }, + layout: function(can) { if (!can.ui || !can.ui.svg) { return } + can.onmotion.hidden(can, can.ui.project), can.onmotion.hidden(can, can.ui.display), can.onmotion.toggle(can, can.ui.profile, true) + var _width = can.base.Max(can.ConfWidth()-can.ConfHeight(), 600, 200) + can.page.style(can, can.ui.profile, html.HEIGHT, can.ConfHeight(), html.WIDTH, _width, html.FLEX, "0 0 "+(_width)+"px") + var width = can.ConfWidth()-_width, height = can.ConfHeight()-4, margin = 40, r = can.base.Max(height, width)/2-1*margin-margin + can.page.style(can, can.ui.content, html.HEIGHT, can.ConfHeight(), html.WIDTH, width) + can.ui.svg.Val(html.WIDTH, width), can.ui.svg.Val(html.HEIGHT, height) + can._draw = function(which) { can.onimport._draw(can, width/2-margin/2, height/2-margin/2, r, margin, which) }, can._draw(can.db.which||0) + return + + var height = can.base.Max(can.ConfHeight(), can.ConfWidth()/2), margin = 10, r = height/2-1*margin-margin + can.page.style(can, can.ui.display, html.WIDTH, can.ConfWidth()-height-1), can.ui.svg.Val(html.HEIGHT, height), can.ui.svg.Val(html.WIDTH, height) + can._draw = function(which) { can.onimport._draw(can, height/2-margin/2, can.ConfHeight()/2-margin/2, r, margin, which) }, can._draw(can.db.which||0) + can.page.style(can, can._output, html.HEIGHT, can.ConfHeight(), html.WIDTH, can.ConfWidth()) + }, +})