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

[PE] Fix Bug 46920: add highlight button

Browse source
This commit is contained in:
Julia Radzhabova 2021-01-29 17:31:46 +03:00
parent b003a5c021
commit e83357f86a
6 changed files with 142 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/presentationeditor/main/app/controller/Main.js
View file

@ -517,6 +517,12 @@ define([
var application = this.getApplication(),
toolbarView = application.getController('Toolbar').getView('Toolbar');
if (this.appOptions.isEdit && toolbarView && toolbarView.btnHighlightColor.pressed &&
( !_.isObject(arguments[1]) || arguments[1].id !== 'id-toolbar-btn-highlight')) {
this.api.SetMarkerFormat(false);
toolbarView.btnHighlightColor.toggle(false, false);
}
application.getController('DocumentHolder').getView('DocumentHolder').focus();
if (this.api && this.appOptions.isEdit && this.api.asc_isDocumentCanSave) {
var cansave = this.api.asc_isDocumentCanSave(),

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

@ -105,7 +105,8 @@ define([
fontsize: undefined,
in_equation: undefined,
in_chart: false,
no_columns: false
no_columns: false,
clrhighlight: undefined
};
this._isAddingShape = false;
this.slideSizeArr = [
@ -301,6 +302,9 @@ define([
toolbar.btnFontColor.on('click', _.bind(this.onBtnFontColor, this));
toolbar.mnuFontColorPicker.on('select', _.bind(this.onSelectFontColor, this));
$('#id-toolbar-menu-new-fontcolor').on('click', _.bind(this.onNewFontColor, this));
toolbar.btnHighlightColor.on('click', _.bind(this.onBtnHighlightColor, this));
toolbar.mnuHighlightColorPicker.on('select', _.bind(this.onSelectHighlightColor, this));
toolbar.mnuHighlightTransparent.on('click', _.bind(this.onHighlightTransparentClick, this));
toolbar.btnLineSpace.menu.on('item:toggle', _.bind(this.onLineSpaceToggle, this));
toolbar.btnColumns.menu.on('item:click', _.bind(this.onColumnsSelect, this));
toolbar.btnColumns.menu.on('show:before', _.bind(this.onBeforeColumns, this));
@ -353,6 +357,8 @@ define([
this.api.asc_registerCallback('asc_onVerticalTextAlign', _.bind(this.onApiVerticalTextAlign, this));
this.api.asc_registerCallback('asc_onCanAddHyperlink', _.bind(this.onApiCanAddHyperlink, this));
this.api.asc_registerCallback('asc_onTextColor', _.bind(this.onApiTextColor, this));
this.api.asc_registerCallback('asc_onMarkerFormatChanged', _.bind(this.onApiStartHighlight, this));
this.api.asc_registerCallback('asc_onTextHighLight', _.bind(this.onApiHighlightColor, this));
this.api.asc_registerCallback('asc_onUpdateThemeIndex', _.bind(this.onApiUpdateThemeIndex, this));
this.api.asc_registerCallback('asc_onEndAddShape', _.bind(this.onApiEndAddShape, this));
@ -1112,7 +1118,7 @@ define([
this.api.asc_ChangeTextCase(item.value);
Common.NotificationCenter.trigger('edit:complete', this.toolbar);
},
onMenuHorizontalAlignSelect: function(menu, item) {
this._state.pralign = undefined;
var btnHorizontalAlign = this.toolbar.btnHorizontalAlign;
@ -1903,6 +1909,86 @@ define([
this._state.clrtext_asccolor = color;
},
onApiStartHighlight: function(pressed) {
this.toolbar.btnHighlightColor.toggle(pressed, true);
},
onApiHighlightColor: function(c) {
if (c) {
if (c == -1) {
if (this._state.clrhighlight != -1) {
this.toolbar.mnuHighlightTransparent.setChecked(true, true);
if (this.toolbar.mnuHighlightColorPicker.cmpEl) {
this._state.clrhighlight = -1;
this.toolbar.mnuHighlightColorPicker.select(null, true);
}
}
} else if (c !== null) {
if (this._state.clrhighlight != c.get_hex().toUpperCase()) {
this.toolbar.mnuHighlightTransparent.setChecked(false);
this._state.clrhighlight = c.get_hex().toUpperCase();
if ( _.contains(this.toolbar.mnuHighlightColorPicker.colors, this._state.clrhighlight) )
this.toolbar.mnuHighlightColorPicker.select(this._state.clrhighlight, true);
}
} else {
if ( this._state.clrhighlight !== c) {
this.toolbar.mnuHighlightTransparent.setChecked(false, true);
this.toolbar.mnuHighlightColorPicker.select(null, true);
this._state.clrhighlight = c;
}
}
}
},
_setMarkerColor: function(strcolor, h) {
var me = this;
if (h === 'menu') {
me.toolbar.mnuHighlightTransparent.setChecked(false);
me.toolbar.btnHighlightColor.currentColor = strcolor;
me.toolbar.btnHighlightColor.setColor(me.toolbar.btnHighlightColor.currentColor);
me.toolbar.btnHighlightColor.toggle(true, true);
}
strcolor = strcolor || 'transparent';
if (strcolor == 'transparent') {
me.api.SetMarkerFormat(true, false);
} else {
var r = strcolor[0] + strcolor[1],
g = strcolor[2] + strcolor[3],
b = strcolor[4] + strcolor[5];
me.api.SetMarkerFormat(true, true, parseInt(r, 16), parseInt(g, 16), parseInt(b, 16));
}
Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnHighlightColor);
Common.component.Analytics.trackEvent('ToolBar', 'Highlight Color');
},
onBtnHighlightColor: function(btn) {
if (btn.pressed) {
this._setMarkerColor(btn.currentColor);
Common.component.Analytics.trackEvent('ToolBar', 'Highlight Color');
}
else {
this.api.SetMarkerFormat(false);
}
},
onSelectHighlightColor: function(picker, color) {
this._setMarkerColor(color, 'menu');
},
onHighlightTransparentClick: function(item, e) {
this._setMarkerColor('transparent', 'menu');
item.setChecked(true, true);
this.toolbar.btnHighlightColor.currentColor = 'transparent';
this.toolbar.btnHighlightColor.setColor(this.toolbar.btnHighlightColor.currentColor);
},
onResetAutoshapes: function () {
var me = this;
var onShowBefore = function(menu) {

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

@ -57,6 +57,7 @@
<span class="btn-slot" id="slot-btn-strikeout"></span>
<span class="btn-slot" id="slot-btn-superscript"></span>
<span class="btn-slot" 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>
</div>
</div>

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

@ -334,6 +334,28 @@ define([
});
me.paragraphControls.push(me.btnSubscript);
me.btnHighlightColor = new Common.UI.ButtonColored({
id: 'id-toolbar-btn-highlight',
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-highlight',
enableToggle: true,
allowDepress: true,
split: true,
lock: [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
menu: new Common.UI.Menu({
style: 'min-width: 100px;',
items: [
{template: _.template('<div id="id-toolbar-menu-highlight" style="width: 120px; height: 120px; margin: 10px;"></div>')},
{caption: '--'},
me.mnuHighlightTransparent = new Common.UI.MenuItem({
caption: me.strMenuNoFill,
checkable: true
})
]
})
});
me.paragraphControls.push(me.btnHighlightColor);
me.btnFontColor = new Common.UI.ButtonColored({
id: 'id-toolbar-btn-fontcolor',
cls: 'btn-toolbar',
@ -925,7 +947,7 @@ define([
this.lockControls = [this.btnChangeSlide, this.btnSave,
this.btnCopy, this.btnPaste, this.btnUndo, this.btnRedo, this.cmbFontName, this.cmbFontSize, this.btnIncFontSize, this.btnDecFontSize,
this.btnBold, this.btnItalic, this.btnUnderline, this.btnStrikeout, this.btnSuperscript, this.btnChangeCase,
this.btnBold, this.btnItalic, this.btnUnderline, this.btnStrikeout, this.btnSuperscript, this.btnChangeCase, this.btnHighlightColor,
this.btnSubscript, this.btnFontColor, this.btnClearStyle, this.btnCopyStyle, this.btnMarkers,
this.btnNumbers, this.btnDecLeftOffset, this.btnIncLeftOffset, this.btnLineSpace, this.btnHorizontalAlign, this.btnColumns,
this.btnVerticalAlign, this.btnShapeArrange, this.btnShapeAlign, this.btnInsertTable, this.btnInsertChart,
@ -1037,6 +1059,7 @@ define([
_injectComponent('#slot-btn-incfont', this.btnIncFontSize);
_injectComponent('#slot-btn-decfont', this.btnDecFontSize);
_injectComponent('#slot-btn-fontcolor', this.btnFontColor);
_injectComponent('#slot-btn-highlight', this.btnHighlightColor);
_injectComponent('#slot-btn-changecase', this.btnChangeCase);
_injectComponent('#slot-btn-clearstyle', this.btnClearStyle);
_injectComponent('#slot-btn-copystyle', this.btnCopyStyle);
@ -1159,6 +1182,7 @@ define([
this.btnSuperscript.updateHint(this.textSuperscript);
this.btnSubscript.updateHint(this.textSubscript);
this.btnFontColor.updateHint(this.tipFontColor);
this.btnHighlightColor.updateHint(this.tipHighlightColor);
this.btnChangeCase.updateHint(this.tipChangeCase);
this.btnClearStyle.updateHint(this.tipClearStyle);
this.btnCopyStyle.updateHint(this.tipCopyStyle + Common.Utils.String.platformKey('Ctrl+Shift+C'));
@ -1341,6 +1365,18 @@ define([
el: $('#id-toolbar-menu-fontcolor')
});
}
if (this.btnHighlightColor.cmpEl) {
this.btnHighlightColor.currentColor = 'FFFF00';
this.btnHighlightColor.setColor(this.btnHighlightColor.currentColor);
this.mnuHighlightColorPicker = new Common.UI.ColorPalette({
el: $('#id-toolbar-menu-highlight'),
colors: [
'FFFF00', '00FF00', '00FFFF', 'FF00FF', '0000FF', 'FF0000', '00008B', '008B8B',
'006400', '800080', '8B0000', '808000', 'FFFFFF', 'D3D3D3', 'A9A9A9', '000000'
]
});
this.mnuHighlightColorPicker.select('FFFF00');
}
},
setApi: function (api) {
@ -1775,7 +1811,9 @@ define([
mniLowerCase: 'lowercase',
mniUpperCase: 'UPPERCASE',
mniCapitalizeWords: 'Capitalize Each Word',
mniToggleCase: 'tOGGLE cASE'
mniToggleCase: 'tOGGLE cASE',
strMenuNoFill: 'No Fill',
tipHighlightColor: 'Highlight color'
}
}()), PE.Views.Toolbar || {}));
});

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

@ -1960,5 +1960,7 @@
"PE.Views.Toolbar.txtScheme8": "Flow",
"PE.Views.Toolbar.txtScheme9": "Foundry",
"PE.Views.Toolbar.txtSlideAlign": "Align to Slide",
"PE.Views.Toolbar.txtUngroup": "Ungroup"
"PE.Views.Toolbar.txtUngroup": "Ungroup",
"PE.Views.Toolbar.strMenuNoFill": "No Fill",
"PE.Views.Toolbar.tipHighlightColor": "Highlight color"
}

4
apps/presentationeditor/main/resources/less/toolbar.less
View file

@ -14,6 +14,10 @@
> .btn-slot:not(:last-child):not(.split) {
margin-right: 4px;
}
> .btn-slot:not(:last-child).split {
margin-right: 2px;
}
}
}