CoastalCommits/CoastalCommitsPastes
CoastalCommits/CoastalCommitsPastes
2
1
Fork 0
forked from CoastalCommitsArchival/github.com-MaxLeiter-drift
Code Pull requests Activity Actions

client: add spacing to top/bottom of Documents

Browse source
This commit is contained in:
Max Leiter 2022-03-09 01:01:58 -08:00
parent 04257a8b64
commit 73e32a58e7
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
3 changed files with 48 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
client/components/document/index.tsx
View file

@ -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 { ChangeEvent, FormEvent, memo, useEffect, useReducer, useRef, useState } from "react"
import styles from './document.module.css' import styles from './document.module.css'
import MarkdownPreview from '../preview' import MarkdownPreview from '../preview'
@ -40,48 +40,52 @@ const Document = ({ remove, editable, title, content, setTitle, setContent, init
} }
return ( return (
<Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'} style={{ maxWidth: 980, margin: "0 auto" }}> <>
<div className={styles.fileNameContainer}> <Spacer height={1} />
<Input <Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'} style={{ maxWidth: 980, margin: "0 auto" }}>
placeholder="MyFile.md" <div className={styles.fileNameContainer}>
value={title} <Input
onChange={(event: ChangeEvent<HTMLInputElement>) => setTitle ? setTitle(event.target.value) : null} placeholder="MyFile.md"
marginTop="var(--gap-double)" value={title}
size={1.2} onChange={(event: ChangeEvent<HTMLInputElement>) => setTitle ? setTitle(event.target.value) : null}
font={1.2} marginTop="var(--gap-double)"
label="Filename" size={1.2}
disabled={!editable} font={1.2}
width={"100%"} label="Filename"
/> disabled={!editable}
{remove && editable && <Button type="error" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />} width={"100%"}
</div> />
<div className={styles.descriptionContainer}> {remove && editable && <Button type="error" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />}
{tab === 'edit' && editable && <FormattingIcons setText={setContent} textareaRef={codeEditorRef} />} </div>
<Tabs onChange={handleTabChange} initialValue={initialTab} hideDivider leftSpace={0}> <div className={styles.descriptionContainer}>
<Tabs.Item label={editable ? "Edit" : "Raw"} value="edit"> {tab === 'edit' && editable && <FormattingIcons setText={setContent} textareaRef={codeEditorRef} />}
{/* <textarea className={styles.lineCounter} wrap='off' readOnly ref={lineNumberRef}>1.</textarea> */} <Tabs onChange={handleTabChange} initialValue={initialTab} hideDivider leftSpace={0}>
<div style={{ display: 'flex', flexDirection: 'column' }}> <Tabs.Item label={editable ? "Edit" : "Raw"} value="edit">
<Textarea {/* <textarea className={styles.lineCounter} wrap='off' readOnly ref={lineNumberRef}>1.</textarea> */}
ref={codeEditorRef} <div style={{ display: 'flex', flexDirection: 'column' }}>
placeholder="Type some contents..." <Textarea
value={content} ref={codeEditorRef}
onChange={(event) => setContent ? setContent(event.target.value) : null} placeholder="Type some contents..."
width="100%" value={content}
disabled={!editable} onChange={(event) => setContent ? setContent(event.target.value) : null}
// TODO: Textarea should grow to fill parent if height == 100% width="100%"
style={{ flex: 1, minHeight: 350 }} disabled={!editable}
resize="vertical" // TODO: Textarea should grow to fill parent if height == 100%
className={styles.textarea} style={{ flex: 1, minHeight: 350 }}
/> resize="vertical"
</div> className={styles.textarea}
</Tabs.Item> />
<Tabs.Item label="Preview" value="preview"> </div>
<MarkdownPreview height={height} content={content} /> </Tabs.Item>
</Tabs.Item> <Tabs.Item label="Preview" value="preview">
</Tabs> <MarkdownPreview height={height} content={content} />
</Tabs.Item>
</Tabs>
</div > </div >
</Card > </Card >
<Spacer height={1} />
</>
) )
} }

7
client/components/header/controls.tsx
View file

@ -1,10 +1,7 @@
import React, { useMemo } from 'react' import React from 'react'
import Router, { useRouter } from 'next/router'
import MoonIcon from '@geist-ui/icons/moon' import MoonIcon from '@geist-ui/icons/moon'
import SunIcon from '@geist-ui/icons/sun' import SunIcon from '@geist-ui/icons/sun'
import UserIcon from '@geist-ui/icons/user' import { Select } from '@geist-ui/core'
import GitHubIcon from '@geist-ui/icons/github'
import { Select, Spacer, useTheme } from '@geist-ui/core'
import { ThemeProps } from '../../pages/_app' import { ThemeProps } from '../../pages/_app'
// import { useAllThemes, useTheme } from '@geist-ui/core' // import { useAllThemes, useTheme } from '@geist-ui/core'
import styles from './header.module.css' import styles from './header.module.css'

1
client/pages/index.tsx
View file

@ -70,7 +70,6 @@ const Home = ({ theme, changeTheme, introContent, todoContent }: Props) => {
title={`Welcome to Drift.md`} title={`Welcome to Drift.md`}
initialTab={`preview`} initialTab={`preview`}
/> />
<Spacer height={1} />
<Document <Document
editable={false} editable={false}
content={todoContent} content={todoContent}