client: add spacing to top/bottom of Documents
This commit is contained in:
Max Leiter
parent
04257a8b64
commit
73e32a58e7
3 changed files with 48 additions and 48 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import { Button, ButtonGroup, Card, Input, Tabs, Textarea } from "@geist-ui/core"
|
||||
import { Button, ButtonGroup, Card, Input, Spacer, Tabs, Textarea } from "@geist-ui/core"
|
||||
import { ChangeEvent, FormEvent, memo, useEffect, useReducer, useRef, useState } from "react"
|
||||
import styles from './document.module.css'
|
||||
import MarkdownPreview from '../preview'
|
||||
|
|
@ -40,48 +40,52 @@ const Document = ({ remove, editable, title, content, setTitle, setContent, init
|
|||
}
|
||||
|
||||
return (
|
||||
<Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'} style={{ maxWidth: 980, margin: "0 auto" }}>
|
||||
<div className={styles.fileNameContainer}>
|
||||
<Input
|
||||
placeholder="MyFile.md"
|
||||
value={title}
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => setTitle ? setTitle(event.target.value) : null}
|
||||
marginTop="var(--gap-double)"
|
||||
size={1.2}
|
||||
font={1.2}
|
||||
label="Filename"
|
||||
disabled={!editable}
|
||||
width={"100%"}
|
||||
/>
|
||||
{remove && editable && <Button type="error" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />}
|
||||
</div>
|
||||
<div className={styles.descriptionContainer}>
|
||||
{tab === 'edit' && editable && <FormattingIcons setText={setContent} textareaRef={codeEditorRef} />}
|
||||
<Tabs onChange={handleTabChange} initialValue={initialTab} hideDivider leftSpace={0}>
|
||||
<Tabs.Item label={editable ? "Edit" : "Raw"} value="edit">
|
||||
{/* <textarea className={styles.lineCounter} wrap='off' readOnly ref={lineNumberRef}>1.</textarea> */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Textarea
|
||||
ref={codeEditorRef}
|
||||
placeholder="Type some contents..."
|
||||
value={content}
|
||||
onChange={(event) => setContent ? setContent(event.target.value) : null}
|
||||
width="100%"
|
||||
disabled={!editable}
|
||||
// TODO: Textarea should grow to fill parent if height == 100%
|
||||
style={{ flex: 1, minHeight: 350 }}
|
||||
resize="vertical"
|
||||
className={styles.textarea}
|
||||
/>
|
||||
</div>
|
||||
</Tabs.Item>
|
||||
<Tabs.Item label="Preview" value="preview">
|
||||
<MarkdownPreview height={height} content={content} />
|
||||
</Tabs.Item>
|
||||
</Tabs>
|
||||
<>
|
||||
<Spacer height={1} />
|
||||
<Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'} style={{ maxWidth: 980, margin: "0 auto" }}>
|
||||
<div className={styles.fileNameContainer}>
|
||||
<Input
|
||||
placeholder="MyFile.md"
|
||||
value={title}
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => setTitle ? setTitle(event.target.value) : null}
|
||||
marginTop="var(--gap-double)"
|
||||
size={1.2}
|
||||
font={1.2}
|
||||
label="Filename"
|
||||
disabled={!editable}
|
||||
width={"100%"}
|
||||
/>
|
||||
{remove && editable && <Button type="error" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />}
|
||||
</div>
|
||||
<div className={styles.descriptionContainer}>
|
||||
{tab === 'edit' && editable && <FormattingIcons setText={setContent} textareaRef={codeEditorRef} />}
|
||||
<Tabs onChange={handleTabChange} initialValue={initialTab} hideDivider leftSpace={0}>
|
||||
<Tabs.Item label={editable ? "Edit" : "Raw"} value="edit">
|
||||
{/* <textarea className={styles.lineCounter} wrap='off' readOnly ref={lineNumberRef}>1.</textarea> */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Textarea
|
||||
ref={codeEditorRef}
|
||||
placeholder="Type some contents..."
|
||||
value={content}
|
||||
onChange={(event) => setContent ? setContent(event.target.value) : null}
|
||||
width="100%"
|
||||
disabled={!editable}
|
||||
// TODO: Textarea should grow to fill parent if height == 100%
|
||||
style={{ flex: 1, minHeight: 350 }}
|
||||
resize="vertical"
|
||||
className={styles.textarea}
|
||||
/>
|
||||
</div>
|
||||
</Tabs.Item>
|
||||
<Tabs.Item label="Preview" value="preview">
|
||||
<MarkdownPreview height={height} content={content} />
|
||||
</Tabs.Item>
|
||||
</Tabs>
|
||||
|
||||
</div >
|
||||
</Card >
|
||||
</div >
|
||||
</Card >
|
||||
<Spacer height={1} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,7 @@
|
|||
import React, { useMemo } from 'react'
|
||||
import Router, { useRouter } from 'next/router'
|
||||
import React from 'react'
|
||||
import MoonIcon from '@geist-ui/icons/moon'
|
||||
import SunIcon from '@geist-ui/icons/sun'
|
||||
import UserIcon from '@geist-ui/icons/user'
|
||||
import GitHubIcon from '@geist-ui/icons/github'
|
||||
import { Select, Spacer, useTheme } from '@geist-ui/core'
|
||||
import { Select } from '@geist-ui/core'
|
||||
import { ThemeProps } from '../../pages/_app'
|
||||
// import { useAllThemes, useTheme } from '@geist-ui/core'
|
||||
import styles from './header.module.css'
|
||||
|
|
|
|||
|
|
@ -70,7 +70,6 @@ const Home = ({ theme, changeTheme, introContent, todoContent }: Props) => {
|
|||
title={`Welcome to Drift.md`}
|
||||
initialTab={`preview`}
|
||||
/>
|
||||
<Spacer height={1} />
|
||||
<Document
|
||||
editable={false}
|
||||
content={todoContent}
|
||||
|
|
|
|||
Loading…
Reference in a new issue