SILVER/NODEDC_TASKMANAGER
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: embed Beam viewer in issue peek

Browse Source
This commit is contained in:
DCCONSTRUCTIONS
2026-06-05 12:46:47 +03:00
parent 15c9fb1df1
commit 867f7bc558
4 changed files with 492 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plane-src/apps/web/styles/globals.css
+129 -18
View File
@@ -51,6 +51,7 @@
--nodedc-bottom-dock-visual-overlap: 0.625rem;
--nodedc-expanded-footer-height: 4.95rem;
--nodedc-active-footer-offset: var(--nodedc-bottom-dock-offset, var(--nodedc-bottom-dock-height, 2.75rem));
--nodedc-peek-bottom-offset: var(--nodedc-expanded-footer-height, 4.95rem);
--nodedc-list-property-chip-height: 2.12rem;
--nodedc-list-property-avatar-size: 1.9rem;
--nodedc-list-property-icon-size: var(--nodedc-list-property-chip-height);
@@ -345,31 +346,141 @@
0 8px 22px rgba(0, 0, 0, 0.24);
}
.nodedc-beam-viewer-modal {
background: #000 !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
.nodedc-beam-peek-shell {
--nodedc-beam-peek-width: 720px;
position: fixed;
top: 5.35rem;
left: 0.75rem;
right: 0.75rem;
bottom: var(--nodedc-peek-bottom-offset);
z-index: 80;
display: grid;
grid-template-columns: minmax(0, 1fr) var(--nodedc-beam-peek-width);
grid-template-rows: minmax(0, 1fr);
align-items: stretch;
column-gap: 0.75rem;
overflow: visible;
transition:
column-gap 260ms ease,
grid-template-columns 260ms ease,
opacity 220ms ease;
}
.nodedc-beam-viewer-modal::before,
.nodedc-beam-viewer-modal::after {
.nodedc-beam-peek-shell[data-resizing="true"] {
transition: none;
}
.nodedc-peek-side-bound {
position: fixed !important;
bottom: var(--nodedc-peek-bottom-offset) !important;
}
.nodedc-beam-peek-shell[data-fullscreen="true"] {
grid-template-columns: minmax(0, 1fr) 0;
column-gap: 0;
}
.nodedc-beam-peek-viewer-card {
position: relative;
height: 100%;
min-width: 0;
min-height: 0;
overflow: hidden;
background: #000;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 28px;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
transition:
border-color 260ms ease,
border-radius 260ms ease;
animation: nodedcBeamPeekSlideIn 220ms ease-out;
}
.nodedc-beam-peek-shell[data-resizing="true"] .nodedc-beam-peek-viewer-card,
.nodedc-beam-peek-shell[data-resizing="true"] .nodedc-beam-peek-issue-card {
transition: none;
}
.nodedc-beam-peek-shell[data-fullscreen="true"] .nodedc-beam-peek-viewer-card {
border-radius: 28px;
}
.nodedc-beam-peek-issue-slot {
min-width: 0;
min-height: 0;
height: 100%;
overflow: visible;
transition:
opacity 220ms ease,
transform 260ms ease;
}
.nodedc-beam-peek-shell[data-fullscreen="true"] .nodedc-beam-peek-issue-slot {
overflow: hidden;
opacity: 0;
transform: translateX(1.5rem);
pointer-events: none;
}
.nodedc-beam-peek-issue-card {
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
border-radius: 28px !important;
overflow: hidden !important;
box-shadow:
0px 4px 8px 0px rgba(0, 0, 0, 0.12),
0px 6px 12px 0px rgba(16, 24, 40, 0.12),
0px 1px 16px 0px rgba(16, 24, 40, 0.12);
}
.nodedc-beam-peek-viewer-card iframe,
.nodedc-beam-peek-viewer-card iframe:focus,
.nodedc-beam-peek-viewer-card iframe:focus-visible {
border: 0 !important;
outline: none !important;
box-shadow: none !important;
}
.nodedc-beam-viewer-modal:focus,
.nodedc-beam-viewer-modal:focus-visible,
.nodedc-beam-viewer-modal:focus-within,
.nodedc-beam-viewer-modal iframe,
.nodedc-beam-viewer-modal iframe:focus,
.nodedc-beam-viewer-modal iframe:focus-visible {
border: 0 !important;
outline: none !important;
box-shadow: none !important;
.nodedc-beam-peek-shell[data-resizing="true"] iframe {
pointer-events: none;
}
.nodedc-beam-peek-resize-shield {
position: absolute;
inset: -1rem;
z-index: 120;
cursor: ew-resize;
background: transparent;
}
@keyframes nodedcBeamPeekSlideIn {
from {
transform: translateX(1.25rem);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@media (max-width: 900px) {
.nodedc-beam-peek-shell,
.nodedc-beam-peek-shell[data-fullscreen="true"] {
grid-template-columns: minmax(0, 1fr);
column-gap: 0;
}
.nodedc-beam-peek-viewer-card,
.nodedc-beam-peek-shell[data-fullscreen="true"] .nodedc-beam-peek-viewer-card {
border-radius: 24px;
}
.nodedc-beam-peek-issue-slot {
display: none;
}
}
.nodedc-glass-surface {