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

fix: style changes for color picker

Browse Source
This commit is contained in:
Konstantin Kireyev
2024-06-20 13:48:54 +05:00
parent 32425c6c8b
commit d649111a4c
4 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/common/main/lib/template/ExtendedColorDialog.template
View File

@ -4,24 +4,26 @@
<div class="color-info" style="">
<div class="margin-left-15">
<label class="color-label"><%= txtNew %></label>
<div id="field-new-color" class="color-cnt top"></div>
<div id="field-start-color" class="color-cnt bottom"></div>
<div class="color-field-wrapper">
<div id="field-new-color" class="color-cnt top"></div>
<div id="field-start-color" class="color-cnt bottom"></div>
</div>
<label class="color-label"><%= txtCurrent %></label>
</div>
<div style="padding:13px 0 2px 0;">
<label class="input-label">R:</label>
<label class="input-label">R</label>
<div id="extended-spin-r" class="color-spin"></div>
</div>
<div style="padding:2px 0;">
<label class="input-label">G:</label>
<label class="input-label">G</label>
<div id="extended-spin-g" class="color-spin"></div>
</div>
<div style="padding:2px 0;">
<label class="input-label">B:</label>
<label class="input-label">B</label>
<div id="extended-spin-b" class="color-spin"></div>
</div>
<div style="padding:11px 0 0 0;">
<label class="input-label" style="width:12px;">#:</label>
<label class="input-label" style="width:12px;">#</label>
<input id="extended-text-color" type="text" role="textbox" style="width:62px; height: 22px;">
</div>
</div>

2
apps/common/main/lib/view/ExtendedColorDialog.js
View File

@ -56,7 +56,7 @@ define([
header: false,
buttons: [{value: '1', caption: this.addButtonText}, {value: '0', caption: this.cancelButtonText}],
primary: '1',
width: 340
width: 356
});
this.hexRe = /\s*#?([0-9a-fA-F][0-9a-fA-F]?)([0-9a-fA-F][0-9a-fA-F]?)([0-9a-fA-F][0-9a-fA-F]?)\s*/;

12
apps/common/main/resources/less/extended-color-picker.less
View File

@ -32,12 +32,17 @@
background-color: @background-normal;
}
.color-field-wrapper {
border-radius: 2px;
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
border: @scaled-one-px-value solid @border-regular-control;
padding: 1px;
}
.color-cnt {
width: 63px;
height: 20px;
background-color: transparent;
border: @scaled-one-px-value-ie solid @border-color-shading-ie;
border: @scaled-one-px-value solid @border-color-shading;
&.top {
border-bottom: none;
}
@ -52,6 +57,9 @@
}
.color-transparent {
border: @scaled-one-px-value-ie solid @border-color-shading-ie;
border: @scaled-one-px-value solid @border-color-shading;
&:before {
height: 64px;
transform: translate(29px, -22px) rotate(73deg);

8
apps/common/main/resources/less/hsb-colorpicker.less
View File

@ -40,15 +40,13 @@
display: inline-block;
width: 10px;
height: 196px;
margin: 0 8px 0 10px;
margin: 0 16px;
}
.cnt-sat {
width: 12px;
height: 100%;
position: relative;
border: @scaled-one-px-value-ie solid @border-regular-control-ie;
border: @scaled-one-px-value solid @border-regular-control;
background: linear-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
@ -76,8 +74,8 @@
width: 20px;
height: 12px;
margin-top: -6px;
margin-left: -5px;
margin-left: calc(-4px - @scaled-one-px-value);
margin-left: -4px;
margin-left: calc(-3px - @scaled-one-px-value);
position: absolute;
background-position: 0px 0px;
.pixel-ratio__2_5 & {