This is an automated email from the ASF dual-hosted git repository.
ppawar pushed a commit to branch atlas-2.5
in repository https://gitbox.apache.org/repos/asf/atlas.git
The following commit(s) were added to refs/heads/atlas-2.5 by this push:
new cc653e390 ATLAS-5040: [React UI] Expand Collapse icon position changes
on minimizing all treeviews in sidebar (#357)
cc653e390 is described below
commit cc653e390069b769a4d70bb4eef0cc4f31235f92
Author: Brijesh Bhalala <[email protected]>
AuthorDate: Thu May 29 11:32:57 2025 +0530
ATLAS-5040: [React UI] Expand Collapse icon position changes on minimizing
all treeviews in sidebar (#357)
---
dashboard/src/components/TreeNodeIcons.tsx | 16 +++++++---------
dashboard/src/styles/sidebar.scss | 18 +++++++-----------
dashboard/src/views/SideBar/SideBarBody.tsx | 9 +++++----
.../src/views/SideBar/SideBarTree/SideBarTree.tsx | 10 +++++-----
4 files changed, 24 insertions(+), 29 deletions(-)
diff --git a/dashboard/src/components/TreeNodeIcons.tsx
b/dashboard/src/components/TreeNodeIcons.tsx
index 593ed58fd..e56624030 100644
--- a/dashboard/src/components/TreeNodeIcons.tsx
+++ b/dashboard/src/components/TreeNodeIcons.tsx
@@ -217,10 +217,6 @@ const TreeNodeIcons = (props: {
sx={{
"& .MuiPaper-root": {
transition: "none !important"
- },
- "& .MuiList-padding": {
- paddingBottom: "0 !important",
- paddingTop: "0 !important"
}
}}
>
@@ -251,8 +247,8 @@ const TreeNodeIcons = (props: {
setCategoryModal(true);
}
}}
+ className="sidebar-menu-item"
data-cy="createClassification"
- sx={{ paddingRight: "10px", paddingLeft: "10px" }}
>
<ListItemIcon sx={{ minWidth: "28px !important" }}>
<AddIcon fontSize="small" className="menuitem-icon" />
@@ -309,7 +305,7 @@ const TreeNodeIcons = (props: {
}
}}
data-cy="createClassification"
- sx={{ paddingRight: "10px", paddingLeft: "10px" }}
+ className="sidebar-menu-item"
>
<ListItemIcon sx={{ minWidth: "28px !important" }}>
<ListAltOutlinedIcon fontSize="small" className="menuitem-icon"
/>
@@ -346,7 +342,7 @@ const TreeNodeIcons = (props: {
}
}}
data-cy="createClassification"
- sx={{ paddingRight: "10px", paddingLeft: "10px" }}
+ className="sidebar-menu-item"
>
<ListItemIcon sx={{ minWidth: "28px !important" }}>
<DeleteOutlineOutlinedIcon
@@ -389,7 +385,7 @@ const TreeNodeIcons = (props: {
});
}}
data-cy="createClassification"
- sx={{ paddingRight: "10px", paddingLeft: "10px" }}
+ className="sidebar-menu-item"
>
<ListItemIcon sx={{ minWidth: "24px !important" }}>
<SearchOutlinedIcon fontSize="small" className="menuitem-icon" />
@@ -413,7 +409,7 @@ const TreeNodeIcons = (props: {
setCategoryModal(true);
}}
data-cy="createClassification"
- sx={{ paddingRight: "10px", paddingLeft: "10px" }}
+ className="sidebar-menu-item"
>
<ListItemIcon sx={{ minWidth: "24px !important" }}>
<ListAltIcon fontSize="small" className="menuitem-icon" />
@@ -433,6 +429,7 @@ const TreeNodeIcons = (props: {
setRenameModal(true);
}}
data-cy="createClassification"
+ className="sidebar-menu-item"
>
<ListItemIcon>
<EditOutlinedIcon fontSize="small" className="menuitem-icon" />
@@ -448,6 +445,7 @@ const TreeNodeIcons = (props: {
setDeleteModal(true);
}}
data-cy="downloadBusinessMetadata"
+ className="sidebar-menu-item"
>
<ListItemIcon>
<DeleteOutlineOutlinedIcon
diff --git a/dashboard/src/styles/sidebar.scss
b/dashboard/src/styles/sidebar.scss
index ea4d37904..ed7df3a8a 100644
--- a/dashboard/src/styles/sidebar.scss
+++ b/dashboard/src/styles/sidebar.scss
@@ -86,6 +86,7 @@
.menuitem-icon {
color: v.$text-green;
+ margin-bottom: 2px;
}
.menuitem-label {
color: v.$text-grey;
@@ -157,8 +158,8 @@
text-overflow: ellipsis;
overflow: hidden;
font-size: 14px;
- line-height: 26px;
- height: 26px;
+ line-height: 29px;
+ height: 29px;
}
.sidebar-wrapper {
@@ -209,15 +210,6 @@
padding-bottom: 1.5rem;
}
-// .custom-treeitem-label.selected .Mui-selected .MuiTreeItem-contentBar {
-// background-color: rgba(255, 255, 255, 0.08);
-// border-left: 4px solid #2ccebb;
-// }
-
-// .custom-treeitem-label .Mui-selected .MuiTreeItem-contentBar {
-// background-color: rgba(255, 255, 255, 0.08);
-// border-left: 4px solid #2ccebb;
-
button.MuiButtonBase-root.MuiIconButton-root.MuiIconButton-sizeSmall.tree-item-more-label
{
font-size: 1.25rem !important;
}
@@ -227,3 +219,7 @@
button.MuiButtonBase-root.MuiIconButton-root.MuiIconButton-sizeSmall.tree-item-m
font-size: 1.25rem !important;
color: white !important;
}
+
+.sidebar-menu-item {
+ padding: 4px 10px !important;
+}
diff --git a/dashboard/src/views/SideBar/SideBarBody.tsx
b/dashboard/src/views/SideBar/SideBarBody.tsx
index b9bb0b19c..1ea6f54b8 100644
--- a/dashboard/src/views/SideBar/SideBarBody.tsx
+++ b/dashboard/src/views/SideBar/SideBarBody.tsx
@@ -370,12 +370,13 @@ const SideBarBody = (props: {
</div>
<div
style={{
- width: "100%",
+ width: "inherit",
textAlign: "right",
- padding: "4px 0",
- position: "sticky",
+ padding: "8px",
+ position: "fixed",
bottom: "0px",
- marginTop: "64px",
+ zIndex: "9",
+ left: "0",
background: "#034858"
}}
>
diff --git a/dashboard/src/views/SideBar/SideBarTree/SideBarTree.tsx
b/dashboard/src/views/SideBar/SideBarTree/SideBarTree.tsx
index 62b2c1d81..125ceee92 100644
--- a/dashboard/src/views/SideBar/SideBarTree/SideBarTree.tsx
+++ b/dashboard/src/views/SideBar/SideBarTree/SideBarTree.tsx
@@ -94,7 +94,7 @@ const CustomContentRoot =
styled("div")<CustomContentRootProps>(
".MuiTreeItem-contentBar": {
position: "absolute",
width: "100%",
- height: 24,
+ height: 29,
left: 0
},
".MuiTreeItem-iconContainer": {
@@ -1019,7 +1019,7 @@ const BarTreeView: FC<{
}
}}
data-cy="groupOrFlatTreeView"
- sx={{ padding: "4px 10px" }}
+ className="sidebar-menu-item"
>
<ListItemIcon
sx={{ minWidth: "28px !important" }}
@@ -1054,7 +1054,7 @@ const BarTreeView: FC<{
}
}}
data-cy="createClassification"
- sx={{ padding: "4px 10px" }}
+ className="sidebar-menu-item"
>
<ListItemIcon
sx={{ minWidth: "28px !important" }}
@@ -1082,7 +1082,7 @@ const BarTreeView: FC<{
? true
: false
}
- sx={{ padding: "4px 10px" }}
+ className="sidebar-menu-item"
>
<ListItemIcon sx={{ minWidth: "28px !important" }}>
<FileDownloadIcon
@@ -1107,7 +1107,7 @@ const BarTreeView: FC<{
? true
: false
}
- sx={{ padding: "4px 10px" }}
+ className="sidebar-menu-item"
>
<ListItemIcon sx={{ minWidth: "28px !important" }}>
<FileUploadIcon
