[PE] added button for switching to/from mobile editor

ONLYOFFICE · Jan 9, 2025 · fe838a8 · fe838a8
1 parent a7cbdc0
commit fe838a8
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 1 deletion.
diff --git a/apps/presentationeditor/main/app/controller/LeftMenu.js b/apps/presentationeditor/main/app/controller/LeftMenu.js
@@ -278,6 +278,7 @@ define([
                     break;
                 case 'external-help': close_menu = true; break;
                 case 'close-editor': Common.NotificationCenter.trigger('close'); break;
+                case 'switch:mobile': Common.Gateway.switchEditorType('mobile', true); break;
                 default: close_menu = false;
             }
 

diff --git a/apps/presentationeditor/main/app/controller/Main.js b/apps/presentationeditor/main/app/controller/Main.js
@@ -437,6 +437,7 @@ define([
 
                 this.appOptions.canRequestClose = this.editorConfig.canRequestClose;
                 this.appOptions.canCloseEditor = false;
+                this.appOptions.canSwitchToMobile = this.editorConfig.forceDesktop;
 
                 var _canback = false;
                 if (typeof this.appOptions.customization === 'object') {

diff --git a/apps/presentationeditor/main/app/view/FileMenu.js b/apps/presentationeditor/main/app/view/FileMenu.js
@@ -553,6 +553,21 @@ define([
                         iconCls: 'menu__icon btn-close'
                     }));
             }
+
+            if ( this.mode.canSwitchToMobile ) {
+                $('<li id="fm-btn-switchmobile" class="fm-btn"></li>').insertBefore($('#fm-btn-settings', this.$el));
+                this.items.push(
+                    new Common.UI.MenuItem({
+                        el      : $('#fm-btn-switchmobile', this.$el),
+                        action  : 'switch:mobile',
+                        caption : this.btnSwitchToMobileCaption,
+                        canFocused: false,
+                        dataHint: 1,
+                        dataHintDirection: 'left-top',
+                        dataHintOffset: [-2, 22],
+                        iconCls: 'menu__icon btn-switch-mobile'
+                    }));
+            }
         },
 
         setMode: function(mode, delay) {

diff --git a/apps/presentationeditor/main/locale/en.json b/apps/presentationeditor/main/locale/en.json
@@ -2054,6 +2054,7 @@
   "PE.Views.FileMenu.btnSaveCaption": "Save",
   "PE.Views.FileMenu.btnSaveCopyAsCaption": "Save Copy As",
   "PE.Views.FileMenu.btnSettingsCaption": "Advanced Settings",
+  "PE.Views.FileMenu.btnSwitchToMobileCaption": "Switch to mobile editor",
   "PE.Views.FileMenu.btnToEditCaption": "Edit Presentation",
   "PE.Views.FileMenuPanels.CreateNew.txtBlank": "Blank Presentation",
   "PE.Views.FileMenuPanels.CreateNew.txtCreateNew": "Create New",

diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json
@@ -276,7 +276,8 @@
     "stayButtonText": "Stay on this Page",
     "textCloseHistory": "Close History",
     "textEnterNewFileName": "Enter a new file name",
-    "textRenameFile": "Rename File"
+    "textRenameFile": "Rename File",
+    "btnRestartNow": "Restart now"
   },
   "View": {
     "Add": {

diff --git a/apps/presentationeditor/mobile/src/controller/Toolbar.jsx b/apps/presentationeditor/mobile/src/controller/Toolbar.jsx
@@ -255,6 +255,22 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeFocusObjects'
         }
     }
 
+    const forceDesktopMode = () => {
+        f7.dialog.create({
+            text: t('View.Settings.textRestartApplication'),
+            title: t('View.Settings.notcriticalErrorTitle'),
+            buttons: [
+                {
+                    text: t('View.Add.textCancel')
+                },
+                {
+                    text: t('Toolbar.btnRestartNow'),
+                    onClick: () => Common.Gateway.switchEditorType('desktop', true),
+                }
+            ]}
+        ).open();
+    }
+
     return (
         <ToolbarView 
             openOptions={props.openOptions}
@@ -278,6 +294,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeFocusObjects'
             closeHistory={closeHistory}
             isOpenModal={props.isOpenModal}
             changeTitleHandler={changeTitleHandler}
+            forceDesktopMode={forceDesktopMode}
         />
     )
 }));

diff --git a/apps/presentationeditor/mobile/src/less/icons-common.less b/apps/presentationeditor/mobile/src/less/icons-common.less
@@ -22,4 +22,8 @@ i.icon {
         height: 22px;
         .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 12C14.6863 12 12 14.6863 12 18C12 21.3137 14.6863 24 18 24C21.3137 24 24 21.3137 24 18C24 14.6863 21.3137 12 18 12ZM18.7458 22V16.7307H21.2522V15.4956H18.7458H17.2265H14.7478V16.7307H17.2265V22H18.7458Z" fill="#A8A8A8"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4 1C2.34315 1 1 2.34315 1 4V20C1 21.6569 2.34315 23 4 23H13.101C11.8045 21.7295 11 19.9587 11 18C11 17.4576 11.0617 16.9296 11.1785 16.4226C9.86316 15.0952 8.20867 14.5842 6.37705 14.5842C5.6032 14.5842 4.85524 14.7369 4.15044 15.018C4.14616 15.0202 4.14224 15.0216 4.13776 15.0231L4.13654 15.0235C4.12921 15.0255 4.12161 15.0269 4.11419 15.0269C4.0511 15.0269 4 14.959 4 14.8755C4 14.8263 4.01769 14.7835 4.04393 14.7567C4.0454 14.7554 4.04681 14.754 4.04819 14.7527C4.05119 14.7498 4.05401 14.7471 4.05679 14.7448C5.28644 13.6439 6.76778 13.0011 8.36321 13.0011C9.48515 13.0011 10.5512 13.3196 11.5132 13.891C12.1885 13.2535 12.9445 12.7563 13.7571 12.432C14.9342 11.5336 16.4048 11 18 11C19.9587 11 21.7295 11.8045 23 13.101V4C23 2.34315 21.6569 1 20 1H4ZM19.9523 7.74897V7.74817C19.9256 7.72981 19.8987 7.71247 19.8719 7.69519L19.8513 7.68188C19.3128 7.33699 18.7196 7.11012 18.0893 7.03103C16.9751 6.89113 15.9103 7.23056 15.0106 7.92168C14.3943 7.45795 13.6965 7.156 12.9453 7.06171C11.91 6.93181 10.9174 7.21642 10.0601 7.81245L10.0495 7.82011L10.0495 7.82011C10.0445 7.82374 10.0396 7.82735 10.0349 7.83046C10.0141 7.85206 10 7.88567 10 7.92342C10 7.98904 10.0394 8.04212 10.0894 8.04212C10.094 8.04212 10.0985 8.04118 10.1034 8.03985C10.1055 8.03958 10.1076 8.03838 10.1095 8.03785C10.5706 7.92475 11.0513 7.89274 11.5415 7.95423C12.9173 8.12667 14.1162 8.69056 14.9573 9.95625C15.0013 10.0169 15.04 10.0132 15.0846 9.95305C16.1426 8.32593 17.7652 7.68295 19.509 7.90154C19.6063 7.91408 19.7021 7.92995 19.7976 7.94889L19.8265 7.95483C19.8559 7.96094 19.8894 7.96791 19.9115 7.97116C19.969 7.97957 20 7.91822 20 7.85233C19.9995 7.80778 19.985 7.77044 19.9523 7.74897Z" fill="#DD9426"/></svg>');
     }
+}
+
+.icon-svg {
+    fill: @brand-slide;
 }
diff --git a/apps/presentationeditor/mobile/src/view/Toolbar.jsx b/apps/presentationeditor/mobile/src/view/Toolbar.jsx
@@ -3,6 +3,8 @@ import {NavLeft, NavRight, Link} from 'framework7-react';
 import { Device } from '../../../../common/mobile/utils/device';
 import EditorUIController from '../lib/patch'
 import { useTranslation } from 'react-i18next';
+import SvgIcon from '@common/lib/component/SvgIcon'
+import IconSwitchToDesktop from '@common/resources/icons/switch-desktop.svg'
 
 const ToolbarView = props => {
     const { t } = useTranslation();
@@ -47,6 +49,12 @@ const ToolbarView = props => {
                     onUndoClick: props.onUndo,
                     onRedoClick: props.onRedo
                 })}
+                {!Device.phone && <Link key='desktop-link' iconOnly href={false}
+                                       className={isOpenModal || props.disabledControls ? 'disabled' : ''}
+                                       onClick={() => props.forceDesktopMode()}>
+                                        <SvgIcon symbolId={IconSwitchToDesktop.id}
+                                             className={'icon icon-svg'} />
+                    </Link>}
                 {!isVersionHistoryMode &&
                     <Link className={(props.disabledControls || props.disabledPreview || isOpenModal) && 'disabled'} icon='icon-play' href={false} onClick={() => {props.openOptions('preview')}}></Link>
                 }