diff --git a/apps/documenteditor/main/app/controller/Viewport.js b/apps/documenteditor/main/app/controller/Viewport.js
index 2f223ae24..5e4c0e9eb 100644
--- a/apps/documenteditor/main/app/controller/Viewport.js
+++ b/apps/documenteditor/main/app/controller/Viewport.js
@@ -133,6 +133,7 @@ define([
onWindowResize: function(e) {
this.onLayoutChanged('window');
+ Common.NotificationCenter.trigger('window:resize');
}
});
});
diff --git a/apps/documenteditor/main/app/template/Toolbar.template b/apps/documenteditor/main/app/template/Toolbar.template
index 92723424a..5aa186500 100644
--- a/apps/documenteditor/main/app/template/Toolbar.template
+++ b/apps/documenteditor/main/app/template/Toolbar.template
@@ -2,7 +2,7 @@
' +
+ //
+ // DataView and pickers
+ //
+
+ this.btnHighlightColor.on('render:after', function (btn) {
+ var colorVal = $('
');
+ $('button:first-child', btn.cmpEl).append(colorVal);
+ btn.currentColor = 'FFFF00';
+ colorVal.css('background-color', '#' + btn.currentColor);
+
+ me.mnuHighlightColorPicker = new Common.UI.ColorPalette({
+ el: $('#id-toolbar-menu-highlight'),
+ value: 'FFFF00',
+ colors: [
+ 'FFFF00', '00FF00', '00FFFF', 'FF00FF', '0000FF', 'FF0000', '00008B', '008B8B',
+ '006400', '800080', '8B0000', '808000', 'FFFFFF', 'D3D3D3', 'A9A9A9', '000000'
+ ]
+ });
+
+ me.mnuHighlightColorPicker.select('FFFF00');
+ });
+
+ this.btnFontColor.on('render:after', function (btn) {
+ var colorVal = $('
');
+ $('button:first-child', btn.cmpEl).append(colorVal);
+ colorVal.css('background-color', btn.currentColor || 'transparent');
+
+ me.mnuFontColorPicker = new Common.UI.ThemeColorPalette({
+ el: $('#id-toolbar-menu-fontcolor')
+ });
+ });
+
+ this.btnParagraphColor.on('render:after', function (btn) {
+ var colorVal = $('
');
+ $('button:first-child', btn.cmpEl).append(colorVal);
+ colorVal.css('background-color', btn.currentColor || 'transparent');
+
+ me.mnuParagraphColorPicker = new Common.UI.ThemeColorPalette({
+ el: $('#id-toolbar-menu-paracolor'),
+ transparent: true
+ });
+ });
+
+ this.cmbFontSize = new Common.UI.ComboBox({
+ cls: 'input-group-nr',
+ menuStyle: 'min-width: 55px;',
+ hint: this.tipFontSize,
+ data: [
+ {value: 8, displayValue: "8"},
+ {value: 9, displayValue: "9"},
+ {value: 10, displayValue: "10"},
+ {value: 11, displayValue: "11"},
+ {value: 12, displayValue: "12"},
+ {value: 14, displayValue: "14"},
+ {value: 16, displayValue: "16"},
+ {value: 18, displayValue: "18"},
+ {value: 20, displayValue: "20"},
+ {value: 22, displayValue: "22"},
+ {value: 24, displayValue: "24"},
+ {value: 26, displayValue: "26"},
+ {value: 28, displayValue: "28"},
+ {value: 36, displayValue: "36"},
+ {value: 48, displayValue: "48"},
+ {value: 72, displayValue: "72"}
+ ]
+ });
+ this.paragraphControls.push(this.cmbFontSize);
+
+ this.cmbFontName = new Common.UI.ComboBoxFonts({
+ cls: 'input-group-nr',
+ menuCls: 'scrollable-menu',
+ menuStyle: 'min-width: 325px;',
+ hint: this.tipFontName,
+ store: new Common.Collections.Fonts()
+ });
+ this.paragraphControls.push(this.cmbFontName);
+
+ this.listStylesAdditionalMenuItem = new Common.UI.MenuItem({
+ template: _.template(
+ '
' +
'' +
'' +
- '
')
- });
-
- this.listStyles = new Common.UI.ComboDataView({
- cls : 'combo-styles',
- itemWidth : 104,
- itemHeight : 38,
-// hint : this.tipParagraphStyle,
- enableKeyEvents: true,
- additionalMenuItems: [this.listStylesAdditionalMenuItem],
- beforeOpenHandler: function(e) {
- var cmp = this,
- menu = cmp.openButton.menu,
- minMenuColumn = 6;
-
- if (menu.cmpEl) {
- var itemEl = $(cmp.cmpEl.find('.dataview.inner .style').get(0)).parent();
- var itemMargin = /*parseInt($(itemEl.get(0)).parent().css('margin-right'))*/-1;
- var itemWidth = itemEl.is(':visible') ? parseInt(itemEl.css('width')) :
- (cmp.itemWidth + parseInt(itemEl.css('padding-left')) + parseInt(itemEl.css('padding-right')) +
- parseInt(itemEl.css('border-left-width')) + parseInt(itemEl.css('border-right-width')));
-
- var minCount = cmp.menuPicker.store.length >= minMenuColumn ? minMenuColumn : cmp.menuPicker.store.length,
- columnCount = Math.min(cmp.menuPicker.store.length, Math.round($('.dataview', $(cmp.fieldPicker.el)).width() / (itemMargin + itemWidth) + 0.5));
-
- columnCount = columnCount < minCount ? minCount : columnCount;
- menu.menuAlignEl = cmp.cmpEl;
-
- menu.menuAlign = 'tl-tl';
- var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - columnCount * (itemMargin + itemWidth) - 1;
- menu.setOffset(Math.min(offset, 0));
-
- menu.cmpEl.css({
- 'width' : columnCount * (itemWidth + itemMargin),
- 'min-height': cmp.cmpEl.height()
- });
- }
-
- if (cmp.menuPicker.scroller) {
- cmp.menuPicker.scroller.update({
- includePadding: true,
- suppressScrollX: true
- });
- }
-
- cmp.removeTips();
- }
- });
-
- this.listStyles.fieldPicker.itemTemplate = _.template([
- '
'
- ].join(''));
- this.listStyles.menuPicker.itemTemplate = _.template([
- '
'
- ].join(''));
- this.paragraphControls.push(this.listStyles);
- this.textOnlyControls.push(this.listStyles);
-
- // Disable all components before load document
- _.each(this.toolbarControls.concat(this.paragraphControls), function(cmp) {
- if (_.isFunction(cmp.setDisabled))
- cmp.setDisabled(true);
- });
- this.btnMailRecepients.setDisabled(true);
-
- var editStyleMenuUpdate = new Common.UI.MenuItem({
- caption : me.textStyleMenuUpdate
- }).on('click', _.bind(me.onStyleMenuUpdate, me));
-
- var editStyleMenuRestore = new Common.UI.MenuItem({
- caption : me.textStyleMenuDelete
- }).on('click', _.bind(me.onStyleMenuDelete, me));
-
- var editStyleMenuDelete = new Common.UI.MenuItem({
- caption : me.textStyleMenuRestore
- }).on('click', _.bind(me.onStyleMenuDelete, me));
-
- var editStyleMenuRestoreAll = new Common.UI.MenuItem({
- caption : me.textStyleMenuRestoreAll
- }).on('click', _.bind(me.onStyleMenuRestoreAll, me));
-
- var editStyleMenuDeleteAll = new Common.UI.MenuItem({
- caption : me.textStyleMenuDeleteAll
- }).on('click', _.bind(me.onStyleMenuDeleteAll, me));
-
- if (this.styleMenu == null) {
- this.styleMenu = new Common.UI.Menu({
- items: [
- editStyleMenuUpdate,
- editStyleMenuRestore,
- editStyleMenuDelete,
- editStyleMenuRestoreAll,
- editStyleMenuDeleteAll
- ]
+ '
')
});
- }
- return this;
- },
+ this.listStyles = new Common.UI.ComboDataView({
+ cls: 'combo-styles',
+ itemWidth: 104,
+ itemHeight: 38,
+// hint : this.tipParagraphStyle,
+ enableKeyEvents: true,
+ additionalMenuItems: [this.listStylesAdditionalMenuItem],
+ beforeOpenHandler: function (e) {
+ var cmp = this,
+ menu = cmp.openButton.menu,
+ minMenuColumn = 6;
- render: function (mode) {
- var me = this;
+ if (menu.cmpEl) {
+ var itemEl = $(cmp.cmpEl.find('.dataview.inner .style').get(0)).parent();
+ var itemMargin = /*parseInt($(itemEl.get(0)).parent().css('margin-right'))*/-1;
+ var itemWidth = itemEl.is(':visible') ? parseInt(itemEl.css('width')) :
+ (cmp.itemWidth + parseInt(itemEl.css('padding-left')) + parseInt(itemEl.css('padding-right')) +
+ parseInt(itemEl.css('border-left-width')) + parseInt(itemEl.css('border-right-width')));
- /**
- * Render UI layout
- */
+ var minCount = cmp.menuPicker.store.length >= minMenuColumn ? minMenuColumn : cmp.menuPicker.store.length,
+ columnCount = Math.min(cmp.menuPicker.store.length, Math.round($('.dataview', $(cmp.fieldPicker.el)).width() / (itemMargin + itemWidth) + 0.5));
- this.trigger('render:before', this);
+ columnCount = columnCount < minCount ? minCount : columnCount;
+ menu.menuAlignEl = cmp.cmpEl;
- var top = Common.localStorage.getItem("de-pgmargins-top"),
- 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);
+ menu.menuAlign = 'tl-tl';
+ var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - columnCount * (itemMargin + itemWidth) - 1;
+ menu.setOffset(Math.min(offset, 0));
- var value = Common.localStorage.getItem("de-compact-toolbar");
- var valueCompact = !!(value !== null && parseInt(value) == 1 || value === null && mode.customization && mode.customization.compactToolbar);
+ menu.cmpEl.css({
+ 'width': columnCount * (itemWidth + itemMargin),
+ 'min-height': cmp.cmpEl.height()
+ });
+ }
- 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'
- }]
- });
+ if (cmp.menuPicker.scroller) {
+ cmp.menuPicker.scroller.update({
+ includePadding: true,
+ suppressScrollX: true
+ });
+ }
- me.$el.html( me.rendererComponents(_tpl_) );
+ cmp.removeTips();
+ }
+ });
- me.isCompactView = valueCompact;
+ this.listStyles.fieldPicker.itemTemplate = _.template([
+ '