From e7302da259e1e9b133a3c0aa9564ea054437de9e Mon Sep 17 00:00:00 2001 From: shy Date: Wed, 22 Nov 2023 14:50:32 +0800 Subject: [PATCH] add some --- const.js | 1 + index.css | 33 ++++++++++++--------------------- panel/river.css | 4 +--- panel/river.js | 2 +- plugin/table.js | 5 +++-- 5 files changed, 18 insertions(+), 27 deletions(-) diff --git a/const.js b/const.js index c60bfe39..ae50d38d 100644 --- a/const.js +++ b/const.js @@ -314,6 +314,7 @@ var html = {PLUGIN_MARGIN: 10, PLUGIN_PADDING: 10, ACTION_MARGIN: 200, ACTION_HE } var icon = { SEARCH: "bi bi-search", TERMINAL: "bi bi-terminal", + CHEVRON_DOWN: "bi bi-chevron-down", } var svg = { GROUP: "group", PID: "pid", GRID: "grid", diff --git a/index.css b/index.css index 7579ae57..a9788799 100644 --- a/index.css +++ b/index.css @@ -98,7 +98,6 @@ fieldset>form.option>div.item.select { border-radius:var(--button-radius); } fieldset>form.option>div.item.select>input { min-width:80px; } fieldset>form.option>div.item.button { border-radius:var(--button-radius); } fieldset>div.action>div.item { margin-right:var(--button-margin); box-shadow:var(--box-shadow); } -fieldset.River>div.action>div.item { margin:0 5px; } fieldset>div.action>div.item.select:not(.cmds) { border-radius:var(--button-radius); } fieldset>div.action>div.item.select.cmds { border-bottom:var(--notice-bg-color) solid 2px; height:32px; } fieldset>div.action>div.item.button { border-radius:var(--button-radius); } @@ -138,7 +137,6 @@ body>div.toast div.action>div.item { float:right; } body>div.carte { padding:0; } body>div.carte input[name=filter] { margin:5px; width:calc(100% - 10px); position:sticky; top:5px; } body>div.carte div.item { white-space:pre; padding:5px 10px; } -body.mobile>div.carte div.item { padding:10px; } body>div.carte div.item span.icon.next { float:right; line-height:22px; height:22px; } body>div.carte.select.float>div.item { text-align:center; } body>div.input { padding:20px; } @@ -147,7 +145,6 @@ body>div.input input[name=cancel] { border:var(--danger-bg-color) solid 1px; } body>div.input input[name=submit] { border:var(--notice-bg-color) solid 1px; } body>div.input input[name=submit]:hover { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } body>div.input input[name=cancel]:hover { background-color:var(--danger-bg-color); color:var(--danger-fg-color); } -/* body>div.input div.output { clear:both; } */ body>div.input td { padding:10px; } body>div.input td:nth-child(2) { padding:10px 0;} body>div.input tr.img td:last-child>span { display:none; } @@ -160,13 +157,13 @@ body>div.input tr.icon td:last-child { position:relative; } body>div.input tr.icon td:last-child i:first-child { font-size:22px; position:absolute; left:15px; top:14px; } body>div.input tr.icon td:last-child img:first-child { height:28px; width:28px; left:12px; top:12px; position:absolute; } body>div.input tr.icon td:last-child input { padding-left:32px; } -body>div.input td span.icon { margin-left:-20px; visibility:hidden; } -body>div.input td:hover span.icon { visibility:visible; } body>div.input tr.icons td:last-child { position:relative; } body>div.input tr.icons td:last-child i:first-child { font-size:22px; position:absolute; left:15px; top:14px; } body>div.input tr.icons td:last-child img:first-child { height:28px; width:28px; left:12px; top:12px; position:absolute; } body>div.input tr.icons td:last-child input { padding-left:32px; } +body>div.input td span.icon { margin-left:-20px; visibility:hidden; } body>div.input td span.icons { margin-left:-20px; visibility:hidden; } +body>div.input td:hover span.icon { visibility:visible; } body>div.input td:hover span.icons { visibility:visible; } body>div.input select { width:230px !important; } body>div.input input:not([type=button]) { width:240px; } @@ -174,16 +171,13 @@ body>div.input textarea { height:120px; width:240px !important; } body>div.input div.action { padding:0 10px; width:100%; position:sticky; bottom:0; } body>div.input div.action>div.item { margin-left:10px; float:right; } body>div.input div.action>div.item>input[type=button] { width:110px; } -body.mobile.landscape>div.input.login { padding:0; } -body.mobile.landscape>div.input.login div.output img { max-height:280px; } body>div.input.login { box-shadow:unset; } body>div.input.login>div.action { display: flex; justify-content: center; border-bottom:var(--box-border); } body>div.input.login>div.action>div.tabs { padding:10px; } body>div.input.login>div.output { text-align:center; clear:both; } +body>div.input.login>div.output { height:320px; width:420px; overflow:hidden; } body>div.input.login>div.output>fieldset { box-shadow:none; } body>div.input.login>div.output>fieldset>div.output { background-color:transparent; } -body>div.input.login>div.output { height:320px; width:420px; overflow:hidden; } -body.mobile.landscape>div.input.login>div.output { height:290px; } body>div.input.login>div.display>span.item { font-style:italic; word-break:break-all; padding-left:5px; border-left:var(--notice-bg-color) solid 5px; } body>div.input.login>div.display div.sso { display:flex; justify-content:center; cursor:pointer; } body>div.input.login>div.display div.sso div.item { display:flex; align-items:center; padding:10px; } @@ -211,6 +205,10 @@ fieldset>div.status { font-style:italic; line-height:20px; max-height:32px; } fieldset>div.status>div.item { padding:5px; height:31px; } fieldset>div.status>div.item>label { font-size:var(--status-font-size); } fieldset>div.status>legend { font-style:italic; height:31px; } +body.mobile.landscape>div.input.login>div.output { height:290px; } +body.mobile.landscape>div.input.login { padding:0; } +body.mobile.landscape>div.input.login div.output img { max-height:280px; } +body.mobile>div.carte div.item { padding:10px; } legend, select, input[type=button], th, h1, h2, h3, div.menu, div.item, div.tabs { cursor:pointer; } div.story[data-type=spark] { cursor:copy; } body.en fieldset.input.date>div.action>div.item.select select { width:55px; } @@ -248,6 +246,8 @@ div.item.text>span.icon { position:absolute; right:0; visibility:hidden; } div.item.text:hover>span.icon { visibility:visible; } div.item.button>span.icon.create { font-size:32px; line-height:28px; display:block; } div.item.button>span.icon.insert { font-size:32px; line-height:28px; display:block; } +div.item>i.bi-chevron-down { transition:all 0.5s; float:right; } +div.item.open>i.bi-chevron-down { transition:all 0.5s; rotate:-180deg; } div.tabs span.icon { font-style:normal; line-height:20px; padding:0 5px; visibility:hidden; } div.tabs>div.select>span.icon { visibility:visible; } div.tabs>div:hover>span.icon { visibility:visible; } @@ -442,14 +442,12 @@ 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); } /* mobile */ -body.mobile.cmd { overflow:hidden; } -body.mobile.login>fieldset.panel.Action>div.output { background-color: var(--panel-output-bg-color); } div.output>div.code>div.form { font-size:15px; padding:60px 10px; text-align:center; } div.output>div.code>div.form>input[type=button][name=confirm] { background-color:var(--notice-bg-color); color:var(--notice-fg-color); margin:10px 0; } div.output>div.code>div.form>input[type=button] { min-width:200px; } +body.mobile.cmd { overflow:hidden; } +body.mobile.login>fieldset.panel.Action>div.output { background-color: var(--panel-output-bg-color); } body.mobile div.output>div.code>div.form input[type=button] { width:100%; } - -/* body.login>fieldset.panel { display:none; } */ body.mobile table.content { width:100%; } body.mobile form.option>div.item:not(.icon) { margin-right:var(--button-margin); } body.mobile:not(.cmd) form.option>div.item.button.icons>input { display:none; } @@ -544,16 +542,10 @@ fieldset.macos.desktop.cmd>div.output>fieldset.macos.dock { z-index:11; } fieldset.web.code.git.status>div.output table.content { width:100%; } fieldset.web.code.git>div.output>fieldset.web.code.inner>div.output { overflow:auto; } fieldset.web.chat.wx.scan>div.output>table.content tr.expired { color:var(--disable-fg-color); } - -fieldset.web.mall.region>div.output>table.content td:nth-child(3) { text-align:right; } fieldset.web.mall.region>div.output>table.content td:nth-child(3) { text-align:right; } fieldset.web.mall.region>div.output>table.content td:nth-child(4) { text-align:right; } fieldset.web.mall.region>div.output>table.content td:nth-child(5) { text-align:right; } - -fieldset.web.mall.region>div.output>table.content td:nth-child(3) { text-align:right; } -fieldset.web.mall.region>div.output>table.content td:nth-child(4) { text-align:right; } -fieldset.web.mall.region>div.output>table.content td:nth-child(5) { text-align:right; } - +fieldset.web.mall.region>div.output>fieldset.web.mall.region.float>div.action { display:none; } fieldset.web.chat.iframe>form.option input[name=hash] { width:320px; } fieldset.can.view { font-size:14px; } fieldset.can.data { font-size:14px; } @@ -583,7 +575,6 @@ fieldset.web.code.docker.studio>div.output>fieldset>legend { display:none; } fieldset.web.code.docker.studio>div.output>fieldset>form.option>div:first-child { margin-left:10px; } fieldset.web.code.docker.studio>div.output { padding:10px; } body>fieldset.story.web.chat.wx.agent { position:fixed; left:0; bottom:0; } -fieldset.web.mall.region>div.output>fieldset.web.mall.region.float>div.action { display:none; } fieldset.studio>div.output { padding:10px; } fieldset.studio>div.action>div.cmds { padding:5px 20px; } fieldset.studio>div.output>fieldset>form.option div.icon.delete { display:none; } diff --git a/panel/river.css b/panel/river.css index 4b8fa2bc..a9e1ad6c 100644 --- a/panel/river.css +++ b/panel/river.css @@ -1,9 +1,7 @@ fieldset.River { width:var(--river-width); float:left; } fieldset.River>div.action { width:100%; display:flex; justify-content:center; } +fieldset.River>div.action>div.item { margin:0 5px; } 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; } -fieldset.River>div.output div.item.open>i.bi-chevron-down { rotate:-180deg; transition:all 0.5s; } -fieldset.River>div.output div.item:not(.open)>i.bi-chevron-down { transition:all 0.5s; } fieldset.River>div.output div.list div.item { border-left:#ccdc4c solid 3px; } fieldset.River>div.output div.list { margin-left:20px; } body:not(.mobile) fieldset.River>div.output { padding:10px; } diff --git a/panel/river.js b/panel/river.js index 658d7e19..b6e92c9d 100644 --- a/panel/river.js +++ b/panel/river.js @@ -9,7 +9,7 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg) { can.onimport._main(can, msg can._main_river = ls[0]||can.misc.SearchOrConf(can, chat.RIVER)||msg.Option(ice.MSG_RIVER)||"project" can._main_storm = ls[1]||can.misc.SearchOrConf(can, chat.STORM)||msg.Option(ice.MSG_STORM)||"studio" }, - _river: function(can, meta, cb) { return {view: html.ITEM, list: [{icon: meta.icon}, {text: meta.name}, {icon: "bi bi-chevron-down"}], _init: function(target) { can.ui.river_list[meta.hash] = target, cb(target) }, + _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) }, 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 }, diff --git a/plugin/table.js b/plugin/table.js index de6ba196..74b0dd67 100644 --- a/plugin/table.js +++ b/plugin/table.js @@ -141,8 +141,9 @@ Volcanos(chat.ONIMPORT, {_init: function(can, msg, target) { can.onmotion.clear( }) }], target.nextSibling, target.parentNode) }, list: function(can, root, cb, target, cbs) { target = target||can._output - can.core.List(root.list, function(item) { var ui = can.page.Append(can, target, [{view: [html.ITEM, html.DIV, item.meta.name], onclick: function(event) { - can.base.isFunc(cb) && cb(event, item) || can.onmotion.toggle(can, ui.list), can.onmotion.select(can, target, html.DIV_ITEM, event.target) + can.core.List(root.list, function(item) { var ui = can.page.Append(can, target, [{view: [[html.ITEM, "open"]], list: [{text: item.meta.name}, item.list && {icon: icon.CHEVRON_DOWN}], onclick: function(event) { + can.page.ClassList.set(can, ui.item, "open", can.base.isFunc(cb) && cb(event, item) || can.onmotion.toggle(can, ui.list)) + can.onmotion.select(can, target, html.DIV_ITEM, event.target) }, _init: function(target) { if (item.meta.name == "_") { target.innerHTML = "", can.onappend.style(can, html.SPACE, target) } cbs && cbs(target, item) }}, {view: html.LIST}]); can.onimport.list(can, item, cb, ui.list, cbs) })