Add mobile support for mindmap list.

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

@@ -76,12 +76,12 @@ export class DefaultWidgetManager extends WidgetManager {
     topic.closeEditors();
   }
 
-  static useCreate(): [boolean, Element | undefined, DefaultWidgetManager] {
+  static useCreate(): [boolean, (boolean) => void, Element | undefined, DefaultWidgetManager] {
     const [popoverOpen, setPopoverOpen] = useState(false);
     const [popoverTarget, setPopoverTarget] = useState(undefined);
     const widgetManager = useRef(new DefaultWidgetManager(setPopoverOpen, setPopoverTarget));
 
-    return [popoverOpen, popoverTarget, widgetManager.current];
+    return [popoverOpen, setPopoverOpen, popoverTarget, widgetManager.current];
   }
 }
 

packages/editor/src/components/action-widget/pane/save-and-delete/index.tsx

@@ -34,10 +34,6 @@ const SaveAndDelete = (props: {
         <FormattedMessage id="action.accept" defaultMessage="Accept" />
       </Button>
 
-      <Button color="primary" variant="outlined" onClick={props.closeModal}>
-        <FormattedMessage id="action.cancel" defaultMessage="Cancel" />
-      </Button>
-
       {props.model.getValue() && props.model.getValue().trim() !== '' && (
         <IconButton
           onClick={() => {

packages/editor/src/components/action-widget/pane/topic-link/index.tsx

@@ -59,7 +59,7 @@ const TopicLink = (props: {
   const isValidUrl = !url || checkURL(url);
 
   return (
-    <Box display="flex" sx={{ p: 1 }}>
+    <Box sx={{ p: 1 }}>
       <Input
         autoFocus
         error={!isValidUrl}
@@ -87,8 +87,9 @@ const TopicLink = (props: {
             </Link>
           ),
         }}
-        sx={{ pr: 1 }}
+        margin="dense"
       ></Input>
+      <br />
       <SaveAndDelete
         model={props.urlModel}
         closeModal={props.closeModal}

packages/editor/src/components/index.tsx

@@ -29,9 +29,7 @@ import {
 } from '@wisemapping/mindplot';
 
 import I18nMsg from '../classes/i18n-msg';
-import { theme as defaultEditorTheme } from '../theme';
 // eslint-disable-next-line no-restricted-imports
-import ThemeProvider from '@mui/material/styles/ThemeProvider';
 import { Theme } from '@mui/material/styles';
 import { Notifier } from './warning-dialog/styled';
 import WarningDialog from './warning-dialog';
@@ -42,6 +40,9 @@ import { ToolbarActionType } from './toolbar/ToolbarActionType';
 import MapInfo from '../classes/model/map-info';
 import EditorToolbar from './editor-toolbar';
 import ZoomPanel from './zoom-panel';
+import IconButton from '@mui/material/IconButton';
+import Box from '@mui/material/Box';
+import CloseIcon from '@mui/icons-material/Close';
 import { SpinnerCentered } from './style';
 
 export type EditorOptions = {
@@ -66,7 +67,6 @@ const Editor = ({
   options,
   persistenceManager,
   onAction,
-  theme,
   accountConfiguration,
 }: EditorProps): ReactElement => {
   const [model, setModel] = useState<Model | undefined>();
@@ -75,8 +75,8 @@ const Editor = ({
   // This is required to redraw in case of chansges in the canvas...
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [canvasUpdate, setCanvasUpdate] = useState<number>();
-  const editorTheme: Theme = theme ? theme : defaultEditorTheme;
-  const [popoverOpen, popoverTarget, widgetManager] = DefaultWidgetManager.useCreate();
+  const [popoverOpen, setPopoverOpen, popoverTarget, widgetManager] =
+    DefaultWidgetManager.useCreate();
   const capability = new Capability(options.mode, mapInfo.isLocked());
 
   useEffect(() => {
@@ -108,59 +108,62 @@ const Editor = ({
   const locale = options.locale;
   const msg = I18nMsg.loadLocaleData(locale);
   return (
-    <ThemeProvider theme={editorTheme}>
-      <IntlProvider locale={locale} messages={msg}>
-        <AppBar
-          model={model}
-          mapInfo={mapInfo}
-          capability={capability}
-          onAction={onAction}
-          accountConfig={accountConfiguration}
-        />
+    <IntlProvider locale={locale} messages={msg}>
+      <AppBar
+        model={model}
+        mapInfo={mapInfo}
+        capability={capability}
+        onAction={onAction}
+        accountConfig={accountConfiguration}
+      />
 
-        <Popover
-          id="popover"
-          open={popoverOpen}
-          anchorEl={popoverTarget}
-          onClose={widgetManager.handleClose}
-          anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'left',
-          }}
-        >
-          {widgetManager.getEditorContent()}
-        </Popover>
+      <Popover
+        id="popover"
+        open={popoverOpen}
+        anchorEl={popoverTarget}
+        onClose={widgetManager.handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+      >
+        <Box alignItems={'end'}>
+          <IconButton onClick={() => setPopoverOpen(false)} aria-label={'Close'}>
+            <CloseIcon />
+          </IconButton>
+        </Box>
+        {widgetManager.getEditorContent()}
+      </Popover>
 
-        <EditorToolbar model={model} capability={capability} />
-        <ZoomPanel model={model} capability={capability} />
+      <EditorToolbar model={model} capability={capability} />
+      <ZoomPanel model={model} capability={capability} />
 
-        <mindplot-component
-          ref={mindplotRef}
-          id="mindmap-comp"
-          mode={options.mode}
-          locale={options.locale}
-          zoom={options.zoom}
-        />
+      <mindplot-component
+        ref={mindplotRef}
+        id="mindmap-comp"
+        mode={options.mode}
+        locale={options.locale}
+        zoom={options.zoom}
+      />
 
-        <Notifier id="headerNotifier" />
-        <WarningDialog
-          capability={capability}
-          message={mapInfo.isLocked() ? mapInfo.getLockedMessage() : ''}
-        />
+      <Notifier id="headerNotifier" />
+      <WarningDialog
+        capability={capability}
+        message={mapInfo.isLocked() ? mapInfo.getLockedMessage() : ''}
+      />
 
-        {!model?.isMapLoadded() && (
-          <SpinnerCentered>
-            <Vortex
-              visible={true}
-              height="160"
-              width="160"
-              ariaLabel="vortex-loading"
-              colors={['#ffde1a', '#ffce00', '#ffa700', '#ff8d00', '#ff7400', '#ffde1a']}
-            />
-          </SpinnerCentered>
-        )}
-      </IntlProvider>
-    </ThemeProvider>
+      {!model?.isMapLoadded() && (
+        <SpinnerCentered>
+          <Vortex
+            visible={true}
+            height="160"
+            width="160"
+            ariaLabel="vortex-loading"
+            colors={['#ffde1a', '#ffce00', '#ffa700', '#ff8d00', '#ff7400', '#ffde1a']}
+          />
+        </SpinnerCentered>
+      )}
+    </IntlProvider>
   );
 };
 export default Editor;

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

@@ -25,6 +25,7 @@ import '../app-bar/styles.css';
 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';
 
 /**
  * Common button
@@ -106,7 +107,11 @@ export const ToolbarSubmenu = (props: {
       }}
     >
       <ToolbarButtonOption
-        configuration={{ ...props.configuration, onClick: () => setOpen(true) }}
+        configuration={{
+          ...props.configuration,
+          onClick: () => setOpen(true),
+          selected: () => open,
+        }}
       />
       <Popover
         role="submenu"
@@ -125,6 +130,13 @@ export const ToolbarSubmenu = (props: {
         }}
         elevation={props.elevation}
       >
+        {props.configuration.useClickToClose && (
+          <Box alignItems={'end'}>
+            <IconButton onClick={() => setOpen(false)} aria-label={'Close'}>
+              <CloseIcon />
+            </IconButton>
+          </Box>
+        )}
         <div style={{ display: 'flex' }} onScroll={(e) => e.stopPropagation()}>
           {props.configuration.options?.map((o, i) => {
             if (o?.visible === false) {