From fc7dcf8026fb0de7748137c3053c36ea33f6ce16 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 11 Jul 2023 12:44:08 +0300 Subject: [PATCH] [PE] Change header/footer settings --- .../less/advanced-settings-window.less | 6 + .../app/template/HeaderFooterDialog.template | 16 +- .../main/app/view/HeaderFooterDialog.js | 195 +++++++++++++----- .../main/app/view/Toolbar.js | 10 +- apps/presentationeditor/main/locale/en.json | 16 +- .../resources/less/advanced-settings.less | 11 + .../main/app/view/HeaderFooterDialog.js | 2 +- .../resources/less/advanced-settings.less | 5 - 8 files changed, 189 insertions(+), 72 deletions(-) diff --git a/apps/common/main/resources/less/advanced-settings-window.less b/apps/common/main/resources/less/advanced-settings-window.less index 95c299abe3..73c6ae6621 100644 --- a/apps/common/main/resources/less/advanced-settings-window.less +++ b/apps/common/main/resources/less/advanced-settings-window.less @@ -129,3 +129,9 @@ } } +.input-row-tabs { + border-bottom: @scaled-one-px-value-ie solid @border-divider-ie; + border-bottom: @scaled-one-px-value solid @border-divider; + height: @input-height-base; +} + diff --git a/apps/presentationeditor/main/app/template/HeaderFooterDialog.template b/apps/presentationeditor/main/app/template/HeaderFooterDialog.template index 3122db464d..a1012d5858 100644 --- a/apps/presentationeditor/main/app/template/HeaderFooterDialog.template +++ b/apps/presentationeditor/main/app/template/HeaderFooterDialog.template @@ -1,4 +1,9 @@ + @@ -34,14 +39,19 @@ - + + - -
+
+ +
+
+
+
diff --git a/apps/presentationeditor/main/app/view/HeaderFooterDialog.js b/apps/presentationeditor/main/app/view/HeaderFooterDialog.js index 2c2d2c7ad8..a0e5853fa3 100644 --- a/apps/presentationeditor/main/app/view/HeaderFooterDialog.js +++ b/apps/presentationeditor/main/app/view/HeaderFooterDialog.js @@ -47,7 +47,7 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template', PE.Views.HeaderFooterDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({ options: { contentWidth: 360, - height: 380, + height: 415, buttons: null, id: 'window-header-footer' }, @@ -56,7 +56,7 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template', var me = this; _.extend(this.options, { - title: this.textTitle, + title: this.textHFTitle, template: _.template( [ '
', @@ -68,15 +68,18 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template', '
', '
', '', - '
', + '
', '
', '
', + '', '
', '
', '
', '
', '', - '', + '', '', '
' ].join('') @@ -89,7 +92,9 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template', this.handler = options.handler; this.hfProps = options.props; this.api = options.api; + this.type = options.type || 0;// 0 - slide, 1 - notes this.dateControls = []; + this.inited = []; Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options); }, @@ -98,6 +103,23 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template', Common.Views.AdvancedSettingsWindow.prototype.render.call(this); var me = this; + this.btnSlide = new Common.UI.Button({ + el: $('#hf-dlg-btn-slide'), + enableToggle: true, + toggleGroup: 'list-type', + allowDepress: false, + pressed: true + }); + this.btnSlide.on('click', _.bind(this.onHFTypeClick, this, 0)); + + this.btnNotes = new Common.UI.Button({ + el: $('#hf-dlg-btn-notes'), + enableToggle: true, + toggleGroup: 'list-type', + allowDepress: false + }); + this.btnNotes.on('click', _.bind(this.onHFTypeClick, this, 1)); + this.chDateTime = new Common.UI.CheckBox({ el: $('#hf-dlg-chb-datetime'), labelText: this.textDateTime @@ -112,7 +134,7 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template', this.chFooter = new Common.UI.CheckBox({ el: $('#hf-dlg-chb-text'), - labelText: this.textFooter + labelText: this.txtFooter }); this.chFooter.on('change', _.bind(this.setType, this, 'footer')); @@ -122,6 +144,18 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template', style : 'width: 100%;' }); + this.chHeader = new Common.UI.CheckBox({ + el: $('#hf-dlg-chb-text-header'), + labelText: this.txtHeader + }); + this.chHeader.on('change', _.bind(this.setType, this, 'header')); + + this.inputHeader = new Common.UI.InputField({ + el : $('#hf-dlg-text-header'), + validateOnBlur: false, + style : 'width: 100%;' + }); + var data = [{ value: 0x042C }, { value: 0x0402 }, { value: 0x0405 }, { value: 0x0406 }, { value: 0x0C07 }, { value: 0x0407 }, {value: 0x0807}, { value: 0x0408 }, { value: 0x0C09 }, { value: 0x0809 }, { value: 0x0409 }, { value: 0x0C0A }, { value: 0x080A }, { value: 0x040B }, { value: 0x040C }, { value: 0x100C }, { value: 0x0410 }, { value: 0x0810 }, { value: 0x0411 }, { value: 0x0412 }, { value: 0x0426 }, { value: 0x040E }, { value: 0x0413 }, { value: 0x0415 }, { value: 0x0416 }, { value: 0x0816 }, { value: 0x0419 }, { value: 0x041B }, { value: 0x0424 }, { value: 0x081D }, { value: 0x041D }, { value: 0x041F }, { value: 0x0422 }, { value: 0x042A }, { value: 0x0804 }, { value: 0x0404 }]; @@ -183,12 +217,20 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template', el: $('#hf-dlg-chb-not-title'), labelText: this.textNotTitle }); + this.chNotTitle.on('change', _.bind(this.setNotTitle, this)); + + this.btnApply = new Common.UI.Button({ + el: $('#hf-dlg-btn-apply') + }); + + this.headerControls = this.$window.find('.notes'); + this.slideControls = this.$window.find('.slides'); this.afterRender(); }, getFocusedComponents: function() { - return [ this.chDateTime, this.radioUpdate, this.cmbFormat, this.cmbLang, this.radioFixed, this.inputFixed, this.chSlide, this.chFooter, this.inputFooter, this.chNotTitle ]; + return [ this.chDateTime, this.radioUpdate, this.cmbFormat, this.cmbLang, this.radioFixed, this.inputFixed, this.chSlide, this.chHeader, this.inputHeader, this.chFooter, this.inputFooter, this.chNotTitle ]; }, getDefaultFocusableComponent: function () { @@ -222,6 +264,10 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template', this._setDefaults(this.hfProps); }, + setNotTitle: function(field, newValue) { + (this.type===0) && this.props.put_ShowOnTitleSlide(field.getValue()!=='checked'); + }, + setType: function(type, field, newValue) { var me = this; newValue = (newValue=='checked'); @@ -240,6 +286,12 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template', newValue && setTimeout(function(){ me.inputFooter.cmpEl.find('input').focus(); },50); + } else if (type == 'header') { + this.inputHeader.setDisabled(!newValue); + this.props.put_ShowHeader(newValue); + newValue && setTimeout(function(){ + me.inputHeader.cmpEl.find('input').focus(); + },50); } this.props.updateView(); }, @@ -278,68 +330,99 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template', this.props.get_DateTime().put_DateTime(format); } else { this.props.get_DateTime().put_DateTime(null); - this.props.get_DateTime().put_CustomDateTime(this.inputFixed.getValue()); } + this.props.get_DateTime().put_CustomDateTime(this.inputFixed.getValue()); }, - _setDefaults: function (props) { - if (props) { - var slideprops = props.get_Slide() || new AscCommonSlide.CAscHFProps(); + onHFTypeClick: function(type, btn, event) { + this.saveTempHFSettings(); + this.type = type; + this.ShowHideElem(); + this.fillHFSettings(); + }, - var val = slideprops.get_ShowDateTime(); - this.chDateTime.setValue(val, true); - _.each(this.dateControls, function(item) { - item.setDisabled(!val); - }); + ShowHideElem: function() { + var isSlide = this.type===0; + this.slideControls.toggleClass('hidden', !isSlide); + this.headerControls.toggleClass('hidden', isSlide); + this.chSlide.setCaption(isSlide ? this.textSlideNum : this.textPageNum); + this.btnApply.setVisible(isSlide); + }, - var format, fixed, - datetime = slideprops.get_DateTime(), - item = this.cmbLang.store.findWhere({value: datetime ? (datetime.get_Lang() || this.lang) : this.lang}); - this._originalLang = item ? item.get('value') : 0x0409; - this.cmbLang.setValue(this._originalLang); + fillHFSettings: function() { + var isSlide = this.type===0; + this.props = isSlide ? this.slideprops : this.notesprops; - if (val) { - format = datetime.get_DateTime(); - !format ? this.radioFixed.setValue(true) : this.radioUpdate.setValue(true); - !format && (fixed = datetime.get_CustomDateTime() || ''); - this.setDateTimeType(!format ? 'fixed' : 'update', null, true); - } - this.updateFormats(this.cmbLang.getValue(), format); - this.inputFixed.setValue((fixed!==undefined) ? fixed : this.cmbFormat.getRawValue()); + var val = this.props.get_ShowDateTime(); + this.chDateTime.setValue(val, true); + _.each(this.dateControls, function(item) { + item.setDisabled(!val); + }); - val = slideprops.get_ShowSlideNum(); - this.chSlide.setValue(val, true); + var format, + datetime = this.props.get_DateTime(), + item = this.cmbLang.store.findWhere({value: datetime ? (datetime.get_Lang() || this.lang) : this.lang}); + this._originalLang = item ? item.get('value') : 0x0409; + this.cmbLang.setValue(this._originalLang); - val = slideprops.get_ShowFooter(); - this.chFooter.setValue(val, true); - this.inputFooter.setDisabled(!val); - val && this.inputFooter.setValue(slideprops.get_Footer() || ''); + if (val || this.inited[this.type]) { + format = datetime.get_DateTime(); + !format ? this.radioFixed.setValue(true, true) : this.radioUpdate.setValue(true, true); + // !format && (fixed = datetime.get_CustomDateTime() || ''); + val && this.setDateTimeType(!format ? 'fixed' : 'update', null, true); + } + this.updateFormats(this.cmbLang.getValue(), format); + this.inputFixed.setValue(datetime.get_CustomDateTime() || (this.inited[this.type] ? '' : this.cmbFormat.getRawValue())); - val = slideprops.get_ShowOnTitleSlide(); + val = this.props.get_ShowSlideNum(); + this.chSlide.setValue(val, true); + + val = this.props.get_ShowFooter(); + this.chFooter.setValue(val, true); + this.inputFooter.setDisabled(!val); + this.inputFooter.setValue(this.props.get_Footer() || ''); + + if (isSlide) { + val = this.props.get_ShowOnTitleSlide(); this.chNotTitle.setValue(!val, true); + } else { + val = this.props.get_ShowHeader(); + this.chHeader.setValue(val, true); + this.inputHeader.setDisabled(!val); + this.inputHeader.setValue(this.props.get_Header() || ''); + } + this.inited[this.type] = true; - this.props = slideprops; - } else - this.props = new AscCommonSlide.CAscHFProps(); - - this.props.put_DivId('hf-dlg-canvas-preview'); + this.props.put_DivId(isSlide ? 'hf-dlg-canvas-preview' : 'hf-dlg-canvas-preview-notes'); this.props.put_Api(this.api); this.props.updateView(); }, - getSettings: function () { - var props = this.props; - if (props.get_ShowDateTime()) { - !props.get_DateTime() && props.put_DateTime(new AscCommonSlide.CAscDateTime()); - props.get_DateTime().put_Lang(this.cmbLang.getValue()); - this.onSelectFormat(); + _setDefaults: function (props) { + if (props) { + this.slideprops = props.get_Slide() || new AscCommonSlide.CAscHFProps(); + this.notesprops = props.get_Notes() || new AscCommonSlide.CAscHFProps(); + } else { + this.slideprops = new AscCommonSlide.CAscHFProps(); + this.notesprops = new AscCommonSlide.CAscHFProps(); } - if (props.get_ShowFooter()) { - props.put_Footer(this.inputFooter.getValue()); - } - props.put_ShowOnTitleSlide(this.chNotTitle.getValue()!='checked'); + this.ShowHideElem(); + this.fillHFSettings(); + }, - this.hfProps.put_Slide(this.props); + saveTempHFSettings: function() { + var props = this.props; + !props.get_DateTime() && props.put_DateTime(new AscCommonSlide.CAscDateTime()); + props.get_DateTime().put_Lang(this.cmbLang.getValue()); + this.onSelectFormat(); + props.put_Footer(this.inputFooter.getValue()); + (this.type===1) && props.put_Header(this.inputHeader.getValue()); + }, + + getSettings: function () { + this.saveTempHFSettings(); + this.hfProps.put_Slide(this.slideprops); + this.hfProps.put_Notes(this.notesprops); return this.hfProps; }, @@ -370,7 +453,6 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template', this.close(); }, - textTitle: 'Footer Settings', applyAllText: 'Apply to all', applyText: 'Apply', textLang: 'Language', @@ -378,12 +460,17 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template', textUpdate: 'Update automatically', textDateTime: 'Date and time', textSlideNum: 'Slide number', - textFooter: 'Text in footer', textNotTitle: 'Don\'t show on title slide', textPreview: 'Preview', diffLanguage: 'You can’t use a date format in a different language than the slide master.\nTo change the master, click \'Apply to all\' instead of \'Apply\'', notcriticalErrorTitle: 'Warning', - textFixed: 'Fixed' + textFixed: 'Fixed', + textSlide: 'Slide', + textNotes: 'Notes and Handouts', + textPageNum: 'Page number', + txtHeader: 'Header', + txtFooter: 'Footer', + textHFTitle: 'Header/Footer settings' }, PE.Views.HeaderFooterDialog || {})) }); \ No newline at end of file diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js index d73e8af933..c0571cc4b0 100644 --- a/apps/presentationeditor/main/app/view/Toolbar.js +++ b/apps/presentationeditor/main/app/view/Toolbar.js @@ -851,7 +851,7 @@ define([ id: 'id-toolbar-btn-editheader', cls: 'btn-toolbar x-huge icon-top', iconCls: 'toolbar__icon btn-editheader', - caption: me.capBtnInsHeader, + caption: me.capBtnInsHeaderFooter, lock: [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart], dataHint: '1', dataHintDirection: 'bottom', @@ -1495,7 +1495,7 @@ define([ this.btnShapeAlign.updateHint(this.tipShapeAlign); this.btnShapeArrange.updateHint(this.tipShapeArrange); this.btnSlideSize.updateHint(this.tipSlideSize); - this.btnEditHeader.updateHint(this.tipEditHeader); + this.btnEditHeader.updateHint(this.tipEditHeaderFooter); this.btnInsDateTime.updateHint(this.tipDateTime); this.btnInsSlideNum.updateHint(this.tipSlideNum); @@ -2284,10 +2284,8 @@ define([ mniImageFromStorage: 'Image from Storage', txtSlideAlign: 'Align to Slide', txtObjectsAlign: 'Align Selected Objects', - tipEditHeader: 'Edit footer', tipSlideNum: 'Insert slide number', tipDateTime: 'Insert current date and time', - capBtnInsHeader: 'Footer', capBtnSlideNum: 'Slide Number', capBtnDateTime: 'Date & Time', textListSettings: 'List Settings', @@ -2365,7 +2363,9 @@ define([ textSquareRoot: 'Square Root', textTilde: 'Tilde', textTradeMark: 'Trade Mark Sign', - textYen: 'Yen Sign' + textYen: 'Yen Sign', + capBtnInsHeaderFooter: 'Header & Footer', + tipEditHeaderFooter: 'Edit header or footer' } }()), PE.Views.Toolbar || {})); }); \ No newline at end of file diff --git a/apps/presentationeditor/main/locale/en.json b/apps/presentationeditor/main/locale/en.json index 2abc57e39d..5eef5e7d55 100644 --- a/apps/presentationeditor/main/locale/en.json +++ b/apps/presentationeditor/main/locale/en.json @@ -2015,14 +2015,20 @@ "PE.Views.HeaderFooterDialog.notcriticalErrorTitle": "Warning", "PE.Views.HeaderFooterDialog.textDateTime": "Date and time", "PE.Views.HeaderFooterDialog.textFixed": "Fixed", - "PE.Views.HeaderFooterDialog.textFooter": "Text in footer", + "del_PE.Views.HeaderFooterDialog.textFooter": "Text in footer", "PE.Views.HeaderFooterDialog.textFormat": "Formats", "PE.Views.HeaderFooterDialog.textLang": "Language", "PE.Views.HeaderFooterDialog.textNotTitle": "Don't show on title slide", "PE.Views.HeaderFooterDialog.textPreview": "Preview", "PE.Views.HeaderFooterDialog.textSlideNum": "Slide number", - "PE.Views.HeaderFooterDialog.textTitle": "Footer settings", + "del_PE.Views.HeaderFooterDialog.textTitle": "Footer settings", + "PE.Views.HeaderFooterDialog.textHFTitle": "Header/Footer settings", "PE.Views.HeaderFooterDialog.textUpdate": "Update automatically", + "PE.Views.HeaderFooterDialog.textSlide": "Slide", + "PE.Views.HeaderFooterDialog.textNotes": "Notes and Handouts", + "PE.Views.HeaderFooterDialog.textPageNum": "Page number", + "PE.Views.HeaderFooterDialog.txtHeader": "Header", + "PE.Views.HeaderFooterDialog.txtFooter": "Footer", "PE.Views.HyperlinkSettingsDialog.strDisplay": "Display", "PE.Views.HyperlinkSettingsDialog.strLinkTo": "Link to", "PE.Views.HyperlinkSettingsDialog.textDefault": "Selected text fragment", @@ -2504,7 +2510,8 @@ "PE.Views.Toolbar.capBtnAddComment": "Add Comment", "PE.Views.Toolbar.capBtnComment": "Comment", "PE.Views.Toolbar.capBtnDateTime": "Date & Time", - "PE.Views.Toolbar.capBtnInsHeader": "Footer", + "del_PE.Views.Toolbar.capBtnInsHeader": "Footer", + "PE.Views.Toolbar.capBtnInsHeaderFooter": "Header & Footer", "PE.Views.Toolbar.capBtnInsSmartArt": "SmartArt", "PE.Views.Toolbar.capBtnInsSymbol": "Symbol", "PE.Views.Toolbar.capBtnSlideNum": "Slide Number", @@ -2618,7 +2625,8 @@ "PE.Views.Toolbar.tipDateTime": "Insert current date and time", "PE.Views.Toolbar.tipDecFont": "Decrement font size", "PE.Views.Toolbar.tipDecPrLeft": "Decrease indent", - "PE.Views.Toolbar.tipEditHeader": "Edit footer", + "del_PE.Views.Toolbar.tipEditHeader": "Edit footer", + "PE.Views.Toolbar.tipEditHeaderFooter": "Edit header or footer", "PE.Views.Toolbar.tipFontColor": "Font color", "PE.Views.Toolbar.tipFontName": "Font", "PE.Views.Toolbar.tipFontSize": "Font size", diff --git a/apps/presentationeditor/main/resources/less/advanced-settings.less b/apps/presentationeditor/main/resources/less/advanced-settings.less index 0f54dcaa8b..f04db3422a 100644 --- a/apps/presentationeditor/main/resources/less/advanced-settings.less +++ b/apps/presentationeditor/main/resources/less/advanced-settings.less @@ -38,3 +38,14 @@ } } +#window-header-footer { + #hf-dlg-btn-slide { + border-radius: 0; + } + + #hf-dlg-btn-notes { + border-radius: 0; + .margin-left(-1px); + } +} + diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js index a3015a6ce3..8647f89b81 100644 --- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js +++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js @@ -100,7 +100,7 @@ define([ '', '', '', - '
', + '
', '', '', '', diff --git a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less index 4138ce4eeb..07101a3a7c 100644 --- a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less +++ b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less @@ -81,11 +81,6 @@ } } -.input-row--tabs { - border-bottom: @scaled-one-px-value-ie solid @border-divider-ie; - border-bottom: @scaled-one-px-value solid @border-divider; -} - .preview-canvas-container { border: @scaled-one-px-value-ie solid @border-regular-control-ie; border: @scaled-one-px-value solid @border-regular-control;