[DE] Added table settings: change width/height, distribute rows/columns.
This commit is contained in:
Julia Radzhabova
parent
1bbf47dd44
commit
f77dc3d45f
|
|
@ -260,6 +260,7 @@ define([
|
|||
this.rightmenu.paragraphSettings.updateMetricUnit();
|
||||
this.rightmenu.chartSettings.updateMetricUnit();
|
||||
this.rightmenu.imageSettings.updateMetricUnit();
|
||||
this.rightmenu.tableSettings.updateMetricUnit();
|
||||
},
|
||||
|
||||
createDelayedElements: function() {
|
||||
|
|
|
|||
|
|
@ -95,14 +95,9 @@
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=2>
|
||||
<label class="header"><%= scope.textWrap %></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small">
|
||||
<div id="table-button-wrap-none" style="display: inline-block; margin-right:5px;"></div>
|
||||
<div id="table-button-wrap-parallel" style="display: inline-block; margin-right:5px;"></div>
|
||||
<td class="padding-small" colspan=2>
|
||||
<label class="header" style="margin-top: 3px;"><%= scope.textEdit %></label>
|
||||
<div id="table-btn-edit" style="display: inline-block; float:right;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -110,10 +105,31 @@
|
|||
<div class="separator horizontal"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=2>
|
||||
<label class="header"><%= scope.textCellSize %></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small" colspan=2>
|
||||
<label class="header" style="margin-top: 3px;"><%= scope.textEdit %></label>
|
||||
<div id="table-btn-edit" style="display: inline-block; float:right;"></div>
|
||||
<label style="margin-top: 3px;"><%= scope.textHeight %></label>
|
||||
<div id="table-spin-cell-height" style="display: inline-block; float:right;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small" colspan=2>
|
||||
<label style="margin-top: 3px;"><%= scope.textWidth %></label>
|
||||
<div id="table-spin-cell-width" style="display: inline-block; float:right;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small" colspan=2>
|
||||
<button type="button" class="btn btn-text-default" id="table-btn-distrub-rows" style="width:100%;"><%= scope.textDistributeRows %></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="padding-small" colspan=2>
|
||||
<button type="button" class="btn btn-text-default" id="table-btn-distrub-cols" style="width:100%;"><%= scope.textDistributeCols %></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -79,14 +79,11 @@ define([
|
|||
CheckFirst: false,
|
||||
CheckLast: false,
|
||||
CheckColBanded: false,
|
||||
WrapStyle: -1,
|
||||
CanBeFlow: true,
|
||||
TableAlignment: -1,
|
||||
TableIndent: 0,
|
||||
BackColor: '#000000',
|
||||
RepeatRow: false,
|
||||
DisabledControls: false
|
||||
};
|
||||
this.spinners = [];
|
||||
this.lockedControls = [];
|
||||
this._locked = false;
|
||||
this._originalLook = new Asc.CTablePropLook();
|
||||
|
|
@ -96,7 +93,6 @@ define([
|
|||
this.CellColor = {Value: 1, Color: 'transparent'}; // value=1 - цвет определен - прозрачный или другой, value=0 - цвет не определен, рисуем прозрачным
|
||||
this.BorderSize = 1;
|
||||
this._noApply = false;
|
||||
this._wrapHandled = false;
|
||||
|
||||
this.render();
|
||||
},
|
||||
|
|
@ -140,24 +136,6 @@ define([
|
|||
this.fireEvent('editcomplete', this);
|
||||
},
|
||||
|
||||
onBtnWrapClick: function(btn, e) {
|
||||
if (this.api && btn.pressed && !this._noApply) {
|
||||
var properties = new Asc.CTableProp();
|
||||
properties.put_TableWrap(btn.options.posId);
|
||||
if (btn.options.posId == c_tableWrap.TABLE_WRAP_NONE) {
|
||||
if (this._state.TableAlignment<0)
|
||||
this._state.TableAlignment = c_tableAlign.TABLE_ALIGN_LEFT;
|
||||
properties.put_TableAlignment(this._state.TableAlignment);
|
||||
properties.put_TableIndent(this._state.TableIndent);
|
||||
}
|
||||
properties.put_CellSelect(true);
|
||||
this.api.tblApply(properties);
|
||||
}
|
||||
if (this._wrapHandled) { this._wrapHandled = false; return; }
|
||||
this._wrapHandled = true;
|
||||
this.fireEvent('editcomplete', this);
|
||||
},
|
||||
|
||||
onCheckRepeatRowChange: function(field, newValue, oldValue, eOpts) {
|
||||
if (this.api) {
|
||||
var properties = new Asc.CTableProp();
|
||||
|
|
@ -259,8 +237,6 @@ define([
|
|||
setApi: function(o) {
|
||||
this.api = o;
|
||||
if (o) {
|
||||
this.api.asc_registerCallback('asc_onTblWrapStyleChanged', _.bind(this._TblWrapStyleChanged, this));
|
||||
this.api.asc_registerCallback('asc_onTblAlignChanged', _.bind(this._TblAlignChanged, this));
|
||||
this.api.asc_registerCallback('asc_onInitTableTemplates', _.bind(this._onInitTemplates, this));
|
||||
}
|
||||
return this;
|
||||
|
|
@ -310,32 +286,6 @@ define([
|
|||
this.chLast.on('change', _.bind(this.onCheckTemplateChange, this, 4));
|
||||
this.chColBanded.on('change', _.bind(this.onCheckTemplateChange, this, 5));
|
||||
|
||||
this.btnWrapNone = new Common.UI.Button({
|
||||
cls: 'btn-options huge',
|
||||
iconCls: 'icon-right-panel btn-wrap-none',
|
||||
posId: c_tableWrap.TABLE_WRAP_NONE,
|
||||
hint: this.textWrapNoneTooltip,
|
||||
enableToggle: true,
|
||||
allowDepress: false,
|
||||
toggleGroup : 'tablewrapGroup'
|
||||
});
|
||||
this.btnWrapNone.render( $('#table-button-wrap-none')) ;
|
||||
this.btnWrapNone.on('click', _.bind(this.onBtnWrapClick, this));
|
||||
this.lockedControls.push(this.btnWrapNone);
|
||||
|
||||
this.btnWrapParallel = new Common.UI.Button({
|
||||
cls: 'btn-options huge',
|
||||
iconCls: 'icon-right-panel btn-wrap-parallel',
|
||||
posId: c_tableWrap.TABLE_WRAP_PARALLEL,
|
||||
hint: this.textWrapParallelTooltip,
|
||||
enableToggle: true,
|
||||
allowDepress: false,
|
||||
toggleGroup : 'tablewrapGroup'
|
||||
});
|
||||
this.btnWrapParallel.render( $('#table-button-wrap-parallel')) ;
|
||||
this.btnWrapParallel.on('click', _.bind(this.onBtnWrapClick, this));
|
||||
this.lockedControls.push(this.btnWrapParallel);
|
||||
|
||||
var _arrBorderPosition = [
|
||||
['l', 'btn-borders-small btn-position-left', 'table-button-border-left', this.tipLeft],
|
||||
['c','btn-borders-small btn-position-inner-vert', 'table-button-border-inner-vert', this.tipInnerVert],
|
||||
|
|
@ -417,6 +367,50 @@ define([
|
|||
this.chRepeatRow.on('change', _.bind(this.onCheckRepeatRowChange, this));
|
||||
this.lockedControls.push(this.chRepeatRow);
|
||||
|
||||
this.numHeight = new Common.UI.MetricSpinner({
|
||||
el: $('#table-spin-cell-height'),
|
||||
step: .1,
|
||||
width: 115,
|
||||
defaultUnit : "cm",
|
||||
value: '1 cm',
|
||||
maxValue: 55.88,
|
||||
minValue: 0
|
||||
});
|
||||
this.numHeight.on('change', _.bind(function(field, newValue, oldValue, eOpts){
|
||||
// this._changedProps.put_Height(this.cmbUnit.getValue() ? -field.getNumberValue() : Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
|
||||
}, this));
|
||||
this.lockedControls.push(this.numHeight);
|
||||
this.spinners.push(this.numHeight);
|
||||
|
||||
this.numWidth = new Common.UI.MetricSpinner({
|
||||
el: $('#table-spin-cell-width'),
|
||||
step: .1,
|
||||
width: 115,
|
||||
defaultUnit : "cm",
|
||||
value: '1 cm',
|
||||
maxValue: 55.88,
|
||||
minValue: 0
|
||||
});
|
||||
this.numWidth.on('change', _.bind(function(field, newValue, oldValue, eOpts){
|
||||
// this._changedProps.put_Width(this.cmbUnit.getValue() ? -field.getNumberValue() : Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
|
||||
}, this));
|
||||
this.lockedControls.push(this.numWidth);
|
||||
this.spinners.push(this.numWidth);
|
||||
|
||||
this.btnDistributeRows = new Common.UI.Button({
|
||||
el: $('#table-btn-distrub-rows')
|
||||
});
|
||||
this.lockedControls.push(this.btnDistributeRows);
|
||||
this.btnDistributeRows.on('click', _.bind(function(field, newValue, oldValue, eOpts){
|
||||
}, this));
|
||||
|
||||
this.btnDistributeCols = new Common.UI.Button({
|
||||
el: $('#table-btn-distrub-cols')
|
||||
});
|
||||
this.lockedControls.push(this.btnDistributeCols);
|
||||
this.btnDistributeCols.on('click', _.bind(function(field, newValue, oldValue, eOpts){
|
||||
}, this));
|
||||
|
||||
this.linkAdvanced = $('#table-advanced-link');
|
||||
$(this.el).on('click', '#table-advanced-link', _.bind(this.openAdvancedSettings, this));
|
||||
},
|
||||
|
|
@ -424,6 +418,7 @@ define([
|
|||
createDelayedElements: function() {
|
||||
this.createDelayedControls();
|
||||
this.UpdateThemeColors();
|
||||
this.updateMetricUnit();
|
||||
this._initSettings = false;
|
||||
},
|
||||
|
||||
|
|
@ -438,17 +433,16 @@ define([
|
|||
this._originalProps = new Asc.CTableProp(props);
|
||||
this._originalProps.put_CellSelect(true);
|
||||
|
||||
this._TblWrapStyleChanged(props.get_TableWrap());
|
||||
|
||||
var value = props.get_CanBeFlow() && !this._locked;
|
||||
if ( this._state.CanBeFlow!==value ) {
|
||||
this.btnWrapParallel.setDisabled(!value);
|
||||
this._state.CanBeFlow=value;
|
||||
var value = null;//props.get_Width();
|
||||
if ( Math.abs(this._state.Width-value)>0.001 ||
|
||||
(this._state.Width===null || value===null)&&(this._state.Width!==value)) {
|
||||
this.numWidth.setValue((value !== null) ? Common.Utils.Metric.fnRecalcFromMM(value) : '', true);
|
||||
}
|
||||
value = null;//props.get_Height();
|
||||
if ( Math.abs(this._state.Height-value)>0.001 ||
|
||||
(this._state.Height===null || value===null)&&(this._state.Height!==value)) {
|
||||
this.numHeight.setValue((value !== null) ? Common.Utils.Metric.fnRecalcFromMM(value) : '', true);
|
||||
}
|
||||
|
||||
// align props
|
||||
this._TblAlignChanged(props.get_TableAlignment());
|
||||
this._state.TableIndent = (props.get_TableAlignment() !== c_tableAlign.TABLE_ALIGN_LEFT) ? 0 : props.get_TableIndent();
|
||||
|
||||
//for table-template
|
||||
value = props.get_TableStyle();
|
||||
|
|
@ -567,6 +561,16 @@ define([
|
|||
}
|
||||
},
|
||||
|
||||
updateMetricUnit: function() {
|
||||
if (this.spinners) {
|
||||
for (var i=0; i<this.spinners.length; i++) {
|
||||
var spinner = this.spinners[i];
|
||||
spinner.setDefaultUnit(Common.Utils.Metric.getCurrentMetricName());
|
||||
spinner.setStep(Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.1);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_UpdateBordersStyle: function(border) {
|
||||
this.CellBorders = new Asc.CBorders();
|
||||
var updateBorders = this.CellBorders;
|
||||
|
|
@ -621,21 +625,6 @@ define([
|
|||
}
|
||||
},
|
||||
|
||||
_TblWrapStyleChanged: function(style) {
|
||||
if (!this.btnWrapNone || !this.btnWrapParallel) return;
|
||||
if ( this._state.WrapStyle!==style ) {
|
||||
this._noApply = true;
|
||||
this.btnWrapNone.toggle((style==c_tableWrap.TABLE_WRAP_NONE), true);
|
||||
this.btnWrapParallel.toggle((style==c_tableWrap.TABLE_WRAP_PARALLEL), true);
|
||||
this._noApply = false;
|
||||
this._state.WrapStyle=style;
|
||||
}
|
||||
},
|
||||
|
||||
_TblAlignChanged: function(style) {
|
||||
this._state.TableAlignment=style;
|
||||
},
|
||||
|
||||
UpdateThemeColors: function() {
|
||||
if (!this.btnBackColor) {
|
||||
// create color buttons
|
||||
|
|
@ -777,12 +766,9 @@ define([
|
|||
}
|
||||
},
|
||||
|
||||
textWrap: 'Text Wrapping',
|
||||
textBorders: 'Border\'s Style',
|
||||
textBorderColor: 'Color',
|
||||
textBackColor: 'Background color',
|
||||
textWrapParallelTooltip: 'Flow table',
|
||||
textWrapNoneTooltip: 'Inline table',
|
||||
textEdit: 'Rows & Columns',
|
||||
selectRowText : 'Select Row',
|
||||
selectColumnText : 'Select Column',
|
||||
|
|
@ -823,7 +809,12 @@ define([
|
|||
tipInner: 'Set Inner Lines Only',
|
||||
tipInnerVert: 'Set Vertical Inner Lines Only',
|
||||
tipInnerHor: 'Set Horizontal Inner Lines Only',
|
||||
tipOuter: 'Set Outer Border Only'
|
||||
tipOuter: 'Set Outer Border Only',
|
||||
textCellSize: 'Cell Size',
|
||||
textHeight: 'Height',
|
||||
textWidth: 'Width',
|
||||
textDistributeRows: 'Distribute rows',
|
||||
textDistributeCols: 'Distribute columns'
|
||||
|
||||
}, DE.Views.TableSettings || {}));
|
||||
});
|
||||
|
|
@ -1522,9 +1522,14 @@
|
|||
"DE.Views.TableSettings.textSelectBorders": "Select borders you want to change applying style chosen above",
|
||||
"DE.Views.TableSettings.textTemplate": "Select From Template",
|
||||
"DE.Views.TableSettings.textTotal": "Total",
|
||||
"DE.Views.TableSettings.textWrap": "Wrapping Style",
|
||||
"DE.Views.TableSettings.textWrapNoneTooltip": "Inline table",
|
||||
"DE.Views.TableSettings.textWrapParallelTooltip": "Flow table",
|
||||
"del_DE.Views.TableSettings.textWrap": "Wrapping Style",
|
||||
"del_DE.Views.TableSettings.textWrapNoneTooltip": "Inline table",
|
||||
"del_DE.Views.TableSettings.textWrapParallelTooltip": "Flow table",
|
||||
"DE.Views.TableSettings.textCellSize": "Cell Size",
|
||||
"DE.Views.TableSettings.textHeight": "Height",
|
||||
"DE.Views.TableSettings.textWidth": "Width",
|
||||
"DE.Views.TableSettings.textDistributeRows": "Distribute rows",
|
||||
"DE.Views.TableSettings.textDistributeCols": "Distribute columns",
|
||||
"DE.Views.TableSettings.tipAll": "Set outer border and all inner lines",
|
||||
"DE.Views.TableSettings.tipBottom": "Set outer bottom border only",
|
||||
"DE.Views.TableSettings.tipInner": "Set inner lines only",
|
||||
|
|
|
|||
Loading…
Reference in a new issue