make table row popup menu stick to the right of the viewport (#39)

nuodb · Nov 5, 2024 · 57f4ba3 · 57f4ba3
1 parent 00b8a74
commit 57f4ba3
Show file tree

Hide file tree

Showing 9 changed files with 262 additions and 121 deletions.
diff --git a/selenium-tests/src/test/java/com/nuodb/selenium/TestRoutines.java b/selenium-tests/src/test/java/com/nuodb/selenium/TestRoutines.java
@@ -132,8 +132,8 @@ public void clickPopupMenu(WebElement element, String dataTestId) {
         List<WebElement> menuToggles = element.findElements(By.xpath("div[@data-testid='menu-toggle']"));
         assertEquals(1, menuToggles.size());
         menuToggles.get(0).click();
-        WebElement parent = menuToggles.get(0).findElement(By.xpath(".."));
-        List<WebElement> menuItems = parent.findElements(By.xpath(".//div[@data-testid='" + dataTestId + "']"));
+        WebElement menuPopup = getElement("menu-popup");
+        List<WebElement> menuItems = menuPopup.findElements(By.xpath(".//div[@data-testid='" + dataTestId + "']"));
         assertEquals(1, menuItems.size());
         menuItems.get(0).click();
     }

diff --git a/ui/public/theme/base.css b/ui/public/theme/base.css
@@ -40,6 +40,9 @@
 }
 
 .NuoMenuPopupItem {
+    display: flex;
+        flex-direction: row;
+        justify-content: space-between;
     margin: 0px;
     padding: 5px 10px;
     font-family: Roboto, Helvetica, Arial, sans-serif;
@@ -52,6 +55,11 @@
     white-space: nowrap;
 }
 
+.NuoMenuPopupItem>svg {
+    display: flex;
+    flex: 0 0 auto;
+    opacity: 0.5;
+}
 .NuoMenuPopupItem:hover {
     background-color: lightgray;
 }
@@ -68,4 +76,94 @@
 .NuoTableNoData {
     font-size: 1.25em;
     padding: 25px;
+}
+.NuoTableContainer {
+    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+    background-color: #fff;
+    color: rgba(0, 0, 0, 0.87);
+    -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    border-radius: 4px;
+    box-shadow: var(--Paper-shadow);
+    background-image: var(--Paper-overlay);
+    overflow: hidden;
+    width: 100%;
+    overflow-x: auto;
+}
+
+.NuoTableTable {
+    display: table;
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    text-indent: initial;
+    unicode-bidi: isolate;
+    border-color: gray;
+}
+
+.NuoTableThead {
+    vertical-align: middle;
+    unicode-bidi: isolate;
+    border-color: inherit;
+}
+
+.NuoTableTr {
+    color: inherit;
+    display: table-row;
+    vertical-align: middle;
+    outline: 0;
+    unicode-bidi: isolate;
+    border-color: inherit;
+}
+
+.NuoTableSettingsItem {
+    display: flex;
+    flex-direction: row;
+    flex: 1 1 auto;
+}
+
+.NuoTableSettingsItem>label {
+    display: flex;
+    flex: 1 1 auto;
+}
+
+.NuoTableTh,
+.NuoTableTd {
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    font-size: 0.875rem;
+    letter-spacing: 0.0108em;
+    display: table-cell;
+    padding: 16px;
+    vertical-align: inherit;
+    border-bottom: 1px solid rgba(224, 224, 224, 1);
+    color: rgba(0, 0, 0, 0.87);
+    unicode-bidi: isolate;
+    text-align: left;
+}
+
+.NuoTableTh {
+    line-height: 1.5rem;
+    font-weight: 500;
+}
+
+.NuoTableTd {
+    font-weight: 400;
+    line-height: 1.43;
+}
+
+.NuoTableTbody {
+    display: table-row-group;
+    vertical-align: middle;
+    unicode-bidi: isolate;
+    border-color: inherit;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+.NuoTableMenuCell {
+    position: sticky;
+    right: 0;
+    text-align: right;
+    background-color: rgba(255, 255, 255, 0.8);
+    ;
 }
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -19,6 +19,7 @@ import GlobalErrorBoundary from "./components/GlobalErrorBoundary";
 import Auth from "./utils/auth";
 import Settings from './components/pages/Settings';
 import Customizations from './utils/Customizations';
+import { PopupMenu } from './components/controls/Menu';
 
 /**
  * React Root Application. Sets up dialogs, BrowserRouter and Schema from Control Plane
@@ -32,6 +33,7 @@ export default function App() {
       <GlobalErrorBoundary>
         <Customizations>
           <CssBaseline />
+          <PopupMenu />
           <Dialog />
           <BrowserRouter>
             {isLoggedIn