Merge branch 'UXE-590-orderable-table-POC' into 'main'

Orderable tables improvements (responsive) See merge request web/clients!8189 Changelog:
thomaslenaour · Jan 31, 2024 · 865ecb0 · 865ecb0
2 parents e635478 + 5cf5fba
commit 865ecb0
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 37 deletions.
diff --git a/packages/components/components/icon/Icon.tsx b/packages/components/components/icon/Icon.tsx
@@ -145,6 +145,7 @@ export type IconName =
     | 'cross-small'
     | 'density-low'
     | 'density-high'
+    | 'dots'
     | 'drive'
     | 'earth'
     | 'emoji'

diff --git a/packages/components/components/orderableTable/OrderableTable.scss b/packages/components/components/orderableTable/OrderableTable.scss
@@ -1,27 +1,48 @@
-@import '~@proton/styles/scss/lib';
+@use "sass:map";
+@import "~@proton/styles/scss/lib";
 
 .orderableHelper {
-	z-index: 30;
-	display: flex;
-	align-items: center;
+	z-index: map.get($z-indexes, 'up');
 	color: var(--text-norm);
 	background: var(--background-norm);
-	border: solid var(--border-norm);
-	border-block-width: 1px;
-	border-inline-width: 0;
+	border: 1px solid var(--border-norm);
+	border-radius: var(--border-radius-lg) !important;
+	box-shadow: var(--shadow-lifted);
 
-	/**
-     * We replace td with custom class here because we don't have direct access to it.
-     * See: https://github.com/ProtonMail/@proton/components/pull/113/files#r305374317
-     */
 	td {
-		flex: 1;
 		border: none;
-		block-size: 100%;
+	}
+}
+
+@include media("<=medium") {
+	.orderableTable {
+		tbody {
+			tr {
+				position: relative;
+				padding-inline-start: rem(40);
+				margin-block-end: -1px !important;
+
+				&:not(:last-child) {
+					border-end-start-radius: 0;
+					border-end-end-radius: 0;
+				}
+
+				&:not(:first-child) {
+					border-start-start-radius: 0;
+					border-start-end-radius: 0;
+				}
+			}
 
-		&:first-child {
-			flex-grow: 0;
-			flex-basis: rem(35);
+			td:first-child {
+				position: absolute;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				inset-inline-start: var(--space-2);
+				padding: 0;
+				block-size: calc(100% - var(--space-3) * 2);
+				inline-size: rem(24);
+			}
 		}
 	}
 }
diff --git a/packages/components/components/orderableTable/OrderableTable.tsx b/packages/components/components/orderableTable/OrderableTable.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, useRef } from 'react';
 import { SortableContainerProps } from 'react-sortable-hoc';
 
 import clsx from '@proton/utils/clsx';
@@ -15,12 +15,38 @@ interface Props extends SortableContainerProps {
     caption?: string;
 }
 
-const OrderableTable = ({ children = [], className = '', helperClassname, caption, ...props }: Props) => (
-    <OrderableContainer helperClass={clsx(['orderableHelper simple-table', helperClassname])} useDragHandle {...props}>
-        <Table caption={caption} className={clsx(['orderableTable', className])}>
-            {children}
-        </Table>
-    </OrderableContainer>
-);
+const OrderableTable = ({ children = [], className = '', helperClassname, caption, ...props }: Props) => {
+    let wrapperRef = useRef<HTMLDivElement | null>(null);
+
+    return (
+        <div ref={wrapperRef}>
+            <OrderableContainer
+                helperClass={clsx(['orderableHelper'])}
+                useDragHandle
+                helperContainer={() => {
+                    const tbodyElement = wrapperRef.current?.querySelector('tbody');
+                    return tbodyElement || document.body;
+                }}
+                onSortStart={({ node, helper }) => {
+                    // Set the width of each cell in the helper to match the corresponding cell in the node
+                    node.childNodes.forEach((child, index) => {
+                        if (child instanceof HTMLElement) {
+                            const helperChild = helper.childNodes[index];
+
+                            if (helperChild instanceof HTMLElement) {
+                                helperChild.style.width = `${child.offsetWidth}px`;
+                            }
+                        }
+                    });
+                }}
+                {...props}
+            >
+                <Table caption={caption} responsive="cards" className={clsx(['orderableTable', className])}>
+                    {children}
+                </Table>
+            </OrderableContainer>
+        </div>
+    );
+};
 
 export default OrderableTable;
diff --git a/packages/components/components/orderableTable/OrderableTableRow.tsx b/packages/components/components/orderableTable/OrderableTableRow.tsx
@@ -22,7 +22,7 @@ const OrderableTableRow = ({ index, cells = [], className, disableSort, ...rest
                 cells={[
                     <OrderableHandle key="icon">
                         <span className="flex" data-testid="table:order-icon">
-                            <Icon className="my-auto cursor-row-resize" name="text-align-justify" />
+                            <Icon className="my-auto cursor-grab color-hint" name="dots" />
                         </span>
                     </OrderableHandle>,
                     ...cells,

diff --git a/packages/components/containers/filters/FilterItemRow.tsx b/packages/components/containers/filters/FilterItemRow.tsx
@@ -99,20 +99,18 @@ function FilterItemRow({ filter, filters, index, onApplyFilter, ...rest }: Props
                 index={index}
                 cells={[
                     <div key="name" className="text-ellipsis max-w-full" title={Name}>
-                        {Name}
-                    </div>,
-                    <div key="toggle" className="w-1/10 flex">
                         <Toggle
                             id={`item-${ID}`}
                             loading={loading}
                             checked={Status === FILTER_STATUS.ENABLED}
                             onChange={handleChange}
+                            className="mr-2"
                         />
+                        {Name}
                     </div>,
                     <DropdownActions key="dropdown" size="small" list={list} />,
                 ]}
                 {...rest}
-                className="on-mobile-hide-td3"
             />
             {renderFilterModal && <FilterModal {...filterModalProps} filter={filter} />}
             {renderAdvancedFilterModal && <AdvancedFilterModal {...advancedFilterModalProps} filter={filter} />}

diff --git a/packages/components/containers/filters/FilterSortableList.tsx b/packages/components/containers/filters/FilterSortableList.tsx
@@ -21,12 +21,11 @@ const FilterSortableList = ({ items, onApplyFilter, ...rest }: Props) => (
                 <th scope="col" className="w-custom" style={{ '--w-custom': '5%' }}>
                     <span className="sr-only">{c('Settings/filters - table').t`Order`}</span>
                 </th>
-                <th scope="col">{c('Settings/filters - table').t`Name`}</th>
-                <th scope="col" className="w-custom hidden md:table-cell" style={{ '--w-custom': '8em' }}>
-                    {c('Settings/filters - table').t`Status`}
+                <th scope="col">
+                    <span className="sr-only">{c('Settings/filters - table').t`Name`}</span>
                 </th>
                 <th scope="col" className="w-custom" style={{ '--w-custom': '10em' }}>
-                    {c('Settings/filters - table').t`Action`}
+                    <span className="sr-only">{c('Settings/filters - table').t`Action`}</span>
                 </th>
             </tr>
         </OrderableTableHeader>

diff --git a/packages/components/containers/labels/FolderTreeViewList.tsx b/packages/components/containers/labels/FolderTreeViewList.tsx
@@ -151,10 +151,7 @@ const FolderTreeViewList = ({ items = [] }: Props) => {
                                 >
                                     <div className="treeview-item-name flex flex-nowrap items-center flex-1">
                                         {viewportWidth['<=small'] ? null : (
-                                            <Icon
-                                                name="text-align-justify"
-                                                className="mr-4 shrink-0 cursor-row-resize"
-                                            />
+                                            <Icon name="dots" className="mr-4 shrink-0 cursor-grab color-hint" />
                                         )}
                                         <FolderIcon
                                             className="mr-2 shrink-0"

diff --git a/packages/styles/assets/img/icons/sprite-icons.svg b/packages/styles/assets/img/icons/sprite-icons.svg