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

[DE] Make position image setting in form settings

Browse source
This commit is contained in:
JuliaSvinareva 2021-08-03 20:00:23 +03:00
parent c9aaf283a7
commit b634ce9493
3 changed files with 68 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -83,6 +83,22 @@
<div id="form-chb-aspect"></div>
</td>
</tr>
<tr class="form-image">
<td class="padding-large">
<label class="input-label"><%= scope.textButton %></label>
<div id="form-cnt-position" style="width: 100%;">
<div class="row">
<div id="form-img-position-preview">
<div id="form-img-example"><%= scope.textImage %></div>
</div>
<div id="form-img-slider-position-y"></div>
</div>
<div class="row">
<div id="form-img-slider-position-x"></div>
</div>
</div>
</td>
</tr>
<tr class="form-image">
<td class="padding-large">
<div id="form-button-replace" style="width:100%;"></div>

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

@ -423,6 +423,23 @@ define([
this.cmbScale.on('changed:after', this.onScaleChanged.bind(this));
this.cmbScale.on('hide:after', this.onHideMenus.bind(this));
this.sldrPreviewPositionX = new Common.UI.SingleSlider({
el: $('#form-img-slider-position-x'),
width: 116,
minValue: 0,
maxValue: 100,
value: 50
});
this.sldrPreviewPositionY = new Common.UI.SingleSlider({
el: $('#form-img-slider-position-y'),
width: 116,
minValue: 0,
maxValue: 100,
value: 50,
direction: 'vertical'
});
this.updateMetricUnit();
this.UpdateThemeColors();
},
@ -1149,7 +1166,8 @@ define([
textNever: 'Never',
textTooBig: 'Image is Too Big',
textTooSmall: 'Image is Too Small',
textScale: 'When to scale'
textScale: 'When to scale',
textButton: 'Button'
}, DE.Views.FormSettings || {}));
});

33
apps/documenteditor/main/resources/less/rightmenu.less
View file

@ -161,3 +161,36 @@
background-color: @background-normal-ie;
background-color: @background-normal;
}
#form-cnt-position {
position: relative;
.row {
display: flex;
justify-content: flex-start;
}
#form-img-position-preview {
position: relative;
height: 130px;
width: 130px;
border: 1px solid @border-regular-control;
#form-img-example {
position: absolute;
top: 24px;
left: 24px;
display: flex;
justify-content: center;
align-items: center;
height: 80px;
width: 80px;
border: 1px solid @border-regular-control;
}
}
#form-img-slider-position-x {
margin-top: 4px;
margin-left: 7px;
}
#form-img-slider-position-y {
margin-top: 7px;
margin-left: 4px;
}
}