Insights refinements

2022-11-13 14:47:20 -05:00
parent 3880a956a3
commit b60c66316a
5 changed files with 71 additions and 70 deletions
--- a/app/components/DocumentMetaWithViews.tsx
+++ b/app/components/DocumentMetaWithViews.tsx
@@ -2,13 +2,12 @@ import { LocationDescriptor } from "history";
 import { observer, useObserver } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
+import { Link, useRouteMatch } from "react-router-dom";
 import styled from "styled-components";
 import Document from "~/models/Document";
 import DocumentMeta from "~/components/DocumentMeta";
-import DocumentViews from "~/components/DocumentViews";
-import Popover from "~/components/Popover";
 import useStores from "~/hooks/useStores";
+import { documentUrl, documentInsightsUrl } from "~/utils/routeHelpers";
 import Fade from "./Fade";

 type Props = {
@@ -21,41 +20,32 @@ type Props = {
 function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
  const { views } = useStores();
  const { t } = useTranslation();
+  const match = useRouteMatch();
  const documentViews = useObserver(() => views.inDocument(document.id));
  const totalViewers = documentViews.length;
  const onlyYou = totalViewers === 1 && documentViews[0].user.id;
  const viewsLoadedOnMount = React.useRef(totalViewers > 0);

-  const popover = usePopoverState({
-    gutter: 8,
-    placement: "bottom",
-    modal: true,
-  });
-
+  const insightsUrl = documentInsightsUrl(document);
  const Wrapper = viewsLoadedOnMount.current ? React.Fragment : Fade;

  return (
    <Meta document={document} to={to} replace {...rest}>
      {totalViewers && !isDraft ? (
-        <PopoverDisclosure {...popover}>
-          {(props) => (
-            <Wrapper>
-              &nbsp;•&nbsp;
-              <a {...props}>
-                {t("Viewed by")}{" "}
-                {onlyYou
-                  ? t("only you")
-                  : `${totalViewers} ${
-                      totalViewers === 1 ? t("person") : t("people")
-                    }`}
-              </a>
-            </Wrapper>
-          )}
-        </PopoverDisclosure>
+        <Wrapper>
+          &nbsp;•&nbsp;
+          <Link
+            to={match.url === insightsUrl ? documentUrl(document) : insightsUrl}
+          >
+            {t("Viewed by")}{" "}
+            {onlyYou
+              ? t("only you")
+              : `${totalViewers} ${
+                  totalViewers === 1 ? t("person") : t("people")
+                }`}
+          </Link>
+        </Wrapper>
      ) : null}
-      <Popover {...popover} width={300} aria-label={t("Viewers")} tabIndex={0}>
-        <DocumentViews document={document} isOpen={popover.visible} />
-      </Popover>
    </Meta>
  );
 }
--- a/app/hooks/useTextSelection.ts
+++ b/app/hooks/useTextSelection.ts
@@ -9,14 +9,15 @@ import useEventListener from "./useEventListener";
 export default function useTextSelection() {
  const [selection, setSelection] = React.useState<string>("");

-  const handleMouse = React.useCallback(() => {
-    const selection = window.getSelection();
-    const text = selection?.toString();
-    setSelection(text ?? "");
-  }, []);
-
-  useEventListener("mousemove", handleMouse);
-  useEventListener("mouseup", handleMouse);
+  useEventListener(
+    "selectionchange",
+    () => {
+      const selection = window.getSelection();
+      const text = selection?.toString();
+      setSelection(text ?? "");
+    },
+    document
+  );

  return selection;
 }
--- a/app/scenes/Document/components/Insights.tsx
+++ b/app/scenes/Document/components/Insights.tsx
@@ -47,11 +47,13 @@ function Insights() {
            <Heading>{t("Stats")}</Heading>
            <Text type="secondary" size="small">
              <List>
-                <li>
-                  {t(`{{ count }} minute read`, {
-                    count: stats.total.readingTime,
-                  })}
-                </li>
+                {stats.total.words > 0 && (
+                  <li>
+                    {t(`{{ count }} minute read`, {
+                      count: stats.total.readingTime,
+                    })}
+                  </li>
+                )}
                <li>{t(`{{ count }} words`, { count: stats.total.words })}</li>
                <li>
                  {t(`{{ count }} characters`, {
@@ -80,24 +82,6 @@ function Insights() {
              </List>
            </Text>
          </Content>
-          <Content column>
-            <Heading>{t("Views")}</Heading>
-            <Text type="secondary" size="small">
-              {documentViews.length <= 1
-                ? t("No one else has viewed yet")
-                : t(`Viewed {{ count }} times by {{ teamMembers }} people`, {
-                    count: documentViews.reduce(
-                      (memo, view) => memo + view.count,
-                      0
-                    ),
-                    teamMembers: documentViews.length,
-                  })}
-              .
-            </Text>
-            <ListSpacing>
-              <DocumentViews document={document} isOpen />
-            </ListSpacing>
-          </Content>
          <Content column>
            <Heading>{t("Collaborators")}</Heading>
            <Text type="secondary" size="small">
@@ -129,6 +113,26 @@ function Insights() {
              />
            </ListSpacing>
          </Content>
+          <Content column>
+            <Heading>{t("Views")}</Heading>
+            <Text type="secondary" size="small">
+              {documentViews.length <= 1
+                ? t("No one else has viewed yet")
+                : t(`Viewed {{ count }} times by {{ teamMembers }} people`, {
+                    count: documentViews.reduce(
+                      (memo, view) => memo + view.count,
+                      0
+                    ),
+                    teamMembers: documentViews.length,
+                  })}
+              .
+            </Text>
+            {documentViews.length > 1 && (
+              <ListSpacing>
+                <DocumentViews document={document} isOpen />
+              </ListSpacing>
+            )}
+          </Content>
        </>
      ) : null}
    </Sidebar>
@@ -145,7 +149,7 @@ function useTextStats(text: string, selectedText: string) {
      words: numTotalWords,
      characters: text.length,
      emoji: matches.length ?? 0,
-      readingTime: Math.floor(numTotalWords / 200),
+      readingTime: Math.max(1, Math.floor(numTotalWords / 200)),
    },
    selected: {
      words: countWords(selectedText),
@@ -176,7 +180,7 @@ const List = styled("ul")`
    display: inline-block;
    font-weight: 600;
    color: ${(props) => props.theme.textTertiary};
-    width: 8px;
+    width: 10px;
  }
 `;

--- a/app/scenes/Document/components/RightSidebar.tsx
+++ b/app/scenes/Document/components/RightSidebar.tsx
@@ -2,12 +2,14 @@ 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<HTMLDivElement> & {
@@ -19,6 +21,7 @@ type Props = React.HTMLAttributes<HTMLDivElement> & {

 function RightSidebar({ title, onClose, children, border, className }: Props) {
  const theme = useTheme();
+  const { t } = useTranslation();
  const [width, setWidth] = usePersistedState(
    "rightSidebarWidth",
    theme.sidebarWidth
@@ -100,12 +103,14 @@ function RightSidebar({ title, onClose, children, border, className }: Props) {
      <Position style={style} column>
        <Header>
          <Title>{title}</Title>
-          <Button
-            icon={<ForwardIcon />}
-            onClick={onClose}
-            borderOnHover
-            neutral
-          />
+          <Tooltip tooltip={t("Close")} shortcut="Esc" delay={500}>
+            <Button
+              icon={<ForwardIcon />}
+              onClick={onClose}
+              borderOnHover
+              neutral
+            />
+          </Tooltip>
        </Header>
        <Scrollable topShadow>{children}</Scrollable>
        <ResizeBorder
--- a/shared/i18n/locales/en_US/translation.json
+++ b/shared/i18n/locales/en_US/translation.json
@@ -445,16 +445,16 @@
  "{{ count }} words selected_plural": "{{ count }} words selected",
  "{{ count }} characters selected": "{{ count }} character selected",
  "{{ count }} characters selected_plural": "{{ count }} characters selected",
-  "Views": "Views",
-  "No one else has viewed yet": "No one else has viewed yet",
-  "Viewed {{ count }} times by {{ teamMembers }} people": "Viewed {{ count }} time by {{ teamMembers }} people",
-  "Viewed {{ count }} times by {{ teamMembers }} people_plural": "Viewed {{ count }} times by {{ teamMembers }} people",
  "Collaborators": "Collaborators",
  "Created": "Created",
  "Last updated": "Last updated",
  "Creator": "Creator",
  "Last edited": "Last edited",
  "Previously edited": "Previously edited",
+  "Views": "Views",
+  "No one else has viewed yet": "No one else has viewed yet",
+  "Viewed {{ count }} times by {{ teamMembers }} people": "Viewed {{ count }} time by {{ teamMembers }} people",
+  "Viewed {{ count }} times by {{ teamMembers }} people_plural": "Viewed {{ count }} times by {{ teamMembers }} people",
  "Sorry, it looks like you don’t have permission to access the document": "Sorry, it looks like you don’t have permission to access the document",
  "Sorry, the last change could not be persisted – please reload the page": "Sorry, the last change could not be persisted – please reload the page",
  "This template will be permanently deleted in <2></2> unless restored.": "This template will be permanently deleted in <2></2> unless restored.",
@@ -465,6 +465,7 @@
  "Deleted by {{userName}}": "Deleted by {{userName}}",
  "Observing {{ userName }}": "Observing {{ userName }}",
  "Backlinks": "Backlinks",
+  "Close": "Close",
  "Anyone with the link <1></1>can view this document": "Anyone with the link <1></1>can view this document",
  "Share": "Share",
  "Share this document": "Share this document",