[DE] toolbar's new layout
This commit is contained in:
Maxim Kadushkin
parent
852fdb3825
commit
d9858934d0
|
|
@ -1,206 +1,155 @@
|
|||
<div class="toolbar" style="<%= isCompactView ? 'height: 41px;' : 'height: 67px;' %>">
|
||||
<!---------------------->
|
||||
<!--Short view toolbar-->
|
||||
<!---------------------->
|
||||
<div id="id-toolbar-short" style="<%= isCompactView ? 'display: table;' : 'display: none;' %> width: 100%;" >
|
||||
<div class="toolbar-group no-mask">
|
||||
<div class="toolbar-row">
|
||||
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-print"></span>
|
||||
<span class="btn-placeholder" id="id-toolbar-short-placeholder-btn-save"></span>
|
||||
<div class="toolbar">
|
||||
<div class="box-tabs">
|
||||
<div class="extra left"></div>
|
||||
<section class="tabs">
|
||||
<a href="#" class="link">
|
||||
<i class="icon"><</i>
|
||||
</a>
|
||||
<ul>
|
||||
<% for(var i in tabs) { %>
|
||||
<li>
|
||||
<a href="#" data-tab="<%= tabs[i].action %>" title="<%= tabs[i].caption %>"><%= tabs[i].caption %></a>
|
||||
</li>
|
||||
<% } %>
|
||||
</ul>
|
||||
<a href="#" class="link">
|
||||
<i class="icon">></i>
|
||||
</a>
|
||||
<div class="marker"></div>
|
||||
</section>
|
||||
<div class="extra right">SomeDocument.docx</div>
|
||||
</div>
|
||||
<section class="box-controls">
|
||||
<section class="panel">
|
||||
<div class="group native">
|
||||
<div class="elset">
|
||||
<span class="btn-slot" id="slot-btn-newdocument"></span>
|
||||
</div>
|
||||
<div class="elset">
|
||||
<span class="btn-slot" id="slot-btn-opendocument"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="separator short"></div>
|
||||
<div class="toolbar-group">
|
||||
<div class="toolbar-row">
|
||||
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-undo"></span>
|
||||
<span class="btn-placeholder" id="id-toolbar-short-placeholder-btn-redo"></span>
|
||||
<div class="group no-mask">
|
||||
<div class="elset">
|
||||
<span class="btn-slot" id="slot-btn-print"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="separator short"></div>
|
||||
<div class="toolbar-group">
|
||||
<div class="toolbar-row" style="width: 140px; margin-top: -1px;">
|
||||
<span class="btn-placeholder" style="float: left; width: 90px;" id="id-toolbar-short-placeholder-field-fontname"></span>
|
||||
<span class="btn-placeholder" style="float: left; width: 45px; margin-left: 2px;" id="id-toolbar-short-placeholder-field-fontsize"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toolbar-group">
|
||||
<div class="toolbar-row">
|
||||
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-bold"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-short-placeholder-btn-italic"></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>
|
||||
<!---------------------->
|
||||
<!--Fully view toolbar-->
|
||||
<!---------------------->
|
||||
<div id="id-toolbar-full" style="<%= isCompactView ? 'display: none;' : 'display: table;' %> width: 100%;" >
|
||||
<div class="toolbar-group toolbar-group-native">
|
||||
<div class="toolbar-row">
|
||||
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-newdocument"></span>
|
||||
</div>
|
||||
<div class="toolbar-row">
|
||||
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-opendocument"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toolbar-group no-mask">
|
||||
<div class="toolbar-row">
|
||||
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-print"></span>
|
||||
</div>
|
||||
<div class="toolbar-row">
|
||||
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-save"></span>
|
||||
<div class="elset">
|
||||
<span class="btn-slot" id="slot-btn-save"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="separator long"></div>
|
||||
<div class="toolbar-group">
|
||||
<div class="toolbar-row">
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-copy"></span>
|
||||
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-paste"></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="toolbar-row">
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-undo"></span>
|
||||
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-redo"></span>
|
||||
<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 class="separator long"></div>
|
||||
<div class="toolbar-group">
|
||||
<div class="toolbar-row" style="width:265px;">
|
||||
<span class="btn-placeholder" style="float: left; width: 165px;" id="id-toolbar-full-placeholder-field-fontname"></span>
|
||||
<span class="btn-placeholder" style="float: left; width: 45px; margin-left: 2px;" id="id-toolbar-full-placeholder-field-fontsize"></span>
|
||||
<span class="btn-placeholder border" id="id-toolbar-full-placeholder-btn-incfont" style="margin-left: 2px;"></span>
|
||||
<span class="btn-placeholder border" id="id-toolbar-full-placeholder-btn-decfont" style="margin-left: 2px;"></span>
|
||||
</section>
|
||||
<section class="box-panels">
|
||||
<section class="panel" data-tab="home">
|
||||
<div class="group">
|
||||
<div class="elset" style="width:265px;">
|
||||
<span class="btn-slot" id="slot-field-fontname"></span>
|
||||
<span class="btn-slot" id="slot-field-fontsize"></span>
|
||||
<span class="btn-slot border" id="slot-btn-incfont"></span>
|
||||
<span class="btn-slot border" id="slot-btn-decfont"></span>
|
||||
</div>
|
||||
<div class="toolbar-row">
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-bold"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-italic"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-underline"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-strikeout"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-superscript"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-subscript"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-highlight"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-fontcolor"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-paracolor"></span>
|
||||
<div class="elset">
|
||||
<span class="btn-slot split" id="slot-btn-bold"></span>
|
||||
<span class="btn-slot split" id="slot-btn-italic"></span>
|
||||
<span class="btn-slot split" id="slot-btn-underline"></span>
|
||||
<span class="btn-slot split" id="slot-btn-strikeout"></span>
|
||||
<span class="btn-slot split" id="slot-btn-superscript"></span>
|
||||
<span class="btn-slot split" id="slot-btn-subscript"></span>
|
||||
<span class="btn-slot split" id="slot-btn-highlight"></span>
|
||||
<span class="btn-slot split" id="slot-btn-fontcolor"></span>
|
||||
<span class="btn-slot split" id="slot-btn-paracolor"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="separator long" style="margin-left: 5px;"></div>
|
||||
<div class="toolbar-group">
|
||||
<div class="toolbar-row">
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-markers"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-numbering"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-multilevels"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-decoffset"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-incoffset"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-linespace"></span>
|
||||
<div class="group">
|
||||
<div class="elset">
|
||||
<span class="btn-slot split" id="slot-btn-markers"></span>
|
||||
<span class="btn-slot split" id="slot-btn-numbering"></span>
|
||||
<span class="btn-slot split" id="slot-btn-multilevels"></span>
|
||||
<span class="btn-slot split" id="slot-btn-decoffset"></span>
|
||||
<span class="btn-slot split" id="slot-btn-incoffset"></span>
|
||||
<span class="btn-slot split" id="slot-btn-linespace"></span>
|
||||
</div>
|
||||
<div class="toolbar-row">
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-align-left"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-align-center"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-align-right"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-align-just"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-hidenchars"></span>
|
||||
<div class="elset">
|
||||
<span class="btn-slot split" id="slot-btn-align-left"></span>
|
||||
<span class="btn-slot split" id="slot-btn-align-center"></span>
|
||||
<span class="btn-slot split" id="slot-btn-align-right"></span>
|
||||
<span class="btn-slot split" id="slot-btn-align-just"></span>
|
||||
<span class="btn-slot split" id="slot-btn-hidenchars"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="separator long" style="margin-left: 5px;"></div>
|
||||
<div class="toolbar-group">
|
||||
<div class="toolbar-row">
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-pagebreak"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-insertimage"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-insertchart"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-inserttext"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-insertequation"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-dropcap"></span>
|
||||
<div class="group">
|
||||
<div class=elset">
|
||||
<span class="btn-slot" id="slot-btn-clearstyle"></span>
|
||||
</div>
|
||||
<div class="toolbar-row">
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-editheader"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-inserttable"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-inserthyperlink"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-insertshape"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-notes"></span>
|
||||
<div class="elset">
|
||||
<span class="btn-slot" id="slot-btn-copystyle"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="separator long" style="margin-left: 5px;"></div>
|
||||
<div class="toolbar-group">
|
||||
<div class="toolbar-row">
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-pageorient"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-pagemargins"></span>
|
||||
<div class="group">
|
||||
<div class="toolbar-elset">
|
||||
<span class="btn-slot split" id="slot-btn-colorschemas"></span>
|
||||
</div>
|
||||
<div class="toolbar-row">
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-pagesize"></span>
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-columns"></span>
|
||||
<div class="elset">
|
||||
<span class="btn-slot" id="slot-btn-mailrecepients"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="separator long" style="margin-left: 5px;"></div>
|
||||
<div class="toolbar-group">
|
||||
<div class="toolbar-row">
|
||||
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-clearstyle"></span>
|
||||
<div class="group" id="slot-field-styles">
|
||||
</div>
|
||||
<div class="toolbar-row">
|
||||
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-copystyle"></span>
|
||||
<div class="group no-mask">
|
||||
<div class="elset">
|
||||
<span class="btn-slot split" id="slot-btn-hidebars"></span>
|
||||
</div>
|
||||
<div class="elset">
|
||||
<span class="btn-slot" id="slot-btn-settings"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toolbar-group">
|
||||
<div class="toolbar-row">
|
||||
<span class="btn-placeholder split" id="id-toolbar-full-placeholder-btn-colorschemas"></span>
|
||||
</section>
|
||||
<section class="panel" data-tab="ins">
|
||||
<div class="group">
|
||||
<div class="elset">
|
||||
<span class="btn-slot split" id="slot-btn-pagebreak"></span>
|
||||
<span class="btn-slot split" id="slot-btn-insimage"></span>
|
||||
<span class="btn-slot split" id="slot-btn-inschart"></span>
|
||||
<span class="btn-slot split" id="slot-btn-instext"></span>
|
||||
<span class="btn-slot split" id="slot-btn-insequation"></span>
|
||||
<span class="btn-slot split" id="slot-btn-dropcap"></span>
|
||||
</div>
|
||||
<div class="toolbar-row">
|
||||
<span class="btn-placeholder" id="id-toolbar-full-placeholder-btn-mailrecepients"></span>
|
||||
<div class="elset">
|
||||
<span class="btn-slot split" id="slot-btn-editheader"></span>
|
||||
<span class="btn-slot split" id="slot-btn-instable"></span>
|
||||
<span class="btn-slot split" id="slot-btn-inshyperlink"></span>
|
||||
<span class="btn-slot split" id="slot-btn-insshape"></span>
|
||||
<span class="btn-slot split" id="slot-btn-notes"></span>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</section>
|
||||
<section class="panel" data-tab="layout">
|
||||
<div class="group">
|
||||
<div class="elset">
|
||||
<span class="btn-slot split" id="slot-btn-pageorient"></span>
|
||||
<span class="btn-slot split" id="slot-btn-pagemargins"></span>
|
||||
</div>
|
||||
<div class="elset">
|
||||
<span class="btn-slot split" id="slot-btn-pagesize"></span>
|
||||
<span class="btn-slot split" id="slot-btn-columns"></span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="panel" data-tab="review">review panel</section>
|
||||
<section class="panel" data-tab="plugins">plugins panel</section>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -35,8 +35,8 @@
|
|||
*
|
||||
* Toolbar view
|
||||
*
|
||||
* Created by Alexander Yuzhin on 1/9/14
|
||||
* Copyright (c) 2014 Ascensio System SIA. All rights reserved.
|
||||
* Created by Maxim.Kadushkin on 2/13/17
|
||||
* Copyright (c) 2017 Ascensio System SIA. All rights reserved.
|
||||
*
|
||||
*/
|
||||
|
||||
|
|
@ -56,18 +56,15 @@ define([
|
|||
'common/main/lib/component/Window',
|
||||
'common/main/lib/component/ComboBoxFonts',
|
||||
'common/main/lib/component/ComboDataView'
|
||||
/** coauthoring begin **/
|
||||
,'common/main/lib/component/SynchronizeTip'
|
||||
/** coauthoring end **/
|
||||
|
||||
], function ($, _, Backbone, toolbarTemplate) {
|
||||
], function ($, _, Backbone, template) {
|
||||
'use strict';
|
||||
|
||||
DE.Views.Toolbar = Backbone.View.extend(_.extend({
|
||||
el: '#toolbar',
|
||||
|
||||
// Compile our stats template
|
||||
template: _.template(toolbarTemplate),
|
||||
template: _.template(template),
|
||||
|
||||
// Delegated events for creating new items, and clearing completed ones.
|
||||
events: {
|
||||
|
|
@ -985,22 +982,41 @@ define([
|
|||
left = Common.localStorage.getItem("de-pgmargins-left"),
|
||||
bottom = Common.localStorage.getItem("de-pgmargins-bottom"),
|
||||
right = Common.localStorage.getItem("de-pgmargins-right");
|
||||
if (top!==null && left!==null && bottom!==null && right!==null) {
|
||||
var mnu = this.btnPageMargins.menu.items[0];
|
||||
mnu.options.value = mnu.value = [parseFloat(top), parseFloat(left), parseFloat(bottom), parseFloat(right)];
|
||||
mnu.setVisible(true);
|
||||
$(mnu.el).html(mnu.template({id: Common.UI.getId(), caption : mnu.caption, options : mnu.options}));
|
||||
} else
|
||||
this.btnPageMargins.menu.items[0].setVisible(false);
|
||||
// if (top!==null && left!==null && bottom!==null && right!==null) {
|
||||
// var mnu = this.btnPageMargins.menu.items[0];
|
||||
// mnu.options.value = mnu.value = [parseFloat(top), parseFloat(left), parseFloat(bottom), parseFloat(right)];
|
||||
// mnu.setVisible(true);
|
||||
// $(mnu.el).html(mnu.template({id: Common.UI.getId(), caption : mnu.caption, options : mnu.options}));
|
||||
// } else
|
||||
// this.btnPageMargins.menu.items[0].setVisible(false);
|
||||
|
||||
var value = Common.localStorage.getItem("de-compact-toolbar");
|
||||
var valueCompact = !!(value !== null && parseInt(value) == 1 || value === null && mode.customization && mode.customization.compactToolbar);
|
||||
|
||||
me.$el.html(this.template({
|
||||
isCompactView: valueCompact
|
||||
}));
|
||||
var _tpl_ = this.template({
|
||||
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;
|
||||
|
||||
this.trigger('render:after', this);
|
||||
|
|
@ -1011,81 +1027,95 @@ define([
|
|||
this.needShowSynchTip = false;
|
||||
/** 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;
|
||||
},
|
||||
|
||||
rendererComponents: function(mode) {
|
||||
var prefix = (mode === 'short') ? 'short' : 'full';
|
||||
|
||||
var replacePlacholder = function(id, cmp) {
|
||||
var placeholderEl = $(id),
|
||||
placeholderDom = placeholderEl.get(0);
|
||||
|
||||
if (placeholderDom) {
|
||||
if (cmp.rendered) {
|
||||
cmp.el = document.getElementById(cmp.id);
|
||||
placeholderDom.appendChild(document.getElementById(cmp.id));
|
||||
} else {
|
||||
cmp.render(placeholderEl);
|
||||
}
|
||||
rendererComponents: function(html) {
|
||||
var $host = $(html);
|
||||
var _injectComponent = function(id, cmp) {
|
||||
var $slot = $host.find(id);
|
||||
if ( $slot.length ) {
|
||||
cmp.rendered ?
|
||||
$slot.append(cmp.$el) : cmp.render($slot);
|
||||
}
|
||||
};
|
||||
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-newdocument', this.btnNewDocument);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-opendocument', this.btnOpenDocument);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-field-fontname', this.cmbFontName);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-field-fontsize', this.cmbFontSize);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-print', this.btnPrint);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-save', this.btnSave);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-undo', this.btnUndo);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-redo', this.btnRedo);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-copy', this.btnCopy);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-paste', this.btnPaste);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-incfont', this.btnIncFontSize);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-decfont', this.btnDecFontSize);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-bold', this.btnBold);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-italic', this.btnItalic);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-underline', this.btnUnderline);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-strikeout', this.btnStrikeout);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-superscript', this.btnSuperscript);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-subscript', this.btnSubscript);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-highlight', this.btnHighlightColor);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-fontcolor', this.btnFontColor);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-align-left', this.btnAlignLeft);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-align-center', this.btnAlignCenter);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-align-right', this.btnAlignRight);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-align-just', this.btnAlignJust);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-incoffset', this.btnIncLeftOffset);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-decoffset', this.btnDecLeftOffset);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-linespace', this.btnLineSpace);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-hidenchars', this.btnShowHidenChars);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-markers', this.btnMarkers);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-numbering', this.btnNumbers);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-multilevels', this.btnMultilevels);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-inserttable', this.btnInsertTable);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-insertimage', this.btnInsertImage);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-insertchart', this.btnInsertChart);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-inserttext', this.btnInsertText);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-dropcap', this.btnDropCap);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-columns', this.btnColumns);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-pagebreak', this.btnInsertPageBreak);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-inserthyperlink',this.btnInsertHyperlink);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-editheader', this.btnEditHeader);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-insertshape', this.btnInsertShape);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-insertequation', this.btnInsertEquation);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-pageorient', this.btnPageOrient);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-pagemargins', this.btnPageMargins);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-pagesize', this.btnPageSize);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-clearstyle', this.btnClearStyle);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-copystyle', this.btnCopyStyle);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-colorschemas', this.btnColorSchemas);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-hidebars', this.btnHide);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-settings', this.btnAdvSettings);
|
||||
replacePlacholder('#id-toolbar-full-placeholder-btn-paracolor', this.btnParagraphColor);
|
||||
replacePlacholder('#id-toolbar-full-placeholder-field-styles', this.listStyles);
|
||||
replacePlacholder('#id-toolbar-short-placeholder-btn-halign', this.btnHorizontalAlign);
|
||||
replacePlacholder('#id-toolbar-full-placeholder-btn-mailrecepients', this.btnMailRecepients);
|
||||
replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-notes', this.btnNotes);
|
||||
_injectComponent('#slot-btn-newdocument', this.btnNewDocument);
|
||||
_injectComponent('#slot-btn-opendocument', this.btnOpenDocument);
|
||||
_injectComponent('#slot-field-fontname', this.cmbFontName);
|
||||
_injectComponent('#slot-field-fontsize', this.cmbFontSize);
|
||||
_injectComponent('#slot-btn-print', this.btnPrint);
|
||||
_injectComponent('#slot-btn-save', this.btnSave);
|
||||
_injectComponent('#slot-btn-undo', this.btnUndo);
|
||||
_injectComponent('#slot-btn-redo', this.btnRedo);
|
||||
_injectComponent('#slot-btn-copy', this.btnCopy);
|
||||
_injectComponent('#slot-btn-paste', this.btnPaste);
|
||||
_injectComponent('#slot-btn-incfont', this.btnIncFontSize);
|
||||
_injectComponent('#slot-btn-decfont', this.btnDecFontSize);
|
||||
_injectComponent('#slot-btn-bold', this.btnBold);
|
||||
_injectComponent('#slot-btn-italic', this.btnItalic);
|
||||
_injectComponent('#slot-btn-underline', this.btnUnderline);
|
||||
_injectComponent('#slot-btn-strikeout', this.btnStrikeout);
|
||||
_injectComponent('#slot-btn-superscript', this.btnSuperscript);
|
||||
_injectComponent('#slot-btn-subscript', this.btnSubscript);
|
||||
_injectComponent('#slot-btn-highlight', this.btnHighlightColor);
|
||||
_injectComponent('#slot-btn-fontcolor', this.btnFontColor);
|
||||
_injectComponent('#slot-btn-align-left', this.btnAlignLeft);
|
||||
_injectComponent('#slot-btn-align-center', this.btnAlignCenter);
|
||||
_injectComponent('#slot-btn-align-right', this.btnAlignRight);
|
||||
_injectComponent('#slot-btn-align-just', this.btnAlignJust);
|
||||
_injectComponent('#slot-btn-incoffset', this.btnIncLeftOffset);
|
||||
_injectComponent('#slot-btn-decoffset', this.btnDecLeftOffset);
|
||||
_injectComponent('#slot-btn-linespace', this.btnLineSpace);
|
||||
_injectComponent('#slot-btn-hidenchars', this.btnShowHidenChars);
|
||||
_injectComponent('#slot-btn-markers', this.btnMarkers);
|
||||
_injectComponent('#slot-btn-numbering', this.btnNumbers);
|
||||
_injectComponent('#slot-btn-multilevels', this.btnMultilevels);
|
||||
_injectComponent('#slot-btn-instable', this.btnInsertTable);
|
||||
_injectComponent('#slot-btn-insimage', this.btnInsertImage);
|
||||
_injectComponent('#slot-btn-inschart', this.btnInsertChart);
|
||||
_injectComponent('#slot-btn-instext', this.btnInsertText);
|
||||
_injectComponent('#slot-btn-dropcap', this.btnDropCap);
|
||||
_injectComponent('#slot-btn-columns', this.btnColumns);
|
||||
_injectComponent('#slot-btn-pagebreak', this.btnInsertPageBreak);
|
||||
_injectComponent('#slot-btn-inshyperlink',this.btnInsertHyperlink);
|
||||
_injectComponent('#slot-btn-editheader', this.btnEditHeader);
|
||||
_injectComponent('#slot-btn-insshape', this.btnInsertShape);
|
||||
_injectComponent('#slot-btn-insequation', this.btnInsertEquation);
|
||||
_injectComponent('#slot-btn-pageorient', this.btnPageOrient);
|
||||
_injectComponent('#slot-btn-pagemargins', this.btnPageMargins);
|
||||
_injectComponent('#slot-btn-pagesize', this.btnPageSize);
|
||||
_injectComponent('#slot-btn-clearstyle', this.btnClearStyle);
|
||||
_injectComponent('#slot-btn-copystyle', this.btnCopyStyle);
|
||||
_injectComponent('#slot-btn-colorschemas', this.btnColorSchemas);
|
||||
_injectComponent('#slot-btn-hidebars', this.btnHide);
|
||||
_injectComponent('#slot-btn-settings', this.btnAdvSettings);
|
||||
_injectComponent('#slot-btn-paracolor', this.btnParagraphColor);
|
||||
_injectComponent('#slot-field-styles', this.listStyles);
|
||||
_injectComponent('#slot-btn-halign', this.btnHorizontalAlign);
|
||||
_injectComponent('#slot-btn-mailrecepients', this.btnMailRecepients);
|
||||
_injectComponent('#slot-btn-notes', this.btnNotes);
|
||||
return $host;
|
||||
},
|
||||
|
||||
createDelayedElements: function() {
|
||||
|
|
@ -1566,7 +1596,7 @@ define([
|
|||
|
||||
this.mode = mode;
|
||||
if (!mode.nativeApp) {
|
||||
var nativeBtnGroup = $('.toolbar-group-native');
|
||||
var nativeBtnGroup = this.$el.find('.group.native');
|
||||
|
||||
if (nativeBtnGroup) {
|
||||
nativeBtnGroup.hide();
|
||||
|
|
|
|||
|
|
@ -1,9 +1,123 @@
|
|||
@height-tabs: 42px;
|
||||
@height-controls: 67px;
|
||||
|
||||
.toolbar {
|
||||
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;
|
||||
.box-inner-shadow(0 -1px 0 @gray-dark);
|
||||
|
||||
.toolbar-group {
|
||||
.toolbar-group, .group {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
|
|
@ -14,7 +128,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.toolbar-row {
|
||||
.group {
|
||||
//background-color: #a9f261;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.toolbar-row, .elset {
|
||||
height: 20px;
|
||||
font-size: 0;
|
||||
|
||||
|
|
@ -23,6 +142,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.elset {
|
||||
//background-color: #f2f254;
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin-left: 12px;
|
||||
|
||||
|
|
@ -35,7 +158,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.btn-placeholder {
|
||||
.btn-slot {
|
||||
// background-color: red;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
|
|
@ -437,3 +560,23 @@
|
|||
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;
|
||||
}
|
||||
Loading…
Reference in a new issue