[SSE] Use InputFieldBtn component for selecting data

apps/common/main/lib/component/InputField.js

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

apps/common/main/resources/less/input.less

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

apps/spreadsheeteditor/main/app/controller/Print.js

@@ -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);
+            if (panel.btnPresetsTop.menu.items[0].value == 'select') {
-            (panel.btnPresetsLeft.menu.items[0].value == 'select') && panel.btnPresetsLeft.menu.items[0].setVisible(value);
+                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'},

apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template

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

apps/spreadsheeteditor/main/app/template/PivotSettingsAdvanced.template

@@ -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>
+                    <div id="pivot-adv-txt-range" class="input-row"></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>
                 </td>
             </tr>
         </table>

apps/spreadsheeteditor/main/app/view/ChartSettingsDlg.js

@@ -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.txtDataRange.on('button:click', _.bind(this.onSelectData, this));
-            this.btnSelectData = new Common.UI.Button({
-                el: $('#chart-dlg-btn-data')
-            });
-            this.btnSelectData.on('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({
+            this.txtSparkDataLocation = new Common.UI.InputFieldBtn({
-                el: $('#spark-dlg-btn-data')
-            });
-           this.btnSelectSparkData.on('click', _.bind(this.onSelectSparkData, this));
-
-            this.txtSparkDataLocation = new Common.UI.InputField({
                 el          : $('#spark-dlg-txt-location'),
                 name        : 'range',
                 style       : 'width: 100%;',
+                btnHint     : this.textSelectData,
                 allowBlank  : true,
                 blankError  : this.txtEmpty,
                 validateOnChange: true
             });
-
+           this.txtSparkDataLocation.on('button:click', _.bind(this.onSelectLocationData, this));
-            this.btnSelectLocationData = new Common.UI.Button({
-                el: $('#spark-dlg-btn-location-data')
-            });
-           this.btnSelectLocationData.on('click', _.bind(this.onSelectLocationData, this));
              */
 
             this._arrEmptyCells = [

apps/spreadsheeteditor/main/app/view/CreatePivotDialog.js

@@ -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>',
+                                            '<div id="create-pivot-input-source" class="input-row" style=""></div>',
-                                            '<button type="button" class="btn btn-text-default" id="create-pivot-btn-source" style="width: 86px;">' + me.textSelectData + '</button>',
                                         '</td>',
                                     '</tr>',
                                     '<tr>',
@@ -88,9 +87,8 @@ define([
                                         '</td>',
                                     '</tr>',
                                     '<tr>',
-                                        '<td>',
+                                        '<td style="padding-left: 22px;">',
-                                            '<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>',
+                                            '<div id="create-pivot-input-dest" class="input-row" style=""></div>',
-                                            '<button type="button" class="btn btn-text-default" id="create-pivot-btn-dest" style="width: 86px;">' + me.textSelectData + '</button>',
                                         '</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({
+            this.txtDestRange = new Common.UI.InputFieldBtn({
-                el: $('#create-pivot-btn-source')
-            });
-            this.btnSelectSource.on('click', _.bind(this.onSelectData, this, 'source'));
-
-            this.txtDestRange = new Common.UI.InputField({
                 el          : $('#create-pivot-input-dest'),
                 name        : 'range',
                 style       : 'width: 100%;',
+                btnHint     : this.textSelectData,
                 allowBlank  : true,
                 validateOnChange: true,
                 validateOnBlur: false,
                 disabled: true
             });
-
+            this.txtDestRange.on('button:click', _.bind(this.onSelectData, this, 'dest'));
-            this.btnSelectDest = new Common.UI.Button({
-                el: $('#create-pivot-btn-dest'),
-                disabled: true
-            });
-            this.btnSelectDest.on('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();
             });
 

apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js

@@ -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" class="input-row" style="margin-bottom: 5px;"></div>',
-                            '<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>',
                     '<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) {

apps/spreadsheeteditor/main/app/view/NamedRangeEditDlg.js

@@ -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>',
+                                            '<div id="named-range-txt-range" class="input-row"></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>',
                                         '</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.txtDataRange.on('button:click', _.bind(this.onSelectData, this));
-            this.btnSelectData = new Common.UI.Button({
-                el: $('#named-range-btn-data')
-            });
-            this.btnSelectData.on('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);
 

apps/spreadsheeteditor/main/app/view/PivotSettingsAdvanced.js

@@ -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.txtDataRange.on('button:click', _.bind(this.onSelectData, this));
-            this.btnSelectData = new Common.UI.Button({
-                el: $('#pivot-adv-btn-data')
-            });
-            this.btnSelectData.on('click', _.bind(this.onSelectData, this));
 
             // Alt Text
 

apps/spreadsheeteditor/main/app/view/PrintSettings.js

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

apps/spreadsheeteditor/main/app/view/PrintTitlesDialog.js

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