Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add sorting header for mobile file browser #1786

Merged
merged 15 commits into from
Dec 6, 2021
Merged

add sorting header for mobile file browser #1786

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
4dfc854
add sorting header for mobile file browser
FSM1 Nov 29, 2021
cd9ba62
lingui extract
actions-user Nov 29, 2021
6bc046a
Merge branch 'dev' into feat/file-browser-sorting-mobile-1672
Tbaut Nov 30, 2021
86e580b
fix lint
FSM1 Nov 30, 2021
4e1475f
add translations
FSM1 Nov 30, 2021
2e1a0ed
Merge branch 'dev' into feat/file-browser-sorting-mobile-1672
Tbaut Dec 1, 2021
6b37ee0
Merge remote-tracking branch 'origin/dev' into feat/file-browser-sort…
FSM1 Dec 2, 2021
31f7b51
Merge branch 'dev' into feat/file-browser-sorting-mobile-1672
FSM1 Dec 2, 2021
9442fc4
Merge branch 'dev' into feat/file-browser-sorting-mobile-1672
FSM1 Dec 2, 2021
7a8c0b4
Merge branch 'dev' into feat/file-browser-sorting-mobile-1672
FSM1 Dec 3, 2021
ca3d282
Merge branch 'dev' into feat/file-browser-sorting-mobile-1672
FSM1 Dec 3, 2021
e32dbc5
update sorting
FSM1 Dec 6, 2021
b502c4e
lingui extract
actions-user Dec 6, 2021
1a59752
remove unused classes
FSM1 Dec 6, 2021
b5d66c9
remove unnecessary code
FSM1 Dec 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions packages/common-components/src/Icons/icons/Sort.icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(<SortSvg />)
1 change: 1 addition & 0 deletions packages/common-components/src/Icons/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
1 change: 1 addition & 0 deletions packages/common-components/src/Icons/svgs/sort.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
82 changes: 80 additions & 2 deletions packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@ import {
GridIcon,
TableIcon,
UploadSvg,
PlusCircleSvg
PlusCircleSvg,
SortIcon,
CheckIcon
} from "@chainsafe/common-components"
import { useState } from "react"
import { useMemo } from "react"
Expand Down Expand Up @@ -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"]
Expand Down Expand Up @@ -294,6 +297,10 @@ const useStyles = makeStyles(
marginRight: constants.generalUnit * 1.5,
fill: constants.previewModal.menuItemIconColor
},
sortMenuIcon: {
minWidth: 30,
fill: constants.previewModal.menuItemIconColor
},
fileNameHeader: {
whiteSpace: "nowrap",
overflow: "hidden",
Expand Down Expand Up @@ -415,6 +422,14 @@ const FilesList = ({ isShared = false }: Props) => {
}
}

const toggleSortDirection = () => {
if (direction === "ascend") {
setDirection("descend")
} else {
setDirection("ascend")
}
}

// Previews
const setNextPreview = () => {
if (
Expand Down Expand Up @@ -882,7 +897,7 @@ const FilesList = ({ isShared = false }: Props) => {
className={clsx(loadingCurrentPath && classes.fadeOutLoading)}
testId="home"
>
{desktop && (
{desktop ? (
<TableHead>
<TableRow type="grid"
className={classes.tableRow}>
Expand Down Expand Up @@ -928,6 +943,69 @@ const FilesList = ({ isShared = false }: Props) => {
<TableHeadCell>{/* Menu */}</TableHeadCell>
</TableRow>
</TableHead>
) : (
<TableHead>
<TableRow type="grid"
className={classes.tableRow}>
<TableHeadCell>
{/* Checkbox */}
</TableHeadCell>
<TableHeadCell
align='left'
onSortChange={toggleSortDirection}
sortButtons
sortDirection={direction}
>
{t`Name`}
</TableHeadCell>
<TableHeadCell align='right'>
<Menu
testId='fileDropdown'
icon={<SortIcon className={classes.dropdownIcon} />}
options={[{
contents: (
<ListItemText inset>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we really need to use the material imports here if we want to get rid of the dependency in Files ultimately?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It saves us from having to reimplement the inset prop. This would just be an update of where the component is imported from, once we actually move forward with the upgrade.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hehe yeah that'll probably be on me, hence my complaints 😅

<b><Trans>Sort By:</Trans></b>
</ListItemText>
)
}, {
contents: (
<>
{column === "name" && <ListItemIcon classes={{ root: classes.sortMenuIcon }}>
<CheckIcon />
</ListItemIcon>}
<ListItemText inset={column !== "name"}>
<Trans>Name</Trans>
</ListItemText>
</>
),
onClick: () => setColumn("name")
}, {
contents: (
<>
{column === "date_uploaded" && <ListItemIcon><CheckIcon /></ListItemIcon>}
<ListItemText inset={column !== "date_uploaded"}>
<Trans>Date Uploaded</Trans>
</ListItemText>
</>
),
onClick: () => setColumn("date_uploaded")
}, {
contents: (
<>
{column === "size" && <ListItemIcon><CheckIcon /></ListItemIcon>}
<ListItemText inset={column !== "size"}>
<Trans>Size</Trans>
</ListItemText>
</>
),
onClick: () => setColumn("size")
}]}
style={{ focusVisible: classes.focusVisible }}
/>
</TableHeadCell>
</TableRow>
</TableHead>
)}
<TableBody>
{items.map((file, index) => (
Expand Down
38 changes: 23 additions & 15 deletions packages/files-ui/src/UI-components/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import React, { useState, ReactNode, useMemo } from "react"
import { Menu as MaterialMenu, MenuItem } from "@material-ui/core"
import { List, ListItem, Menu as MaterialMenu, PopoverOrigin } from "@material-ui/core"
import { makeStyles, createStyles } from "@chainsafe/common-theme"
import clsx from "clsx"
import { useCallback } from "react"
import { CSFTheme } from "../Themes/types"

interface Option {
contents: ReactNode
inset?: boolean
testId?: string
onClick?: () => void
}

Expand All @@ -22,6 +24,8 @@ interface Props {
options: Option[]
style?: CustomClasses
testId?: string
anchorOrigin?: PopoverOrigin
transformOrigin?: PopoverOrigin
}

const useStyles = makeStyles(({ constants }: CSFTheme) => {
Expand All @@ -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()
Expand Down Expand Up @@ -68,20 +72,24 @@ 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) => (
<MenuItem
key={index}
onClick={() => {
handleClose()
option.onClick && option.onClick()
}}
focusVisibleClassName={clsx(style?.focusVisible)}
className={classes.options}
>
{option.contents}
</MenuItem>
))}
<List>
{options.map((option, index) => (
<ListItem
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure what this adds, but the example from mui does not use ListItem, but rather MenuItem

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The example you referenced is for MUI v5. See here for documentation: https://v4.mui.com/components/menus/

List and MenuList are nearly identical, with MenuList just providing some accessibility benefits.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Either case, I took a look at the markup generated, and Menu already handles this internally, so I have removed the <List> wrapper.

key={index}
onClick={() => {
option.onClick && handleClose()
option.onClick && option.onClick()
}}
focusVisibleClassName={clsx(style?.focusVisible)}
className={classes.options}
>
{option.contents}
</ListItem>
))}
</List>
</MaterialMenu>
</div>
)
Expand Down
3 changes: 3 additions & 0 deletions packages/files-ui/src/locales/de/messages.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,9 @@ msgstr ""
msgid "Data restored successfully"
msgstr ""

msgid "Date Uploaded"
msgstr ""

msgid "Date uploaded"
msgstr "Hochgeladen am"

Expand Down
3 changes: 3 additions & 0 deletions packages/files-ui/src/locales/en/messages.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,9 @@ msgstr "Data moved to bin successfully"
msgid "Data restored successfully"
msgstr "Data restored successfully"

msgid "Date Uploaded"
msgstr "Date Uploaded"

msgid "Date uploaded"
msgstr "Date uploaded"

Expand Down
3 changes: 3 additions & 0 deletions packages/files-ui/src/locales/es/messages.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,9 @@ msgstr ""
msgid "Data restored successfully"
msgstr ""

msgid "Date Uploaded"
msgstr ""

msgid "Date uploaded"
msgstr "Fecha de subida"

Expand Down
3 changes: 3 additions & 0 deletions packages/files-ui/src/locales/fr/messages.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,9 @@ msgstr "Les données ont été déplacées vers la poubelle avec succès"
msgid "Data restored successfully"
msgstr "Données restaurées avec succès"

msgid "Date Uploaded"
msgstr ""

msgid "Date uploaded"
msgstr "Téléversé le"

Expand Down
3 changes: 3 additions & 0 deletions packages/files-ui/src/locales/no/messages.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,9 @@ msgstr ""
msgid "Data restored successfully"
msgstr ""

msgid "Date Uploaded"
msgstr ""

msgid "Date uploaded"
msgstr "Dato opplastet"

Expand Down