[PE] Add view tab

apps/common/main/resources/less/toolbar.less

@@ -759,3 +759,8 @@
     }
 }
 
+#slot-field-zoom {
+    float: left;
+    min-width: 46px;
+}
+

apps/documenteditor/main/resources/less/toolbar.less

@@ -201,8 +201,3 @@
         }
     }
 }
-
-#slot-field-zoom {
-    float: left;
-    min-width: 46px;
-}

apps/presentationeditor/main/app.js

@@ -152,6 +152,7 @@ require([
             'RightMenu',
             'LeftMenu',
             'Main',
+            'ViewTab',
             'Common.Controllers.Fonts',
             'Common.Controllers.History'
             /** coauthoring begin **/
@@ -175,6 +176,7 @@ require([
             'presentationeditor/main/app/controller/RightMenu',
             'presentationeditor/main/app/controller/LeftMenu',
             'presentationeditor/main/app/controller/Main',
+            'presentationeditor/main/app/controller/ViewTab',
             'presentationeditor/main/app/view/FileMenuPanels',
             'presentationeditor/main/app/view/ParagraphSettings',
             'presentationeditor/main/app/view/ImageSettings',

apps/presentationeditor/main/app/controller/Toolbar.js

@@ -2494,6 +2494,10 @@ define([
                 Array.prototype.push.apply(me.toolbar.lockControls,transitController.getView().getButtons());
                 Array.prototype.push.apply(me.toolbar.slideOnlyControls,transitController.getView().getButtons());
 
+                var viewtab = me.getApplication().getController('ViewTab');
+                viewtab.setApi(me.api).setConfig({toolbar: me, mode: config});
+                Array.prototype.push.apply(me.toolbar.lockControls, viewtab.getView('ViewTab').getButtons());
+
                 me.toolbar.btnSave.on('disabled', _.bind(me.onBtnChangeState, me, 'save:disabled'));
 
                 if (!(config.customization && config.customization.compactHeader)) {

apps/presentationeditor/main/app/controller/ViewTab.js

@@ -0,0 +1,101 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2020
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+
+/**
+ *  ViewTab.js
+ *
+ *  Created by Julia Svinareva on 07.12.2021
+ *  Copyright (c) 2021 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'presentationeditor/main/app/view/ViewTab'
+], function () {
+    'use strict';
+
+    PE.Controllers.ViewTab = Backbone.Controller.extend(_.extend({
+        models : [],
+        collections : [
+        ],
+        views : [
+            'ViewTab'
+        ],
+        sdkViewName : '#id_main',
+
+        initialize: function () {
+        },
+        onLaunch: function () {
+            this._state = {};
+        },
+
+        setApi: function (api) {
+            if (api) {
+                this.api = api;
+
+            }
+            return this;
+        },
+
+        setConfig: function(config) {
+            this.toolbar = config.toolbar;
+            this.view = this.createView('ViewTab', {
+                toolbar: this.toolbar.toolbar,
+                mode: config.mode
+            });
+            this.addListeners({
+                'ViewTab': {
+
+                },
+                'Statusbar': {
+
+                }
+            });
+        },
+
+        SetDisabled: function(state) {
+            this.view && this.view.SetDisabled(state);
+        },
+
+        getView: function(name) {
+            return !name && this.view ?
+                this.view : Backbone.Controller.prototype.getView.call(this, name);
+        },
+
+        onCoAuthoringDisconnect: function() {
+            this.SetDisabled(true);
+        },
+
+    }, PE.Controllers.ViewTab || {}));
+});

apps/presentationeditor/main/app/template/Toolbar.template

@@ -178,6 +178,46 @@
                     </div>
                 </div>
             </section>
+            <section class="panel" data-tab="view">
+                <div class="group small">
+                    <div class="elset" style="display: flex;">
+                        <span class="btn-slot" id="slot-field-zoom" style="flex-grow: 1;"></span>
+                    </div>
+                    <div class="elset" style="text-align: center;">
+                        <span class="btn-slot text" id="slot-lbl-zoom" style="font-size: 11px;text-align: center;margin-top: 4px;"></span>
+                    </div>
+                </div>
+                <div class="group small">
+                    <div class="elset">
+                        <span class="btn-slot text" id="slot-btn-fts" style="font-size: 11px;text-align: center;"></span>
+                    </div>
+                    <div class="elset">
+                        <span class="btn-slot text" id="slot-btn-ftw" style="font-size: 11px;text-align: center;"></span>
+                    </div>
+                </div>
+                <div class="separator long"></div>
+                <div class="group">
+                    <span class="btn-slot text x-huge" id="slot-btn-interface-theme"></span>
+                </div>
+                <div class="separator long"></div>
+                <div class="group small">
+                    <div class="elset">
+                        <span class="btn-slot text" id="slot-chk-notes"></span>
+                    </div>
+                    <div class="elset">
+                        <span class="btn-slot text" id="slot-chk-rulers"></span>
+                    </div>
+                </div>
+                <div class="separator long"></div>
+                <div class="group small">
+                    <div class="elset">
+                        <span class="btn-slot text" id="slot-chk-statusbar"></span>
+                    </div>
+                    <div class="elset">
+                        <span class="btn-slot text" id="slot-chk-toolbar"></span>
+                    </div>
+                </div>
+            </section>
         </section>
     </section>
 </div>

apps/presentationeditor/main/app/view/Toolbar.js

@@ -134,7 +134,9 @@ define([
                                 {caption: me.textTabFile, action: 'file', extcls: 'canedit', layoutname: 'toolbar-file', haspanel:false, dataHintTitle: 'F'},
                                 {caption: me.textTabHome, action: 'home', extcls: 'canedit', dataHintTitle: 'H'},
                                 {caption: me.textTabInsert, action: 'ins', extcls: 'canedit', dataHintTitle: 'I'},
-                                {caption: me.textTabTransitions, action: 'transit', extcls: 'canedit', dataHintTitle: 'N'}
+                                {caption: me.textTabTransitions, action: 'transit', extcls: 'canedit', dataHintTitle: 'N'},
+                                undefined,
+                                {caption: me.textTabView, action: 'view', extcls: 'canedit', dataHintTitle: 'W'}
                             ]
                         }
                     );
@@ -1993,7 +1995,8 @@ define([
             tipMarkersCheckmark: 'Checkmark bullets',
             tipMarkersFRhombus: 'Filled rhombus bullets',
             tipMarkersDash: 'Dash bullets',
-            tipNone: 'None'
+            tipNone: 'None',
+            textTabView: 'View'
         }
     }()), PE.Views.Toolbar || {}));
 });

apps/presentationeditor/main/app/view/ViewTab.js

@@ -0,0 +1,203 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2020
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+/**
+ *  ViewTab.js
+ *
+ *  Created by Julia Svinareva on 07.12.2021
+ *  Copyright (c) 2021 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'common/main/lib/util/utils',
+    'common/main/lib/component/BaseView',
+    'common/main/lib/component/Layout'
+], function () {
+    'use strict';
+
+    PE.Views.ViewTab = Common.UI.BaseView.extend(_.extend((function(){
+        function setEvents() {
+            var me = this;
+        }
+
+        return {
+            options: {},
+
+            initialize: function (options) {
+                Common.UI.BaseView.prototype.initialize.call(this);
+                this.toolbar = options.toolbar;
+                this.appConfig = options.mode;
+
+                this.lockedControls = [];
+
+                var me = this,
+                    $host = me.toolbar.$el;
+
+                this.cmbZoom = new Common.UI.ComboBox({
+                    el: $host.find('#slot-field-zoom'),
+                    cls: 'input-group-nr',
+                    menuStyle: 'min-width: 55px;',
+                    editable: false,
+                    //lock: [_set.coAuth, _set.lostConnect, _set.editCell],
+                    data: [
+                        { displayValue: "50%", value: 50 },
+                        { displayValue: "75%", value: 75 },
+                        { displayValue: "100%", value: 100 },
+                        { displayValue: "125%", value: 125 },
+                        { displayValue: "150%", value: 150 },
+                        { displayValue: "175%", value: 175 },
+                        { displayValue: "200%", value: 200 }
+                    ],
+                    dataHint    : '1',
+                    dataHintDirection: 'top',
+                    dataHintOffset: 'small'
+                });
+                this.cmbZoom.setValue(100);
+                this.lockedControls.push(this.cmbZoom);
+
+                $host.find('#slot-lbl-zoom').text(this.textZoom);
+
+                this.btnFitToSlide = new Common.UI.Button({
+                    parentEl: $host.find('#slot-btn-fts'),
+                    cls: 'btn-toolbar',
+                    iconCls: 'toolbar__icon btn-ic-zoomtoslide',
+                    caption: this.textFitToSlide,
+                    dataHint: '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'medium'
+                });
+                this.lockedControls.push(this.btnFitToPage);
+
+                this.btnFitToWidth = new Common.UI.Button({
+                    parentEl: $host.find('#slot-btn-ftw'),
+                    cls: 'btn-toolbar',
+                    iconCls: 'toolbar__icon btn-ic-zoomtowidth',
+                    caption: this.textFitToWidth,
+                    dataHint: '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'medium'
+                });
+                this.lockedControls.push(this.btnFitToWidth);
+
+                this.btnInterfaceTheme = new Common.UI.Button({
+                    parentEl: $host.find('#slot-btn-interface-theme'),
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon',
+                    caption: this.textInterfaceTheme,
+                    split: true,
+                    menu: true,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small'
+                });
+                this.lockedControls.push(this.btnInterfaceTheme);
+
+                this.chStatusbar = new Common.UI.CheckBox({
+                    el: $host.findById('#slot-chk-statusbar'),
+                    labelText: this.textStatusBar,
+                    value: true, //!Common.localStorage.getBool(''),
+                    //lock: [_set.lostConnect, _set.coAuth, _set.editCell],
+                    dataHint: '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                });
+                this.lockedControls.push(this.chStatusbar);
+
+                this.chToolbar = new Common.UI.CheckBox({
+                    el: $host.findById('#slot-chk-toolbar'),
+                    labelText: this.textAlwaysShowToolbar,
+                    value: true, //!Common.localStorage.getBool(''),
+                    //lock: [_set.lostConnect, _set.coAuth, _set.editCell],
+                    dataHint    : '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                });
+                this.lockedControls.push(this.chToolbar);
+
+                this.chRulers = new Common.UI.CheckBox({
+                    el: $host.findById('#slot-chk-rulers'),
+                    labelText: this.textRulers,
+                    value: true, //!Common.localStorage.getBool(''),
+                    //lock: [_set.lostConnect, _set.coAuth, _set.editCell],
+                    dataHint: '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                });
+                this.lockedControls.push(this.chRulers);
+
+                this.chNotes = new Common.UI.CheckBox({
+                    el: $host.findById('#slot-chk-notes'),
+                    labelText: this.textNotes,
+                    value: true, //!Common.localStorage.getBool(''),
+                    //lock: [_set.lostConnect, _set.coAuth, _set.editCell],
+                    dataHint: '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                });
+                this.lockedControls.push(this.chNotes);
+            },
+
+            render: function (el) {
+                return this;
+            },
+
+            show: function () {
+                Common.UI.BaseView.prototype.show.call(this);
+                this.fireEvent('show', this);
+            },
+
+            getButtons: function(type) {
+                if (type===undefined)
+                    return this.lockedControls;
+                return [];
+            },
+
+            SetDisabled: function (state) {
+                this.lockedControls && this.lockedControls.forEach(function(button) {
+                    if ( button ) {
+                        button.setDisabled(state);
+                    }
+                }, this);
+            },
+
+            textZoom: 'Zoom',
+            textFitToSlide: 'Fit To Slide',
+            textFitToWidth: 'Fit To Width',
+            textInterfaceTheme: 'Interface theme',
+            textStatusBar: 'Status Bar',
+            textAlwaysShowToolbar: 'Always show toolbar',
+            textRulers: 'Rulers',
+            textNotes: 'Notes'
+        }
+    }()), PE.Views.ViewTab || {}));
+});

apps/presentationeditor/main/app_dev.js

@@ -143,6 +143,7 @@ require([
             'RightMenu',
             'LeftMenu',
             'Main',
+            'ViewTab',
             'Common.Controllers.Fonts',
             'Common.Controllers.History'
             /** coauthoring begin **/
@@ -166,6 +167,7 @@ require([
             'presentationeditor/main/app/controller/RightMenu',
             'presentationeditor/main/app/controller/LeftMenu',
             'presentationeditor/main/app/controller/Main',
+            'presentationeditor/main/app/controller/ViewTab',
             'presentationeditor/main/app/view/FileMenuPanels',
             'presentationeditor/main/app/view/ParagraphSettings',
             'presentationeditor/main/app/view/ImageSettings',

apps/spreadsheeteditor/main/resources/less/toolbar.less

@@ -146,8 +146,3 @@
         margin-right: 2px;
     }
 }
-
-#slot-field-zoom {
-    float: left;
-    min-width: 46px;
-}