From 61081ca6b90bb033d9b747099fd99ad3d70926da Mon Sep 17 00:00:00 2001
From: Andy Chen <44120813+achen5671@users.noreply.github.com>
Date: Thu, 15 Aug 2024 13:09:16 -0400
Subject: [PATCH] new viewmode setting (#10976)

---
 .../editor/panels/Assets/container/index.tsx  | 47 ++++++++++++---
 .../editor/panels/Files/container/index.tsx   | 57 -------------------
 .../src/primitives/tailwind/Slider/index.tsx  |  2 +-
 3 files changed, 41 insertions(+), 65 deletions(-)

diff --git a/packages/ui/src/components/editor/panels/Assets/container/index.tsx b/packages/ui/src/components/editor/panels/Assets/container/index.tsx
index 75977e7330..75677ce558 100644
--- a/packages/ui/src/components/editor/panels/Assets/container/index.tsx
+++ b/packages/ui/src/components/editor/panels/Assets/container/index.tsx
@@ -50,16 +50,18 @@ import { FiRefreshCcw } from 'react-icons/fi'
 import { HiDotsVertical } from 'react-icons/hi'
 import { HiMagnifyingGlass, HiOutlineFolder, HiOutlinePlusCircle } from 'react-icons/hi2'
 import { IoIosArrowDown, IoIosArrowForward } from 'react-icons/io'
-import { IoArrowBack } from 'react-icons/io5'
+import { IoArrowBack, IoSettingsSharp } from 'react-icons/io5'
 import { twMerge } from 'tailwind-merge'
 import Button from '../../../../../primitives/tailwind/Button'
 import Input from '../../../../../primitives/tailwind/Input'
 import LoadingView from '../../../../../primitives/tailwind/LoadingView'
+import Slider from '../../../../../primitives/tailwind/Slider'
 import Tooltip from '../../../../../primitives/tailwind/Tooltip'
 import { ContextMenu } from '../../../../tailwind/ContextMenu'
 import InfiniteScroll from '../../../../tailwind/InfiniteScroll'
+import { Popup } from '../../../../tailwind/Popup'
+import InputGroup from '../../../input/Group'
 import DeleteFileModal from '../../Files/browserGrid/DeleteFileModal'
-import { ViewModeSettings } from '../../Files/container'
 import { FileIcon } from '../../Files/icon'
 import { FileUploadProgress } from '../../Files/upload/FileUploadProgress'
 import { AssetIconMap } from '../icons'
@@ -125,6 +127,37 @@ function mapCategoriesHelper(collapsedCategories: { [key: string]: boolean }) {
   return result
 }
 
+const ViewModeSettings = () => {
+  const { t } = useTranslation()
+
+  const viewModeSettings = useHookstate(getMutableState(FilesViewModeSettings))
+
+  return (
+    <Popup
+      contentStyle={{ background: '#15171b', border: 'solid', borderColor: '#5d646c' }}
+      position={'bottom left'}
+      trigger={
+        <Tooltip content={t('editor:layout.filebrowser.view-mode.settings.name')}>
+          <Button startIcon={<IoSettingsSharp />} className="h-7 w-7 rounded-lg bg-[#2F3137] p-0" />
+        </Tooltip>
+      }
+    >
+      <div className="flex flex-col">
+        <InputGroup label={t('editor:layout.filebrowser.view-mode.settings.fontSize')}>
+          <Slider
+            min={10}
+            max={100}
+            step={0.5}
+            value={viewModeSettings.list.fontSize.value}
+            onChange={viewModeSettings.list.fontSize.set}
+            onRelease={viewModeSettings.list.fontSize.set}
+          />
+        </InputGroup>
+      </div>
+    </Popup>
+  )
+}
+
 const ResourceFile = (props: {
   resource: StaticResourceType
   selected: boolean
@@ -175,10 +208,10 @@ const ResourceFile = (props: {
         })
       }
       onContextMenu={handleContextMenu}
-      className="mb-3 flex h-auto w-40 cursor-pointer flex-col items-center text-center"
+      className="mb-3 flex h-auto min-w-40 cursor-pointer flex-col items-center text-center"
     >
       <span
-        className={`mx-4 mb-3 mt-2 h-40 w-40 font-['Figtree'] ${
+        className={`mx-4 mb-3 mt-2 h-full w-full font-['Figtree'] ${
           selected ? 'rounded-lg border border-blue-primary bg-theme-studio-surface' : ''
         }`}
       >
@@ -306,7 +339,7 @@ const AssetCategory = (props: {
     // TODO: add preview functionality
   }
 
-  const viewModeSettings = useHookstate(getMutableState(FilesViewModeSettings))
+  const fontSize = useHookstate(getMutableState(FilesViewModeSettings).list.fontSize).value
 
   return (
     <div
@@ -316,8 +349,8 @@ const AssetCategory = (props: {
         category.depth === 0 ? 'min-h-9' : 'min-h-7'
       )}
       style={{
-        height: `${viewModeSettings.list.fontSize.value}px`,
-        fontSize: `${viewModeSettings.list.fontSize.value}px`
+        height: `${fontSize}px`,
+        fontSize: `${fontSize}px`
       }}
     >
       <div
diff --git a/packages/ui/src/components/editor/panels/Files/container/index.tsx b/packages/ui/src/components/editor/panels/Files/container/index.tsx
index 5793b4bc76..4acf5da7e3 100644
--- a/packages/ui/src/components/editor/panels/Files/container/index.tsx
+++ b/packages/ui/src/components/editor/panels/Files/container/index.tsx
@@ -738,63 +738,6 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
     )
   }
 
-  const ViewModeSettings = () => {
-    const viewModeSettings = useHookstate(getMutableState(FilesViewModeSettings))
-    return (
-      <Popup
-        contentStyle={{ background: '#15171b', border: 'solid', borderColor: '#5d646c' }}
-        position={'bottom left'}
-        trigger={
-          <Tooltip content={t('editor:layout.filebrowser.view-mode.settings.name')}>
-            <Button startIcon={<IoSettingsSharp />} className="h-7 w-7 rounded-lg bg-[#2F3137] p-0" />
-          </Tooltip>
-        }
-      >
-        {filesViewMode.value === 'icons' ? (
-          <InputGroup label={t('editor:layout.filebrowser.view-mode.settings.iconSize')}>
-            <Slider
-              min={10}
-              max={100}
-              step={0.5}
-              value={viewModeSettings.icons.iconSize.value}
-              onChange={viewModeSettings.icons.iconSize.set}
-              onRelease={viewModeSettings.icons.iconSize.set}
-            />
-          </InputGroup>
-        ) : (
-          <>
-            <InputGroup label={t('editor:layout.filebrowser.view-mode.settings.fontSize')}>
-              <Slider
-                min={10}
-                max={100}
-                step={0.5}
-                value={viewModeSettings.list.fontSize.value}
-                onChange={viewModeSettings.list.fontSize.set}
-                onRelease={viewModeSettings.list.fontSize.set}
-              />
-            </InputGroup>
-
-            <div>
-              <div className="mt-1 flex flex-auto text-white">
-                <label>{t('editor:layout.filebrowser.view-mode.settings.select-listColumns')}</label>
-              </div>
-              <div className="flex-col">
-                {availableTableColumns.map((column) => (
-                  <InputGroup label={t(`editor:layout.filebrowser.table-list.headers.${column}`)}>
-                    <BooleanInput
-                      value={viewModeSettings.list.selectedTableColumns[column].value}
-                      onChange={(value) => viewModeSettings.list.selectedTableColumns[column].set(value)}
-                    />
-                  </InputGroup>
-                ))}
-              </div>
-            </div>
-          </>
-        )}
-      </Popup>
-    )
-  }
-
   return (
     <>
       <div className="mb-1 flex h-9 items-center gap-2 bg-theme-surface-main">
diff --git a/packages/ui/src/primitives/tailwind/Slider/index.tsx b/packages/ui/src/primitives/tailwind/Slider/index.tsx
index e4d19ae81d..161fe46ee8 100644
--- a/packages/ui/src/primitives/tailwind/Slider/index.tsx
+++ b/packages/ui/src/primitives/tailwind/Slider/index.tsx
@@ -63,7 +63,7 @@ const Slider = ({ value, min = 0, max = 100, step = 1, width = 200, onChange, on
   }
 
   return (
-    <div className="flex flex-wrap items-center gap-2">
+    <div className="flex flex-nowrap items-center gap-2">
       <input
         min={min}
         max={max}