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

ONLYOFFICE · Jan 10, 2025 · c24e971 · c24e971
1 parent fe838a8
commit c24e971
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 2 deletions.
diff --git a/apps/visioeditor/main/app/controller/LeftMenu.js b/apps/visioeditor/main/app/controller/LeftMenu.js
@@ -221,6 +221,7 @@ define([
                 close_menu = !!isopts;
                 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/visioeditor/main/app/controller/Main.js b/apps/visioeditor/main/app/controller/Main.js
@@ -373,6 +373,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/visioeditor/main/app/view/FileMenu.js b/apps/visioeditor/main/app/view/FileMenu.js
@@ -450,6 +450,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/visioeditor/main/locale/en.json b/apps/visioeditor/main/locale/en.json
@@ -327,6 +327,7 @@
   "VE.Views.FileMenu.btnSaveAsCaption": "Save As",
   "VE.Views.FileMenu.btnSaveCopyAsCaption": "Save Copy As",
   "VE.Views.FileMenu.btnSettingsCaption": "Advanced Settings",
+  "VE.Views.FileMenu.btnSwitchToMobileCaption": "Switch to mobile editor",
   "VE.Views.FileMenu.textDownload": "Download",
   "VE.Views.FileMenuPanels.CreateNew.txtBlank": "Blank Document",
   "VE.Views.FileMenuPanels.CreateNew.txtCreateNew": "Create new",

diff --git a/apps/visioeditor/mobile/locale/en.json b/apps/visioeditor/mobile/locale/en.json
@@ -158,7 +158,8 @@
     "leaveButtonText": "Leave this page",
     "stayButtonText": "Stay on this Page",
     "textEnterNewFileName": "Enter a new file name",
-    "textRenameFile": "Rename File"
+    "textRenameFile": "Rename File",
+    "btnRestartNow": "Restart now"
   },
   "View": {
     "Edit": {
@@ -207,7 +208,8 @@
       "textVersion": "Version",
       "textVisioInfo": "Diagram Viewer Info",
       "textVisioSettings": "Diagram Viewer Settings",
-      "textVisioTitle": "Diagram Viewer Title"
+      "textVisioTitle": "Diagram Viewer Title",
+      "textRestartApplication": "Please restart the application for the changes to take effect"
     }
   }
 }
diff --git a/apps/visioeditor/mobile/src/controller/Toolbar.jsx b/apps/visioeditor/mobile/src/controller/Toolbar.jsx
@@ -209,6 +209,22 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeToolbarSettin
                 storeVisioInfo.changeTitle(newTitle);
             }
         }
+    }
+
+    const forceDesktopMode = () => {
+        f7.dialog.create({
+            text: t('View.Settings.textRestartApplication'),
+            title: t('View.Settings.notcriticalErrorTitle'),
+            buttons: [
+                {
+                    text: t('View.Edit.textCancel')
+                },
+                {
+                    text: t('Toolbar.btnRestartNow'),
+                    onClick: () => Common.Gateway.switchEditorType('desktop', true),
+                }
+            ]}
+        ).open();
     };
 
     return (
@@ -223,6 +239,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeToolbarSettin
             isDisconnected={isDisconnected}
             isOpenModal={props.isOpenModal}
             changeTitleHandler={changeTitleHandler}
+            forceDesktopMode={forceDesktopMode}
         />
     )
 }));

diff --git a/apps/visioeditor/mobile/src/less/icons-common.less b/apps/visioeditor/mobile/src/less/icons-common.less
@@ -9,4 +9,8 @@ i.icon {
         height: 22px;
         .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1" width="22" height="22" rx="3" fill="#507C8B"/><path d="M12 20a2.1 2.1 0 0 1-1.566-.667 2.24 2.24 0 0 1-.645-1.619q0-.743.415-1.333t1.06-.82v-1.39a3 3 0 0 1-.388-.18 1.5 1.5 0 0 1-.331-.258l-1.16.705q.017.096.027.2t.009.22q0 .952-.645 1.618-.644.667-1.565.667a2.1 2.1 0 0 1-1.566-.667A2.24 2.24 0 0 1 5 14.857q0-.952.645-1.619.644-.667 1.566-.667.423 0 .792.143.367.143.663.41l1.142-.686a2 2 0 0 1-.028-.21 3 3 0 0 1 0-.447 2 2 0 0 1 .028-.2l-1.142-.705a2.13 2.13 0 0 1-1.455.553 2.1 2.1 0 0 1-1.566-.667A2.24 2.24 0 0 1 5 9.142q0-.951.645-1.618.644-.667 1.566-.667.92 0 1.565.667.645.666.645 1.619 0 .114-.01.228a2 2 0 0 1-.027.21l1.16.686q.149-.152.332-.248a4 4 0 0 1 .387-.171v-1.39a2.13 2.13 0 0 1-1.06-.83 2.3 2.3 0 0 1-.414-1.342q0-.953.645-1.62Q11.08 4 12 4t1.566.667q.644.666.644 1.619 0 .743-.414 1.343-.415.6-1.06.828v1.39q.204.077.378.182.176.104.323.257l1.179-.724a2.5 2.5 0 0 1-.037-.419q0-.952.645-1.62.644-.666 1.566-.666.92 0 1.565.667Q19 8.19 19 9.143t-.645 1.619q-.645.667-1.565.667-.425 0-.783-.143a2.2 2.2 0 0 1-.654-.41l-1.198.724a2 2 0 0 1 .037.4 3 3 0 0 1-.037.419l1.198.705q.294-.267.654-.41t.782-.143q.921 0 1.566.667.645.666.645 1.62 0 .952-.645 1.618t-1.565.667a2.1 2.1 0 0 1-1.566-.667 2.24 2.24 0 0 1-.645-1.619 2.5 2.5 0 0 1 .037-.419l-1.18-.705a1.3 1.3 0 0 1-.322.248q-.174.095-.377.171v1.41q.645.228 1.06.819.413.59.413 1.333 0 .953-.644 1.62Q12.92 20 12 20m0-1.524a.7.7 0 0 0 .525-.219.75.75 0 0 0 .212-.543.75.75 0 0 0-.212-.543.7.7 0 0 0-.525-.219.7.7 0 0 0-.525.22.75.75 0 0 0-.212.542q0 .324.212.543a.7.7 0 0 0 .525.22M7.21 15.62a.7.7 0 0 0 .526-.219.75.75 0 0 0 .211-.543.75.75 0 0 0-.211-.543.7.7 0 0 0-.525-.219.7.7 0 0 0-.525.22.75.75 0 0 0-.212.542q0 .324.212.543a.7.7 0 0 0 .525.219m9.58 0a.7.7 0 0 0 .524-.219.75.75 0 0 0 .212-.543.75.75 0 0 0-.212-.543.7.7 0 0 0-.524-.219.7.7 0 0 0-.525.22.75.75 0 0 0-.212.542q0 .324.212.543a.7.7 0 0 0 .524.219M12 12.762a.7.7 0 0 0 .525-.22.75.75 0 0 0 .212-.542.75.75 0 0 0-.212-.543.7.7 0 0 0-.525-.219.7.7 0 0 0-.525.22.75.75 0 0 0-.212.542q0 .324.212.543a.7.7 0 0 0 .525.219M7.21 9.905a.7.7 0 0 0 .526-.22.75.75 0 0 0 .211-.542.75.75 0 0 0-.211-.543.7.7 0 0 0-.525-.219.7.7 0 0 0-.525.219.75.75 0 0 0-.212.543q0 .324.212.543a.7.7 0 0 0 .525.219m9.58 0a.7.7 0 0 0 .524-.22.75.75 0 0 0 .212-.542.75.75 0 0 0-.212-.543.7.7 0 0 0-.524-.219.7.7 0 0 0-.525.219.75.75 0 0 0-.212.543q0 .324.212.543a.7.7 0 0 0 .524.219M12 7.048a.7.7 0 0 0 .525-.22.75.75 0 0 0 .212-.542.75.75 0 0 0-.212-.543.7.7 0 0 0-.525-.22.7.7 0 0 0-.525.22.75.75 0 0 0-.212.543q0 .324.212.543a.7.7 0 0 0 .525.219" fill="#fff"/></svg>');
     }
+}
+
+.icon-svg {
+    fill: @brand-visio;
 }
diff --git a/apps/visioeditor/mobile/src/view/Toolbar.jsx b/apps/visioeditor/mobile/src/view/Toolbar.jsx
@@ -2,6 +2,8 @@ import React, {Fragment, useEffect } from 'react';
 import {NavLeft, NavRight, Link} from 'framework7-react';
 import { Device } from '../../../../common/mobile/utils/device';
 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();
@@ -29,6 +31,12 @@ const ToolbarView = props => {
                 </div>
             }
             <NavRight>
+                {!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>}
                 <Link className={(props.disabledSettings || props.disabledControls || isDisconnected || isOpenModal) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
             </NavRight>
         </Fragment>