[PE] Change header/footer settings

This commit is contained in:
Julia Radzhabova
2023-07-11 12:44:08 +03:00
parent 6b87a53598
commit fc7dcf8026
8 changed files with 189 additions and 72 deletions

View File

@ -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;
}

View File

@ -1,4 +1,9 @@
<table cols="1">
<tr><td class="padding-small">
<div class="input-row-tabs">
<button type="button" class="btn btn-text-default auto" id="hf-dlg-btn-slide"><%= scope.textSlide %></button><button type="button" class="btn btn-text-default auto" id="hf-dlg-btn-notes"><%= scope.textNotes %></button>
</div>
</td></tr>
<tr><td class="padding-small">
<div id="hf-dlg-chb-datetime"></div>
</td></tr>
@ -34,14 +39,19 @@
<tr><td class="padding-large">
<div id="hf-dlg-chb-slide"></div>
</td></tr>
<tr><td class="padding-small">
<tr class="notes hidden"><td>
<div id="hf-dlg-chb-text-header"></div>
</td></tr>
<tr class="notes hidden"><td class="padding-large">
<div id="hf-dlg-text-header" class="input-row margin-left-22"></div>
</td></tr>
<tr><td>
<div id="hf-dlg-chb-text"></div>
</td></tr>
<tr><td class="padding-large">
<div id="hf-dlg-text" class="input-row margin-left-22"></div>
</td></tr>
<tr><td class="padding-small"></td></tr>
<tr><td class="padding-small">
<tr class="slides"><td class="padding-small">
<div id="hf-dlg-chb-not-title"></div>
</td></tr>
</table>

View File

@ -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(
[
'<div class="box" style="height:' + (me.options.height - 85) + 'px;">',
@ -68,15 +68,18 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template',
'<div class="separator"></div>',
'<div class="menu-panel" style="width: 130px; padding-top: 17px;">',
'<label style="display:block;" class="input-label margin-left-15">' + me.textPreview + '</label>',
'<div class="margin-left-15" style="width: 100px; height: 80px; padding: 5px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;">',
'<div class="margin-left-15 slides" style="width: 100px; height: 80px; padding: 5px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;">',
'<div id="hf-dlg-canvas-preview" style="width: 100%;height: 100%;"></div>',
'</div>',
'<div class="margin-left-15 hidden notes" style="width: 100px; height: 122px; padding: 5px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;">',
'<div id="hf-dlg-canvas-preview-notes" style="width: 100%;height: 100%;"></div>',
'</div>',
'</div>',
'</div>',
'<div class="separator horizontal"></div>',
'<div class="footer center">',
'<button class="btn normal dlg-btn primary" result="all" style="width: auto; min-width: 86px;">' + me.applyAllText + '</button>',
'<button class="btn normal dlg-btn" result="ok" style="width: auto; min-width: 86px;">' + me.applyText + '</button>',
'<button id="hf-dlg-btn-apply" class="btn normal dlg-btn" result="ok" style="width: auto; min-width: 86px;">' + me.applyText + '</button>',
'<button class="btn normal dlg-btn" result="cancel">' + me.cancelButtonText + '</button>',
'</div>'
].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 cant 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 || {}))
});

View File

@ -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 || {}));
});

View File

@ -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",

View File

@ -38,3 +38,14 @@
}
}
#window-header-footer {
#hf-dlg-btn-slide {
border-radius: 0;
}
#hf-dlg-btn-notes {
border-radius: 0;
.margin-left(-1px);
}
}

View File

@ -100,7 +100,7 @@ define([
'</td>',
'</tr>',
'</table>',
'<div class="input-row input-row--tabs" style="margin-bottom: 15px;">',
'<div class="input-row input-row-tabs" style="margin-bottom: 15px;">',
'<button type="button" class="btn btn-text-default auto" id="id-dlg-hf-btn-all" style="border-radius: 0;">', this.textAll,'</button>',
'<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-odd" style="border-radius: 0;">', this.textOdd,'</button>',
'<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-even" style="border-radius: 0;">', this.textEven,'</button>',

View File

@ -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;