From 24a1eac804d0c1e62e0efae82e88583c0a5d5b64 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 13 Nov 2022 18:26:53 -0800 Subject: [PATCH] Sidebar improvements from comments branch (#4419) --- app/components/AuthenticatedLayout.tsx | 46 ++++++------- .../Sidebar/Right.tsx} | 52 +-------------- app/scenes/Document/components/History.tsx | 2 +- app/scenes/Document/components/Insights.tsx | 2 +- .../Document/components/SidebarLayout.tsx | 66 +++++++++++++++++++ app/utils/routeHelpers.ts | 2 + shared/i18n/locales/en_US/translation.json | 2 +- 7 files changed, 95 insertions(+), 77 deletions(-) rename app/{scenes/Document/components/RightSidebar.tsx => components/Sidebar/Right.tsx} (69%) create mode 100644 app/scenes/Document/components/SidebarLayout.tsx diff --git a/app/components/AuthenticatedLayout.tsx b/app/components/AuthenticatedLayout.tsx index c4bfa368d..684b1349b 100644 --- a/app/components/AuthenticatedLayout.tsx +++ b/app/components/AuthenticatedLayout.tsx @@ -8,6 +8,7 @@ import type { DocumentContextValue } from "~/components/DocumentContext"; import Layout from "~/components/Layout"; import RegisterKeyDown from "~/components/RegisterKeyDown"; import Sidebar from "~/components/Sidebar"; +import SidebarRight from "~/components/Sidebar/Right"; import SettingsSidebar from "~/components/Sidebar/Settings"; import type { Editor as TEditor } from "~/editor"; import usePolicy from "~/hooks/usePolicy"; @@ -19,6 +20,7 @@ import { newDocumentPath, settingsPath, matchDocumentHistory, + matchDocumentInsights, } from "~/utils/routeHelpers"; import Fade from "./Fade"; @@ -90,32 +92,26 @@ const AuthenticatedLayout: React.FC = ({ children }) => { ) : undefined; + const showHistory = !!matchPath(location.pathname, { + path: matchDocumentHistory, + }); + const showInsights = !!matchPath(location.pathname, { + path: matchDocumentInsights, + }); + const sidebarRight = ( - - - - - - - - + + {(showHistory || showInsights) && ( + + + + {showHistory && } + {showInsights && } + + + + )} + ); return ( diff --git a/app/scenes/Document/components/RightSidebar.tsx b/app/components/Sidebar/Right.tsx similarity index 69% rename from app/scenes/Document/components/RightSidebar.tsx rename to app/components/Sidebar/Right.tsx index 41628d0a8..fb6805416 100644 --- a/app/scenes/Document/components/RightSidebar.tsx +++ b/app/components/Sidebar/Right.tsx @@ -1,27 +1,19 @@ import { m } from "framer-motion"; import { observer } from "mobx-react"; -import { BackIcon } from "outline-icons"; import * as React from "react"; -import { useTranslation } from "react-i18next"; import styled, { useTheme } from "styled-components"; import breakpoint from "styled-components-breakpoint"; -import Button from "~/components/Button"; import Flex from "~/components/Flex"; -import Scrollable from "~/components/Scrollable"; import ResizeBorder from "~/components/Sidebar/components/ResizeBorder"; -import Tooltip from "~/components/Tooltip"; import usePersistedState from "~/hooks/usePersistedState"; type Props = React.HTMLAttributes & { - title: React.ReactNode; children: React.ReactNode; - onClose: React.MouseEventHandler; border?: boolean; }; -function RightSidebar({ title, onClose, children, border, className }: Props) { +function Right({ children, border, className }: Props) { const theme = useTheme(); - const { t } = useTranslation(); const [width, setWidth] = usePersistedState( "rightSidebarWidth", theme.sidebarWidth @@ -101,18 +93,7 @@ function RightSidebar({ title, onClose, children, border, className }: Props) { className={className} > -
- {title} - -
- {children} + {children} ` `}; `; -const Title = styled(Flex)` - font-size: 16px; - font-weight: 600; - text-align: center; - align-items: center; - justify-content: flex-start; - text-overflow: ellipsis; - white-space: nowrap; - user-select: none; - overflow: hidden; - width: 0; - flex-grow: 1; -`; - -const Header = styled(Flex)` - align-items: center; - position: relative; - padding: 16px 12px 16px 16px; - color: ${(props) => props.theme.text}; - flex-shrink: 0; -`; - -export default observer(RightSidebar); +export default observer(Right); diff --git a/app/scenes/Document/components/History.tsx b/app/scenes/Document/components/History.tsx index e51fbf0a5..dc3f11df8 100644 --- a/app/scenes/Document/components/History.tsx +++ b/app/scenes/Document/components/History.tsx @@ -9,7 +9,7 @@ import PaginatedEventList from "~/components/PaginatedEventList"; import useKeyDown from "~/hooks/useKeyDown"; import useStores from "~/hooks/useStores"; import { documentUrl } from "~/utils/routeHelpers"; -import Sidebar from "./RightSidebar"; +import Sidebar from "./SidebarLayout"; const EMPTY_ARRAY: Event[] = []; diff --git a/app/scenes/Document/components/Insights.tsx b/app/scenes/Document/components/Insights.tsx index bbbc65a70..bd4a40b21 100644 --- a/app/scenes/Document/components/Insights.tsx +++ b/app/scenes/Document/components/Insights.tsx @@ -17,7 +17,7 @@ import useKeyDown from "~/hooks/useKeyDown"; import useStores from "~/hooks/useStores"; import useTextSelection from "~/hooks/useTextSelection"; import { documentUrl } from "~/utils/routeHelpers"; -import Sidebar from "./RightSidebar"; +import Sidebar from "./SidebarLayout"; function Insights() { const { views, documents } = useStores(); diff --git a/app/scenes/Document/components/SidebarLayout.tsx b/app/scenes/Document/components/SidebarLayout.tsx new file mode 100644 index 000000000..034149b8e --- /dev/null +++ b/app/scenes/Document/components/SidebarLayout.tsx @@ -0,0 +1,66 @@ +import { observer } from "mobx-react"; +import { BackIcon } from "outline-icons"; +import * as React from "react"; +import { useTranslation } from "react-i18next"; +import styled from "styled-components"; +import Button from "~/components/Button"; +import Flex from "~/components/Flex"; +import Scrollable from "~/components/Scrollable"; +import Tooltip from "~/components/Tooltip"; + +type Props = React.HTMLAttributes & { + title: React.ReactNode; + children: React.ReactNode; + onClose: React.MouseEventHandler; + border?: boolean; +}; + +function SidebarLayout({ title, onClose, children }: Props) { + const { t } = useTranslation(); + + return ( + <> +
+ {title} + +
+ {children} + + ); +} + +const ForwardIcon = styled(BackIcon)` + transform: rotate(180deg); + flex-shrink: 0; +`; + +const Title = styled(Flex)` + font-size: 16px; + font-weight: 600; + text-align: center; + align-items: center; + justify-content: flex-start; + text-overflow: ellipsis; + white-space: nowrap; + user-select: none; + overflow: hidden; + width: 0; + flex-grow: 1; +`; + +const Header = styled(Flex)` + align-items: center; + position: relative; + padding: 16px 12px 16px 16px; + color: ${(props) => props.theme.text}; + flex-shrink: 0; +`; + +export default observer(SidebarLayout); diff --git a/app/utils/routeHelpers.ts b/app/utils/routeHelpers.ts index a190dc2ee..7d2024635 100644 --- a/app/utils/routeHelpers.ts +++ b/app/utils/routeHelpers.ts @@ -139,3 +139,5 @@ export const matchDocumentSlug = export const matchDocumentEdit = `/doc/${matchDocumentSlug}/edit`; export const matchDocumentHistory = `/doc/${matchDocumentSlug}/history/:revisionId?`; + +export const matchDocumentInsights = `/doc/${matchDocumentSlug}/insights`; diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json index 9bbcca9d5..541f75886 100644 --- a/shared/i18n/locales/en_US/translation.json +++ b/shared/i18n/locales/en_US/translation.json @@ -465,7 +465,6 @@ "Deleted by {{userName}}": "Deleted by {{userName}}", "Observing {{ userName }}": "Observing {{ userName }}", "Backlinks": "Backlinks", - "Close": "Close", "Anyone with the link <1>can view this document": "Anyone with the link <1>can view this document", "Share": "Share", "Share this document": "Share this document", @@ -481,6 +480,7 @@ "Users with edit permission will be redirected to the main app": "Users with edit permission will be redirected to the main app", "All users see the same publicly shared view": "All users see the same publicly shared view", "More options": "More options", + "Close": "Close", "{{ teamName }} is using Outline to share documents, please login to continue.": "{{ teamName }} is using Outline to share documents, please login to continue.", "Are you sure you want to delete the {{ documentTitle }} template?": "Are you sure you want to delete the {{ documentTitle }} template?", "Are you sure about that? Deleting the {{ documentTitle }} document will delete all of its history.": "Are you sure about that? Deleting the {{ documentTitle }} document will delete all of its history.",