Merge branch 'develop' of github.com:outline/outline into feat/mass-import

app/components/Layout.js

@@ -65,6 +65,11 @@ class Layout extends React.Component<Props> {
     window.document.body.style.background = props.theme.background;
   }
 
+  @keydown("meta+.")
+  handleToggleSidebar() {
+    this.props.ui.toggleCollapsedSidebar();
+  }
+
   @keydown("shift+/")
   handleOpenKeyboardShortcuts() {
     if (this.props.ui.editMode) return;
@@ -119,7 +124,11 @@ class Layout extends React.Component<Props> {
             </Switch>
           )}
 
-          <Content auto justify="center" editMode={ui.editMode}>
+          <Content
+            auto
+            justify="center"
+            sidebarCollapsed={ui.editMode || ui.sidebarCollapsed}
+          >
             {this.props.children}
           </Content>
 
@@ -159,7 +168,10 @@ const Content = styled(Flex)`
   }
 
   ${breakpoint("tablet")`
-    margin-left: ${(props) => (props.editMode ? 0 : props.theme.sidebarWidth)};
+    margin-left: ${(props) =>
+      props.sidebarCollapsed
+        ? props.theme.sidebarCollapsedWidth
+        : props.theme.sidebarWidth};
   `};
 `;
 

app/components/Sidebar/Sidebar.js

@@ -8,6 +8,7 @@ import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Fade from "components/Fade";
 import Flex from "components/Flex";
+import CollapseToggle, { Button } from "./components/CollapseToggle";
 import usePrevious from "hooks/usePrevious";
 import useStores from "hooks/useStores";
 
@@ -30,10 +31,14 @@ function Sidebar({ location, children }: Props) {
 
   const content = (
     <Container
-      editMode={ui.editMode}
       mobileSidebarVisible={ui.mobileSidebarVisible}
+      collapsed={ui.editMode || ui.sidebarCollapsed}
       column
     >
+      <CollapseToggle
+        collapsed={ui.sidebarCollapsed}
+        onClick={ui.toggleCollapsedSidebar}
+      />
       <Toggle
         onClick={ui.toggleMobileSidebar}
         mobileSidebarVisible={ui.mobileSidebarVisible}
@@ -63,7 +68,7 @@ const Container = styled(Flex)`
   bottom: 0;
   width: 100%;
   background: ${(props) => props.theme.sidebarBackground};
-  transition: left 100ms ease-out,
+  transition: box-shadow, 100ms, ease-in-out, left 100ms ease-out,
     ${(props) => props.theme.backgroundTransition};
   margin-left: ${(props) => (props.mobileSidebarVisible ? 0 : "-100%")};
   z-index: ${(props) => props.theme.depths.sidebar};
@@ -90,10 +95,33 @@ const Container = styled(Flex)`
   }
 
   ${breakpoint("tablet")`
-    left: ${(props) => (props.editMode ? `-${props.theme.sidebarWidth}` : 0)};
+    left: ${(props) =>
+      props.collapsed
+        ? `calc(-${props.theme.sidebarWidth} + ${props.theme.sidebarCollapsedWidth})`
+        : 0};
     width: ${(props) => props.theme.sidebarWidth};
     margin: 0;
     z-index: 3;
+
+    &:hover,
+    &:focus-within {
+      left: 0;
+      box-shadow: ${(props) =>
+        props.collapsed ? "rgba(0, 0, 0, 0.2) 1px 0 4px" : "none"};
+
+      & ${Button} {
+        opacity: .75;
+      }
+
+      & ${Button}:hover {
+        opacity: 1;
+      }
+    }
+
+    &:not(:hover):not(:focus-within) > div {
+      opacity: ${(props) => (props.collapsed ? "0" : "1")};
+      transition: opacity 100ms ease-in-out;
+    }
   `};
 `;
 

app/components/Sidebar/components/CollapseToggle.js

@@ -0,0 +1,59 @@
+// @flow
+import { NextIcon, BackIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Tooltip from "components/Tooltip";
+import { meta } from "utils/keyboard";
+
+type Props = {|
+  collapsed: boolean,
+  onClick?: () => void,
+|};
+
+function CollapseToggle({ collapsed, ...rest }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip
+      tooltip={collapsed ? t("Expand") : t("Collapse")}
+      shortcut={`${meta}+.`}
+      delay={500}
+      placement="bottom"
+    >
+      <Button {...rest} aria-hidden>
+        {collapsed ? (
+          <NextIcon color="currentColor" />
+        ) : (
+          <BackIcon color="currentColor" />
+        )}
+      </Button>
+    </Tooltip>
+  );
+}
+
+export const Button = styled.button`
+  display: block;
+  position: absolute;
+  top: 28px;
+  right: 8px;
+  border: 0;
+  width: 24px;
+  height: 24px;
+  z-index: 1;
+  font-weight: 600;
+  color: ${(props) => props.theme.sidebarText};
+  background: ${(props) => props.theme.sidebarItemBackground};
+  transition: opacity 100ms ease-in-out;
+  border-radius: 4px;
+  opacity: 0;
+  cursor: pointer;
+  padding: 0;
+
+  &:hover {
+    color: ${(props) => props.theme.white};
+    background: ${(props) => props.theme.primary};
+  }
+`;
+
+export default CollapseToggle;

app/components/Sidebar/components/HeaderBlock.js

@@ -61,7 +61,7 @@ const Header = styled.button`
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  padding: 16px 24px;
+  padding: 20px 24px;
   position: relative;
   background: none;
   line-height: inherit;

app/stores/UiStore.js

@@ -23,6 +23,7 @@ class UiStore {
   @observable editMode: boolean = false;
   @observable tocVisible: boolean = false;
   @observable mobileSidebarVisible: boolean = false;
+  @observable sidebarCollapsed: boolean = false;
   @observable toasts: Map<string, Toast> = new Map();
 
   constructor() {
@@ -51,6 +52,7 @@ class UiStore {
 
     // persisted keys
     this.languagePromptDismissed = data.languagePromptDismissed;
+    this.sidebarCollapsed = data.sidebarCollapsed;
     this.tocVisible = data.tocVisible;
     this.theme = data.theme || "system";
 
@@ -107,6 +109,21 @@ class UiStore {
     this.activeCollectionId = undefined;
   };
 
+  @action
+  collapseSidebar = () => {
+    this.sidebarCollapsed = true;
+  };
+
+  @action
+  expandSidebar = () => {
+    this.sidebarCollapsed = false;
+  };
+
+  @action
+  toggleCollapsedSidebar = () => {
+    this.sidebarCollapsed = !this.sidebarCollapsed;
+  };
+
   @action
   showTableOfContents = () => {
     this.tocVisible = true;
@@ -190,6 +207,7 @@ class UiStore {
   get asJson(): string {
     return JSON.stringify({
       tocVisible: this.tocVisible,
+      sidebarCollapsed: this.sidebarCollapsed,
       languagePromptDismissed: this.languagePromptDismissed,
       theme: this.theme,
     });

server/utils/s3.js

@@ -59,7 +59,7 @@ export const makePolicy = (
     expiration: format(tomorrow, "YYYY-MM-DDTHH:mm:ss\\Z"),
   };
 
-  return new Buffer(JSON.stringify(policy)).toString("base64");
+  return Buffer.from(JSON.stringify(policy)).toString("base64");
 };
 
 export const getSignature = (policy: any) => {

shared/i18n/locales/en_US/translation.json

@@ -82,6 +82,8 @@
   "Change Language": "Change Language",
   "Dismiss": "Dismiss",
   "Keyboard shortcuts": "Keyboard shortcuts",
+  "Expand": "Expand",
+  "Collapse": "Collapse",
   "New collection": "New collection",
   "Collections": "Collections",
   "Untitled": "Untitled",

shared/styles/theme.js

@@ -48,6 +48,7 @@ const spacing = {
   vpadding: "1.5vw",
   hpadding: "1.875vw",
   sidebarWidth: "280px",
+  sidebarCollapsedWidth: "16px",
   sidebarMinWidth: "250px",
   sidebarMaxWidth: "350px",
 };