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

updated realTime vis panel smooth transition

Browse Source
This commit is contained in:
Nalvazhuthi
2025-04-30 18:20:36 +05:30
parent 9829899aec
commit 6a51fbca61
12 changed files with 369 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
app/src/styles/components/analysis/ROISummary.scss
View File

@@ -239,25 +239,25 @@
height: 125px;
overflow-y: hidden;
position: relative;
.semi-circle {
width: 100%;
height: 250px;
border-radius: 50%;
position: relative;
transition: background 0.5s ease;
}
.progress-cover {
position: absolute;
width: 75%;
height: 75%;
top: 12.5%;
left: 12.5%;
background: #000000cc;
border-radius: 50%;
}
}
.semi-circle {
width: 100%;
height: 250px;
border-radius: 50%;
position: relative;
transition: background 0.5s ease;
}
.progress-cover {
position: absolute;
width: 75%;
height: 75%;
top: 12.5%;
left: 12.5%;
background-color: var(--background-color);
border-radius: 50%;
}
.label-wrapper {
.label {
@@ -305,14 +305,7 @@
text-align: left;
}
.total-row {
background-color: #f4f4f4;
font-weight: bold;
}
.net-profit-row {
background-color: #dff0d8;
font-weight: bold;
}
}
}

6
app/src/styles/components/analysis/analysis.scss
View File

@@ -7,7 +7,7 @@
align-items: start;
width: 100%;
height: 100vh;
// pointer-events: none;k
// pointer-events: none;
z-index: 10000;
.analysis-wrapper {
@@ -25,6 +25,7 @@
padding: 8px;
.analysis-card-wrapper {
width: 100%;
background: var(--background-color);
border-radius: 14px;
padding: 16px;
@@ -66,7 +67,8 @@
.progress-bar {
position: relative;
width: 36px;
// width: 36px;
width: 100%;
height: 4px;
border-radius: 13px;
overflow: hidden;

46
app/src/styles/components/simulation/simulation.scss
View File

@@ -10,7 +10,7 @@
width: 70%;
.simulation-player-container {
background-color: var(--background-color);
background: var(--background-color);
padding: 7px;
border-radius: 15px;
display: flex;
@@ -18,7 +18,10 @@
gap: 8px;
.progresser-wrapper {
background-color: var(--highlight-accent-color);
outline: 1px solid var(--border-color);
background: var(--background-color);
// background-color: var(--highlight-accent-color);
padding: 4px 5px;
border-radius: 12px;
display: flex;
@@ -61,7 +64,8 @@
height: 8px;
border-radius: 5px;
// overflow: hidden;
background-color: var(--highlight-accent-color);
outline: 1px solid var(--border-color);
background: var(--background-color);
.progress {
border-radius: 5px;
@@ -82,7 +86,8 @@
cursor: pointer;
&:hover {
background: var(--highlight-accent-color);
outline: 1px solid var(--border-color);
background: var(--background-color);
color: var(--accent-color);
path {
@@ -94,7 +99,7 @@
.speed-control-container {
@include flex-center;
gap: 18px;
gap: 32px;
padding: 5px 16px;
// background: var(--background-color);
border-radius: #{$border-radius-medium};
@@ -122,7 +127,8 @@
.speed-label {
font-size: var(--font-size-tiny);
position: absolute;
bottom: -4px;
bottom: -7px;
transform: translate(-50%, -0%);
&:first-child {
left: 0;
@@ -171,13 +177,14 @@
z-index: 2;
}
}
.marker{
position: absolute;
background-color: var(--text-disabled);
width: 2px;
height: 12px;
border-radius: 1px;
top: 8px;
.marker {
position: absolute;
background-color: var(--text-disabled);
width: 2px;
height: 12px;
border-radius: 1px;
top: 8px;
}
.marker.marker-10 {
@@ -239,9 +246,8 @@
.timeline {
padding: 16px;
// background: #f5f3fa;
background: linear-gradient(90.17deg, rgba(255, 255, 255, 0.64) 1.53%, rgba(255, 255, 255, 0.48) 98.13%);
outline: 1px solid var(--border-color);
background: var(--background-color);
border-radius: 30px;
display: flex;
align-items: center;
@@ -271,9 +277,8 @@
background-color: #d3d3e2;
&.filled {
background-color: #8f5cf2;
border: 4px solid var(--accent-color);
background-color: var(--accent-color);
border: 4px solid #8f5cf2;
}
}
}
@@ -302,7 +307,8 @@
.processDisplayer {
border-radius: 5px;
// overflow: hidden;
background-color: var(--highlight-accent-color);
outline: 1px solid var(--border-color);
background: var(--background-color);
padding: 14px 6px;
position: relative;

192
app/src/styles/pages/realTimeViz.scss
View File

@@ -78,7 +78,7 @@
min-width: 150px;
z-index: 3;
transform: translate(-50%, -10%);
transition: transform 0.5s linear;
&::-webkit-scrollbar {
display: none;
}
@@ -183,8 +183,8 @@
.panel {
position: absolute;
background: var(--background-color);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
// background: var(--background-color);
// box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border-radius: 6px;
overflow: auto;
@@ -203,7 +203,7 @@
display: flex;
flex-direction: column;
gap: 6px;
background: var(--background-color);
// background: var(--background-color);
&::-webkit-scrollbar {
display: none;
@@ -383,6 +383,10 @@
transition: transform 0.3s ease;
box-shadow: #{$box-shadow-medium};
svg {
stroke: var(--icon-default-color) !important;
}
.extra-Bs {
display: flex;
align-items: center;
@@ -422,6 +426,7 @@
.add-icon {
@include flex-center;
transition: rotate 0.2s;
}
path {
@@ -440,6 +445,8 @@
stroke: #f65648;
stroke-width: 2;
}
}
}
@@ -662,7 +669,7 @@
}
.distance-line {
position: absolute;
border-style: dashed;
border-color: var(--accent-color);
@@ -801,4 +808,179 @@
}
}
}
}
.panel-content {
background: var(--background-color);
}
/* RIGHT */
.panel-content.right-opening {
animation: rightExpand 0.5s ease-in-out forwards;
transform-origin: right;
}
@keyframes rightExpand {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.panel-content.right-closing {
animation: rightCollapse 0.5s ease-in-out forwards;
transform-origin: right;
}
@keyframes rightCollapse {
from {
transform: scaleX(1);
}
to {
transform: scaleX(0);
}
}
/* LEFT */
.panel-content.left-opening {
animation: leftExpand 0.5s ease-in-out forwards;
transform-origin: left;
}
@keyframes leftExpand {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.left-closing {
animation: leftCollapse 0.5s ease-in-out forwards;
transform-origin: left;
}
@keyframes leftCollapse {
from {
transform: scaleX(1);
}
to {
transform: scaleX(0);
}
}
/* TOP */
.panel-content.top-opening {
animation: topExpand 0.5s ease-in-out forwards;
transform-origin: top;
}
@keyframes topExpand {
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
}
.top-closing {
animation: topCollapse 0.5s ease-in-out forwards;
transform-origin: top;
}
@keyframes topCollapse {
from {
transform: scaleY(1);
}
to {
transform: scaleY(0);
}
}
/* BOTTOM */
.panel-content.bottom-opening {
animation: bottomExpand 0.5s ease-in-out forwards;
transform-origin: bottom;
}
@keyframes bottomExpand {
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
}
.bottom-closing {
animation: bottomCollapse 0.5s ease-in-out forwards;
transform-origin: bottom;
}
@keyframes bottomCollapse {
from {
transform: scaleY(1);
}
to {
transform: scaleY(0);
}
}
// Add button
.extra-Bs {}
.extra-Bs-addopening {
animation: slideDown 0.3s ease forwards;
}
.extra-Bs-addclosing {
animation: slideUp 0.3s ease forwards;
}
@keyframes slideDown {
from {
opacity: 0;
transform: scaleY(0);
}
to {
opacity: 1;
transform: scaleY(1);
}
}
@keyframes slideUp {
from {
opacity: 1;
transform: scaleY(1);
}
to {
opacity: 0;
transform: scaleY(0);
}
}