Bug fix: jumping view carousel icon and non-centered selection popup (#…

…231)
equinor · Aug 9, 2022 · 3dda6e0 · 3dda6e0
1 parent a78b0d6
commit 3dda6e0
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/react/src/lib/components/WebvizSettingsDrawer/components/ViewList/view-list.css b/react/src/lib/components/WebvizSettingsDrawer/components/ViewList/view-list.css
@@ -19,10 +19,6 @@
     padding-top: 8px;
 }
 
-.WebvizViewList__Below {
-    margin-left: -151px;
-}
-
 .WebvizViewList__Aside {
     margin-top: -20px;
 }

diff --git a/react/src/lib/components/WebvizSettingsDrawer/components/ViewList/view-list.tsx b/react/src/lib/components/WebvizSettingsDrawer/components/ViewList/view-list.tsx
@@ -30,13 +30,17 @@ export const ViewList: React.FC<ViewListProps> = (props: ViewListProps) => {
             views: View[];
         }[]
     >([]);
+    const ref = React.useRef<HTMLDivElement>(null);
 
     React.useLayoutEffect(() => {
         if (props.anchorElement) {
             const rect = props.anchorElement.getBoundingClientRect();
             if (props.location === "below") {
                 setMainPosition({
-                    x: rect.left + rect.width / 2,
+                    x:
+                        rect.left +
+                        rect.width / 2 -
+                        (ref.current?.getBoundingClientRect().width || 0) / 2,
                     y: rect.bottom + 20,
                 });
             } else {
@@ -46,7 +50,7 @@ export const ViewList: React.FC<ViewListProps> = (props: ViewListProps) => {
                 });
             }
         }
-    }, [props.anchorElement]);
+    }, [props.anchorElement, props.location, ref.current]);
 
     React.useEffect(() => {
         const viewList: {
@@ -84,6 +88,7 @@ export const ViewList: React.FC<ViewListProps> = (props: ViewListProps) => {
                 top: mainPosition.y,
                 display: props.open ? "block" : "none",
             }}
+            ref={ref}
         >
             <div
                 className={`WebvizViewList__Arrow WebvizViewList__Arrow${

diff --git a/react/src/lib/components/WebvizSettingsDrawer/components/ViewSelector/view-selector.css b/react/src/lib/components/WebvizSettingsDrawer/components/ViewSelector/view-selector.css
@@ -1,9 +1,9 @@
 .WebvizViewSelector {
     display: flex;
     align-items: center;
+    justify-items: center;
     border-radius: 4px;
     cursor: pointer;
-    justify-content: space-evenly;
     padding-left: 20px;
     padding-right: 16px;
     overflow: hidden;
@@ -34,3 +34,8 @@
     overflow: hidden;
     padding-left: 12px;
 }
+
+.WebvizViewSelector__Icon {
+    display: flex;
+    justify-content: center;
+}
diff --git a/react/src/lib/components/WebvizSettingsDrawer/components/ViewSelector/view-selector.tsx b/react/src/lib/components/WebvizSettingsDrawer/components/ViewSelector/view-selector.tsx
@@ -86,6 +86,8 @@ export const ViewSelector: React.FC<ViewSelectorProps> = (
         props.open,
         store.state.activePluginId,
         store.state.pluginsData,
+        viewNameRef.current,
+        viewCarouselRef.current,
     ]);
 
     React.useEffect(() => {
@@ -141,7 +143,7 @@ export const ViewSelector: React.FC<ViewSelectorProps> = (
                 }}
                 onClick={() => setMenuOpen(true)}
             >
-                <div ref={viewCarouselRef}>
+                <div ref={viewCarouselRef} className="WebvizViewSelector__Icon">
                     <Icon name="view_carousel" />
                 </div>
                 <div