pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-04-07 14:06:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update controls style

Browse Source
This commit is contained in:
Julia Radzhabova
2025-03-19 16:15:19 +03:00
parent 4fe3624c4b
commit fd30ad16ab
20 changed files with 96 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/common/main/lib/template/AutoCorrectDialog.template
View File

@ -13,9 +13,9 @@
</td>
</tr>
<tr>
<td>
<div id="auto-correct-replace" class="margin-right-2" style="height:22px;width: 115px;display: inline-block;"></div>
<div id="auto-correct-by" style="height:22px;width: 234px;display: inline-block;"></div>
<td style="padding-bottom: 4px;">
<div id="auto-correct-replace" class="margin-right-2" style="width: 115px;display: inline-block;"></div>
<div id="auto-correct-by" style="width: 234px;display: inline-block;"></div>
</td>
</tr>
<tr>
@ -43,7 +43,7 @@
</tr>
<tr>
<td>
<div id="auto-correct-rec-find" style="height:22px;width: 100%;margin-bottom: 4px;"></div>
<div id="auto-correct-rec-find" style="width: 100%;margin-bottom: 4px;"></div>
</td>
</tr>
<tr>
@ -119,7 +119,7 @@
<tr>
<td>
<label><%= scope.textFLDont %></label>
<div id="auto-correct-exceptions-find" style="height:22px;width: 100%;margin-bottom: 4px;"></div>
<div id="auto-correct-exceptions-find" style="width: 100%;margin-bottom: 4px;"></div>
</td>
</tr>
<tr>

19
apps/common/main/resources/less/asc-mixins.less
View File

@ -799,6 +799,21 @@
.vertical-align-middle {
vertical-align: middle;
}
.vertical-align-top {
vertical-align: top
}
.display-inline-block-middle {
display: inline-block;
.vertical-align-middle();
}
.display-inline-block-top {
display: inline-block;
.vertical-align-top();
}
//.adaptive-solid-border(@width, @color, @borderside: all) {
// @lb-border: if((@borderside = all), border, e('border-@{borderside}'));
// @lb-border-width: if((@borderside = all), border-width, e('border-@{borderside}-width'));
@ -858,4 +873,8 @@
.text-secondary {
color: @text-secondary-ie;
color: @text-secondary;
}
.form-control-size {
height: @form-control-size;
}

32
apps/common/main/resources/less/buttons.less
View File

@ -25,7 +25,7 @@
}
&.normal {
height: 22px;
height: @form-control-size;
}
&.large {
@ -440,7 +440,7 @@
background-color: @background-normal;
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
border: @scaled-one-px-value solid @border-regular-control;
.border-radius(@border-radius-button);
.border-radius(@border-radius-button-normal);
&:focus:not(.disabled) {
border-color: @border-control-focus-ie;
@ -664,7 +664,7 @@
&:first-child:not(:last-child):not(.dropdown-toggle) {
.rtl & {
.border-radius(@border-radius-button);
.border-radius(@border-radius-button-normal);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
@ -687,7 +687,7 @@
> .dropdown-toggle:not(first-child) {
.rtl & {
.border-radius(@border-radius-button);
.border-radius(@border-radius-button-normal);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@ -822,12 +822,12 @@
.btn-color {
width: 45px;
height: 22px;
height: @form-control-size;
padding: @scaled-one-px-value-ie 11px @scaled-one-px-value-ie @scaled-one-px-value-ie;
padding: @scaled-one-px-value 11px @scaled-one-px-value @scaled-one-px-value;
border:@scaled-one-px-value-ie solid @border-regular-control-ie;
border:@scaled-one-px-value solid @border-regular-control;
.border-radius(@border-radius-button);
.border-radius(@border-radius-button-normal);
.rtl & {
padding: @scaled-one-px-value-ie @scaled-one-px-value-ie @scaled-one-px-value-ie 11px;
@ -1008,7 +1008,7 @@
box-shadow: inset 0 0 0 @scaled-one-px-value-ie @border-regular-control-ie;
box-shadow: inset 0 0 0 @scaled-one-px-value @border-regular-control;
.border-radius(@border-radius-button);
.border-radius(@border-radius-button-normal);
&:hover,
&.over {
@ -1047,12 +1047,12 @@
.btn-text-default {
width: 75px;
height: 22px;
height: @form-control-size;
background: @background-normal-ie;
background: @background-normal;
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
border: @scaled-one-px-value solid @border-regular-control;
.border-radius(@border-radius-button);
.border-radius(@border-radius-button-normal);
.font-size-normal();
&.auto {
@ -1166,12 +1166,12 @@
justify-content: center;
align-items: center;
width: 100%;
height: 22px;
height: @form-control-size;
background: @background-normal-ie;
background: @background-normal;
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
border: @scaled-one-px-value solid @border-regular-control;
.border-radius(@border-radius-button);
.border-radius(@border-radius-button-normal);
button {
width: 100%;
@ -1219,12 +1219,12 @@
.btn-text-split-default {
width: 75px;
height: 22px;
height: @form-control-size;
background: @background-normal-ie;
background: @background-normal;
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
border: @scaled-one-px-value solid @border-regular-control;
.border-radius(@border-radius-button);
.border-radius(@border-radius-button-normal);
&.auto {
width: auto;
@ -1269,12 +1269,12 @@
.btn-icon-default {
width: 45px;
height: 22px;
height: @form-control-size;
background: @background-normal-ie;
background: @background-normal;
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
border: @scaled-one-px-value solid @border-regular-control;
.border-radius(@border-radius-button);
.border-radius(@border-radius-button-normal);
.icon {
width: 28px;
@ -1380,7 +1380,7 @@
background-color: @background-normal;
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
border: @scaled-one-px-value solid @border-regular-control;
.border-radius(@border-radius-button);
.border-radius(@border-radius-button-normal);
&.template-table {
width: 92px;

6
apps/common/main/resources/less/colors-table-white.less
View File

@ -185,7 +185,7 @@
--layout-padding-toolbar: 0 10px;
--layout-margin-left-panel: 10px 3px 8px 40px;
--layout-margin-right-panel: 10px 4px 8px 3px;
--layout-padding-right-panel-content: 0 5px 0 12px;
--layout-padding-right-panel-content: 0 12px 0 12px;
--x-small-btn-size: 24px;
--x-small-btn-icon-size: 24px;
@ -200,7 +200,9 @@
--border-radius-checkbox: 4px;
--border-radius-button-base: 4px;
--border-radius-button-toolbar: 4px;
--border-radius-button: 4px;
--border-radius-button-normal: 4px;
--line-height-base: 1.5;
--input-height-base: 24px;
}
}

12
apps/common/main/resources/less/colors-table.less
View File

@ -253,7 +253,10 @@
--border-radius-checkbox: 2px;
--border-radius-button-base: 1px;
--border-radius-button-toolbar: 1px;
--border-radius-button: 2px;
--border-radius-button-normal: 2px;
--input-height-base: 22px;
--line-height-base: 1.428571429;
}
// Background
@ -380,9 +383,12 @@
@border-radius-form-control: var(--border-radius-form-control, 2px);
@border-radius-checkbox: var(--border-radius-checkbox, 2px);
@border-radius-button-base: var(--border-radius-button-toolbar, 1px);
@border-radius-button-base: var(--border-radius-button-base, 1px);
@border-radius-button-toolbar: var(--border-radius-button-toolbar, 1px);
@border-radius-button: var(--border-radius-button, 2px);
@border-radius-button-normal: var(--border-radius-button-normal, 2px);
@input-height-base: var(--input-height-base, 22px);
@line-height-base: var(--line-height-base, 1.5);
// Canvas
// ---------------------------

8
apps/common/main/resources/less/combo-dataview.less
View File

@ -9,7 +9,7 @@
overflow: hidden;
width: @combo-dataview-width;
height: 100%;
.border-radius(@border-radius-button);
.border-radius(@border-radius-button-normal);
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
border: @scaled-one-px-value solid @border-regular-control;
background-color: @background-normal-ie;
@ -25,14 +25,14 @@
.float-right();
button {
border-radius:0 @border-radius-button @border-radius-button 0;
border-radius:0 @border-radius-button-normal @border-radius-button-normal 0;
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
border: @scaled-one-px-value solid @border-regular-control;
background-color: @background-normal-ie;
background-color: @background-normal;
.rtl & {
border-radius:@border-radius-button 0 0 @border-radius-button;
border-radius:@border-radius-button-normal 0 0 @border-radius-button-normal;
}
&.dropdown-toggle {
@ -116,7 +116,7 @@
margin: @minus-px 0 0 @minus-px;
}
.rtl & {
.border-radius(@border-radius-button);
.border-radius(@border-radius-button-normal);
.border-right-radius(0);
.dataview {

7
apps/common/main/resources/less/common.less
View File

@ -149,6 +149,8 @@ label {
width: 220px;
height: 100%;
display: none;
padding: var(--layout-margin-right-panel);
//border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
//border-left: @scaled-one-px-value solid @border-toolbar;
//line-height: 15px;
@ -158,12 +160,15 @@ label {
// border-left: 0 none;
//}
.settings-panel {
.content-box {
height: 100%;
width: 100%;
padding: 0 10px 0 15px;
padding: var(--layout-padding-right-panel-content);
.rtl & {
padding: 0 15px 0 10px;
padding: var(--layout-padding-right-panel-content);
}
}
}

2
apps/common/main/resources/less/input.less
View File

@ -67,6 +67,8 @@
}
.input-field {
display: flex;
input,
.input-error {
.float-left();

2
apps/common/main/resources/less/review-changes.less
View File

@ -4,7 +4,7 @@
margin-right: 10px;
button {
height: 22px;
height: @form-control-size;
}
}

2
apps/common/main/resources/less/searchdialog.less
View File

@ -101,7 +101,7 @@
position: absolute;
right: 0;
height: 100%;
line-height: 22px;
line-height: @form-control-size;
padding: 0 4px;
color: @text-secondary-ie;
color: @text-secondary;

4
apps/common/main/resources/less/spinner.less
View File

@ -1,5 +1,5 @@
.spinner{
@spin-height: 22px;
@spin-height: @form-control-size;
@trigger-width: 17px;
position: relative;
@ -17,7 +17,7 @@
display: block;
position: relative;
width: @trigger-width;
height: (@spin-height/2) - 1;
height: calc(@spin-height/2 - 1px);
height: calc(@spin-height/2 - 1px/@pixel-ratio-factor);
padding: 0;
margin: 0;

2
apps/common/main/resources/less/synchronize-tip.less
View File

@ -109,7 +109,7 @@
display: inline-block;
border: 1px solid @border-regular-control-ie;
border: 1px solid @border-regular-control;
border-radius: @border-radius-button;
border-radius: @border-radius-button-normal;
padding: 3px 12px;
margin-top: 10px;
&:hover {

6
apps/common/main/resources/less/toolbar.less
View File

@ -549,8 +549,8 @@
border: 1px solid @border-regular-control-ie;
border: 1px solid @border-regular-control;
.border-radius(@border-radius-button-toolbar);
width: 22px;
height: 22px;
width: @form-control-size;
height: @form-control-size;
}
.checkbox-indeterminate {
@ -897,7 +897,7 @@
}
&.borders--small {
border-radius: @border-radius-button;
border-radius: @border-radius-button-normal;
&:not(:active) {
//box-shadow: inset 0 0 0 @scaled-one-px-value-ie @border-regular-control-ie;

9
apps/common/main/resources/less/variables.less
View File

@ -93,8 +93,8 @@
@font-size-h5: @font-size-base;
@font-size-h6: ceil(@font-size-base * 0.85);
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor(@font-size-base * @line-height-base);
@line-height-base: var(--line-height-base, 1.428571429);
@line-height-computed: calc(@font-size-base * @line-height-base);
@headings-font-family: @font-family-base;
@headings-font-weight: 500;
@ -219,7 +219,8 @@
@input-color-placeholder: @text-tertiary; //#cfcfcf; // @gray;
@input-height-base: (floor(@font-size-base * @line-height-base) + (@padding-base-vertical * 2) + 5);
@input-height-base: calc(@font-size-base * @line-height-base + (@padding-base-vertical * 2) + 5);
@input-height-base: var(--input-height-base); // get from theme
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
@ -328,7 +329,7 @@
@navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@navbar-padding-vertical: calc((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height: 340px;
@navbar-default-color: #777;

2
apps/common/main/resources/mods/less/mixins/nav-divider.less
View File

@ -10,7 +10,7 @@
.nav-divider(@color: #e5e5e5) {
height: 1px;
margin: ((@line-height-computed / 2) - 1) 0;
margin: calc((@line-height-computed / 2) - 1) 0;
overflow: hidden;
background-color: @color;
}

16
apps/common/main/resources/mods/less/type.less
View File

@ -33,7 +33,7 @@ h1, .h1,
h2, .h2,
h3, .h3 {
margin-top: @line-height-computed;
margin-bottom: (@line-height-computed / 2);
margin-bottom: calc(@line-height-computed / 2);
small,
.small {
@ -43,8 +43,8 @@ h3, .h3 {
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: (@line-height-computed / 2);
margin-bottom: (@line-height-computed / 2);
margin-top: calc(@line-height-computed / 2);
margin-bottom: calc(@line-height-computed / 2);
small,
.small {
@ -64,7 +64,7 @@ h6, .h6 { font-size: @font-size-h6; }
// -------------------------
p {
margin: 0 0 (@line-height-computed / 2);
margin: 0 0 calc(@line-height-computed / 2);
}
.lead {
@ -153,8 +153,8 @@ mark,
// -------------------------
.page-header {
padding-bottom: ((@line-height-computed / 2) - 1);
margin: (@line-height-computed * 2) 0 @line-height-computed;
padding-bottom: calc((@line-height-computed / 2) - 1);
margin: calc(@line-height-computed * 2) 0 @line-height-computed;
border-bottom: 1px solid @page-header-border-color;
}
@ -166,7 +166,7 @@ mark,
ul,
ol {
margin-top: 0;
margin-bottom: (@line-height-computed / 2);
margin-bottom: calc(@line-height-computed / 2);
ul,
ol {
margin-bottom: 0;
@ -251,7 +251,7 @@ abbr[data-original-title] {
// Blockquotes
blockquote {
padding: (@line-height-computed / 2) @line-height-computed;
padding: calc(@line-height-computed / 2) @line-height-computed;
margin: 0 0 @line-height-computed;
font-size: @blockquote-font-size;
border-left: 5px solid @blockquote-border-color;

2
apps/common/main/resources/mods/less/variables.less
View File

@ -214,7 +214,7 @@
@input-color-placeholder: #999;
//** Default `.form-control` height
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
@input-height-base: calc(@line-height-computed + (@padding-base-vertical * 2) + 2);
//** Large `.form-control` height
@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
//** Small `.form-control` height

6
apps/documenteditor/main/app/view/BookmarksDialog.js
View File

@ -82,7 +82,7 @@ define([
'<td class="padding-large">',
'<div id="bookmarks-txt-name" class="margin-right-10" style="display:inline-block;vertical-align: top;"></div>',
'<div id="bookmarks-btn-add" style="display: inline-block; position: relative;"></div>',
'<div id="bookmarks-btn-add-copy-dropdown" style="display: inline-block; position: relative; vertical-align: top; height: 22px; width: 0px">',
'<div id="bookmarks-btn-add-copy-dropdown" class="form-control-size" style="display: inline-block; position: relative; vertical-align: top; width: 0px">',
//Invisible button, needed for boostrap dropdown logic to work
'<button type="button" class="dropdown-toggle" data-toggle="dropdown" style="display: none"></button>',
'</div>',
@ -325,8 +325,8 @@ define([
var copyBox = $(
'<div class="bookmark-copy-dropdown dropdown-menu" style="width: 291px; ' + cssOffset + ' padding: 10px;">' +
'<div class="bookmark-copy-dropdown-input"></div>' +
'<button class="bookmark-copy-dropdown-btn btn btn-text-default margin-left-5" style="width: 86px;">' + me.textCopy + '</button>' +
'<div class="bookmark-copy-dropdown-input display-inline-block-middle"></div>' +
'<button class="bookmark-copy-dropdown-btn btn btn-text-default margin-left-5 display-inline-block-middle" style="width: 86px;">' + me.textCopy + '</button>' +
'</div>'
);
parentEl.append(copyBox);

10
apps/documenteditor/main/app/view/ListSettingsDialog.js
View File

@ -101,11 +101,11 @@ define([
'<tr>',
'<td class="padding-right-5" style="width: 100%;">',
'<label class="input-label">' + this.txtNumFormatString + '</label>',
'<div id="id-dlg-numbering-format-str" style="width: 100%;height:22px;margin-bottom: 10px;"></div>',
'<div id="id-dlg-numbering-format-str" style="width: 100%;margin-bottom: 10px;"></div>',
'</td>',
'<td class="padding-left-5">',
'<label class="input-label"></label>',
'<div id="id-dlg-btn-more" style="width: 100%;height:22px;margin-bottom: 10px;"></div>',
'<div id="id-dlg-btn-more" style="width: 100%;margin-bottom: 10px;"></div>',
'</td>',
'</tr>',
'</table>',
@ -146,7 +146,7 @@ define([
'<tr>',
'<td colspan="2" style="width: 100%;">',
'<label class="input-label">' + this.txtNumFormatString + '</label>',
'<div id="id-dlg-numbering-format-str" style="width: 100%;height:22px;margin-bottom: 10px;"></div>',
'<div id="id-dlg-numbering-format-str" style="width: 100%;margin-bottom: 10px;"></div>',
'</td>',
'</tr>',
'</table>',
@ -154,7 +154,7 @@ define([
'<tr>',
'<td class="padding-right-5">',
'<label class="input-label" style="display: block;">' + this.txtFontName + '</label>',
'<div id="id-dlg-numbering-font-name" style="display: inline-block;width: 90px;height:22px;margin-bottom: 10px;vertical-align: middle;"></div>',
'<div id="id-dlg-numbering-font-name" style="display: inline-block;width: 90px;margin-bottom: 10px;vertical-align: middle;"></div>',
'<div id="id-dlg-numbering-bold" class="margin-left-4" style="display: inline-block;margin-bottom: 10px;vertical-align: middle;"></div>',
'<div id="id-dlg-numbering-italic" class="margin-left-4" style="display: inline-block;margin-bottom: 10px;vertical-align: middle;"></div>',
'<div id="id-dlg-bullet-color" class="margin-left-4" style="display: inline-block;margin-bottom: 10px;vertical-align: middle;"></div>',
@ -194,7 +194,7 @@ define([
'<tr>',
'<td colspan="2">',
'<label class="input-label" style="display: block;">' + this.txtFontName + '</label>',
'<div id="id-dlg-numbering-font-name" style="display: inline-block;width: 100%;height:22px;margin-bottom: 10px;"></div>',
'<div id="id-dlg-numbering-font-name" style="display: inline-block;width: 100%;margin-bottom: 10px;"></div>',
'</td>',
'</tr>',
'<tr>',

7
apps/documenteditor/main/resources/less/rightmenu.less
View File

@ -406,10 +406,3 @@
}
}
.right-panel {
padding: var(--layout-margin-right-panel);
//border-right: @border-sidemenu;
.content-box {
height: 100%;
}
}