diff --git a/app/components/Scene.tsx b/app/components/Scene.tsx index 3e543bb41..3c28c38b8 100644 --- a/app/components/Scene.tsx +++ b/app/components/Scene.tsx @@ -5,12 +5,21 @@ import Header from "~/components/Header"; import PageTitle from "~/components/PageTitle"; type Props = { + /** An icon to display in the header when content has scrolled past the title */ icon?: React.ReactNode; + /** The title of the scene */ title?: React.ReactNode; + /** The title of the scene, as text – only required if the title prop is not plain text */ textTitle?: string; + /** A component to display on the left side of the header */ left?: React.ReactNode; + /** A component to display on the right side of the header */ actions?: React.ReactNode; + /** Whether to center the content horizontally with the standard maximum width (default: true) */ centered?: boolean; + /** Whether to use the full width of the screen (default: false) */ + wide?: boolean; + /** The content of the scene */ children?: React.ReactNode; }; @@ -22,8 +31,9 @@ const Scene: React.FC = ({ left, children, centered, + wide, }: Props) => ( - +
= ({ actions={actions} left={left} /> - {centered !== false ? ( + {centered !== false && wide !== true ? ( {children} ) : ( children @@ -47,8 +57,9 @@ const Scene: React.FC = ({ ); -const FillWidth = styled.div` +const FillWidth = styled.div<{ $wide?: boolean }>` width: 100%; + ${(props) => props.$wide && `padding: 0px 32px 16px;`} `; export default Scene; diff --git a/app/models/Share.ts b/app/models/Share.ts index ea1d7b850..75d5735a3 100644 --- a/app/models/Share.ts +++ b/app/models/Share.ts @@ -27,6 +27,10 @@ class Share extends Model { @observable urlId: string; + @Field + @observable + domain: string; + @observable documentTitle: string; diff --git a/app/scenes/Settings/Shares.tsx b/app/scenes/Settings/Shares.tsx index 0a69eb636..2ee133a83 100644 --- a/app/scenes/Settings/Shares.tsx +++ b/app/scenes/Settings/Shares.tsx @@ -6,6 +6,7 @@ import { useTranslation, Trans } from "react-i18next"; import { Link } from "react-router-dom"; import { PAGINATION_SYMBOL } from "~/stores/base/Store"; import Share from "~/models/Share"; +import Fade from "~/components/Fade"; import Heading from "~/components/Heading"; import Notice from "~/components/Notice"; import Scene from "~/components/Scene"; @@ -67,7 +68,7 @@ function Shares() { }, [shares.orderedData, shareIds]); return ( - }> + } wide> {t("Shared Links")} {can.update && !canShareDocuments && ( @@ -93,15 +94,19 @@ function Shares() { - + {data.length ? ( + + + + ) : null} ); } diff --git a/app/scenes/Settings/components/SharesTable.tsx b/app/scenes/Settings/components/SharesTable.tsx index 52032c0e0..e39af90b9 100644 --- a/app/scenes/Settings/components/SharesTable.tsx +++ b/app/scenes/Settings/components/SharesTable.tsx @@ -8,6 +8,7 @@ import Avatar from "~/components/Avatar"; import Flex from "~/components/Flex"; import TableFromParams from "~/components/TableFromParams"; import Time from "~/components/Time"; +import Tooltip from "~/components/Tooltip"; import ShareMenu from "~/menus/ShareMenu"; type Props = Omit, "columns"> & { @@ -15,9 +16,10 @@ type Props = Omit, "columns"> & { canManage: boolean; }; -function SharesTable({ canManage, ...rest }: Props) { +function SharesTable({ canManage, data, ...rest }: Props) { const { t } = useTranslation(); const theme = useTheme(); + const hasDomain = data.some((share) => share.domain); const columns = React.useMemo( () => @@ -29,23 +31,28 @@ function SharesTable({ canManage, ...rest }: Props) { disableSortBy: true, Cell: observer(({ value }: { value: string }) => <>{value}), }, + { + id: "who", + Header: t("Shared by"), + accessor: "createdById", + disableSortBy: true, + Cell: observer( + ({ row }: { value: string; row: { original: Share } }) => ( + + {row.original.createdBy && ( + + )} + {row.original.createdBy.name} + + ) + ), + }, { id: "createdAt", Header: t("Date shared"), accessor: "createdAt", - Cell: observer( - ({ value, row }: { value: string; row: { original: Share } }) => - value ? ( - - {row.original.createdBy && ( - - )} - - ) : null + Cell: observer(({ value }: { value: string }) => + value ?