[DE SSE] Refactoring templates in advanced settings for scaling 250

This commit is contained in:
JuliaSvinareva
2023-04-11 17:57:07 +03:00
parent fa0ae27a0d
commit 04324a2275
6 changed files with 80 additions and 24 deletions

View File

@ -89,12 +89,12 @@
</div>
<div id="id-adv-paragraph-borders" class="settings-panel">
<div class="inner-content">
<div style="width: 100%;" class="padding-small">
<div class="settings-wrap padding-small">
<label class="input-label"><%= scope.textBorderWidth %></label>
<div id="paragraphadv-combo-border-size" style="display: inline-block; vertical-align: middle; width: 93px;"></div>
<div class="border-color" style="display: inline-block; vertical-align: middle;">
<div id="paragraphadv-combo-border-size"></div>
<div class="border-color">
<label class="input-label" ><%= scope.textBorderColor %></label>
<div id="paragraphadv-border-color-btn" style="display: inline-block;"></div>
<div id="paragraphadv-border-color-btn"></div>
</div>
</div>
<label class="input-label padding-small" style="width: 100%;"><%= scope.textBorderDesc %></label>
@ -111,9 +111,9 @@
<div id="paragraphadv-button-border-none" style="display: inline-block;"></div>
</div>
</div>
<div style="width: 100%;" class="padding-small">
<div class="color-btn-wrap" class="padding-small">
<label class="input-label back-color"><%= scope.textBackColor %></label>
<div id="paragraphadv-back-color-btn" style="display: inline-block;"></div>
<div id="paragraphadv-back-color-btn"></div>
</div>
</div>
</div>

View File

@ -197,12 +197,12 @@
</div>
<div id="id-adv-table-borders" class="settings-panel">
<div class="inner-content padding-large">
<div style="width: 100%;">
<div class="settings-wrap">
<label class="input-label"><%= scope.textBorderWidth %></label>
<div id="tableadv-combo-border-size" style="display: inline-block; vertical-align: middle; width: 93px;"></div>
<div class="border-color" style="display: inline-block; vertical-align: middle;">
<div id="tableadv-combo-border-size"></div>
<div class="border-color">
<label class="input-label" ><%= scope.textBorderColor %></label>
<div id="tableadv-border-color-btn" style="display: inline-block;"></div>
<div id="tableadv-border-color-btn"></div>
</div>
</div>
</div>
@ -231,13 +231,13 @@
</div>
</div>
<div style="width: 100%;">
<div id="tableadv-panel-cell-back" style="display: inline-block;">
<label class="input-label" style="margin-right: 5px;"><%= scope.textBackColor %></label>
<div id="tableadv-button-back-color" style="display: inline-block;"></div>
<div id="tableadv-panel-cell-back">
<label class="input-label back-color"><%= scope.textBackColor %></label>
<div id="tableadv-button-back-color"></div>
</div>
<div id="tableadv-panel-table-back" style="display: inline-block;">
<div id="tableadv-panel-table-back">
<label class="input-label back-color"><%= scope.textTableBackColor %></label>
<div id="tableadv-button-table-back-color" style="display: inline-block;"></div>
<div id="tableadv-button-table-back-color"></div>
</div>
</div>
</div>

View File

@ -2123,8 +2123,8 @@ define([ 'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
ShowHideSpacing: function(spacing) {
this.BordersContainer.toggleClass('settings-hidden', spacing);
this.BordersSpacingContainer.toggleClass('settings-hidden', !spacing);
this.TableBackContainer.css('display', (!spacing && !this._allTable) ? 'none' : 'inline-block');
this.CellBackContainer.css('display', (!spacing && this._allTable) ? 'none' : 'inline-block');
this.TableBackContainer.css('display', (!spacing && !this._allTable) ? 'none' : 'flex');
this.CellBackContainer.css('display', (!spacing && this._allTable) ? 'none' : 'flex');
this.TableBackContainer.css('float', (!spacing && this._allTable) ? 'none' : 'right');
(spacing) ? this._UpdateBordersSpacing_() : this._UpdateBordersNoSpacing_();
},

View File

@ -88,7 +88,29 @@
}
#id-adv-paragraph-borders {
.settings-wrap {
width: 100%;
display: flex;
align-items: center;
}
#paragraphadv-combo-border-size {
width: 93px;
}
#paragraphadv-border-color-btn,
#paragraphadv-combo-border-size {
margin-left: 3px;
.rtl & {
margin-left: 0;
margin-right: 3px;
}
}
.border-color {
display: flex;
align-items: center;
padding-left: 20px;
.rtl & {
@ -200,11 +222,34 @@
}
#id-adv-table-borders {
.border-color {
float: right;
.settings-wrap {
width: 100%;
display: flex;
align-items: center;
}
#tableadv-combo-border-size {
width: 93px;
}
#tableadv-border-color-btn,
#tableadv-combo-border-size {
margin-left: 3px;
.rtl & {
float: left;
margin-left: 0;
margin-right: 3px;
}
}
.border-color {
padding-left: 20px;
display: flex;
align-items: center;
.rtl & {
padding-left: 0;
padding-right: 20px;
}
}
@ -235,6 +280,12 @@
margin-left: 5px;
}
}
#tableadv-panel-cell-back,
#tableadv-panel-table-back {
display: flex;
align-items: center;
}
}
#id-adv-table-wrap {

View File

@ -12,13 +12,13 @@
<div id="sliceradv-btn-style" style="width: 100%;height: 52px;"></div>
</div>
<div class="padding-very-small"><label class="header"><%= scope.strSize %></label></div>
<div>
<div class="padding-large margin-right" style="display: inline-block;">
<div class="padding-large">
<div class="margin-right" style="display: inline-block;">
<label class="input-label"><%= scope.strWidth %></label>
<div id="sliceradv-spin-width"></div>
</div>
<div id="sliceradv-button-ratio" class="margin-right" style="display: inline-block;"></div>
<div class="padding-large" style="display: inline-block;">
<div id="sliceradv-button-ratio" class="margin-right"></div>
<div style="display: inline-block;">
<label class="input-label"><%= scope.strHeight %></label>
<div id="sliceradv-spin-height"></div>
</div>

View File

@ -360,6 +360,11 @@
margin-left: 5px;
}
}
#sliceradv-button-ratio {
display: inline-block;
vertical-align: bottom;
}
}
#window-chart-data {