column list expand icons

packages/web/src/appobj/AppObjectList.js

@@ -38,6 +38,7 @@ function AppObjectListItem({
   SubItems,
   getCommonProps,
   expandOnClick,
+  ExpandIconComponent,
 }) {
   const [isExpanded, setIsExpanded] = React.useState(false);
 
@@ -53,7 +54,7 @@ function AppObjectListItem({
     prefix: SubItems ? (
       <ExpandIconHolder2>
         {expandable ? (
-          <ExpandIcon
+          <ExpandIconComponent
             isExpanded={isExpanded}
             onClick={e => {
               setIsExpanded(v => !v);
@@ -61,7 +62,7 @@ function AppObjectListItem({
             }}
           />
         ) : (
-          <ExpandIcon isBlank />
+          <ExpandIconComponent isBlank />
         )}
       </ExpandIconHolder2>
     ) : null,
@@ -119,6 +120,7 @@ export function AppObjectList({
   isExpandable = undefined,
   getCommonProps = undefined,
   expandOnClick = false,
+  ExpandIconComponent = ExpandIcon,
 }) {
   const createComponent = data => (
     <AppObjectListItem
@@ -131,6 +133,7 @@ export function AppObjectList({
       isExpandable={isExpandable}
       getCommonProps={getCommonProps}
       expandOnClick={expandOnClick}
+      ExpandIconComponent={ExpandIconComponent}
     />
   );
 

packages/web/src/icons.js

@@ -54,6 +54,9 @@ const iconNames = {
 
   'icon run': 'mdi mdi-play',
   'icon chevron-down': 'mdi mdi-chevron-down',
+  'icon chevron-left': 'mdi mdi-chevron-left',
+  'icon chevron-right': 'mdi mdi-chevron-right',
+  'icon chevron-up': 'mdi mdi-chevron-up',
   'icon plugin': 'mdi mdi-toy-brick',
 
   'img ok': 'mdi mdi-check-circle color-green-8',
@@ -111,3 +114,10 @@ export function ExpandIcon({ isBlank = false, isExpanded = false, ...other }) {
   }
   return <FontIcon icon={isExpanded ? 'icon minus-box' : 'icon plus-box'} {...other} />;
 }
+
+export function ChevronExpandIcon({ isBlank = false, isExpanded = false, ...other }) {
+  if (isBlank) {
+    return <FontIcon icon="icon invisible-box" {...other} />;
+  }
+  return <FontIcon icon={isExpanded ? 'icon chevron-down' : 'icon chevron-right'} {...other} />;
+}

packages/web/src/widgets/DatabaseWidget.js

@@ -26,6 +26,7 @@ import ToolbarButton from './ToolbarButton';
 import useShowModal from '../modals/showModal';
 import ConnectionModal from '../modals/ConnectionModal';
 import SubColumnParamList from '../appobj/SubColumnParamList';
+import { ChevronExpandIcon } from '../icons';
 
 function SubDatabaseList({ data }) {
   const setDb = useSetCurrentDatabase();
@@ -153,6 +154,7 @@ function SqlObjectList({ conid, database }) {
             filter={filter}
             SubItems={SubColumnParamList}
             isExpandable={data => data.objectTypeField == 'tables' || data.objectTypeField == 'views'}
+            ExpandIconComponent={ChevronExpandIcon}
           />
         )}
       </WidgetsInnerContainer>