chore: mirror indicators on numerical column headers

wandb · Oct 2, 2024 · 77a492b · 77a492b
1 parent 13b3646
commit 77a492b
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 35 deletions.
diff --git a/weave-js/src/components/Panel2/PanelTable.styles.ts b/weave-js/src/components/Panel2/PanelTable.styles.ts
@@ -98,18 +98,23 @@ FilterIcon.displayName = 'S.FilterIcon';
 
 export const ColumnAction = styled.div<{isHovered?: boolean}>`
   cursor: pointer;
+  height: 100%;
+  background-color: transparent;
+`;
+ColumnAction.displayName = 'S.ColumnAction';
+
+export const ColumnActionContainer = styled.div<{isHovered?: boolean}>`
+  display: flex;
   padding: 5px 0px 0px 0px;
+  font-size: 20px;
   flex: 0 0 auto;
   height: 100%;
-  background: white;
-  font-size: 20px;
 
   :hover {
     background-color: ${hexToRGB(OBLIVION, 0.04)};
   }
-  background-color: transparent;
 `;
-ColumnAction.displayName = 'S.ColumnAction';
+ColumnActionContainer.displayName = 'S.ColumnActionContainer';
 
 export const TableAction = styled.div<{
   highlight?: boolean;

diff --git a/weave-js/src/components/Panel2/PanelTable/ColumnHeader.tsx b/weave-js/src/components/Panel2/PanelTable/ColumnHeader.tsx
@@ -499,7 +499,11 @@ export const ColumnHeader: React.FC<{
   return (
     <S.ColumnHeader
       data-test="column-header"
-      style={{textAlign: columnFormat?.textAlign ?? 'center'}}>
+      style={{
+        textAlign: columnFormat?.textAlign ?? 'center',
+        flexDirection:
+          columnFormat?.textAlign === 'right' ? 'row-reverse' : 'row',
+      }}>
       {simpleTable ? (
         workingColumnName !== '' ? (
           <S.ColumnNameText>{workingColumnName}</S.ColumnNameText>
@@ -540,7 +544,10 @@ export const ColumnHeader: React.FC<{
           trigger={
             <S.ColumnName
               style={{
-                marginRight: `-${colControlsWidth}px`,
+                marginRight:
+                  columnFormat?.textAlign === 'center'
+                    ? `-${colControlsWidth}px`
+                    : 'inherit',
               }}
               onClick={() => setColumnSettingsOpen(!columnSettingsOpen)}>
               {propsColumnName !== '' ? (
@@ -648,36 +655,47 @@ export const ColumnHeader: React.FC<{
       {!simpleTable && (
         <WBPopupMenuTrigger options={columnMenuItems}>
           {({anchorRef, setOpen, open}) => (
-            <S.ColumnAction className="column-controls">
-              {isPinned && (
-                <PinnedIndicator unpin={() => setColumnPinState(false)} />
-              )}
-              {isGroupCol && (
-                <S.ControlIcon
-                  name="group-runs"
-                  onClick={e => {
-                    recordEvent('REMOVE_COLUMN_GROUPING');
-                    doUngroup();
-                  }}
-                />
-              )}
-              {colIsSorted && (
-                <SortStateToggle
-                  {...{
-                    tableState,
-                    colId,
-                    updateTableState,
-                  }}
+            <S.ColumnActionContainer
+              className="column-controls"
+              style={{
+                flexDirection:
+                  columnFormat?.textAlign === 'right' ? 'row-reverse' : 'row',
+              }}>
+              <S.ColumnAction>
+                {isPinned && (
+                  <PinnedIndicator unpin={() => setColumnPinState(false)} />
+                )}
+                {isGroupCol && (
+                  <S.ControlIcon
+                    name="group-runs"
+                    onClick={e => {
+                      recordEvent('REMOVE_COLUMN_GROUPING');
+                      doUngroup();
+                    }}
+                  />
+                )}
+              </S.ColumnAction>
+              <S.ColumnAction>
+                {colIsSorted && (
+                  <SortStateToggle
+                    {...{
+                      tableState,
+                      colId,
+                      updateTableState,
+                    }}
+                  />
+                )}
+              </S.ColumnAction>
+              <S.ColumnAction>
+                <S.EllipsisIcon
+                  ref={anchorRef}
+                  data-test="column-options"
+                  name="overflow"
+                  className="column-actions-trigger"
+                  onClick={() => setOpen(o => !o)}
                 />
-              )}
-              <S.EllipsisIcon
-                ref={anchorRef}
-                data-test="column-options"
-                name="overflow"
-                className="column-actions-trigger"
-                onClick={() => setOpen(o => !o)}
-              />
-            </S.ColumnAction>
+              </S.ColumnAction>
+            </S.ColumnActionContainer>
           )}
         </WBPopupMenuTrigger>
       )}