Add green state colors to new version rows
This commit is contained in:
parent
778ac54bfa
commit
120e701443
@ -24,3 +24,43 @@ body {
|
|||||||
color: #1f1f1f; /* Ant Design on-surface / colorText */
|
color: #1f1f1f; /* Ant Design on-surface / colorText */
|
||||||
background-color: #f5f5f5; /* Ant Design bg-layout */
|
background-color: #f5f5f5; /* Ant Design bg-layout */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── PublishModal 第一页:新增版本行配色 ──────────────
|
||||||
|
变量由组件注入:--row-new-bg / --row-new-text /
|
||||||
|
--row-new-text-active 直接取 antd theme token;
|
||||||
|
--row-new-bg-hover / --row-new-bg-active /
|
||||||
|
--row-new-bg-active-hover 是 green-1 与 green-2 之间的
|
||||||
|
color-mix 半步过渡色(25% / 50% / 75%) */
|
||||||
|
|
||||||
|
/* 基础:浅绿底 + 深绿字 */
|
||||||
|
.publish-version-tables .ant-table-tbody > tr.row-new > td {
|
||||||
|
background: var(--row-new-bg);
|
||||||
|
color: var(--row-new-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 悬停:比背景深一点的绿 */
|
||||||
|
.publish-version-tables .ant-table-tbody > tr.row-new:hover > td {
|
||||||
|
background: var(--row-new-bg-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 勾选:背景再深半度、文字最深绿(覆盖默认蓝色选中态)
|
||||||
|
注意:antd 的选中样式作用在 td.ant-table-cell(而非 td 本身),
|
||||||
|
且 hover 不是 :hover 伪类而是 JS 注入的 .ant-table-cell-row-hover class,
|
||||||
|
两条规则都必须针对它们书写才能生效 */
|
||||||
|
.publish-version-tables .ant-table-tbody > tr.row-new.ant-table-row-selected
|
||||||
|
> td.ant-table-cell {
|
||||||
|
background: var(--row-new-bg-active);
|
||||||
|
color: var(--row-new-text-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
.publish-version-tables .ant-table-tbody > tr.row-new
|
||||||
|
> td.ant-table-cell-row-hover {
|
||||||
|
background: var(--row-new-bg-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 选中 + 悬停:背景再深半度 */
|
||||||
|
.publish-version-tables .ant-table-tbody > tr.row-new.ant-table-row-selected
|
||||||
|
> td.ant-table-cell-row-hover {
|
||||||
|
background: var(--row-new-bg-active-hover);
|
||||||
|
color: var(--row-new-text-active);
|
||||||
|
}
|
||||||
|
|||||||
@ -348,17 +348,25 @@ export function PublishModal({
|
|||||||
return [...pending, ...existing];
|
return [...pending, ...existing];
|
||||||
}, [publishVersions, curseforgeExistingFiles, matchedCfFileNames, config.filename_format]);
|
}, [publishVersions, curseforgeExistingFiles, matchedCfFileNames, config.filename_format]);
|
||||||
|
|
||||||
/** 行底色:待发布且未存在 = 绿色;其余(已存在/已有版本)= 灰色 */
|
/** 新增版本行 className;已有版本行用默认样式 */
|
||||||
const rowStyle = useCallback(
|
const rowClassName = useCallback(
|
||||||
(kind: "pending" | "existing", exists: boolean): React.CSSProperties => ({
|
(kind: "pending" | "existing", exists: boolean) =>
|
||||||
background:
|
kind === "pending" && !exists ? "row-new" : "",
|
||||||
kind === "pending" && !exists
|
[],
|
||||||
? token.colorSuccessBg
|
|
||||||
: token.colorFillQuaternary,
|
|
||||||
}),
|
|
||||||
[token],
|
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// 注入 antd 绿色系 token 作为 CSS 变量(供 globals.css 的 .row-new 规则使用)。
|
||||||
|
// 三个过渡色用 color-mix 在 green-1 / green-2 之间混出半步色阶:
|
||||||
|
// hover = 25%,选中 = 50%,选中+hover = 75%
|
||||||
|
const newRowCssVars = {
|
||||||
|
"--row-new-bg": token.colorSuccessBg,
|
||||||
|
"--row-new-text": token.colorSuccessText,
|
||||||
|
"--row-new-bg-hover": `color-mix(in srgb, ${token.colorSuccessBg} 75%, ${token.colorSuccessBgHover} 25%)`,
|
||||||
|
"--row-new-bg-active": `color-mix(in srgb, ${token.colorSuccessBg} 50%, ${token.colorSuccessBgHover} 50%)`,
|
||||||
|
"--row-new-bg-active-hover": `color-mix(in srgb, ${token.colorSuccessBg} 25%, ${token.colorSuccessBgHover} 75%)`,
|
||||||
|
"--row-new-text-active": token.colorSuccessTextActive,
|
||||||
|
} as React.CSSProperties;
|
||||||
|
|
||||||
// Auto-select all non-existing versions when data first loads
|
// Auto-select all non-existing versions when data first loads
|
||||||
const initRef = useRef(false);
|
const initRef = useRef(false);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -556,7 +564,7 @@ export function PublishModal({
|
|||||||
{loadingExisting ? (
|
{loadingExisting ? (
|
||||||
<div style={{ textAlign: "center", padding: 40 }}>加载中…</div>
|
<div style={{ textAlign: "center", padding: 40 }}>加载中…</div>
|
||||||
) : (
|
) : (
|
||||||
<Row gutter={token.margin}>
|
<Row gutter={token.margin} className="publish-version-tables" style={newRowCssVars}>
|
||||||
<Col span={14}>
|
<Col span={14}>
|
||||||
<Text strong style={{ display: "block", marginBottom: token.marginXS }}>
|
<Text strong style={{ display: "block", marginBottom: token.marginXS }}>
|
||||||
Modrinth
|
Modrinth
|
||||||
@ -566,14 +574,14 @@ export function PublishModal({
|
|||||||
dataSource={modrinthRows}
|
dataSource={modrinthRows}
|
||||||
columns={modrinthColumns}
|
columns={modrinthColumns}
|
||||||
rowKey="key"
|
rowKey="key"
|
||||||
onRow={(r) => ({
|
rowClassName={(r) =>
|
||||||
style: rowStyle(
|
rowClassName(
|
||||||
r.kind,
|
r.kind,
|
||||||
r.kind === "pending"
|
r.kind === "pending"
|
||||||
? (r.pending?.existsModrinth ?? false)
|
? (r.pending?.existsModrinth ?? false)
|
||||||
: true,
|
: true,
|
||||||
),
|
)
|
||||||
})}
|
}
|
||||||
rowSelection={{
|
rowSelection={{
|
||||||
selectedRowKeys: selectedModrinth,
|
selectedRowKeys: selectedModrinth,
|
||||||
onChange: (keys) => setSelectedModrinth(keys as string[]),
|
onChange: (keys) => setSelectedModrinth(keys as string[]),
|
||||||
@ -601,14 +609,14 @@ export function PublishModal({
|
|||||||
dataSource={curseforgeRows}
|
dataSource={curseforgeRows}
|
||||||
columns={curseforgeColumns}
|
columns={curseforgeColumns}
|
||||||
rowKey="key"
|
rowKey="key"
|
||||||
onRow={(r) => ({
|
rowClassName={(r) =>
|
||||||
style: rowStyle(
|
rowClassName(
|
||||||
r.kind,
|
r.kind,
|
||||||
r.kind === "pending"
|
r.kind === "pending"
|
||||||
? (r.pending?.existsCurseforge ?? false)
|
? (r.pending?.existsCurseforge ?? false)
|
||||||
: true,
|
: true,
|
||||||
),
|
)
|
||||||
})}
|
}
|
||||||
rowSelection={{
|
rowSelection={{
|
||||||
selectedRowKeys: selectedCurseforge,
|
selectedRowKeys: selectedCurseforge,
|
||||||
onChange: (keys) => setSelectedCurseforge(keys as string[]),
|
onChange: (keys) => setSelectedCurseforge(keys as string[]),
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user