Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: introduce Simulation Dashboard with core components for elements, blocks, control panel, and dashboard editing.

Browse Source
This commit is contained in:
Vishnu
2025-12-20 12:55:43 +05:30
parent e9d0a98a49
commit 9997134e5e
8 changed files with 523 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
app/src/styles/components/simulationDashboard/_simulationDashBoard.scss
View File

@@ -38,7 +38,8 @@
}
&.edit-mode-active {
background-color: #ff4444;
background-color: var(--log-error-background-color);
color: var(--log-error-text-color);
}
&.primary {
@@ -87,6 +88,9 @@
&.edit-mode {
cursor: pointer;
&:hover {
outline: 1px solid var(--border-color-accent);
}
}
&.draggable {
@@ -175,18 +179,30 @@
margin: 5px;
border-radius: 4px;
padding: 8px;
// transition: all 0.2s ease;
user-select: none;
border: 1px solid transparent;
&.edit-mode {
transition: all 0.2s;
outline: 1px solid transparent;
&:hover {
outline-color: var(--border-color);
transform: translateY(-2px);
opacity: 0.8;
}
}
&.absolute {
position: absolute;
margin: 0;
}
&.selected {
border: 2px solid #ff9800;
background-color: rgba(255, 152, 0, 0.1);
outline: 2px solid var(--border-color-accent) !important;
background-color: rgba(98, 0, 255, 0.089);
&:hover {
transform: translateY(0);
}
}
&.swap-source {
@@ -195,7 +211,7 @@
}
&.swap-target {
border: 2px dashed #ff9800;
border: 2px dashed var(--border-color-accent);
}
&.graph {
@@ -240,7 +256,7 @@
position: absolute;
bottom: 2px;
right: 2px;
background-color: rgba(33, 150, 243, 0.8);
background-color: var(--background-color-accent);
cursor: nwse-resize;
border-radius: 2px;
opacity: 0;
@@ -285,13 +301,23 @@
min-height: 60vh;
padding: 12px;
.resize-icon {
.free-move-button {
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
svg {
cursor: grab;
height: 28px;
width: 68px;
top: 2px;
left: 50%;
border-radius: 28px;
transition: all 0.2s;
transform: translateX(-50%);
position: absolute;
cursor: grab;
&:hover {
background-color: var(--background-color-drop-down);
}
}
@@ -361,11 +387,9 @@
background: #8d70ad33;
height: 110px;
border-radius: 17px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.canvas {
@@ -376,35 +400,43 @@
.value {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 24px;
text-align: center;
input {
// border: none;
// outline: none;
width: 20px;
input,
span {
width: 36px;
height: auto;
padding: 0;
text-align: center;
background: transparent;
}
&:nth-child(1) {
top: 20px;
&.padding-top {
top: 12px;
left: 50%;
transform: translateX(-50%);
}
&:nth-child(2) {
&.padding-right {
top: 50%;
right: 35px;
right: 12px;
transform: translateY(-50%);
}
&:nth-child(3) {
bottom: 20px;
&.padding-bottom {
bottom: 12px;
left: 50%;
transform: translateX(-50%);
}
&:nth-child(4) {
&.padding-left {
top: 50%;
left: 35px;
left: 12px;
transform: translateY(-50%);
}
}
@@ -420,14 +452,18 @@
border-radius: 100px;
padding: 6px;
display: flex;
align-items: center;
justify-content: space-evenly;
gap: 10px;
width: fit-content;
width: 100%;
margin: 0;
}
.icon {
&.active {
background-color: var(--background-color-button);
border-radius: 2px;
border-radius: 8px;
outline: 2px solid var(--border-color-accent);
}
}
}
@@ -462,7 +498,11 @@
.colorValue {
width: 100%;
background: linear-gradient(90.85deg, rgba(240, 228, 255, 0.3) 3.6%, rgba(211, 174, 253, 0.3) 96.04%);
background: linear-gradient(
90.85deg,
rgba(240, 228, 255, 0.3) 3.6%,
rgba(211, 174, 253, 0.3) 96.04%
);
text-align: center;
padding: 4px 0;
border-radius: 100px;
@@ -472,22 +512,52 @@
.design-section-footer {
display: flex;
flex-direction: column;
gap: 7px;
label,
.input {
width: auto;
.layer-system {
display: flex;
align-items: center;
gap: 3px;
.increase-z,
.decrease-z,
.reset {
min-width: 26px;
height: 22px;
border-radius: 14px;
background: var(--background-color-drop-down);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
&:hover {
background: var(--background-color-accent);
}
svg {
pointer-events: none;
}
}
.increase-z {
svg {
rotate: 180deg;
}
}
}
.input,
input {
width: 40px;
width: 100%;
}
.input-range-container,
.value-field-container {
width: 100%;
display: flex;
gap: 6px;
gap: 0px;
.label {
min-width: 82px;
}
.input-container {
width: 100%;
@@ -496,7 +566,11 @@
input[type="range"] {
margin: 0;
width: 70px;
width: 136px;
}
input[type="number"] {
margin: 0;
width: 48px;
}
}
}
@@ -613,9 +687,6 @@
text-align: center;
}
.type-switch {
}
.fields-wrapper {
display: flex;
flex-direction: column;
@@ -704,9 +775,10 @@
}
}
.footer {
.swap-button {
text-align: center;
color: #ccacff;
cursor: pointer;
}
}
}