[DE] Add border for new text form

This commit is contained in:
Julia Radzhabova 2020-10-20 19:26:31 +03:00
parent 52a1999267
commit 7ae4da5f7e
3 changed files with 84 additions and 3 deletions

View file

@ -274,6 +274,7 @@ define([
this.rightmenu.tableSettings.UpdateThemeColors();
this.rightmenu.shapeSettings.UpdateThemeColors();
this.rightmenu.textartSettings.UpdateThemeColors();
this.rightmenu.formSettings && this.rightmenu.formSettings.UpdateThemeColors();
},
updateMetricUnit: function() {

View file

@ -40,11 +40,17 @@
</td>
</tr>
<tr class="form-textfield">
<td class="padding-large">
<td class="padding-small">
<label class="input-label" style="margin-left: 22px;margin-top: 4px;"><%= scope.textWidth %></label>
<div id="form-spin-width" style="display: inline-block; float: right;"></div>
</td>
</tr>
<tr class="form-textfield">
<td class="padding-large">
<label class="input-label" style="margin-left: 22px;margin-top: 4px;"><%= scope.textColor %></label>
<div id="form-color-btn" style="display: inline-block; float: right;"></div>
</td>
</tr>
<tr class="form-image">
<td class="padding-large">
<div id="form-button-replace" style="width:100%;"></div>

View file

@ -153,7 +153,7 @@ define([
this.spnMaxChars = new Common.UI.MetricSpinner({
el: $markup.findById('#form-spin-max-chars'),
step: 1,
width: 48,
width: 45,
defaultUnit : "",
value: '10',
maxValue: 1000000,
@ -308,6 +308,7 @@ define([
}, this));
this.updateMetricUnit();
this.UpdateThemeColors();
},
setApi: function(api) {
@ -515,6 +516,29 @@ define([
}
},
onColorPickerSelect: function(btn, color) {
this.BorderColor = color;
this._state.BorderColor = this.BorderColor;
if (this.api && !this._noApply) {
var props = this._originalProps || new AscCommon.CContentControlPr();
var formTextPr = this._originalTextFormProps || new AscCommon.CSdtTextFormPr();
if (color == 'transparent') {
formTextPr.put_CombBorder();
} else {
var brd = formTextPr.get_CombBorder();
if (!brd)
brd = new Asc.asc_CTextBorder();
brd.put_Value(1);
brd.put_Color(Common.Utils.ThemeColor.getRgbColor(color));
formTextPr.put_CombBorder(brd);
}
props.put_TextFormPr(formTextPr);
this.api.asc_SetContentControlProperties(props, this.internalId);
this.fireEvent('editcomplete', this);
}
},
ChangeSettings: function(props) {
if (this._initSettings)
this.createDelayedElements();
@ -620,6 +644,8 @@ define([
this._state.Comb=val;
}
this.btnColor.setDisabled(!val);
this.spnWidth.setDisabled(!val);
val = formTextPr.get_Width();
if ( (val===undefined || this._state.Width===undefined)&&(this._state.Width!==val) || Math.abs(this._state.Width-val)>0.1) {
@ -631,7 +657,34 @@ define([
this.chMaxChars.setValue(val && val>=0);
this.spnMaxChars.setDisabled(!val || val<0);
this.spnMaxChars.setValue(val && val>=0 ? val : 10);
var brd = formTextPr.get_CombBorder();
if (brd) {
var color = brd.get_Color();
if (color) {
if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
this.BorderColor = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() };
} else {
this.BorderColor = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
}
} else
this.BorderColor = 'transparent';
} else
this.BorderColor = 'transparent';
var type1 = typeof(this.BorderColor),
type2 = typeof(this._state.BorderColor);
if ( (type1 !== type2) || (type1=='object' &&
(this.BorderColor.effectValue!==this._state.BorderColor.effectValue || this._state.BorderColor.color.indexOf(this.BorderColor.color)<0)) ||
(type1!='object' && this._state.BorderColor.indexOf(this.BorderColor)<0 )) {
this.btnColor.setColor(this.BorderColor);
this.mnuColorPicker.clearSelection();
this.mnuColorPicker.selectByRGB(typeof(this.BorderColor) == 'object' ? this.BorderColor.color : this.BorderColor,true);
this._state.BorderColor = this.BorderColor;
}
}
this._noApply = false;
if (this.type !== type || type == Asc.c_oAscContentControlSpecificType.CheckBox)
@ -650,6 +703,26 @@ define([
}
},
UpdateThemeColors: function() {
if (this._initSettings) return;
if (!this.btnColor) {
this.btnColor = new Common.UI.ColorButton({
parentEl: (this.$el || $(this.el)).findById('#form-color-btn'),
transparent: true,
menu : true
});
this.lockedControls.push(this.btnColor);
this.btnColor.on('color:select', this.onColorPickerSelect.bind(this));
this.btnColor.setMenu();
this.mnuColorPicker = this.btnColor.getPicker();
}
this.mnuColorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.mnuColorPicker.clearSelection();
this.BorderColor && this.mnuColorPicker.selectByRGB(typeof(this.BorderColor) == 'object' ? this.BorderColor.color : this.BorderColor,true);
},
onHideMenus: function(menu, e, isFromInputControl){
if (!isFromInputControl) this.fireEvent('editcomplete', this);
},
@ -735,7 +808,8 @@ define([
textSelectImage: 'Select Image',
textFromUrl: 'From URL',
textFromFile: 'From File',
textFromStorage: 'From Storage'
textFromStorage: 'From Storage',
textColor: 'Border color'
}, DE.Views.FormSettings || {}));
});