Merge pull request #1475 from quadratichq/grey-unsaved

simple unsaved indicator in CodeEditor + disable select text around app
quadratichq · Jun 26, 2024 · e48a583 · e48a583
2 parents 811c93b + e247928
commit e48a583
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 6 deletions.
diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/AICodeBlockParser.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/AICodeBlockParser.tsx
@@ -23,5 +23,9 @@ export function parseCodeBlocks(input: string): Array<string | JSX.Element> {
 }
 
 export function CodeBlockParser({ input }: { input: string }): JSX.Element {
-  return <Stack gap={2}>{parseCodeBlocks(input)}</Stack>;
+  return (
+    <Stack gap={2} className="select-text">
+      {parseCodeBlocks(input)}
+    </Stack>
+  );
 }
diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/AiAssistant.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/AiAssistant.tsx
@@ -181,7 +181,7 @@ export const AiAssistant = ({ evalResult, editorMode, editorContent, isActive }:
   return (
     <>
       <div
-        className="overflow-y-auto whitespace-pre-wrap pb-2 pl-3 pr-4 text-sm outline-none"
+        className="select-text overflow-y-auto whitespace-pre-wrap pb-2 pl-3 pr-4 text-sm outline-none"
         spellCheck={false}
         onKeyDown={(e) => {
           if (((e.metaKey || e.ctrlKey) && e.key === 'a') || ((e.metaKey || e.ctrlKey) && e.key === 'c')) {

diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx
@@ -338,7 +338,10 @@ export const CodeEditor = () => {
     <CodeEditorProvider>
       <div
         ref={containerRef}
-        className={cn('relative flex bg-background', codeEditorPanelData.panelPosition === 'left' ? '' : 'flex-col')}
+        className={cn(
+          'relative flex select-none bg-background',
+          codeEditorPanelData.panelPosition === 'left' ? '' : 'flex-col'
+        )}
         style={{
           width: `${
             codeEditorPanelData.editorWidth +

diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorHeader.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorHeader.tsx
@@ -120,7 +120,7 @@ export const CodeEditorHeader = (props: Props) => {
         className={cn(
           `relative`,
           unsaved &&
-            `after:pointer-events-none after:absolute after:-bottom-0.5 after:-right-0.5 after:h-3 after:w-3 after:rounded-full after:border-2 after:border-solid after:border-background after:bg-warning after:content-['']`
+            `after:pointer-events-none after:absolute after:-bottom-0.5 after:-right-0.5 after:h-3 after:w-3 after:rounded-full after:border-2 after:border-solid after:border-background after:bg-gray-400 after:content-['']`
         )}
       >
         <TooltipHint title={`${language}${unsaved ? ' · Unsaved changes' : ''}`} placement="bottom">
@@ -136,7 +136,7 @@ export const CodeEditorHeader = (props: Props) => {
         </TooltipHint>
       </div>
       <div className="mx-2 flex truncate text-sm font-medium">
-        Cell ({cellLocation.x}, {cellLocation.y})
+        Cell ({cellLocation.x}, {cellLocation.y}) {unsaved && ' - Unsaved changes'}
         {currentCodeEditorCellIsNotInActiveSheet && (
           <span className="ml-1 min-w-0 truncate">- {currentSheetNameOfActiveCodeEditorCell}</span>
         )}

diff --git a/quadratic-client/src/app/ui/menus/SheetBar/SheetBar.tsx b/quadratic-client/src/app/ui/menus/SheetBar/SheetBar.tsx
@@ -422,7 +422,7 @@ export const SheetBar = (): JSX.Element => {
         zIndex: 1,
         backgroundColor: theme.palette.background.paper,
       }}
-      className="sheet-bar"
+      className="sheet-bar select-none"
     >
       {hasPermission && (
         <SheetBarButton

diff --git a/quadratic-client/src/app/ui/menus/TopBar/TopBar.tsx b/quadratic-client/src/app/ui/menus/TopBar/TopBar.tsx
@@ -55,6 +55,7 @@ export const TopBar = () => {
         // if clicked (not child clicked), maximize window. For electron.
         if (event.target === event.currentTarget) electronMaximizeCurrentWindow();
       }}
+      className="select-none"
     >
       <div
         className="flex items-stretch lg:basis-1/3"