Refactor UI components and styles for improved layout and consistency
This commit is contained in:
parent
6f483baf8d
commit
a682d3dd1e
|
|
@ -29,13 +29,13 @@ export function DownloadIcon() {
|
|||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M2.5 11.875C2.84518 11.875 3.125 12.1548 3.125 12.5C3.125 13.6962 3.12633 14.5304 3.21096 15.1599C3.29317 15.7714 3.44354 16.0952 3.67418 16.3258C3.90481 16.5565 4.22863 16.7068 4.8401 16.7891C5.46956 16.8737 6.30383 16.875 7.5 16.875H12.5C13.6962 16.875 14.5304 16.8737 15.1599 16.7891C15.7714 16.7068 16.0952 16.5565 16.3258 16.3258C16.5565 16.0952 16.7068 15.7714 16.7891 15.1599C16.8737 14.5304 16.875 13.6962 16.875 12.5C16.875 12.1548 17.1548 11.875 17.5 11.875C17.8452 11.875 18.125 12.1548 18.125 12.5V12.5458C18.125 13.6854 18.125 14.604 18.0279 15.3265C17.9271 16.0766 17.7113 16.7081 17.2097 17.2097C16.7081 17.7113 16.0766 17.9271 15.3265 18.0279C14.604 18.125 13.6854 18.125 12.5458 18.125H7.45428C6.31462 18.125 5.39602 18.125 4.67354 18.0279C3.92345 17.9271 3.29189 17.7113 2.79029 17.2097C2.28869 16.7081 2.07295 16.0766 1.9721 15.3265C1.87497 14.604 1.87498 13.6854 1.875 12.5458C1.875 12.5305 1.875 12.5152 1.875 12.5C1.875 12.1548 2.15483 11.875 2.5 11.875Z"
|
||||
fill="#FCFDFD"
|
||||
fill="var(--primary-color)"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10.0003 13.9583C10.1758 13.9583 10.3432 13.8846 10.4616 13.7551L13.7949 10.1093C14.0278 9.8545 14.0102 9.45917 13.7554 9.22625C13.5007 8.99333 13.1053 9.011 12.8724 9.26575L10.6253 11.7235V2.5C10.6253 2.15483 10.3455 1.875 10.0003 1.875C9.65516 1.875 9.37533 2.15483 9.37533 2.5V11.7235L7.12827 9.26575C6.89535 9.011 6.50002 8.99333 6.24527 9.22625C5.99052 9.45917 5.97281 9.8545 6.20573 10.1093L9.53908 13.7551C9.65749 13.8846 9.82483 13.9583 10.0003 13.9583Z"
|
||||
fill="#FCFDFD"
|
||||
fill="var(--primary-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -52,13 +52,13 @@ export function EyeIconBig() {
|
|||
>
|
||||
<path
|
||||
d="M2.75 11.918C6.05 4.58464 15.95 4.58464 19.25 11.918"
|
||||
stroke="#2B3344"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M11 15.5859C10.6389 15.5859 10.2813 15.5148 9.94762 15.3766C9.61398 15.2384 9.31082 15.0358 9.05546 14.7805C8.80009 14.5251 8.59753 14.222 8.45933 13.8883C8.32113 13.5547 8.25 13.1971 8.25 12.8359C8.25 12.4748 8.32113 12.1172 8.45933 11.7836C8.59753 11.4499 8.80009 11.1468 9.05546 10.8914C9.31082 10.636 9.61398 10.4335 9.94762 10.2953C10.2813 10.1571 10.6389 10.0859 11 10.0859C11.7293 10.0859 12.4288 10.3757 12.9445 10.8914C13.4603 11.4071 13.75 12.1066 13.75 12.8359C13.75 13.5653 13.4603 14.2648 12.9445 14.7805C12.4288 15.2962 11.7293 15.5859 11 15.5859Z"
|
||||
stroke="#2B3344"
|
||||
stroke="var(--text-color)"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
|
@ -80,7 +80,7 @@ export function CommentsIcon() {
|
|||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M8 13C7.416 13 6.852 12.932 6.31 12.8165L3.956 14.2315L3.9875 11.912C2.183 10.827 1 9.033 1 7C1 3.6865 4.134 1 8 1C11.866 1 15 3.6865 15 7C15 10.314 11.866 13 8 13ZM8 0C3.582 0 0 3.1345 0 7C0 9.2095 1.1725 11.177 3 12.4595V16L6.5045 13.8735C6.9895 13.9535 7.4885 14 8 14C12.418 14 16 10.866 16 7C16 3.1345 12.418 0 8 0ZM11.5 5.5H4.5C4.224 5.5 4 5.724 4 6C4 6.2765 4.224 6.5 4.5 6.5H11.5C11.776 6.5 12 6.2765 12 6C12 5.724 11.776 5.5 11.5 5.5ZM10.5 8.5H5.5C5.224 8.5 5 8.7235 5 9C5 9.2765 5.224 9.5 5.5 9.5H10.5C10.776 9.5 11 9.2765 11 9C11 8.7235 10.776 8.5 10.5 8.5Z"
|
||||
fill="#2B3344"
|
||||
fill="var(--text-color)"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
|
|
@ -105,7 +105,7 @@ export function VerifiedIcon() {
|
|||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M4.7962 2.10014C4.67444 2.2039 4.61356 2.25579 4.54853 2.29937C4.39948 2.39927 4.23209 2.46861 4.05605 2.50336C3.97926 2.51853 3.89952 2.52489 3.74004 2.53761C3.33935 2.56959 3.139 2.58558 2.97186 2.64462C2.58526 2.78117 2.28117 3.08526 2.14462 3.47186C2.08558 3.639 2.06959 3.83935 2.03761 4.24004C2.02489 4.39952 2.01853 4.47926 2.00336 4.55605C1.96861 4.73209 1.89927 4.89948 1.79937 5.04853C1.75579 5.11356 1.70391 5.17444 1.60014 5.2962C1.33942 5.60215 1.20905 5.7551 1.13261 5.91505C0.955796 6.285 0.955796 6.715 1.13261 7.08495C1.20906 7.2449 1.33942 7.39785 1.60014 7.7038C1.70389 7.82555 1.75579 7.88645 1.79937 7.95145C1.89927 8.1005 1.96861 8.2679 2.00336 8.44395C2.01853 8.52075 2.02489 8.6005 2.03761 8.75995C2.06959 9.16065 2.08558 9.361 2.14462 9.52815C2.28117 9.91475 2.58526 10.2189 2.97186 10.3554C3.139 10.4144 3.33935 10.4304 3.74004 10.4624C3.89952 10.4751 3.97926 10.4815 4.05605 10.4966C4.23209 10.5314 4.39948 10.6007 4.54853 10.7007C4.61356 10.7442 4.67444 10.7961 4.7962 10.8998C5.10215 11.1606 5.2551 11.2909 5.41505 11.3674C5.785 11.5442 6.215 11.5442 6.58495 11.3674C6.7449 11.2909 6.89785 11.1606 7.2038 10.8998C7.32555 10.7961 7.38645 10.7442 7.45145 10.7007C7.6005 10.6007 7.7679 10.5314 7.94395 10.4966C8.02075 10.4815 8.1005 10.4751 8.25995 10.4624C8.66065 10.4304 8.861 10.4144 9.02815 10.3554C9.41475 10.2189 9.71885 9.91475 9.8554 9.52815C9.9144 9.361 9.9304 9.16065 9.9624 8.75995C9.9751 8.6005 9.9815 8.52075 9.99665 8.44395C10.0314 8.2679 10.1007 8.1005 10.2007 7.95145C10.2442 7.88645 10.2961 7.82555 10.3998 7.7038C10.6606 7.39785 10.7909 7.2449 10.8674 7.08495C11.0442 6.715 11.0442 6.285 10.8674 5.91505C10.7909 5.7551 10.6606 5.60215 10.3998 5.2962C10.2961 5.17444 10.2442 5.11356 10.2007 5.04853C10.1007 4.89948 10.0314 4.73209 9.99665 4.55605C9.9815 4.47926 9.9751 4.39952 9.9624 4.24004C9.9304 3.83935 9.9144 3.639 9.8554 3.47186C9.71885 3.08526 9.41475 2.78117 9.02815 2.64462C8.861 2.58558 8.66065 2.56959 8.25995 2.53761C8.1005 2.52489 8.02075 2.51853 7.94395 2.50336C7.7679 2.46861 7.6005 2.39927 7.45145 2.29937C7.38645 2.25579 7.32555 2.20391 7.2038 2.10014C6.89785 1.83942 6.7449 1.70906 6.58495 1.63261C6.215 1.4558 5.785 1.4558 5.41505 1.63261C5.2551 1.70905 5.10215 1.83942 4.7962 2.10014ZM8.18675 5.43157C8.34565 5.27265 8.34565 5.015 8.18675 4.85608C8.02785 4.69717 7.77015 4.69717 7.61125 4.85608L5.18615 7.2812L4.38873 6.4838C4.22982 6.3249 3.97216 6.3249 3.81325 6.4838C3.65433 6.6427 3.65433 6.90035 3.81325 7.0593L4.89839 8.14445C5.0573 8.30335 5.31495 8.30335 5.4739 8.14445L8.18675 5.43157Z"
|
||||
fill="#6F42C1"
|
||||
fill="var(--accent-color)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -40,7 +40,6 @@ const GlobalProperties: React.FC = () => {
|
|||
}
|
||||
|
||||
function updateDistance(value: number) {
|
||||
console.log("value: ", value);
|
||||
setDistance(value);
|
||||
setRenderDistance(value);
|
||||
}
|
||||
|
|
@ -61,7 +60,7 @@ const GlobalProperties: React.FC = () => {
|
|||
!roofVisibility,
|
||||
shadows
|
||||
);
|
||||
// console.log('data: ', data);
|
||||
//
|
||||
|
||||
//using Socket
|
||||
// const visData = {
|
||||
|
|
@ -88,7 +87,7 @@ const GlobalProperties: React.FC = () => {
|
|||
roofVisibility,
|
||||
shadows
|
||||
);
|
||||
// console.log('data: ', data);
|
||||
//
|
||||
|
||||
//using Socket
|
||||
// const visData = {
|
||||
|
|
@ -115,7 +114,7 @@ const GlobalProperties: React.FC = () => {
|
|||
roofVisibility,
|
||||
!shadows
|
||||
);
|
||||
// console.log('data: ', data);
|
||||
//
|
||||
|
||||
//using Socket
|
||||
// const visData = {
|
||||
|
|
|
|||
|
|
@ -20,21 +20,31 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
{activeEdges.vertical === "top" && typeof obj.position.top === "number" && (
|
||||
<div
|
||||
className="distance-line top"
|
||||
style={{
|
||||
top: 0,
|
||||
left:
|
||||
activeEdges.horizontal === "left"
|
||||
? `${(obj.position.left as number) + 125}px`
|
||||
: `calc(100% - ${(obj.position.right as number) + 125}px)`,
|
||||
height: `${obj.position.top}px`,
|
||||
}}
|
||||
>
|
||||
<span className="distance-label">{obj.position.top.toFixed()}px</span>
|
||||
</div>
|
||||
)}
|
||||
{activeEdges.vertical === "top" &&
|
||||
typeof obj.position.top === "number" && (
|
||||
<div
|
||||
className="distance-line top"
|
||||
style={{
|
||||
top: 0,
|
||||
left:
|
||||
activeEdges.horizontal === "left"
|
||||
? `${(obj.position.left as number) + 125}px`
|
||||
: `calc(100% - ${(obj.position.right as number) + 125}px)`,
|
||||
height: `${obj.position.top}px`,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="distance-label"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
transform: "translate(-50%,0%)",
|
||||
}}
|
||||
>
|
||||
{obj.position.top}px
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeEdges.vertical === "bottom" &&
|
||||
typeof obj.position.bottom === "number" && (
|
||||
|
|
@ -49,7 +59,16 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
|
|||
height: `${obj.position.bottom}px`,
|
||||
}}
|
||||
>
|
||||
<span className="distance-label">{obj.position.bottom.toFixed()}px</span>
|
||||
<span
|
||||
className="distance-label"
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: "50%",
|
||||
transform: "translate(-50%,0%)",
|
||||
}}
|
||||
>
|
||||
{obj.position.bottom}px
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -66,7 +85,16 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
|
|||
width: `${obj.position.left}px`,
|
||||
}}
|
||||
>
|
||||
<span className="distance-label">{obj.position.left.toFixed()}px</span>
|
||||
<span
|
||||
className="distance-label"
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: "50%",
|
||||
transform: "translate(0,-50%)",
|
||||
}}
|
||||
>
|
||||
{obj.position.left}px
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -83,11 +111,20 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
|
|||
width: `${obj.position.right}px`,
|
||||
}}
|
||||
>
|
||||
<span className="distance-label">{obj.position.right.toFixed()}px</span>
|
||||
<span
|
||||
className="distance-label"
|
||||
style={{
|
||||
position: "absolute",
|
||||
right: "50%",
|
||||
transform: "translate(0,-50%)",
|
||||
}}
|
||||
>
|
||||
{obj.position.right}px
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DistanceLines;
|
||||
export default DistanceLines;
|
||||
|
|
|
|||
|
|
@ -386,7 +386,6 @@ const DroppedObjects: React.FC = () => {
|
|||
<FleetEfficiencyComponent object={obj} />
|
||||
</>
|
||||
) : null}
|
||||
{renderObjectContent(obj)}
|
||||
<div
|
||||
className="icon kebab"
|
||||
onClick={(event) => handleKebabClick(obj.id, event)}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useMemo } from "react";
|
||||
import { Canvas } from "@react-three/fiber";
|
||||
import { Environment, KeyboardControls } from "@react-three/drei";
|
||||
import { Environment, KeyboardControls, Stars } from "@react-three/drei";
|
||||
|
||||
import World from "./world/world";
|
||||
import Controls from "./controls/controls";
|
||||
|
|
@ -50,7 +50,11 @@ export default function Scene() {
|
|||
<ZoneCentreTarget />
|
||||
<Simulation />
|
||||
<PostProcessing />
|
||||
{savedTheme !== "dark" && <Sun />}
|
||||
{savedTheme !== "dark" ? (
|
||||
<Sun />
|
||||
) : (
|
||||
<Stars speed={1} count={500} radius={300} />
|
||||
)}
|
||||
<Shadows />
|
||||
<CamModelsGroup />
|
||||
<MqttEvents />
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
--border-color: #{$border-color-dark}; // Border color for dark theme
|
||||
|
||||
// Shadow variables
|
||||
--shadow-main-dark: #{$shadow-color-dark}; // Main shadow color
|
||||
--shadow-main-dark: #{$shadow-color}; // Main shadow color
|
||||
--box-shadow-light: 0px 2px 4px var(--shadow-main-dark); // Light shadow
|
||||
--box-shadow-medium: 0px 4px 8px var(--shadow-main-dark); // Medium shadow
|
||||
--box-shadow-heavy: 0px 8px 16px var(--shadow-main-dark); // Heavy shadow
|
||||
|
|
@ -75,6 +75,7 @@
|
|||
height: 100vh; // Full viewport height
|
||||
width: 100vw; // Full viewport width
|
||||
overflow: hidden; // Prevent scrollbars
|
||||
background-color: #232323;
|
||||
}
|
||||
|
||||
// Root overlay styles
|
||||
|
|
@ -123,7 +124,7 @@ body {
|
|||
/* Scrollbar handle color */
|
||||
border-radius: 4px;
|
||||
/* Rounded corners */
|
||||
border: 2px solid #f4f4f4;
|
||||
border: 2px solid var(--primary-color);
|
||||
/* Padding around the scrollbar handle */
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ input {
|
|||
border: 1px solid var(--border-color);
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: var(--input-text-color);
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
|
|
@ -552,6 +553,11 @@ input {
|
|||
.input-value {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
&::-webkit-inner-spin-button,
|
||||
&::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,9 +26,6 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
left: calc(120px / 2);
|
||||
top: 100px;
|
||||
padding: 14px;
|
||||
padding-bottom: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -39,6 +36,8 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 2px;
|
||||
padding: 0 24px;
|
||||
|
||||
.search-wrapper {
|
||||
min-width: 60%;
|
||||
|
|
@ -143,6 +142,7 @@
|
|||
.assets-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
|
||||
.name-container {
|
||||
display: flex;
|
||||
|
|
@ -177,6 +177,9 @@
|
|||
}
|
||||
|
||||
.vendor-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-weight: #{$bold-weight};
|
||||
font-size: $regular;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
// Main Container
|
||||
.realTime-viz {
|
||||
background-color: var(--background-color);
|
||||
background-color: #131313;
|
||||
border-radius: 20px;
|
||||
box-shadow: $box-shadow-medium;
|
||||
width: calc(100% - (320px + 270px + 90px));
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
min-height: 83px;
|
||||
background: var(--background-color);
|
||||
border: 1.23px solid var(--border-color);
|
||||
box-shadow: var(--box-shadow-heavy);
|
||||
box-shadow: 0px 4.91px 4.91px 0px #0000001c;
|
||||
border-radius: $border-radius-medium;
|
||||
padding: 18px;
|
||||
position: absolute;
|
||||
|
|
@ -31,7 +31,6 @@
|
|||
|
||||
.scene-container {
|
||||
overflow: hidden;
|
||||
background: #232323;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
@ -192,11 +191,11 @@
|
|||
height: 25% !important;
|
||||
min-height: 150px;
|
||||
max-height: 100%;
|
||||
border: 1px dashed #a9a9a9;
|
||||
// border: 1px dashed var(--background-color-gray);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 2px 6px 0px rgba(60, 60, 67, 0.1);
|
||||
box-shadow: var(--box-shadow-medium);
|
||||
padding: 6px 0;
|
||||
background-color: white;
|
||||
background-color: var(--background-color);
|
||||
position: relative;
|
||||
|
||||
.kebab {
|
||||
|
|
@ -534,7 +533,7 @@
|
|||
|
||||
.zone {
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid var(--highlight-accent-color);
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -614,10 +613,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.distance-line {
|
||||
position: absolute;
|
||||
border-style: dashed;
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
}
|
||||
|
||||
.error-message {
|
||||
color: #ff4d4f;
|
||||
color: #f3453f;
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
border-radius: #{$border-radius-extra-large};
|
||||
background: var(--background-color);
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
color: var(--input-text-color);
|
||||
|
||||
&:focus {
|
||||
border-color: var(--accent-color);
|
||||
|
|
|
|||
|
|
@ -202,7 +202,7 @@ export const thirdPersonControls: ThirdPersonControls = {
|
|||
maxDistance: 100, // Maximum distance from the target
|
||||
maxPolarAngle: Math.PI / 2 - 0.05, // Maximum polar angle
|
||||
minZoom: 6, // Minimum zoom level
|
||||
maxZoom: 21, // Maximum zoom level
|
||||
maxZoom: 100, // Maximum zoom level
|
||||
targetOffset: 20, // Offset of the target from the camera
|
||||
cameraHeight: 30, // Height of the camera
|
||||
leftMouse: 2, // Mouse button for panning
|
||||
|
|
|
|||
Loading…
Reference in New Issue