diff --git a/packages/common-components/src/Icons/icons/Sort.icon.tsx b/packages/common-components/src/Icons/icons/Sort.icon.tsx
new file mode 100644
index 0000000000..680e24b8df
--- /dev/null
+++ b/packages/common-components/src/Icons/icons/Sort.icon.tsx
@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as SortSvg } from "../svgs/sort.svg"
+
+export { SortSvg }
+
+export default createSvgIcon()
diff --git a/packages/common-components/src/Icons/index.ts b/packages/common-components/src/Icons/index.ts
index 6394b68825..e6286214f7 100644
--- a/packages/common-components/src/Icons/index.ts
+++ b/packages/common-components/src/Icons/index.ts
@@ -64,6 +64,7 @@ export { default as SearchIcon, SearchSvg } from "./icons/Search.icon"
export { default as SettingIcon, SettingSvg } from "./icons/Setting.icon"
export { default as ShareAltIcon, ShareAltSvg } from "./icons/ShareAlt.icon"
export { default as StarIcon, StarSvg } from "./icons/Star.icon"
+export { default as SortIcon, SortSvg } from "./icons/Sort.icon"
export { default as SunIcon, SunSvg } from "./icons/Sun.icon"
export { default as TableIcon, TableSvg } from "./icons/Table.icon"
export { default as UpdateIcon, UpdateSvg } from "./icons/Update.icon"
diff --git a/packages/common-components/src/Icons/svgs/sort.svg b/packages/common-components/src/Icons/svgs/sort.svg
new file mode 100644
index 0000000000..00c6c7e54e
--- /dev/null
+++ b/packages/common-components/src/Icons/svgs/sort.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx
index d6ed267e26..3da6328d7b 100644
--- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx
+++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx
@@ -21,7 +21,9 @@ import {
GridIcon,
TableIcon,
UploadSvg,
- PlusCircleSvg
+ PlusCircleSvg,
+ SortIcon,
+ CheckIcon
} from "@chainsafe/common-components"
import { useState } from "react"
import { useMemo } from "react"
@@ -52,6 +54,7 @@ import SharedUsers from "../../../Elements/SharedUsers"
import Menu from "../../../../UI-components/Menu"
import SharingExplainerModal from "../../../SharingExplainerModal"
import { useSharingExplainerModalFlag } from "../hooks/useSharingExplainerModalFlag"
+import { ListItemIcon, ListItemText } from "@material-ui/core"
const baseOperations: FileOperation[] = ["download", "info", "preview", "share"]
const readerOperations: FileOperation[] = [...baseOperations, "report"]
@@ -415,6 +418,14 @@ const FilesList = ({ isShared = false }: Props) => {
}
}
+ const toggleSortDirection = () => {
+ if (direction === "ascend") {
+ setDirection("descend")
+ } else {
+ setDirection("ascend")
+ }
+ }
+
// Previews
const setNextPreview = () => {
if (
@@ -882,7 +893,7 @@ const FilesList = ({ isShared = false }: Props) => {
className={clsx(loadingCurrentPath && classes.fadeOutLoading)}
testId="home"
>
- {desktop && (
+ {desktop ? (
@@ -928,6 +939,69 @@ const FilesList = ({ isShared = false }: Props) => {
{/* Menu */}
+ ) : (
+
+
+
+ {/* Checkbox */}
+
+
+ {t`Name`}
+
+
+ }
+ options={[{
+ contents: (
+
+ Sort By:
+
+ )
+ }, {
+ contents: (
+ <>
+ {column === "name" &&
+
+ }
+
+ Name
+
+
+ ),
+ onClick: () => setColumn("name")
+ }, {
+ contents: (
+ <>
+ {column === "date_uploaded" && }
+
+ Date Uploaded
+
+
+ ),
+ onClick: () => setColumn("date_uploaded")
+ }, {
+ contents: (
+ <>
+ {column === "size" && }
+
+ Size
+
+
+ ),
+ onClick: () => setColumn("size")
+ }]}
+ style={{ focusVisible: classes.focusVisible }}
+ />
+
+
+
)}
{items.map((file, index) => (
diff --git a/packages/files-ui/src/UI-components/Menu.tsx b/packages/files-ui/src/UI-components/Menu.tsx
index 6aef09ae4e..20a71464a0 100644
--- a/packages/files-ui/src/UI-components/Menu.tsx
+++ b/packages/files-ui/src/UI-components/Menu.tsx
@@ -1,5 +1,5 @@
import React, { useState, ReactNode, useMemo } from "react"
-import { Menu as MaterialMenu, MenuItem } from "@material-ui/core"
+import { Menu as MaterialMenu, MenuItem, PopoverOrigin } from "@material-ui/core"
import { makeStyles, createStyles } from "@chainsafe/common-theme"
import clsx from "clsx"
import { useCallback } from "react"
@@ -7,6 +7,8 @@ import { CSFTheme } from "../Themes/types"
interface Option {
contents: ReactNode
+ inset?: boolean
+ testId?: string
onClick?: () => void
}
@@ -22,6 +24,8 @@ interface Props {
options: Option[]
style?: CustomClasses
testId?: string
+ anchorOrigin?: PopoverOrigin
+ transformOrigin?: PopoverOrigin
}
const useStyles = makeStyles(({ constants }: CSFTheme) => {
@@ -40,7 +44,7 @@ const useStyles = makeStyles(({ constants }: CSFTheme) => {
}
})})
-export default function Menu({ icon, options, style, testId }: Props) {
+export default function Menu({ icon, options, style, testId, anchorOrigin, transformOrigin }: Props) {
const [anchorEl, setAnchorEl] = useState(null)
const open = useMemo(() => Boolean(anchorEl), [anchorEl])
const classes = useStyles()
@@ -68,12 +72,14 @@ export default function Menu({ icon, options, style, testId }: Props) {
open={open}
onClose={handleClose}
PopoverClasses={{ paper: classes.paper, root: style?.root }}
+ anchorOrigin={anchorOrigin}
+ transformOrigin={transformOrigin}
>
{options.map((option, index) => (