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

[SSE] Use InputFieldBtn component for selecting data

Browse source
This commit is contained in:
Julia Radzhabova 2020-04-06 17:46:22 +03:00
parent 3c5a7dac21
commit 9024a6fa46
12 changed files with 77 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
apps/common/main/lib/component/InputField.js
View file

@ -498,6 +498,17 @@ define([
? this._input.attr('disabled', true)
: this._input.removeAttr('disabled');
this._button.setDisabled(disabled);
},
setBtnDisabled: function(disabled) {
this._button.setDisabled(disabled);
},
updateBtnHint: function(hint) {
this.options.hint = hint;
if (!this.rendered) return;
this._button.updateHint(this.options.hint);
}
}
})());

2
apps/common/main/resources/less/input.less
View file

@ -96,6 +96,8 @@ textarea.form-control:focus {
}
.input-field-btn {
position: relative;
.select-button {
position: absolute;
top: 1px;

16
apps/spreadsheeteditor/main/app/controller/Print.js
View file

@ -170,8 +170,14 @@ define([
panel.dataRangeLeft = value;
value = (this.api.asc_getActiveWorksheetIndex()==sheet);
(panel.btnPresetsTop.menu.items[0].value == 'select') && panel.btnPresetsTop.menu.items[0].setVisible(value);
(panel.btnPresetsLeft.menu.items[0].value == 'select') && panel.btnPresetsLeft.menu.items[0].setVisible(value);
if (panel.btnPresetsTop.menu.items[0].value == 'select') {
panel.btnPresetsTop.menu.items[0].setVisible(value);
panel.txtRangeTop.setBtnDisabled && panel.txtRangeTop.setBtnDisabled(!value);
}
if (panel.btnPresetsLeft.menu.items[0].value == 'select') {
panel.btnPresetsLeft.menu.items[0].setVisible(value);
panel.txtRangeLeft.setBtnDisabled && panel.txtRangeLeft.setBtnDisabled(!value);
}
panel.btnPresetsTop.menu.items[panel.btnPresetsTop.menu.items[0].value == 'frozen' ? 0 : 1].setDisabled(!this.api.asc_getPrintTitlesRange(Asc.c_oAscPrintTitlesRangeType.frozen, false, sheet));
panel.btnPresetsLeft.menu.items[panel.btnPresetsLeft.menu.items[0].value == 'frozen' ? 0 : 1].setDisabled(!this.api.asc_getPrintTitlesRange(Asc.c_oAscPrintTitlesRangeType.frozen, true, sheet));
@ -380,6 +386,8 @@ define([
panel.chPrintRows.on('change', _.bind(this.propertyChange, this, panel));
panel.txtRangeTop.on('changing', _.bind(this.propertyChange, this, panel));
panel.txtRangeLeft.on('changing', _.bind(this.propertyChange, this, panel));
panel.txtRangeTop.on('button:click', _.bind(this.onPresetSelect, this, panel, 'top', panel.btnPresetsTop.menu, {value: 'select'}));
panel.txtRangeLeft.on('button:click', _.bind(this.onPresetSelect, this, panel, 'left', panel.btnPresetsLeft.menu, {value: 'select'}));
panel.btnPresetsTop.menu.on('item:click', _.bind(this.onPresetSelect, this, panel, 'top'));
panel.btnPresetsLeft.menu.on('item:click', _.bind(this.onPresetSelect, this, panel, 'left'));
},
@ -446,6 +454,8 @@ define([
var isvalid = me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.PrintTitles, value, false);
return (isvalid==Asc.c_oAscError.ID.DataRangeError) ? me.textInvalidRange : true;
};
selectdata && panel.txtRangeTop.updateBtnHint(this.textSelectRange);
panel.txtRangeLeft.validation = function(value) {
me.propertyChange(panel);
if (_.isEmpty(value)) {
@ -454,6 +464,8 @@ define([
var isvalid = me.api.asc_checkDataRange(Asc.c_oAscSelectionDialogType.PrintTitles, value, false);
return (isvalid==Asc.c_oAscError.ID.DataRangeError) ? me.textInvalidRange : true;
};
selectdata && panel.txtRangeLeft.updateBtnHint(this.textSelectRange);
var data = ((selectdata) ? [{caption: this.textSelectRange, value: 'select'}] : []).concat([
{caption: this.textFrozenRows, value: 'frozen'},
{caption: this.textFirstRow, value: 'first'},

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

@ -11,9 +11,9 @@
</div>
<div class="separator horizontal padding-large"></div>
<div class="inner-content">
<table cols="2" style="width: 100%;">
<table cols="1" style="width: 100%;">
<tr>
<td colspan=2 >
<td>
<label class="header"><%= scope.textDataRange %></label>
</td>
</tr>
@ -21,12 +21,9 @@
<td class="padding-small" width="200">
<div id="chart-dlg-txt-range" class="input-row" style="margin-right: 10px;"></div>
</td>
<td class="padding-small" style="text-align: right;">
<button type="button" class="btn btn-text-default" id="chart-dlg-btn-data" style="min-width: 100px;width: auto;"><%= scope.textSelectData %></button>
</td>
</tr>
<tr>
<td colspan=2 class="padding-small">
<td class="padding-small">
<label class="input-label"><%= scope.textDataSeries %></label>
<div id="chart-dlg-combo-range" class="input-group-nr" style="width:120px;"></div>
</td>
@ -341,12 +338,9 @@
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td class="padding-small" width="200">-->
<!--<td colspan=2 class="padding-small" width="200">-->
<!--<div id="spark-dlg-txt-range" class="input-row" style="margin-right: 10px;"></div>-->
<!--</td>-->
<!--<td class="padding-small" style="text-align: right;">-->
<!--<button type="button" class="btn btn-text-default" id="spark-dlg-btn-data" style="min-width: 100px;"><%= scope.textSelectData %></button>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td colspan=2 >-->
@ -354,12 +348,9 @@
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td class="padding-large" width="200">-->
<!--<td class="padding-large" colspan=2 width="200">-->
<!--<div id="spark-dlg-txt-location" class="input-row" style="margin-right: 10px;"></div>-->
<!--</td>-->
<!--<td class="padding-large" style="text-align: right;">-->
<!--<button type="button" class="btn btn-text-default" id="spark-dlg-btn-location-data" style="min-width: 100px;"><%= scope.textSelectData %></button>-->
<!--</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td colspan=2 class="padding-large"></td>-->

9
apps/spreadsheeteditor/main/app/template/PivotSettingsAdvanced.template
View file

@ -58,18 +58,15 @@
</div>
<div id="id-adv-pivot-data" class="settings-panel">
<div class="inner-content">
<table cols="2" style="width: 100%;">
<table cols="1" style="width: 100%;">
<tr>
<td colspan=2 >
<td>
<label class="header"><%= scope.textDataRange %></label>
</td>
</tr>
<tr>
<td class="padding-small" width="220">
<div id="pivot-adv-txt-range" class="input-row" style="margin-right: 10px;"></div>
</td>
<td class="padding-small" style="text-align: right;">
<button type="button" class="btn btn-text-default" id="pivot-adv-btn-data" style="min-width: 100px;width: auto;"><%= scope.textSelectData %></button>
<div id="pivot-adv-txt-range" class="input-row"></div>
</td>
</tr>
</table>

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

@ -148,18 +148,15 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
]
});
this.txtDataRange = new Common.UI.InputField({
this.txtDataRange = new Common.UI.InputFieldBtn({
el : $('#chart-dlg-txt-range'),
name : 'range',
style : 'width: 100%;',
btnHint : this.textSelectData,
allowBlank : true,
validateOnChange: true
});
this.btnSelectData = new Common.UI.Button({
el: $('#chart-dlg-btn-data')
});
this.btnSelectData.on('click', _.bind(this.onSelectData, this));
this.txtDataRange.on('button:click', _.bind(this.onSelectData, this));
this.cmbChartTitle = new Common.UI.ComboBox({
el : $('#chart-dlg-combo-chart-title'),
@ -791,33 +788,27 @@ define([ 'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
name: 'asc-radio-sparkline'
});
this.txtSparkDataRange = new Common.UI.InputField({
this.txtSparkDataRange = new Common.UI.InputFieldBtn({
el : $('#spark-dlg-txt-range'),
name : 'range',
style : 'width: 100%;',
btnHint : this.textSelectData,
allowBlank : true,
blankError : this.txtEmpty,
validateOnChange: true
});
this.txtSparkDataRange.on('button:click', _.bind(this.onSelectSparkData, this));
this.btnSelectSparkData = new Common.UI.Button({
el: $('#spark-dlg-btn-data')
});
this.btnSelectSparkData.on('click', _.bind(this.onSelectSparkData, this));
this.txtSparkDataLocation = new Common.UI.InputField({
this.txtSparkDataLocation = new Common.UI.InputFieldBtn({
el : $('#spark-dlg-txt-location'),
name : 'range',
style : 'width: 100%;',
btnHint : this.textSelectData,
allowBlank : true,
blankError : this.txtEmpty,
validateOnChange: true
});
this.btnSelectLocationData = new Common.UI.Button({
el: $('#spark-dlg-btn-location-data')
});
this.btnSelectLocationData.on('click', _.bind(this.onSelectLocationData, this));
this.txtSparkDataLocation.on('button:click', _.bind(this.onSelectLocationData, this));
*/
this._arrEmptyCells = [

31
apps/spreadsheeteditor/main/app/view/CreatePivotDialog.js
View file

@ -47,7 +47,7 @@ define([
SSE.Views.CreatePivotDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
options: {
contentWidth: 330,
contentWidth: 310,
height: 250
},
@ -68,8 +68,7 @@ define([
'</tr>',
'<tr>',
'<td class="padding-large">',
'<div id="create-pivot-input-source" class="input-row" style="display: inline-block; vertical-align: middle; margin-right: 10px;width: 213px;"></div>',
'<button type="button" class="btn btn-text-default" id="create-pivot-btn-source" style="width: 86px;">' + me.textSelectData + '</button>',
'<div id="create-pivot-input-source" class="input-row" style=""></div>',
'</td>',
'</tr>',
'<tr>',
@ -88,9 +87,8 @@ define([
'</td>',
'</tr>',
'<tr>',
'<td>',
'<div id="create-pivot-input-dest" class="input-row" style="margin-left: 22px; display: inline-block; vertical-align: middle; margin-right: 10px;width: 191px;"></div>',
'<button type="button" class="btn btn-text-default" id="create-pivot-btn-dest" style="width: 86px;">' + me.textSelectData + '</button>',
'<td style="padding-left: 22px;">',
'<div id="create-pivot-input-dest" class="input-row" style=""></div>',
'</td>',
'</tr>',
'</table>',
@ -122,34 +120,27 @@ define([
Common.Views.AdvancedSettingsWindow.prototype.render.call(this);
var me = this;
this.txtSourceRange = new Common.UI.InputField({
this.txtSourceRange = new Common.UI.InputFieldBtn({
el : $('#create-pivot-input-source'),
name : 'range',
style : 'width: 100%;',
btnHint : this.textSelectData,
allowBlank : true,
validateOnChange: true
});
this.txtSourceRange.on('button:click', _.bind(this.onSelectData, this, 'source'));
this.btnSelectSource = new Common.UI.Button({
el: $('#create-pivot-btn-source')
});
this.btnSelectSource.on('click', _.bind(this.onSelectData, this, 'source'));
this.txtDestRange = new Common.UI.InputField({
this.txtDestRange = new Common.UI.InputFieldBtn({
el : $('#create-pivot-input-dest'),
name : 'range',
style : 'width: 100%;',
btnHint : this.textSelectData,
allowBlank : true,
validateOnChange: true,
validateOnBlur: false,
disabled: true
});
this.btnSelectDest = new Common.UI.Button({
el: $('#create-pivot-btn-dest'),
disabled: true
});
this.btnSelectDest.on('click', _.bind(this.onSelectData, this, 'dest'));
this.txtDestRange.on('button:click', _.bind(this.onSelectData, this, 'dest'));
this.radioNew = new Common.UI.RadioBox({
el: $('#create-pivot-radio-new'),
@ -158,7 +149,6 @@ define([
checked: true
}).on('change', function(field, newValue) {
me.txtDestRange.setDisabled(newValue);
me.btnSelectDest.setDisabled(newValue);
me.txtDestRange.showError();
});
@ -168,7 +158,6 @@ define([
name: 'asc-radio-pivot-dest'
}).on('change', function(field, newValue) {
me.txtDestRange.setDisabled(!newValue);
me.btnSelectDest.setDisabled(!newValue);
me.txtDestRange.cmpEl.find('input').focus();
});

16
apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js
View file

@ -90,10 +90,7 @@ define([
'<div class="input-row">',
'<label>' + this.strRange + '</label>',
'</div>',
'<div class="input-row" style="margin-bottom: 5px;display: flex;">',
'<div id="id-dlg-hyperlink-range" style="flex-grow: 1;"></div>',
'<button type="button" class="btn btn-text-default" id="id-dlg-hyperlink-btn-data" style="min-width: 100px;width: auto; margin-left: 10px;">' + this.textSelectData + '</button>',
'</div>',
'<div id="id-dlg-hyperlink-range" class="input-row" style="margin-bottom: 5px;"></div>',
'</div>',
'<div class="input-row">',
'<label>' + this.strDisplay + '</label>',
@ -157,11 +154,12 @@ define([
me.btnOk.setDisabled($.trim(val)=='');
});
me.inputRange = new Common.UI.InputField({
me.inputRange = new Common.UI.InputFieldBtn({
el : $('#id-dlg-hyperlink-range'),
allowBlank : false,
blankError : me.txtEmpty,
style : 'width: 100%;',
btnHint : me.textSelectData,
validateOnChange: true,
validateOnBlur: false,
value: Common.Utils.InternalSettings.get("sse-settings-r1c1") ? 'R1C1' : 'A1',
@ -183,6 +181,7 @@ define([
me.isAutoUpdate && me.inputDisplay.setValue(me.internalList.getSelectedRec().get('name') + (val!=='' ? '!' + val : ''));
me.btnOk.setDisabled($.trim(val)=='');
});
me.inputRange.on('button:click', _.bind(me.onSelectData, me));
me.inputDisplay = new Common.UI.InputField({
el : $('#id-dlg-hyperlink-display'),
@ -207,11 +206,6 @@ define([
});
me.internalList.on('item:select', _.bind(this.onSelectItem, this));
me.btnSelectData = new Common.UI.Button({
el: $('#id-dlg-hyperlink-btn-data')
});
me.btnSelectData.on('click', _.bind(me.onSelectData, me));
if (me.appOptions && me.appOptions.canMakeActionLink) {
var inputCopy = new Common.UI.InputField({
el : $('#id-dlg-clip-copy'),
@ -289,7 +283,6 @@ define([
defrange = settings.props.asc_getSheet() + '!' + settings.props.asc_getRange();
} else {// named range
this.inputRange.setDisabled(true);
this.btnSelectData.setDisabled(true);
defrange = settings.props.asc_getLocation();
}
} else {
@ -481,7 +474,6 @@ define([
onSelectItem: function(picker, item, record, e){
this.btnOk.setDisabled(record.get('level')==0 || record.get('type')==0 && $.trim(this.inputRange.getValue())=='');
this.inputRange.setDisabled(record.get('type')==1 || record.get('level')==0);
this.btnSelectData.setDisabled(record.get('type')==1 || record.get('level')==0);
if (this.isAutoUpdate) {
var list = record.get('level') ? record.get('name') : '';
if (record.get('type')==1) {

23
apps/spreadsheeteditor/main/app/view/NamedRangeEditDlg.js
View file

@ -64,29 +64,26 @@ define([
'<div class="box" style="height:' + (me.options.height - 85) + 'px;">',
'<div class="content-panel" style="padding: 0;"><div class="inner-content">',
'<div class="settings-panel active">',
'<table cols="2" style="width: 100%;">',
'<table cols="1" style="width: 100%;">',
'<tr>',
'<td colspan=2 class="padding-small">',
'<td class="padding-small">',
'<label class="header">', me.textName,'</label>',
'<div id="named-range-txt-name" class="input-row" style="width:100%;"></div>',
'</td>',
'</tr>',
'<tr>',
'<td colspan=2 class="padding-small">',
'<td class="padding-small">',
'<label class="header">', me.textScope,'</label>',
'<div id="named-range-combo-scope" class="input-group-nr" style="width:100%;"></div>',
'</td>',
'</tr>', '<tr>',
'<td colspan=2 >',
'<td>',
'<label class="header">', me.textDataRange, '</label>',
'</td>',
'</tr>',
'<tr>',
'<td class="padding-small">',
'<div id="named-range-txt-range" class="input-row" style="margin-right: 10px;"></div>',
'</td>',
'<td class="padding-small" style="text-align: right;" width="100">',
'<button type="button" class="btn btn-text-default" id="named-range-btn-data" style="min-width: 100px;width: auto;">', me.textSelectData,'</button>',
'<div id="named-range-txt-range" class="input-row"></div>',
'</td>',
'</tr>',
'</table>',
@ -156,11 +153,12 @@ define([
data : []
});
this.txtDataRange = new Common.UI.InputField({
this.txtDataRange = new Common.UI.InputFieldBtn({
el : $('#named-range-txt-range'),
name : 'range',
style : 'width: 100%;',
allowBlank : true,
btnHint : this.textSelectData,
blankError : this.txtEmpty,
validateOnChange: true,
validation : function(value) {
@ -171,11 +169,7 @@ define([
return (isvalid!==Asc.c_oAscError.ID.DataRangeError || (me.isEdit && me.props.asc_getRef().toLowerCase() == value.toLowerCase())) ? true : me.textInvalidRange;
}
});
this.btnSelectData = new Common.UI.Button({
el: $('#named-range-btn-data')
});
this.btnSelectData.on('click', _.bind(this.onSelectData, this));
this.txtDataRange.on('button:click', _.bind(this.onSelectData, this));
this.afterRender();
},
@ -212,7 +206,6 @@ define([
this.dataRangeValid = val;
this.txtDataRange.setDisabled(this.isEdit && props.asc_getIsTable());
this.btnSelectData.setDisabled(this.isEdit && props.asc_getIsTable());
} else
this.cmbScope.setValue(-255);

9
apps/spreadsheeteditor/main/app/view/PivotSettingsAdvanced.js
View file

@ -148,19 +148,16 @@ define([ 'text!spreadsheeteditor/main/app/template/PivotSettingsAdvanced.temp
labelText: this.textShowHeaders
});
this.txtDataRange = new Common.UI.InputField({
this.txtDataRange = new Common.UI.InputFieldBtn({
el : $('#pivot-adv-txt-range'),
name : 'range',
style : 'width: 100%;',
btnHint : this.textSelectData,
allowBlank : true,
blankError : this.txtEmpty,
validateOnChange: true
});
this.btnSelectData = new Common.UI.Button({
el: $('#pivot-adv-btn-data')
});
this.btnSelectData.on('click', _.bind(this.onSelectData, this));
this.txtDataRange.on('button:click', _.bind(this.onSelectData, this));
// Alt Text

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

@ -229,7 +229,7 @@ define([ 'text!spreadsheeteditor/main/app/template/PrintSettings.template',
itemsTemplate: itemsTemplate
});
this.txtRangeTop = new Common.UI.InputField({
this.txtRangeTop = new Common.UI.InputFieldBtn({
el : $('#printadv-dlg-txt-top'),
style : 'width: 147px;',
allowBlank : true,
@ -244,7 +244,7 @@ define([ 'text!spreadsheeteditor/main/app/template/PrintSettings.template',
});
this.btnPresetsTop.render( $('#printadv-dlg-presets-top')) ;
this.txtRangeLeft = new Common.UI.InputField({
this.txtRangeLeft = new Common.UI.InputFieldBtn({
el : $('#printadv-dlg-txt-left'),
style : 'width: 147px;',
allowBlank : true,

8
apps/spreadsheeteditor/main/app/view/PrintTitlesDialog.js
View file

@ -120,9 +120,10 @@ define([
}
};
this.txtRangeTop = new Common.UI.InputField({
this.txtRangeTop = new Common.UI.InputFieldBtn({
el : $('#print-titles-txt-top'),
style : 'width: 100%;',
btnHint : this.textSelectRange,
allowBlank : true,
validateOnChange: true,
validation : function(value) {
@ -154,10 +155,12 @@ define([
});
this.btnPresetsTop.render( $('#print-titles-presets-top')) ;
this.btnPresetsTop.menu.on('item:click', _.bind(this.onPresetSelect, this, 'top'));
this.txtRangeTop.on('button:click', _.bind(this.onPresetSelect, this, 'top', this.btnPresetsTop.menu, {value: 'select'}));
this.txtRangeLeft = new Common.UI.InputField({
this.txtRangeLeft = new Common.UI.InputFieldBtn({
el : $('#print-titles-txt-left'),
style : 'width: 100%;',
btnHint : this.textSelectRange,
allowBlank : true,
validateOnChange: true,
validation : function(value) {
@ -189,6 +192,7 @@ define([
});
this.btnPresetsLeft.render( $('#print-titles-presets-left')) ;
this.btnPresetsLeft.menu.on('item:click', _.bind(this.onPresetSelect, this, 'left'));
this.txtRangeLeft.on('button:click', _.bind(this.onPresetSelect, this, 'left', this.btnPresetsLeft.menu, {value: 'select'}));
var $window = this.getChild();
$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));