From 15002906746d75e74c3ee3eb21f660e44e651a41 Mon Sep 17 00:00:00 2001 From: shy Date: Mon, 11 Dec 2023 11:46:57 +0800 Subject: [PATCH] opt button --- const.js | 2 ++ index.css | 16 ++++++++++++---- lib/page.js | 4 ++-- lib/user.js | 3 ++- panel/river.css | 2 ++ 5 files changed, 20 insertions(+), 7 deletions(-) diff --git a/const.js b/const.js index 12c510b8..b2f236bf 100644 --- a/const.js +++ b/const.js @@ -20,6 +20,7 @@ var ice = { MODE: "mode", EXEC: "exec", CAN: "can", POD: "pod", CTX: "ctx", CMD: "cmd", ARG: "arg", + APP: "app", MSG_FIELDS: "fields", MSG_SESSID: "sessid", MSG_DETAIL: "detail", MSG_OPTION: "option", MSG_APPEND: "append", MSG_RESULT: "result", @@ -180,6 +181,7 @@ var nfs = { var cli = { RUNTIME: "runtime", SYSTEM: "system", DAEMON: "daemon", ORDER: "order", BUILD: "build", OPENS: "opens", BEGIN: "begin", END: "end", START: "start", RESTART: "restart", STOP: "stop", OPEN: "open", CLOSE: "close", + REBOOT: "reboot", QRCODE: "qrcode", COLOR: "color", BLACK: "black", WHITE: "white", BLUE: "blue", RED: "red", GRAY: "gray", CYAN: "cyan", GREEN: "green", PURPLE: "purple", YELLOW: "yellow", MAGENTA: "magenta", SILVER: "silver", ALICEBLUE: "aliceblue", TRANSPARENT: "transparent", LINUX: "linux", DARWIN: "darwin", WINDOWS: "windows", diff --git a/index.css b/index.css index a7555581..e1529899 100644 --- a/index.css +++ b/index.css @@ -82,7 +82,8 @@ table.content th { position:relative; } table.content th span { cursor:pointer; } table.content th i { position:absolute; right:var(--input-padding); cursor:pointer; } table.content th:not(.select) i { display:none; } -table.content th.select { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } +table.content th.select { border:var(--notice-bg-color) solid 1px; } +/* table.content th.select { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } */ table.content th.select[data-asc="1"] i.bi-sort-down-alt { display:none; } table.content th.select[data-asc="0"] i.bi-sort-up { display:none; } table.content td { padding:var(--table-padding); } @@ -137,15 +138,18 @@ fieldset.input.date>div.status>div.today { padding:var(--input-padding); } fieldset.input.icon img { height:var(--desktop-icon-size); width:var(--desktop-icon-size); } /* float */ body div.float { padding:var(--plugin-padding); box-shadow:var(--box-shadow); } -body>div.toast div.title { word-break:break-all; color:var(--notice-bg-color); float:left; } +body>div.toast div.title { font-style:italic; word-break:break-all; color:var(--notice-bg-color); float:left; } body>div.toast div.delete { color:var(--notice-bg-color); float:right; cursor:pointer; } body>div.toast div.delete:hover { background-color:var(--hover-bg-color); } body>div.toast div.duration { color:var(--disable-fg-color); float:right; } body>div.toast div.content { color:var(--notice-bg-color); text-align:center; min-height:48px; margin-bottom:5px; } body>div.toast div.progress { border:var(--box-notice); margin-left:0px; height:20px; clear:both; } body>div.toast div.progress div.current { background-color:var(--progress-bg-color); height:18px; } -body>div.toast div.action:not(.hide) { width:100%; display:block; } +body>div.toast div.action:not(.hide) { width:100%; display:block; display:flex; flex-direction:row-reverse; gap:10px; } body>div.toast div.action>div.item { float:right; } +body>div.toast div.action>div.item input { padding:0 20px; } +body>div.toast div.action>div.item.danger input { border:var(--danger-bg-color) solid 1px; } +body>div.toast div.action>div.item.notice input { border:var(--notice-bg-color) solid 1px; } body>div.carte { padding:0; } body>div.carte input[name=filter] { margin:var(--input-margin); width:calc(100% - 10px); position:sticky; top:var(--input-margin); } body>div.carte div.item { white-space:pre; padding:var(--button-padding); } @@ -407,7 +411,9 @@ input.select[type=button] { border:var(--input-border); padding:0 var(--button-p input[type=button]:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } 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); } -input[type=button][name=login] { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } +input[type=button].danger { border:var(--danger-bg-color) solid 1px; } +input[type=button].notice { border:var(--notice-bg-color) solid 1px; } +/* input[type=button][name=login] { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } */ table.content tr:hover { background-color:var(--tr-hover-bg-color) !important; } table.content tr.select { background-color:var(--tr-hover-bg-color); } table.content th { background-color:var(--th-bg-color); color:var(--th-fg-color); } @@ -429,6 +435,8 @@ div.item:hover { background-color:var(--hover-bg-color); color:var(--hover-fg-co div.item.select:not(.button) { background-color:var(--hover-bg-color); color:var(--hover-fg-color); } div.item.danger input:hover[type=button] { background-color:var(--danger-bg-color); color:var(--danger-fg-color); } div.item.notice input:hover[type=button] { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } +div.item.danger input { border:var(--danger-bg-color) solid 1px; } +div.item.notice input { border:var(--notice-bg-color) solid 1px; } div.action div.tabs:hover { background-color:var(--output-bg-color); color:var(--hover-fg-color); border-top-left-radius:var(--button-margin); border-top-right-radius:var(--button-margin); diff --git a/lib/page.js b/lib/page.js index adcb2737..f452f0cd 100644 --- a/lib/page.js +++ b/lib/page.js @@ -382,8 +382,8 @@ Volcanos("page", { return action }, buttonStyle: function(can, name) { - return can.base.isIn(name, mdb.CREATE, mdb.INSERT, cli.RESTART, cli.START, cli.BUILD, ctx.RUN, web.OPEN, "startall", "clone")? "notice": - can.base.isIn(name, mdb.REMOVE, mdb.DELETE, mdb.PRUNES, mdb.PRUNE, nfs.TRASH, "drop", cli.STOP, "stopall")? "danger": "" + return can.base.isIn(name, mdb.CREATE, mdb.INSERT, mdb.IMPORT, nfs.CLONE, cli.BUILD, cli.START, ctx.RUN, web.OPEN, web.UPLOAD, web.CONFIRM, aaa.LOGIN, code.AUTOGEN, code.COMPILE, "more", "commit", "startall", "auto-preview", ice.APP)? html.NOTICE: + can.base.isIn(name, mdb.REMOVE, mdb.DELETE, mdb.PRUNES, mdb.PRUNE, nfs.TRASH, cli.RESTART, cli.STOP, cli.REBOOT, web.CANCEL, code.UPGRADE, "drop", "stopall", "prockill")? html.DANGER: "" }, exportValue: function(can, msg, target) { target = target||can._output msg.OptionDefault(ice.MSG_THEME, can.getHeaderTheme()) diff --git a/lib/user.js b/lib/user.js index 71f9690c..d3da1934 100644 --- a/lib/user.js +++ b/lib/user.js @@ -180,8 +180,9 @@ Volcanos("user", { }, input: function(event, can, form, cb, button) { if (!form || form.length == 0) { return cb() } var msg = can.request(event); event = event._event||event; var need = {} + var title = msg.Option(wiki.TITLE) var ui = can.page.Append(can, document.body, [{view: [[html.INPUT].concat((can.ConfIndex()||"").split("."), msg.Option(mdb.TYPE), [chat.FLOAT])], list: [ - msg.Option(wiki.TITLE) && {view: [wiki.TITLE, html.LEGEND, msg.Option(wiki.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 diff --git a/panel/river.css b/panel/river.css index fa0e4639..c2fe29ef 100644 --- a/panel/river.css +++ b/panel/river.css @@ -1,5 +1,7 @@ fieldset.River { width:var(--river-width); float:left; position:relative; } fieldset.River>div.action:not(.hide) { margin-top:var(--plugin-margin); width:100%; position:absolute; } +fieldset.River>div.action div.item.notice input { border:none; } +fieldset.River>div.action div.item:hover input { background-color:var(--notice-bg-color); color:var(--notice-fg-color); } fieldset.River>div.output { transition:all .3s; } fieldset.River>div.output div.item { font-family:var(--legend-font-family); padding:var(--legend-padding); border-left:#00ffae solid 3px; } fieldset.River>div.output div.item:hover { color:var(--panel-hover-fg-color); }