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

[SSE] Add cell snapping settings for Image/Shape/Chart

Browse source
This commit is contained in:
Julia Radzhabova 2019-10-03 16:56:19 +03:00
parent 25ef0ea5bb
commit 6bc1ec2648
8 changed files with 238 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
View file

@ -422,6 +422,27 @@
</table>
</div>
</div>
<div id="id-chart-settings-dlg-snap" class="settings-panel">
<div class="inner-content">
<table cols="1">
<tr>
<td class="padding-small">
<div id="chart-dlg-radio-twocell"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<div id="chart-dlg-radio-onecell"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<div id="chart-dlg-radio-absolute"></div>
</td>
</tr>
</table>
</div>
</div>
<div id="id-chart-settings-dlg-alttext" class="settings-panel">
<div class="inner-content">
<table cols="1" width="100%">

21
apps/spreadsheeteditor/main/app/template/ImageSettingsAdvanced.template
View file

@ -24,6 +24,27 @@
</table>
</div>
</div>
<div id="id-adv-image-snap" class="settings-panel">
<div class="inner-content">
<table cols="1">
<tr>
<td class="padding-small">
<div id="image-advanced-radio-twocell"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<div id="image-advanced-radio-onecell"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<div id="image-advanced-radio-absolute"></div>
</td>
</tr>
</table>
</div>
</div>
<div id="id-adv-image-alttext" class="settings-panel active">
<div class="inner-content">
<table cols="1" width="100%">

21
apps/spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template
View file

@ -138,6 +138,27 @@
</table>
</div>
</div>
<div id="id-adv-shape-snap" class="settings-panel">
<div class="inner-content">
<table cols="1">
<tr>
<td class="padding-small">
<div id="shape-radio-twocell"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<div id="shape-radio-onecell"></div>
</td>
</tr>
<tr>
<td class="padding-small">
<div id="shape-radio-absolute"></div>
</td>
</tr>
</table>
</div>
</div>
<div id="id-adv-shape-alttext" class="settings-panel">
<div class="inner-content">
<table cols="1" width="100%">

67
apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js
View file

@ -64,6 +64,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
{panelId: 'id-chart-settings-dlg-hor', panelCaption: this.textHorAxis},
{panelId: 'id-spark-settings-dlg-style', panelCaption: this.textTypeData},
{panelId: 'id-spark-settings-dlg-axis', panelCaption: this.textAxisOptions},
{panelId: 'id-chart-settings-dlg-snap', panelCaption: this.textSnap},
{panelId: 'id-chart-settings-dlg-alttext', panelCaption: this.textAlt}
],
contentTemplate: _.template(contentTemplate)({
@ -87,6 +88,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
};
this._noApply = true;
this._changedProps = null;
this._changedImageProps = null;
this.api = this.options.api;
this.chartSettings = this.options.chartSettings;
@ -980,6 +982,31 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
}
}, this));
// Snapping
this.radioTwoCell = new Common.UI.RadioBox({
el: $('#chart-dlg-radio-twocell'),
name: 'asc-radio-snap',
labelText: this.textTwoCell,
value: AscCommon.c_oAscCellAnchorType.cellanchorTwoCell
});
this.radioTwoCell.on('change', _.bind(this.onRadioSnapChange, this));
this.radioOneCell = new Common.UI.RadioBox({
el: $('#chart-dlg-radio-onecell'),
name: 'asc-radio-snap',
labelText: this.textOneCell,
value: AscCommon.c_oAscCellAnchorType.cellanchorOneCell
});
this.radioOneCell.on('change', _.bind(this.onRadioSnapChange, this));
this.radioAbsolute = new Common.UI.RadioBox({
el: $('#chart-dlg-radio-absolute'),
name: 'asc-radio-snap',
labelText: this.textAbsolute,
value: AscCommon.c_oAscCellAnchorType.cellanchorAbsolute
});
this.radioAbsolute.on('change', _.bind(this.onRadioSnapChange, this));
// Alt Text
this.inputAltTitle = new Common.UI.InputField({
@ -1016,6 +1043,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
this.btnsCategory[2].setVisible(false);
this.btnsCategory[3].setVisible(false);
this.btnsCategory[6].setVisible(false);
this.btnsCategory[7].setVisible(false);
}
if (this.storageName) {
@ -1299,7 +1327,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
this._changedProps.asc_setStyle(record.get('data'));
}
},
_setDefaults: function(props) {
var me = this;
if (props ){
@ -1366,6 +1394,19 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
value = this.imageSettings.asc_getDescription();
this.textareaAltDescription.val(value ? value : '');
value = this.imageSettings.asc_getAnchor();
switch (value) {
case AscCommon.c_oAscCellAnchorType.cellanchorTwoCell:
this.radioTwoCell.setValue(true, true);
break;
case AscCommon.c_oAscCellAnchorType.cellanchorOneCell:
this.radioOneCell.setValue(true, true);
break;
case AscCommon.c_oAscCellAnchorType.cellanchorAbsolute:
this.radioAbsolute.setValue(true, true);
break;
}
}
} else { // sparkline
this._state.SparkType = props.asc_getType();
@ -1474,19 +1515,29 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
this.chartSettings.putVertAxisProps(this.vertAxisProps);
this.chartSettings.putHorAxisProps(this.horAxisProps);
var imagesettings = (this.isAltTitleChanged || this.isAltDescChanged) ? new Asc.asc_CImgProperty() : null;
if ((this.isAltTitleChanged || this.isAltDescChanged) && !this._changedImageProps)
this._changedImageProps = new Asc.asc_CImgProperty();
if (this.isAltTitleChanged)
imagesettings.asc_putTitle(this.inputAltTitle.getValue());
this._changedImageProps.asc_putTitle(this.inputAltTitle.getValue());
if (this.isAltDescChanged)
imagesettings.asc_putDescription(this.textareaAltDescription.val());
this._changedImageProps.asc_putDescription(this.textareaAltDescription.val());
return { chartSettings: this.chartSettings, imageSettings: imagesettings};
return { chartSettings: this.chartSettings, imageSettings: this._changedImageProps};
} else {
return { chartSettings: this._changedProps };
}
},
onRadioSnapChange: function(field, newValue, eOpts) {
if (newValue) {
if (!this._changedImageProps)
this._changedImageProps = new Asc.asc_CImgProperty();
this._changedImageProps.asc_putAnchor(field.options.value);
}
},
isRangeValid: function() {
if (this.isChart) {
var isvalid;
@ -1759,7 +1810,11 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
textAltDescription: 'Description',
textAltTip: 'The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.',
textSurface: 'Surface',
errorMaxPoints: 'ERROR! The maximum number of points in series per chart is 4096.'
errorMaxPoints: 'ERROR! The maximum number of points in series per chart is 4096.',
textSnap: 'Cell Snapping',
textAbsolute: 'Don\'t move or size with cells',
textOneCell: 'Move but don\'t size with cells',
textTwoCell: 'Move and size with cells'
}, SSE.Views.ChartSettingsDlg || {}));
});

51
apps/spreadsheeteditor/main/app/view/ImageSettingsAdvanced.js
View file

@ -60,6 +60,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ImageSettingsAdvanced.temp
title: this.textTitle,
items: [
{panelId: 'id-adv-image-rotate', panelCaption: this.textRotation},
{panelId: 'id-adv-image-snap', panelCaption: this.textSnap},
{panelId: 'id-adv-image-alttext', panelCaption: this.textAlt}
],
contentTemplate: _.template(contentTemplate)({
@ -98,6 +99,31 @@ define([ 'text!spreadsheeteditor/main/app/template/ImageSettingsAdvanced.temp
labelText: this.textVertically
});
// Snapping
this.radioTwoCell = new Common.UI.RadioBox({
el: $('#image-advanced-radio-twocell'),
name: 'asc-radio-snap',
labelText: this.textTwoCell,
value: AscCommon.c_oAscCellAnchorType.cellanchorTwoCell
});
this.radioTwoCell.on('change', _.bind(this.onRadioSnapChange, this));
this.radioOneCell = new Common.UI.RadioBox({
el: $('#image-advanced-radio-onecell'),
name: 'asc-radio-snap',
labelText: this.textOneCell,
value: AscCommon.c_oAscCellAnchorType.cellanchorOneCell
});
this.radioOneCell.on('change', _.bind(this.onRadioSnapChange, this));
this.radioAbsolute = new Common.UI.RadioBox({
el: $('#image-advanced-radio-absolute'),
name: 'asc-radio-snap',
labelText: this.textAbsolute,
value: AscCommon.c_oAscCellAnchorType.cellanchorAbsolute
});
this.radioAbsolute.on('change', _.bind(this.onRadioSnapChange, this));
// Alt Text
this.inputAltTitle = new Common.UI.InputField({
@ -120,6 +146,12 @@ define([ 'text!spreadsheeteditor/main/app/template/ImageSettingsAdvanced.temp
this.afterRender();
},
onRadioSnapChange: function(field, newValue, eOpts) {
if (newValue && this._changedProps) {
this._changedProps.asc_putAnchor(field.options.value);
}
},
afterRender: function() {
this._setDefaults(this._originalProps);
if (this.storageName) {
@ -141,6 +173,19 @@ define([ 'text!spreadsheeteditor/main/app/template/ImageSettingsAdvanced.temp
this.chFlipHor.setValue(props.asc_getFlipH());
this.chFlipVert.setValue(props.asc_getFlipV());
value = props.asc_getAnchor();
switch (value) {
case AscCommon.c_oAscCellAnchorType.cellanchorTwoCell:
this.radioTwoCell.setValue(true, true);
break;
case AscCommon.c_oAscCellAnchorType.cellanchorOneCell:
this.radioOneCell.setValue(true, true);
break;
case AscCommon.c_oAscCellAnchorType.cellanchorAbsolute:
this.radioAbsolute.setValue(true, true);
break;
}
var pluginGuid = props.asc_getPluginGuid();
this.btnsCategory[0].setVisible(pluginGuid === null || pluginGuid === undefined); // Rotation
@ -171,7 +216,11 @@ define([ 'text!spreadsheeteditor/main/app/template/ImageSettingsAdvanced.temp
textAngle: 'Angle',
textFlipped: 'Flipped',
textHorizontally: 'Horizontally',
textVertically: 'Vertically'
textVertically: 'Vertically',
textSnap: 'Cell Snapping',
textAbsolute: 'Don\'t move or size with cells',
textOneCell: 'Move but don\'t size with cells',
textTwoCell: 'Move and size with cells'
}, SSE.Views.ImageSettingsAdvanced || {}));
});

4
apps/spreadsheeteditor/main/app/view/ShapeSettings.js
View file

@ -699,8 +699,8 @@ define([
var elType, elValue;
for (var i = selectedElements.length - 1; i >= 0; i--) {
elType = selectedElements[i].asc_getObjectType();
if (Asc.c_oAscTypeSelectElement.Image == elType) {
elValue = selectedElements[i].asc_getObjectValue();
elValue = selectedElements[i].asc_getObjectValue();
if (Asc.c_oAscTypeSelectElement.Image == elType && elValue.asc_getShapeProperties()) {
(new SSE.Views.ShapeSettingsAdvanced(
{
shapeProps: elValue,

51
apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js
View file

@ -66,6 +66,7 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
{panelId: 'id-adv-shape-shape', panelCaption: this.textWeightArrows},
{panelId: 'id-adv-shape-margins', panelCaption: this.strMargins},
{panelId: 'id-adv-shape-columns', panelCaption: this.strColumns},
{panelId: 'id-adv-shape-snap', panelCaption: this.textSnap},
{panelId: 'id-adv-shape-alttext', panelCaption: this.textAlt}
],
contentTemplate: _.template(contentTemplate)({
@ -503,6 +504,31 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
}, this));
this.spinners.push(this.spnSpacing);
// Snapping
this.radioTwoCell = new Common.UI.RadioBox({
el: $('#shape-radio-twocell'),
name: 'asc-radio-snap',
labelText: this.textTwoCell,
value: AscCommon.c_oAscCellAnchorType.cellanchorTwoCell
});
this.radioTwoCell.on('change', _.bind(this.onRadioSnapChange, this));
this.radioOneCell = new Common.UI.RadioBox({
el: $('#shape-radio-onecell'),
name: 'asc-radio-snap',
labelText: this.textOneCell,
value: AscCommon.c_oAscCellAnchorType.cellanchorOneCell
});
this.radioOneCell.on('change', _.bind(this.onRadioSnapChange, this));
this.radioAbsolute = new Common.UI.RadioBox({
el: $('#shape-radio-absolute'),
name: 'asc-radio-snap',
labelText: this.textAbsolute,
value: AscCommon.c_oAscCellAnchorType.cellanchorAbsolute
});
this.radioAbsolute.on('change', _.bind(this.onRadioSnapChange, this));
// Alt Text
this.inputAltTitle = new Common.UI.InputField({
@ -585,6 +611,19 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
this.chFlipHor.setValue(props.asc_getFlipH());
this.chFlipVert.setValue(props.asc_getFlipV());
value = props.asc_getAnchor();
switch (value) {
case AscCommon.c_oAscCellAnchorType.cellanchorTwoCell:
this.radioTwoCell.setValue(true, true);
break;
case AscCommon.c_oAscCellAnchorType.cellanchorOneCell:
this.radioOneCell.setValue(true, true);
break;
case AscCommon.c_oAscCellAnchorType.cellanchorAbsolute:
this.radioAbsolute.setValue(true, true);
break;
}
this._changedProps = new Asc.asc_CImgProperty();
}
},
@ -779,6 +818,12 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
this._selectStyleItem(this.btnEndSize, record);
},
onRadioSnapChange: function(field, newValue, eOpts) {
if (newValue && this._changedProps) {
this._changedProps.asc_putAnchor(field.options.value);
}
},
textTop: 'Top',
textLeft: 'Left',
textBottom: 'Bottom',
@ -814,7 +859,11 @@ define([ 'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
textAngle: 'Angle',
textFlipped: 'Flipped',
textHorizontally: 'Horizontally',
textVertically: 'Vertically'
textVertically: 'Vertically',
textSnap: 'Cell Snapping',
textAbsolute: 'Don\'t move or size with cells',
textOneCell: 'Move but don\'t size with cells',
textTwoCell: 'Move and size with cells'
}, SSE.Views.ShapeSettingsAdvanced || {}));
});

12
apps/spreadsheeteditor/main/locale/en.json
View file

@ -1336,6 +1336,10 @@
"SSE.Views.ChartSettingsDlg.textYAxisTitle": "Y Axis Title",
"SSE.Views.ChartSettingsDlg.textZero": "Zero",
"SSE.Views.ChartSettingsDlg.txtEmpty": "This field is required",
"SSE.Views.ChartSettingsDlg.textSnap": "Cell Snapping",
"SSE.Views.ChartSettingsDlg.textAbsolute": "Don't move or size with cells",
"SSE.Views.ChartSettingsDlg.textOneCell": "Move but don't size with cells",
"SSE.Views.ChartSettingsDlg.textTwoCell": "Move and size with cells",
"SSE.Views.DataTab.capBtnGroup": "Group",
"SSE.Views.DataTab.capBtnTextToCol": "Text to Columns",
"SSE.Views.DataTab.capBtnUngroup": "Ungroup",
@ -1713,6 +1717,10 @@
"SSE.Views.ImageSettingsAdvanced.textRotation": "Rotation",
"SSE.Views.ImageSettingsAdvanced.textTitle": "Image - Advanced Settings",
"SSE.Views.ImageSettingsAdvanced.textVertically": "Vertically",
"SSE.Views.ImageSettingsAdvanced.textSnap": "Cell Snapping",
"SSE.Views.ImageSettingsAdvanced.textAbsolute": "Don't move or size with cells",
"SSE.Views.ImageSettingsAdvanced.textOneCell": "Move but don't size with cells",
"SSE.Views.ImageSettingsAdvanced.textTwoCell": "Move and size with cells",
"SSE.Views.LeftMenu.tipAbout": "About",
"SSE.Views.LeftMenu.tipChat": "Chat",
"SSE.Views.LeftMenu.tipComments": "Comments",
@ -2019,6 +2027,10 @@
"SSE.Views.ShapeSettingsAdvanced.textVertically": "Vertically",
"SSE.Views.ShapeSettingsAdvanced.textWeightArrows": "Weights & Arrows",
"SSE.Views.ShapeSettingsAdvanced.textWidth": "Width",
"SSE.Views.ShapeSettingsAdvanced.textSnap": "Cell Snapping",
"SSE.Views.ShapeSettingsAdvanced.textAbsolute": "Don't move or size with cells",
"SSE.Views.ShapeSettingsAdvanced.textOneCell": "Move but don't size with cells",
"SSE.Views.ShapeSettingsAdvanced.textTwoCell": "Move and size with cells",
"SSE.Views.SignatureSettings.notcriticalErrorTitle": "Warning",
"SSE.Views.SignatureSettings.strDelete": "Remove Signature",
"SSE.Views.SignatureSettings.strDetails": "Signature Details",