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

Change the size of the toolbar buttons

Browse Source
This commit is contained in:
Julia Radzhabova
2024-12-25 21:25:49 +03:00
parent f3b107b168
commit fad9ff67df
16 changed files with 81 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,9 @@
@x-huge-btn-height: 52px;
@x-huge-btn-icon-size: 28px;
@x-small-btn-size: 24px;
@x-small-btn-icon-size: 24px;
@x-tiny-btn-size: 20px;
@x-tiny-btn-icon-size: 20px;
.btn {
border-radius: 1px;
@ -14,8 +18,12 @@
line-height: @value - 2px;
}
&.tiny {
.btnsize(@x-tiny-btn-size);
}
&.small {
.btnsize(20px);
.btnsize(@x-small-btn-size);
}
&.normal {
@ -341,8 +349,8 @@
}
button.small .icon {
width: 20px;
height: 20px;
width: @x-small-btn-icon-size;
height: @x-small-btn-icon-size;
min-width: 0;
}
@ -476,9 +484,9 @@
&:not(.x-huge) {
.icon {
width: 20px;
height: 20px;
line-height: 20px;
width: @x-small-btn-icon-size;
height: @x-small-btn-icon-size;
line-height: @x-small-btn-icon-size;
}
@ -514,7 +522,7 @@
position: absolute;
left: 3px;
bottom: 1px;
width: 14px;
width: calc(@x-small-btn-size - 2*3px);
height: 3px;
background-color: red;
.rtl & {
@ -544,8 +552,8 @@
position: absolute;
left: 3px;
bottom: 3px;
width: 14px;
height: 14px;
width: calc(@x-small-btn-size - 2*3px);
height: calc(@x-small-btn-size - 2*3px);
background-color: red;
.rtl & {
left: auto;
@ -602,9 +610,9 @@
.icon {
display: inline-block;
position: relative;
width: 20px;
height: 20px;
line-height: 20px;
width: @x-small-btn-icon-size;
height: @x-small-btn-icon-size;
line-height: @x-small-btn-icon-size;
}
&[disabled],

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

@ -166,7 +166,7 @@
// Others
--button-small-normal-icon-offset-x: 0;
--button-small-active-icon-offset-x: -20px;
--button-small-active-icon-offset-x: -24px;
--button-large-normal-icon-offset-x: 0;
--button-large-active-icon-offset-x: -31px;
--button-huge-normal-icon-offset-x: 0;
@ -192,7 +192,7 @@
--header-component-active-icon-opacity: 1;
--header-component-active-hover-icon-opacity: 1;
--menu-icon-item-checked-offset-x: -20px;
--menu-icon-item-checked-offset-x: -24px;
}
}

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

@ -168,8 +168,8 @@
// Others
--button-small-normal-icon-offset-x: -20px;
--button-small-active-icon-offset-x: -20px;
--button-small-normal-icon-offset-x: -24px;
--button-small-active-icon-offset-x: -24px;
--button-large-normal-icon-offset-x: -31px;
--button-large-active-icon-offset-x: -31px;
--button-huge-normal-icon-offset-x: -40px;
@ -195,6 +195,6 @@
--header-component-active-icon-opacity: 1;
--header-component-active-hover-icon-opacity: 1;
--menu-icon-item-checked-offset-x: -20px;
--menu-icon-item-checked-offset-x: -24px;
}
}

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

@ -168,8 +168,8 @@
// Others
--button-small-normal-icon-offset-x: -20px;
--button-small-active-icon-offset-x: -20px;
--button-small-normal-icon-offset-x: -24px;
--button-small-active-icon-offset-x: -24px;
--button-large-normal-icon-offset-x: -31px;
--button-large-active-icon-offset-x: -31px;
--button-huge-normal-icon-offset-x: -40px;
@ -195,6 +195,6 @@
--header-component-active-icon-opacity: 1;
--header-component-active-hover-icon-opacity: 1;
--menu-icon-item-checked-offset-x: -20px;
--menu-icon-item-checked-offset-x: -24px;
}
}

4
apps/common/main/resources/less/colors-table-ie-fix.less
View File

@ -83,8 +83,8 @@
@canvas-scroll-thumb-hover-ie: #c0c0c0;
@canvas-scroll-thumb-border-hover-ie: #cbcbcb;
@button-header-normal-icon-offset-x-ie: -20px;
@button-header-active-icon-offset-x-ie: -20px;
@button-header-normal-icon-offset-x-ie: -24px;
@button-header-active-icon-offset-x-ie: -24px;
@button-xhuge-active-icon-offset-x-ie: -28px;
@scaled-one-px-value-ie: 1px;

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

@ -189,8 +189,8 @@
//--button-huge-active-icon-offset-x: 0;
//--button-xhuge-normal-icon-offset-x: 0;
//--button-xhuge-active-icon-offset-x: 0;
--button-header-normal-icon-offset-x: -20px;
--button-header-active-icon-offset-x: -20px;
--button-header-normal-icon-offset-x: -24px;
--button-header-active-icon-offset-x: -24px;
//--menu-icon-item-checked-offset-x: 0;
--modal-window-mask-opacity: 0.2;
@ -293,8 +293,8 @@
//@button-huge-normal-icon-offset-x: var(--button-huge-normal-icon-offset-x, 0);
//@button-huge-active-icon-offset-x: var(--button-huge-active-icon-offset-x, 0);
@button-header-normal-icon-offset-x: var(--button-header-normal-icon-offset-x, -20px);
@button-header-active-icon-offset-x: var(--button-header-active-icon-offset-x, -20px);
@button-header-normal-icon-offset-x: var(--button-header-normal-icon-offset-x, -24px);
@button-header-active-icon-offset-x: var(--button-header-active-icon-offset-x, -24px);
@component-normal-icon-filter: var(--component-normal-icon-filter);
@component-normal-icon-opacity: var(--component-normal-icon-opacity, .8);

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

@ -248,7 +248,7 @@ label {
}
.menu-item-icon {
background-position-x: -20px;
background-position-x: -24px;
background-position-x: @button-small-active-icon-offset-x;
}
@ -282,9 +282,9 @@ label {
}
.menu-item-icon {
width: 20px;
height: 20px;
line-height: 20px;
width: @x-small-btn-icon-size;
height: @x-small-btn-icon-size;
line-height: @x-small-btn-icon-size;
position: relative;
&:not(:disabled) {
opacity: 0.8;

16
apps/common/main/resources/less/dropdown-menu.less
View File

@ -98,14 +98,14 @@
.menu-item-icon {
display: inline-block;
.float-left();
width: 20px;
height: 20px;
margin: -2px 4px 0 -16px;
width: @x-small-btn-icon-size;
height: @x-small-btn-icon-size;
margin: -4px 4px 0 -16px;
background-repeat: no-repeat;
opacity: @component-normal-icon-opacity;
.rtl & {
margin: -2px -16px 0 4px;
margin: -4px -16px 0 4px;
}
}
@ -148,16 +148,16 @@
&.shifted-right > li,
li.shifted-right {
& > a {
.padding-x(28px, 20px);
.padding-x(calc(@x-small-btn-icon-size + 8px), 20px);
}
.menu-item-icon {
margin: -2px 0 0 -24px;
margin: -4px 0 0 calc(-1*@x-small-btn-icon-size - 4px);
.rtl & {
margin: -2px -24px 0 0;
margin: -4px calc(-1*@x-small-btn-icon-size - 4px) 0 0;
}
}
.checked:not(.no-checkmark):before {
margin-left: -22px;
margin-left: calc(-1*@x-small-btn-icon-size - 2px);
}
}
&.shifted-left {

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

@ -213,8 +213,8 @@
width: 40px;
.icon {
width: 20px;
height: 20px;
width: @x-small-btn-icon-size;
height: @x-small-btn-icon-size;
display: inline-block;
position: relative;
@ -319,7 +319,7 @@
> svg {
position: absolute;
width: 28px;
height: 20px;
height: @x-small-btn-icon-size;
top: 50%;
margin-top: -10px;
fill: @icon-toolbar-header-ie;

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

@ -4,9 +4,9 @@
font-weight: normal;
.icon {
width: 20px;
height: 20px;
line-height: 20px;
width: @x-small-btn-icon-size;
height: @x-small-btn-icon-size;
line-height: @x-small-btn-icon-size;
padding: 0;
margin-top: -2px;
display: inline-block;

4
apps/common/main/resources/less/language-dialog.less
View File

@ -1,7 +1,7 @@
// spell check indicator
.icon.spellcheck-lang {
width: 20px;
height: 20px;
width: @x-small-btn-icon-size;
height: @x-small-btn-icon-size;
position: absolute;
}

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

@ -2,8 +2,9 @@
@height-tabs: 32px;
@height-controls: 67px;
@img-equition-filter: var(--image-border-types-filter);
@toolbar-paddings: floor(((@height-controls - 2*@x-small-btn-size)/3));
@toolbar-small-btn-margin-top: ceil(((@height-controls - 2*@x-small-btn-size)/3));
@toolbar-group-height: calc(@height-controls - 2 * @toolbar-paddings);
.toolbar {
position: relative;
@ -292,8 +293,8 @@
}
.box-controls {
//height: @height-controls; // button has strange offset in IE when odd height
padding: 7px 0;
height: @height-controls; // button has strange offset in IE when odd height
padding: @toolbar-paddings 0;
display: flex;
.panel {
display: table;
@ -363,7 +364,7 @@
}
}
.group {
height: 52px !important;
height: @toolbar-group-height !important;
&.flex {
vertical-align: bottom;
}
@ -430,11 +431,11 @@
}
.elset {
height: 20px;
height: @x-small-btn-size;
font-size: 0;
&:not(:first-child) {
margin-top: 8px;
margin-top: @toolbar-small-btn-margin-top;
}
&.font-normal {
@ -458,29 +459,29 @@
}
&.long {
height: 52px;
height: @toolbar-group-height;
}
&.short {
height: 20px;
height: @x-small-btn-size;
}
}
.btn-slot {
display: inline-block;
width: 20px;
width: @x-small-btn-size;
height: auto;
&.split-large {
width: 37px;
width: calc(@x-small-btn-size + 17px);
}
&.split {
width: 31px;
width: calc(@x-small-btn-size + 11px);
}
&.split-small {
width: 26px;
width: calc(@x-small-btn-size + 6px);
}
&.text {
@ -845,24 +846,24 @@
}
& {
width: 21px;
height: 21px;
width: calc(@x-small-btn-size + 1px);
height: calc(@x-small-btn-size + 1px);
.pixel-ratio__2_5 & {
width: 20px;
height: 20px;
width: @x-small-btn-size;
height: @x-small-btn-size;
}
}
.icon {
width: 22px;
height: 22px;
width: @x-small-btn-size; // calc(@x-small-btn-size + 2px)
height: @x-small-btn-size; // calc(@x-small-btn-size + 2px)
.pixel-ratio__1_25 &,
.pixel-ratio__1_75 &,
.pixel-ratio__2_5 & {
width: 20px;
height: 20px;
width: @x-small-btn-icon-size;
height: @x-small-btn-icon-size;
}
}
}
@ -1047,7 +1048,7 @@
}
}
.menu-item-icon {
background-position-x: -20px;
background-position-x: -24px;
background-position-x: @button-small-active-icon-offset-x;
}

2
apps/documenteditor/main/app/template/Toolbar.template
View File

@ -38,7 +38,7 @@
<section class="box-panels">
<section class="panel" data-tab="home" role="tabpanel" aria-labelledby="home">
<div class="group small">
<div class="elset" style="width:230px;">
<div class="elset font-attr">
<span class="btn-slot float-left" id="slot-field-fontname"></span>
<span class="btn-slot margin-left-2 float-left" id="slot-field-fontsize"></span>
<span class="btn-slot margin-left-2" id="slot-btn-incfont"></span>

2
apps/documenteditor/main/resources/less/toolbar.less
View File

@ -190,7 +190,7 @@
}
#slot-field-fontname {
width: 106px;
width: 120px;
}
#slot-field-fontsize {

2
apps/presentationeditor/main/app/template/Toolbar.template
View File

@ -55,7 +55,7 @@
<section class="box-panels">
<section class="panel" data-tab="home" role="tabpanel" aria-labelledby="home">
<div class="group small">
<div class="elset" style="width:230px;">
<div class="elset font-attr">
<span class="btn-slot float-left" id="slot-field-fontname"></span>
<span class="btn-slot margin-left-2 float-left" id="slot-field-fontsize"></span>
<span class="btn-slot margin-left-2" id="slot-btn-incfont"></span>

2
apps/presentationeditor/main/resources/less/toolbar.less
View File

@ -145,7 +145,7 @@
}
#slot-field-fontname {
width: 111px;
width: 135px;
}
#slot-field-fontsize {