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

[DE] Add settings and close buttons in page thumbnails

Browse source
This commit is contained in:
JuliaSvinareva 2021-08-25 22:24:49 +03:00
parent 0f76f5833a
commit 162864b26b
3 changed files with 117 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -772,12 +772,17 @@ define([
onMenuChange: function (value) {
if ('hide' === value) {
if (this.leftMenu.btnComments.isActive() && this.api) {
this.leftMenu.btnComments.toggle(false);
this.leftMenu.onBtnMenuClick(this.leftMenu.btnComments);
if (this.api) {
if (this.leftMenu.btnComments.isActive()) {
this.leftMenu.btnComments.toggle(false);
this.leftMenu.onBtnMenuClick(this.leftMenu.btnComments);
// focus to sdk
this.api.asc_enableKeyEvents(true);
// focus to sdk
this.api.asc_enableKeyEvents(true);
} else if (this.leftMenu.btnThumbnails.isActive()) {
this.leftMenu.btnThumbnails.toggle(false);
this.leftMenu.onBtnMenuClick(this.leftMenu.btnThumbnails);
}
}
}
},

76
apps/documenteditor/main/app/view/PageThumbnails.js
View file

@ -49,9 +49,13 @@ define([
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 id="thumbnails-header">',
'<label><%= scope.textPageThumbnails %></label>',
'<div id="thumbnails-btn-close"></div>',
'<div id="thumbnails-btn-settings"></div>',
'</div>',
'<div id="thumbnails-list">',
'</div>',
'</div>'
].join('')),
@ -61,12 +65,62 @@ define([
},
render: function(el) {
el = el || this.el;
$(el).html(this.template({scope: this}));
this.$el = $(el);
if (!this.rendered) {
el = el || this.el;
$(el).html(this.template({scope: this}));
this.$el = $(el);
this.buttonClose = new Common.UI.Button({
parentEl: $('#thumbnails-btn-close', this.$el),
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-close',
hint: this.textClosePanel
});
this.buttonClose.on('click', _.bind(this.onClickClosePanel, this));
var sizeSettingTemplate = _.template('<div id="thumbnails-size">' +
'<label><%= caption %></label>' +
'<div class="thumbnails-sld-box">' +
'<span class="menu-item-icon menu__icon thumbnail-small btn-zoomdown"></span>' +
'<div id="sld-thumbnails-size"></div>' +
'<span class="menu-item-icon menu__icon thumbnail-big btn-zoomup"></span>' +
'</div>',
'</div>');
this.buttonSettings = new Common.UI.Button({
parentEl: $('#thumbnails-btn-settings', this.$el),
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-settings',
hint: this.textThumbnailsSettings,
menu: new Common.UI.Menu({
menuAlign: 'tr-br',
style: 'min-width: 200px;',
items: [
{
caption: this.textThumbnailsSize,
template: sizeSettingTemplate,
toggleGroup: 'menuThumbnails'
},
{caption: '--'},
{
caption: this.textHighlightVisiblePart,
checkable: true,
toggleGroup: 'menuThumbnails'
}
]
})
});
}
this.sldrthumbnailsSize = new Common.UI.SingleSlider({
el: $('#sld-thumbnails-size'),
width: 120,
minValue: 0,
maxValue: 100,
value: 50
});
this.rendered = true;
this.trigger('render:after', this);
return this;
},
@ -84,7 +138,15 @@ define([
ChangeSettings: function(props) {
},
textPageThumbnails: 'Page Thumbnails'
onClickClosePanel: function() {
Common.NotificationCenter.trigger('leftmenu:change', 'hide');
},
textPageThumbnails: 'Page Thumbnails',
textClosePanel: 'Close page thumbnails',
textThumbnailsSettings: 'Thumbnails settings',
textThumbnailsSize: 'Thumbnails size',
textHighlightVisiblePart: 'Highlight visible part of page'
}, DE.Views.PageThumbnails || {}));
});

38
apps/documenteditor/main/resources/less/thumbnails.less
View file

@ -3,7 +3,13 @@
position: relative;
border-collapse: collapse;
#thumbnails-list {
height: 100%;
overflow: hidden;
}
#thumbnails-header {
position: absolute;
height: 45px;
left: 0;
top: 0;
@ -18,5 +24,37 @@
font-weight: bold;
margin-top: 2px;
}
#thumbnails-btn-close {
float:right;
margin-left: 4px;
}
#thumbnails-btn-settings {
float:right;
}
#thumbnails-size {
label {
font-size: 11px;
font-weight: normal;
margin: 0;
padding-left: 8px;
line-height: 25px;
}
.thumbnails-sld-box {
height: 25px;
padding-left: 8px;
.menu-item-icon {
position: relative;
float: none;
margin: 0;
}
#sld-thumbnails-size {
display: inline-block;
margin: 0 10px;
}
}
}
}
}