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

feat(foundry): refine map application controls

Browse Source
This commit is contained in:
Codex
2026-08-09 14:24:18 +03:00
parent 7025fd20b5
commit beb84f6de6
18 changed files with 633 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui-core/styles.css
+163 -3
View File
@@ -1376,7 +1376,8 @@ textarea.nodedc-field__control {
}
.nodedc-app-shell__navigation,
.nodedc-app-shell__content {
.nodedc-app-shell__content,
.nodedc-app-shell__end-panel {
position: absolute;
z-index: var(--nodedc-layer-panel);
top: 0;
@@ -1395,6 +1396,27 @@ textarea.nodedc-field__control {
transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1), right 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nodedc-app-shell__end-panel {
right: var(--nodedc-app-page-pad);
width: var(--nodedc-app-nav-width);
visibility: hidden;
pointer-events: none;
}
.nodedc-app-shell__end-panel > * {
width: 100%;
height: 100%;
}
.nodedc-app-shell[data-end-panel-open="true"] .nodedc-app-shell__end-panel {
visibility: visible;
pointer-events: auto;
}
.nodedc-app-shell[data-end-panel-open="true"] .nodedc-app-shell__stage {
padding-right: calc(var(--nodedc-app-page-pad) + var(--nodedc-app-nav-width) + var(--nodedc-app-panel-gap));
}
.nodedc-app-shell[data-navigation-open="true"] .nodedc-app-shell__stage {
padding-left: calc(var(--nodedc-app-page-pad) + var(--nodedc-app-nav-width) + var(--nodedc-app-panel-gap));
}
@@ -1411,6 +1433,10 @@ textarea.nodedc-field__control {
width: auto;
}
.nodedc-app-shell[data-content-open="true"][data-content-expanded="true"][data-end-panel-open="true"] .nodedc-app-shell__content {
right: calc(var(--nodedc-app-page-pad) + var(--nodedc-app-nav-width) + var(--nodedc-app-panel-gap));
}
.nodedc-app-shell[data-content-open="true"][data-content-expanded="true"] .nodedc-app-shell__stage {
pointer-events: none;
transform: translateX(calc(100vw + var(--nodedc-app-page-pad)));
@@ -1559,6 +1585,34 @@ textarea.nodedc-field__control {
grid-template-rows: auto minmax(0, 1fr) auto;
}
.nodedc-application-side-panel {
animation-name: nodedc-application-side-panel-in;
}
@keyframes nodedc-application-side-panel-in {
from { opacity: 0; transform: translateX(1.6rem); }
to { opacity: 1; transform: translateX(0); }
}
.nodedc-application-side-panel__description {
display: block;
margin-top: 0.3rem;
color: var(--nodedc-text-muted);
font-size: 0.72rem;
line-height: 1.25;
}
.nodedc-application-side-panel__body {
width: calc(100% + 2.2rem);
min-height: 0;
margin-inline: -1.1rem;
overflow: auto;
overscroll-behavior: contain;
padding-inline: 1.1rem;
scrollbar-width: thin;
scrollbar-color: var(--nodedc-scrollbar-thumb) transparent;
}
@keyframes nodedc-admin-panel-in {
from { opacity: 0; transform: translateX(-1.6rem); }
to { opacity: 1; transform: translateX(0); }
@@ -3140,6 +3194,17 @@ textarea.nodedc-field__control {
cursor: pointer;
}
.nodedc-inspector__section-icon,
.nodedc-inspector__section-chevron {
display: none;
}
.nodedc-inspector__section-body {
display: grid;
min-width: 0;
gap: 0.2rem;
}
.nodedc-inspector__section-trigger:not([data-open="true"]):hover {
background: var(--nodedc-glass-control-hover);
color: var(--nodedc-text-primary);
@@ -3179,6 +3244,89 @@ textarea.nodedc-field__control {
animation: nodedc-section-in var(--nodedc-duration-fast) ease;
}
.nodedc-inspector[data-variant="panel"] {
width: 100%;
gap: 0.22rem;
}
.nodedc-inspector[data-variant="panel"] :where(.nodedc-inspector__group, .nodedc-inspector__section) {
gap: 0.22rem;
}
.nodedc-inspector[data-variant="panel"] .nodedc-inspector__section {
gap: 0.35rem;
}
.nodedc-inspector[data-variant="panel"] .nodedc-inspector__section-trigger {
min-height: 3.55rem;
grid-template-columns: 2.92rem minmax(0, 1fr) 1.4rem;
align-items: center;
align-content: initial;
gap: 0.65rem;
border-radius: var(--nodedc-radius-circle);
background: var(--nodedc-panel-item-bg);
color: var(--nodedc-text-secondary);
padding: 5px 0.72rem 5px 5px;
box-shadow: none;
opacity: 0.72;
transition: background 160ms ease, color 160ms ease, opacity 160ms ease, transform 160ms ease;
}
.nodedc-inspector[data-variant="panel"] .nodedc-inspector__section-trigger:hover:not(:disabled) {
background: var(--nodedc-panel-item-hover-bg);
color: var(--nodedc-text-primary);
opacity: 0.92;
transform: translateY(-1px);
}
.nodedc-inspector[data-variant="panel"] .nodedc-inspector__section-trigger:is([data-open="true"], [data-active="true"], [data-tone="accent"]) {
background: var(--nodedc-panel-item-active-bg);
color: var(--nodedc-text-primary);
opacity: 1;
box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), inset 0 -14px 26px color-mix(in srgb, var(--nodedc-canvas) 8%, transparent);
}
.nodedc-inspector[data-variant="panel"] .nodedc-inspector__section-trigger:is([data-open="true"], [data-active="true"], [data-tone="accent"]) .nodedc-inspector__section-description {
color: var(--nodedc-text-muted);
}
.nodedc-inspector[data-variant="panel"] .nodedc-inspector__section-icon {
display: grid;
width: 2.92rem;
height: 2.92rem;
place-items: center;
border-radius: var(--nodedc-radius-circle);
background: var(--nodedc-panel-icon-bg);
color: var(--nodedc-text-secondary);
}
.nodedc-inspector[data-variant="panel"] .nodedc-inspector__section-trigger[data-open="true"] .nodedc-inspector__section-icon {
background: var(--nodedc-panel-active-icon-bg);
color: var(--nodedc-panel-active-icon-color);
}
.nodedc-inspector[data-variant="panel"] .nodedc-inspector__section-chevron {
display: grid;
place-items: center;
color: var(--nodedc-text-muted);
transition: transform 160ms ease;
}
.nodedc-inspector[data-variant="panel"] .nodedc-inspector__section-trigger[data-open="true"] .nodedc-inspector__section-chevron {
transform: rotate(90deg);
}
.nodedc-inspector[data-variant="panel"] .nodedc-inspector__section-content {
padding: 0.45rem 0.15rem 0.85rem;
}
.nodedc-inspector[data-variant="panel"] .nodedc-control-row {
width: 100%;
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
gap: var(--nodedc-space-2);
}
@keyframes nodedc-section-in {
from { opacity: 0; transform: translateY(-3px); }
to { opacity: 1; transform: translateY(0); }
@@ -3243,6 +3391,10 @@ textarea.nodedc-field__control {
pointer-events: none;
transform: translateX(calc(100vw + var(--nodedc-app-page-pad)));
}
.nodedc-app-shell[data-content-open="true"][data-end-panel-open="true"] .nodedc-app-shell__content {
right: calc(var(--nodedc-app-page-pad) + var(--nodedc-app-nav-width) + var(--nodedc-app-panel-gap));
}
}
@media (max-width: 760px) {
@@ -3286,13 +3438,19 @@ textarea.nodedc-field__control {
}
.nodedc-app-shell__navigation,
.nodedc-app-shell__content {
.nodedc-app-shell__content,
.nodedc-app-shell__end-panel {
right: var(--nodedc-app-page-pad);
bottom: var(--nodedc-app-page-pad);
left: var(--nodedc-app-page-pad);
width: auto;
}
.nodedc-app-shell[data-end-panel-open="true"] .nodedc-app-shell__content {
opacity: 0;
pointer-events: none;
}
.nodedc-app-shell[data-navigation-open="true"] .nodedc-app-shell__stage,
.nodedc-app-shell[data-content-open="true"] .nodedc-app-shell__stage {
padding-left: var(--nodedc-app-page-pad);
@@ -3306,7 +3464,8 @@ textarea.nodedc-field__control {
}
.nodedc-application-panel,
.nodedc-admin-panel {
.nodedc-admin-panel,
.nodedc-application-side-panel {
width: 100%;
max-width: none;
}
@@ -3400,6 +3559,7 @@ textarea.nodedc-field__control {
.nodedc-window,
.nodedc-workspace-window,
.nodedc-application-panel,
.nodedc-application-side-panel,
.nodedc-inspector__section-content {
animation: none;
}