feat: Enhance duplication and movement controls with axis constraints and snapping functionality
- Added axis constraint toggling for duplication and movement controls (X and Z axes). - Implemented snapping functionality for asset positioning based on modifier keys (Ctrl, Shift). - Created utility functions for handling asset position and rotation snapping. - Refactored moveControls3D and rotateControls3D to utilize new snapping functions. - Introduced state management for key events and axis constraints. - Updated styles for new UI components related to asset filtering and transformation. - Removed deprecated snapControls utility function.
This commit is contained in:
Nalvazhuthi
251
app/src/styles/layout/hrm.scss
Normal file
251
app/src/styles/layout/hrm.scss
Normal file
@@ -0,0 +1,251 @@
|
||||
@use "../abstracts/variables" as *;
|
||||
@use "../abstracts/mixins" as *;
|
||||
|
||||
.hrm-container {
|
||||
|
||||
|
||||
.navigation-wrapper {
|
||||
@include flex-space-between;
|
||||
justify-content: space-around;
|
||||
|
||||
.navigation {
|
||||
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
text-wrap: nowrap;
|
||||
margin: 6px 0;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background: var(--background-color-button);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.search-container {
|
||||
position: relative;
|
||||
padding: 2px 2px;
|
||||
|
||||
.search-wrapper {
|
||||
input {
|
||||
padding-right: 85px;
|
||||
}
|
||||
}
|
||||
|
||||
.select-catagory {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 16px;
|
||||
transform: translate(0, -50%);
|
||||
z-index: 10;
|
||||
|
||||
.regularDropdown-container {
|
||||
padding: 2px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.catagories-wrapper {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
padding: 8px 10px;
|
||||
|
||||
.catagory {
|
||||
text-wrap: nowrap;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
border-radius: 100px;
|
||||
background: var(--background-color-button);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.analysis-container {
|
||||
max-height: calc(62vh - 12px);
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-top: 7px;
|
||||
|
||||
.analysis-wrapper {
|
||||
border: 1px solid var(--Color-Hover, #CCACFF);
|
||||
border-radius: 20px;
|
||||
padding: 16px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
@include flex-space-between;
|
||||
padding: 3px 0;
|
||||
|
||||
.user-details {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
|
||||
.user-image-wrapper {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
|
||||
.status {
|
||||
border-radius: 50%;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
outline: 1px solid #2F2C32;
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
&.Active {
|
||||
background-color: #44E5C6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
.employee-id {
|
||||
color: #B7B7C6;
|
||||
font-size: $tiny;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.see-more {
|
||||
color: var(--accent-color);
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -7px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #6F6F7A;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
.task-info {
|
||||
padding: 8px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
|
||||
.task-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.task-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
|
||||
.label-text {
|
||||
color: #B7B7C6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr); // Two equal-width columns
|
||||
gap: 4px;
|
||||
|
||||
.stat-item {
|
||||
border-radius: 100px;
|
||||
@include flex-space-between;
|
||||
background: linear-gradient(162.53deg,
|
||||
rgba(51, 51, 51, 0.7) 0%,
|
||||
rgba(45, 36, 55, 0.7) 106.84%);
|
||||
border: 1px solid #FFFFFF0D;
|
||||
padding: 6px;
|
||||
|
||||
.stat-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
span,
|
||||
.stat-value {
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.location-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 6px 0;
|
||||
|
||||
.location-header {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: 12px;
|
||||
color: #B7B7C6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr); // Two equal-width columns
|
||||
gap: 4px;
|
||||
margin-top: 3px;
|
||||
|
||||
button {
|
||||
line-height: 133%;
|
||||
font-size: 11px;
|
||||
border: 1px solid var(--Linear-Border, #564B69);
|
||||
border-radius: 100px;
|
||||
padding: 4px 0;
|
||||
|
||||
&:last-child {
|
||||
background-color: #CC2C1E;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -468,6 +468,96 @@
|
||||
position: relative;
|
||||
width: 304px;
|
||||
|
||||
.decal-transformation-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
.transformation-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 6px 12px;
|
||||
|
||||
.header {
|
||||
flex: 1;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.input-wrapppers {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex: 1.5;
|
||||
|
||||
svg {
|
||||
stroke: #CCACFF;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
input {
|
||||
min-width: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
.layers {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
outline: 1px solid var(--border-color);
|
||||
padding: 4px 16px;
|
||||
width: 50px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.opacity {
|
||||
input {
|
||||
min-width: 190px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
border-radius: 20px;
|
||||
outline: 1px solid var(--border-color);
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.replace-btn {
|
||||
background-color: #6F42C1;
|
||||
border-radius: 100px;
|
||||
color: #FFFFFF;
|
||||
padding: 4px 16px;
|
||||
width: fit-content;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
text-transform: capitalize;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.version-history-container {
|
||||
max-height: calc(62vh - 12px);
|
||||
display: flex;
|
||||
@@ -1978,6 +2068,43 @@
|
||||
}
|
||||
}
|
||||
|
||||
.catogory-asset-filter {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
border: 1px solid #564B69;
|
||||
padding: 12px 10px;
|
||||
border-radius: 15px;
|
||||
|
||||
.catogory-asset-filter-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
border: 1px solid #564B69;
|
||||
padding: 4px 8px;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
|
||||
.sub-catagory {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #6F42C1;
|
||||
|
||||
.sub-catagory {
|
||||
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
// svg {
|
||||
// stroke: white;
|
||||
// fill: white;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.assets-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
@@ -37,6 +37,7 @@
|
||||
@use "layout/skeleton";
|
||||
@use "layout/compareLayoutPopUp";
|
||||
@use "layout/compareLayout";
|
||||
@use "layout/hrm";
|
||||
|
||||
// pages
|
||||
@use "pages/dashboard";
|
||||
|
||||
@@ -95,6 +95,18 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.resend {
|
||||
span {
|
||||
color: var(--highlight-text-color);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
span {
|
||||
color: var(--text-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -134,3 +134,11 @@
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.stats{
|
||||
top: auto !important;
|
||||
bottom: 36px !important;
|
||||
left: 12px !important;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user