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

feat: introduce BlockEditor for interactive block style, size, and position management within the simulation dashboard.

Browse Source
This commit is contained in:
Vishnu
2025-12-20 13:18:41 +05:30
parent 7646bfa07b
commit da85c33266
3 changed files with 108 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,7 +12,7 @@
left: 0;
pointer-events: none;
* > {
*> {
pointer-events: auto;
}
@@ -88,6 +88,7 @@
&.edit-mode {
cursor: pointer;
&:hover {
outline: 1px solid var(--border-color-accent);
}
@@ -185,6 +186,7 @@
&.edit-mode {
transition: all 0.2s;
outline: 1px solid transparent;
&:hover {
outline-color: var(--border-color);
transform: translateY(-2px);
@@ -200,6 +202,7 @@
&.selected {
outline: 2px solid var(--border-color-accent) !important;
background-color: rgba(98, 0, 255, 0.089);
&:hover {
transform: translateY(0);
}
@@ -365,7 +368,6 @@
.value-field-container {
padding: 0;
margin: 0;
// padding: 6px 0px;
}
.select-type {
@@ -498,11 +500,9 @@
.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;
@@ -514,10 +514,12 @@
display: flex;
flex-direction: column;
gap: 7px;
.layer-system {
display: flex;
align-items: center;
gap: 3px;
.increase-z,
.decrease-z,
.reset {
@@ -530,13 +532,16 @@
justify-content: center;
cursor: pointer;
transition: background 0.2s;
&:hover {
background: var(--background-color-accent);
}
svg {
pointer-events: none;
}
}
.increase-z {
svg {
rotate: 180deg;
@@ -556,7 +561,7 @@
gap: 0px;
.label {
min-width: 82px;
min-width: 92px;
}
.input-container {
@@ -568,6 +573,7 @@
margin: 0;
width: 136px;
}
input[type="number"] {
margin: 0;
width: 48px;
@@ -760,6 +766,7 @@
position: fixed;
top: 80px;
right: 40px;
.appearance {
.design-datas-wrapper {
display: grid;
@@ -1125,4 +1132,4 @@
}
}
}
}
}