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

Merge pull request #1133 from ONLYOFFICE/feature/de-form-settings

Browse source 
Feature/de form settings
This commit is contained in:
JuliaSvinareva 2021-08-27 18:55:01 +03:00 committed by GitHub
parent 9d7a50136e 20cfb07621
commit 7eb887be42
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 116 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/documenteditor/main/app/controller/RightMenu.js
View file

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

76
apps/documenteditor/main/app/template/FormSettings.template
View file

@ -34,11 +34,44 @@
<div id="form-txt-help"></div>
</td>
</tr>
<tr class="form-list">
<td colspan="2" class="padding-small">
<label class="input-label"><%= scope.textValue %></label>
</td>
</tr>
<tr class="form-list" style="vertical-align: top;">
<td class="padding-small">
<div id="form-txt-new-value" style="margin-right: 5px;"></div>
</td>
<td class="padding-small">
<div id="form-list-add" style="margin-left: 5px;"></div>
</td>
</tr>
<tr class="form-list" style="vertical-align: top;">
<td class="padding-large">
<div id="form-list-list" style="width:162px; height: 95px;margin-right: 5px;"></div>
</td>
<td class="padding-large">
<div id="form-list-delete" style="margin-bottom: 5px;margin-left: 5px;"></div>
<div id="form-list-up" style="margin-bottom: 5px;margin-left: 5px;"></div>
<div id="form-list-down" style="margin-left: 5px;"></div>
</td>
</tr>
<tr class="form-not-image">
<td class="padding-small">
<div id="form-chb-fixed"></div>
</td>
</tr>
<tr class="form-textfield">
<td class="padding-small">
<div id="form-chb-autofit"></div>
</td>
</tr>
<tr class="form-textfield">
<td class="padding-small">
<div id="form-chb-multiline"></div>
</td>
</tr>
<tr class="form-textfield">
<td class="padding-small">
<div id="form-chb-max-chars" style="display: inline-block;margin-top: 4px;"></div>
@ -56,24 +89,8 @@
<div id="form-spin-width" style="display: inline-block; float: right;"></div>
</td>
</tr>
<tr class="form-textfield">
<td class="padding-small">
<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-textfield">
<td class="padding-small">
<div id="form-chb-autofit"></div>
</td>
</tr>
<tr class="form-textfield">
<td class="padding-small">
<div id="form-chb-multiline"></div>
</td>
</tr>
<tr class="form-image">
<td class="padding-large">
<td class="padding-small">
<label class="input-label"><%= scope.textScale %></label>
<div id="form-combo-scale" style="width: 100%;"></div>
</td>
@ -105,28 +122,17 @@
</td>
</tr>
</table>
<table cols="2" class="form-list" style="margin-top:5px;">
<table cols="1">
<tr>
<td colspan="2" class="padding-small">
<label class="input-label"><%= scope.textValue %></label>
<td class="padding-small">
<label class="input-label" style="margin-top: 4px;"><%= scope.textColor %></label>
<div id="form-color-btn" style="display: inline-block; float: right;"></div>
</td>
</tr>
<tr style="vertical-align: top;">
<td class="padding-small">
<div id="form-txt-new-value" style="margin-right: 5px;"></div>
</td>
<td class="padding-small">
<div id="form-list-add" style="margin-left: 5px;"></div>
</td>
</tr>
<tr style="vertical-align: top;">
<tr>
<td class="padding-large">
<div id="form-list-list" style="width:162px; height: 95px;margin-right: 5px;"></div>
</td>
<td class="padding-large">
<div id="form-list-delete" style="margin-bottom: 5px;margin-left: 5px;"></div>
<div id="form-list-up" style="margin-bottom: 5px;margin-left: 5px;"></div>
<div id="form-list-down" style="margin-left: 5px;"></div>
<label class="input-label" style="margin-top: 4px;"><%= scope.textBackgroundColor %></label>
<div id="form-background-color-btn" style="display: inline-block; float: right;"></div>
</td>
</tr>
</table>

74
apps/documenteditor/main/app/view/FormSettings.js
View file

@ -743,6 +743,26 @@ define([
}
},
onColorBGSelect: function(btn, color) {
this.BackgroundColor = color;
this._state.BackgroundColor = undefined;
var props = this._originalProps || new AscCommon.CContentControlPr();
var formPr = this._originalFormProps || new AscCommon.CSdtFormPr();
if (this.api) {
if (color === 'transparent') {
formPr.put_Shd(false);
} else {
formPr.put_Shd(true, Common.Utils.ThemeColor.getRgbColor(color));
}
props.put_FormPr(formPr);
this.api.asc_SetContentControlProperties(props, this.internalId);
}
this.fireEvent('editcomplete', this);
},
onColorPickerSelect: function(btn, color) {
this.BorderColor = color;
this._state.BorderColor = undefined;
@ -947,6 +967,45 @@ define([
(this.BorderColor != 'transparent') && this.mnuColorPicker.selectByRGB(typeof(this.BorderColor) == 'object' ? this.BorderColor.color : this.BorderColor,true);
this._state.BorderColor = this.BorderColor;
}
var shd = formPr.get_Shd();
if (shd) {
var bgColor = shd.get_Color();
if (bgColor) {
if (bgColor.get_type() === Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
this.BackgroundColor = {color: Common.Utils.ThemeColor.getHexColor(bgColor.get_r(), bgColor.get_g(), bgColor.get_b()), effectValue: bgColor.get_value() };
} else {
this.BackgroundColor = Common.Utils.ThemeColor.getHexColor(bgColor.get_r(), bgColor.get_g(), bgColor.get_b());
}
} else
this.BackgroundColor = 'transparent';
} else {
this.BackgroundColor = 'transparent';
}
type1 = typeof(this.BackgroundColor);
type2 = typeof(this._state.BackgroundColor);
if ( (type1 !== type2) || (type1 === 'object' &&
(this.BackgroundColor.effectValue!==this._state.BackgroundColor.effectValue || this._state.BackgroundColor.color.indexOf(this.BackgroundColor.color)<0)) ||
(type1 !== 'object' && this._state.BackgroundColor.indexOf(this.BackgroundColor)<0 )) {
this.btnBGColor.setColor(this.BackgroundColor);
if ( typeof(this.BackgroundColor) == 'object' ) {
var isselected = false;
for (i=0; i<10; i++) {
if ( Common.Utils.ThemeColor.ThemeValues[i] === this.BackgroundColor.effectValue ) {
this.mnuBGColorPicker.select(this.BackgroundColor, true);
isselected = true;
break;
}
}
if (!isselected) this.mnuBGColorPicker.clearSelection();
} else
this.mnuBGColorPicker.select(this.BackgroundColor,true);
this._state.BackgroundColor = this.BackgroundColor;
}
}
var pictPr = props.get_PictureFormPr();
@ -1088,6 +1147,18 @@ define([
this.btnColor.setMenu();
this.mnuColorPicker = this.btnColor.getPicker();
}
if (!this.btnBGColor) {
this.btnBGColor = new Common.UI.ColorButton({
parentEl: $('#form-background-color-btn'),
transparent: true,
menu: true
});
this.lockedControls.push(this.btnBGColor);
this.btnBGColor.on('color:select', _.bind(this.onColorBGSelect, this));
this.btnBGColor.setMenu();
this.mnuBGColorPicker = this.btnBGColor.getPicker();
}
this.mnuBGColorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
},
onHideMenus: function(menu, e, isFromInputControl){
@ -1253,7 +1324,8 @@ define([
textNever: 'Never',
textTooBig: 'Image is Too Big',
textTooSmall: 'Image is Too Small',
textScale: 'When to scale'
textScale: 'When to scale',
textBackgroundColor: 'Background Color'
}, DE.Views.FormSettings || {}));
});

1
apps/documenteditor/main/locale/en.json
View file

@ -1798,6 +1798,7 @@
"DE.Views.FormSettings.textUnlock": "Unlock",
"DE.Views.FormSettings.textValue": "Value Options",
"DE.Views.FormSettings.textWidth": "Cell width",
"DE.Views.FormSettings.textBackgroundColor": "Background Color",
"DE.Views.FormsTab.capBtnCheckBox": "Checkbox",
"DE.Views.FormsTab.capBtnComboBox": "Combo Box",
"DE.Views.FormsTab.capBtnDropDown": "Dropdown",