Forker/fluxscape
1
0
Fork 0
mirror of https://github.com/fluxscape/fluxscape.git synced 2026-01-11 23:02:55 +01:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity

feat(editor): Deploy popup always mounted (#51)

Browse Source 
This removes the delayed loading when opening the deploy popup
This commit is contained in:
Eric Tuvesson
2024-07-08 12:47:28 +02:00
committed by GitHub
parent 12be6dc69f
commit d61effc615
3 changed files with 133 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
packages/noodl-core-ui/src/components/layout/BaseDialog/BaseDialog.module.scss
View File

@@ -1,123 +1,128 @@
.Root { .Root {
border: none; border: none;
padding: 0; padding: 0;
background: transparent; background: transparent;
box-sizing: border-box; box-sizing: border-box;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
&.has-backdrop { &.is-hidden {
background-color: var(--theme-color-bg-1-transparent); visibility: hidden;
} pointer-events: none;
}
&.is-locking-scroll {
background-color: transparent; &.has-backdrop {
} background-color: var(--theme-color-bg-1-transparent);
}
&:not(.has-backdrop):not(.is-locking-scroll) {
pointer-events: none; &.is-locking-scroll {
} background-color: transparent;
} }
.VisibleDialog { &:not(.has-backdrop):not(.is-locking-scroll) {
filter: drop-shadow(0 4px 15px var(--theme-color-bg-1-transparent-2)); pointer-events: none;
box-shadow: 0 0 10px -5px var(--theme-color-bg-1-transparent-2); }
position: absolute; }
width: var(--width);
pointer-events: all; .VisibleDialog {
filter: drop-shadow(0 4px 15px var(--theme-color-bg-1-transparent-2));
.Root.is-centered & { box-shadow: 0 0 10px -5px var(--theme-color-bg-1-transparent-2);
top: 50%; position: absolute;
left: 50%; width: var(--width);
animation: enter-centered var(--speed-quick) var(--easing-base) both; pointer-events: all;
}
.Root.is-centered & {
.Root:not(.is-centered) &.is-visible { top: 50%;
&.is-variant-default { left: 50%;
animation: enter var(--speed-quick) var(--easing-base) both; animation: enter-centered var(--speed-quick) var(--easing-base) both;
} }
&.is-variant-select { .Root:not(.is-centered) &.is-visible {
transform: translate(var(--offsetX), var(--offsetY)); &.is-variant-default {
} animation: enter var(--speed-quick) var(--easing-base) both;
} }
&::after { &.is-variant-select {
content: ''; transform: translate(var(--offsetX), var(--offsetY));
position: absolute; }
top: 0; }
left: 0;
right: 0; &::after {
bottom: 0; content: '';
background-color: var(--background); position: absolute;
border-radius: 2px; top: 0;
overflow: hidden; left: 0;
} right: 0;
} bottom: 0;
background-color: var(--background);
.Arrow { border-radius: 2px;
position: absolute; overflow: hidden;
width: 0; }
height: 0; }
top: var(--arrow-top);
left: var(--arrow-left); .Arrow {
pointer-events: none; position: absolute;
width: 0;
&::after { height: 0;
content: ''; top: var(--arrow-top);
display: block; left: var(--arrow-left);
width: 11px; pointer-events: none;
height: 11px;
transform: translate(-50%, -50%) rotate(45deg); &::after {
background: var(--background); content: '';
} display: block;
width: 11px;
&.is-contrast::after { height: 11px;
background: var(--backgroundContrast); transform: translate(-50%, -50%) rotate(45deg);
} background: var(--background);
} }
.Title { &.is-contrast::after {
background-color: var(--backgroundContrast); background: var(--backgroundContrast);
padding: 12px; }
} }
.MeasuringContainer { .Title {
pointer-events: none; background-color: var(--backgroundContrast);
height: 0; padding: 12px;
overflow: visible; }
opacity: 0;
} .MeasuringContainer {
pointer-events: none;
.ChildContainer { height: 0;
position: relative; overflow: visible;
z-index: 1; opacity: 0;
} }
@keyframes enter { .ChildContainer {
from { position: relative;
opacity: 0; z-index: 1;
transform: translate( }
calc(var(--animationStartOffsetX) + var(--offsetX)),
calc(var(--animationStartOffsetY) + var(--offsetY)) @keyframes enter {
); from {
} opacity: 0;
to { transform: translate(
opacity: 1; calc(var(--animationStartOffsetX) + var(--offsetX)),
transform: translate(var(--offsetX), var(--offsetY)); calc(var(--animationStartOffsetY) + var(--offsetY))
} );
} }
to {
@keyframes enter-centered { opacity: 1;
from { transform: translate(var(--offsetX), var(--offsetY));
opacity: 0; }
transform: translate(-50%, calc(-50% + 16px)); }
}
to { @keyframes enter-centered {
opacity: 1; from {
transform: translate(-50%, -50%); opacity: 0;
} transform: translate(-50%, calc(-50% + 16px));
} }
to {
opacity: 1;
transform: translate(-50%, -50%);
}
}

5
packages/noodl-core-ui/src/components/layout/BaseDialog/BaseDialog.tsx
View File

@@ -42,6 +42,7 @@ export interface BaseDialogProps extends UnsafeStyleProps {
isVisible?: boolean; isVisible?: boolean;
hasBackdrop?: boolean; hasBackdrop?: boolean;
hasArrow?: boolean; hasArrow?: boolean;
alwaysMounted?: boolean;
children?: Slot; children?: Slot;
@@ -69,6 +70,7 @@ export function CoreBaseDialog({
isVisible, isVisible,
hasBackdrop, hasBackdrop,
hasArrow, hasArrow,
alwaysMounted,
children, children,
@@ -261,7 +263,7 @@ export function CoreBaseDialog({
} }
}, [background]); }, [background]);
if (!isVisible) return null; if (!isVisible && !alwaysMounted) return null;
return ( return (
<div <div
@@ -270,6 +272,7 @@ export function CoreBaseDialog({
hasBackdrop && css['has-backdrop'], hasBackdrop && css['has-backdrop'],
isLockingScroll && css['is-locking-scroll'], isLockingScroll && css['is-locking-scroll'],
typeof triggerRef === 'undefined' && css['is-centered'], typeof triggerRef === 'undefined' && css['is-centered'],
!isVisible && css['is-hidden'],
css[variant] css[variant]
)} )}
onClick={onClose} onClick={onClose}

1
packages/noodl-editor/src/editor/src/views/DeployPopup/DeployPopup.tsx
View File

@@ -55,6 +55,7 @@ export function DeployPopup(props: DeployPopupProps) {
onClose={props.onClose} onClose={props.onClose}
hasArrow hasArrow
isLockingScroll isLockingScroll
alwaysMounted
> >
<DeployPopupChild /> <DeployPopupChild />
</BaseDialog> </BaseDialog>