feat: optimise toolbar width responsive (#219)

teableio · Oct 25, 2023 · 3668080 · 3668080
1 parent 835aa55
commit 3668080
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/apps/nextjs-app/src/features/app/blocks/tool-bar/GridToolBar.tsx b/apps/nextjs-app/src/features/app/blocks/tool-bar/GridToolBar.tsx
@@ -26,7 +26,7 @@ export const GridToolBar: React.FC = () => {
         <Plus className="h-4 w-4" />
       </Button>
       <div className="mx-2 h-4 w-px shrink-0 bg-slate-200"></div>
-      <div className="flex flex-1 justify-between">
+      <div className="flex flex-1 justify-between overflow-x-auto scrollbar-none">
         <ViewOperators />
         <Others />
       </div>

diff --git a/apps/nextjs-app/src/features/app/blocks/tool-bar/Others.tsx b/apps/nextjs-app/src/features/app/blocks/tool-bar/Others.tsx
@@ -10,14 +10,14 @@ export const Others: React.FC = () => {
   const { toggleGraph } = useGraphStore();
   const driver = useDriver();
   return (
-    <div className="flex">
-      <ToolBarButton text="Share">
+    <div className="min-w-[100px] justify-end @container/toolbar-others @2xl/toolbar:flex @2xl/toolbar:flex-1">
+      <ToolBarButton text="Share" textClassName="@[234px]/toolbar-others:inline">
         <ArrowUpRight className="h-4 w-4" />
       </ToolBarButton>
 
       <Popover>
         <PopoverTrigger asChild>
-          <ToolBarButton text="Extensions">
+          <ToolBarButton text="Extensions" textClassName="@[234px]/toolbar-others:inline">
             <Component className="h-4 w-4" />
           </ToolBarButton>
         </PopoverTrigger>
@@ -36,7 +36,7 @@ export const Others: React.FC = () => {
 
       <Popover>
         <PopoverTrigger asChild>
-          <ToolBarButton text="API">
+          <ToolBarButton text="API" textClassName="@[234px]/toolbar-others:inline">
             <Code2 className="h-4 w-4" />
           </ToolBarButton>
         </PopoverTrigger>

diff --git a/apps/nextjs-app/src/features/app/blocks/tool-bar/ToolBarButton.tsx b/apps/nextjs-app/src/features/app/blocks/tool-bar/ToolBarButton.tsx
@@ -6,12 +6,13 @@ interface IToolBarButton {
   text: string;
   isActive?: boolean;
   className?: string;
+  textClassName?: string;
   children: React.ReactElement | React.ReactElement[];
 }
 
 const ToolBarButton = forwardRef<HTMLButtonElement, IToolBarButton>(
   (props: IToolBarButton, ref) => {
-    const { children, text, isActive = false, className, ...restProps } = props;
+    const { children, text, isActive = false, className, textClassName, ...restProps } = props;
 
     return (
       <Button
@@ -26,7 +27,14 @@ const ToolBarButton = forwardRef<HTMLButtonElement, IToolBarButton>(
         {...restProps}
       >
         {children}
-        <span className="hidden truncate @5xl/toolbar:inline">{text}</span>
+        <span
+          className={classNames(
+            'hidden truncate',
+            textClassName ? textClassName : '@2xl/toolbar:inline'
+          )}
+        >
+          {text}
+        </span>
       </Button>
     );
   }

diff --git a/apps/nextjs-app/src/features/app/blocks/tool-bar/ViewOperators.tsx b/apps/nextjs-app/src/features/app/blocks/tool-bar/ViewOperators.tsx
@@ -81,7 +81,7 @@ export const ViewOperators: React.FC = () => {
       </Filter>
       <Sort sorts={(view?.sort || null) as ISort} onChange={onSortChange}>
         {(text: string, isActive) => (
-          <ToolBarButton isActive={isActive} text={text} className="max-w-[120px]">
+          <ToolBarButton isActive={isActive} text={text}>
             <ArrowUpDown className="h-4 w-4 text-sm" />
           </ToolBarButton>
         )}