Alternate row background color and make the serial number cell distin…

…ct. #2875 #7863
pgadmin-org · Sep 11, 2024 · db4e6ff · db4e6ff
1 parent 306269a
commit db4e6ff
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 2 deletions.
diff --git a/docs/en_US/images/editgrid.png b/docs/en_US/images/editgrid.png
diff --git a/docs/en_US/images/geometry_viewer.png b/docs/en_US/images/geometry_viewer.png
diff --git a/docs/en_US/images/query_execute_query.png b/docs/en_US/images/query_execute_query.png
diff --git a/docs/en_US/images/query_execute_script.png b/docs/en_US/images/query_execute_script.png
diff --git a/docs/en_US/images/query_output_data.png b/docs/en_US/images/query_output_data.png
diff --git a/docs/en_US/images/query_tool_editable_columns.png b/docs/en_US/images/query_tool_editable_columns.png
diff --git a/web/pgadmin/static/js/tree/tree.js b/web/pgadmin/static/js/tree/tree.js
@@ -477,7 +477,7 @@ export class Tree {
     let result = {};
     if (identifier === undefined) return;
     let item = TreeNode.prototype.isPrototypeOf(identifier) ? identifier : this.findNode(identifier.path);
-    if (item === undefined) return;
+    if (item === undefined || item === null) return;
     do {
       const currentNodeData = item.getData();
       if (currentNodeData._type in this.Nodes && this.Nodes[currentNodeData._type].hasId) {

diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
@@ -53,6 +53,8 @@ const StyledPgReactDataGrid = styled(PgReactDataGrid)(({theme})=>({
   },
   '& .QueryTool-rowNumCell': {
     padding: '0px 8px',
+    fontWeight: 900,
+    color: theme.otherVars.tree.textFg,
   },
   '& .QueryTool-colHeaderSelected': {
     outlineColor: theme.palette.primary.main,
@@ -63,7 +65,15 @@ const StyledPgReactDataGrid = styled(PgReactDataGrid)(({theme})=>({
     outlineColor: theme.palette.primary.main,
     backgroundColor: theme.palette.primary.light,
     color: theme.otherVars.qtDatagridSelectFg,
-  }
+  },
+  '& .rdg-row': {
+    '&:nth-of-type(even)': {
+      backgroundColor: theme.palette.grey[200],
+    },
+    '& .rdg-cell:nth-of-type(1)': {
+      backgroundColor: theme.palette.background.default + ' !important',
+    },
+  },
 }));
 
 export const RowInfoContext = React.createContext();