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

[PE] Resize toolbar and show More button

Browse source
This commit is contained in:
Julia Radzhabova 2021-12-23 01:24:44 +03:00
parent 9d3f995be1
commit 68c72207c8
8 changed files with 37 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
apps/common/main/lib/component/Mixtbar.js
View file

@ -543,7 +543,7 @@ define([
} }
var last_separator = null, var last_separator = null,
last_group = null, last_group = null,
prevchild = this.$moreBar.children(); prevchild = this.$moreBar.children().filter("[data-hidden-tb-item!=true]");
if (prevchild.length>0) { if (prevchild.length>0) {
prevchild = $(prevchild[0]); prevchild = $(prevchild[0]);
if (prevchild.hasClass('separator')) if (prevchild.hasClass('separator'))
@ -555,7 +555,10 @@ define([
var need_break = false; var need_break = false;
for (var i=items.length-1; i>=0; i--) { for (var i=items.length-1; i>=0; i--) {
var item = $(items[i]); var item = $(items[i]);
if (item.hasClass('group')) { if (!item.is(':visible')) { // move invisible items as is and set special attr
item.attr('data-hidden-tb-item', true);
this.$moreBar.prepend(item);
} else if (item.hasClass('group')) {
_rightedge = $active.get(0).getBoundingClientRect().right; _rightedge = $active.get(0).getBoundingClientRect().right;
if (_rightedge <= _maxright) // stop moving items if (_rightedge <= _maxright) // stop moving items
break; break;
@ -649,7 +652,14 @@ define([
for (var i=0; i<items.length; i++) { for (var i=0; i<items.length; i++) {
var item = $(items[i]); var item = $(items[i]);
_rightedge = $active.get(0).getBoundingClientRect().right; _rightedge = $active.get(0).getBoundingClientRect().right;
if (item.hasClass('group')) { if (!item.is(':visible') && item.attr('data-hidden-tb-item')) { // move invisible items as is
item.removeAttr('data-hidden-tb-item');
more_section.before(item);
if (this.$moreBar.children().filter('.group').length == 0) {
this.hideMoreBtns();
more_section.css('display', "none");
}
} else if (item.hasClass('group')) {
var islast = false; var islast = false;
if (this.$moreBar.children().filter('.group').length == 1) { if (this.$moreBar.children().filter('.group').length == 1) {
_maxright = box_controls_width; // try to move last group _maxright = box_controls_width; // try to move last group

1
apps/presentationeditor/main/app/controller/Toolbar.js
View file

@ -2451,6 +2451,7 @@ define([
if (disable && mask.length>0 || !disable && mask.length==0) return; if (disable && mask.length>0 || !disable && mask.length==0) return;
var toolbar = this.toolbar; var toolbar = this.toolbar;
toolbar.hideMoreBtns();
toolbar.$el.find('.toolbar').toggleClass('masked', disable); toolbar.$el.find('.toolbar').toggleClass('masked', disable);
if (toolbar.btnsAddSlide) // toolbar buttons are rendered if (toolbar.btnsAddSlide) // toolbar buttons are rendered

25
apps/presentationeditor/main/app/template/Toolbar.template
View file

@ -101,7 +101,7 @@
<span class="btn-slot split" id="slot-btn-slidesize"></span> <span class="btn-slot split" id="slot-btn-slidesize"></span>
</div> </div>
</div> </div>
<div class="group flex small" id="slot-field-styles" style="width: 100%; min-width: 145px;" data-group-width="100%"></div> <div class="group flex small field-styles" id="slot-field-styles" style="width: 100%; min-width: 140px;" data-group-width="100%"></div>
</section> </section>
<section class="panel" data-tab="ins"> <section class="panel" data-tab="ins">
<div class="group"> <div class="group">
@ -119,7 +119,7 @@
<span class="btn-slot text x-huge slot-insertimg"></span> <span class="btn-slot text x-huge slot-insertimg"></span>
<span class="btn-slot text x-huge" id="slot-btn-insertchart"></span> <span class="btn-slot text x-huge" id="slot-btn-insertchart"></span>
</div> </div>
<div class="group flex small" id="slot-combo-insertshape"></div> <div class="group small" id="slot-combo-insertshape"></div>
<div class="separator long"></div> <div class="separator long"></div>
<div class="group"> <div class="group">
<span class="btn-slot text x-huge slot-comment"></span> <span class="btn-slot text x-huge slot-comment"></span>
@ -143,7 +143,7 @@
</div> </div>
</section> </section>
<section id="transitions-panel" class="panel" data-tab="transit"> <section id="transitions-panel" class="panel" data-tab="transit">
<div class="group flex small" id="transit-field-effects" style="width: 900px; max-width: 900px; min-width: 140px;" data-group-width="900px"></div> <div class="group flex small" id="transit-field-effects" style="width: 900px; max-width: 900px; min-width: 120px;" data-group-width="900px"></div>
<div class="group small"> <div class="group small">
<span class="btn-slot text x-huge" id="transit-button-parameters"></span> <span class="btn-slot text x-huge" id="transit-button-parameters"></span>
@ -219,8 +219,7 @@
</div> </div>
</section> </section>
<section id="animation-panel" class="panel" data-tab="animate"> <section id="animation-panel" class="panel" data-tab="animate">
<div class="group flex small" id="animation-field-effects" style="width: 700px; max-width: 700px; min-width: 140px;" data-group-width="700px"></div> <div class="group flex small" id="animation-field-effects" style="width: 700px; max-width: 700px; min-width: 210px;" data-group-width="700px"></div>
<div class="group small"> <div class="group small">
<span class="btn-slot text x-huge" id="animation-button-parameters"></span> <span class="btn-slot text x-huge" id="animation-button-parameters"></span>
</div> </div>
@ -238,28 +237,28 @@
<div class="separator long"></div> <div class="separator long"></div>
<div class="group small"> <div class="group small">
<div class="elset font-normal"> <div class="elset font-normal">
<label id="animation-label-start"></label> <label id="animation-label-start" style="margin-right: 10px;"></label>
<div class="btn-slot" style="width: 96px; " id="animation-start"></div> <div class="btn-slot" style="width: 96px; " id="animation-start"></div>
</div> </div>
<div class="elset font-normal"> <div class="elset font-normal">
<label id="animation-delay"></label> <label id="animation-delay" style="margin-right: 10px;"></label>
<span id="animation-spin-delay" class="btn-slot text spinner" ></span> <span id="animation-spin-delay" class="btn-slot text spinner" ></span>
</div> </div>
</div> </div>
<div class="separator long"></div> <div class="separator long"></div>
<div class="group small"> <div class="group small">
<div class="elset font-normal"> <div class="elset font-normal">
<label id="animation-duration"></label> <label id="animation-duration" style="margin-right: 10px;"></label>
<span id="animation-spin-duration" class="btn-slot text spinner" ></span> <span id="animation-spin-duration" class="btn-slot text spinner" ></span>
</div> </div>
<div class="elset font-normal"> <div class="elset font-normal">
<div class="btn-slot" style="width: 82px;" id="animation-trigger"></div> <div class="btn-slot text" id="animation-trigger"></div>
</div> </div>
</div> </div>
<div class="separator long"></div> <div class="separator long"></div>
<div class="group small"> <div class="group small">
<div class="elset font-normal"> <div class="elset font-normal">
<label id="animation-repeat"></label> <label id="animation-repeat" style="margin-right: 10px;"></label>
<span id="animation-spin-repeat" class="btn-slot text spinner" ></span> <span id="animation-spin-repeat" class="btn-slot text spinner" ></span>
</div> </div>
<div class="elset font-normal"> <div class="elset font-normal">
@ -267,12 +266,12 @@
</div> </div>
</div> </div>
<div class="separator long"></div> <div class="separator long"></div>
<div class="group small" style="width: 120px; min-width: 100px;"> <div class="group small">
<div class="elset"> <div class="elset">
<div class="btn-slot" id="animation-moveearlier"></div> <div class="btn-slot text" id="animation-moveearlier"></div>
</div> </div>
<div class="elset font-normal"> <div class="elset font-normal">
<div class="btn-slot" id="animation-movelater"></div> <div class="btn-slot text" id="animation-movelater"></div>
</div> </div>
</div> </div>
</section> </section>

9
apps/presentationeditor/main/app/view/Animation.js
View file

@ -169,6 +169,7 @@ define([
cls: 'combo-transitions combo-animation', cls: 'combo-transitions combo-animation',
itemWidth: itemWidth, itemWidth: itemWidth,
itemHeight: itemHeight, itemHeight: itemHeight,
style: 'min-width:200px;',
itemTemplate: _.template([ itemTemplate: _.template([
'<div class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">', '<div class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">',
'<div class = "icon toolbar__icon <%= iconCls %>"></div>', '<div class = "icon toolbar__icon <%= iconCls %>"></div>',
@ -259,7 +260,7 @@ define([
this.numDuration = new Common.UI.MetricSpinner({ this.numDuration = new Common.UI.MetricSpinner({
el: this.$el.find('#animation-spin-duration'), el: this.$el.find('#animation-spin-duration'),
step: 1, step: 1,
width: 52, width: 55,
value: '', value: '',
defaultUnit: this.txtSec, defaultUnit: this.txtSec,
maxValue: 300, maxValue: 300,
@ -304,7 +305,7 @@ define([
this.numDelay = new Common.UI.MetricSpinner({ this.numDelay = new Common.UI.MetricSpinner({
el: this.$el.find('#animation-spin-delay'), el: this.$el.find('#animation-spin-delay'),
step: 1, step: 1,
width: 52, width: 55,
value: '', value: '',
defaultUnit: this.txtSec, defaultUnit: this.txtSec,
maxValue: 300, maxValue: 300,
@ -318,7 +319,7 @@ define([
this.cmbStart = new Common.UI.ComboBox({ this.cmbStart = new Common.UI.ComboBox({
cls: 'input-group-nr', cls: 'input-group-nr',
menuStyle: 'width: 150px;', menuStyle: 'min-width: 100%;',
lock: [_set.slideDeleted, _set.noSlides, _set.noGraphic, _set.noAnimation], lock: [_set.slideDeleted, _set.noSlides, _set.noGraphic, _set.noAnimation],
data: [ data: [
{value: AscFormat.NODE_TYPE_CLICKEFFECT, displayValue: this.textStartOnClick}, {value: AscFormat.NODE_TYPE_CLICKEFFECT, displayValue: this.textStartOnClick},
@ -343,7 +344,7 @@ define([
this.numRepeat = new Common.UI.MetricSpinner({ this.numRepeat = new Common.UI.MetricSpinner({
el: this.$el.find('#animation-spin-repeat'), el: this.$el.find('#animation-spin-repeat'),
step: 1, step: 1,
width: 88, width: 55,
value: '', value: '',
maxValue: 1000, maxValue: 1000,
minValue: 0, minValue: 0,

2
apps/presentationeditor/main/app/view/Toolbar.js
View file

@ -1023,6 +1023,7 @@ define([
itemWidth: 88, itemWidth: 88,
enableKeyEvents: true, enableKeyEvents: true,
itemHeight: 40, itemHeight: 40,
style: 'min-width:130px;',
lock: [_set.themeLock, _set.lostConnect, _set.noSlides], lock: [_set.themeLock, _set.lostConnect, _set.noSlides],
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
@ -1076,6 +1077,7 @@ define([
itemHeight: 20, itemHeight: 20,
menuMaxHeight: 640, menuMaxHeight: 640,
menuWidth: 362, menuWidth: 362,
style: 'width: 140px;',
enableKeyEvents: true, enableKeyEvents: true,
lock: [PE.enumLock.slideDeleted, PE.enumLock.lostConnect, PE.enumLock.noSlides, PE.enumLock.disableOnStart], lock: [PE.enumLock.slideDeleted, PE.enumLock.lostConnect, PE.enumLock.noSlides, PE.enumLock.disableOnStart],
dataHint: '1', dataHint: '1',

5
apps/presentationeditor/main/app/view/Transitions.js
View file

@ -142,6 +142,7 @@ define([
cls: 'combo-transitions', cls: 'combo-transitions',
itemWidth: itemWidth, itemWidth: itemWidth,
itemHeight: itemHeight, itemHeight: itemHeight,
style: 'min-width:110px;',
itemTemplate: _.template([ itemTemplate: _.template([
'<div class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">', '<div class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + itemWidth + 'px;height: ' + itemHeight + 'px;">',
'<div class = "icon toolbar__icon <%= imageUrl %>"></div>', '<div class = "icon toolbar__icon <%= imageUrl %>"></div>',
@ -221,7 +222,7 @@ define([
this.numDuration = new Common.UI.MetricSpinner({ this.numDuration = new Common.UI.MetricSpinner({
el: this.$el.find('#transit-spin-duration'), el: this.$el.find('#transit-spin-duration'),
step: 1, step: 1,
width: 50, width: 55,
value: '', value: '',
defaultUnit: this.txtSec, defaultUnit: this.txtSec,
maxValue: 300, maxValue: 300,
@ -236,7 +237,7 @@ define([
this.numDelay = new Common.UI.MetricSpinner({ this.numDelay = new Common.UI.MetricSpinner({
el: this.$el.find('#transit-spin-delay'), el: this.$el.find('#transit-spin-delay'),
step: 1, step: 1,
width: 60, width: 55,
value: '', value: '',
defaultUnit: this.txtSec, defaultUnit: this.txtSec,
maxValue: 300, maxValue: 300,

1
apps/presentationeditor/main/locale/en.json
View file

@ -239,6 +239,7 @@
"Common.Translation.warnFileLocked": "The file is being edited in another app. You can continue editing and save it as a copy.", "Common.Translation.warnFileLocked": "The file is being edited in another app. You can continue editing and save it as a copy.",
"Common.Translation.warnFileLockedBtnEdit": "Create a copy", "Common.Translation.warnFileLockedBtnEdit": "Create a copy",
"Common.Translation.warnFileLockedBtnView": "Open for viewing", "Common.Translation.warnFileLockedBtnView": "Open for viewing",
"Common.Translation.textMoreButton": "More",
"Common.UI.ButtonColored.textAutoColor": "Automatic", "Common.UI.ButtonColored.textAutoColor": "Automatic",
"Common.UI.ButtonColored.textNewColor": "Add New Custom Color", "Common.UI.ButtonColored.textNewColor": "Add New Custom Color",
"Common.UI.ComboBorderSize.txtNoBorders": "No borders", "Common.UI.ComboBorderSize.txtNoBorders": "No borders",

23
apps/presentationeditor/main/resources/less/animation.less
View file

@ -1,26 +1,3 @@
#animation-panel {
label {
margin-right: 10px;
}
}
.a-table{
display: table;
width: 100%;
}
.a-tr{
display: table-row;
height: 20px;
border-top: 2px solid transparent;
&.bottom {
border-top: 4px solid transparent;
}
.a-td
{
display: table-cell;
}
}
.combo-animation { .combo-animation {
.menu-picker-container .dataview { .menu-picker-container .dataview {
padding: 10px 0 0 2px; padding: 10px 0 0 2px;