From 971f8d5ad1a225d0490422928e1e3e2a1c220e5d Mon Sep 17 00:00:00 2001 From: Dinesh Singh Date: Thu, 17 Nov 2022 16:59:49 +0530 Subject: [PATCH 1/7] Snippet screen lock params added --- .../src/Components/Editor/SnippetPreview.tsx | 1 + .../Renderers/Screenshot/Screenshot.tsx | 2 ++ .../src/Components/Sidebar/SnippetCard.tsx | 11 ++++++--- apps/extension/src/Hooks/useRaju.ts | 24 +++++++++++++------ .../Components/FloatingElements/Floating.tsx | 15 ++++++++++-- .../src/Components/FloatingElements/types.ts | 1 + .../shared/src/Style/SnippetSidebar.style.tsx | 2 +- 7 files changed, 43 insertions(+), 13 deletions(-) diff --git a/apps/extension/src/Components/Editor/SnippetPreview.tsx b/apps/extension/src/Components/Editor/SnippetPreview.tsx index 91224fdd7..a8dddf866 100644 --- a/apps/extension/src/Components/Editor/SnippetPreview.tsx +++ b/apps/extension/src/Components/Editor/SnippetPreview.tsx @@ -85,6 +85,7 @@ const SnippetPreview = ({ hover={hover} root={getElementById('ext-side-nav')} label={label} + scrollLock={false} placement={placement} persist={!allowClosePreview} open={preview} diff --git a/apps/extension/src/Components/Renderers/Screenshot/Screenshot.tsx b/apps/extension/src/Components/Renderers/Screenshot/Screenshot.tsx index 465c4426a..32e442ebb 100644 --- a/apps/extension/src/Components/Renderers/Screenshot/Screenshot.tsx +++ b/apps/extension/src/Components/Renderers/Screenshot/Screenshot.tsx @@ -337,6 +337,8 @@ const Screenshot = () => { ] appendAndSave({ nodeid, content: appendContent, saveAndExit: true, notification: true }) resetSpotlitState() + } else { + mog('Base 64 string not found') } } catch (error) { mog('SSCaptureError', { error }) diff --git a/apps/extension/src/Components/Sidebar/SnippetCard.tsx b/apps/extension/src/Components/Sidebar/SnippetCard.tsx index 54deb7877..b4db4de3d 100644 --- a/apps/extension/src/Components/Sidebar/SnippetCard.tsx +++ b/apps/extension/src/Components/Sidebar/SnippetCard.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useMemo } from 'react' +import fileCopyLine from '@iconify-icons/ri/file-copy-line' import magicLine from '@iconify/icons-ri/magic-line' import quillPenLine from '@iconify/icons-ri/quill-pen-line' import { Icon } from '@iconify/react' @@ -12,7 +13,11 @@ import { SnippetCardHeader, SnippetContentPreview, SnippetCardFooter, - RelativeTime + RelativeTime, + GroupHeader, + MexIcon, + CopyButton, + IconButton } from '@mexit/shared' import { useDescriptionStore } from '../../Stores/useDescriptionStore' @@ -90,15 +95,15 @@ const SnippetCard = ({ snippet, preview = true, icon, keyStr, onClick }: Snippet key={keyStr} preview={visible} setPreview={setVisible} - hover allowClosePreview snippetId={snippet.id} placement="left" > - onClickProps(e)}> + {snippet.title} + onClickProps(e)} icon={fileCopyLine} size="20px" title="Copied to Clipboard" /> {descriptions[snippet?.id]?.rawText} diff --git a/apps/extension/src/Hooks/useRaju.ts b/apps/extension/src/Hooks/useRaju.ts index a2be7186e..416f8567a 100644 --- a/apps/extension/src/Hooks/useRaju.ts +++ b/apps/extension/src/Hooks/useRaju.ts @@ -205,14 +205,24 @@ export default function useRaju() { case 'ADD_HIGHLIGHTED_BLOCK': return child.addHighlight(...params) case 'SEARCH': - return child.search(...params).then((result) => { - return result - }) + return child + .search(...params) + .then((result) => { + return result + }) + .catch((err) => { + mog('[SEARCH]: Unable to search with', { err }) + }) case 'UPLOAD_IMAGE_TO_S3': { - return child.uploadImageToS3Dwindle(...params).then((result) => { - mog('UploadImageToS3', { result }) - return result - }) + return child + .uploadImageToS3Dwindle(...params) + .then((result) => { + mog('UploadImageToS3', { result }) + return result + }) + .catch((err) => { + mog('[IMAGE UPLOAD]: Failed!', { err }) + }) } } } diff --git a/libs/shared/src/Components/FloatingElements/Floating.tsx b/libs/shared/src/Components/FloatingElements/Floating.tsx index e7e64ce79..62a273fc8 100644 --- a/libs/shared/src/Components/FloatingElements/Floating.tsx +++ b/libs/shared/src/Components/FloatingElements/Floating.tsx @@ -23,7 +23,18 @@ import { RemoveScroll } from 'react-remove-scroll' import { Props } from './types' -export const Floating = ({ children, open, label, hover, persist, setOpen, render, placement, root }: Props) => { +export const Floating = ({ + children, + scrollLock = true, + open, + label, + hover, + persist, + setOpen, + render, + placement, + root +}: Props) => { const { delay, setCurrentId } = useDelayGroupContext() const nodeId = useFloatingNodeId() @@ -66,7 +77,7 @@ export const Floating = ({ children, open, label, hover, persist, setOpen, rende {open && ( - +
theme.spacing.tiny}; - font-size: 1.15rem; + font-size: 1.1rem; cursor: pointer; user-select: none; &:hover { From a2781ea2995dd26c78b221b8b4843169db8b3261 Mon Sep 17 00:00:00 2001 From: Dinesh Singh Date: Thu, 17 Nov 2022 18:04:51 +0530 Subject: [PATCH 2/7] Snippet copy on icon click, public node on sidebar fixes --- .../src/Components/EditorPreviewRenderer.tsx | 6 +++++- .../src/Components/Sidebar/NodeCard.tsx | 4 ++-- .../src/Components/Sidebar/NotesInfoBar.tsx | 10 +++++++--- .../src/Components/Sidebar/SnippetCard.tsx | 18 ++++++++++++------ libs/shared/src/Style/EditorPreview.styles.tsx | 2 +- libs/shared/src/Style/SnippetSidebar.style.tsx | 2 +- 6 files changed, 28 insertions(+), 14 deletions(-) diff --git a/apps/extension/src/Components/EditorPreviewRenderer.tsx b/apps/extension/src/Components/EditorPreviewRenderer.tsx index 51602f4c6..bd28e4f19 100644 --- a/apps/extension/src/Components/EditorPreviewRenderer.tsx +++ b/apps/extension/src/Components/EditorPreviewRenderer.tsx @@ -28,7 +28,11 @@ const PreviewStyles = styled(EditorStyles)<{ noMouseEvents: boolean }>` /* user-select: none; */ font-size: 0.9rem; - ${TodoContainer}, button, input, textarea, select, option { + ${TodoContainer}, button, + input, + textarea, + select, + option { pointer-events: none; } ` diff --git a/apps/extension/src/Components/Sidebar/NodeCard.tsx b/apps/extension/src/Components/Sidebar/NodeCard.tsx index 374195542..63b836906 100644 --- a/apps/extension/src/Components/Sidebar/NodeCard.tsx +++ b/apps/extension/src/Components/Sidebar/NodeCard.tsx @@ -99,9 +99,9 @@ export const NodeCard = ({ nodeId }: { nodeId: string }) => { {isNodePublic ? ( - flipPublicAccess()} /> + flipPublicAccess()} /> ) : ( - flipPublicAccess()} /> + flipPublicAccess()} /> )} {isNodePublic && ( { } const onSearch = async (newSearchTerm: string) => { - const res = await dispatch('SEARCH', ['node'], newSearchTerm) - - setSearchedNodes(res?.map((item) => item.id)) + try { + const res = await dispatch('SEARCH', ['node'], newSearchTerm) + const results = res?.map((item) => item.id) ?? [] + setSearchedNodes(results) + } catch (err) { + mog('[NOTE SEARCH]: Unable to search', { err }) + } } useEffect(() => { diff --git a/apps/extension/src/Components/Sidebar/SnippetCard.tsx b/apps/extension/src/Components/Sidebar/SnippetCard.tsx index b4db4de3d..3cdd6ed14 100644 --- a/apps/extension/src/Components/Sidebar/SnippetCard.tsx +++ b/apps/extension/src/Components/Sidebar/SnippetCard.tsx @@ -17,12 +17,14 @@ import { GroupHeader, MexIcon, CopyButton, - IconButton + IconButton, + GenericFlex } from '@mexit/shared' import { useDescriptionStore } from '../../Stores/useDescriptionStore' import { useSnippetStore } from '../../Stores/useSnippetStore' import SnippetPreview from '../Editor/SnippetPreview' +import { NodeCardHeader } from './NodeCard' interface SnippetCardProps { snippet: Snippet @@ -100,11 +102,15 @@ const SnippetCard = ({ snippet, preview = true, icon, keyStr, onClick }: Snippet placement="left" > - - - {snippet.title} - onClickProps(e)} icon={fileCopyLine} size="20px" title="Copied to Clipboard" /> - + + + + {snippet.title} + + + + + {descriptions[snippet?.id]?.rawText} diff --git a/libs/shared/src/Style/EditorPreview.styles.tsx b/libs/shared/src/Style/EditorPreview.styles.tsx index f9b20358b..e97c196d5 100644 --- a/libs/shared/src/Style/EditorPreview.styles.tsx +++ b/libs/shared/src/Style/EditorPreview.styles.tsx @@ -9,7 +9,7 @@ export const EditorPreviewWrapper = styled.div` background: ${({ theme }) => transparentize(0.5, theme.colors.gray[9])} !important; backdrop-filter: blur(10px); - + overscroll-behavior: contain; border-radius: ${({ theme }) => theme.borderRadius.small}; color: ${({ theme }) => theme.colors.fade}; height: 32vh; diff --git a/libs/shared/src/Style/SnippetSidebar.style.tsx b/libs/shared/src/Style/SnippetSidebar.style.tsx index 4110a0f98..040bb32d0 100644 --- a/libs/shared/src/Style/SnippetSidebar.style.tsx +++ b/libs/shared/src/Style/SnippetSidebar.style.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import { Ellipsis } from './NodeSelect.style' export const SnippetCards = styled.div` - padding: ${({ theme }) => theme.spacing.large} ${({ theme }) => theme.spacing.medium}; + padding: ${({ theme }) => theme.spacing.medium}; display: flex; gap: ${({ theme }) => theme.spacing.medium}; flex-direction: column; From aac3d6d06166200baaa16db87749df9f276e465f Mon Sep 17 00:00:00 2001 From: Dinesh Singh Date: Thu, 17 Nov 2022 21:37:41 +0530 Subject: [PATCH 3/7] Extension Toggle sidebar position fixes --- .../src/Components/Sidebar/DraggableToggle.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/apps/extension/src/Components/Sidebar/DraggableToggle.tsx b/apps/extension/src/Components/Sidebar/DraggableToggle.tsx index 231154914..9662e6be7 100644 --- a/apps/extension/src/Components/Sidebar/DraggableToggle.tsx +++ b/apps/extension/src/Components/Sidebar/DraggableToggle.tsx @@ -7,8 +7,7 @@ import styled, { css } from 'styled-components' import { TitleWithShortcut } from '@workduck-io/mex-components' -import { mog } from '@mexit/core' -import { MexIcon, WDLogo } from '@mexit/shared' +import { WDLogo } from '@mexit/shared' import { useSidebarTransition } from '../../Hooks/useSidebarTransition' import { useLayoutStore } from '../../Stores/useLayoutStore' @@ -22,16 +21,16 @@ const DragIcon = styled(Icon)<{ $show: boolean }>` `} ` -const ToggleWrapper = styled.div<{ $expanded?: boolean; $top: number }>` +const ToggleWrapper = styled.div<{ $endColumnWidth?: string; $expanded?: boolean; $top: number }>` position: fixed; display: flex; align-items: center; - ${({ $expanded, $top, theme }) => + ${({ $expanded, $top, $endColumnWidth, theme }) => $expanded ? css` top: ${$top}px; - right: 405px; + right: calc(${($endColumnWidth ?? '400px') + ' + ' + (theme.additional.hasBlocks ? 0 : -15)}px); ` : css` top: ${$top}px; @@ -130,7 +129,13 @@ export const DraggableToggle = () => { appendTo={() => getElementById('ext-side-nav')} content={} > - + From 5ddbcfc5bec26ee47303d7619551b5a6c5a974bd Mon Sep 17 00:00:00 2001 From: Dinesh Singh Date: Thu, 17 Nov 2022 21:54:28 +0530 Subject: [PATCH 4/7] Use MexIcon component instead of iconfiy icon component --- .../extension/src/Components/Sidebar/NotesInfoBar.tsx | 4 ++-- .../src/Components/Sidebar/SnippetsInfoBar.tsx | 11 +++++++++-- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/apps/extension/src/Components/Sidebar/NotesInfoBar.tsx b/apps/extension/src/Components/Sidebar/NotesInfoBar.tsx index 3669257c2..2d5c9cbac 100644 --- a/apps/extension/src/Components/Sidebar/NotesInfoBar.tsx +++ b/apps/extension/src/Components/Sidebar/NotesInfoBar.tsx @@ -5,7 +5,7 @@ import { Icon } from '@iconify/react' import { debounce } from 'lodash' import { mog } from '@mexit/core' -import { SidebarListFilterWrapper, SidebarListFilter, Input, SnippetCards } from '@mexit/shared' +import { SidebarListFilterWrapper, SidebarListFilter, Input, SnippetCards, MexIcon } from '@mexit/shared' import useRaju from '../../Hooks/useRaju' import useDataStore from '../../Stores/useDataStore' @@ -45,7 +45,7 @@ export const NotesInfoBar = () => { - + { - + Date: Thu, 17 Nov 2022 21:58:52 +0530 Subject: [PATCH 5/7] Snippets delete whole page re-rendering issue fixed --- apps/webapp/src/Views/Snippets.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/webapp/src/Views/Snippets.tsx b/apps/webapp/src/Views/Snippets.tsx index 9fcb520f9..7079ae597 100644 --- a/apps/webapp/src/Views/Snippets.tsx +++ b/apps/webapp/src/Views/Snippets.tsx @@ -309,7 +309,6 @@ const Snippets = () => { i.id} onSelect={onSelect} From d2273266f60aef444d09f1829c30f1d7c80f8473 Mon Sep 17 00:00:00 2001 From: Dinesh Singh Date: Fri, 18 Nov 2022 19:00:24 +0530 Subject: [PATCH 6/7] Recents, static header, show auto scroll --- .../src/Components/Editor/SnippetPreview.tsx | 3 + .../src/Components/Sidebar/ContextInfoBar.tsx | 10 +-- .../src/Components/Sidebar/NodeCard.tsx | 31 +++++--- .../src/Components/Sidebar/NotesInfoBar.tsx | 70 +++++++++++++++---- .../src/Components/Sidebar/SnippetCard.tsx | 20 +++--- .../Components/Sidebar/SnippetsInfoBar.tsx | 35 +++++----- .../src/Components/Sidebar/styled.tsx | 2 + .../CreateTodoModal/TaskEditor/styled.tsx | 2 +- .../src/Components/Editor/ContentEditor.tsx | 40 ++++++----- apps/webapp/src/Switch.tsx | 1 - apps/webapp/src/Views/EditorView.tsx | 1 + .../Components/FloatingElements/Floating.tsx | 3 +- .../src/Components/FloatingElements/types.ts | 1 + libs/shared/src/Style/Editor.tsx | 6 +- libs/shared/src/Style/Form.tsx | 7 ++ libs/shared/src/Style/Helpers.tsx | 7 +- libs/shared/src/Style/Infobar.tsx | 2 - libs/shared/src/Style/Integrations.tsx | 2 +- libs/shared/src/Style/Nav.tsx | 2 +- libs/shared/src/Style/SidebarList.style.tsx | 6 ++ .../shared/src/Style/SnippetSidebar.style.tsx | 14 +++- libs/shared/src/Style/Tab.Styles.tsx | 5 +- libs/shared/src/Style/Todo.tsx | 2 +- libs/shared/src/Utils/defaultText.tsx | 8 +++ libs/shared/src/Utils/helpers.ts | 2 +- 25 files changed, 190 insertions(+), 92 deletions(-) diff --git a/apps/extension/src/Components/Editor/SnippetPreview.tsx b/apps/extension/src/Components/Editor/SnippetPreview.tsx index a8dddf866..cd6cce024 100644 --- a/apps/extension/src/Components/Editor/SnippetPreview.tsx +++ b/apps/extension/src/Components/Editor/SnippetPreview.tsx @@ -33,6 +33,7 @@ export interface SnippetPreviewProps { hover?: boolean // editable?: boolean label?: string + disableClick?: boolean allowClosePreview?: boolean icon?: string iconTooltip?: string @@ -46,6 +47,7 @@ const SnippetPreview = ({ hover, label, placement, + disableClick, // editable = true, setPreview, icon, @@ -83,6 +85,7 @@ const SnippetPreview = ({ return ( + {/* @@ -82,14 +82,16 @@ export function ContextInfoBar() { */} {pageHighlights ? ( - + + + ) : (

Hi there

Let's get you started

 - + {basicOnboarding.map((item) => ( ))} diff --git a/apps/extension/src/Components/Sidebar/NodeCard.tsx b/apps/extension/src/Components/Sidebar/NodeCard.tsx index 63b836906..ba9f94b60 100644 --- a/apps/extension/src/Components/Sidebar/NodeCard.tsx +++ b/apps/extension/src/Components/Sidebar/NodeCard.tsx @@ -1,19 +1,16 @@ import React, { useMemo } from 'react' -import { Icon } from '@iconify/react' -import toast from 'react-hot-toast' import styled from 'styled-components' import { convertContentToRawText, MEXIT_FRONTEND_URL_BASE, mog, WORKSPACE_HEADER } from '@mexit/core' import { - CenteredFlex, CopyButton, GenericFlex, + IconButton, + MexIcon, SnippetCardFooter, - SnippetCardHeader, SnippetCardWrapper, - SnippetContentPreview, - TagsLabel + SnippetContentPreview } from '@mexit/shared' import { useAuthStore } from '../../Hooks/useAuth' @@ -21,6 +18,7 @@ import { getTitleFromPath } from '../../Hooks/useLinks' import { useNodes } from '../../Hooks/useNodes' import { useContentStore } from '../../Stores/useContentStore' import useDataStore from '../../Stores/useDataStore' +import { useRecentsStore } from '../../Stores/useRecentsStore' export const NodeCardHeader = styled.div<{ $noHover?: boolean }>` display: flex; @@ -36,6 +34,7 @@ export const NodeCard = ({ nodeId }: { nodeId: string }) => { const { publicNodes, setNodePrivate, setNodePublic, checkNodePublic } = useDataStore() const { getNode } = useNodes() const getContent = useContentStore((store) => store.getContent) + const addInRecents = useRecentsStore((s) => s.addRecent) const getWorkspaceId = useAuthStore((store) => store.getWorkspaceId) const isNodePublic = useMemo(() => { @@ -66,6 +65,7 @@ export const NodeCard = ({ nodeId }: { nodeId: string }) => { if (error) { mog('ErrorMakingNodePrivate', error) } else { + addInRecents(nodeId) setNodePrivate(nodeId) } }) @@ -84,29 +84,40 @@ export const NodeCard = ({ nodeId }: { nodeId: string }) => { if (error) { mog('ErrorMakingNodePublic', error) } else { + addInRecents(nodeId) setNodePublic(nodeId) } }) } } + const onNotePublic = (event) => { + event.stopPropagation() + flipPublicAccess() + } + return ( - + {getTitleFromPath(node?.path)} {isNodePublic ? ( - flipPublicAccess()} /> + ) : ( - flipPublicAccess()} /> + )} {isNodePublic && ( diff --git a/apps/extension/src/Components/Sidebar/NotesInfoBar.tsx b/apps/extension/src/Components/Sidebar/NotesInfoBar.tsx index 2d5c9cbac..5e62a3583 100644 --- a/apps/extension/src/Components/Sidebar/NotesInfoBar.tsx +++ b/apps/extension/src/Components/Sidebar/NotesInfoBar.tsx @@ -1,21 +1,37 @@ import React, { useEffect, useRef, useState } from 'react' import searchLine from '@iconify/icons-ri/search-line' -import { Icon } from '@iconify/react' import { debounce } from 'lodash' +import { useTheme } from 'styled-components' -import { mog } from '@mexit/core' -import { SidebarListFilterWrapper, SidebarListFilter, Input, SnippetCards, MexIcon } from '@mexit/shared' +import { Infobox } from '@workduck-io/mex-components' +import { BASE_TASKS_PATH, isParent, mog } from '@mexit/core' +import { + SidebarListFilterWrapper, + SidebarListFilter, + Input, + SnippetCards, + MexIcon, + NotesInfoBarHelp, + List, + CenteredColumn +} from '@mexit/shared' + +import { useLinks } from '../../Hooks/useLinks' import useRaju from '../../Hooks/useRaju' -import useDataStore from '../../Stores/useDataStore' +import { useRecentsStore } from '../../Stores/useRecentsStore' +import { getElementById } from '../../contentScript' import { NodeCard } from './NodeCard' export const NotesInfoBar = () => { - const publicNodes = useDataStore((state) => state.publicNodes) const [search, setSearch] = useState('') const [searchedNodes, setSearchedNodes] = useState() const { dispatch } = useRaju() + const recentNotes = useRecentsStore((s) => s.lastOpened) + + const theme = useTheme() + const { getILinkFromNodeid } = useLinks() const inputRef = useRef(null) @@ -33,30 +49,60 @@ export const NotesInfoBar = () => { } } + const getRecentList = (noteIds: Array, limit = 5) => { + const recentList = [] + + noteIds?.forEach((noteId) => { + const noteLink = getILinkFromNodeid(noteId, true) + + if (noteLink && !isParent(noteLink.path, BASE_TASKS_PATH)) { + recentList.push(noteId) + } + }) + + if (recentList.length > limit) { + return recentList.reverse().slice(0, limit) + } + + return recentList?.reverse() + } + useEffect(() => { if (search !== '') { onSearch(search) } else { - setSearchedNodes(publicNodes) + const defaultList = getRecentList(recentNotes) + setSearchedNodes(defaultList) } - }, [search]) + }, [search, recentNotes]) return ( - - + + onSearchChange(e), 250)} ref={inputRef} /> + - {searchedNodes?.map((nodeId) => ( - - ))} + {!search && !searchedNodes?.length ? ( + + +

All your recents will shown here!

+ + ) : ( + + {searchedNodes?.map((nodeId) => ( + + ))} + + )} ) } diff --git a/apps/extension/src/Components/Sidebar/SnippetCard.tsx b/apps/extension/src/Components/Sidebar/SnippetCard.tsx index 3cdd6ed14..3bf8aa720 100644 --- a/apps/extension/src/Components/Sidebar/SnippetCard.tsx +++ b/apps/extension/src/Components/Sidebar/SnippetCard.tsx @@ -1,22 +1,18 @@ -import React, { useEffect, useMemo } from 'react' +import React, { useEffect } from 'react' import fileCopyLine from '@iconify-icons/ri/file-copy-line' import magicLine from '@iconify/icons-ri/magic-line' import quillPenLine from '@iconify/icons-ri/quill-pen-line' -import { Icon } from '@iconify/react' import { tinykeys } from '@workduck-io/tinykeys' -import { Snippet, getTagsFromContent, convertContentToRawText, MEXIT_FRONTEND_URL_BASE } from '@mexit/core' +import { Snippet } from '@mexit/core' import { SnippetCardWrapper, - SnippetCardHeader, SnippetContentPreview, SnippetCardFooter, RelativeTime, - GroupHeader, MexIcon, - CopyButton, IconButton, GenericFlex } from '@mexit/shared' @@ -53,9 +49,9 @@ const SnippetCard = ({ snippet, preview = true, icon, keyStr, onClick }: Snippet ev.stopPropagation() // TODO: commenting this our for a while, need to have better click and hover interaction - if (onClick) { - onClick(ev) - } + // if (onClick) { + // onClick(ev) + // } // else { // window.open(`${MEXIT_FRONTEND_URL_BASE}/snippets/node/${snippet.id}`) // } @@ -95,6 +91,7 @@ const SnippetCard = ({ snippet, preview = true, icon, keyStr, onClick }: Snippet // TODO: Not able to scroll these previews using mouse - + {snippet.title} - + {descriptions[snippet?.id]?.rawText} - {/* */} {lastUsed && ( { return ( - - + + onSearchChange(e), 250)} ref={inputRef} /> - + - {searchedSnippets?.map((snippet) => ( - onInsertSnippet(snippet.id)} - /> - ))} + + {searchedSnippets?.map((snippet) => ( + { + event.stopPropagation() + onInsertSnippet(snippet.id) + }} + /> + ))} + ) } diff --git a/apps/extension/src/Components/Sidebar/styled.tsx b/apps/extension/src/Components/Sidebar/styled.tsx index ce8da61d9..61ee94a05 100644 --- a/apps/extension/src/Components/Sidebar/styled.tsx +++ b/apps/extension/src/Components/Sidebar/styled.tsx @@ -6,6 +6,8 @@ export const ExtSideNav = styled(RHSideNav)` position: fixed; bottom: 0; right: 0; + overflow: hidden; + overscroll-behavior: contain; ` export const SidebarContainer = styled.div` diff --git a/apps/webapp/src/Components/CreateTodoModal/TaskEditor/styled.tsx b/apps/webapp/src/Components/CreateTodoModal/TaskEditor/styled.tsx index f0ab4f644..3ff8b4d9d 100644 --- a/apps/webapp/src/Components/CreateTodoModal/TaskEditor/styled.tsx +++ b/apps/webapp/src/Components/CreateTodoModal/TaskEditor/styled.tsx @@ -12,7 +12,7 @@ export const TaskEditorStyle = styled(EditorStyles)` min-width: 40vw; max-width: 40vw; max-height: 40vh; - overflow-y: scroll; + overflow-y: auto; background: #333; border-radius: ${({ theme }) => theme.borderRadius.small}; margin: ${({ theme }) => theme.spacing.medium}; diff --git a/apps/webapp/src/Components/Editor/ContentEditor.tsx b/apps/webapp/src/Components/Editor/ContentEditor.tsx index ee83edc76..9c0e980ec 100644 --- a/apps/webapp/src/Components/Editor/ContentEditor.tsx +++ b/apps/webapp/src/Components/Editor/ContentEditor.tsx @@ -7,7 +7,7 @@ import { useLocation, useParams } from 'react-router-dom' import { tinykeys } from '@workduck-io/tinykeys' import { defaultContent, NodeEditorContent } from '@mexit/core' -import { StyledEditor, EditorWrapper, isOnEditableElement } from '@mexit/shared' +import { StyledEditor, EditorHeader, EditorWrapper, isOnEditableElement } from '@mexit/shared' import { BlockOptionsMenu } from '../../Editor/Components/BlockContextMenu' import { useComboboxOpen } from '../../Editor/Hooks/useComboboxOpen' @@ -193,24 +193,26 @@ const ContentEditor = () => { return ( <> - {isBannerVisible && ( - - )} - - - {isBlockMode ? ( - - ) : ( - - )} + + {isBannerVisible && ( + + )} + + + {isBlockMode ? ( + + ) : ( + + )} + ` width: 100%; overflow-x: hidden; - overflow-y: auto; ` const ProtectedRoute = ({ children }) => { diff --git a/apps/webapp/src/Views/EditorView.tsx b/apps/webapp/src/Views/EditorView.tsx index 100039ea2..556d28b36 100644 --- a/apps/webapp/src/Views/EditorView.tsx +++ b/apps/webapp/src/Views/EditorView.tsx @@ -22,6 +22,7 @@ export const EditorViewWrapper = styled.div` justify-content: space-between; width: 100%; height: 100%; + overflow: inherit hidden; max-width: 860px; min-width: 400px; margin: 0 auto; diff --git a/libs/shared/src/Components/FloatingElements/Floating.tsx b/libs/shared/src/Components/FloatingElements/Floating.tsx index 62a273fc8..0ffa3ea4f 100644 --- a/libs/shared/src/Components/FloatingElements/Floating.tsx +++ b/libs/shared/src/Components/FloatingElements/Floating.tsx @@ -32,6 +32,7 @@ export const Floating = ({ persist, setOpen, render, + disableClick, placement, root }: Props) => { @@ -65,7 +66,7 @@ export const Floating = ({ buffer: 1 }) }), - useClick(context), + !disableClick && useClick(context), useRole(context), useDismiss(context), label && useDelayGroup(context, { id: label }) diff --git a/libs/shared/src/Components/FloatingElements/types.ts b/libs/shared/src/Components/FloatingElements/types.ts index 802a0bbad..3819a8f82 100644 --- a/libs/shared/src/Components/FloatingElements/types.ts +++ b/libs/shared/src/Components/FloatingElements/types.ts @@ -10,5 +10,6 @@ export interface Props { open: boolean persist?: boolean label?: string + disableClick?: boolean setOpen: (open: boolean) => void } diff --git a/libs/shared/src/Style/Editor.tsx b/libs/shared/src/Style/Editor.tsx index d59fc919e..e79fefdde 100644 --- a/libs/shared/src/Style/Editor.tsx +++ b/libs/shared/src/Style/Editor.tsx @@ -69,7 +69,7 @@ export const EditorWrapper = styled.div<{ comboboxOpen?: boolean; isUserEditing? ${({ comboboxOpen }) => comboboxOpen && css` - overflow-y: hidden; + overflow: hidden auto; `} ` @@ -92,6 +92,10 @@ export const CenteredMainContent = styled.div` } ` +export const EditorHeader = styled.section` + width: 100%; +` + export const StyledEditor = styled.div` display: flex; flex-direction: column; diff --git a/libs/shared/src/Style/Form.tsx b/libs/shared/src/Style/Form.tsx index 69bc5f8a6..3d7af6c29 100644 --- a/libs/shared/src/Style/Form.tsx +++ b/libs/shared/src/Style/Form.tsx @@ -15,6 +15,7 @@ interface InputProps { transparent?: boolean isDirty?: boolean isSelected?: boolean + fontSize?: string // appType?: AppType error?: boolean center?: boolean @@ -57,6 +58,12 @@ export const Input = styled.input` color: ${({ theme }) => theme.colors.primary}; `} + ${({ fontSize }) => + fontSize && + css` + font-size: ${fontSize}; + `} + ${({ theme, error }) => error && css` diff --git a/libs/shared/src/Style/Helpers.tsx b/libs/shared/src/Style/Helpers.tsx index fd9d3c1db..414cf6f6a 100644 --- a/libs/shared/src/Style/Helpers.tsx +++ b/libs/shared/src/Style/Helpers.tsx @@ -58,11 +58,12 @@ export const PixelToCSS = (x: Pixels): string => { } export const ScrollStyles = (color = undefined, width = 10) => css` - scrollbar-color: dark; + scrollbar-color: auto; + scrollbar-width: thin; - &::-webkit-scrollbar { + /* &::-webkit-scrollbar { width: ${width}px; - } + } */ &::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0); } diff --git a/libs/shared/src/Style/Infobar.tsx b/libs/shared/src/Style/Infobar.tsx index 4f81c3b9b..85772cada 100644 --- a/libs/shared/src/Style/Infobar.tsx +++ b/libs/shared/src/Style/Infobar.tsx @@ -23,8 +23,6 @@ const infoWidths = { } export const InfoBarWrapper = styled.div` - overflow-x: hidden; - @media (max-width: ${size.wide}) { min-width: ${infoWidths.small.normal}; max-width: ${infoWidths.small.normal}; diff --git a/libs/shared/src/Style/Integrations.tsx b/libs/shared/src/Style/Integrations.tsx index e854ed380..40279cd6c 100644 --- a/libs/shared/src/Style/Integrations.tsx +++ b/libs/shared/src/Style/Integrations.tsx @@ -185,7 +185,7 @@ export const IntegrationStyledIcon = styled(Icon)` export const IntegrationScroll = styled.div` max-height: 66%; - overflow-y: scroll; + overflow-y: auto; ` export const Text = styled.div` diff --git a/libs/shared/src/Style/Nav.tsx b/libs/shared/src/Style/Nav.tsx index e9768ecc1..dafb18bc0 100644 --- a/libs/shared/src/Style/Nav.tsx +++ b/libs/shared/src/Style/Nav.tsx @@ -10,7 +10,7 @@ import { Ellipsis } from './NodeSelect.style' import { TabBody } from './Tab.Styles' export const Scroll = css` - overflow-y: scroll; + overflow-y: auto; overflow-x: hidden; ::-webkit-scrollbar { diff --git a/libs/shared/src/Style/SidebarList.style.tsx b/libs/shared/src/Style/SidebarList.style.tsx index 1fa45fef6..5dff0f358 100644 --- a/libs/shared/src/Style/SidebarList.style.tsx +++ b/libs/shared/src/Style/SidebarList.style.tsx @@ -56,6 +56,12 @@ export const SidebarListFilter = styled.div` } ` +export const List = styled.section<{ scrollable?: boolean }>` + margin-top: ${({ theme }) => theme.spacing.medium}; + overflow: hidden auto; + overscroll-behavior: contain; +` + export const SidebarListFilterWrapper = styled.div` display: flex; align-items: center; diff --git a/libs/shared/src/Style/SnippetSidebar.style.tsx b/libs/shared/src/Style/SnippetSidebar.style.tsx index 040bb32d0..afcd99f9b 100644 --- a/libs/shared/src/Style/SnippetSidebar.style.tsx +++ b/libs/shared/src/Style/SnippetSidebar.style.tsx @@ -1,12 +1,19 @@ -import styled from 'styled-components' +import styled, { css } from 'styled-components' import { Ellipsis } from './NodeSelect.style' -export const SnippetCards = styled.div` +export const SnippetCards = styled.div<{ fullHeight?: boolean }>` padding: ${({ theme }) => theme.spacing.medium}; display: flex; gap: ${({ theme }) => theme.spacing.medium}; flex-direction: column; + overflow: hidden; + /* overscroll-behavior: contain; */ + ${({ fullHeight }) => + fullHeight !== false && + css` + height: 100%; + `} ` export const SnippetCardWrapper = styled.div` @@ -15,7 +22,8 @@ export const SnippetCardWrapper = styled.div` gap: ${({ theme }) => theme.spacing.small}; border-radius: ${({ theme }) => theme.borderRadius.small}; background-color: ${({ theme }) => theme.colors.gray[8]}; - padding: ${({ theme }) => theme.spacing.medium}; + padding: ${({ theme }) => theme.spacing.small}; + margin-bottom: ${({ theme }) => theme.spacing.medium}; ` export const SnippetCardHeader = styled.div` diff --git a/libs/shared/src/Style/Tab.Styles.tsx b/libs/shared/src/Style/Tab.Styles.tsx index 427ab23ee..f4a6d3a3c 100644 --- a/libs/shared/src/Style/Tab.Styles.tsx +++ b/libs/shared/src/Style/Tab.Styles.tsx @@ -1,4 +1,3 @@ -import { transparentize } from 'polished' import { animated } from 'react-spring' import styled, { css } from 'styled-components' @@ -6,7 +5,7 @@ export const TabPanel = styled(animated.div)` width: 100%; height: 100%; - overflow: hidden auto; + overflow: hidden; border-radius: ${({ theme }) => theme.borderRadius.small}; ` @@ -49,7 +48,7 @@ export const StyledTab = styled.div.attrs({ export const TabBody = styled(animated.div)<{ selected?: boolean }>` width: 100%; height: 100%; - overflow-x: hidden; + overflow: hidden; ` export const TabsContainer = styled(animated.section)<{ visible?: boolean }>` diff --git a/libs/shared/src/Style/Todo.tsx b/libs/shared/src/Style/Todo.tsx index 7cbfe4f34..ce56afa48 100644 --- a/libs/shared/src/Style/Todo.tsx +++ b/libs/shared/src/Style/Todo.tsx @@ -44,7 +44,7 @@ export const StyledBoard = styled.div<{ sidebarExpanded?: boolean }>` width: ${({ sidebarExpanded, theme }) => css`calc(${KANBAN_WIDTH(sidebarExpanded)} - ${theme.additional.hasBlocks ? '1.33rem' : '0px'})`}; max-height: ${KANBAN_HEIGHT}; - overflow-y: scroll; + overflow-y: auto; overflow-x: hidden; transition: width 0.5s ease-in-out; background: ${({ theme }) => transparentize(0.5, theme.colors.gray[9])}; diff --git a/libs/shared/src/Utils/defaultText.tsx b/libs/shared/src/Utils/defaultText.tsx index bcf26c21b..4862be556 100644 --- a/libs/shared/src/Utils/defaultText.tsx +++ b/libs/shared/src/Utils/defaultText.tsx @@ -102,6 +102,14 @@ export const SearchHelp = (
) +export const NotesInfoBarHelp = ( +
+

Notes

+

All your notes are visible here

+

Click public and that note would be available to everyone!

+
+) + export const SnippetHelp = (

Snippets

diff --git a/libs/shared/src/Utils/helpers.ts b/libs/shared/src/Utils/helpers.ts index becff0825..2fdf17c88 100644 --- a/libs/shared/src/Utils/helpers.ts +++ b/libs/shared/src/Utils/helpers.ts @@ -19,7 +19,7 @@ export async function copyTextToClipboard(text: any) { export function getScrollbarWidth() { const outer = document.createElement('div') outer.style.visibility = 'hidden' - outer.style.overflow = 'scroll' + outer.style.overflow = 'auto' document.body.appendChild(outer) const inner = document.createElement('div') outer.appendChild(inner) From c2ced563511a161472a2c4e33dc60c40959ec63c Mon Sep 17 00:00:00 2001 From: Dinesh Singh Date: Fri, 18 Nov 2022 19:02:52 +0530 Subject: [PATCH 7/7] added changeset --- .changeset/friendly-cobras-care.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/friendly-cobras-care.md diff --git a/.changeset/friendly-cobras-care.md b/.changeset/friendly-cobras-care.md new file mode 100644 index 000000000..7499843b2 --- /dev/null +++ b/.changeset/friendly-cobras-care.md @@ -0,0 +1,6 @@ +--- +'mexit': patch +'mexit-webapp': patch +--- + +Right Sidebar UX fixes