From 034edc3eba3770e0e66876339bf342fac0309b0d Mon Sep 17 00:00:00 2001 From: Almoizs-1310 Date: Thu, 5 Mar 2026 15:23:25 +0530 Subject: [PATCH 1/4] updates the desigh of the google-docs plugin as per the new figma design --- Frame 27.svg | 8 + account_tree.svg | 8 + cached.svg | 8 + folder_open.svg | 8 + src/client/assets/icons/account_tree.tsx | 27 + src/client/assets/icons/cached.tsx | 27 + src/client/assets/icons/folder_open.tsx | 27 + src/client/assets/icons/index.ts | 4 + src/client/assets/icons/logout.tsx | 12 + src/client/components/button.module.css | 32 +- src/client/components/button.tsx | 10 +- .../components/create-diagram-dialog.tsx | 2 +- src/client/sidebar/components/Sidebar.tsx | 463 ++++++++++++------ src/client/sidebar/styles.css | 1 + src/client/utils/helpers.ts | 2 +- src/server/ui.js | 2 +- 16 files changed, 482 insertions(+), 159 deletions(-) create mode 100644 Frame 27.svg create mode 100644 account_tree.svg create mode 100644 cached.svg create mode 100644 folder_open.svg create mode 100644 src/client/assets/icons/account_tree.tsx create mode 100644 src/client/assets/icons/cached.tsx create mode 100644 src/client/assets/icons/folder_open.tsx create mode 100644 src/client/assets/icons/index.ts create mode 100644 src/client/assets/icons/logout.tsx diff --git a/Frame 27.svg b/Frame 27.svg new file mode 100644 index 0000000..3c2d07a --- /dev/null +++ b/Frame 27.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/account_tree.svg b/account_tree.svg new file mode 100644 index 0000000..29271ca --- /dev/null +++ b/account_tree.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/cached.svg b/cached.svg new file mode 100644 index 0000000..ed9d8bd --- /dev/null +++ b/cached.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/folder_open.svg b/folder_open.svg new file mode 100644 index 0000000..a5307a5 --- /dev/null +++ b/folder_open.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/client/assets/icons/account_tree.tsx b/src/client/assets/icons/account_tree.tsx new file mode 100644 index 0000000..f9584fc --- /dev/null +++ b/src/client/assets/icons/account_tree.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +interface IconProps { + size?: number; + color?: string; +} + +const AccountTreeIcon: React.FC = ({ size = 18, color = '#2B2542' }) => { + return ( + + + + + + + + + ); +}; + +export default AccountTreeIcon; \ No newline at end of file diff --git a/src/client/assets/icons/cached.tsx b/src/client/assets/icons/cached.tsx new file mode 100644 index 0000000..c313de0 --- /dev/null +++ b/src/client/assets/icons/cached.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +interface IconProps { + size?: number; + color?: string; +} + +const CachedIcon: React.FC = ({ size = 18, color = '#2B2542' }) => { + return ( + + + + + + + + + ); +}; + +export default CachedIcon; \ No newline at end of file diff --git a/src/client/assets/icons/folder_open.tsx b/src/client/assets/icons/folder_open.tsx new file mode 100644 index 0000000..867cbe1 --- /dev/null +++ b/src/client/assets/icons/folder_open.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +interface IconProps { + size?: number; + color?: string; +} + +const FolderOpenIcon: React.FC = ({ size = 18, color = '#2B2542' }) => { + return ( + + + + + + + + + ); +}; + +export default FolderOpenIcon; \ No newline at end of file diff --git a/src/client/assets/icons/index.ts b/src/client/assets/icons/index.ts new file mode 100644 index 0000000..5e5f9ca --- /dev/null +++ b/src/client/assets/icons/index.ts @@ -0,0 +1,4 @@ +export { default as AccountTreeIcon } from './account_tree'; +export { default as FolderOpenIcon } from './folder_open'; +export { default as CachedIcon } from './cached'; +export { default as LogoutIcon } from './logout'; \ No newline at end of file diff --git a/src/client/assets/icons/logout.tsx b/src/client/assets/icons/logout.tsx new file mode 100644 index 0000000..02cc88c --- /dev/null +++ b/src/client/assets/icons/logout.tsx @@ -0,0 +1,12 @@ +export default function LogoutIcon() { + return ( + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/client/components/button.module.css b/src/client/components/button.module.css index 4143a3b..c6834aa 100644 --- a/src/client/components/button.module.css +++ b/src/client/components/button.module.css @@ -1,3 +1,27 @@ +.buttonPrimary { + font-family: 'Commissioner', sans-serif; + font-size: 14px; + line-height: 1.25rem; + width: 100%; + height: 36px; + padding: 6px 16px; + outline: none; + border-radius: 8px; + border: none; + background-color: #BEDDE3; + cursor: pointer; + color: #1E1A2E; + display: flex; + align-items: center; + justify-content: flex-start; +} + +.buttonPrimary:hover { + background-color: #A5D0D7; + color: #1E1A2E; + transition: all 0.2s; +} + .button { font-family: 'Commissioner', sans-serif; font-size: 14px; @@ -8,7 +32,7 @@ border: none; background-color: #E80962; cursor: pointer; - color: white; + color: white; } .button:hover { @@ -31,8 +55,4 @@ border-color: rgb(207, 207, 211); } -.flexContainer { - display: flex; - align-items: center; - gap: 8px; -} + diff --git a/src/client/components/button.tsx b/src/client/components/button.tsx index 117e8ea..82e9066 100644 --- a/src/client/components/button.tsx +++ b/src/client/components/button.tsx @@ -8,6 +8,8 @@ interface ButtonProps { disabled?: boolean; style?: React.CSSProperties; loading?: boolean; + variant?: 'primary' | 'secondary'; + icon?: React.ReactNode; } const Button: FunctionComponent = ({ @@ -16,18 +18,20 @@ const Button: FunctionComponent = ({ disabled, style, loading = false, + variant = 'secondary', + icon, ...rest }) => { return ( diff --git a/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx b/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx index ac8a57e..d16d6a9 100644 --- a/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx +++ b/src/client/create-diagram-dialog/components/create-diagram-dialog.tsx @@ -17,7 +17,7 @@ const CreateDiagramDialog = () => { useEffect(() => { if (!authState?.authorized) return; const url = buildUrl( - '/app/diagrams/new?pluginSource=googledocs', + '/app/diagrams/new?pluginSource=googledocs&shouldShowPopup=true', authState.token ); setDiagramsUrl(url); diff --git a/src/client/sidebar/components/Sidebar.tsx b/src/client/sidebar/components/Sidebar.tsx index c5109b7..29394b3 100644 --- a/src/client/sidebar/components/Sidebar.tsx +++ b/src/client/sidebar/components/Sidebar.tsx @@ -4,19 +4,17 @@ import { Container, Typography, Button as MuiButton, - Divider, Box, - Tabs, - Tab, AlertColor, } from '@mui/material'; import { serverFunctions } from '../../utils/serverFunctions'; -import { buildUrl } from '../../utils/helpers'; +import { buildUrl, compressBase64Image } from '../../utils/helpers'; import useAuth from '../../hooks/useAuth'; import Button from '../../components/button'; import { showAlertDialog } from '../../utils/alert'; import analytics from '../../../analytics/analytics'; import Toast from '../../components/toast'; +import { AccountTreeIcon, FolderOpenIcon, CachedIcon, LogoutIcon } from '../../assets/icons'; @@ -127,11 +125,14 @@ const Sidebar = () => { setToastSeverity('info'); setToastOpen(true); + // Ensure image is compressed (in case it wasn't compressed before sending) + const compressedImage = await compressBase64Image(data.image); + if (data.operation === 'replace') { - await serverFunctions.replaceSelectedImageWithBase64AndSize(data.image, data.metadata); + await serverFunctions.replaceSelectedImageWithBase64AndSize(compressedImage, data.metadata); setToastMessage('Diagram updated successfully!'); } else { - await serverFunctions.insertBase64ImageWithMetadata(data.image, data.metadata); + await serverFunctions.insertBase64ImageWithMetadata(compressedImage, data.metadata); setToastMessage('Diagram inserted successfully!'); } @@ -180,6 +181,7 @@ const Sidebar = () => { const actionData = e.data; if (action === 'save') { + console.log('Received save action from dialog'); const data = actionData.data; if (!data) return; const metadata = new URLSearchParams({ @@ -189,14 +191,28 @@ const Sidebar = () => { minor: data.minor, }); try { + setIsProcessingInsertion(true); + setToastMessage('Inserting diagram...'); + setToastSeverity('info'); + setToastOpen(true); + + const compressedImage = await compressBase64Image(data.diagramImage); await serverFunctions.insertBase64ImageWithMetadata( - data.diagramImage, + compressedImage, metadata.toString() ); + console.log('Diagram inserted successfully from dialog'); + + setToastMessage('Diagram inserted successfully!'); + setToastSeverity('success'); getImages(); } catch (error) { console.error('Error inserting image with metadata', error); + setToastMessage('Error inserting diagram'); + setToastSeverity('error'); showAlertDialog('Error inserting image, please try again'); + } finally { + setIsProcessingInsertion(false); } return; } @@ -375,7 +391,7 @@ const Sidebar = () => { } return ( - <> +
{(overlayEnabled || isProcessingInsertion) && ( { )} )} - - - - -
+
{!authState?.authorized ? ( { sx={{ maxWidth: '344px', fontFamily: 'Recursive', - fontSize: '20px', + fontSize: '24px', marginTop: '12px', - fontWeight: 420, + fontWeight: 600, color: '#1E1A2E', marginBottom: '14px', - lineHeight: '28px', + lineHeight: '36px', letterSpacing: 'normal', }} > - Welcome to
- the Mermaid + Welcome to the
+ official Mermaid Plugin { marginBottom: '28px', }} > - Create and edit diagrams in Mermaid Chart and easily synchronize + Create and edit diagrams in Mermaid and easily synchronize documents with Google Docs. @@ -497,125 +505,152 @@ const Sidebar = () => { }, }} > - Login - - - - Don’t have an account? - - - - window.open( - 'https://mermaidchart.com/app/sign-up', - '_blank' - ) - } - sx={{ - textTransform: 'none', - color: '#0071e3', - padding: 0, - minWidth: 'auto', - fontSize: '14px', - marginTop: '4px', - fontFamily: - 'Recursive, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', - '&:hover': { - textDecoration: 'underline', - background: 'none', - }, - }} - > - Sign up + Sign in ) : ( <> - - Create a new diagram - - - Insert a diagram from Mermaid Chart - - - Update all diagrams in document to most recent version - - - - handleTabSwitch(newValue)} + + + handleTabSwitch(0)} + sx={{ + flex: '0 0 auto', + padding: '8px 32px', + cursor: 'pointer', + fontSize: '13px', + fontWeight: tab === 0 ? 600 : 400, + backgroundColor: tab === 0 ? '#FFFFFF' : 'transparent', + color: tab === 0 ? '#1E1A2E' : '#666', + borderRadius: '6px', + transition: 'all 0.2s ease', + fontFamily: 'Recursive', + lineHeight: '20px', + textAlign: 'center', + whiteSpace: 'nowrap', + overflow: 'hidden', + boxShadow: tab === 0 ? '0 2px 4px rgba(0,0,0,0.1)' : 'none', + '&:hover': { + backgroundColor: tab === 0 ? '#FFFFFF' : 'rgba(255,255,255,0.5)', + color: '#1E1A2E' + } + }} + > + Recent + + handleTabSwitch(1)} + sx={{ + flex: '1 1 auto', + padding: '8px 8px', + cursor: 'pointer', + fontSize: '13px', + fontWeight: tab === 1 ? 600 : 400, + backgroundColor: tab === 1 ? '#FFFFFF' : 'transparent', + color: tab === 1 ? '#1E1A2E' : '#666', + borderRadius: '6px', + transition: 'all 0.2s ease', + fontFamily: 'Recursive', + lineHeight: '20px', + textAlign: 'center', + whiteSpace: 'nowrap', + overflow: 'hidden', + boxShadow: tab === 1 ? '0 2px 4px rgba(0,0,0,0.1)' : 'none', + '&:hover': { + backgroundColor: tab === 1 ? '#FFFFFF' : 'rgba(255,255,255,0.5)', + color: '#1E1A2E' + } + }} > - - - + In this Document + +