Minor improvements on editor toolbar

packages/editor/lang/de.json

@@ -80,6 +80,12 @@
     "note.label": {
         "defaultMessage": "Notiz"
     },
+    "icon.label": {
+        "defaultMessage": "Symbol"
+    },
+    "link.label": {
+        "defaultMessage": "Link"
+    },
     "zoom-panel.tooltip-keyboard": {
         "defaultMessage": "Tastatürkürzel"
     },

packages/editor/lang/en.json

@@ -161,6 +161,12 @@
   "note.label": {
     "defaultMessage": "Note"
   },
+  "icon.label": {
+      "defaultMessage": "Icon"
+  },
+  "link.label": {
+      "defaultMessage": "Link"
+  },
   "shortcut-help-pane.action": {
     "defaultMessage": "Action"
   },

packages/editor/lang/es.json

@@ -74,6 +74,12 @@
     "note.label": {
         "defaultMessage": "Nota"
     },
+    "icon.label": {
+        "defaultMessage": "Icono"
+    },
+    "link.label": {
+        "defaultMessage": "Enlace"
+    },
     "editor-panel.tooltip-add-icon": {
         "defaultMessage": "Agregar Icono"
     },

packages/editor/lang/fr.json

@@ -72,73 +72,79 @@
         "defaultMessage": "https://www.example.com"
     },
     "note.label": {
-        "defaultMessage": "Noter"
+        "defaultMessage": "Note"
+    },
+    "icon.label": {
+        "defaultMessage": "Icône"
+    },
+    "link.label": {
+        "defaultMessage": "Lien"
     },
     "editor-panel.tooltip-add-icon": {
-        "defaultMessage": "Agregar Icono"
+        "defaultMessage": "Ajouter une icône"
     },
     "editor-panel.tooltip-add-link": {
-        "defaultMessage": "Agregar Enlace"
+        "defaultMessage": "Ajouter un lien"
     },
     "editor-panel.tooltip-add-note": {
-        "defaultMessage": "Agregar Nota"
+        "defaultMessage": "Ajouter une note"
     },
     "editor-panel.tooltip-add-relationship": {
-        "defaultMessage": "Agregar Relación"
+        "defaultMessage": "Ajouter une relation"
     },
     "editor-panel.tooltip-add-topic": {
-        "defaultMessage": "Agregar Topico"
+        "defaultMessage": "Ajouter un sujet"
     },
-    "editor-panel.tooltip-delete-topic": {
+    "editor-panel.tooltip-delete-sujet": {
-        "defaultMessage": "Borrar Topico"
+        "defaultMessage": "Supprimer le sujet"
     },
     "editor-panel.tooltip-topic-border-color": {
-        "defaultMessage": "Color del borde"
+        "defaultMessage": "Couleur de bordure"
     },
     "editor-panel.tooltip-topic-font-bigger": {
-        "defaultMessage": "Grande"
+        "defaultMessage": "Grand"
     },
     "editor-panel.tooltip-topic-font-bold": {
-        "defaultMessage": "Negrita"
+        "defaultMessage": "Gras"
     },
     "editor-panel.tooltip-topic-font-color": {
-        "defaultMessage": "Color"
+        "defaultMessage": "Couleur"
     },
     "editor-panel.tooltip-topic-font-italic": {
-        "defaultMessage": "Italica"
+        "defaultMessage": "Italique"
     },
     "editor-panel.tooltip-topic-font-smaller": {
-        "defaultMessage": "Pequeña"
+        "defaultMessage": "Petit"
     },
     "editor-panel.tooltip-topic-font-style": {
-        "defaultMessage": "Estilo de Fuente"
+        "defaultMessage": "Style de police"
     },
     "editor-panel.tooltip-topic-share-ellipse": {
-        "defaultMessage": "Figura elipse"
+        "defaultMessage": "Forme d'ellipse"
     },
     "editor-panel.tooltip-topic-share-line": {
-        "defaultMessage": "Figura linea"
+        "defaultMessage": "Chiffre de ligne"
     },
     "editor-panel.tooltip-topic-share-rectangle": {
-        "defaultMessage": "Figura rectangulo"
+        "defaultMessage": "Forme rectangulaire"
     },
-    "editor-panel.tooltip-topic-share-rounded": {
+    "editor-panel.tooltip-topic-share-arrondi": {
-        "defaultMessage": "Figura redonda"
+        "defaultMessage": "Forme ronde"
     },
     "editor-panel.tooltip-topic-style": {
-        "defaultMessage": "Estilo de Topico"
+        "defaultMessage": "Style de sujet"
     },
-    "zoom-panel.tooltip-keyboard": {
+    "zoom-panel.tooltip-clavier": {
-        "defaultMessage": "Keyboard Shortcuts"
+        "defaultMessage": "Raccourcis clavier"
     },
     "zoom-panel.tooltip-zoom-in": {
-        "defaultMessage": "Acercar"
+        "defaultMessage": "Zoom avant"
     },
     "zoom-panel.tooltip-zoom-out": {
-        "defaultMessage": "Alejarse"
+        "defaultMessage": "S'éloigner"
     },
     "zoom-panel.tooltip-zoom-to-fit": {
-        "defaultMessage": "Centrar"
+        "defaultMessage": "Centre"
     },
     "shortcut-help-pane.action": {
         "defaultMessage": "Action"

packages/editor/src/classes/action/action-config/index.ts

@@ -59,6 +59,10 @@ interface ActionConfig {
    * if false the menu entry or button is not visible. Also custom render will be ignored.
    */
   visible?: boolean;
+  /**
+   * title for popover. Only used if useClickToClose is true
+   */
+  title?: string;
 }
 
 export default ActionConfig;

packages/editor/src/classes/default-widget-manager/index.ts

@@ -23,6 +23,7 @@ import { linkContent, noteContent } from './react-component';
 export class DefaultWidgetManager extends WidgetManager {
   private editorOpen: boolean;
   private editorContent: React.ReactElement;
+  private editorTitle: string;
   private setPopoverOpen: (value: boolean) => void;
   private setPopoverTarget: (target: Element) => void;
 
@@ -43,6 +44,7 @@ export class DefaultWidgetManager extends WidgetManager {
     this.editorContent = linkContent(model, () => this.setPopoverOpen(false));
     this.setPopoverTarget(topic.getOuterShape().peer._native);
     this.setPopoverOpen(true);
+    this.editorTitle = 'link.label';
     topic.closeEditors();
   }
 
@@ -73,6 +75,7 @@ export class DefaultWidgetManager extends WidgetManager {
     this.editorContent = noteContent(model, () => this.setPopoverOpen(false));
     this.setPopoverTarget(topic.getOuterShape().peer._native);
     this.setPopoverOpen(true);
+    this.editorTitle = 'note.label';
     topic.closeEditors();
   }
 
@@ -83,6 +86,10 @@ export class DefaultWidgetManager extends WidgetManager {
 
     return [popoverOpen, setPopoverOpen, popoverTarget, widgetManager.current];
   }
+
+  getEditorTile(): string {
+    return this.editorTitle;
+  }
 }
 
 export default DefaultWidgetManager;

packages/editor/src/compiled-lang/de.json

@@ -311,12 +311,24 @@
       "value": "Bilder anzeigen"
     }
   ],
+  "icon.label": [
+    {
+      "type": 0,
+      "value": "Symbol"
+    }
+  ],
   "link.help_text": [
     {
       "type": 0,
       "value": "Ingültige Adresse"
     }
   ],
+  "link.label": [
+    {
+      "type": 0,
+      "value": "Link"
+    }
+  ],
   "link.placeholder": [
     {
       "type": 0,

packages/editor/src/compiled-lang/en.json

@@ -305,12 +305,24 @@
       "value": "Show images"
     }
   ],
+  "icon.label": [
+    {
+      "type": 0,
+      "value": "Icon"
+    }
+  ],
   "link.help_text": [
     {
       "type": 0,
       "value": "Address is not valid"
     }
   ],
+  "link.label": [
+    {
+      "type": 0,
+      "value": "Link"
+    }
+  ],
   "link.placeholder": [
     {
       "type": 0,

packages/editor/src/compiled-lang/es.json

@@ -305,12 +305,24 @@
       "value": "Mostrar imagenes"
     }
   ],
+  "icon.label": [
+    {
+      "type": 0,
+      "value": "Icono"
+    }
+  ],
   "link.help_text": [
     {
       "type": 0,
       "value": "Dirección invalida"
     }
   ],
+  "link.label": [
+    {
+      "type": 0,
+      "value": "Enlace"
+    }
+  ],
   "link.placeholder": [
     {
       "type": 0,

packages/editor/src/compiled-lang/fr.json

@@ -98,31 +98,31 @@
   "editor-panel.tooltip-add-icon": [
     {
       "type": 0,
-      "value": "Agregar Icono"
+      "value": "Ajouter une icône"
     }
   ],
   "editor-panel.tooltip-add-link": [
     {
       "type": 0,
-      "value": "Agregar Enlace"
+      "value": "Ajouter un lien"
     }
   ],
   "editor-panel.tooltip-add-note": [
     {
       "type": 0,
-      "value": "Agregar Nota"
+      "value": "Ajouter une note"
     }
   ],
   "editor-panel.tooltip-add-relationship": [
     {
       "type": 0,
-      "value": "Agregar Relación"
+      "value": "Ajouter une relation"
     }
   ],
   "editor-panel.tooltip-add-topic": [
     {
       "type": 0,
-      "value": "Agregar Topico"
+      "value": "Ajouter un sujet"
     }
   ],
   "editor-panel.tooltip-connection-color": [
@@ -167,16 +167,16 @@
       "value": "Courbe polyligne"
     }
   ],
-  "editor-panel.tooltip-delete-topic": [
+  "editor-panel.tooltip-delete-sujet": [
     {
       "type": 0,
-      "value": "Borrar Topico"
+      "value": "Supprimer le sujet"
     }
   ],
   "editor-panel.tooltip-topic-border-color": [
     {
       "type": 0,
-      "value": "Color del borde"
+      "value": "Couleur de bordure"
     }
   ],
   "editor-panel.tooltip-topic-border-color-default": [
@@ -200,67 +200,67 @@
   "editor-panel.tooltip-topic-font-bigger": [
     {
       "type": 0,
-      "value": "Grande"
+      "value": "Grand"
     }
   ],
   "editor-panel.tooltip-topic-font-bold": [
     {
       "type": 0,
-      "value": "Negrita"
+      "value": "Gras"
     }
   ],
   "editor-panel.tooltip-topic-font-color": [
     {
       "type": 0,
-      "value": "Color"
+      "value": "Couleur"
     }
   ],
   "editor-panel.tooltip-topic-font-italic": [
     {
       "type": 0,
-      "value": "Italica"
+      "value": "Italique"
     }
   ],
   "editor-panel.tooltip-topic-font-smaller": [
     {
       "type": 0,
-      "value": "Pequeña"
+      "value": "Petit"
     }
   ],
   "editor-panel.tooltip-topic-font-style": [
     {
       "type": 0,
-      "value": "Estilo de Fuente"
+      "value": "Style de police"
+    }
+  ],
+  "editor-panel.tooltip-topic-share-arrondi": [
+    {
+      "type": 0,
+      "value": "Forme ronde"
     }
   ],
   "editor-panel.tooltip-topic-share-ellipse": [
     {
       "type": 0,
-      "value": "Figura elipse"
+      "value": "Forme d'ellipse"
     }
   ],
   "editor-panel.tooltip-topic-share-line": [
     {
       "type": 0,
-      "value": "Figura linea"
+      "value": "Chiffre de ligne"
     }
   ],
   "editor-panel.tooltip-topic-share-rectangle": [
     {
       "type": 0,
-      "value": "Figura rectangulo"
+      "value": "Forme rectangulaire"
-    }
-  ],
-  "editor-panel.tooltip-topic-share-rounded": [
-    {
-      "type": 0,
-      "value": "Figura redonda"
     }
   ],
   "editor-panel.tooltip-topic-style": [
     {
       "type": 0,
-      "value": "Estilo de Topico"
+      "value": "Style de sujet"
     }
   ],
   "editor.edit-description-mobile": [
@@ -305,12 +305,24 @@
       "value": "Afficher les images"
     }
   ],
+  "icon.label": [
+    {
+      "type": 0,
+      "value": "Icône"
+    }
+  ],
   "link.help_text": [
     {
       "type": 0,
       "value": "Adresse invalide"
     }
   ],
+  "link.label": [
+    {
+      "type": 0,
+      "value": "Lien"
+    }
+  ],
   "link.placeholder": [
     {
       "type": 0,
@@ -320,7 +332,7 @@
   "note.label": [
     {
       "type": 0,
-      "value": "Noter"
+      "value": "Note"
     }
   ],
   "shortcut-help-pane.action": [
@@ -473,28 +485,28 @@
       "value": "Annuler l'édition"
     }
   ],
-  "zoom-panel.tooltip-keyboard": [
+  "zoom-panel.tooltip-clavier": [
     {
       "type": 0,
-      "value": "Keyboard Shortcuts"
+      "value": "Raccourcis clavier"
     }
   ],
   "zoom-panel.tooltip-zoom-in": [
     {
       "type": 0,
-      "value": "Acercar"
+      "value": "Zoom avant"
     }
   ],
   "zoom-panel.tooltip-zoom-out": [
     {
       "type": 0,
-      "value": "Alejarse"
+      "value": "S'éloigner"
     }
   ],
   "zoom-panel.tooltip-zoom-to-fit": [
     {
       "type": 0,
-      "value": "Centrar"
+      "value": "Centre"
     }
   ]
 }

packages/editor/src/components/editor-toolbar/configBuilder.tsx

@@ -351,6 +351,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
       'L',
     ),
     useClickToClose: true,
+    title: intl.formatMessage({ id: 'link.label', defaultMessage: 'Link' }),
     options: [
       {
         render: (closeModal) => (
@@ -371,6 +372,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
       'K',
     ),
     useClickToClose: true,
+    title: intl.formatMessage({ id: 'note.label', defaultMessage: 'Note' }),
     options: [
       {
         tooltip: 'Node note',
@@ -392,6 +394,7 @@ export function buildEditorPanelConfig(model: Editor, intl: IntlShape): ActionCo
       defaultMessage: 'Add Icon',
     }),
     useClickToClose: true,
+    title: intl.formatMessage({ id: 'icon.label', defaultMessage: 'Icon' }),
     options: [
       {
         tooltip: intl.formatMessage({

packages/editor/src/components/index.tsx

@@ -20,7 +20,7 @@ import Popover from '@mui/material/Popover';
 import Model from '../classes/model/editor';
 import { Vortex } from 'react-loader-spinner';
 
-import { IntlProvider } from 'react-intl';
+import { FormattedMessage, IntlProvider } from 'react-intl';
 import {
   PersistenceManager,
   Designer,
@@ -44,6 +44,7 @@ import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import CloseIcon from '@mui/icons-material/Close';
 import { SpinnerCentered } from './style';
+import Typography from '@mui/material/Typography';
 
 export type EditorOptions = {
   mode: EditorRenderMode;
@@ -127,7 +128,14 @@ const Editor = ({
           horizontal: 'left',
         }}
       >
-        <Box alignItems={'end'}>
+        <Box textAlign={'right'} ml={1}>
+          <Typography variant="body1" style={{ paddingTop: '10px', float: 'left' }}>
+            <FormattedMessage
+              id={widgetManager.getEditorTile()}
+              defaultMessage=""
+            ></FormattedMessage>
+          </Typography>
+
           <IconButton onClick={() => setPopoverOpen(false)} aria-label={'Close'}>
             <CloseIcon />
           </IconButton>

packages/editor/src/components/toolbar/index.tsx

@@ -26,6 +26,7 @@ import Box from '@mui/material/Box';
 import ToolbarPosition from '../../classes/model/toolbar-position';
 import ActionConfig from '../../classes/action/action-config';
 import CloseIcon from '@mui/icons-material/Close';
+import Typography from '@mui/material/Typography';
 
 /**
  * Common button
@@ -131,7 +132,10 @@ export const ToolbarSubmenu = (props: {
         elevation={props.elevation}
       >
         {props.configuration.useClickToClose && (
-          <Box alignItems={'end'}>
+          <Box textAlign={'right'} ml={1}>
+            <Typography variant="body1" style={{ paddingTop: '10px', float: 'left' }}>
+              {props.configuration.title}
+            </Typography>
             <IconButton onClick={() => setOpen(false)} aria-label={'Close'}>
               <CloseIcon />
             </IconButton>

packages/editor/test/unit/toolbar/toolbar.test.tsx

@@ -84,6 +84,7 @@ const submenuOnClickConfig: ActionConfig = {
   icon: <ThreeDRotation></ThreeDRotation>,
   useClickToClose: true,
   options: [config, null, config, null],
+  title: 'Submenu title',
 };
 
 afterEach(() => {
@@ -235,6 +236,15 @@ describe('Editor Toolbar Submenu', () => {
     fireEvent.click(closeButton);
     expect(screen.queryByRole('submenu')).toBeFalsy();
   });
+
+  it('Given a useClickToOpen configuration when click, shows a submenu with title', async () => {
+    render(<ToolbarSubmenu configuration={submenuOnClickConfig}></ToolbarSubmenu>);
+    const item = screen.getByRole('button');
+
+    fireEvent.click(item);
+
+    await screen.findByText('Submenu title');
+  });
 });
 
 describe('toolbar menu item', () => {

packages/webapp/src/components/HOCs/withEmotionStyles.tsx

@@ -1,3 +1,20 @@
+/*
+ *    Copyright [2021] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import React, { ComponentType } from 'react';
 

packages/webapp/src/components/maps-page/index.tsx

@@ -69,16 +69,20 @@ const MapsPage = (): ReactElement => {
   const queryClient = useQueryClient();
   const [activeDialog, setActiveDialog] = React.useState<ActionType | undefined>(undefined);
   const [labelToDelete, setLabelToDelete] = React.useState<number | null>(null);
-  const [mobileOpen, setMobileOpen] = React.useState(false);
+  const [mobileDrawerOpen, setMobileDrawerOpen] = React.useState(false);
-  const [desktopOpen, setDesktopOpen] = React.useState(false);
+  const [desktopDrawerOpen, setDesktopDrawerOpen] = React.useState(
-  const classes = useStyles(desktopOpen);
+    localStorage.getItem('desktopDrawerOpen') === 'true',
+  );
+  const classes = useStyles(desktopDrawerOpen);
 
   const handleMobileDrawerToggle = () => {
-    setMobileOpen(!mobileOpen);
+    setMobileDrawerOpen(!mobileDrawerOpen);
   };
 
   const handleDesktopDrawerToggle = () => {
-    setDesktopOpen(!desktopOpen);
+    if (!desktopDrawerOpen) localStorage.setItem('desktopDrawerOpen', 'true');
+    else localStorage.removeItem('desktopDrawerOpen');
+    setDesktopDrawerOpen(!desktopDrawerOpen);
   };
   // Reload based on user preference ...
   const userLocale = AppI18n.getUserLocale();
@@ -115,7 +119,7 @@ const MapsPage = (): ReactElement => {
   const handleMenuClick = (filter: Filter) => {
     queryClient.invalidateQueries('maps');
     setFilter(filter);
-    mobileOpen && setMobileOpen(false);
+    mobileDrawerOpen && setMobileDrawerOpen(false);
   };
 
   const handleLabelDelete = (id: number) => {
@@ -227,8 +231,8 @@ const MapsPage = (): ReactElement => {
               sx={{ p: 0, mr: 2, display: { xs: 'none', sm: 'inherit' } }}
               id="open-desktop-drawer"
             >
-              {!desktopOpen && <ArrowRight />}
+              {!desktopDrawerOpen && <ArrowRight />}
-              {desktopOpen && <ArrowLeft />}
+              {desktopDrawerOpen && <ArrowLeft />}
             </IconButton>
             <Tooltip
               arrow={true}
@@ -293,7 +297,7 @@ const MapsPage = (): ReactElement => {
         <Drawer
           container={container}
           variant={'temporary'}
-          open={mobileOpen}
+          open={mobileDrawerOpen}
           onClose={handleMobileDrawerToggle}
           ModalProps={{
             keepMounted: true,

packages/webapp/src/components/maps-page/maps-list/index.tsx

@@ -520,7 +520,9 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
           <Box css={classes.cards}>
             {isLoading ? (
               <Card>
-                <CardContent>Loading ...</CardContent>
+                <CardContent>
+                  <FormattedMessage id="dialog.loading" defaultMessage="Loading ..." />
+                </CardContent>
               </Card>
             ) : mapsInfo.length == 0 ? (
               <Card>
@@ -578,7 +580,7 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
                             </Tooltip>
                           }
                           title={
-                            <Typography sx={{ fontSize: 'large' }} noWrap color="text.secondary">
+                            <Typography css={classes.cardTitle} noWrap color="text.secondary">
                               {row.title}
                             </Typography>
                           }
@@ -628,7 +630,9 @@ export const MapsList = (props: MapsListProps): React.ReactElement => {
             <TableBody>
               {isLoading ? (
                 <TableRow>
-                  <TableCell colSpan={6}>Loading ...</TableCell>
+                  <TableCell colSpan={6}>
+                    <FormattedMessage id="dialog.loading" defaultMessage="Loading ..." />
+                  </TableCell>
                 </TableRow>
               ) : mapsInfo.length == 0 ? (
                 <TableRow>

packages/webapp/src/components/maps-page/maps-list/styled.ts

@@ -128,5 +128,8 @@ export const useStyles = () => {
     cardHeader: {
       padding: '4px',
     },
+    cardTitle: {
+      maxWidth: '70vw',
+    },
   });
 };