Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE] Add Page Thumbnails panel in left menu

Browse source
This commit is contained in:
JuliaSvinareva 2021-08-24 14:34:10 +03:00
parent 5ffb7e8fa0
commit 0f76f5833a
9 changed files with 225 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/documenteditor/main/app.js
View file

@ -153,6 +153,7 @@ require([
'Links',
'FormsTab',
'Navigation',
'PageThumbnails',
'RightMenu',
'LeftMenu',
'Main',
@ -180,6 +181,7 @@ require([
'documenteditor/main/app/controller/FormsTab',
'documenteditor/main/app/controller/Links',
'documenteditor/main/app/controller/Navigation',
'documenteditor/main/app/controller/PageThumbnails',
'documenteditor/main/app/controller/RightMenu',
'documenteditor/main/app/controller/LeftMenu',
'documenteditor/main/app/controller/Main',

2
apps/documenteditor/main/app/controller/LeftMenu.js
View file

@ -207,6 +207,8 @@ define([
this.leftMenu.setOptionsPanel('navigation', this.getApplication().getController('Navigation').getView('Navigation'));
this.leftMenu.setOptionsPanel('thumbnails', this.getApplication().getController('PageThumbnails').getView('PageThumbnails'));
(this.mode.trialMode || this.mode.isBeta) && this.leftMenu.setDeveloperMode(this.mode.trialMode, this.mode.isBeta, this.mode.buildVersion);
Common.util.Shortcuts.resumeEvents();

81
apps/documenteditor/main/app/controller/PageThumbnails.js Normal file
View file

@ -0,0 +1,81 @@
/*
*
* (c) Copyright Ascensio System SIA 2010-2019
*
* 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
*
*/
/**
* User: Julia.Svinareva
* Date: 23.08.2021
*/
define([
'core',
/*'documenteditor/main/app/collection/Thumbnails',*/
'documenteditor/main/app/view/PageThumbnails'
], function () {
'use strict';
DE.Controllers.PageThumbnails = Backbone.Controller.extend(_.extend({
models: [],
/*collections: [
'Thumbnails'
],*/
views: [
'PageThumbnails'
],
initialize: function() {
},
events: function() {
},
onLaunch: function() {
this.panelThumbnails = this.createView('PageThumbnails', /*{
storeThumbnails: this.getApplication().getCollection('Thumbnails')
}*/);
this.panelThumbnails.on('render:after', _.bind(this.onAfterRender, this));
},
setApi: function(api) {
this.api = api;
return this;
},
setMode: function(mode) {
this.mode = mode;
return this;
},
onAfterRender: function(panelThumbnails) {
},
}, DE.Controllers.PageThumbnails || {}));
});

2
apps/documenteditor/main/app/template/LeftMenu.template
View file

@ -9,6 +9,7 @@
<button id="left-btn-navigation" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-navigation">&nbsp;</i></button>
<button id="left-btn-support" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-support">&nbsp;</i></button>
<button id="left-btn-about" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-about">&nbsp;</i></button>
<button id="left-btn-thumbnails" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-thumbnails">&nbsp;</i></button>
</div>
<div class="left-panel" style="">
<!-- /** coauthoring begin **/ -->
@ -17,5 +18,6 @@
<!-- /** coauthoring end **/ -->
<div id="left-panel-navigation" class="" style="display: none; height: 100%;"></div>
<div id="left-panel-plugins" class="" style="display: none; height: 100%;"></div>
<div id="left-panel-thumbnails" class="" style="display: none; height: 100%;"></div>
</div>
</div>

23
apps/documenteditor/main/app/view/LeftMenu.js
View file

@ -75,6 +75,7 @@ define([
/** coauthoring end **/
'click #left-btn-plugins': _.bind(this.onCoauthOptions, this),
'click #left-btn-navigation': _.bind(this.onCoauthOptions, this),
'click #left-btn-thumbnails': _.bind(this.onCoauthOptions, this),
'click #left-btn-support': function() {
var config = this.mode.customization;
config && !!config.feedback && !!config.feedback.url ?
@ -166,6 +167,16 @@ define([
this.menuFile = new DE.Views.FileMenu();
this.btnAbout.panel = new Common.Views.About({el: '#about-menu-panel', appName: 'Document Editor'});
this.btnThumbnails = new Common.UI.Button({
el: $markup.elementById('#left-btn-thumbnails'),
hint: this.tipPageThumbnails,
enableToggle: true,
disabled: true,
toggleGroup: 'leftMenuGroup'
});
this.btnThumbnails.on('click', this.onBtnMenuClick.bind(this));
this.$el.html($markup);
return this;
@ -238,6 +249,13 @@ define([
} else
this.panelNavigation['hide']();
}
if (this.panelThumbnails) {
if (this.btnThumbnails.pressed) {
this.panelThumbnails.show();
} else {
this.panelThumbnails.hide();
}
}
/** coauthoring end **/
// if (this.mode.canPlugins && this.panelPlugins) {
// if (this.btnPlugins.pressed) {
@ -262,6 +280,9 @@ define([
} else
if (name == 'navigation' && !this.panelNavigation) {
this.panelNavigation = panel.render('#left-panel-navigation');
} else
if (name == 'thumbnails') {
this.panelThumbnails = panel.render('#left-panel-thumbnails');
}
},
@ -328,6 +349,7 @@ define([
/** coauthoring end **/
this.btnPlugins.setDisabled(false);
this.btnNavigation.setDisabled(false);
this.btnThumbnails.setDisabled(false);
},
showMenu: function(menu, opts) {
@ -462,6 +484,7 @@ define([
tipSupport : 'Feedback & Support',
tipSearch : 'Search',
tipPlugins : 'Plugins',
tipPageThumbnails: 'Page Thumbnails',
txtDeveloper: 'DEVELOPER MODE',
txtTrial: 'TRIAL MODE',
txtTrialDev: 'Trial Developer Mode',

90
apps/documenteditor/main/app/view/PageThumbnails.js Normal file
View file

@ -0,0 +1,90 @@
/*
*
* (c) Copyright Ascensio System SIA 2010-2019
*
* 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
*
*/
/**
* User: Julia.Svinareva
* Date: 23.08.2021
*/
define([
'common/main/lib/util/utils',
'common/main/lib/component/BaseView',
'common/main/lib/component/Layout',
'common/main/lib/component/TreeView'
], function (template) {
'use strict';
DE.Views.PageThumbnails = Common.UI.BaseView.extend(_.extend({
el: '#left-panel-thumbnails',
storeThumbnails: undefined,
template: _.template([
'<div id="thumbnails-box" class="layout-ct vbox">',
'<div id="thumbnails-header"><label><%= scope.textPageThumbnails %></label></div>',
'<div id="thumbnails-list" class="">',
'</div>',
'</div>'
].join('')),
initialize: function(options) {
_.extend(this, options);
Common.UI.BaseView.prototype.initialize.call(this, arguments);
},
render: function(el) {
el = el || this.el;
$(el).html(this.template({scope: this}));
this.$el = $(el);
this.trigger('render:after', this);
return this;
},
show: function () {
Common.UI.BaseView.prototype.show.call(this,arguments);
this.fireEvent('show', this );
},
hide: function () {
Common.UI.BaseView.prototype.hide.call(this,arguments);
this.fireEvent('hide', this );
},
ChangeSettings: function(props) {
},
textPageThumbnails: 'Page Thumbnails'
}, DE.Views.PageThumbnails || {}));
});

2
apps/documenteditor/main/app_dev.js
View file

@ -143,6 +143,7 @@ require([
'Links',
'FormsTab',
'Navigation',
'PageThumbnails',
'RightMenu',
'LeftMenu',
'Main',
@ -169,6 +170,7 @@ require([
'documenteditor/main/app/controller/Links',
'documenteditor/main/app/controller/FormsTab',
'documenteditor/main/app/controller/Navigation',
'documenteditor/main/app/controller/PageThumbnails',
'documenteditor/main/app/controller/Statusbar',
'documenteditor/main/app/controller/RightMenu',
'documenteditor/main/app/controller/LeftMenu',

1
apps/documenteditor/main/resources/less/app.less
View file

@ -136,6 +136,7 @@
@import "rightmenu.less";
@import "advanced-settings.less";
@import "navigation.less";
@import "thumbnails.less";
@import "sprites/iconssmall@1x";
@import "sprites/iconsbig@1x";

22
apps/documenteditor/main/resources/less/thumbnails.less Normal file
View file

@ -0,0 +1,22 @@
#thumbnails-box {
display: table;
position: relative;
border-collapse: collapse;
#thumbnails-header {
height: 45px;
left: 0;
top: 0;
right: 0;
padding: 12px;
overflow: hidden;
border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-bottom: @scaled-one-px-value solid @border-toolbar;
label {
font-size: 12px;
font-weight: bold;
margin-top: 2px;
}
}
}