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

refactor: replace div elements with buttons for side selection in WallProperties; improve material preview layout

This commit is contained in:
Nalvazhuthi 2025-06-12 10:39:26 +05:30
parent e8db8e2f8a 845fd5f3c7
commit 752ba96ba8
2 changed files with 156 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/src/components/layout/sidebarRight/properties/eventProperties/WallProperties.tsx
View File

@ -119,7 +119,7 @@ const WallProperties = () => {
<div className="material-preview">
<div className="sides-wrapper">
<div
<button
className={`side-wrapper ${activeSide === "side1" ? "active" : ""
}`}
onClick={() => setActiveSide("side1")}
@ -128,14 +128,15 @@ const WallProperties = () => {
<div className="texture-image">
{selectedMaterials.side1 && (
<img
draggable={false}
src={selectedMaterials.side1.texture}
alt={selectedMaterials.side1.textureName}
/>
)}
</div>
</div>
</button>
<div
<button
className={`side-wrapper ${activeSide === "side2" ? "active" : ""
}`}
onClick={() => setActiveSide("side2")}
@ -144,17 +145,19 @@ const WallProperties = () => {
<div className="texture-image">
{selectedMaterials.side2 && (
<img
draggable={false}
src={selectedMaterials.side2.texture}
alt={selectedMaterials.side2.textureName}
/>
)}
</div>
</div>
</button>
</div>
<div className="preview">
{selectedMaterials[activeSide] && (
<img
draggable={false}
src={selectedMaterials[activeSide]!.texture}
alt={selectedMaterials[activeSide]!.textureName}
/>
@ -168,18 +171,22 @@ const WallProperties = () => {
) : (
<div className="material-container">
{materials.map((material, index) => (
<div
<button
className="material-wrapper"
key={`${material.textureName}_${index}`}
onClick={() => handleSelectMaterial(material)}
>
<div className="material-property">
<div className="material-image">
<img src={material.texture} alt={material.textureName} />
<img
draggable={false}
src={material.texture}
alt={material.textureName}
/>
</div>
<div className="material-name">{material.textureName}</div>
</div>
<div
<button
className="delete-material"
onClick={(e) => {
e.stopPropagation();
@ -187,8 +194,8 @@ const WallProperties = () => {
}}
>
<RemoveIcon />
</div>
</div>
</button>
</button>
))}
</div>
)}

140
app/src/styles/layout/sidebar.scss
View File

@ -1114,6 +1114,7 @@
input {
padding: 5px 4px;
text-align: center;
}
.dropdown {
@ -1527,6 +1528,7 @@
.header {
@include flex-space-between;
border: none;
.eyedrop-button {
@include flex-center;
}
@ -1534,6 +1536,7 @@
.inputs-container {
@include flex-space-between;
.input-container {
padding: 0 4px;
gap: 6px;
@ -1652,6 +1655,143 @@
}
}
.sidebar-right-wrapper {
.wall-properties-container {
.header {
color: var(--background-color-button);
}
.wall-properties {
padding: 12px 0;
.value-field-container {
padding: 0;
.input {
input {
text-align: center;
}
}
}
}
section {
padding: 0;
margin: 0;
max-height: 50vh;
.header-wrapper {
display: flex;
justify-content: space-between;
padding: 12px;
}
.material-preview {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
background: var(--Grays-Gray-6, #F2F2F7);
padding: 18px 25px;
.sides-wrapper {
display: flex;
justify-content: space-between;
width: 100%;
background-color: #FCFDFD;
border-radius: 4px;
overflow: hidden;
.side-wrapper {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 8px 0;
cursor: pointer;
.label {
color: var(--background-color-button);
}
&.active {
background-color: #E0DFFF;
}
.texture-image {
width: 20px;
height: 20px;
border-radius: 50%;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
}
.preview {
width: 90%;
// width: 100%;
height: 111px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.materials {
padding: 6px 12px;
max-height: 250px;
overflow: auto;
.material-container {
display: flex;
flex-direction: column;
gap: 6px;
.material-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
.material-property {
display: flex;
align-items: center;
gap: 6px;
.material-image {
width: 30px;
height: 30px;
border-radius: 6px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.delete-material {
cursor: pointer;
}
}
}
}
}
}
}
.assets-container-main {
width: 100%;
display: flex;