Ver a proveniência

Update layout

This commit updates the viewfinder library (this has since been
transferred from tesseract-design to theoryofnekomata).
master
TheoryOfNekomata há 3 anos
ascendente
cometimento
ed86a8f03e
6 ficheiros alterados com 321 adições e 471 eliminações
  1. +1
    -1
      package.json
  2. +4
    -1
      src/components/molecules/Editor/index.tsx
  3. +1
    -1
      src/components/organisms/forms/NoteForm/index.tsx
  4. +1
    -1
      src/components/templates/BinView/index.tsx
  5. +94
    -11
      src/components/templates/NoteView/index.tsx
  6. +220
    -456
      yarn.lock

+ 1
- 1
package.json Ver ficheiro

@@ -11,7 +11,7 @@
"homepage": "https://note.modal.sh",
"dependencies": {
"@tesseract-design/react-common": "^0.3.0",
"@tesseract-design/viewfinder": "0.1.1",
"@theoryofnekomata/viewfinder": "0.2.4",
"mobiledoc-kit": "^0.13.2",
"next": "10.2.0",
"react": "17.0.2",


+ 4
- 1
src/components/molecules/Editor/index.tsx Ver ficheiro

@@ -33,6 +33,8 @@ const RawInput = styled('textarea')({
display: 'block',
width: '100%',
resize: 'vertical',
fontFamily: 'var(--font-family-monospace, monospace)',
lineHeight: 1.25,
})

const ToolbarBase = styled('div')({
@@ -59,7 +61,8 @@ const Editor: React.FC<Props> = ({
}) => {
const [hydrated, setHydrated] = React.useState(false)
React.useEffect(() => {
setHydrated(true)
// setHydrated(true)
setHydrated(false)
}, [])

if (hydrated) {


+ 1
- 1
src/components/organisms/forms/NoteForm/index.tsx Ver ficheiro

@@ -1,6 +1,6 @@
import * as React from 'react'
import styled from 'styled-components'
import {LeftSidebarWithMenu} from '@tesseract-design/viewfinder'
import {LeftSidebarWithMenu} from '@theoryofnekomata/viewfinder'
import Editor from '../../../molecules/Editor'

const TitleContainer = styled(LeftSidebarWithMenu.ContentContainer)({


+ 1
- 1
src/components/templates/BinView/index.tsx Ver ficheiro

@@ -1,5 +1,5 @@
import * as React from 'react'
import {LeftSidebarWithMenu} from '@tesseract-design/viewfinder'
import {LeftSidebarWithMenu} from '@theoryofnekomata/viewfinder'
import Link from '../../molecules/Link'
import {Subpage} from '../../../utils/query'



+ 94
- 11
src/components/templates/NoteView/index.tsx Ver ficheiro

@@ -1,10 +1,10 @@
import * as React from 'react'
import Head from 'next/head'
import * as T from '@tesseract-design/react-common'
import {LeftSidebarWithMenu} from '@tesseract-design/viewfinder'
import {LeftSidebarWithMenu} from '@theoryofnekomata/viewfinder'
import styled from 'styled-components'
import Link from '../../molecules/Link'
import {Subpage} from '../../../utils/query'
import { QueryFragment, Subpage } from '../../../utils/query'
import Note from '../../../models/Note'
import Brand from '../../molecules/Brand'
import NoteLinkContent from '../../molecules/NoteLinkContent'
@@ -26,6 +26,10 @@ const CenteredContent = styled(LeftSidebarWithMenu.ContentContainer)({
},
})

const Content = styled('div')({
margin: '2rem 0',
})

const SidebarTitle = styled('h1')({
margin: 0,
lineHeight: '4rem',
@@ -35,6 +39,61 @@ const SidebarSubtitle = styled('p')({
margin: '2rem 0',
})

const TopBarComponent = styled('div')({
backgroundColor: 'var(--color-bg, white)',
'::before': {
content: "''",
width: '100%',
height: '100%',
position: 'absolute',
top: 0,
left: 0,
pointerEvents: 'none',
},
'::after': {
backgroundColor: 'black',
opacity: 0.5,
content: "''",
width: '100%',
height: '100%',
position: 'absolute',
top: 0,
left: 0,
pointerEvents: 'none',
},
})

const SidebarMainComponent = styled('div')({
backgroundColor: 'var(--color-bg, white)',
zIndex: 2,
'::after': {
backgroundColor: 'black',
opacity: 0.25,
content: "''",
width: '100%',
height: '100%',
position: 'absolute',
top: 0,
left: 0,
pointerEvents: 'none',
},
})

const SidebarMenuComponent = styled('div')({
backgroundColor: 'var(--color-bg, white)',
'::after': {
backgroundColor: 'black',
opacity: 0.4,
content: "''",
width: '100%',
height: '100%',
position: 'absolute',
top: 0,
left: 0,
pointerEvents: 'none',
},
})

type Props = {
subpage: Subpage,
notes: Note[],
@@ -60,6 +119,9 @@ const NoteView: React.FC<Props> = ({
</title>
</Head>
<LeftSidebarWithMenu.Layout
topBarComponent={TopBarComponent}
sidebarMainComponent={SidebarMainComponent}
sidebarMenuComponent={SidebarMenuComponent}
brand={
<Brand />
}
@@ -92,8 +154,26 @@ const NoteView: React.FC<Props> = ({
]}
sidebarMainOpen={subpage === Subpage.SIDEBAR}
moreItemsOpen={subpage === Subpage.MORE}
menuLink={
<Link
href={{
query: currentNote
? {
noteId: currentNote.id,
[QueryFragment.SUBPAGE]: Subpage.SIDEBAR,
}
: {
[QueryFragment.SUBPAGE]: Subpage.SIDEBAR,
},
}}
>
<T.Icon
name="menu"
/>
</Link>
}
sidebarMain={
<>
<Content>
{currentFolder && (
<LeftSidebarWithMenu.SidebarMainContainer>
<SidebarTitle>
@@ -139,7 +219,7 @@ const NoteView: React.FC<Props> = ({
</LeftSidebarWithMenu.SidebarMainContainer>
</SidebarLink>
))}
</>
</Content>
}
moreLinkMenuItem={{
label: 'More',
@@ -150,7 +230,8 @@ const NoteView: React.FC<Props> = ({
),
url: {
query: {
subpage: 'more',
noteId: currentNote?.id,
[QueryFragment.SUBPAGE]: 'more',
}
}
}}
@@ -189,12 +270,14 @@ const NoteView: React.FC<Props> = ({
</CenteredContent>
)}
{(currentNote as Note) && (
<NoteForm
defaultValues={{
title: currentNote.title,
content: currentNote.contentVersions.slice(-1)[0].content,
}}
/>
<Content>
<NoteForm
defaultValues={{
title: currentNote.title,
content: currentNote.contentVersions.slice(-1)[0].content,
}}
/>
</Content>
)}
</LeftSidebarWithMenu.Layout>
</>


+ 220
- 456
yarn.lock
A apresentação das diferenças no ficheiro foi suprimida por ser demasiado grande
Ver ficheiro


Carregando…
Cancelar
Guardar