Generic TopBar component for Catalog/Cluster views (#2882)

* Rendering close button in cluster view

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Changing Icon hover style

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Moving onClick handler away

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing sidebar compact view

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing 'compact' refs in SidebarItem

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Wrapping Catalog with MainLayout

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Making sidebar resizing indicator visible on hover

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding TopBar to catalog view

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Using TopBar in cluster views

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Cleaning up Sidebar styles

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Using getActiveClusterEntity() for searching

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix resizing anchor position

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Align cluster name on left

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing unused files

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing unused css var

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Showing Topbar in ClusterStatus page

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing TopBar from ClusterManager

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev authored and GitHub committed 2021-06-07 11:46:40 +03:00
1 parent 278510a90a
commit 026cbbac09
24 files changed
+325 -337

No files matched your search

@@ -31,6 +31,23 @@ body.resizing {
position: absolute;
z-index: 10;
&::after {
content: " ";
display: block;
width: 3px;
height: 100%;
margin-left: 50%;
background: transparent;
transition: all 0.2s 0s;
}
&:hover {
&::after {
background: var(--blue);
transition: all 0.2s 0.5s;
}
}
&.disabled {
display: none;
}
@@ -56,6 +73,17 @@ body.resizing {
cursor: col-resize;
width: $dimension;
// Expand hoverable area while resizing to keep highlighting resizer.
// Otherwise, cursor can move far away dropping hover indicator.
.resizing & {
$expandedWidth: 200px;
width: $expandedWidth;
&.trailing {
right: -$expandedWidth / 2;
}
}
&.leading {
left: -$dimension / 2;
}