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

[DE] toolbar's new layout

Browse source
This commit is contained in:
Maxim Kadushkin 2017-02-15 16:45:25 +03:00
parent 852fdb3825
commit d9858934d0
3 changed files with 415 additions and 293 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,206 +1,155 @@
<div class="toolbar" style="<%= isCompactView ? 'height: 41px;' : 'height: 67px;' %>"> <div class="toolbar">
<!----------------------> <div class="box-tabs">
<!--Short view toolbar--> <div class="extra left"></div>
<!----------------------> <section class="tabs">
<div id="id-toolbar-short" style="<%= isCompactView ? 'display: table;' : 'display: none;' %> width: 100%;" > <a href="#" class="link">
<div class="toolbar-group no-mask"> <i class="icon">&lt;</i>
<div class="toolbar-row"> </a>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-print"></span> <ul>
<span class="btn-placeholder" id="id-toolbar-short-placeholder-btn-save"></span> <% for(var i in tabs) { %>
</div> <li>
</div> <a href="#" data-tab="<%= tabs[i].action %>" title="<%= tabs[i].caption %>"><%= tabs[i].caption %></a>
<div class="separator short"></div> </li>
<div class="toolbar-group"> <% } %>
<div class="toolbar-row"> </ul>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-undo"></span> <a href="#" class="link">
<span class="btn-placeholder" id="id-toolbar-short-placeholder-btn-redo"></span> <i class="icon">&gt;</i>
</div> </a>
</div> <div class="marker"></div>
<div class="separator short"></div> </section>
<div class="toolbar-group"> <div class="extra right">SomeDocument.docx</div>
<div class="toolbar-row" style="width: 140px; margin-top: -1px;"> </div>
<span class="btn-placeholder" style="float: left; width: 90px;" id="id-toolbar-short-placeholder-field-fontname"></span> <section class="box-controls">
<span class="btn-placeholder" style="float: left; width: 45px; margin-left: 2px;" id="id-toolbar-short-placeholder-field-fontsize"></span> <section class="panel">
</div> <div class="group native">
</div> <div class="elset">
<div class="toolbar-group"> <span class="btn-slot" id="slot-btn-newdocument"></span>
<div class="toolbar-row"> </div>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-bold"></span> <div class="elset">
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-italic"></span> <span class="btn-slot" id="slot-btn-opendocument"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-underline"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-highlight"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-fontcolor"></span>
</div>
</div>
<div class="separator short" style="margin-left: 5px;"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-halign"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-markers"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-numbering"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-multilevels"></span>
</div>
</div>
<div class="separator short" style="margin-left: 5px;"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-decoffset"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-incoffset"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-linespace"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-hidenchars"></span>
</div>
</div>
<div class="separator short" style="margin-left: 5px;"></div>
<div class="toolbar-group">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-insertimage"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-inserttable"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-insertchart"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-inserthyperlink"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-insertshape"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-pagebreak"></span>
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-editheader"></span>
</div>
</div>
<div class="separator short" style="margin-left: 5px;"></div>
<div class="toolbar-group" style="padding-left: 10px;">
<div class="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-short-placeholder-btn-copystyle"></span>
</div>
</div>
<div class="toolbar-group" style="width: 100%; padding-left: 6px;"></div>
<div class="toolbar-group no-mask" style="padding-left:0;">
<div class="toolbar-row">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-hidebars"></span>
</div> </div>
</div> </div>
</div> <div class="group no-mask">
</div> <div class="elset">
<!----------------------> <span class="btn-slot" id="slot-btn-print"></span>
<!--Fully view toolbar--> </div>
<!----------------------> <div class="elset">
<div id="id-toolbar-full" style="<%= isCompactView ? 'display: none;' : 'display: table;' %> width: 100%;" > <span class="btn-slot" id="slot-btn-save"></span>
<div class="toolbar-group toolbar-group-native"> </div>
<div class="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-newdocument"></span>
</div> </div>
<div class="toolbar-row"> <div class="separator long"></div>
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-opendocument"></span> <div class="group">
<div class="elset">
<span class="btn-slot split" id="slot-btn-copy"></span>
<span class="btn-slot" id="slot-btn-paste"></span>
</div>
<div class="elset">
<span class="btn-slot split" id="slot-btn-undo"></span>
<span class="btn-slot" id="slot-btn-redo"></span>
</div>
</div> </div>
</div> <div class="separator long"></div>
<div class="toolbar-group no-mask"> </section>
<div class="toolbar-row"> <section class="box-panels">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-print"></span> <section class="panel" data-tab="home">
</div> <div class="group">
<div class="toolbar-row"> <div class="elset" style="width:265px;">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-save"></span> <span class="btn-slot" id="slot-field-fontname"></span>
</div> <span class="btn-slot" id="slot-field-fontsize"></span>
</div> <span class="btn-slot border" id="slot-btn-incfont"></span>
<div class="separator long"></div> <span class="btn-slot border" id="slot-btn-decfont"></span>
<div class="toolbar-group"> </div>
<div class="toolbar-row"> <div class="elset">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-copy"></span> <span class="btn-slot split" id="slot-btn-bold"></span>
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-paste"></span> <span class="btn-slot split" id="slot-btn-italic"></span>
</div> <span class="btn-slot split" id="slot-btn-underline"></span>
<div class="toolbar-row"> <span class="btn-slot split" id="slot-btn-strikeout"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-undo"></span> <span class="btn-slot split" id="slot-btn-superscript"></span>
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-redo"></span> <span class="btn-slot split" id="slot-btn-subscript"></span>
</div> <span class="btn-slot split" id="slot-btn-highlight"></span>
</div> <span class="btn-slot split" id="slot-btn-fontcolor"></span>
<div class="separator long"></div> <span class="btn-slot split" id="slot-btn-paracolor"></span>
<div class="toolbar-group"> </div>
<div class="toolbar-row" style="width:265px;"> </div>
<span class="btn-placeholder" style="float: left; width: 165px;" id="id-toolbar-full-placeholder-field-fontname"></span> <div class="separator long" style="margin-left: 5px;"></div>
<span class="btn-placeholder" style="float: left; width: 45px; margin-left: 2px;" id="id-toolbar-full-placeholder-field-fontsize"></span> <div class="group">
<span class="btn-placeholder border" id="id-toolbar-full-placeholder-btn-incfont" style="margin-left: 2px;"></span> <div class="elset">
<span class="btn-placeholder border" id="id-toolbar-full-placeholder-btn-decfont" style="margin-left: 2px;"></span> <span class="btn-slot split" id="slot-btn-markers"></span>
</div> <span class="btn-slot split" id="slot-btn-numbering"></span>
<div class="toolbar-row"> <span class="btn-slot split" id="slot-btn-multilevels"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-bold"></span> <span class="btn-slot split" id="slot-btn-decoffset"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-italic"></span> <span class="btn-slot split" id="slot-btn-incoffset"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-underline"></span> <span class="btn-slot split" id="slot-btn-linespace"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-strikeout"></span> </div>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-superscript"></span> <div class="elset">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-subscript"></span> <span class="btn-slot split" id="slot-btn-align-left"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-highlight"></span> <span class="btn-slot split" id="slot-btn-align-center"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-fontcolor"></span> <span class="btn-slot split" id="slot-btn-align-right"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-paracolor"></span> <span class="btn-slot split" id="slot-btn-align-just"></span>
</div> <span class="btn-slot split" id="slot-btn-hidenchars"></span>
</div> </div>
<div class="separator long" style="margin-left: 5px;"></div> </div>
<div class="toolbar-group"> <div class="separator long" style="margin-left: 5px;"></div>
<div class="toolbar-row"> <div class="group">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-markers"></span> <div class=elset">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-numbering"></span> <span class="btn-slot" id="slot-btn-clearstyle"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-multilevels"></span> </div>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-decoffset"></span> <div class="elset">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-incoffset"></span> <span class="btn-slot" id="slot-btn-copystyle"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-linespace"></span> </div>
</div> </div>
<div class="toolbar-row"> <div class="group">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-align-left"></span> <div class="toolbar-elset">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-align-center"></span> <span class="btn-slot split" id="slot-btn-colorschemas"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-align-right"></span> </div>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-align-just"></span> <div class="elset">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-hidenchars"></span> <span class="btn-slot" id="slot-btn-mailrecepients"></span>
</div> </div>
</div> </div>
<div class="separator long" style="margin-left: 5px;"></div> <div class="group" id="slot-field-styles">
<div class="toolbar-group"> </div>
<div class="toolbar-row"> <div class="group no-mask">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-pagebreak"></span> <div class="elset">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-insertimage"></span> <span class="btn-slot split" id="slot-btn-hidebars"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-insertchart"></span> </div>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-inserttext"></span> <div class="elset">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-insertequation"></span> <span class="btn-slot" id="slot-btn-settings"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-dropcap"></span> </div>
</div> </div>
<div class="toolbar-row"> </section>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-editheader"></span> <section class="panel" data-tab="ins">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-inserttable"></span> <div class="group">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-inserthyperlink"></span> <div class="elset">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-insertshape"></span> <span class="btn-slot split" id="slot-btn-pagebreak"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-notes"></span> <span class="btn-slot split" id="slot-btn-insimage"></span>
</div> <span class="btn-slot split" id="slot-btn-inschart"></span>
</div> <span class="btn-slot split" id="slot-btn-instext"></span>
<div class="separator long" style="margin-left: 5px;"></div> <span class="btn-slot split" id="slot-btn-insequation"></span>
<div class="toolbar-group"> <span class="btn-slot split" id="slot-btn-dropcap"></span>
<div class="toolbar-row"> </div>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-pageorient"></span> <div class="elset">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-pagemargins"></span> <span class="btn-slot split" id="slot-btn-editheader"></span>
</div> <span class="btn-slot split" id="slot-btn-instable"></span>
<div class="toolbar-row"> <span class="btn-slot split" id="slot-btn-inshyperlink"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-pagesize"></span> <span class="btn-slot split" id="slot-btn-insshape"></span>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-columns"></span> <span class="btn-slot split" id="slot-btn-notes"></span>
</div> </div>
</div> </div>
<div class="separator long" style="margin-left: 5px;"></div> </section>
<div class="toolbar-group"> <section class="panel" data-tab="layout">
<div class="toolbar-row"> <div class="group">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-clearstyle"></span> <div class="elset">
</div> <span class="btn-slot split" id="slot-btn-pageorient"></span>
<div class="toolbar-row"> <span class="btn-slot split" id="slot-btn-pagemargins"></span>
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-copystyle"></span> </div>
</div> <div class="elset">
</div> <span class="btn-slot split" id="slot-btn-pagesize"></span>
<div class="toolbar-group"> <span class="btn-slot split" id="slot-btn-columns"></span>
<div class="toolbar-row"> </div>
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-colorschemas"></span> </div>
</div> </section>
<div class="toolbar-row"> <section class="panel" data-tab="review">review panel</section>
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-mailrecepients"></span> <section class="panel" data-tab="plugins">plugins panel</section>
</div> </section>
</div> </section>
<div class="toolbar-group" id="id-toolbar-full-placeholder-field-styles" style="width: 100%; min-width: 160px;">
</div>
<div class="toolbar-group no-mask">
<div class="toolbar-row">
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-hidebars"></span>
</div>
<div class="toolbar-row">
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-settings"></span>
</div>
</div>
</div>
</div> </div>

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

@ -35,8 +35,8 @@
* *
* Toolbar view * Toolbar view
* *
* Created by Alexander Yuzhin on 1/9/14 * Created by Maxim.Kadushkin on 2/13/17
* Copyright (c) 2014 Ascensio System SIA. All rights reserved. * Copyright (c) 2017 Ascensio System SIA. All rights reserved.
* *
*/ */
@ -56,18 +56,15 @@ define([
'common/main/lib/component/Window', 'common/main/lib/component/Window',
'common/main/lib/component/ComboBoxFonts', 'common/main/lib/component/ComboBoxFonts',
'common/main/lib/component/ComboDataView' 'common/main/lib/component/ComboDataView'
/** coauthoring begin **/
,'common/main/lib/component/SynchronizeTip' ,'common/main/lib/component/SynchronizeTip'
/** coauthoring end **/ ], function ($, _, Backbone, template) {
], function ($, _, Backbone, toolbarTemplate) {
'use strict'; 'use strict';
DE.Views.Toolbar = Backbone.View.extend(_.extend({ DE.Views.Toolbar = Backbone.View.extend(_.extend({
el: '#toolbar', el: '#toolbar',
// Compile our stats template // Compile our stats template
template: _.template(toolbarTemplate), template: _.template(template),
// Delegated events for creating new items, and clearing completed ones. // Delegated events for creating new items, and clearing completed ones.
events: { events: {
@ -985,22 +982,41 @@ define([
left = Common.localStorage.getItem("de-pgmargins-left"), left = Common.localStorage.getItem("de-pgmargins-left"),
bottom = Common.localStorage.getItem("de-pgmargins-bottom"), bottom = Common.localStorage.getItem("de-pgmargins-bottom"),
right = Common.localStorage.getItem("de-pgmargins-right"); right = Common.localStorage.getItem("de-pgmargins-right");
if (top!==null && left!==null && bottom!==null && right!==null) { // if (top!==null && left!==null && bottom!==null && right!==null) {
var mnu = this.btnPageMargins.menu.items[0]; // var mnu = this.btnPageMargins.menu.items[0];
mnu.options.value = mnu.value = [parseFloat(top), parseFloat(left), parseFloat(bottom), parseFloat(right)]; // mnu.options.value = mnu.value = [parseFloat(top), parseFloat(left), parseFloat(bottom), parseFloat(right)];
mnu.setVisible(true); // mnu.setVisible(true);
$(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}));
} else // } else
this.btnPageMargins.menu.items[0].setVisible(false); // this.btnPageMargins.menu.items[0].setVisible(false);
var value = Common.localStorage.getItem("de-compact-toolbar"); var value = Common.localStorage.getItem("de-compact-toolbar");
var valueCompact = !!(value !== null && parseInt(value) == 1 || value === null && mode.customization && mode.customization.compactToolbar); var valueCompact = !!(value !== null && parseInt(value) == 1 || value === null && mode.customization && mode.customization.compactToolbar);
me.$el.html(this.template({ var _tpl_ = this.template({
isCompactView: valueCompact tabs: [{
})); caption: 'File',
action: 'file'
}, {
caption: 'Home',
action: 'home'
}, {
caption: 'Insert',
action: 'ins'
}, {
caption: 'Page Layout',
action: 'layout'
}, {
caption: 'Review',
action: 'review'
}, {
caption: 'Plugins',
action: 'plugins'
}]
});
me.$el.html( me.rendererComponents(_tpl_) );
me.rendererComponents(valueCompact ? 'short' : 'full');
me.isCompactView = valueCompact; me.isCompactView = valueCompact;
this.trigger('render:after', this); this.trigger('render:after', this);
@ -1011,81 +1027,95 @@ define([
this.needShowSynchTip = false; this.needShowSynchTip = false;
/** coauthoring end **/ /** coauthoring end **/
var $tabs = me.$el.find('.tabs > ul a');
var $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');
}
var $tp = $(e.target.parentNode);
$tp.addClass('active');
$marker.width($tp.width());
$marker.css({left: $tp.position().left});
});
var $marker = me.$el.find('.tabs .marker');
return this; return this;
}, },
rendererComponents: function(mode) { rendererComponents: function(html) {
var prefix = (mode === 'short') ? 'short' : 'full'; var $host = $(html);
var _injectComponent = function(id, cmp) {
var replacePlacholder = function(id, cmp) { var $slot = $host.find(id);
var placeholderEl = $(id), if ( $slot.length ) {
placeholderDom = placeholderEl.get(0); cmp.rendered ?
$slot.append(cmp.$el) : cmp.render($slot);
if (placeholderDom) {
if (cmp.rendered) {
cmp.el = document.getElementById(cmp.id);
placeholderDom.appendChild(document.getElementById(cmp.id));
} else {
cmp.render(placeholderEl);
}
} }
}; };
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-newdocument', this.btnNewDocument); _injectComponent('#slot-btn-newdocument', this.btnNewDocument);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-opendocument', this.btnOpenDocument); _injectComponent('#slot-btn-opendocument', this.btnOpenDocument);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-field-fontname', this.cmbFontName); _injectComponent('#slot-field-fontname', this.cmbFontName);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-field-fontsize', this.cmbFontSize); _injectComponent('#slot-field-fontsize', this.cmbFontSize);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-print', this.btnPrint); _injectComponent('#slot-btn-print', this.btnPrint);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-save', this.btnSave); _injectComponent('#slot-btn-save', this.btnSave);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-undo', this.btnUndo); _injectComponent('#slot-btn-undo', this.btnUndo);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-redo', this.btnRedo); _injectComponent('#slot-btn-redo', this.btnRedo);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-copy', this.btnCopy); _injectComponent('#slot-btn-copy', this.btnCopy);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-paste', this.btnPaste); _injectComponent('#slot-btn-paste', this.btnPaste);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-incfont', this.btnIncFontSize); _injectComponent('#slot-btn-incfont', this.btnIncFontSize);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-decfont', this.btnDecFontSize); _injectComponent('#slot-btn-decfont', this.btnDecFontSize);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-bold', this.btnBold); _injectComponent('#slot-btn-bold', this.btnBold);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-italic', this.btnItalic); _injectComponent('#slot-btn-italic', this.btnItalic);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-underline', this.btnUnderline); _injectComponent('#slot-btn-underline', this.btnUnderline);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-strikeout', this.btnStrikeout); _injectComponent('#slot-btn-strikeout', this.btnStrikeout);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-superscript', this.btnSuperscript); _injectComponent('#slot-btn-superscript', this.btnSuperscript);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-subscript', this.btnSubscript); _injectComponent('#slot-btn-subscript', this.btnSubscript);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-highlight', this.btnHighlightColor); _injectComponent('#slot-btn-highlight', this.btnHighlightColor);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-fontcolor', this.btnFontColor); _injectComponent('#slot-btn-fontcolor', this.btnFontColor);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-align-left', this.btnAlignLeft); _injectComponent('#slot-btn-align-left', this.btnAlignLeft);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-align-center', this.btnAlignCenter); _injectComponent('#slot-btn-align-center', this.btnAlignCenter);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-align-right', this.btnAlignRight); _injectComponent('#slot-btn-align-right', this.btnAlignRight);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-align-just', this.btnAlignJust); _injectComponent('#slot-btn-align-just', this.btnAlignJust);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-incoffset', this.btnIncLeftOffset); _injectComponent('#slot-btn-incoffset', this.btnIncLeftOffset);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-decoffset', this.btnDecLeftOffset); _injectComponent('#slot-btn-decoffset', this.btnDecLeftOffset);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-linespace', this.btnLineSpace); _injectComponent('#slot-btn-linespace', this.btnLineSpace);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-hidenchars', this.btnShowHidenChars); _injectComponent('#slot-btn-hidenchars', this.btnShowHidenChars);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-markers', this.btnMarkers); _injectComponent('#slot-btn-markers', this.btnMarkers);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-numbering', this.btnNumbers); _injectComponent('#slot-btn-numbering', this.btnNumbers);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-multilevels', this.btnMultilevels); _injectComponent('#slot-btn-multilevels', this.btnMultilevels);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-inserttable', this.btnInsertTable); _injectComponent('#slot-btn-instable', this.btnInsertTable);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-insertimage', this.btnInsertImage); _injectComponent('#slot-btn-insimage', this.btnInsertImage);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-insertchart', this.btnInsertChart); _injectComponent('#slot-btn-inschart', this.btnInsertChart);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-inserttext', this.btnInsertText); _injectComponent('#slot-btn-instext', this.btnInsertText);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-dropcap', this.btnDropCap); _injectComponent('#slot-btn-dropcap', this.btnDropCap);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-columns', this.btnColumns); _injectComponent('#slot-btn-columns', this.btnColumns);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-pagebreak', this.btnInsertPageBreak); _injectComponent('#slot-btn-pagebreak', this.btnInsertPageBreak);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-inserthyperlink',this.btnInsertHyperlink); _injectComponent('#slot-btn-inshyperlink',this.btnInsertHyperlink);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-editheader', this.btnEditHeader); _injectComponent('#slot-btn-editheader', this.btnEditHeader);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-insertshape', this.btnInsertShape); _injectComponent('#slot-btn-insshape', this.btnInsertShape);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-insertequation', this.btnInsertEquation); _injectComponent('#slot-btn-insequation', this.btnInsertEquation);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-pageorient', this.btnPageOrient); _injectComponent('#slot-btn-pageorient', this.btnPageOrient);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-pagemargins', this.btnPageMargins); _injectComponent('#slot-btn-pagemargins', this.btnPageMargins);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-pagesize', this.btnPageSize); _injectComponent('#slot-btn-pagesize', this.btnPageSize);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-clearstyle', this.btnClearStyle); _injectComponent('#slot-btn-clearstyle', this.btnClearStyle);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-copystyle', this.btnCopyStyle); _injectComponent('#slot-btn-copystyle', this.btnCopyStyle);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-colorschemas', this.btnColorSchemas); _injectComponent('#slot-btn-colorschemas', this.btnColorSchemas);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-hidebars', this.btnHide); _injectComponent('#slot-btn-hidebars', this.btnHide);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-settings', this.btnAdvSettings); _injectComponent('#slot-btn-settings', this.btnAdvSettings);
replacePlacholder('#id-toolbar-full-placeholder-btn-paracolor', this.btnParagraphColor); _injectComponent('#slot-btn-paracolor', this.btnParagraphColor);
replacePlacholder('#id-toolbar-full-placeholder-field-styles', this.listStyles); _injectComponent('#slot-field-styles', this.listStyles);
replacePlacholder('#id-toolbar-short-placeholder-btn-halign', this.btnHorizontalAlign); _injectComponent('#slot-btn-halign', this.btnHorizontalAlign);
replacePlacholder('#id-toolbar-full-placeholder-btn-mailrecepients', this.btnMailRecepients); _injectComponent('#slot-btn-mailrecepients', this.btnMailRecepients);
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-notes', this.btnNotes); _injectComponent('#slot-btn-notes', this.btnNotes);
return $host;
}, },
createDelayedElements: function() { createDelayedElements: function() {
@ -1566,7 +1596,7 @@ define([
this.mode = mode; this.mode = mode;
if (!mode.nativeApp) { if (!mode.nativeApp) {
var nativeBtnGroup = $('.toolbar-group-native'); var nativeBtnGroup = this.$el.find('.group.native');
if (nativeBtnGroup) { if (nativeBtnGroup) {
nativeBtnGroup.hide(); nativeBtnGroup.hide();

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

@ -1,9 +1,123 @@
@height-tabs: 42px;
@height-controls: 67px;
.toolbar { .toolbar {
padding: 10px 0; height: @height-tabs + @height-controls;
.box-tabs {
height: @height-tabs;
display: flex;
align-items: stretch;
.tabs {
flex-grow: 1;
background-color: #d0ddb6;
position: relative;
overflow: hidden;
display: flex;
}
ul {
padding: 0;
margin: 0;
height: 100%;
white-space: nowrap;
overflow: hidden;
flex-grow: 1;
}
li {
display: inline-block;
> a {
display: inline-block;
line-height: @height-tabs;
padding: 0 10px;
text-decoration: none;
cursor: default;
font-size: 14px;
text-align: center;
&::after {
display: block;
content: attr(title);
font-weight: bold;
height: 1px;
overflow: hidden;
visibility: hidden;
}
}
&.active {
> a {
font-weight: bold;
}
}
}
.marker {
position: absolute;
border-top: 3px solid green;
bottom: 0;
-webkit-transition: width .2s, left .2s ease-out;
transition: width .2s, left .2s ease-out;
}
.link {
line-height: @height-tabs;
min-width: 20px;
text-align: center;
}
.extra {
&.left {
//display: inline-block;
//float: left;
min-width: 240px;
height: 42px;
.background-ximage('@{common-image-path}/about/OnlyOffice.png', '@{common-image-path}/about/OnlyOffice@2x.png', 240px);
background-size: contain;
background-repeat: no-repeat;
background-color: #98ddda;
}
&.right {
min-width: 350px;
line-height: @height-tabs;
background-color: #98ddda;
}
}
}
.box-controls {
height: @height-controls;
padding: 10px 0;
display: flex;
//background-color: #F2CBBF;
.panel {
display: table;
height: 100%;
}
//width: 100%;
}
.box-panels {
.panel:not(.active) {
display: none;
}
}
//padding: 10px 0;
background-color: @gray-light; background-color: @gray-light;
.box-inner-shadow(0 -1px 0 @gray-dark); .box-inner-shadow(0 -1px 0 @gray-dark);
.toolbar-group { .toolbar-group, .group {
display: table-cell; display: table-cell;
vertical-align: top; vertical-align: top;
white-space: nowrap; white-space: nowrap;
@ -14,7 +128,12 @@
} }
} }
.toolbar-row { .group {
//background-color: #a9f261;
vertical-align: middle;
}
.toolbar-row, .elset {
height: 20px; height: 20px;
font-size: 0; font-size: 0;
@ -23,6 +142,10 @@
} }
} }
.elset {
//background-color: #f2f254;
}
.separator { .separator {
margin-left: 12px; margin-left: 12px;
@ -35,7 +158,7 @@
} }
} }
.btn-placeholder { .btn-slot {
// background-color: red; // background-color: red;
display: inline-block; display: inline-block;
width: 20px; width: 20px;
@ -437,3 +560,23 @@
background-position: @plus-offset-x @plus-offset-y - 16; background-position: @plus-offset-x @plus-offset-y - 16;
} }
} }
#slot-field-fontname {
float: left;
width: 165px;
}
#slot-field-fontsize {
float: left;
width: 45px;
margin-left: 2px;
}
#slot-btn-incfont, #slot-btn-decfont {
margin-left: 2px;
}
#slot-field-styles {
width: 100%;
min-width: 160px;
}