refactor: Update dropdown items to include active state, enhance List and DropDownList components, and improve sidebar styles for better layout and accessibility
This commit is contained in:
parent
5297717123
commit
4152e611a9
app/src
components
styles
|
@ -11,7 +11,7 @@ const Outline: React.FC = () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const dropdownItems = [
|
const dropdownItems = [
|
||||||
{ id: "1", name: "Ground Floor" },
|
{ id: "1", name: "Ground Floor", active: true },
|
||||||
// { id: "2", name: "Floor 1" },
|
// { id: "2", name: "Floor 1" },
|
||||||
]; // Example dropdown items
|
]; // Example dropdown items
|
||||||
|
|
||||||
|
|
|
@ -3,7 +3,6 @@ import List from "./List";
|
||||||
import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
|
import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
|
||||||
import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
|
import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
|
||||||
import { useFloorItems, useZones } from "../../../store/store";
|
import { useFloorItems, useZones } from "../../../store/store";
|
||||||
import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
|
|
||||||
|
|
||||||
interface DropDownListProps {
|
interface DropDownListProps {
|
||||||
value?: string; // Value to display in the DropDownList
|
value?: string; // Value to display in the DropDownList
|
||||||
|
@ -17,6 +16,17 @@ interface DropDownListProps {
|
||||||
remove?: boolean;
|
remove?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface Zone {
|
||||||
|
zoneId: string;
|
||||||
|
zoneName: string;
|
||||||
|
points: [number, number, number][]; // polygon vertices
|
||||||
|
}
|
||||||
|
interface ZoneData {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
assets: { id: string; name: string; position?: []; rotation?: {} }[];
|
||||||
|
}
|
||||||
|
|
||||||
const DropDownList: React.FC<DropDownListProps> = ({
|
const DropDownList: React.FC<DropDownListProps> = ({
|
||||||
value = "Dropdown",
|
value = "Dropdown",
|
||||||
items = [],
|
items = [],
|
||||||
|
@ -33,38 +43,30 @@ const DropDownList: React.FC<DropDownListProps> = ({
|
||||||
remove,
|
remove,
|
||||||
}) => {
|
}) => {
|
||||||
const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
|
const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
|
||||||
const { zones, setZones } = useZones();
|
const { zones } = useZones();
|
||||||
|
|
||||||
const handleToggle = () => {
|
const handleToggle = () => {
|
||||||
setIsOpen((prev) => !prev); // Toggle the state
|
setIsOpen((prev) => !prev); // Toggle the state
|
||||||
};
|
};
|
||||||
interface Asset {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
position: [number, number, number]; // x, y, z
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Zone {
|
|
||||||
zoneId: string;
|
|
||||||
zoneName: string;
|
|
||||||
points: [number, number, number][]; // polygon vertices
|
|
||||||
}
|
|
||||||
interface ZoneData {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
assets: { id: string; name: string; position?: []; rotation?: {} }[];
|
|
||||||
}
|
|
||||||
const [zoneDataList, setZoneDataList] = useState<ZoneData[]>([]);
|
const [zoneDataList, setZoneDataList] = useState<ZoneData[]>([]);
|
||||||
const { floorItems } = useFloorItems();
|
const { floorItems } = useFloorItems();
|
||||||
|
|
||||||
const isPointInsidePolygon = (point: [number, number], polygon: [number, number][]) => {
|
const isPointInsidePolygon = (
|
||||||
|
point: [number, number],
|
||||||
|
polygon: [number, number][]
|
||||||
|
) => {
|
||||||
let inside = false;
|
let inside = false;
|
||||||
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
|
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
|
||||||
const xi = polygon[i][0], zi = polygon[i][1];
|
const xi = polygon[i][0],
|
||||||
const xj = polygon[j][0], zj = polygon[j][1];
|
zi = polygon[i][1];
|
||||||
|
const xj = polygon[j][0],
|
||||||
|
zj = polygon[j][1];
|
||||||
|
|
||||||
const intersect = ((zi > point[1]) !== (zj > point[1])) &&
|
const intersect =
|
||||||
(point[0] < (xj - xi) * (point[1] - zi) / (zj - zi + 0.000001) + xi);
|
// eslint-disable-next-line no-mixed-operators
|
||||||
|
zi > point[1] !== zj > point[1] &&
|
||||||
|
point[0] < ((xj - xi) * (point[1] - zi)) / (zj - zi + 0.000001) + xi;
|
||||||
|
|
||||||
if (intersect) inside = !inside;
|
if (intersect) inside = !inside;
|
||||||
}
|
}
|
||||||
|
@ -73,18 +75,21 @@ const DropDownList: React.FC<DropDownListProps> = ({
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const updatedZoneList: ZoneData[] = zones?.map((zone: Zone) => {
|
const updatedZoneList: ZoneData[] = zones?.map((zone: Zone) => {
|
||||||
const polygon2D = zone.points.map((p: [number, number, number]) => [p[0], p[2]]) as [number, number][];
|
const polygon2D = zone.points.map((p: [number, number, number]) => [
|
||||||
|
p[0],
|
||||||
|
p[2],
|
||||||
|
]);
|
||||||
|
|
||||||
const assetsInZone = floorItems
|
const assetsInZone = floorItems
|
||||||
.filter((item: any) => {
|
.filter((item: any) => {
|
||||||
const [x, , z] = item.position;
|
const [x, , z] = item.position;
|
||||||
return isPointInsidePolygon([x, z], polygon2D);
|
return isPointInsidePolygon([x, z], polygon2D as [number, number][]);
|
||||||
})
|
})
|
||||||
.map((item: any) => ({
|
.map((item: any) => ({
|
||||||
id: item.modeluuid,
|
id: item.modeluuid,
|
||||||
name: item.modelname,
|
name: item.modelname,
|
||||||
position: item.position,
|
position: item.position,
|
||||||
rotation: item.rotation
|
rotation: item.rotation,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
@ -99,9 +104,9 @@ const DropDownList: React.FC<DropDownListProps> = ({
|
||||||
return (
|
return (
|
||||||
<div className="dropdown-list-container">
|
<div className="dropdown-list-container">
|
||||||
<div className="head">
|
<div className="head">
|
||||||
<div className="value" onClick={handleToggle}>
|
<button className="value" onClick={handleToggle}>
|
||||||
{value}
|
{value}
|
||||||
</div>
|
</button>
|
||||||
<div className="options">
|
<div className="options">
|
||||||
{showFocusIcon && (
|
{showFocusIcon && (
|
||||||
<div className="focus option">
|
<div className="focus option">
|
||||||
|
@ -118,13 +123,13 @@ const DropDownList: React.FC<DropDownListProps> = ({
|
||||||
<KebabMenuListMultiSelect items={kebabMenuItems} />
|
<KebabMenuListMultiSelect items={kebabMenuItems} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div
|
<button
|
||||||
className="collapse-icon option"
|
className="collapse-icon option"
|
||||||
style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}
|
style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}
|
||||||
onClick={handleToggle}
|
onClick={handleToggle}
|
||||||
>
|
>
|
||||||
<ArrowIcon />
|
<ArrowIcon />
|
||||||
</div>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{isOpen && (
|
{isOpen && (
|
||||||
|
|
|
@ -12,7 +12,6 @@ import {
|
||||||
LockIcon,
|
LockIcon,
|
||||||
RemoveIcon,
|
RemoveIcon,
|
||||||
} from "../../icons/ExportCommonIcons";
|
} from "../../icons/ExportCommonIcons";
|
||||||
import { useThree } from "@react-three/fiber";
|
|
||||||
import { useFloorItems, useZoneAssetId, useZones } from "../../../store/store";
|
import { useFloorItems, useZoneAssetId, useZones } from "../../../store/store";
|
||||||
import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation";
|
import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation";
|
||||||
import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
|
import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
|
||||||
|
@ -32,20 +31,19 @@ interface ZoneItem {
|
||||||
|
|
||||||
interface ListProps {
|
interface ListProps {
|
||||||
items?: ZoneItem[];
|
items?: ZoneItem[];
|
||||||
placeholder?: string;
|
|
||||||
remove?: boolean;
|
remove?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
||||||
const { activeModule, setActiveModule } = useModuleStore();
|
const { activeModule } = useModuleStore();
|
||||||
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
||||||
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
|
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
|
||||||
const { zones, setZones } = useZones();
|
const { zones } = useZones();
|
||||||
const { setSubModule } = useSubModuleStore();
|
const { setSubModule } = useSubModuleStore();
|
||||||
const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
|
const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
const { floorItems, setFloorItems } = useFloorItems();
|
const { setFloorItems } = useFloorItems();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
useSelectedZoneStore.getState().setSelectedZone({
|
useSelectedZoneStore.getState().setSelectedZone({
|
||||||
|
@ -70,39 +68,36 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
||||||
async function handleSelectZone(id: string) {
|
async function handleSelectZone(id: string) {
|
||||||
try {
|
try {
|
||||||
if (selectedZone?.zoneId === id) {
|
if (selectedZone?.zoneId === id) {
|
||||||
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
setSubModule("zoneProperties");
|
setSubModule("zoneProperties");
|
||||||
|
|
||||||
const email = localStorage.getItem("email");
|
const email = localStorage.getItem("email");
|
||||||
const organization = email?.split("@")[1]?.split(".")[0] || "";
|
const organization = email?.split("@")[1]?.split(".")[0] ?? "";
|
||||||
|
|
||||||
let response = await getZoneData(id, organization);
|
let response = await getZoneData(id, organization);
|
||||||
|
|
||||||
setSelectedZone({
|
setSelectedZone({
|
||||||
zoneName: response?.zoneName,
|
zoneName: response?.zoneName,
|
||||||
activeSides: response?.activeSides || [],
|
activeSides: response?.activeSides ?? [],
|
||||||
panelOrder: response?.panelOrder || [],
|
panelOrder: response?.panelOrder ?? [],
|
||||||
lockedPanels: response?.lockedPanels || [],
|
lockedPanels: response?.lockedPanels ?? [],
|
||||||
widgets: response?.widgets || [],
|
widgets: response?.widgets ?? [],
|
||||||
zoneId: response?.zoneId,
|
zoneId: response?.zoneId,
|
||||||
zoneViewPortTarget: response?.viewPortCenter || [],
|
zoneViewPortTarget: response?.viewPortCenter ?? [],
|
||||||
zoneViewPortPosition: response?.viewPortposition || [],
|
zoneViewPortPosition: response?.viewPortposition ?? [],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function handleAssetClick(asset: Asset) {
|
function handleAssetClick(asset: Asset) {
|
||||||
setZoneAssetId(asset)
|
setZoneAssetId(asset);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleZoneNameChange(newName: string) {
|
async function handleZoneNameChange(newName: string) {
|
||||||
const email = localStorage.getItem("email") || "";
|
const email = localStorage.getItem("email") ?? "";
|
||||||
const organization = email?.split("@")[1]?.split(".")[0];
|
const organization = email?.split("@")[1]?.split(".")[0];
|
||||||
|
|
||||||
const isDuplicate = zones.some(
|
const isDuplicate = zones.some(
|
||||||
|
@ -128,12 +123,16 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleZoneAssetName(newName: string) {
|
async function handleZoneAssetName(newName: string) {
|
||||||
const email = localStorage.getItem("email") || "";
|
const email = localStorage.getItem("email") ?? "";
|
||||||
const organization = email?.split("@")[1]?.split(".")[0];
|
const organization = email?.split("@")[1]?.split(".")[0];
|
||||||
|
|
||||||
if (zoneAssetId?.id) {
|
if (zoneAssetId?.id) {
|
||||||
let response = await setFloorItemApi(organization, zoneAssetId.id, newName)
|
let response = await setFloorItemApi(
|
||||||
console.log('response: ', response);
|
organization,
|
||||||
|
zoneAssetId.id,
|
||||||
|
newName
|
||||||
|
);
|
||||||
|
console.log("response: ", response);
|
||||||
setFloorItems((prevFloorItems: any[]) =>
|
setFloorItems((prevFloorItems: any[]) =>
|
||||||
prevFloorItems.map((floorItems) =>
|
prevFloorItems.map((floorItems) =>
|
||||||
floorItems.modeluuid === zoneAssetId.id
|
floorItems.modeluuid === zoneAssetId.id
|
||||||
|
@ -160,7 +159,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
||||||
<li className="list-container">
|
<li className="list-container">
|
||||||
<div className="list-item">
|
<div className="list-item">
|
||||||
<div className="zone-header">
|
<div className="zone-header">
|
||||||
<div
|
<button
|
||||||
className="value"
|
className="value"
|
||||||
onClick={() => handleSelectZone(item.id)}
|
onClick={() => handleSelectZone(item.id)}
|
||||||
>
|
>
|
||||||
|
@ -169,8 +168,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
||||||
onRename={handleZoneNameChange}
|
onRename={handleZoneNameChange}
|
||||||
checkDuplicate={checkZoneNameDuplicate}
|
checkDuplicate={checkZoneNameDuplicate}
|
||||||
/>
|
/>
|
||||||
|
</button>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="options-container">
|
<div className="options-container">
|
||||||
<div className="lock option">
|
<div className="lock option">
|
||||||
|
@ -185,12 +183,12 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{item.assets && item.assets.length > 0 && (
|
{item.assets && item.assets.length > 0 && (
|
||||||
<div
|
<button
|
||||||
className="expand-icon option"
|
className="expand-icon option"
|
||||||
onClick={() => toggleZoneExpansion(item.id)}
|
onClick={() => toggleZoneExpansion(item.id)}
|
||||||
>
|
>
|
||||||
<ArrowIcon />
|
<ArrowIcon />
|
||||||
</div>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -206,20 +204,26 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
|
||||||
className="list-container asset-item"
|
className="list-container asset-item"
|
||||||
>
|
>
|
||||||
<div className="list-item">
|
<div className="list-item">
|
||||||
<div className="value" onClick={() => handleAssetClick(asset)} >
|
<button
|
||||||
<RenameInput value={asset.name} onRename={handleZoneAssetName} />
|
className="value"
|
||||||
</div>
|
onClick={() => handleAssetClick(asset)}
|
||||||
|
>
|
||||||
|
<RenameInput
|
||||||
|
value={asset.name}
|
||||||
|
onRename={handleZoneAssetName}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
<div className="options-container">
|
<div className="options-container">
|
||||||
<div className="lock option">
|
<button className="lock option">
|
||||||
<LockIcon isLocked />
|
<LockIcon isLocked />
|
||||||
</div>
|
</button>
|
||||||
<div className="visibe option">
|
<button className="visibe option">
|
||||||
<EyeIcon isClosed />
|
<EyeIcon isClosed />
|
||||||
</div>
|
</button>
|
||||||
{remove && (
|
{remove && (
|
||||||
<div className="remove option">
|
<button className="remove option">
|
||||||
<RemoveIcon />
|
<RemoveIcon />
|
||||||
</div>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -16,7 +16,7 @@ $text-button-color: #f3f3fd;
|
||||||
$text-color-dark: #f3f3fd;
|
$text-color-dark: #f3f3fd;
|
||||||
$text-disabled-dark: #6f6f7a;
|
$text-disabled-dark: #6f6f7a;
|
||||||
$input-text-color-dark: #b5b5c8;
|
$input-text-color-dark: #b5b5c8;
|
||||||
$highlight-text-color-dark: #b392f0;
|
$highlight-text-color-dark: #d2baff;
|
||||||
$text-button-color-dark: #f3f3fd;
|
$text-button-color-dark: #f3f3fd;
|
||||||
|
|
||||||
// background colors
|
// background colors
|
||||||
|
@ -105,8 +105,8 @@ $color5: #c7a8ff;
|
||||||
// old variables
|
// old variables
|
||||||
$accent-color: #6f42c1;
|
$accent-color: #6f42c1;
|
||||||
$accent-color-dark: #c4abf1;
|
$accent-color-dark: #c4abf1;
|
||||||
$highlight-accent-color: #e0dfff;
|
// $highlight-accent-color: #e0dfff;
|
||||||
$highlight-accent-color-dark: #403e6a;
|
// $highlight-accent-color-dark: #403e6a;
|
||||||
|
|
||||||
// $background-color: #fcfdfd;
|
// $background-color: #fcfdfd;
|
||||||
// $background-color-dark: #19191d;
|
// $background-color-dark: #19191d;
|
||||||
|
|
|
@ -34,9 +34,8 @@
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-container {
|
li.list-container {
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
// margin-left: 10px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.list-item {
|
.list-item {
|
||||||
|
@ -45,11 +44,13 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
border-radius: #{$border-radius-large};
|
border-radius: #{$border-radius-large};
|
||||||
|
.zone-header{
|
||||||
.value {
|
@include flex-center;
|
||||||
width: 100%;
|
.value {
|
||||||
text-align: start;
|
width: 100%;
|
||||||
max-width: 180px;
|
text-align: start;
|
||||||
|
max-width: 180px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.options-container {
|
.options-container {
|
||||||
|
@ -61,11 +62,18 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&:first-child{
|
||||||
|
background: var(--highlight-accent-color);
|
||||||
|
.input-value{
|
||||||
|
color: var(--highlight-text-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: var(--highlight-accent-color);
|
background: var(--highlight-accent-color);
|
||||||
color: var(--primary-color);
|
.input-value{
|
||||||
|
color: var(--highlight-text-color);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -434,7 +434,7 @@
|
||||||
button {
|
button {
|
||||||
path {
|
path {
|
||||||
stroke: var(--accent-color);
|
stroke: var(--accent-color);
|
||||||
strokeWidth: 1.5px;
|
stroke-width: 1.5px;
|
||||||
}
|
}
|
||||||
color: var(--accent-color);
|
color: var(--accent-color);
|
||||||
&:before {
|
&:before {
|
||||||
|
@ -456,6 +456,9 @@
|
||||||
.sidebar-right-content-container {
|
.sidebar-right-content-container {
|
||||||
.dataSideBar {
|
.dataSideBar {
|
||||||
.inputs-wrapper {
|
.inputs-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
.datas {
|
.datas {
|
||||||
.input-value {
|
.input-value {
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
|
@ -487,6 +490,7 @@
|
||||||
.datas__class {
|
.datas__class {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
.multi-level-dropdown {
|
.multi-level-dropdown {
|
||||||
width: 170px;
|
width: 170px;
|
||||||
|
@ -496,22 +500,13 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
}
|
}
|
||||||
}
|
.disable {
|
||||||
}
|
cursor: not-allowed;
|
||||||
|
pointer-events: none;
|
||||||
.datas__class {
|
/* Disables all mouse interactions */
|
||||||
display: flex;
|
opacity: 0.5;
|
||||||
gap: 12px;
|
/* Optional: Makes the button look visually disabled */
|
||||||
|
}
|
||||||
// .datas__separator {
|
|
||||||
// }
|
|
||||||
|
|
||||||
.disable {
|
|
||||||
cursor: not-allowed;
|
|
||||||
pointer-events: none;
|
|
||||||
/* Disables all mouse interactions */
|
|
||||||
opacity: 0.5;
|
|
||||||
/* Optional: Makes the button look visually disabled */
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -522,12 +517,6 @@
|
||||||
padding-bottom: 6px;
|
padding-bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inputs-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectedMain-container {
|
.selectedMain-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -627,10 +616,8 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
background: #f0f0f0;
|
background: #f0f0f0;
|
||||||
// border-radius: 8px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
// justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.optionsContainer {
|
.optionsContainer {
|
||||||
|
@ -713,7 +700,7 @@
|
||||||
|
|
||||||
path {
|
path {
|
||||||
stroke: var(--accent-color);
|
stroke: var(--accent-color);
|
||||||
strokeWidth: 1.5px;
|
stroke-width: 1.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -742,14 +729,14 @@
|
||||||
.add-button {
|
.add-button {
|
||||||
@include flex-center;
|
@include flex-center;
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
background: var(--accent-color);
|
background: var(--background-color-button);
|
||||||
color: var(--primary-color);
|
color: var(--text-button-color);
|
||||||
border-radius: #{$border-radius-small};
|
border-radius: #{$border-radius-small};
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
outline: none;
|
outline: none;
|
||||||
border: none;
|
border: none;
|
||||||
path {
|
path {
|
||||||
stroke: var(--primary-color);
|
stroke: var(--text-button-color);
|
||||||
}
|
}
|
||||||
&:disabled {
|
&:disabled {
|
||||||
background: var(--text-disabled);
|
background: var(--text-disabled);
|
||||||
|
@ -804,11 +791,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.lists-main-container {
|
.lists-main-container {
|
||||||
margin: 2px 8px;
|
margin: 2px;
|
||||||
width: calc(100% - 12px);
|
width: calc(100% - 4px);
|
||||||
margin-right: 4px;
|
|
||||||
background: var(--background-color-gray);
|
background: var(--background-color-gray);
|
||||||
border-radius: #{$border-radius-small};
|
border-radius: 8px;
|
||||||
min-height: 120px;
|
min-height: 120px;
|
||||||
|
|
||||||
.list-container {
|
.list-container {
|
||||||
|
@ -818,10 +804,10 @@
|
||||||
|
|
||||||
.list-item {
|
.list-item {
|
||||||
@include flex-space-between;
|
@include flex-space-between;
|
||||||
padding: 2px 12px;
|
padding: 4px 12px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 2px 0;
|
margin: 2px 0;
|
||||||
border-radius: #{$border-radius-small};
|
border-radius: #{$border-radius-medium};
|
||||||
.value {
|
.value {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
@ -1156,7 +1142,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.assets-container {
|
.assets-container {
|
||||||
padding: 0 6px;
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
height: 100%;
|
||||||
|
gap: 3px;
|
||||||
|
padding: 10px 0;
|
||||||
|
|
||||||
.assets-wrapper {
|
.assets-wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -1175,14 +1167,16 @@
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
gap: 8px;
|
gap: 0px 4px;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
|
|
||||||
.category {
|
.category {
|
||||||
width: 121px;
|
width: 123px;
|
||||||
height: 95px;
|
height: 95px;
|
||||||
border-radius: 3.59px;
|
border-radius: #{$border-radius-large};
|
||||||
background: var(--background-color-gray);
|
background: var(--background-color);
|
||||||
|
outline: 1px solid var(--border-color);
|
||||||
|
outline-offset: -1px;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
padding-top: 12px;
|
padding-top: 12px;
|
||||||
font-weight: $bold-weight;
|
font-weight: $bold-weight;
|
||||||
|
@ -1193,8 +1187,6 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
font-size: var(--font-size-regular);
|
font-size: var(--font-size-regular);
|
||||||
// -webkit-text-fill-color: transparent;
|
|
||||||
// -webkit-text-stroke: 1px black;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
|
@ -1260,7 +1252,6 @@
|
||||||
|
|
||||||
.category-image {
|
.category-image {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
// top: 50%;
|
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: -10px;
|
right: -10px;
|
||||||
transform: translate(0, 0%) scale(0.8);
|
transform: translate(0, 0%) scale(0.8);
|
||||||
|
@ -1276,14 +1267,15 @@
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
gap: 3px;
|
gap: 0px 4px;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
|
|
||||||
.assets {
|
.assets {
|
||||||
width: 117px;
|
width: 123px;
|
||||||
height: 95px;
|
height: 95px;
|
||||||
border-radius: #{$border-radius-small};
|
border-radius: #{$border-radius-large};
|
||||||
background: var(--background-color-gray);
|
background: var(--background-color);
|
||||||
|
outline: 1px solid var(--border-color);
|
||||||
font-weight: $medium-weight;
|
font-weight: $medium-weight;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -1301,18 +1293,16 @@
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 38px;
|
height: 100%;
|
||||||
font-size: var(--font-size-regular);
|
font-size: var(--font-size-regular);
|
||||||
background: color-mix(
|
background: linear-gradient(0deg,rgba(37, 24, 51, 0) 0%, rgba(78, 22, 128, 0.4) 100%);
|
||||||
in srgb,
|
pointer-events: none;
|
||||||
var(--background-color) 40%,
|
backdrop-filter: blur(8px);
|
||||||
transparent
|
|
||||||
);
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.3s ease;
|
transition: opacity 0.3s ease;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 3;
|
||||||
|
line-clamp: 3;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
@ -1337,46 +1327,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.assets-container {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
height: 100%;
|
|
||||||
gap: 3px;
|
|
||||||
padding: 10px 0;
|
|
||||||
|
|
||||||
.assets {
|
|
||||||
width: 117px;
|
|
||||||
height: 95px;
|
|
||||||
border-radius: 3.59px;
|
|
||||||
background: var(--background-color-gray);
|
|
||||||
padding: 8px;
|
|
||||||
padding-top: 12px;
|
|
||||||
font-weight: $medium-weight;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.asset-name {
|
|
||||||
position: relative;
|
|
||||||
z-index: 3;
|
|
||||||
font-size: var(--font-size-regular);
|
|
||||||
}
|
|
||||||
|
|
||||||
.asset-image {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
// top: 50%;
|
|
||||||
// right: 5px;
|
|
||||||
// transform: translate(0, -50%);
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.assets-result {
|
.assets-result {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
Loading…
Reference in New Issue