Skip to content

Commit

Permalink
Refactor connect and reconnect
Browse files Browse the repository at this point in the history 
Add popup
  • Loading branch information
@Komediruzecki @Davy-c
Komediruzecki authored and Davy-c committed Feb 16, 2022
1 parent 28a320b commit 1875a83
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 86 deletions.
92 changes: 39 additions & 53 deletions src/cloud/components/Editor/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,6 @@ import {
mdiEyeOutline,
mdiViewSplitVertical,
mdiDotsHorizontal,
mdiCloudOffOutline,
mdiCloudSyncOutline,
} from '@mdi/js'
import EditorToolButton from './EditorToolButton'
import { not } from 'ramda'
Expand Down Expand Up @@ -101,6 +99,7 @@ import CustomizedMarkdownPreviewer from '../MarkdownView/CustomizedMarkdownPrevi
import BottomBarButton from '../BottomBarButton'
import { YText } from 'yjs/dist/src/internals'
import { useLocalSnapshot } from '../../lib/stores/localSnapshots'
import SyncStatus from '../Topbar/SyncStatus'

type LayoutMode = 'split' | 'preview' | 'editor'

Expand Down Expand Up @@ -159,6 +158,8 @@ const Editor = ({
: 'preview'
)
const [editorContent, setEditorContent] = useState('')
const [showingConnectIssueMessage, setShowingShowingConnectIssueMessage] =
useState<boolean>(false)
const docRef = useRef<string>('')
const router = useRouter()
const { state } = router
Expand Down Expand Up @@ -485,6 +486,16 @@ const Editor = ({
})
}, [openModal, onTemplatePickCallback])

useEffect(() => {
if (connState == 'reconnecting') {
setShowingShowingConnectIssueMessage(true)
} else if (connState == 'disconnected') {
setShowingShowingConnectIssueMessage(true)
} else {
setShowingShowingConnectIssueMessage(false)
}
}, [connState])

const toggleScrollSync = useCallback(() => {
setScrollSync(not)
}, [])
Expand Down Expand Up @@ -846,57 +857,6 @@ const Editor = ({
{
type: 'separator',
},
...(connState === 'reconnecting'
? [
{
type: 'button',
iconPath: mdiCloudSyncOutline,
variant: 'danger',
disabled: true,
label: translate(lngKeys.EditorReconnectAttempt),
tooltip: (
<>
{translate(lngKeys.EditorReconnectAttempt1)}
<br />
{translate(lngKeys.EditorReconnectAttempt2)}
</>
),
},
]
: connState === 'disconnected'
? [
{
type: 'button',
iconPath: mdiCloudOffOutline,
variant: 'danger',
onClick: () => realtime.connect(),
label: translate(lngKeys.EditorReconnectDisconnected),
tooltip: (
<>
{translate(lngKeys.EditorReconnectDisconnected1)}
<br />
{translate(lngKeys.EditorReconnectDisconnected2)}
</>
),
},
]
: connState === 'loaded'
? [
{
type: 'button',
variant: 'secondary' as const,
disabled: true,
label: translate(lngKeys.EditorReconnectSyncing),
tooltip: (
<>
{translate(lngKeys.EditorReconnectSyncing1)}
<br />
{translate(lngKeys.EditorReconnectSyncing2)}
</>
),
},
]
: []),
...(docIsEditable && currentUserIsCoreMember
? [
{
Expand Down Expand Up @@ -1069,6 +1029,9 @@ const Editor = ({
)}
</Container>
</EditorLayout>
{showingConnectIssueMessage && (
<SyncStatus provider={realtime} connState={connState} />
)}
</ApplicationContent>
</ApplicationPage>
)
Expand Down Expand Up @@ -1102,6 +1065,7 @@ const StyledBottomBar = styled.div`
height: 24px;
background-color: ${({ theme }) => theme.colors.background.primary};
box-sizing: content-box;
& > :first-child {
flex: 1;
}
Expand Down Expand Up @@ -1142,6 +1106,7 @@ const StyledShortcodeConvertMenu = styled.div`

const StyledLayoutDimensions = styled.div`
width: 100%;
&.preview,
.preview {
width: 100%;
Expand All @@ -1163,17 +1128,21 @@ const ToolbarRow = styled.div`
border: solid 1px ${({ theme }) => theme.colors.border.second};
border-radius: 5px;
`

interface FontOptionsProps {
fontSize: string
fontFamily: string
}

const StyledEditorWrapper = styled.div<BaseTheme & FontOptionsProps>`
position: relative;
height: auto;
width: 50%;
&.layout-editor {
width: 100%;
}
&.layout-preview {
display: none;
}
Expand All @@ -1189,19 +1158,23 @@ const StyledEditorWrapper = styled.div<BaseTheme & FontOptionsProps>`
const StyledPreview = styled.div`
height: 100%;
width: 50%;
&.layout-split {
width: 50%;
.scroller {
height: 100%;
overflow: auto;
border-left: 1px solid ${({ theme }) => theme.colors.border.main};
}
}
&.layout-preview {
padding-top: ${({ theme }) => theme.sizes.spaces.sm}px;
margin: 0 auto;
width: 100%;
}
&.layout-editor {
display: none;
}
Expand All @@ -1223,21 +1196,25 @@ const StyledEditor = styled.div`
height: auto;
min-height: 0;
font-size: 15px;
&.preview,
.preview {
${rightSidePageLayout};
margin: auto;
}
& .CodeMirrorWrapper {
height: 100%;
word-break: break-word;
}
& .CodeMirror {
width: 100%;
height: 100%;
position: relative;
z-index: 0 !important;
line-height: 1.4em;
.CodeMirror-hints {
position: absolute;
z-index: 10;
Expand All @@ -1254,6 +1231,7 @@ const StyledEditor = styled.div`
font-family: monospace;
list-style: none;
}
.CodeMirror-hint {
position: relative;
margin: 0;
Expand All @@ -1264,8 +1242,10 @@ const StyledEditor = styled.div`
cursor: pointer;
font-size: ${({ theme }) => theme.sizes.fonts.xsm}px;
}
li.CodeMirror-hint-active {
color: ${({ theme }) => theme.colors.variants.primary.base};
&:before {
content: '';
display: block;
Expand All @@ -1277,15 +1257,18 @@ const StyledEditor = styled.div`
background-color: ${({ theme }) => theme.colors.variants.primary.base};
}
}
& .remote-caret {
position: relative;
border-left: 1px solid black;
margin-left: -1px;
box-sizing: border-box;
&:hover > div {
opacity: 1;
transition-delay: 0s;
}
& > div {
position: absolute;
left: -1px;
Expand All @@ -1307,15 +1290,18 @@ const StyledEditor = styled.div`
}
}
}
.CodeMirror-scroll {
position: relative;
z-index: 0;
width: 100%;
}
.CodeMirror-code,
.CodeMirror-gutters {
padding-bottom: 32px;
}
& .file-loading-widget {
transform: translate3d(0, -100%, 0);
}
Expand Down
Loading

0 comments on commit 1875a83

Please sign in to comment.