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

Persist catalog layout and add inspector toolbar

Browse Source
This commit is contained in:
DCCONSTRUCTIONS
2026-07-10 23:28:10 +03:00
parent 8ca12f2676
commit 406e692a5e
14 changed files with 715 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui-core/styles.css
+128
View File
@@ -1304,6 +1304,22 @@ textarea.nodedc-field__control {
gap: 0.45rem;
}
.nodedc-application-panel__tools {
display: flex;
align-items: center;
margin-right: 0.1rem;
}
.nodedc-application-panel__tools .nodedc-segmented {
min-height: 2.92rem;
padding: 0.22rem;
}
.nodedc-application-panel__tools .nodedc-segmented__item {
min-height: 2.48rem;
padding-inline: 1rem;
}
.nodedc-application-panel__action {
display: grid;
width: 2.92rem;
@@ -1926,6 +1942,16 @@ textarea.nodedc-field__control {
padding: 1.125rem 0.75rem 0.875rem 1.625rem;
}
.nodedc-window[data-placement="end"][data-draggable="true"] .nodedc-window__head {
cursor: grab;
touch-action: none;
user-select: none;
}
.nodedc-window[data-placement="end"][data-draggable="true"] .nodedc-window__head:active {
cursor: grabbing;
}
.nodedc-window[data-placement="end"] .nodedc-window__body {
padding: 0 0.75rem 1.125rem;
}
@@ -2050,6 +2076,108 @@ textarea.nodedc-field__control {
gap: var(--nodedc-space-2);
}
.nodedc-toolbar-wrap {
position: fixed;
z-index: calc(var(--nodedc-layer-header) + 20);
pointer-events: auto;
}
.nodedc-toolbar-wrap[data-placement="left"] {
top: 50%;
left: 0.75rem;
transform: translateY(-50%);
}
.nodedc-toolbar-wrap[data-placement="right"] {
top: 50%;
right: 0.75rem;
transform: translateY(-50%);
}
.nodedc-toolbar-wrap[data-placement="bottom"] {
bottom: 0.75rem;
left: 50%;
transform: translateX(-50%);
}
.nodedc-toolbar {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.42rem;
border: 1px solid var(--nodedc-toolbar-outline);
border-radius: calc(var(--nodedc-toolbar-radius) + 0.42rem);
background: color-mix(in srgb, var(--nodedc-toolbar-bg) 88%, transparent);
box-shadow: 0 10px 28px color-mix(in srgb, var(--nodedc-toolbar-outline) 36%, transparent);
backdrop-filter: blur(24px) saturate(1.12);
-webkit-backdrop-filter: blur(24px) saturate(1.12);
transition: opacity 180ms ease, transform 220ms ease;
}
.nodedc-toolbar-wrap[data-placement="left"] .nodedc-toolbar,
.nodedc-toolbar-wrap[data-placement="right"] .nodedc-toolbar {
flex-direction: column;
}
.nodedc-toolbar-wrap[data-autohide="true"]:not([data-visible="true"]) .nodedc-toolbar {
opacity: 0;
pointer-events: none;
}
.nodedc-toolbar-wrap[data-placement="left"][data-autohide="true"]:not([data-visible="true"]) .nodedc-toolbar {
transform: translateX(calc(-100% - 1rem));
}
.nodedc-toolbar-wrap[data-placement="right"][data-autohide="true"]:not([data-visible="true"]) .nodedc-toolbar {
transform: translateX(calc(100% + 1rem));
}
.nodedc-toolbar-wrap[data-placement="bottom"][data-autohide="true"]:not([data-visible="true"]) .nodedc-toolbar {
transform: translateY(calc(100% + 1rem));
}
.nodedc-toolbar__hotzone {
position: fixed;
}
.nodedc-toolbar-wrap[data-placement="left"] .nodedc-toolbar__hotzone {
inset: 5rem auto 5rem 0;
width: 1.1rem;
}
.nodedc-toolbar-wrap[data-placement="right"] .nodedc-toolbar__hotzone {
inset: 5rem 0 5rem auto;
width: 1.1rem;
}
.nodedc-toolbar-wrap[data-placement="bottom"] .nodedc-toolbar__hotzone {
right: 5rem;
bottom: 0;
left: 5rem;
height: 1.1rem;
}
.nodedc-toolbar__button {
display: grid;
width: var(--nodedc-toolbar-item-size);
height: var(--nodedc-toolbar-item-size);
flex: 0 0 var(--nodedc-toolbar-item-size);
place-items: center;
border: 1px solid var(--nodedc-toolbar-border);
border-radius: var(--nodedc-toolbar-radius);
outline: 0;
background: var(--nodedc-toolbar-bg);
color: var(--nodedc-toolbar-accent);
padding: 0;
transition: width 120ms ease, height 120ms ease, flex-basis 120ms ease, background 120ms ease, color 120ms ease;
}
.nodedc-toolbar__button[data-active="true"] {
border-color: var(--nodedc-toolbar-accent);
background: var(--nodedc-toolbar-accent);
color: rgb(var(--nodedc-on-accent-rgb));
}
.nodedc-window.nodedc-share-access-window {
width: min(35rem, calc(100vw - 2rem));
}