From 05f48f054bfb7b69aa25850c23e172873886c9d6 Mon Sep 17 00:00:00 2001 From: Guilherme Diniz Date: Fri, 21 Aug 2020 20:58:57 -0300 Subject: [PATCH 1/3] feat: Add Header to Document History Sidebar --- .../DocumentHistory/DocumentHistory.js | 52 +++++++++++++++++-- 1 file changed, 48 insertions(+), 4 deletions(-) diff --git a/app/components/DocumentHistory/DocumentHistory.js b/app/components/DocumentHistory/DocumentHistory.js index 778f61fa8..b7eb3bd5d 100644 --- a/app/components/DocumentHistory/DocumentHistory.js +++ b/app/components/DocumentHistory/DocumentHistory.js @@ -1,20 +1,23 @@ // @flow import ArrowKeyNavigation from "boundless-arrow-key-navigation"; -import { observable, action } from "mobx"; -import { observer, inject } from "mobx-react"; +import { action, observable } from "mobx"; +import { inject, observer } from "mobx-react"; +import { CloseIcon } from "outline-icons"; import * as React from "react"; -import { type RouterHistory, type Match } from "react-router-dom"; +import { type Match, Redirect, type RouterHistory } from "react-router-dom"; import { Waypoint } from "react-waypoint"; import styled from "styled-components"; import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore"; import DocumentsStore from "stores/DocumentsStore"; import RevisionsStore from "stores/RevisionsStore"; +import Document from "models/Document"; import Flex from "components/Flex"; import { ListPlaceholder } from "components/LoadingPlaceholder"; +import Button from "../Button"; import Revision from "./components/Revision"; -import { documentHistoryUrl } from "utils/routeHelpers"; +import { documentHistoryUrl, documentUrl } from "utils/routeHelpers"; type Props = { match: Match, @@ -29,6 +32,7 @@ class DocumentHistory extends React.Component { @observable isFetching: boolean = false; @observable offset: number = 0; @observable allowLoadMore: boolean = true; + @observable redirectTo: ?string; async componentDidMount() { await this.loadMoreResults(); @@ -86,15 +90,30 @@ class DocumentHistory extends React.Component { return this.props.revisions.getDocumentRevisions(document.id); } + onCloseHistory = (document: Document) => { + this.redirectTo = documentUrl(document); + }; + render() { const document = this.props.documents.getByUrl( this.props.match.params.documentSlug ); const showLoading = (!this.isLoaded && this.isFetching) || !document; + if (this.redirectTo) return ; + return ( +
+ History + } + onClick={() => this.onCloseHistory(document)} + neutral + borderOnHover + /> +
{showLoading ? ( @@ -146,4 +165,29 @@ const Sidebar = styled(Flex)` z-index: 1; `; +const Title = styled.h3` + max-width: 90%; + overflow: hidden; + text-overflow: ellipsis; + font-size: 20px; + margin-top: 0; + margin-bottom: 0.25em; + white-space: nowrap; + color: ${(props) => props.theme.text}; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, + Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; +`; + +const Header = styled(Flex)` + position: relative; + padding: 20px; + border-bottom: 1px solid ${(props) => props.theme.divider}; +`; + +const CloseButton = styled(Button)` + position: absolute; + top: 10px; + right: 10px; +`; + export default inject("documents", "revisions")(DocumentHistory); From 197cdff6c31d766bfa89ac5eb00cb8a13ae69a79 Mon Sep 17 00:00:00 2001 From: Guilherme Diniz Date: Tue, 25 Aug 2020 17:22:13 -0300 Subject: [PATCH 2/3] fix layout issues --- .../DocumentHistory/DocumentHistory.js | 28 +++++++++++-------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/app/components/DocumentHistory/DocumentHistory.js b/app/components/DocumentHistory/DocumentHistory.js index b7eb3bd5d..b94d664ce 100644 --- a/app/components/DocumentHistory/DocumentHistory.js +++ b/app/components/DocumentHistory/DocumentHistory.js @@ -8,6 +8,7 @@ import { type Match, Redirect, type RouterHistory } from "react-router-dom"; import { Waypoint } from "react-waypoint"; import styled from "styled-components"; +import breakpoint from "styled-components-breakpoint"; import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore"; import DocumentsStore from "stores/DocumentsStore"; import RevisionsStore from "stores/RevisionsStore"; @@ -105,7 +106,7 @@ class DocumentHistory extends React.Component { return ( -
+
History } @@ -165,22 +166,27 @@ const Sidebar = styled(Flex)` z-index: 1; `; -const Title = styled.h3` - max-width: 90%; - overflow: hidden; +const Title = styled.div` + font-size: 16px; + font-weight: 600; + text-align: center; + align-items: center; + justify-content: flex-start; text-overflow: ellipsis; - font-size: 20px; - margin-top: 0; - margin-bottom: 0.25em; white-space: nowrap; - color: ${(props) => props.theme.text}; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, - Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + overflow: hidden; + display: none; + width: 0; + + ${breakpoint("tablet")` + display: flex; + flex-grow: 1; + `}; `; const Header = styled(Flex)` position: relative; - padding: 20px; + padding: 15.8px; border-bottom: 1px solid ${(props) => props.theme.divider}; `; From c52fbb944e3ae99c0b7a78b4a77a2eb4fc9b3f0b Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Tue, 25 Aug 2020 20:03:52 -0700 Subject: [PATCH 3/3] Styling tidy up --- .../DocumentHistory/DocumentHistory.js | 39 +++++++++---------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/app/components/DocumentHistory/DocumentHistory.js b/app/components/DocumentHistory/DocumentHistory.js index b94d664ce..e6ce3c262 100644 --- a/app/components/DocumentHistory/DocumentHistory.js +++ b/app/components/DocumentHistory/DocumentHistory.js @@ -12,11 +12,10 @@ import breakpoint from "styled-components-breakpoint"; import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore"; import DocumentsStore from "stores/DocumentsStore"; import RevisionsStore from "stores/RevisionsStore"; -import Document from "models/Document"; +import Button from "components/Button"; import Flex from "components/Flex"; import { ListPlaceholder } from "components/LoadingPlaceholder"; -import Button from "../Button"; import Revision from "./components/Revision"; import { documentHistoryUrl, documentUrl } from "utils/routeHelpers"; @@ -91,7 +90,11 @@ class DocumentHistory extends React.Component { return this.props.revisions.getDocumentRevisions(document.id); } - onCloseHistory = (document: Document) => { + onCloseHistory = () => { + const document = this.props.documents.getByUrl( + this.props.match.params.documentSlug + ); + this.redirectTo = documentUrl(document); }; @@ -108,11 +111,11 @@ class DocumentHistory extends React.Component {
History - } - onClick={() => this.onCloseHistory(document)} - neutral + onClick={this.onCloseHistory} borderOnHover + neutral />
{showLoading ? ( @@ -160,13 +163,18 @@ const Wrapper = styled(Flex)` `; const Sidebar = styled(Flex)` + display: none; background: ${(props) => props.theme.background}; min-width: ${(props) => props.theme.sidebarWidth}; border-left: 1px solid ${(props) => props.theme.divider}; z-index: 1; + + ${breakpoint("tablet")` + display: flex; + `}; `; -const Title = styled.div` +const Title = styled(Flex)` font-size: 16px; font-weight: 600; text-align: center; @@ -175,25 +183,16 @@ const Title = styled.div` text-overflow: ellipsis; white-space: nowrap; overflow: hidden; - display: none; width: 0; - - ${breakpoint("tablet")` - display: flex; - flex-grow: 1; - `}; + flex-grow: 1; `; const Header = styled(Flex)` + align-items: center; position: relative; - padding: 15.8px; + padding: 12px; border-bottom: 1px solid ${(props) => props.theme.divider}; -`; - -const CloseButton = styled(Button)` - position: absolute; - top: 10px; - right: 10px; + color: ${(props) => props.theme.text}; `; export default inject("documents", "revisions")(DocumentHistory);