diff --git a/.gitignore b/.gitignore index 21a52a85..a30550ef 100644 --- a/.gitignore +++ b/.gitignore @@ -51,4 +51,7 @@ Thumbs.db **/build/**/* .vscode -*/test/playground/dist \ No newline at end of file +*/test/playground/dist + +# visual code local workspaces +wisemapping-frontend.code-workspace diff --git a/.prettierrc.json b/.prettierrc.json index 0c45137e..2c9ca384 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,6 +1,6 @@ { - "trailingComma": "es5", - "tabWidth": 4, + "trailingComma": "all", + "tabWidth": 2, "semi": true, "singleQuote": true, "printWidth": 100 diff --git a/docker-compose.snapshots.update.yml b/docker-compose.snapshots.update.yml index 3571ffd9..93880046 100644 --- a/docker-compose.snapshots.update.yml +++ b/docker-compose.snapshots.update.yml @@ -1,7 +1,7 @@ version: '3' services: e2e: - image: cypress/included:9.7.0 + image: cypress/included:10.2.0 container_name: wisemapping-integration-tests entrypoint: '/bin/sh -c "yarn install && yarn bootstrap && yarn build && yarn test:integration"' working_dir: /e2e diff --git a/docker-compose.snapshots.yml b/docker-compose.snapshots.yml index 35a8429d..8f7a613f 100644 --- a/docker-compose.snapshots.yml +++ b/docker-compose.snapshots.yml @@ -1,7 +1,7 @@ version: '3' services: e2e: - image: cypress/included:9.7.0 + image: cypress/included:10.2.0 container_name: wisemapping-integration-tests entrypoint: '/bin/sh -c "yarn bootstrap && yarn build && yarn test:integration"' working_dir: /e2e diff --git a/lerna.json b/lerna.json index dabb023c..d9f270f3 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,6 @@ ], "version": "1.0.0", "npmClient": "yarn", - "useWorkspaces": true + "useWorkspaces": true, + "useNx": false } diff --git a/package.json b/package.json index 0a6cd91b..0c75a662 100644 --- a/package.json +++ b/package.json @@ -45,5 +45,20 @@ "homepage": "http://localhost:8080/react", "license": "https://wisemapping.atlassian.net/wiki/spaces/WS/pages/524357/WiseMapping+Public+License+Version+1.0+WPL", "version": "0.4.0", - "dependencies": {} + "husky": { + "hooks": { + "pre-commit": "lint-staged", + "pre-push": "yarn lint && yarn test:unit" + } + }, + "lint-staged": { + "**/*.{ts,tsx}": [ + "prettier --write" + ] + }, + "eslintConfig": { + "rules": { + "implicit-arrow-linebreak": "off" + } + } } diff --git a/packages/editor/images/close-dialog-icon.svg b/packages/editor/images/close-dialog-icon.svg new file mode 100644 index 00000000..3b57389c --- /dev/null +++ b/packages/editor/images/close-dialog-icon.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/editor/lang/de.json b/packages/editor/lang/de.json index bf777ed4..928a15bf 100644 --- a/packages/editor/lang/de.json +++ b/packages/editor/lang/de.json @@ -4,6 +4,18 @@ }, "editor.try-welcome-description": { "defaultMessage": "Melden Sie sich an, um kostenlos eine unbegrenzte Anzahl von Mindmaps zu erstellen, zu teilen und zu veröffentlichen." + }, + "editor.try-welcome-mobile": { + "defaultMessage": "Diese Edition zeigt einige der Mindmap-Funktionen!" + }, + "editor.try-welcome-description-mobile": { + "defaultMessage": "Melden Sie sich an, um kostenlos eine unbegrenzte Anzahl von Mindmaps zu erstellen, zu teilen und zu veröffentlichen. Eingeschränkte Funktionen der Mindmap-Edition werden auf Mobilgeräten unterstützt. Verwenden Sie den Desktop-Browser für vollständige Editorfunktionen." + }, + "editor.edit-mobile": { + "defaultMessage": "Hinweis für Mobilgeräte." + }, + "editor.edit-description-mobile": { + "defaultMessage": "Eingeschränkte Funktionen der Mindmap-Edition werden auf Mobilgeräten unterstützt. Verwenden Sie den Desktop-Browser für vollständige Editorfunktionen." }, "login.signup": { "defaultMessage": "Anmeldung" diff --git a/packages/editor/lang/en.json b/packages/editor/lang/en.json index c1eaa0bd..233007e1 100644 --- a/packages/editor/lang/en.json +++ b/packages/editor/lang/en.json @@ -1,9 +1,21 @@ { "editor.try-welcome": { - "defaultMessage": "This edition space showcases some of the mindmap editor capabilities !" + "defaultMessage": "This edition space showcases some of the mindmap editor capabilities!" }, "editor.try-welcome-description": { - "defaultMessage": "Sign Up to start creating, sharing and publishing unlimited number of mindmaps for free." + "defaultMessage": "Sign Up to start creating, sharing and publishing unlimited number of mindmaps for free." + }, + "editor.try-welcome-mobile": { + "defaultMessage": "This edition space showcases some of the mindmap capabilities!" + }, + "editor.try-welcome-description-mobile": { + "defaultMessage": "Sign Up to start creating, sharing and publishing unlimited number of mindmaps for free. Limited mindmap edition capabilties are supported in Mobile devices. Use Desktop browser for full editor capabilies." + }, + "editor.edit-mobile": { + "defaultMessage": "Note for mobile devices." + }, + "editor.edit-description-mobile": { + "defaultMessage": "Limited mindmap edition capabilities are supported in Mobile devices. Use Desktop browser for full editor capabilities." }, "login.signup": { "defaultMessage": "Sign Up" diff --git a/packages/editor/lang/es.json b/packages/editor/lang/es.json index df4a128a..0707cc4e 100644 --- a/packages/editor/lang/es.json +++ b/packages/editor/lang/es.json @@ -4,6 +4,18 @@ }, "editor.try-welcome-description": { "defaultMessage": "Registrate para comenzar a crear, compartir y publicar una cantidad ilimitada de mapas mentales de forma gratuita." + }, + "editor.try-welcome-mobile": { + "defaultMessage": "¡Este espacio de edición muestra algunas de las capacidades de mapas mentales!" + }, + "editor.try-welcome-description-mobile": { + "defaultMessage": "Registrate para comenzar a crear, compartir y publicar una cantidad ilimitada de mapas mentales de forma gratuita. En dispositivos móbiles las funciones son limitadas. Use la versión de escritorio para tener las funciones completas." + }, + "editor.edit-mobile": { + "defaultMessage": "Nota para dispositivos móbiles." + }, + "editor.edit-description-mobile": { + "defaultMessage": "En dispositivos móbiles las funciones son limitadas. Use la versión de escritorio para tener las funciones completas." }, "login.signup": { "defaultMessage": "Crear cuenta" diff --git a/packages/editor/lang/fr.json b/packages/editor/lang/fr.json index ce7af6f5..4832052b 100644 --- a/packages/editor/lang/fr.json +++ b/packages/editor/lang/fr.json @@ -1,9 +1,21 @@ { "editor.try-welcome": { - "defaultMessage": "Cet espace d'édition présente certaines des fonctionnalités de l'éditeur de cartes mentales !" + "defaultMessage": "Cet espace d'édition présente certaines des fonctionnalités de l'éditeur de cartes mentales!" }, "editor.try-welcome-description": { "defaultMessage": "Inscrivez-vous pour commencer à créer, partager et publier gratuitement un nombre illimité de cartes mentales." + }, + "editor.try-welcome-mobile": { + "defaultMessage": "Cet espace d'édition présente certaines des fonctionnalités des cartes mentales!" + }, + "editor.try-welcome-description-mobile": { + "defaultMessage": "Inscrivez-vous pour commencer à créer, partager et publier gratuitement un nombre illimité de cartes mentales. Les capacités d'édition limitées de mindmap sont prises en charge dans les appareils mobiles. Utilisez le navigateur de bureau pour bénéficier de toutes les fonctionnalités de l'éditeur." + }, + "editor.edit-mobile": { + "defaultMessage": "Remarque pour les appareils mobiles." + }, + "editor.edit-description-mobile": { + "defaultMessage": "Les capacités d'édition limitées de mindmap sont prises en charge dans les appareils mobiles. Utilisez le navigateur de bureau pour bénéficier de toutes les fonctionnalités de l'éditeur." }, "login.signup": { "defaultMessage": "S'inscrire" diff --git a/packages/editor/lang/ru.json b/packages/editor/lang/ru.json index e954afb0..72e549b5 100644 --- a/packages/editor/lang/ru.json +++ b/packages/editor/lang/ru.json @@ -4,6 +4,18 @@ }, "editor.try-welcome-description": { "defaultMessage": "Чтобы получить бесплатный неограниченный доступ — нужна только регистрация." + }, + "editor.try-welcome-mobile": { + "defaultMessage": "В этом издании демонстрируются некоторые возможности ментальных карт!" + }, + "editor.try-welcome-description-mobile": { + "defaultMessage": "Зарегистрируйтесь, чтобы начать создавать, делиться и публиковать неограниченное количество ментальных карт бесплатно. Возможности ограниченной версии Mindmap поддерживаются на мобильных устройствах. Используйте настольный браузер для полных возможностей редактора." + }, + "editor.edit-mobile": { + "defaultMessage": "Примечание для мобильных устройств." + }, + "editor.edit-description-mobile": { + "defaultMessage": "Возможности ограниченной версии Mindmap поддерживаются на мобильных устройствах. Используйте настольный браузер для полных возможностей редактора." }, "login.signup": { "defaultMessage": "Регистрация" diff --git a/packages/editor/lang/zh.json b/packages/editor/lang/zh.json index ecea81dc..cfc1a00f 100644 --- a/packages/editor/lang/zh.json +++ b/packages/editor/lang/zh.json @@ -1,14 +1,26 @@ { - "editor.try-welcome": { - "defaultMessage": "这个编辑区域展示了一些思维导图编辑器的功能！" - }, - "editor.try-welcome-description": { - "defaultMessage": "注册后可以免费创建、分享和发布无限数量的思维导图。" - }, - "login.signup": { - "defaultMessage": "注册" - }, - "action.share": { - "defaultMessage": "分享" - } + "editor.try-welcome": { + "defaultMessage": "这个编辑区域展示了一些思维导图编辑器的功能！" + }, + "editor.try-welcome-description": { + "defaultMessage": "注册后可以免费创建、分享和发布无限数量的思维导图。" + }, + "editor.try-welcome-mobile": { + "defaultMessage": "这个版本空间展示了一些思维导图功能！" + }, + "editor.try-welcome-description-mobile": { + "defaultMessage": "注册以开始免费创建、共享和发布无限数量的思维导图。 移动设备支持有限的思维导图编辑功能。 使用桌面浏览器获得完整的编辑器功能。" + }, + "editor.edit-mobile": { + "defaultMessage": "移动设备注意事项." + }, + "editor.edit-description-mobile": { + "defaultMessage": "移动设备支持有限的思维导图编辑功能。 使用桌面浏览器获得完整的编辑器功能。" + }, + "login.signup": { + "defaultMessage": "注册" + }, + "action.share": { + "defaultMessage": "分享" + } } \ No newline at end of file diff --git a/packages/editor/src/classes/menu/Menu.ts b/packages/editor/src/classes/menu/Menu.ts index 40d20db3..1cd16a93 100644 --- a/packages/editor/src/classes/menu/Menu.ts +++ b/packages/editor/src/classes/menu/Menu.ts @@ -61,7 +61,9 @@ class Menu extends IMenu { this._addButton('position', false, false, () => { designer.zoomToFit(); }); - Menu._registerTooltip('position', $msg('CENTER_POSITION')); + // Disabled because this tooltip overflows the screen and makes the button un-clickeable + // This should be enabled when migrating to material-ui + //Menu._registerTooltip('position', $msg('CENTER_POSITION')); // Edition actions ... if (!readOnly) { @@ -181,7 +183,9 @@ class Menu extends IMenu { designer.changeBorderColor(hex); }, }; - this._toolbarElems.push(new ColorPalettePanel('topicBorder', borderColorModel, widgetsBaseUrl)); + this._toolbarElems.push( + new ColorPalettePanel('topicBorder', borderColorModel, widgetsBaseUrl), + ); Menu._registerTooltip('topicBorder', $msg('TOPIC_BORDER_COLOR')); const fontColorModel = { @@ -271,14 +275,12 @@ class Menu extends IMenu { }); Menu._registerTooltip('fontItalic', $msg('FONT_ITALIC'), $msg('CTRL') + ' + I'); - if (!readOnly) { // Register action on save ... const saveElem = $('#save'); - this._addButton('save', false, false, - () => { - this.save(saveElem, designer, true); - }); + this._addButton('save', false, false, () => { + this.save(saveElem, designer, true); + }); Menu._registerTooltip('save', $msg('SAVE'), $msg('CTRL') + ' + S'); // Register unload save ... @@ -290,13 +292,11 @@ class Menu extends IMenu { }); // Autosave on a fixed period of time ... - setInterval( - () => { - if (this.isSaveRequired()) { - this.save(saveElem, designer, false); - } - }, 10000, - ); + setInterval(() => { + if (this.isSaveRequired()) { + this.save(saveElem, designer, false); + } + }, 10000); } } @@ -394,10 +394,14 @@ class Menu extends IMenu { // Register Events ... let result = null; if ($(`#${buttonId}`)) { - const button = new ToolbarItem(buttonId, ((event) => { - fn(event); - this.clear(); - }), { topicAction: isTopic, relAction: isRelationship }); + const button = new ToolbarItem( + buttonId, + (event) => { + fn(event); + this.clear(); + }, + { topicAction: isTopic, relAction: isRelationship }, + ); this._toolbarElems.push(button); result = button; @@ -409,9 +413,10 @@ class Menu extends IMenu { if ($(`#${buttonId}`)) { let tooltip = text; if (shortcut) { - const platformedShortcut = navigator.appVersion.indexOf('Mac') !== -1 - ? shortcut.replace('meta+', '⌘') - : shortcut.replace('meta+', 'ctrl+'); + const platformedShortcut = + navigator.appVersion.indexOf('Mac') !== -1 + ? shortcut.replace('meta+', '⌘') + : shortcut.replace('meta+', 'ctrl+'); tooltip = `${tooltip} (${platformedShortcut})`; } return new KeyboardShortcutTooltip($(`#${buttonId}`), tooltip); diff --git a/packages/editor/src/compiled-lang/de.json b/packages/editor/src/compiled-lang/de.json index ac8ea4ac..a455e2a8 100644 --- a/packages/editor/src/compiled-lang/de.json +++ b/packages/editor/src/compiled-lang/de.json @@ -5,6 +5,18 @@ "value": "Teilen" } ], + "editor.edit-description-mobile": [ + { + "type": 0, + "value": "Eingeschränkte Funktionen der Mindmap-Edition werden auf Mobilgeräten unterstützt. Verwenden Sie den Desktop-Browser für vollständige Editorfunktionen." + } + ], + "editor.edit-mobile": [ + { + "type": 0, + "value": "Hinweis für Mobilgeräte." + } + ], "editor.try-welcome": [ { "type": 0, @@ -17,6 +29,18 @@ "value": "Melden Sie sich an, um kostenlos eine unbegrenzte Anzahl von Mindmaps zu erstellen, zu teilen und zu veröffentlichen." } ], + "editor.try-welcome-description-mobile": [ + { + "type": 0, + "value": "Melden Sie sich an, um kostenlos eine unbegrenzte Anzahl von Mindmaps zu erstellen, zu teilen und zu veröffentlichen. Eingeschränkte Funktionen der Mindmap-Edition werden auf Mobilgeräten unterstützt. Verwenden Sie den Desktop-Browser für vollständige Editorfunktionen." + } + ], + "editor.try-welcome-mobile": [ + { + "type": 0, + "value": "Diese Edition zeigt einige der Mindmap-Funktionen!" + } + ], "login.signup": [ { "type": 0, diff --git a/packages/editor/src/compiled-lang/en.json b/packages/editor/src/compiled-lang/en.json index ab5c90b6..f466aad6 100644 --- a/packages/editor/src/compiled-lang/en.json +++ b/packages/editor/src/compiled-lang/en.json @@ -5,10 +5,22 @@ "value": "Share" } ], + "editor.edit-description-mobile": [ + { + "type": 0, + "value": "Limited mindmap edition capabilities are supported in Mobile devices. Use Desktop browser for full editor capabilities." + } + ], + "editor.edit-mobile": [ + { + "type": 0, + "value": "Note for mobile devices." + } + ], "editor.try-welcome": [ { "type": 0, - "value": "This edition space showcases some of the mindmap editor capabilities !" + "value": "This edition space showcases some of the mindmap editor capabilities!" } ], "editor.try-welcome-description": [ @@ -17,6 +29,18 @@ "value": "Sign Up to start creating, sharing and publishing unlimited number of mindmaps for free." } ], + "editor.try-welcome-description-mobile": [ + { + "type": 0, + "value": "Sign Up to start creating, sharing and publishing unlimited number of mindmaps for free. Limited mindmap edition capabilties are supported in Mobile devices. Use Desktop browser for full editor capabilies." + } + ], + "editor.try-welcome-mobile": [ + { + "type": 0, + "value": "This edition space showcases some of the mindmap capabilities!" + } + ], "login.signup": [ { "type": 0, diff --git a/packages/editor/src/compiled-lang/es.json b/packages/editor/src/compiled-lang/es.json index 19ff2e8a..65e44628 100644 --- a/packages/editor/src/compiled-lang/es.json +++ b/packages/editor/src/compiled-lang/es.json @@ -5,6 +5,18 @@ "value": "Compartir" } ], + "editor.edit-description-mobile": [ + { + "type": 0, + "value": "En dispositivos móbiles las funciones son limitadas. Use la versión de escritorio para tener las funciones completas." + } + ], + "editor.edit-mobile": [ + { + "type": 0, + "value": "Nota para dispositivos móbiles." + } + ], "editor.try-welcome": [ { "type": 0, @@ -17,6 +29,18 @@ "value": "Registrate para comenzar a crear, compartir y publicar una cantidad ilimitada de mapas mentales de forma gratuita." } ], + "editor.try-welcome-description-mobile": [ + { + "type": 0, + "value": "Registrate para comenzar a crear, compartir y publicar una cantidad ilimitada de mapas mentales de forma gratuita. En dispositivos móbiles las funciones son limitadas. Use la versión de escritorio para tener las funciones completas." + } + ], + "editor.try-welcome-mobile": [ + { + "type": 0, + "value": "¡Este espacio de edición muestra algunas de las capacidades de mapas mentales!" + } + ], "login.signup": [ { "type": 0, diff --git a/packages/editor/src/compiled-lang/fr.json b/packages/editor/src/compiled-lang/fr.json index a7f74b02..beab84d3 100644 --- a/packages/editor/src/compiled-lang/fr.json +++ b/packages/editor/src/compiled-lang/fr.json @@ -5,10 +5,22 @@ "value": "Partager" } ], + "editor.edit-description-mobile": [ + { + "type": 0, + "value": "Les capacités d'édition limitées de mindmap sont prises en charge dans les appareils mobiles. Utilisez le navigateur de bureau pour bénéficier de toutes les fonctionnalités de l'éditeur." + } + ], + "editor.edit-mobile": [ + { + "type": 0, + "value": "Remarque pour les appareils mobiles." + } + ], "editor.try-welcome": [ { "type": 0, - "value": "Cet espace d'édition présente certaines des fonctionnalités de l'éditeur de cartes mentales !" + "value": "Cet espace d'édition présente certaines des fonctionnalités de l'éditeur de cartes mentales!" } ], "editor.try-welcome-description": [ @@ -17,6 +29,18 @@ "value": "Inscrivez-vous pour commencer à créer, partager et publier gratuitement un nombre illimité de cartes mentales." } ], + "editor.try-welcome-description-mobile": [ + { + "type": 0, + "value": "Inscrivez-vous pour commencer à créer, partager et publier gratuitement un nombre illimité de cartes mentales. Les capacités d'édition limitées de mindmap sont prises en charge dans les appareils mobiles. Utilisez le navigateur de bureau pour bénéficier de toutes les fonctionnalités de l'éditeur." + } + ], + "editor.try-welcome-mobile": [ + { + "type": 0, + "value": "Cet espace d'édition présente certaines des fonctionnalités des cartes mentales!" + } + ], "login.signup": [ { "type": 0, diff --git a/packages/editor/src/compiled-lang/ru.json b/packages/editor/src/compiled-lang/ru.json index 6a9236c3..716d0b29 100644 --- a/packages/editor/src/compiled-lang/ru.json +++ b/packages/editor/src/compiled-lang/ru.json @@ -5,6 +5,18 @@ "value": "Поделиться" } ], + "editor.edit-description-mobile": [ + { + "type": 0, + "value": "Возможности ограниченной версии Mindmap поддерживаются на мобильных устройствах. Используйте настольный браузер для полных возможностей редактора." + } + ], + "editor.edit-mobile": [ + { + "type": 0, + "value": "Примечание для мобильных устройств." + } + ], "editor.try-welcome": [ { "type": 0, @@ -17,6 +29,18 @@ "value": "Чтобы получить бесплатный неограниченный доступ — нужна только регистрация." } ], + "editor.try-welcome-description-mobile": [ + { + "type": 0, + "value": "Зарегистрируйтесь, чтобы начать создавать, делиться и публиковать неограниченное количество ментальных карт бесплатно. Возможности ограниченной версии Mindmap поддерживаются на мобильных устройствах. Используйте настольный браузер для полных возможностей редактора." + } + ], + "editor.try-welcome-mobile": [ + { + "type": 0, + "value": "В этом издании демонстрируются некоторые возможности ментальных карт!" + } + ], "login.signup": [ { "type": 0, diff --git a/packages/editor/src/compiled-lang/zh.json b/packages/editor/src/compiled-lang/zh.json index e0ab537c..69e858e6 100644 --- a/packages/editor/src/compiled-lang/zh.json +++ b/packages/editor/src/compiled-lang/zh.json @@ -5,6 +5,18 @@ "value": "分享" } ], + "editor.edit-description-mobile": [ + { + "type": 0, + "value": "移动设备支持有限的思维导图编辑功能。 使用桌面浏览器获得完整的编辑器功能。" + } + ], + "editor.edit-mobile": [ + { + "type": 0, + "value": "移动设备注意事项." + } + ], "editor.try-welcome": [ { "type": 0, @@ -17,6 +29,18 @@ "value": "注册后可以免费创建、分享和发布无限数量的思维导图。" } ], + "editor.try-welcome-description-mobile": [ + { + "type": 0, + "value": "注册以开始免费创建、共享和发布无限数量的思维导图。 移动设备支持有限的思维导图编辑功能。 使用桌面浏览器获得完整的编辑器功能。" + } + ], + "editor.try-welcome-mobile": [ + { + "type": 0, + "value": "这个版本空间展示了一些思维导图功能！" + } + ], "login.signup": [ { "type": 0, diff --git a/packages/editor/src/components/footer/index.tsx b/packages/editor/src/components/footer/index.tsx index 1b10f9b0..dae9ba4d 100644 --- a/packages/editor/src/components/footer/index.tsx +++ b/packages/editor/src/components/footer/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { StyledLogo, Notifier } from './styled'; import { useIntl } from 'react-intl'; @@ -6,51 +6,99 @@ import KeyboardSvg from '../../../images/keyboard.svg'; import AddSvg from '../../../images/add.svg'; import MinusSvg from '../../../images/minus.svg'; import CenterFocusSvg from '../../../images/center_focus.svg'; +import CloseDialogSvg from '../../../images/close-dialog-icon.svg'; + import ActionButton from '../action-button'; import { EditorRenderMode } from '@wisemapping/mindplot'; export type FooterPropsType = { - editorMode: EditorRenderMode; + editorMode: EditorRenderMode; + isMobile: boolean; }; -const Footer = ({ editorMode }: FooterPropsType): React.ReactElement => { - const intl = useIntl(); +const Footer = ({ editorMode, isMobile }: FooterPropsType): React.ReactElement => { + const intl = useIntl(); + const [dialogClass, setDialogClass] = useState('tryInfoPanel'); - return ( - <> -
-
- -
-
- - -
-
- -
+ var titleKey = undefined; + var descriptionKey = undefined; + var showSignupButton = undefined; + + if (editorMode !== 'viewonly' && editorMode !== 'showcase' && isMobile) { + titleKey = 'editor.edit-mobile'; + descriptionKey = 'editor.edit-description-mobile'; + showSignupButton = false; + } + if (editorMode === 'showcase' && isMobile) { + titleKey = 'editor.try-welcome-mobile'; + descriptionKey = 'editor.edit-description-mobile'; + showSignupButton = true; + } + if (editorMode === 'showcase' && !isMobile) { + titleKey = 'editor.try-welcome'; + descriptionKey = 'editor.try-welcome-description'; + showSignupButton = true; + } + + // if the toolbar is present, the alert must not overlap + var alertTopAdjustmentStyle = + editorMode !== 'viewonly' && !isMobile + ? 'tryInfoPanelWithToolbar' + : 'tryInfoPanelWithoutToolbar'; + + return ( + <> +
+ {!isMobile && ( +
+ +
+ )} +
+ + +
+
+ +
+
+ + + {titleKey && ( +
+
+
+
- - - {editorMode === 'showcase' && ( -
-

{intl.formatMessage({ id: 'editor.try-welcome' })}

-

{intl.formatMessage({ id: 'editor.try-welcome-description' })}

- - - {intl.formatMessage({ id: 'login.signup', defaultMessage: 'Sign Up' })} - - -
+

+ {intl.formatMessage({ id: titleKey })} {intl.formatMessage({ id: descriptionKey })} +

+ {showSignupButton && ( + + + {intl.formatMessage({ id: 'login.signup', defaultMessage: 'Sign Up' })} + + )} - - ); +
+
+ )} + + ); }; export default Footer; diff --git a/packages/editor/src/global-styled.css b/packages/editor/src/global-styled.css index 06d15195..632406d9 100644 --- a/packages/editor/src/global-styled.css +++ b/packages/editor/src/global-styled.css @@ -9,6 +9,19 @@ html { font-size: initial; } +body { + width: 100vw; + height: 100vh; + min-width: 100vw; + min-height: 100vh; + margin: 0px; +} + +.mindplot-root { + width: 100%; + height: 100%; +} + div#mindplot { position: relative; top: 50px; @@ -201,21 +214,69 @@ div#shotcuts > img{ color: #ffffff; } -div#tryInfoPanel { - position: absolute; - margin: auto; - text-align: center; - top: 80px; - left: 20px; - width: 200px; - padding: 20px; - font-size: 15px; - border-radius: 9px; - background-color: white; - border: solid 2px #ffa800; +.tryInfoPanel { + position: absolute; + text-align: center; + left: 0; + right: 0; + background-color: white; + border: solid 2px #ffa800; + margin: auto; + width: 99%; + border-radius: 9px; + width: 96%; } -#tryInfoPanel > p { +@media (min-width: 600px) { + .tryInfoPanel { + font-size: 15px; + } +} + +@media (max-width: 600px) { + .tryInfoPanel { + font-size: 13px; + } +} + +.tryInfoPanel .tryInfoPanelInner { + padding-top: 10px; + padding-bottom: 10px; + padding-left: 5px; + padding-right: 5px; +} + +.tryInfoPanel .tryInfoPanelInner .closeButton { + position: absolute; + top: 5px; + right: 5px; +} + +.tryInfoPanel .tryInfoPanelInner .closeButton button { + cursor: pointer; + border-style: hidden; + background-color: transparent; + padding: 0px; +} + +.tryInfoPanel .tryInfoPanelInner .closeButton button img { + width: 18px; + height: 18px; + filter: invert(73%) sepia(21%) saturate(4699%) hue-rotate(357deg) brightness(98%) contrast(108%); +} + +.tryInfoPanelWithToolbar { + top: 55px; +} + +.tryInfoPanelWithoutToolbar { + top: 5px; +} + +.tryInfoPanelClosed { + display: none; +} + +.tryInfoPanel > p { justify-content: center; - padding-bottom: 20px; } \ No newline at end of file diff --git a/packages/editor/src/index.tsx b/packages/editor/src/index.tsx index eed9732f..37e4fd41 100644 --- a/packages/editor/src/index.tsx +++ b/packages/editor/src/index.tsx @@ -1,122 +1,141 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import Toolbar, { ToolbarActionType } from './components/toolbar'; import Footer from './components/footer'; import { IntlProvider } from 'react-intl'; import { - $notify, - buildDesigner, - PersistenceManager, - DesignerOptionsBuilder, - Designer, - DesignerKeyboard, - EditorRenderMode, + $notify, + buildDesigner, + PersistenceManager, + DesignerOptionsBuilder, + Designer, + DesignerKeyboard, + EditorRenderMode, } from '@wisemapping/mindplot'; import './global-styled.css'; import I18nMsg from './classes/i18n-msg'; import Menu from './classes/menu/Menu'; declare global { - // used in mindplot - var designer: Designer; - var accountEmail: string; + // used in mindplot + var designer: Designer; + var accountEmail: string; } export type EditorOptions = { - mode: EditorRenderMode, - locale: string, - zoom?: number, - locked?: boolean, - lockedMsg?: string; - mapTitle: string; - enableKeyboardEvents: boolean; -} - -export type EditorProps = { - mapId: string; - options: EditorOptions; - persistenceManager: PersistenceManager; - onAction: (action: ToolbarActionType) => void; - onLoad?: (designer: Designer) => void; + mode: EditorRenderMode; + locale: string; + zoom?: number; + locked?: boolean; + lockedMsg?: string; + mapTitle: string; + enableKeyboardEvents: boolean; }; -const Editor = ({ - mapId, - options, - persistenceManager, - onAction, - onLoad, -}: EditorProps) => { +export type EditorProps = { + mapId: string; + options: EditorOptions; + persistenceManager: PersistenceManager; + onAction: (action: ToolbarActionType) => void; + onLoad?: (designer: Designer) => void; +}; - useEffect(() => { - // Change page title ... - document.title = `${options.mapTitle} | WiseMapping `; +const Editor = ({ mapId, options, persistenceManager, onAction, onLoad }: EditorProps) => { + const [isMobile, setIsMobile] = useState(undefined); - // Load mindmap ... - const designer = onLoadDesigner(mapId, options, persistenceManager); - // Has extended actions been customized ... - if (onLoad) { - onLoad(designer); - } + useEffect(() => { + // Change page title ... + document.title = `${options.mapTitle} | WiseMapping `; - // Load mindmap ... - const instance = PersistenceManager.getInstance(); - const mindmap = instance.load(mapId); - designer.loadMap(mindmap); + // Load mindmap ... + const designer = onLoadDesigner(mapId, options, persistenceManager); + // Has extended actions been customized ... + if (onLoad) { + onLoad(designer); + } - if (options.locked) { - $notify(options.lockedMsg, false); - } - }, []); + // Load mindmap ... + const instance = PersistenceManager.getInstance(); + const mindmap = instance.load(mapId); + designer.loadMap(mindmap); - useEffect(() => { - if (options.enableKeyboardEvents) { - DesignerKeyboard.resume(); - } else { - DesignerKeyboard.pause(); - } - }, [options.enableKeyboardEvents]); + setIsMobile(checkMobile()); - const onLoadDesigner = (mapId: string, options: EditorOptions, persistenceManager: PersistenceManager): Designer => { - const buildOptions = DesignerOptionsBuilder.buildOptions({ - persistenceManager, - mode: options.mode, - mapId: mapId, - container: 'mindplot', - zoom: options.zoom, - locale: options.locale, - }); + if (options.locked) { + $notify(options.lockedMsg, false); + } + }, []); - // Build designer ... - const result = buildDesigner(buildOptions); + useEffect(() => { + if (options.enableKeyboardEvents) { + DesignerKeyboard.resume(); + } else { + DesignerKeyboard.pause(); + } + }, [options.enableKeyboardEvents]); - // Register toolbar event ... - if (options.mode === 'edition-owner' || options.mode === 'edition-editor' || options.mode === 'edition-viewer' || options.mode === 'showcase') { - const menu = new Menu(designer, 'toolbar'); + const checkMobile = () => { + const check = + /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test( + navigator.userAgent.toLowerCase(), + ) || + /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test( + navigator.userAgent.toLowerCase().substring(0, 4), + ); + return check; + }; - // If a node has focus, focus can be move to another node using the keys. - designer.cleanScreen = () => { - menu.clear(); - }; - } - return result; + const onLoadDesigner = ( + mapId: string, + options: EditorOptions, + persistenceManager: PersistenceManager, + ): Designer => { + const buildOptions = DesignerOptionsBuilder.buildOptions({ + persistenceManager, + mode: options.mode, + mapId: mapId, + container: 'mindplot', + zoom: options.zoom, + locale: options.locale, + }); - }; + // Build designer ... + const result = buildDesigner(buildOptions); - const locale = options.locale; - const msg = I18nMsg.loadLocaleData(locale); - const mindplotStyle = (options.mode === 'viewonly') ? { top: 0 } : { top: 'inherit' }; - return ( - - {(options.mode !== 'viewonly') && - - } -
-
-