Add compact notice display mode

This commit is contained in:
Hao19911125
2026-04-05 14:36:50 +08:00
parent 8320c2dce7
commit 03b535f5a4
5 changed files with 375 additions and 2 deletions

View File

@@ -60,6 +60,16 @@ function ensureStyle(doc) {
-webkit-backdrop-filter: blur(10px) saturate(125%);
}
.st-bme-notice[data-layout="compact"] {
display: flex;
align-items: center;
gap: 10px;
width: fit-content;
max-width: 100%;
align-self: flex-end;
padding: 10px;
}
.st-bme-notice::after {
content: "";
position: absolute;
@@ -87,6 +97,7 @@ function ensureStyle(doc) {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.16);
flex-shrink: 0;
}
.st-bme-notice[data-busy="true"] .st-bme-notice__icon {
@@ -97,6 +108,12 @@ function ensureStyle(doc) {
min-width: 0;
}
.st-bme-notice[data-layout="compact"] .st-bme-notice__content {
display: flex;
align-items: center;
min-width: 0;
}
.st-bme-notice__title {
margin: 0;
font-size: 17px;
@@ -106,6 +123,14 @@ function ensureStyle(doc) {
color: #f0f6ff;
}
.st-bme-notice[data-layout="compact"] .st-bme-notice__title {
font-size: 16px;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.st-bme-notice__message {
margin: 4px 0 0;
font-size: 14px;
@@ -126,6 +151,12 @@ function ensureStyle(doc) {
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 88%, transparent 100%);
}
.st-bme-notice[data-layout="compact"] .st-bme-notice__message,
.st-bme-notice[data-layout="compact"] .st-bme-notice__actions,
.st-bme-notice[data-layout="compact"] .st-bme-notice__progress {
display: none !important;
}
.st-bme-notice__actions {
display: flex;
gap: 8px;
@@ -170,6 +201,7 @@ function ensureStyle(doc) {
line-height: 1;
cursor: pointer;
transition: background 140ms ease;
flex-shrink: 0;
}
.st-bme-notice__close:hover,
@@ -280,8 +312,11 @@ function getIcon(level) {
function applyNoticeState(item, input, progress) {
const level = input.level || "info";
const displayMode = input.displayMode === "compact" ? "compact" : "normal";
const isCompact = displayMode === "compact";
item.dataset.level = level;
item.dataset.busy = input.busy ? "true" : "false";
item.dataset.layout = displayMode;
const icon = item.querySelector(".st-bme-notice__icon");
if (icon) {
@@ -296,6 +331,7 @@ function applyNoticeState(item, input, progress) {
const message = item.querySelector(".st-bme-notice__message");
if (message) {
message.textContent = input.message || "";
message.hidden = isCompact || !String(input.message || "").trim();
if (input.marquee) {
message.classList.add("st-bme-notice__message--marquee");
} else {
@@ -306,7 +342,7 @@ function applyNoticeState(item, input, progress) {
const actionWrap = item.querySelector(".st-bme-notice__actions");
const actionButton = item.querySelector(".st-bme-notice__action");
if (actionWrap && actionButton) {
if (input.action?.label) {
if (!isCompact && input.action?.label) {
actionWrap.style.display = "";
actionButton.style.display = "";
actionButton.textContent = input.action.label;
@@ -319,7 +355,7 @@ function applyNoticeState(item, input, progress) {
}
}
if (input.persist) {
if (input.persist || isCompact) {
progress.style.display = "none";
progress.style.animationDuration = "";
} else {