fix: adjust editor toolbar

AppFlowy-IO · Dec 26, 2024 · 90fda98 · 90fda98
1 parent 846a236
commit 90fda98
Show file tree

Hide file tree

Showing 15 changed files with 75 additions and 53 deletions.
diff --git a/frontend/appflowy_web_app/package.json b/frontend/appflowy_web_app/package.json
@@ -24,7 +24,7 @@
     "coverage": "pnpm run test:unit && pnpm run test:components"
   },
   "dependencies": {
-    "@appflowyinc/editor": "^0.0.28",
+    "@appflowyinc/editor": "^0.0.30",
     "@atlaskit/primitives": "^5.5.3",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",

diff --git a/frontend/appflowy_web_app/pnpm-lock.yaml b/frontend/appflowy_web_app/pnpm-lock.yaml
diff --git a/frontend/appflowy_web_app/src/assets/warning.svg b/frontend/appflowy_web_app/src/assets/warning.svg
diff --git a/frontend/appflowy_web_app/src/components/_shared/modal/NormalModal.tsx b/frontend/appflowy_web_app/src/components/_shared/modal/NormalModal.tsx
@@ -19,7 +19,7 @@ export interface NormalModalProps extends DialogProps {
   closable?: boolean;
 }
 
-export function NormalModal ({
+export function NormalModal({
   okText,
   title,
   cancelText,
@@ -53,15 +53,15 @@ export function NormalModal ({
     >
       <div className={'relative flex flex-col gap-4 p-5'}>
         <div className={'flex w-full items-center justify-between text-base font-medium'}>
-          <div className={'flex-1 text-center font-medium'}>{title}</div>
+          <div className={'flex-1 text-center font-medium truncate'}>{title}</div>
           {closable && <div className={'relative -right-1.5'}>
             <IconButton
               size={'small'}
               color={'inherit'}
               className={'h-6 w-6'}
               onClick={onClose || onCancel}
             >
-              <CloseIcon className={'h-4 w-4'} />
+              <CloseIcon className={'h-4 w-4'}/>
             </IconButton>
           </div>}
 

diff --git a/frontend/appflowy_web_app/src/components/app/view-actions/DeletePageConfirm.tsx b/frontend/appflowy_web_app/src/components/app/view-actions/DeletePageConfirm.tsx
@@ -5,7 +5,7 @@ import { useAppHandlers, useAppView } from '@/components/app/app.hooks';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function DeletePageConfirm ({ open, onClose, viewId, onDeleted }: {
+function DeletePageConfirm({ open, onClose, viewId, onDeleted }: {
   open: boolean;
   onClose: () => void;
   viewId: string;
@@ -58,8 +58,13 @@ function DeletePageConfirm ({ open, onClose, viewId, onDeleted }: {
       danger={true}
       onClose={onClose}
       title={
-        <div className={'flex font-semibold items-center w-full text-left'}>{`${t('button.delete')}: ${view?.name}`}</div>
+        <div
+          className={'flex font-semibold items-center w-full text-left'}>
+          <span
+            className={'truncate w-full'}>{`${t('button.delete')}: ${view?.name}`}</span>
+        </div>
       }
+
       onOk={handleOk}
       PaperProps={{
         className: 'w-[420px] max-w-[70vw]',

diff --git a/frontend/appflowy_web_app/src/components/app/workspaces/Workspaces.tsx b/frontend/appflowy_web_app/src/components/app/workspaces/Workspaces.tsx
@@ -123,7 +123,7 @@ export function Workspaces() {
               size={'small'}
               className={'mx-2'}
             >
-              <TipIcon className={'w-4 h-4'}/>
+              <TipIcon className={'w-4 h-4 text-text-placeholder'}/>
             </IconButton>
           </Tooltip>
         </Button>

diff --git a/frontend/appflowy_web_app/src/components/database/DatabaseViews.tsx b/frontend/appflowy_web_app/src/components/database/DatabaseViews.tsx
@@ -13,7 +13,7 @@ import React, { Suspense, useCallback, useMemo, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import DatabaseConditions from 'src/components/database/components/conditions/DatabaseConditions';
 
-function DatabaseViews ({
+function DatabaseViews({
   onChangeView,
   viewId,
   iidIndex,
@@ -100,7 +100,7 @@ function DatabaseViews ({
           setSelectedViewId={onChangeView}
           viewIds={viewIds}
         />
-        <DatabaseConditions />
+        <DatabaseConditions/>
 
         <div className={'flex h-full w-full flex-1 flex-col overflow-hidden'}>
           <Suspense fallback={skeleton}>

diff --git a/frontend/appflowy_web_app/src/components/editor/components/blocks/database/DatabaseBlock.tsx b/frontend/appflowy_web_app/src/components/editor/components/blocks/database/DatabaseBlock.tsx
@@ -9,6 +9,7 @@ import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useSt
 import { useTranslation } from 'react-i18next';
 import { ReactEditor, useReadOnly, useSlateStatic } from 'slate-react';
 import { Element } from 'slate';
+import { ReactComponent as TipIcon } from '@/assets/warning.svg';
 
 export const DatabaseBlock = memo(
   forwardRef<HTMLDivElement, EditorElementProps<DatabaseNode>>(({ node, children, ...attributes }, ref) => {
@@ -147,14 +148,24 @@ export const DatabaseBlock = memo(
               setShowActions(true);
             }
           }}
-          onMouseLeave={() => setShowActions(false)}
+          onMouseLeave={() => {
+            setShowActions(false);
+          }}
         >
           <div
             ref={ref}
             className={'absolute left-0 top-0 h-full w-full caret-transparent'}
           >
             {children}
           </div>
+
+          <div style={{
+            display: showActions ? 'flex' : 'none',
+          }}
+               className={'absolute text-text-caption break-words whitespace-pre-wrap top-0 left-0 z-[10] bg-content-blue-50 p-2 w-full min-h-[34px] rounded flex '}>
+            <TipIcon className={'relative top-1 w-4 h-4 mr-1'}/>
+            <span>Read-only: Use the AppFlowy app to create or edit database pages. This feature will be available soon.</span>
+          </div>
           <TableContainer
             paddingLeft={scrollLeft}
             blockId={node.blockId}

diff --git a/frontend/appflowy_web_app/src/components/quick-note/AddNote.tsx b/frontend/appflowy_web_app/src/components/quick-note/AddNote.tsx
@@ -4,7 +4,8 @@ import { useService } from '@/components/main/app.hooks';
 import { ToastContext } from '@/components/quick-note/QuickNote.hooks';
 import { useCurrentWorkspaceId } from '@/components/app/app.hooks';
 import { QuickNote } from '@/application/types';
-import { CircularProgress } from '@mui/material';
+import { Button, CircularProgress } from '@mui/material';
+import { useTranslation } from 'react-i18next';
 
 function AddNote({
   onEnterNote,
@@ -39,21 +40,18 @@ function AddNote({
     }
   };
 
+  const { t } = useTranslation();
+
   return (
     <>
-      <div
+      <Button
+        size={'small'}
+        color={'inherit'}
+        startIcon={loading ? <CircularProgress className={'w-4 h-4'}/> : <AddIcon className={'w-4 h-4'}/>}
         onClick={handleAdd}
-        style={{
-          boxShadow: '0px 8px 16px 0px rgba(0, 188, 240, 0.10)',
-        }}
-        className={'flex select-none relative cursor-pointer text-content-on-fill w-10 h-10 rounded-full items-center justify-center bg-fill-default opacity-90 hover:opacity-100'}>
-        {
-          loading ? (
-            <CircularProgress className={'w-6 h-6'}/>
-          ) : <AddIcon className={'w-6 h-6'}/>
-        }
-
-      </div>
+        className={'justify-start w-full'}>
+        {t('quickNote.addNote')}
+      </Button>
     </>
   );
 }

diff --git a/frontend/appflowy_web_app/src/components/quick-note/DeleteNoteModal.tsx b/frontend/appflowy_web_app/src/components/quick-note/DeleteNoteModal.tsx
@@ -5,6 +5,7 @@ import { useService } from '@/components/main/app.hooks';
 import { NormalModal } from '@/components/_shared/modal';
 import { useTranslation } from 'react-i18next';
 import { QuickNote } from '@/application/types';
+import { getTitle } from '@/components/quick-note/utils';
 
 function DeleteNoteModal({ open, onClose, note, onDelete }: {
   open: boolean;
@@ -47,7 +48,10 @@ function DeleteNoteModal({ open, onClose, note, onDelete }: {
       onClose={onClose}
       title={
         <div
-          className={'flex font-semibold items-center w-full text-left'}>{`${t('button.delete')}: ${note?.title || ''}`}</div>
+          className={'flex font-semibold items-center w-full text-left'}>
+          <span
+            className={'truncate w-full'}>{`${t('button.delete')}: ${getTitle(note) || t('menuAppHeader.defaultNewPageName')}`}</span>
+        </div>
       }
       onOk={handleDelete}
       PaperProps={{

diff --git a/frontend/appflowy_web_app/src/components/quick-note/Note.tsx b/frontend/appflowy_web_app/src/components/quick-note/Note.tsx
@@ -42,7 +42,7 @@ function Note({
   }, [note.id]);
 
   return (
-    <div ref={ref} className={'flex flex-1 overflow-hidden pb-4'}>
+    <div ref={ref} className={'flex flex-1 overflow-hidden'}>
       <EditorProvider>
         <NoteEditor note={note} onUpdateData={onUpdateData}/>
       </EditorProvider>

diff --git a/frontend/appflowy_web_app/src/components/quick-note/NoteList.tsx b/frontend/appflowy_web_app/src/components/quick-note/NoteList.tsx
@@ -44,7 +44,7 @@ function NoteList({
                   onMouseEnter={() => setHoverId(note.id)}
                   onMouseLeave={() => setHoverId(null)}
                   key={note.id}
-                  className={`px-5 relative hover:bg-fill-list-hover text-sm overflow-hidden cursor-pointer`}
+                  className={`px-5 relative hover:bg-content-blue-50 text-sm overflow-hidden cursor-pointer`}
                 >
                   <div
                     className={`w-full 
@@ -62,7 +62,7 @@ function NoteList({
                   </div>
                   {hoverId === note.id ? <div
                     className={'absolute border-line-divider right-4 top-1/2 bg-bg-body border rounded-[8px] p-1 -translate-y-1/2 flex items-center gap-1.5'}>
-                    <Tooltip title={t('button.edit')}>
+                    <Tooltip placement={'top'} title={t('button.edit')}>
                       <IconButton onClick={(e) => {
                         e.stopPropagation();
                         onEnterNode(note);
@@ -71,7 +71,7 @@ function NoteList({
                       </IconButton>
                     </Tooltip>
                     <Divider orientation={'vertical'} flexItem className={'my-1'}/>
-                    <Tooltip title={t('button.delete')}>
+                    <Tooltip placement={'top'} title={t('button.delete')}>
                       <IconButton onClick={(e) => {
                         e.stopPropagation();
 

diff --git a/frontend/appflowy_web_app/src/components/quick-note/NoteListHeader.tsx b/frontend/appflowy_web_app/src/components/quick-note/NoteListHeader.tsx
@@ -4,7 +4,7 @@ import { ReactComponent as CloseIcon } from '@/assets/close.svg';
 import { ReactComponent as OpenIcon } from '@/assets/full_view.svg';
 import { ReactComponent as CollapseIcon } from '@/assets/collapse_all_page.svg';
 
-import { IconButton, InputBase } from '@mui/material';
+import { IconButton, InputBase, Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { createHotkey, HOT_KEY_NAME } from '@/utils/hotkeys';
 import { debounce } from 'lodash-es';
@@ -32,19 +32,20 @@ function NoteListHeader({
     <div
       className={'flex relative items-center w-full h-full gap-4'}
     >
-      <IconButton
-
-        className={`z-[2] ${activeSearch ? 'order-1 cursor-default hover:bg-transparent' : 'order-2'}`}
-        onClick={(e) => {
-          e.stopPropagation();
-          if (!activeSearch) {
-            inputRef.current?.focus();
-            setActiveSearch(true);
-          }
-        }} size={'small'}>
-        <SearchIcon/>
-      </IconButton>
-      <div className={'flex-1 order-1'}>
+      <Tooltip title={t('quickNote.search')} placement={'top'}>
+        <IconButton
+          className={`z-[2] ${activeSearch ? 'cursor-default hover:bg-transparent' : ''}`}
+          onClick={(e) => {
+            e.stopPropagation();
+            if (!activeSearch) {
+              inputRef.current?.focus();
+              setActiveSearch(true);
+            }
+          }} size={'small'}>
+          <SearchIcon/>
+        </IconButton>
+      </Tooltip>
+      <div className={'flex-1'}>
         {activeSearch ?
           <InputBase
             className={'flex-1'}
@@ -73,7 +74,7 @@ function NoteListHeader({
         {expand ? <CollapseIcon className={'transform rotate-45'}/> : <OpenIcon/>}
       </IconButton>
 
-      <IconButton className={'order-2'} onClick={() => {
+      <IconButton className={''} onClick={() => {
         if (activeSearch) {
           setActiveSearch(false);
           debounceSearch('');

diff --git a/frontend/appflowy_web_app/src/components/quick-note/QuickNote.tsx b/frontend/appflowy_web_app/src/components/quick-note/QuickNote.tsx
@@ -17,7 +17,7 @@ import { getPopoverPosition, setPopoverPosition } from '@/components/quick-note/
 
 const Note = React.lazy(() => import('@/components/quick-note/Note'));
 
-const PAPER_SIZE = [480, 316];
+const PAPER_SIZE = [480, 396];
 const Transition = React.forwardRef(function Transition(
   props: TransitionProps & {
     children: React.ReactElement;
@@ -460,7 +460,7 @@ export function QuickNote() {
                 />
             }
           </div>
-          <div className={'absolute right-4 bottom-7'}>
+          <div className={'h-fit bg-bg-base min-h-[38px] px-4 py-2 w-full'}>
             <AddNote onAdd={(note) => {
               setNoteList(prev => [note, ...prev]);
             }} onEnterNote={handleEnterNote}/>

diff --git a/frontend/resources/translations/en.json b/frontend/resources/translations/en.json
@@ -2958,6 +2958,7 @@
     "createFailed": "Failed to create quick note",
     "quickNotesEmpty": "No quick notes",
     "emptyNote": "Empty note",
-    "deleteNotePrompt": "The selected note will be deleted permanently. Are you sure you want to delete it?"
+    "deleteNotePrompt": "The selected note will be deleted permanently. Are you sure you want to delete it?",
+    "addNote": "New note"
   }
 }