estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Feat: web app dark mode (#14732)

Browse Source
This commit is contained in:
KVOJJJin
2025-03-03 14:44:51 +08:00
committed by GitHub
parent e53052ab7a
commit d0d0bf570e
98 changed files with 3006 additions and 2496 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
web/public/embed.js
View File

@@ -69,11 +69,21 @@
iframe.id = iframeId;
iframe.src = iframeUrl;
iframe.style.cssText = `
border: none; position: absolute; flex-direction: column; justify-content: space-between;
box-shadow: rgba(150, 150, 150, 0.2) 0px 10px 30px 0px, rgba(150, 150, 150, 0.2) 0px 0px 0px 1px;
bottom: 55px; right: 0; width: 24rem; max-width: calc(100vw - 2rem); height: 40rem;
max-height: calc(100vh - 6rem); border-radius: 0.75rem; display: flex; z-index: 2147483647;
overflow: hidden; left: unset; background-color: #F3F4F6;user-select: none;
position: absolute;
display: flex;
flex-direction: column;
justify-content: space-between;
left: unset;
right: 0;
bottom: 0;
width: 24rem;
max-width: calc(100vw - 2rem);
height: 43.75rem;
max-height: calc(100vh - 6rem);
border: none;
z-index: 2147483640;
overflow: hidden;
user-select: none;
`;
return iframe;
@@ -92,12 +102,12 @@
const buttonInBottom = buttonRect.top - 5 > targetIframe.clientHeight
if (buttonInBottom) {
targetIframe.style.bottom = `${buttonRect.height + 5}px`;
targetIframe.style.bottom = '0px';
targetIframe.style.top = 'unset';
}
else {
targetIframe.style.bottom = 'unset';
targetIframe.style.top = `${buttonRect.height + 5}px`;
targetIframe.style.top = '0px';
}
const buttonInRight = buttonRect.right > targetIframe.clientWidth;
@@ -148,8 +158,8 @@
right: var(--${containerDiv.id}-right, 1rem);
left: var(--${containerDiv.id}-left, unset);
top: var(--${containerDiv.id}-top, unset);
width: var(--${containerDiv.id}-width, 50px);
height: var(--${containerDiv.id}-height, 50px);
width: var(--${containerDiv.id}-width, 48px);
height: var(--${containerDiv.id}-height, 48px);
border-radius: var(--${containerDiv.id}-border-radius, 25px);
background-color: var(--${containerDiv.id}-bg-color, #155EEF);
box-shadow: var(--${containerDiv.id}-box-shadow, rgba(0, 0, 0, 0.2) 0px 4px 8px 0px);
@@ -161,7 +171,7 @@
// Create display div for the button icon
const displayDiv = document.createElement("div");
displayDiv.style.cssText =
"display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 2147483647;";
"position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 2147483647;";
displayDiv.innerHTML = svgIcons.open;
containerDiv.appendChild(displayDiv);
document.body.appendChild(containerDiv);
@@ -170,7 +180,7 @@
containerDiv.addEventListener("click", function () {
const targetIframe = document.getElementById(iframeId);
if (!targetIframe) {
containerDiv.appendChild(createIframe());
containerDiv.prepend(createIframe());
resetIframePosition();
this.title = "Exit (ESC)";
displayDiv.innerHTML = svgIcons.close;