#49: markdown improvements

- make everything less cluttered - move TOC to an own container - Closer.tsx is bigger but thinner
PzYon · Aug 20, 2018 · 8a11d90 · 8a11d90
1 parent 739145f
commit 8a11d90
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 37 deletions.
diff --git a/client/src/common/Closer.tsx b/client/src/common/Closer.tsx
@@ -4,11 +4,9 @@ import { StyleConstants } from "../styling/StyleConstants";
 
 const Container = styled.span`
   position: absolute;
-  top: 1rem;
   right: 0.8rem;
   cursor: pointer;
-  font-weight: 500;
-  font-size: 1rem;
+  font-size: 1.5rem;
   color: ${StyleConstants.colors.accent};
   transition: color 0.3s;
 

diff --git a/client/src/common/DomUtil.ts b/client/src/common/DomUtil.ts
@@ -0,0 +1,7 @@
+export class DomUtil {
+  public static isEmptyHtml(html: string) {
+    const e = document.createElement("div");
+    e.innerHTML = html;
+    return e.innerText.trim().length === 0;
+  }
+}
diff --git a/client/src/common/form/Form.StyledComponents.tsx b/client/src/common/form/Form.StyledComponents.tsx
@@ -40,7 +40,7 @@ export const FormFieldContainer = styled.div``;
 
 export const FormLabel = styled.label`
   display: block;
-  padding-bottom: 1rem;
+  padding-bottom: 0.5rem;
 `;
 
 export const FormLabelDiv = styled.div`
@@ -94,6 +94,12 @@ export const Button: any = styled.span<IButtonStyle>`
     outline: none;
     box-shadow: ${StyleConstants.defaultBoxShadow};
   }
+
+  a {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
 `;
 
 export const FormButtonContainer = styled.div`

diff --git a/client/src/common/form/fields/markdown/Markdown.tsx b/client/src/common/form/fields/markdown/Markdown.tsx
@@ -1,33 +1,49 @@
 import * as MarkdownIt from "markdown-it";
 import * as React from "react";
 import { ReactNode } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { StyleConstants } from "../../../../styling/StyleConstants";
+import { DomUtil } from "../../../DomUtil";
+import { If } from "../../../If";
 
 const mdItToc = require("markdown-it-table-of-contents");
 const mdItAnchor = require("markdown-it-anchor");
 
-const Container = styled.div`
+const BaseContainer = styled.div`
+  padding: 0.7rem;
   border: 1px solid ${StyleConstants.colors.discreet};
   background-color: ${StyleConstants.colors.ultraDiscreet};
-  padding: 0.7rem;
+`;
 
-  p,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 0.5rem 0;
+interface ITocContainerStyle {
+  isExpanded: boolean;
+}
+
+const TocContainer = BaseContainer.extend<ITocContainerStyle>`
+  padding: 0.2rem 0.2rem 0.2rem 0.7rem;
+  margin-bottom: 0.5rem;
+
+  ul {
+    padding-left: 0.7rem;
   }
+`;
 
+const ContentContainer = BaseContainer.extend`
   h1,
   h2,
   h3 {
+    margin: 1rem 0;
     color: ${StyleConstants.colors.accent};
   }
 
+  p,
+  h4,
+  h5,
+  h6,
+  li {
+    margin: 0.7rem 0;
+  }
+
   h1 {
     font-size: 1.3rem;
   }
@@ -41,7 +57,7 @@ const Container = styled.div`
   }
 
   ul {
-    margin: 0;
+    margin: 0.7rem 0;
     padding-left: 1rem;
   }
 
@@ -53,12 +69,23 @@ const Container = styled.div`
     border: 1px solid ${StyleConstants.colors.discreet};
     overflow-y: auto;
   }
+
+  img {
+    max-width: 100%;
+  }
+
+  * > :first-child {
+    margin-top: 0 !important;
+  }
+
+  * > :last-child {
+    margin-bottom: 0 !important;
+  }
 `;
 
-const TocToggler = styled.div`
+const TocToggler = styled.a`
   color: ${StyleConstants.colors.accent};
   font-size: ${StyleConstants.font.small};
-  cursor: pointer;
 `;
 
 const TocDiv = styled.div`
@@ -96,6 +123,10 @@ export class Markdown extends React.PureComponent<IMarkdownProps, IMarkdownState
   }
 
   public render(): ReactNode {
+    if (!this.props.markdown || !this.props.markdown.trim()) {
+      return null;
+    }
+
     const md = `
   ${this.props.markdown || ""} 
   
@@ -115,13 +146,28 @@ export class Markdown extends React.PureComponent<IMarkdownProps, IMarkdownState
     const tocHtml = sections[1];
 
     return (
-      <Container>
-        <TocToggler onClick={() => this.setState({ isTocExpanded: !this.state.isTocExpanded })}>
-          {this.state.isTocExpanded ? "Hide TOC" : "Show TOC"}
-        </TocToggler>
-        {this.state.isTocExpanded && <TocDiv dangerouslySetInnerHTML={{ __html: tocHtml }} />}
-        <MarkupDiv dangerouslySetInnerHTML={{ __html: contentHtml }} />
-      </Container>
+      <>
+        <If
+          value={!DomUtil.isEmptyHtml(tocHtml)}
+          render={() => (
+            <TocContainer isExpanded={this.state.isTocExpanded}>
+              <TocToggler
+                href={"javascript: void(0);"}
+                onClick={() => this.setState({ isTocExpanded: !this.state.isTocExpanded })}
+              >
+                {this.state.isTocExpanded ? "Hide TOC" : "Show TOC"}
+              </TocToggler>
+              <If
+                value={this.state.isTocExpanded}
+                render={() => <TocDiv dangerouslySetInnerHTML={{ __html: tocHtml }} />}
+              />
+            </TocContainer>
+          )}
+        />
+        <ContentContainer>
+          <MarkupDiv dangerouslySetInnerHTML={{ __html: contentHtml }} />
+        </ContentContainer>
+      </>
     );
   }
 }
diff --git a/client/src/common/form/fields/markdown/MarkdownField.tsx b/client/src/common/form/fields/markdown/MarkdownField.tsx
@@ -1,13 +1,32 @@
 import * as React from "react";
 import { ReactNode } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { StyleConstants } from "../../../../styling/StyleConstants";
 import { If } from "../../../If";
 import { CodeEditor, CodeLanguage } from "../code/CodeEditor";
 import { FieldWrapper } from "../FieldWrapper";
 import { IFieldProps } from "../IFieldProps";
 import { Markdown } from "./Markdown";
 
+interface ITogglePreviewContainerStyle {
+  isPreview: boolean;
+}
+
+const TogglePreviewContainer = styled.div<ITogglePreviewContainerStyle>`
+  border: 1px solid ${StyleConstants.colors.discreet};
+  background-color: ${StyleConstants.colors.ultraDiscreet};
+  border-bottom: 0;
+  padding: 0.2rem;
+
+  ${p =>
+    p.isPreview
+      ? css`
+          margin-bottom: 0.5rem;
+          border-bottom: 1px solid ${StyleConstants.colors.discreet};
+        `
+      : null};
+`;
+
 const TogglePreviewAnchor = styled.a`
   font-size: ${StyleConstants.font.small};
   cursor: pointer;
@@ -34,14 +53,16 @@ export class MarkdownField extends React.PureComponent<IMarkdownFieldProps, IMar
     return (
       <FieldWrapper label={this.props.label} validationError={this.props.validationMessage}>
         <If
-          value={!this.props.isReadOnly}
+          value={!this.props.isReadOnly && this.props.value && this.props.value.trim().length > 0}
           render={() => (
-            <TogglePreviewAnchor
-              onClick={() => this.setState({ isPreview: !this.state.isPreview })}
-              href={"javascript:void(0)"}
-            >
-              {this.state.isPreview ? "Back to edit mode" : "View preview"}
-            </TogglePreviewAnchor>
+            <TogglePreviewContainer isPreview={this.state.isPreview}>
+              <TogglePreviewAnchor
+                onClick={() => this.setState({ isPreview: !this.state.isPreview })}
+                href={"javascript:void(0)"}
+              >
+                {this.state.isPreview ? "Back to edit mode" : "View preview"}
+              </TogglePreviewAnchor>
+            </TogglePreviewContainer>
           )}
         />
         <If

diff --git a/client/src/common/searchBox/dropDown/DropDown.tsx b/client/src/common/searchBox/dropDown/DropDown.tsx
@@ -22,7 +22,7 @@ const ContainerDiv = styled.div`
   box-shadow: ${StyleConstants.defaultBoxShadow};
 
   .ngrvd-closer {
-    right: 0.3rem;
+    right: 0.4rem;
     top: 0;
   }
 `;

diff --git a/client/src/pages/createItem/CreateItemPage.tsx b/client/src/pages/createItem/CreateItemPage.tsx
@@ -63,7 +63,7 @@ export class CreateItemPage extends React.PureComponent<
           ) => (
             <FormButton
               button={{
-                nodeOrLabel: "Add",
+                nodeOrLabel: "Create",
                 onClick: () => {
                   if (isDirty && validate()) {
                     this.addItem(item);

diff --git a/client/src/pages/search/GlobalSearchBox.tsx b/client/src/pages/search/GlobalSearchBox.tsx
@@ -11,11 +11,11 @@ import { SearchBox } from "../../common/searchBox/SearchBox";
 import { ItemStore } from "../../items/ItemStore";
 import { StyleConstants } from "../../styling/StyleConstants";
 
-interface IWrapperDivProps {
+interface IWrapperDivStyle {
   showDropDown: boolean;
 }
 
-const WrapperDiv = styled.div<IWrapperDivProps>`
+const WrapperDiv = styled.div<IWrapperDivStyle>`
   .search-box-inner {
     border-radius: ${StyleConstants.borderRadius};
     border: 1px solid ${StyleConstants.colors.discreet};