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

[DE] added scroll buttons for the short tabs panel

Browse source
This commit is contained in:
Maxim Kadushkin 2017-02-20 17:51:33 +03:00
parent d9858934d0
commit 62587692c6
4 changed files with 2271 additions and 1805 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/documenteditor/main/app/controller/Viewport.js
View file

@ -133,6 +133,7 @@ define([
onWindowResize: function(e) {
this.onLayoutChanged('window');
Common.NotificationCenter.trigger('window:resize');
}
});
});

6
apps/documenteditor/main/app/template/Toolbar.template
View file

@ -2,7 +2,7 @@
<div class="box-tabs">
<div class="extra left"></div>
<section class="tabs">
<a href="#" class="link">
<a href="#" class="scroll left">
<i class="icon">&lt;</i>
</a>
<ul>
@ -11,11 +11,11 @@
<a href="#" data-tab="<%= tabs[i].action %>" title="<%= tabs[i].caption %>"><%= tabs[i].caption %></a>
</li>
<% } %>
<div class="marker"></div>
</ul>
<a href="#" class="link">
<a href="#" class="scroll right">
<i class="icon">&gt;</i>
</a>
<div class="marker"></div>
</section>
<div class="extra right">SomeDocument.docx</div>
</div>

608
apps/documenteditor/main/app/view/Toolbar.js
View file

@ -60,7 +60,52 @@ define([
], function ($, _, Backbone, template) {
'use strict';
DE.Views.Toolbar = Backbone.View.extend(_.extend({
DE.Views.Toolbar = Backbone.View.extend(_.extend((function(){
var $tabs, $boxTabs;
var $panels, $marker, $scrollL;
var lastPanel;
function hasTabInvisible() {
var _left_bound_ = $boxTabs.offset().left,
_right_bound_ = _left_bound_ + $boxTabs.width();
var tab = $tabs.first().get(0);
var rect = tab.getBoundingClientRect();
if (!(rect.left < _left_bound_)) {
tab = $tabs.last().get(0);
rect = tab.getBoundingClientRect();
if (!(rect.right > _right_bound_))
return false;
}
return true;
}
function isTabActive(tab) {
var t = $tabs.filter('.active').find('> a');
return t.length && t.data('tab') == tab;
}
function onResize(e) {
if ( hasTabInvisible() ){
if ( !$boxTabs.parent().hasClass('short') )
$boxTabs.parent().addClass('short');
} else
if ( $boxTabs.parent().hasClass('short') ) {
$boxTabs.parent().removeClass('short');
}
}
function onScrollTabs(opts, e) {
var sv = $boxTabs.scrollLeft();
if ( sv || opts == 'right') {
$boxTabs.animate({scrollLeft: opts == 'left' ? sv - 100 : sv + 100}, 200);
}
}
return {
el: '#toolbar',
// Compile our stats template
@ -582,9 +627,28 @@ define([
menu: new Common.UI.Menu({
cls: 'ppm-toolbar',
items: [
{ caption: this.textNone, iconCls: 'mnu-dropcap-none', checkable: true, toggleGroup: 'menuDropCap', value: Asc.c_oAscDropCap.None, checked: true },
{ caption: this.textInText, iconCls: 'mnu-dropcap-intext', checkable: true, toggleGroup: 'menuDropCap', value: Asc.c_oAscDropCap.Drop },
{ caption: this.textInMargin, iconCls: 'mnu-dropcap-inmargin', checkable: true, toggleGroup: 'menuDropCap', value: Asc.c_oAscDropCap.Margin },
{
caption: this.textNone,
iconCls: 'mnu-dropcap-none',
checkable: true,
toggleGroup: 'menuDropCap',
value: Asc.c_oAscDropCap.None,
checked: true
},
{
caption: this.textInText,
iconCls: 'mnu-dropcap-intext',
checkable: true,
toggleGroup: 'menuDropCap',
value: Asc.c_oAscDropCap.Drop
},
{
caption: this.textInMargin,
iconCls: 'mnu-dropcap-inmargin',
checkable: true,
toggleGroup: 'menuDropCap',
value: Asc.c_oAscDropCap.Margin
},
{caption: '--'},
this.mnuDropCapAdvanced = new Common.UI.MenuItem({caption: this.mniEditDropCap})
]
@ -599,11 +663,41 @@ define([
menu: new Common.UI.Menu({
cls: 'ppm-toolbar',
items: [
{ caption: this.textColumnsOne, iconCls: 'mnu-columns-one', checkable: true, toggleGroup: 'menuColumns', value: 0 },
{ caption: this.textColumnsTwo, iconCls: 'mnu-columns-two', checkable: true, toggleGroup: 'menuColumns', value: 1 },
{ caption: this.textColumnsThree, iconCls: 'mnu-columns-three', checkable: true, toggleGroup: 'menuColumns', value: 2 },
{ caption: this.textColumnsLeft, iconCls: 'mnu-columns-left', checkable: true, toggleGroup: 'menuColumns', value: 3 },
{ caption: this.textColumnsRight, iconCls: 'mnu-columns-right', checkable: true, toggleGroup: 'menuColumns', value: 4 }
{
caption: this.textColumnsOne,
iconCls: 'mnu-columns-one',
checkable: true,
toggleGroup: 'menuColumns',
value: 0
},
{
caption: this.textColumnsTwo,
iconCls: 'mnu-columns-two',
checkable: true,
toggleGroup: 'menuColumns',
value: 1
},
{
caption: this.textColumnsThree,
iconCls: 'mnu-columns-three',
checkable: true,
toggleGroup: 'menuColumns',
value: 2
},
{
caption: this.textColumnsLeft,
iconCls: 'mnu-columns-left',
checkable: true,
toggleGroup: 'menuColumns',
value: 3
},
{
caption: this.textColumnsRight,
iconCls: 'mnu-columns-right',
checkable: true,
toggleGroup: 'menuColumns',
value: 4
}
]
})
});
@ -616,8 +710,20 @@ define([
menu: new Common.UI.Menu({
cls: 'ppm-toolbar',
items: [
{ caption: this.textPortrait, iconCls: 'mnu-orient-portrait', checkable: true, toggleGroup: 'menuOrient', value: true },
{ caption: this.textLandscape, iconCls: 'mnu-orient-landscape', checkable: true, toggleGroup: 'menuOrient', value: false }
{
caption: this.textPortrait,
iconCls: 'mnu-orient-portrait',
checkable: true,
toggleGroup: 'menuOrient',
value: true
},
{
caption: this.textLandscape,
iconCls: 'mnu-orient-landscape',
checkable: true,
toggleGroup: 'menuOrient',
value: false
}
]
})
});
@ -638,12 +744,47 @@ define([
iconCls: 'btn-pagemargins',
menu: new Common.UI.Menu({
items: [
{ caption: this.textMarginsLast, checkable: true, template: pageMarginsTemplate, toggleGroup: 'menuPageMargins'}, //top,left,bottom,right
{ caption: this.textMarginsNormal, checkable: true, template: pageMarginsTemplate, toggleGroup: 'menuPageMargins', value: [20, 30, 20, 15] },
{ caption: this.textMarginsUsNormal, checkable: true, template: pageMarginsTemplate, toggleGroup: 'menuPageMargins', value: [25.4, 25.4, 25.4, 25.4] },
{ caption: this.textMarginsNarrow, checkable: true, template: pageMarginsTemplate, toggleGroup: 'menuPageMargins', value: [12.7, 12.7, 12.7, 12.7] },
{ caption: this.textMarginsModerate,checkable: true, template: pageMarginsTemplate, toggleGroup: 'menuPageMargins', value: [25.4, 19.1, 25.4, 19.1] },
{ caption: this.textMarginsWide, checkable: true, template: pageMarginsTemplate, toggleGroup: 'menuPageMargins', value: [25.4, 50.8, 25.4, 50.8] },
{
caption: this.textMarginsLast,
checkable: true,
template: pageMarginsTemplate,
toggleGroup: 'menuPageMargins'
}, //top,left,bottom,right
{
caption: this.textMarginsNormal,
checkable: true,
template: pageMarginsTemplate,
toggleGroup: 'menuPageMargins',
value: [20, 30, 20, 15]
},
{
caption: this.textMarginsUsNormal,
checkable: true,
template: pageMarginsTemplate,
toggleGroup: 'menuPageMargins',
value: [25.4, 25.4, 25.4, 25.4]
},
{
caption: this.textMarginsNarrow,
checkable: true,
template: pageMarginsTemplate,
toggleGroup: 'menuPageMargins',
value: [12.7, 12.7, 12.7, 12.7]
},
{
caption: this.textMarginsModerate,
checkable: true,
template: pageMarginsTemplate,
toggleGroup: 'menuPageMargins',
value: [25.4, 19.1, 25.4, 19.1]
},
{
caption: this.textMarginsWide,
checkable: true,
template: pageMarginsTemplate,
toggleGroup: 'menuPageMargins',
value: [25.4, 50.8, 25.4, 50.8]
},
{caption: '--'},
{caption: this.textPageMarginsCustom, value: 'advanced'}
]
@ -661,19 +802,111 @@ define([
iconCls: 'btn-pagesize',
menu: new Common.UI.Menu({
items: [
{ caption: 'US Letter', subtitle: '21,59cm x 27,94cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [215.9, 279.4] },
{ caption: 'US Legal', subtitle: '21,59cm x 35,56cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [215.9, 355.6] },
{ caption: 'A4', subtitle: '21cm x 29,7cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [210, 297], checked: true },
{ caption: 'A5', subtitle: '14,81cm x 20,99cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [148.1, 209.9] },
{ caption: 'B5', subtitle: '17,6cm x 25,01cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [176, 250.1] },
{ caption: 'Envelope #10', subtitle: '10,48cm x 24,13cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [104.8, 241.3] },
{ caption: 'Envelope DL', subtitle: '11,01cm x 22,01cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [110.1, 220.1] },
{ caption: 'Tabloid', subtitle: '27,94cm x 43,17cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [279.4, 431.7] },
{ caption: 'A3', subtitle: '29,7cm x 42,01cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [297, 420.1] },
{ caption: 'Tabloid Oversize', subtitle: '30,48cm x 45,71cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [304.8, 457.1] },
{ caption: 'ROC 16K', subtitle: '19,68cm x 27,3cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [196.8, 273] },
{ caption: 'Envelope Choukei 3', subtitle: '11,99cm x 23,49cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [119.9, 234.9] },
{ caption: 'Super B/A3', subtitle: '33,02cm x 48,25cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [330.2, 482.5] },
{
caption: 'US Letter',
subtitle: '21,59cm x 27,94cm',
template: pageSizeTemplate,
checkable: true,
toggleGroup: 'menuPageSize',
value: [215.9, 279.4]
},
{
caption: 'US Legal',
subtitle: '21,59cm x 35,56cm',
template: pageSizeTemplate,
checkable: true,
toggleGroup: 'menuPageSize',
value: [215.9, 355.6]
},
{
caption: 'A4',
subtitle: '21cm x 29,7cm',
template: pageSizeTemplate,
checkable: true,
toggleGroup: 'menuPageSize',
value: [210, 297],
checked: true
},
{
caption: 'A5',
subtitle: '14,81cm x 20,99cm',
template: pageSizeTemplate,
checkable: true,
toggleGroup: 'menuPageSize',
value: [148.1, 209.9]
},
{
caption: 'B5',
subtitle: '17,6cm x 25,01cm',
template: pageSizeTemplate,
checkable: true,
toggleGroup: 'menuPageSize',
value: [176, 250.1]
},
{
caption: 'Envelope #10',
subtitle: '10,48cm x 24,13cm',
template: pageSizeTemplate,
checkable: true,
toggleGroup: 'menuPageSize',
value: [104.8, 241.3]
},
{
caption: 'Envelope DL',
subtitle: '11,01cm x 22,01cm',
template: pageSizeTemplate,
checkable: true,
toggleGroup: 'menuPageSize',
value: [110.1, 220.1]
},
{
caption: 'Tabloid',
subtitle: '27,94cm x 43,17cm',
template: pageSizeTemplate,
checkable: true,
toggleGroup: 'menuPageSize',
value: [279.4, 431.7]
},
{
caption: 'A3',
subtitle: '29,7cm x 42,01cm',
template: pageSizeTemplate,
checkable: true,
toggleGroup: 'menuPageSize',
value: [297, 420.1]
},
{
caption: 'Tabloid Oversize',
subtitle: '30,48cm x 45,71cm',
template: pageSizeTemplate,
checkable: true,
toggleGroup: 'menuPageSize',
value: [304.8, 457.1]
},
{
caption: 'ROC 16K',
subtitle: '19,68cm x 27,3cm',
template: pageSizeTemplate,
checkable: true,
toggleGroup: 'menuPageSize',
value: [196.8, 273]
},
{
caption: 'Envelope Choukei 3',
subtitle: '11,99cm x 23,49cm',
template: pageSizeTemplate,
checkable: true,
toggleGroup: 'menuPageSize',
value: [119.9, 234.9]
},
{
caption: 'Super B/A3',
subtitle: '33,02cm x 48,25cm',
template: pageSizeTemplate,
checkable: true,
toggleGroup: 'menuPageSize',
value: [330.2, 482.5]
},
{caption: '--'},
{caption: this.textPageSizeCustom, value: 'advanced'}
]
@ -759,8 +992,12 @@ define([
this.btnFitPage = {
conf: {checked: false},
setChecked: function(val) { this.conf.checked = val;},
isChecked: function () { return this.conf.checked; }
setChecked: function (val) {
this.conf.checked = val;
},
isChecked: function () {
return this.conf.checked;
}
};
this.btnFitWidth = clone(this.btnFitPage);
this.mnuZoom = {options: {value: 100}};
@ -1027,25 +1264,37 @@ define([
this.needShowSynchTip = false;
/** coauthoring end **/
var $tabs = me.$el.find('.tabs > ul a');
var $panels = me.$el.find('.box-panels > .panel');
$boxTabs = me.$el.find('.tabs > ul');
$tabs = $boxTabs.find('> li');
$panels = me.$el.find('.box-panels > .panel');
$tabs.on('click', function (e) {
$tabs.parent().removeClass('active');
$panels.removeClass('active');
var tab = $(e.target).data('tab');
if ( tab !== 'file' ) {
$panels.filter('[data-tab='+tab+']').addClass('active');
}
if (tab == 'file') {
me.fireEvent('file:open');
} else
if ( isTabActive('file') )
me.fireEvent('file:close');
var $tp = $(e.target.parentNode);
$tp.addClass('active');
$marker.width($tp.width());
$marker.css({left: $tp.position().left});
me.setTab(tab);
});
var $marker = me.$el.find('.tabs .marker');
$marker = me.$el.find('.tabs .marker');
var $scrollR = me.$el.find('.tabs .scroll.right');
$scrollL = me.$el.find('.tabs .scroll.left');
$scrollL.on('click', onScrollTabs.bind(this, 'left'));
$scrollR.on('click', onScrollTabs.bind(this, 'right'));
Common.NotificationCenter.on({
'window:resize': onResize,
'layout:changed': function (opts) {
if ( opts == 'menufile' ) {
me.setTab(lastPanel);
}
}
});
me.setTab('home');
return this;
},
@ -1418,12 +1667,54 @@ define([
el: $('#id-toolbar-menu-pageposition'),
allowScrollbar: false,
store: new Common.UI.DataViewStore([
{ offsety: 132, allowSelected: false, data:{ type:c_pageNumPosition.PAGE_NUM_POSITION_TOP, subtype:c_pageNumPosition.PAGE_NUM_POSITION_LEFT} },
{ offsety: 99, allowSelected: false, data:{ type:c_pageNumPosition.PAGE_NUM_POSITION_TOP, subtype:c_pageNumPosition.PAGE_NUM_POSITION_CENTER} },
{ offsety: 66, allowSelected: false, data:{ type:c_pageNumPosition.PAGE_NUM_POSITION_TOP, subtype:c_pageNumPosition.PAGE_NUM_POSITION_RIGHT} },
{ offsety: 33, allowSelected: false, data:{ type:c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, subtype:c_pageNumPosition.PAGE_NUM_POSITION_LEFT} },
{ offsety: 0, allowSelected: false, data:{ type:c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, subtype:c_pageNumPosition.PAGE_NUM_POSITION_CENTER} },
{ offsety: 165, allowSelected: false, data:{ type:c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, subtype:c_pageNumPosition.PAGE_NUM_POSITION_RIGHT} }
{
offsety: 132,
allowSelected: false,
data: {
type: c_pageNumPosition.PAGE_NUM_POSITION_TOP,
subtype: c_pageNumPosition.PAGE_NUM_POSITION_LEFT
}
},
{
offsety: 99,
allowSelected: false,
data: {
type: c_pageNumPosition.PAGE_NUM_POSITION_TOP,
subtype: c_pageNumPosition.PAGE_NUM_POSITION_CENTER
}
},
{
offsety: 66,
allowSelected: false,
data: {
type: c_pageNumPosition.PAGE_NUM_POSITION_TOP,
subtype: c_pageNumPosition.PAGE_NUM_POSITION_RIGHT
}
},
{
offsety: 33,
allowSelected: false,
data: {
type: c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM,
subtype: c_pageNumPosition.PAGE_NUM_POSITION_LEFT
}
},
{
offsety: 0,
allowSelected: false,
data: {
type: c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM,
subtype: c_pageNumPosition.PAGE_NUM_POSITION_CENTER
}
},
{
offsety: 165,
allowSelected: false,
data: {
type: c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM,
subtype: c_pageNumPosition.PAGE_NUM_POSITION_RIGHT
}
}
]),
itemTemplate: _.template('<div id="<%= id %>" class="item-pagenumber" style="background-position: 0 -<%= offsety %>px"></div>')
});
@ -1444,31 +1735,157 @@ define([
{id: 'menu-chart-group-stock', caption: me.textStock, inline: true}
]),
store: new Common.UI.DataViewStore([
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal, allowSelected: true, iconCls: 'column-normal', selected: true},
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked, allowSelected: true, iconCls: 'column-stack'},
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer, allowSelected: true, iconCls: 'column-pstack'},
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3d, allowSelected: true, iconCls: 'column-3d-normal'},
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked3d, allowSelected: true, iconCls: 'column-3d-stack'},
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer3d, allowSelected: true, iconCls: 'column-3d-pstack'},
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, allowSelected: true, iconCls: 'column-3d-normal-per'},
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineNormal, allowSelected: true, iconCls: 'line-normal'},
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStacked, allowSelected: true, iconCls: 'line-stack'},
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStackedPer, allowSelected: true, iconCls: 'line-pstack'},
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.line3d, allowSelected: true, iconCls: 'line-3d'},
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie, allowSelected: true, iconCls: 'pie-normal'},
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.doughnut, allowSelected: true, iconCls: 'pie-doughnut'},
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie3d, allowSelected: true, iconCls: 'pie-3d-normal'},
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal, allowSelected: true, iconCls: 'bar-normal'},
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked, allowSelected: true, iconCls: 'bar-stack'},
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer, allowSelected: true, iconCls: 'bar-pstack'},
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal3d, allowSelected: true, iconCls: 'bar-3d-normal'},
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked3d, allowSelected: true, iconCls: 'bar-3d-stack'},
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, allowSelected: true, iconCls: 'bar-3d-pstack'},
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaNormal, allowSelected: true, iconCls: 'area-normal'},
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStacked, allowSelected: true, iconCls: 'area-stack'},
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStackedPer, allowSelected: true, iconCls: 'area-pstack'},
{ group: 'menu-chart-group-scatter', type: Asc.c_oAscChartTypeSettings.scatter, allowSelected: true, iconCls: 'point-normal'},
{ group: 'menu-chart-group-stock', type: Asc.c_oAscChartTypeSettings.stock, allowSelected: true, iconCls: 'stock-normal'}
{
group: 'menu-chart-group-bar',
type: Asc.c_oAscChartTypeSettings.barNormal,
allowSelected: true,
iconCls: 'column-normal',
selected: true
},
{
group: 'menu-chart-group-bar',
type: Asc.c_oAscChartTypeSettings.barStacked,
allowSelected: true,
iconCls: 'column-stack'
},
{
group: 'menu-chart-group-bar',
type: Asc.c_oAscChartTypeSettings.barStackedPer,
allowSelected: true,
iconCls: 'column-pstack'
},
{
group: 'menu-chart-group-bar',
type: Asc.c_oAscChartTypeSettings.barNormal3d,
allowSelected: true,
iconCls: 'column-3d-normal'
},
{
group: 'menu-chart-group-bar',
type: Asc.c_oAscChartTypeSettings.barStacked3d,
allowSelected: true,
iconCls: 'column-3d-stack'
},
{
group: 'menu-chart-group-bar',
type: Asc.c_oAscChartTypeSettings.barStackedPer3d,
allowSelected: true,
iconCls: 'column-3d-pstack'
},
{
group: 'menu-chart-group-bar',
type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective,
allowSelected: true,
iconCls: 'column-3d-normal-per'
},
{
group: 'menu-chart-group-line',
type: Asc.c_oAscChartTypeSettings.lineNormal,
allowSelected: true,
iconCls: 'line-normal'
},
{
group: 'menu-chart-group-line',
type: Asc.c_oAscChartTypeSettings.lineStacked,
allowSelected: true,
iconCls: 'line-stack'
},
{
group: 'menu-chart-group-line',
type: Asc.c_oAscChartTypeSettings.lineStackedPer,
allowSelected: true,
iconCls: 'line-pstack'
},
{
group: 'menu-chart-group-line',
type: Asc.c_oAscChartTypeSettings.line3d,
allowSelected: true,
iconCls: 'line-3d'
},
{
group: 'menu-chart-group-pie',
type: Asc.c_oAscChartTypeSettings.pie,
allowSelected: true,
iconCls: 'pie-normal'
},
{
group: 'menu-chart-group-pie',
type: Asc.c_oAscChartTypeSettings.doughnut,
allowSelected: true,
iconCls: 'pie-doughnut'
},
{
group: 'menu-chart-group-pie',
type: Asc.c_oAscChartTypeSettings.pie3d,
allowSelected: true,
iconCls: 'pie-3d-normal'
},
{
group: 'menu-chart-group-hbar',
type: Asc.c_oAscChartTypeSettings.hBarNormal,
allowSelected: true,
iconCls: 'bar-normal'
},
{
group: 'menu-chart-group-hbar',
type: Asc.c_oAscChartTypeSettings.hBarStacked,
allowSelected: true,
iconCls: 'bar-stack'
},
{
group: 'menu-chart-group-hbar',
type: Asc.c_oAscChartTypeSettings.hBarStackedPer,
allowSelected: true,
iconCls: 'bar-pstack'
},
{
group: 'menu-chart-group-hbar',
type: Asc.c_oAscChartTypeSettings.hBarNormal3d,
allowSelected: true,
iconCls: 'bar-3d-normal'
},
{
group: 'menu-chart-group-hbar',
type: Asc.c_oAscChartTypeSettings.hBarStacked3d,
allowSelected: true,
iconCls: 'bar-3d-stack'
},
{
group: 'menu-chart-group-hbar',
type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d,
allowSelected: true,
iconCls: 'bar-3d-pstack'
},
{
group: 'menu-chart-group-area',
type: Asc.c_oAscChartTypeSettings.areaNormal,
allowSelected: true,
iconCls: 'area-normal'
},
{
group: 'menu-chart-group-area',
type: Asc.c_oAscChartTypeSettings.areaStacked,
allowSelected: true,
iconCls: 'area-stack'
},
{
group: 'menu-chart-group-area',
type: Asc.c_oAscChartTypeSettings.areaStackedPer,
allowSelected: true,
iconCls: 'area-pstack'
},
{
group: 'menu-chart-group-scatter',
type: Asc.c_oAscChartTypeSettings.scatter,
allowSelected: true,
iconCls: 'point-normal'
},
{
group: 'menu-chart-group-stock',
type: Asc.c_oAscChartTypeSettings.stock,
allowSelected: true,
iconCls: 'stock-normal'
}
]),
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
});
@ -1510,7 +1927,11 @@ define([
var mnu = items[i];
if (mnu.checkable) {
var checked = mnu.checked;
$(mnu.el).html(mnu.template({id: Common.UI.getId(), caption : mnu.caption, options : mnu.options}));
$(mnu.el).html(mnu.template({
id: Common.UI.getId(),
caption: mnu.caption,
options: mnu.options
}));
if (checked) mnu.setChecked(checked);
}
}
@ -1519,7 +1940,11 @@ define([
var mnu = items[i];
if (mnu.checkable) {
var checked = mnu.checked;
$(mnu.el).html(mnu.template({id: Common.UI.getId(), caption : mnu.caption, options : mnu.options}));
$(mnu.el).html(mnu.template({
id: Common.UI.getId(),
caption: mnu.caption,
options: mnu.options
}));
if (checked) mnu.setChecked(checked);
}
}
@ -1839,6 +2264,28 @@ define([
this.api.asc_RemoveAllCustomStyles();
},
setTab: function (tab, panel) {
$tabs.removeClass('active');
$panels.removeClass('active');
panel = $panels.filter('[data-tab=' + tab + ']');
if ( panel.length ) {
lastPanel = tab;
panel.addClass('active');
}
var $tp = $tabs.find('> a[data-tab=' + tab + ']').parent();
if ($tp.length) {
$tp.addClass('active');
$marker.width($tp.width());
if ($scrollL.is(':visible'))
$marker.css({left: $tp.position().left + $boxTabs.scrollLeft() - $scrollL.width()});
else $marker.css({left: $tp.position().left});
}
},
textBold: 'Bold',
textItalic: 'Italic',
textUnderline: 'Underline',
@ -1992,5 +2439,6 @@ define([
textGotoFootnote: 'Go to Footnotes',
tipChangeChart: 'Change Chart Type'
}, DE.Views.Toolbar || {}));
}
})(), DE.Views.Toolbar || {}));
});

27
apps/documenteditor/main/resources/less/toolbar.less
View file

@ -21,18 +21,21 @@
ul {
padding: 0;
margin: 0;
height: 100%;
white-space: nowrap;
overflow: hidden;
flex-grow: 1;
list-style: none;
font-size: 0;
}
li {
display: inline-block;
height: 100%;
//background-color: #a6c995;
> a {
display: inline-block;
line-height: @height-tabs;
height: 100%;
padding: 0 10px;
text-decoration: none;
cursor: default;
@ -58,17 +61,31 @@
}
.marker {
position: absolute;
position: relative;
border-top: 3px solid green;
bottom: 0;
top: -4px;
-webkit-transition: width .2s, left .2s ease-out;
transition: width .2s, left .2s ease-out;
}
.link {
.tabs:not(.short) {
.scroll {
display: none;
}
}
.scroll {
line-height: @height-tabs;
min-width: 20px;
text-align: center;
z-index: 1;
&.left{
box-shadow: 5px 0 20px 5px rgba(208, 221, 182, .8)
}
&.right{
box-shadow: -5px 0 20px 5px rgba(208, 221, 182, .8)
}
}
.extra {