[DE] Add hints in forms tab/settings

This commit is contained in:
JuliaSvinareva 2021-07-08 20:16:39 +03:00
parent 91433816bf
commit 87413ce121
3 changed files with 136 additions and 31 deletions

View file

@ -65,6 +65,15 @@ define([
'spellcheck="<%= spellcheck %>" ', 'spellcheck="<%= spellcheck %>" ',
'class="form-control <%= cls %>" ', 'class="form-control <%= cls %>" ',
'placeholder="<%= placeHolder %>" ', 'placeholder="<%= placeHolder %>" ',
'<% if (dataHint) {%>',
'data-hint="<%= dataHint %>" ',
'<% } %>',
'<% if (dataHintDirection) {%>',
'data-hint-direction="<%= dataHintDirection %>" ',
'<% } %>',
'<% if (dataHintOffset) {%>',
'data-hint-offset="<%= dataHintOffset %>" ',
'<% } %>',
'></textarea>', '></textarea>',
'</div>' '</div>'
].join('')), ].join('')),
@ -101,6 +110,9 @@ define([
style : this.style, style : this.style,
placeHolder : this.placeHolder, placeHolder : this.placeHolder,
spellcheck : this.spellcheck, spellcheck : this.spellcheck,
dataHint : this.options.dataHint,
dataHintDirection: this.options.dataHintDirection,
dataHintOffset: this.options.dataHintOffset,
scope : me scope : me
})); }));

View file

@ -117,7 +117,10 @@ define([
cls: 'input-group-nr', cls: 'input-group-nr',
menuStyle: 'min-width: 100%;', menuStyle: 'min-width: 100%;',
editable: true, editable: true,
data: [] data: [],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.cmbKey.setValue(''); this.cmbKey.setValue('');
this.lockedControls.push(this.cmbKey); this.lockedControls.push(this.cmbKey);
@ -131,7 +134,10 @@ define([
validateOnChange: false, validateOnChange: false,
validateOnBlur: false, validateOnBlur: false,
style : 'width: 100%;', style : 'width: 100%;',
value : '' value : '',
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.lockedControls.push(this.txtPlaceholder); this.lockedControls.push(this.txtPlaceholder);
this.txtPlaceholder.on('changed:after', this.onPlaceholderChanged.bind(this)); this.txtPlaceholder.on('changed:after', this.onPlaceholderChanged.bind(this));
@ -140,7 +146,10 @@ define([
this.textareaHelp = new Common.UI.TextareaField({ this.textareaHelp = new Common.UI.TextareaField({
el : $markup.findById('#form-txt-help'), el : $markup.findById('#form-txt-help'),
style : 'width: 100%; height: 60px;', style : 'width: 100%; height: 60px;',
value : '' value : '',
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.lockedControls.push(this.textareaHelp); this.lockedControls.push(this.textareaHelp);
this.textareaHelp.on('changed:after', this.onHelpChanged.bind(this)); this.textareaHelp.on('changed:after', this.onHelpChanged.bind(this));
@ -149,7 +158,10 @@ define([
// Text props // Text props
this.chMaxChars = new Common.UI.CheckBox({ this.chMaxChars = new Common.UI.CheckBox({
el: $markup.findById('#form-chb-max-chars'), el: $markup.findById('#form-chb-max-chars'),
labelText: this.textMaxChars labelText: this.textMaxChars,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.chMaxChars.on('change', this.onChMaxCharsChanged.bind(this)); this.chMaxChars.on('change', this.onChMaxCharsChanged.bind(this));
this.lockedControls.push(this.chMaxChars); this.lockedControls.push(this.chMaxChars);
@ -161,7 +173,10 @@ define([
defaultUnit : "", defaultUnit : "",
value: '10', value: '10',
maxValue: 1000000, maxValue: 1000000,
minValue: 1 minValue: 1,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.lockedControls.push(this.spnMaxChars); this.lockedControls.push(this.spnMaxChars);
this.spnMaxChars.on('change', this.onMaxCharsChange.bind(this)); this.spnMaxChars.on('change', this.onMaxCharsChange.bind(this));
@ -169,7 +184,10 @@ define([
this.chComb = new Common.UI.CheckBox({ this.chComb = new Common.UI.CheckBox({
el: $markup.findById('#form-chb-comb'), el: $markup.findById('#form-chb-comb'),
labelText: this.textComb labelText: this.textComb,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.chComb.on('change', this.onChCombChanged.bind(this)); this.chComb.on('change', this.onChCombChanged.bind(this));
this.lockedControls.push(this.chComb); this.lockedControls.push(this.chComb);
@ -182,7 +200,10 @@ define([
value: 'Auto', value: 'Auto',
allowAuto: true, allowAuto: true,
maxValue: 55.88, maxValue: 55.88,
minValue: 0.1 minValue: 0.1,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.lockedControls.push(this.spnWidth); this.lockedControls.push(this.spnWidth);
this.spinners.push(this.spnWidth); this.spinners.push(this.spnWidth);
@ -191,14 +212,20 @@ define([
this.chRequired = new Common.UI.CheckBox({ this.chRequired = new Common.UI.CheckBox({
el: $markup.findById('#form-chb-required'), el: $markup.findById('#form-chb-required'),
labelText: this.textRequired labelText: this.textRequired,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.chRequired.on('change', this.onChRequired.bind(this)); this.chRequired.on('change', this.onChRequired.bind(this));
this.lockedControls.push(this.chRequired); this.lockedControls.push(this.chRequired);
this.chFixed = new Common.UI.CheckBox({ this.chFixed = new Common.UI.CheckBox({
el: $markup.findById('#form-chb-fixed'), el: $markup.findById('#form-chb-fixed'),
labelText: this.textFixed labelText: this.textFixed,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.chFixed.on('change', this.onChFixed.bind(this)); this.chFixed.on('change', this.onChFixed.bind(this));
this.lockedControls.push(this.chFixed); this.lockedControls.push(this.chFixed);
@ -209,7 +236,10 @@ define([
cls: 'input-group-nr', cls: 'input-group-nr',
menuStyle: 'min-width: 100%;', menuStyle: 'min-width: 100%;',
editable: true, editable: true,
data: [] data: [],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.cmbGroupKey.setValue(''); this.cmbGroupKey.setValue('');
this.lockedControls.push(this.cmbGroupKey); this.lockedControls.push(this.cmbGroupKey);
@ -224,7 +254,10 @@ define([
validateOnChange: false, validateOnChange: false,
validateOnBlur: false, validateOnBlur: false,
style : 'width: 100%;', style : 'width: 100%;',
value : '' value : '',
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.lockedControls.push(this.txtNewValue); this.lockedControls.push(this.txtNewValue);
this.txtNewValue.on('inputleave', function(){ me.fireEvent('editcomplete', me);}); this.txtNewValue.on('inputleave', function(){ me.fireEvent('editcomplete', me);});
@ -249,7 +282,10 @@ define([
parentEl: $markup.findById('#form-list-add'), parentEl: $markup.findById('#form-list-add'),
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-zoomup', iconCls: 'toolbar__icon btn-zoomup',
hint: this.textTipAdd hint: this.textTipAdd,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'big'
}); });
this.btnListAdd.on('click', _.bind(this.onAddItem, this)); this.btnListAdd.on('click', _.bind(this.onAddItem, this));
this.lockedControls.push(this.btnListAdd); this.lockedControls.push(this.btnListAdd);
@ -258,7 +294,10 @@ define([
parentEl: $markup.findById('#form-list-delete'), parentEl: $markup.findById('#form-list-delete'),
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon cc-remove', iconCls: 'toolbar__icon cc-remove',
hint: this.textTipDelete hint: this.textTipDelete,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'big'
}); });
this.btnListDelete.on('click', _.bind(this.onDeleteItem, this)); this.btnListDelete.on('click', _.bind(this.onDeleteItem, this));
this.lockedControls.push(this.btnListDelete); this.lockedControls.push(this.btnListDelete);
@ -267,7 +306,10 @@ define([
parentEl: $markup.findById('#form-list-up'), parentEl: $markup.findById('#form-list-up'),
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-arrow-up', iconCls: 'toolbar__icon btn-arrow-up',
hint: this.textTipUp hint: this.textTipUp,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'big'
}); });
this.btnListUp.on('click', _.bind(this.onMoveItem, this, true)); this.btnListUp.on('click', _.bind(this.onMoveItem, this, true));
this.lockedControls.push(this.btnListUp); this.lockedControls.push(this.btnListUp);
@ -276,7 +318,10 @@ define([
parentEl: $markup.findById('#form-list-down'), parentEl: $markup.findById('#form-list-down'),
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-arrow-down', iconCls: 'toolbar__icon btn-arrow-down',
hint: this.textTipDown hint: this.textTipDown,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'big'
}); });
this.btnListDown.on('click', _.bind(this.onMoveItem, this, false)); this.btnListDown.on('click', _.bind(this.onMoveItem, this, false));
this.lockedControls.push(this.btnListDown); this.lockedControls.push(this.btnListDown);
@ -295,7 +340,10 @@ define([
{caption: this.textFromUrl, value: 1}, {caption: this.textFromUrl, value: 1},
{caption: this.textFromStorage, value: 2} {caption: this.textFromStorage, value: 2}
] ]
}) }),
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.lockedControls.push(this.btnSelectImage); this.lockedControls.push(this.btnSelectImage);
this.btnSelectImage.menu.on('item:click', _.bind(this.onImageSelect, this)); this.btnSelectImage.menu.on('item:click', _.bind(this.onImageSelect, this));
@ -306,7 +354,10 @@ define([
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'toolbar__icon cc-remove', iconCls : 'toolbar__icon cc-remove',
caption : this.textDelete, caption : this.textDelete,
style : 'text-align: left;' style : 'text-align: left;',
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.btnRemForm.on('click', _.bind(function(btn){ this.btnRemForm.on('click', _.bind(function(btn){
this.api.asc_RemoveContentControl(this._state.id); this.api.asc_RemoveContentControl(this._state.id);
@ -318,7 +369,10 @@ define([
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-lock', iconCls : 'toolbar__icon btn-lock',
caption : this.textLock, caption : this.textLock,
style : 'text-align: left;' style : 'text-align: left;',
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.btnLockForm.on('click', _.bind(function(btn){ this.btnLockForm.on('click', _.bind(function(btn){
if (this.api && !this._noApply) { if (this.api && !this._noApply) {
@ -860,7 +914,10 @@ define([
'33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF',
'993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', 'C9C8FF', 'CC99FF', 'FFFFFF' '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', 'C9C8FF', 'CC99FF', 'FFFFFF'
], ],
paletteHeight: 94 paletteHeight: 94,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.lockedControls.push(this.btnColor); this.lockedControls.push(this.btnColor);
this.mnuNoBorder.on('click', _.bind(this.onNoBorderClick, this)); this.mnuNoBorder.on('click', _.bind(this.onNoBorderClick, this));

View file

@ -156,7 +156,10 @@ define([
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-text-field', iconCls: 'toolbar__icon btn-text-field',
caption: this.capBtnText, caption: this.capBtnText,
disabled: true disabled: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnTextField); this.paragraphControls.push(this.btnTextField);
@ -164,7 +167,10 @@ define([
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-combo-box', iconCls: 'toolbar__icon btn-combo-box',
caption: this.capBtnComboBox, caption: this.capBtnComboBox,
disabled: true disabled: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnComboBox); this.paragraphControls.push(this.btnComboBox);
@ -172,7 +178,10 @@ define([
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-dropdown', iconCls: 'toolbar__icon btn-dropdown',
caption: this.capBtnDropDown, caption: this.capBtnDropDown,
disabled: true disabled: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnDropDown); this.paragraphControls.push(this.btnDropDown);
@ -180,7 +189,10 @@ define([
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-checkbox', iconCls: 'toolbar__icon btn-checkbox',
caption: this.capBtnCheckBox, caption: this.capBtnCheckBox,
disabled: true disabled: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnCheckBox); this.paragraphControls.push(this.btnCheckBox);
@ -188,7 +200,10 @@ define([
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-radio-button', iconCls: 'toolbar__icon btn-radio-button',
caption: this.capBtnRadioBox, caption: this.capBtnRadioBox,
disabled: true disabled: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnRadioBox); this.paragraphControls.push(this.btnRadioBox);
@ -196,7 +211,10 @@ define([
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-insertimage', iconCls: 'toolbar__icon btn-insertimage',
caption: this.capBtnImage, caption: this.capBtnImage,
disabled: true disabled: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnImageField); this.paragraphControls.push(this.btnImageField);
@ -205,7 +223,10 @@ define([
iconCls: 'toolbar__icon btn-sheet-view', iconCls: 'toolbar__icon btn-sheet-view',
caption: this.capBtnView, caption: this.capBtnView,
enableToggle: true, enableToggle: true,
disabled: true disabled: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnViewForm); this.paragraphControls.push(this.btnViewForm);
@ -213,7 +234,10 @@ define([
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-clearstyle', iconCls : 'toolbar__icon btn-clearstyle',
caption : this.textClearFields, caption : this.textClearFields,
disabled: true disabled: true,
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnClearFields); this.paragraphControls.push(this.btnClearFields);
@ -222,7 +246,10 @@ define([
iconCls : 'toolbar__icon btn-highlight', iconCls : 'toolbar__icon btn-highlight',
caption : this.textHighlight, caption : this.textHighlight,
menu : true, menu : true,
disabled: true disabled: true,
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnHighlight); this.paragraphControls.push(this.btnHighlight);
} }
@ -230,14 +257,20 @@ define([
this.btnPrevForm = new Common.UI.Button({ this.btnPrevForm = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon previous-field', iconCls: 'toolbar__icon previous-field',
caption: this.capBtnPrev caption: this.capBtnPrev,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnPrevForm); this.paragraphControls.push(this.btnPrevForm);
this.btnNextForm = new Common.UI.Button({ this.btnNextForm = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon next-field', iconCls: 'toolbar__icon next-field',
caption: this.capBtnNext caption: this.capBtnNext,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnNextForm); this.paragraphControls.push(this.btnNextForm);
@ -245,7 +278,10 @@ define([
this.btnSubmit = new Common.UI.Button({ this.btnSubmit = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon submit-form', iconCls: 'toolbar__icon submit-form',
caption: this.capBtnSubmit caption: this.capBtnSubmit,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnSubmit); this.paragraphControls.push(this.btnSubmit);
} }