调整颜色板样式
This commit is contained in:
袁东强
parent
88cfe89705
commit
4389548868
@ -8,6 +8,7 @@
|
||||
<link type='text/css' rel='stylesheet' href='../apps/com.actionsoft.apps.coe.pal/lib/designer/themes/default/global_zh.css' />
|
||||
<link type='text/css' rel='stylesheet' href='../apps/com.actionsoft.apps.coe.pal/lib/designer/themes/default/diagraming/designer.css' />
|
||||
<link type='text/css' rel='stylesheet' href='../apps/com.actionsoft.apps.coe.pal/lib/designer/themes/default/diagraming/ui.css' />
|
||||
<link type='text/css' rel='stylesheet' href='../apps/com.actionsoft.apps.coe.pal/lib/designer/themes/default/diagraming/designer.colorpicker.css' />
|
||||
<link rel="stylesheet" href="../commons/css/awsui.css">
|
||||
<style>
|
||||
.button.blue {
|
||||
@ -1869,131 +1870,122 @@
|
||||
-->
|
||||
<div id="ui_container">
|
||||
<div id='color_picker' class="menu color_picker" style="display: none;">
|
||||
<div class="color_items">
|
||||
<div style="background-color:rgb(255,255,255);"></div>
|
||||
<div style="background-color:rgb(229,229,229);"></div>
|
||||
<div style="background-color:rgb(207,207,207);"></div>
|
||||
<div style="background-color:rgb(184,184,184);"></div>
|
||||
<div style="background-color:rgb(161,161,161);"></div>
|
||||
<div style="background-color:rgb(138,138,138);"></div>
|
||||
<div style="background-color:rgb(115,115,115);"></div>
|
||||
<div style="background-color:rgb(92,92,92);"></div>
|
||||
<div style="background-color:rgb(69,69,69);"></div>
|
||||
<div style="background-color:rgb(50,50,50);"></div>
|
||||
<div style="background-color:rgb(23,23,23);"></div>
|
||||
<div style="background-color:rgb(0,0,0);"></div>
|
||||
<div class="clear"></div>
|
||||
<div class="color_transparent"><I18N#无填充></div>
|
||||
<div class="color_group">
|
||||
<div class="color_item" awsui-qtip="#EFECEB" style="background:#EFECEB;"></div>
|
||||
<div class="color_item" awsui-qtip="#F2F2F2" style="background:#F2F2F2;"></div>
|
||||
<div class="color_item" awsui-qtip="#E7EBED" style="background:#E7EBED;"></div>
|
||||
<div class="color_item" awsui-qtip="#FADCDB" style="background:#FADCDB;"></div>
|
||||
<div class="color_item" awsui-qtip="#FBEADA" style="background:#FBEADA;"></div>
|
||||
<div class="color_item" awsui-qtip="#FCF9EA" style="background:#FCF9EA;"></div>
|
||||
<div class="color_item" awsui-qtip="#E5F6DA" style="background:#E5F6DA;"></div>
|
||||
<div class="color_item" awsui-qtip="#DBF5F5" style="background:#DBF5F5;"></div>
|
||||
<div class="color_item" awsui-qtip="#D2D6F9" style="background:#D2D6F9;"></div>
|
||||
<div class="color_item" awsui-qtip="#FADDED" style="background:#FADDED;"></div>
|
||||
<div class="color_item" awsui-qtip="#DED9D7" style="background:#DED9D7;"></div>
|
||||
<div class="color_item" awsui-qtip="#D9D9D9" style="background:#D9D9D9;"></div>
|
||||
<div class="color_item" awsui-qtip="#E0E0E0" style="background:#E0E0E0;"></div>
|
||||
<div class="color_item" awsui-qtip="#F5B9B7" style="background:#F5B9B7;"></div>
|
||||
<div class="color_item" awsui-qtip="#F8D5B5" style="background:#F8D5B5;"></div>
|
||||
<div class="color_item" awsui-qtip="#F6EDC1" style="background:#F6EDC1;"></div>
|
||||
<div class="color_item" awsui-qtip="#CAEDB4" style="background:#CAEDB4;"></div>
|
||||
<div class="color_item" awsui-qtip="#B7EAEB" style="background:#B7EAEB;"></div>
|
||||
<div class="color_item" awsui-qtip="#A6AEF3" style="background:#A6AEF3;"></div>
|
||||
<div class="color_item" awsui-qtip="#F6BBDB" style="background:#F6BBDB;"></div>
|
||||
<div class="color_item" awsui-qtip="#BEB3AF" style="background:#BEB3AF;"></div>
|
||||
<div class="color_item" awsui-qtip="#BFBFBF" style="background:#BFBFBF;"></div>
|
||||
<div class="color_item" awsui-qtip="#9E9E9E" style="background:#9E9E9E;"></div>
|
||||
<div class="color_item" awsui-qtip="#F19594" style="background:#F19594;"></div>
|
||||
<div class="color_item" awsui-qtip="#F4C18F" style="background:#F4C18F;"></div>
|
||||
<div class="color_item" awsui-qtip="#F1E4A2" style="background:#F1E4A2;"></div>
|
||||
<div class="color_item" awsui-qtip="#B0E38F" style="background:#B0E38F;"></div>
|
||||
<div class="color_item" awsui-qtip="#94E0E1" style="background:#94E0E1;"></div>
|
||||
<div class="color_item" awsui-qtip="#7985EC" style="background:#7985EC;"></div>
|
||||
<div class="color_item" awsui-qtip="#F199C8" style="background:#F199C8;"></div>
|
||||
<div class="color_item" awsui-qtip="#9D8C88" style="background:#9D8C88;"></div>
|
||||
<div class="color_item" awsui-qtip="#A6A6A6" style="background:#A6A6A6;"></div>
|
||||
<div class="color_item" awsui-qtip="#616161" style="background:#616161;"></div>
|
||||
<div class="color_item" awsui-qtip="#EC7270" style="background:#EC7270;"></div>
|
||||
<div class="color_item" awsui-qtip="#F1AC6A" style="background:#F1AC6A;"></div>
|
||||
<div class="color_item" awsui-qtip="#E9D66F" style="background:#E9D66F;"></div>
|
||||
<div class="color_item" awsui-qtip="#95DA69" style="background:#95DA69;"></div>
|
||||
<div class="color_item" awsui-qtip="#70D5D7" style="background:#70D5D7;"></div>
|
||||
<div class="color_item" awsui-qtip="#5B79E8" style="background:#5B79E8;"></div>
|
||||
<div class="color_item" awsui-qtip="#ED77B6" style="background:#ED77B6;"></div>
|
||||
<div class="color_item" awsui-qtip="#5C4038" style="background:#5C4038;"></div>
|
||||
<div class="color_item" awsui-qtip="#7F7F7F" style="background:#7F7F7F;"></div>
|
||||
<div class="color_item" awsui-qtip="#262626" style="background:#262626;"></div>
|
||||
<div class="color_item" awsui-qtip="#A23735" style="background:#A23735;"></div>
|
||||
<div class="color_item" awsui-qtip="#A66A30" style="background:#A66A30;"></div>
|
||||
<div class="color_item" awsui-qtip="#A7932C" style="background:#A7932C;"></div>
|
||||
<div class="color_item" awsui-qtip="#569230" style="background:#569230;"></div>
|
||||
<div class="color_item" awsui-qtip="#358E90" style="background:#358E90;"></div>
|
||||
<div class="color_item" awsui-qtip="#314AA4" style="background:#314AA4;"></div>
|
||||
<div class="color_item" awsui-qtip="#A23C73" style="background:#A23C73;"></div>
|
||||
</div>
|
||||
<div class="color_base">
|
||||
<div class="color_item" awsui-qtip="#FFFFFF" style="background:#FFFFFF;border-color:#E9EDF2;"></div>
|
||||
<div class="color_item" awsui-qtip="#7F8B98" style="background:#7F8B98;"></div>
|
||||
<div class="color_item" awsui-qtip="#000000" style="background:#000000;"></div>
|
||||
<div class="color_item" awsui-qtip="#E74F4C" style="background:#E74F4C;"></div>
|
||||
<div class="color_item" awsui-qtip="#ED9745" style="background:#ED9745;"></div>
|
||||
<div class="color_item" awsui-qtip="#E0C431" style="background:#E0C431;"></div>
|
||||
<div class="color_item" awsui-qtip="#7BD144" style="background:#7BD144;"></div>
|
||||
<div class="color_item" awsui-qtip="#4CCBCD" style="background:#4CCBCD;"></div>
|
||||
<div class="color_item" awsui-qtip="#4669EA" style="background:#4669EA;"></div>
|
||||
<div class="color_item" awsui-qtip="#E855A4" style="background:#E855A4;"></div>
|
||||
</div>
|
||||
<div class="history">
|
||||
<div class="history_title"><I18N#最近使用></div>
|
||||
<div class="history_color">
|
||||
<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
|
||||
<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
|
||||
<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
|
||||
<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
|
||||
<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
|
||||
<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
|
||||
<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
|
||||
<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
|
||||
<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
|
||||
<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color_options">
|
||||
<div id="color_draw" class="color_draw " awsui-qtip="吸色(Esc退出)"><i class="awsui-iconfont"></i></div>
|
||||
<div class="color_edit">
|
||||
<div class="hex" style="display: flex;">
|
||||
<div class="input_change">Hex<i class="awsui-iconfont"></i></div>
|
||||
<div class="input_box"><input class="input_hex" type="text" maxlength="6"></div>
|
||||
</div>
|
||||
<div class="rgb" style="display: none;">
|
||||
<div class="input_change">RGB<i class="awsui-iconfont"></i></div>
|
||||
<div class="input_box">
|
||||
<input class="input_r" type="text" maxlength="3">
|
||||
<input class="input_g" type="text" maxlength="3">
|
||||
<input class="input_b" type="text" maxlength="3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color_show">
|
||||
<span id="color_show_now" class="color_show_now" awsui-qtip="当前颜色"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color_sep"></div>
|
||||
<div class="color_more">
|
||||
<img class="color_more_bg" src="../apps/com.actionsoft.apps.coe.pal/img/more_color.png"/>
|
||||
<span><I18N#更多颜色></span>
|
||||
<span class="extend-icon"><i class="awsui-iconfont"></i></span>
|
||||
<div class="more_panel left">
|
||||
<div class="color_panel" style="background: rgb(0, 251, 255);">
|
||||
<div class="saturation_white">
|
||||
<div class="saturation_black"></div>
|
||||
</div>
|
||||
<div class="picker_pin" style="color: rgb(76, 203, 205); left: 102px; top: 20px;"></div>
|
||||
</div>
|
||||
<div class="hue_horizontal">
|
||||
<div class="picker_pin" style="color: rgb(0, 251, 255); left: 81px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color_items">
|
||||
<div style="background-color:rgb(255,204,204);"></div>
|
||||
<div style="background-color:rgb(255,230,204);"></div>
|
||||
<div style="background-color:rgb(255,255,204);"></div>
|
||||
<div style="background-color:rgb(230,255,204);"></div>
|
||||
<div style="background-color:rgb(204,255,204);"></div>
|
||||
<div style="background-color:rgb(204,255,230);"></div>
|
||||
<div style="background-color:rgb(204,255,255);"></div>
|
||||
<div style="background-color:rgb(204,229,255);"></div>
|
||||
<div style="background-color:rgb(204,204,255);"></div>
|
||||
<div style="background-color:rgb(229,204,255);"></div>
|
||||
<div style="background-color:rgb(255,204,255);"></div>
|
||||
<div style="background-color:rgb(255,204,230);"></div>
|
||||
<div style="background-color:rgb(255,153,153);"></div>
|
||||
<div style="background-color:rgb(255,204,153);"></div>
|
||||
<div style="background-color:rgb(255,255,153);"></div>
|
||||
<div style="background-color:rgb(204,255,153);"></div>
|
||||
<div style="background-color:rgb(153,255,153);"></div>
|
||||
<div style="background-color:rgb(153,255,204);"></div>
|
||||
<div style="background-color:rgb(153,255,255);"></div>
|
||||
<div style="background-color:rgb(153,204,255);"></div>
|
||||
<div style="background-color:rgb(153,153,255);"></div>
|
||||
<div style="background-color:rgb(204,153,255);"></div>
|
||||
<div style="background-color:rgb(255,153,255);"></div>
|
||||
<div style="background-color:rgb(255,153,204);"></div>
|
||||
<div style="background-color:rgb(255,102,102);"></div>
|
||||
<div style="background-color:rgb(255,179,102);"></div>
|
||||
<div style="background-color:rgb(255,255,102);"></div>
|
||||
<div style="background-color:rgb(179,255,102);"></div>
|
||||
<div style="background-color:rgb(102,255,102);"></div>
|
||||
<div style="background-color:rgb(102,255,179);"></div>
|
||||
<div style="background-color:rgb(102,255,255);"></div>
|
||||
<div style="background-color:rgb(102,178,255);"></div>
|
||||
<div style="background-color:rgb(102,102,255);"></div>
|
||||
<div style="background-color:rgb(178,102,255);"></div>
|
||||
<div style="background-color:rgb(255,102,255);"></div>
|
||||
<div style="background-color:rgb(255,102,179);"></div>
|
||||
<div style="background-color:rgb(255,51,51);"></div>
|
||||
<div style="background-color:rgb(255,153,51);"></div>
|
||||
<div style="background-color:rgb(255,255,51);"></div>
|
||||
<div style="background-color:rgb(153,255,51);"></div>
|
||||
<div style="background-color:rgb(51,255,51);"></div>
|
||||
<div style="background-color:rgb(51,255,153);"></div>
|
||||
<div style="background-color:rgb(51,255,255);"></div>
|
||||
<div style="background-color:rgb(51,153,255);"></div>
|
||||
<div style="background-color:rgb(51,51,255);"></div>
|
||||
<div style="background-color:rgb(153,51,255);"></div>
|
||||
<div style="background-color:rgb(255,51,255);"></div>
|
||||
<div style="background-color:rgb(255,51,153);"></div>
|
||||
<div style="background-color:rgb(255,0,0);"></div>
|
||||
<div style="background-color:rgb(255,128,0);"></div>
|
||||
<div style="background-color:rgb(255,255,0);"></div>
|
||||
<div style="background-color:rgb(128,255,0);"></div>
|
||||
<div style="background-color:rgb(0,255,0);"></div>
|
||||
<div style="background-color:rgb(0,255,128);"></div>
|
||||
<div style="background-color:rgb(0,255,255);"></div>
|
||||
<div style="background-color:rgb(0,127,255);"></div>
|
||||
<div style="background-color:rgb(0,0,255);"></div>
|
||||
<div style="background-color:rgb(127,0,255);"></div>
|
||||
<div style="background-color:rgb(255,0,255);"></div>
|
||||
<div style="background-color:rgb(255,0,128);"></div>
|
||||
<div style="background-color:rgb(204,0,0);"></div>
|
||||
<div style="background-color:rgb(204,102,0);"></div>
|
||||
<div style="background-color:rgb(204,204,0);"></div>
|
||||
<div style="background-color:rgb(102,204,0);"></div>
|
||||
<div style="background-color:rgb(0,204,0);"></div>
|
||||
<div style="background-color:rgb(0,204,102);"></div>
|
||||
<div style="background-color:rgb(0,204,204);"></div>
|
||||
<div style="background-color:rgb(0,102,204);"></div>
|
||||
<div style="background-color:rgb(0,0,204);"></div>
|
||||
<div style="background-color:rgb(102,0,204);"></div>
|
||||
<div style="background-color:rgb(204,0,204);"></div>
|
||||
<div style="background-color:rgb(204,0,102);"></div>
|
||||
<div style="background-color:rgb(153,0,0);"></div>
|
||||
<div style="background-color:rgb(153,76,0);"></div>
|
||||
<div style="background-color:rgb(153,153,0);"></div>
|
||||
<div style="background-color:rgb(77,153,0);"></div>
|
||||
<div style="background-color:rgb(0,153,0);"></div>
|
||||
<div style="background-color:rgb(0,153,77);"></div>
|
||||
<div style="background-color:rgb(0,153,153);"></div>
|
||||
<div style="background-color:rgb(0,76,153);"></div>
|
||||
<div style="background-color:rgb(0,0,153);"></div>
|
||||
<div style="background-color:rgb(76,0,153);"></div>
|
||||
<div style="background-color:rgb(153,0,153);"></div>
|
||||
<div style="background-color:rgb(153,0,77);"></div>
|
||||
<div style="background-color:rgb(102,0,0);"></div>
|
||||
<div style="background-color:rgb(102,51,0);"></div>
|
||||
<div style="background-color:rgb(102,102,0);"></div>
|
||||
<div style="background-color:rgb(51,102,0);"></div>
|
||||
<div style="background-color:rgb(0,102,0);"></div>
|
||||
<div style="background-color:rgb(0,102,51);"></div>
|
||||
<div style="background-color:rgb(0,102,102);"></div>
|
||||
<div style="background-color:rgb(0,51,102);"></div>
|
||||
<div style="background-color:rgb(0,0,102);"></div>
|
||||
<div style="background-color:rgb(51,0,102);"></div>
|
||||
<div style="background-color:rgb(102,0,102);"></div>
|
||||
<div style="background-color:rgb(102,0,51);"></div>
|
||||
<div style="background-color:rgb(51,0,0);"></div>
|
||||
<div style="background-color:rgb(51,26,0);"></div>
|
||||
<div style="background-color:rgb(51,51,0);"></div>
|
||||
<div style="background-color:rgb(26,51,0);"></div>
|
||||
<div style="background-color:rgb(0,51,0);"></div>
|
||||
<div style="background-color:rgb(0,51,26);"></div>
|
||||
<div style="background-color:rgb(0,51,51);"></div>
|
||||
<div style="background-color:rgb(0,25,51);"></div>
|
||||
<div style="background-color:rgb(0,0,51);"></div>
|
||||
<div style="background-color:rgb(25,0,51);"></div>
|
||||
<div style="background-color:rgb(51,0,51);"></div>
|
||||
<div style="background-color:rgb(51,0,26);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="bar_list_file" class="menu list options_menu noico">
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>矩形备份 211</title>
|
||||
<defs>
|
||||
<linearGradient x1="-1.11022302e-14%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
|
||||
<stop stop-color="#E6ECF4" offset="0%"></stop>
|
||||
<stop stop-color="#B6CEF0" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="色板工具" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(-312.000000, -1277.000000)" fill="url(#linearGradient-1)" id="矩形备份-211">
|
||||
<rect x="312" y="1277" width="24" height="24" rx="12"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 790 B |
@ -237,19 +237,28 @@ var UI = {
|
||||
});
|
||||
// 字体颜色
|
||||
$("#bar_font_color").button({
|
||||
onMousedown : function() {
|
||||
onMousedown: function () {
|
||||
var color = $("#bar_font_color").button("getColor");
|
||||
$.colorpicker({
|
||||
target : $("#bar_font_color"),
|
||||
onSelect : function(color) {
|
||||
let pickerHtml = $("#color_picker", parent.document).html()
|
||||
let newPicker = $("#color_picker").html(pickerHtml)
|
||||
newPicker.dropdown({
|
||||
target: $("#bar_font_color")
|
||||
})
|
||||
ColorPicker.init({
|
||||
color: color,
|
||||
pickerDom: newPicker,
|
||||
page: 'graph',
|
||||
onSelect: function (color) {
|
||||
Designer.setFontStyle({
|
||||
color : color
|
||||
color: color
|
||||
});
|
||||
$("#bar_font_color").button("setColor",
|
||||
color)
|
||||
},
|
||||
color : color
|
||||
});
|
||||
onClose: function () {
|
||||
newPicker.dropdown("close")
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
// 文本对齐
|
||||
@ -268,58 +277,78 @@ var UI = {
|
||||
});
|
||||
// 填充
|
||||
$("#bar_fill").button({
|
||||
onMousedown : function() {
|
||||
onMousedown: function () {
|
||||
var color = $("#bar_fill").button("getColor");
|
||||
$.colorpicker({
|
||||
target : $("#bar_fill"),
|
||||
onSelect : function(color) {
|
||||
let pickerHtml = $("#color_picker", parent.document).html()
|
||||
let newPicker = $("#color_picker").html(pickerHtml)
|
||||
newPicker.dropdown({
|
||||
target: $("#bar_fill")
|
||||
})
|
||||
ColorPicker.init({
|
||||
color: color,
|
||||
pickerDom: newPicker,
|
||||
page: 'graph',
|
||||
transparent: true,
|
||||
extend: `<div id="bar_fill_gradient" title="` + 颜色渐变 + `" class='extend_item'><img src="../apps/com.actionsoft.apps.coe.pal/img/bg_gradient.svg"/></div>`,
|
||||
onSelect: function (color) {
|
||||
Designer.setFillStyle({
|
||||
type : "solid",
|
||||
color : color
|
||||
type: "solid",
|
||||
color: color
|
||||
});
|
||||
$("#bar_fill").button("setColor", color)
|
||||
},
|
||||
color : color,
|
||||
extend : "<div id='bar_fill_gradient' title='渐变' class='toolbar_button active'><div class='ico gradient'></div></div><!--div id='bar_fill_img' title='图片...' class='toolbar_button active'><div class='ico ico_img'></div></div--><!--div id='bar_fill_more' class='toolbar_button active'>More...</div-->"
|
||||
});
|
||||
$("#bar_fill_gradient").unbind().bind("click", function() {
|
||||
onClose: function () {
|
||||
newPicker.dropdown("close")
|
||||
}
|
||||
})
|
||||
$("#bar_fill_gradient").unbind().bind("click", function () {
|
||||
Designer.setFillStyle({
|
||||
type : "gradient"
|
||||
type: "gradient"
|
||||
});
|
||||
$("#color_picker").dropdown("close");
|
||||
});
|
||||
$("#bar_fill_img").unbind().bind("click", function() {
|
||||
UI.showImageSelect(function(fileId, w, h) {
|
||||
Designer.setFillStyle({
|
||||
type : "image",
|
||||
fileId : fileId,
|
||||
imageW : w,
|
||||
imageH : h
|
||||
});
|
||||
});
|
||||
$("#color_picker").dropdown("close");
|
||||
});
|
||||
$("#bar_fill_more").unbind().bind("click", function() {
|
||||
Dock.showView("graphic");
|
||||
$("#color_picker").dropdown("close");
|
||||
});
|
||||
// 暂时注释掉无用代码
|
||||
// $("#bar_fill_img").unbind().bind("click", function () {
|
||||
// UI.showImageSelect(function (fileId, w, h) {
|
||||
// Designer.setFillStyle({
|
||||
// type: "image",
|
||||
// fileId: fileId,
|
||||
// imageW: w,
|
||||
// imageH: h
|
||||
// });
|
||||
// });
|
||||
// $("#color_picker").dropdown("close");
|
||||
// });
|
||||
// $("#bar_fill_more").unbind().bind("click", function () {
|
||||
// Dock.showView("graphic");
|
||||
// $("#color_picker").dropdown("close");
|
||||
// });
|
||||
}
|
||||
});
|
||||
// 线条颜色
|
||||
$("#bar_line_color").button({
|
||||
onMousedown : function() {
|
||||
onMousedown: function () {
|
||||
var color = $("#bar_line_color").button("getColor");
|
||||
$.colorpicker({
|
||||
target : $("#bar_line_color"),
|
||||
onSelect : function(color) {
|
||||
let pickerHtml = $("#color_picker", parent.document).html()
|
||||
let newPicker = $("#color_picker").html(pickerHtml)
|
||||
newPicker.dropdown({
|
||||
target: $("#bar_line_color")
|
||||
})
|
||||
ColorPicker.init({
|
||||
color: color,
|
||||
pickerDom: newPicker,
|
||||
page: 'graph',
|
||||
onSelect: function (color) {
|
||||
Designer.setLineStyle({
|
||||
lineColor : color
|
||||
lineColor: color
|
||||
});
|
||||
$("#bar_line_color").button("setColor",
|
||||
color)
|
||||
},
|
||||
color : color
|
||||
});
|
||||
onClose: function () {
|
||||
newPicker.dropdown("close")
|
||||
},
|
||||
})
|
||||
}
|
||||
});
|
||||
// 线条宽度
|
||||
@ -4328,6 +4357,415 @@ var Navigator = {
|
||||
}
|
||||
}
|
||||
};
|
||||
const ColorPicker = {
|
||||
hex: 'FFFFFF',
|
||||
hsv: {
|
||||
h: 0,
|
||||
s: 100,
|
||||
v: 100
|
||||
},
|
||||
init: function (option) {
|
||||
let defaultOpt = {
|
||||
color: '255,255,255', // 初始颜色
|
||||
transparent: false, // 是否填充
|
||||
extend: '', // 扩展 如果需要格式为想要追加的html
|
||||
page: 'main', // 主页main 设计器 graph
|
||||
}
|
||||
picker = option.pickerDom
|
||||
options = Object.assign({}, defaultOpt, option)
|
||||
if (!picker.attr("init")) {
|
||||
picker.attr("init", true)
|
||||
}
|
||||
picker.children(".color_extend").remove()
|
||||
if (options.extend) {
|
||||
picker.append("<div class='color_extend'>" + options.extend + "</div>")
|
||||
}
|
||||
$("body").width() - picker.offset().left - picker.width() < 180 ? picker.find(".more_panel").addClass("left") : picker.find(".more_panel").removeClass("left")
|
||||
if (options.transparent) {
|
||||
picker.removeClass("alpha_disabled")
|
||||
} else {
|
||||
picker.addClass("alpha_disabled")
|
||||
}
|
||||
if (!window.EyeDropper) {
|
||||
picker.find(".color_options .color_draw").hide()
|
||||
}
|
||||
this.setHistory()
|
||||
this.domEvent()
|
||||
// 当前颜色值填充
|
||||
let curHexColor = options.color == '0,0,0,0' ? 'FFFFFF' : options.color ? ColorPicker.rgbToHex(options.color) : 'FFFFFF'
|
||||
this.hex = curHexColor
|
||||
this.setColorByInput("input_hex", curHexColor)
|
||||
},
|
||||
close: function () {
|
||||
if (options.onClose) {
|
||||
options.onClose()
|
||||
}
|
||||
},
|
||||
// 事件
|
||||
domEvent: function () {
|
||||
// 颜色选择
|
||||
picker.on("click", ".color_item", function () {
|
||||
if (options.onSelect) {
|
||||
let color = $(this).css("background-color")
|
||||
ColorPicker.setHistory(color)
|
||||
options.onSelect(color.replace(/[^\d,\.]/g, ""))
|
||||
}
|
||||
ColorPicker.close()
|
||||
})
|
||||
// 没有填充
|
||||
picker.find(".color_transparent").unbind().bind("click", function () {
|
||||
if (options.onSelect) {
|
||||
options.onSelect('0,0,0,0')
|
||||
}
|
||||
ColorPicker.close()
|
||||
})
|
||||
// 颜色值切换
|
||||
picker.find(".color_edit .input_change").off("click").on("click", function () {
|
||||
$(this).parent().css("display", "none").siblings().css("display", "flex")
|
||||
})
|
||||
// 输入框
|
||||
let oldValue = ''
|
||||
picker.find(".input_box input").off("focus.colorPicker").on("focus.colorPicker", function () {
|
||||
$(this).select()
|
||||
oldValue = $(this).val()
|
||||
}).off("mousedown.colorPicker").on("mousedown.colorPicker", function (event) {
|
||||
event.stopPropagation()
|
||||
})
|
||||
picker.find(".input_box input").off("keydown.colorPicker").on("keydown.colorPicker", function (event) {
|
||||
event.stopPropagation()
|
||||
if (event.keyCode == 13) { // 回车
|
||||
ColorPicker.close()
|
||||
}
|
||||
})
|
||||
picker.find(".input_box input").off("paste.colorPicker").on("paste.colorPicker", function (event) {
|
||||
event.stopPropagation()
|
||||
})
|
||||
picker.find(".input_box input").off("input.colorPicker").on("input.colorPicker", function (event) {
|
||||
event.stopPropagation()
|
||||
let value = $(this).val()
|
||||
if ($(this).hasClass("input_hex")) {
|
||||
value = value.replace(/[^\da-fA-F]/g, "")
|
||||
$(this).val(value)
|
||||
} else {
|
||||
value = value.replace(/[^\d]/g, "")
|
||||
if (parseInt(value) > 255) {
|
||||
value = "255"
|
||||
}
|
||||
$(this).val(value)
|
||||
}
|
||||
if (oldValue !== value) {
|
||||
oldValue = value;
|
||||
// 输入完成之后
|
||||
ColorPicker.setColorByInput($(this).attr("class"), value)
|
||||
ColorPicker.selectColor()
|
||||
}
|
||||
})
|
||||
// 拖动选择更多颜色
|
||||
let isMouseDown
|
||||
const $colorPanel = picker.find(".color_panel,.hue_horizontal")
|
||||
$colorPanel.off("mousedown.colorPicker").on("mousedown.colorPicker", function (event) {
|
||||
isMouseDown = true
|
||||
const $target = $(this)
|
||||
const left = $target.offset().left
|
||||
const top = $target.offset().top
|
||||
ColorPicker.setPickerPin($target, event.pageX - left, event.pageY - top)
|
||||
let $body = options.page == 'main' ? $("body", parent.document) : $("body")
|
||||
$body.off("mousemove.colorPicker").on("mousemove.colorPicker", function (e) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
ColorPicker.setPickerPin($target, e.pageX - left, e.pageY - top)
|
||||
})
|
||||
$body.off("mouseup.colorPicker").on("mouseup.colorPicker", function (e) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
$body.off("mousemove.colorPicker")
|
||||
$body.off("mouseup.colorPicker")
|
||||
isMouseDown = false
|
||||
ColorPicker.selectColor()
|
||||
})
|
||||
})
|
||||
// 吸色
|
||||
picker.find(".color_options .color_draw").off("click").on("click", function () {
|
||||
ColorPicker.initColorDraw()
|
||||
})
|
||||
},
|
||||
// 历史
|
||||
setHistory: function (color) {
|
||||
let arr = JSON.parse(localStorage.getItem("recent_used_color")) || []
|
||||
if (color) {
|
||||
let obj = {
|
||||
color: color,
|
||||
time: (new Date).getTime()
|
||||
}
|
||||
arr = arr.filter(function (e) {
|
||||
return e.color != color;
|
||||
})
|
||||
if (arr.length === 20) {
|
||||
arr.pop()
|
||||
}
|
||||
arr.unshift(obj)
|
||||
localStorage.setItem("recent_used_color", JSON.stringify(arr))
|
||||
}
|
||||
if (arr.length < 10) {
|
||||
arr = arr.concat(Array(10 - arr.length).fill({disabled: true}))
|
||||
}
|
||||
this.renderHistoryColor(arr.slice(0, 10))
|
||||
},
|
||||
renderHistoryColor: function (colorArr) {
|
||||
if (colorArr) {
|
||||
let html = ''
|
||||
colorArr.forEach(i => {
|
||||
if (i.disabled) {
|
||||
html += '<div class="color_item disabled" style="background: rgba(255,255,255,1);border-color: #E9EDF2;"></div>'
|
||||
} else {
|
||||
let hexColor = '#' + ColorPicker.rgbToHex(i.color)
|
||||
let border = ''
|
||||
if (i.color.indexOf('255,255,255')) {
|
||||
border = "border-color:#E9EDF2;"
|
||||
}
|
||||
html += `<div class="color_item" awsui-qtip="${hexColor}" style="background: ${hexColor};${border}"></div>`
|
||||
}
|
||||
})
|
||||
picker.find(".history_color").html(html)
|
||||
}
|
||||
},
|
||||
// 输入框
|
||||
setColorByInput: function (type, color) {
|
||||
let curColor = color
|
||||
switch (type) {
|
||||
case 'input_hex':
|
||||
if (color.length == 3 || color.length == 6) {
|
||||
this.hex = curColor
|
||||
}
|
||||
break;
|
||||
default:
|
||||
let r = picker.find(".input_r").val(), g = picker.find(".input_g").val(), b = picker.find(".input_b").val(), obj = {
|
||||
r: r ? parseInt(r) : 0,
|
||||
g: g ? parseInt(g) : 0,
|
||||
b: b ? parseInt(b) : 0
|
||||
}
|
||||
this.hex = ColorPicker.rgbToHex(`rgb(${obj.r},${obj.g},${obj.b})`)
|
||||
}
|
||||
this.hsv = ColorPicker.rgbToHsv(ColorPicker.hexToRgb(this.hex))
|
||||
ColorPicker.setInputValue(type == 'input_hex' ? curColor : undefined)
|
||||
ColorPicker.setShowColor()
|
||||
ColorPicker.setPancelColor()
|
||||
ColorPicker.setPickerColor()
|
||||
ColorPicker.changeViewByColor()
|
||||
},
|
||||
// 更多颜色div -- 拖动事件
|
||||
setPickerPin: function (targetDom, x, y) {
|
||||
let width = targetDom.width()
|
||||
let height = targetDom.height()
|
||||
let curRgb = ColorPicker.hexToRgb(this.hex)
|
||||
let hsvColor = ColorPicker.rgbToHsv(curRgb)
|
||||
x = Math.max(0, Math.min(x, width))
|
||||
// 横向选择颜色
|
||||
if (targetDom.hasClass('hue_horizontal')) {
|
||||
y = '50%'
|
||||
hsvColor.h = Math.round(360 * x / width)
|
||||
} else {
|
||||
y = Math.max(0, Math.min(y, height))
|
||||
hsvColor.s = Math.round(100 * x / width)
|
||||
hsvColor.v = Math.round(100 * (height - y) / height)
|
||||
}
|
||||
targetDom.find(".picker_pin").css({
|
||||
left: x,
|
||||
top: y
|
||||
})
|
||||
this.hsv = hsvColor
|
||||
let newColor = ColorPicker.hsvToRgb(hsvColor)
|
||||
this.hex = ColorPicker.rgbToHex(`rgb(${newColor.r},${newColor.g},${newColor.b})`)
|
||||
ColorPicker.setInputValue()
|
||||
ColorPicker.setShowColor()
|
||||
ColorPicker.setPickerColor()
|
||||
if (targetDom.hasClass('hue_horizontal')) {
|
||||
ColorPicker.setPancelColor()
|
||||
}
|
||||
},
|
||||
/************************************ 修改颜色 *****************************************/
|
||||
|
||||
// 根据颜色改变拖动条位置
|
||||
changeViewByColor: function () {
|
||||
let curHsv = this.hsv
|
||||
let panel = picker.find(".color_panel")
|
||||
let horizontal = picker.find(".hue_horizontal")
|
||||
panel.find(".picker_pin").css({
|
||||
left: Math.round(curHsv.s * panel.width() / 100),
|
||||
top: Math.round((100 - curHsv.v) * panel.height() / 100)
|
||||
})
|
||||
horizontal.find(".picker_pin").css({
|
||||
left: Math.round(curHsv.h / 360 * horizontal.width())
|
||||
})
|
||||
},
|
||||
// 设置更多颜色div背景色
|
||||
setPancelColor: function () {
|
||||
let curHsv = this.hsv
|
||||
let newRgb = ColorPicker.hsvToRgb({
|
||||
h: curHsv.h,
|
||||
s: 100,
|
||||
v: 100
|
||||
})
|
||||
picker.find(".color_panel").css("background", `rgb(${newRgb.r},${newRgb.g},${newRgb.b})`)
|
||||
},
|
||||
// 设置更多颜色div 拖动条背景色
|
||||
setPickerColor: function () {
|
||||
let curHsv = this.hsv
|
||||
let newRgb = ColorPicker.hsvToRgb({
|
||||
h: curHsv.h,
|
||||
s: 100,
|
||||
v: 100
|
||||
})
|
||||
picker.find(".color_panel .picker_pin").css("color", '#' + this.hex)
|
||||
picker.find(".hue_horizontal .picker_pin").css("color", `rgb(${newRgb.r},${newRgb.g},${newRgb.b})`)
|
||||
},
|
||||
// 设置当前颜色div背景色
|
||||
setShowColor: function () {
|
||||
picker.find(".color_show_now").css("background", '#' + this.hex)
|
||||
},
|
||||
// 输入框
|
||||
setInputValue: function (val) {
|
||||
picker.find('.input_hex').val(val || this.hex)
|
||||
let rgb = ColorPicker.hexToRgb(this.hex)
|
||||
picker.find('.input_r').val(rgb.r)
|
||||
picker.find('.input_g').val(rgb.g)
|
||||
picker.find('.input_b').val(rgb.b)
|
||||
},
|
||||
// 设置形状颜色写入本地存储
|
||||
selectColor: function () {
|
||||
if (options.onSelect) {
|
||||
let color = picker.find(".color_show_now").css("background-color")
|
||||
ColorPicker.setHistory(color)
|
||||
options.onSelect(color.replace(/[^\d,\.]/g, ""))
|
||||
}
|
||||
},
|
||||
/************************************ 颜色转换 *****************************************/
|
||||
rgbToHex: function (rgbColor) {
|
||||
let rgbArray = rgbColor.replace(/[^\d,]/g, '').split(',')
|
||||
let hexString = "";
|
||||
for (let i = 0; i < 3; i++) {
|
||||
let hex = Number(rgbArray[i]).toString(16)
|
||||
if (hex.length < 2) {
|
||||
hex = "0" + hex;
|
||||
}
|
||||
hexString += hex;
|
||||
}
|
||||
return hexString.toUpperCase();
|
||||
},
|
||||
hexToRgb: function (hexColor) {
|
||||
let hex = hexColor.replace('#', '');
|
||||
if (hex.length === 3) {
|
||||
hex = hex.split('').map(function (char) {
|
||||
return char + char;
|
||||
}).join('');
|
||||
}
|
||||
let r = parseInt(hex.substring(0, 2), 16) || 0
|
||||
let g = parseInt(hex.substring(2, 4), 16) || 0
|
||||
let b = parseInt(hex.substring(4, 6), 16) || 0
|
||||
return {
|
||||
r: r,
|
||||
g: g,
|
||||
b: b
|
||||
}
|
||||
},
|
||||
rgbToHsv: function (rgbColor) {
|
||||
let {r, g, b} = rgbColor
|
||||
r /= 255;
|
||||
g /= 255;
|
||||
b /= 255;
|
||||
let max = Math.max(r, g, b);
|
||||
let min = Math.min(r, g, b);
|
||||
let diff = max - min;
|
||||
let h, s, v;
|
||||
// 计算色相 (H)
|
||||
if (diff === 0) {
|
||||
h = 0;
|
||||
} else if (max === r) {
|
||||
h = (60 * ((g - b) / diff) + 360) % 360;
|
||||
} else if (max === g) {
|
||||
h = (60 * ((b - r) / diff) + 120) % 360;
|
||||
} else {
|
||||
h = (60 * ((r - g) / diff) + 240) % 360;
|
||||
}
|
||||
// 计算饱和度 (S)
|
||||
if (max === 0) {
|
||||
s = 0;
|
||||
} else {
|
||||
s = (diff / max) * 100;
|
||||
}
|
||||
// 计算亮度/明度 (V)
|
||||
v = max * 100;
|
||||
return {
|
||||
h: Math.round(h),
|
||||
s: Math.round(s),
|
||||
v: Math.round(v)
|
||||
}
|
||||
},
|
||||
hsvToRgb: function (hsvColor) {
|
||||
let {h, s, v} = hsvColor
|
||||
s = s / 100;
|
||||
v = v / 100;
|
||||
var r = 0, g = 0, b = 0;
|
||||
var i = parseInt((h / 60) % 6);
|
||||
var f = h / 60 - i;
|
||||
var p = v * (1 - s);
|
||||
var q = v * (1 - f * s);
|
||||
var t = v * (1 - (1 - f) * s);
|
||||
switch (i) {
|
||||
case 0:
|
||||
r = v;
|
||||
g = t;
|
||||
b = p;
|
||||
break;
|
||||
case 1:
|
||||
r = q;
|
||||
g = v;
|
||||
b = p;
|
||||
break;
|
||||
case 2:
|
||||
r = p;
|
||||
g = v;
|
||||
b = t;
|
||||
break;
|
||||
case 3:
|
||||
r = p;
|
||||
g = q;
|
||||
b = v;
|
||||
break;
|
||||
case 4:
|
||||
r = t;
|
||||
g = p;
|
||||
b = v;
|
||||
break;
|
||||
case 5:
|
||||
r = v;
|
||||
g = p;
|
||||
b = q;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
r = parseInt(r * 255)
|
||||
g = parseInt(g * 255)
|
||||
b = parseInt(b * 255)
|
||||
return {
|
||||
r,
|
||||
g,
|
||||
b
|
||||
}
|
||||
},
|
||||
// 吸色盘
|
||||
initColorDraw: function () {
|
||||
if (window.EyeDropper) {
|
||||
(new EyeDropper).open().then(function (res) {
|
||||
let color = res.sRGBHex.replace(/[^\da-fA-F]/g, "").toUpperCase()
|
||||
ColorPicker.setColorByInput('input_hex', color)
|
||||
ColorPicker.selectColor()
|
||||
}).catch(function () {
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
/**
|
||||
* jQuery的扩展
|
||||
*/
|
||||
|
||||
@ -0,0 +1,376 @@
|
||||
.color_picker {
|
||||
width: 224px;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
|
||||
border-radius: 4px;
|
||||
border: 1px solid #f3f5f7;
|
||||
padding: 8px 12px;
|
||||
/*z-index: 99999;*/
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
color: #212930;
|
||||
}
|
||||
.color_picker .color_transparent {
|
||||
height: 26px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dfe2e5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.color_picker .color_transparent:hover {
|
||||
background: #f3f5f7
|
||||
}
|
||||
.color_picker .color_group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.color_picker .color_base {
|
||||
display: flex;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.color_item {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-right: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.color_picker .color_item:nth-child(10n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.color_picker .color_item:hover {
|
||||
box-shadow: 0 0 4px 0 rgba(0,0,0,.3)
|
||||
}
|
||||
|
||||
/************************************* 最近使用 *********************************/
|
||||
.color_picker .history {
|
||||
margin-top: 4px;
|
||||
color: #6c7d8f;
|
||||
}
|
||||
.color_picker .history .history_title {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.color_picker .history .history_color {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.color_picker .disabled {
|
||||
cursor: default!important;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
|
||||
/************************************* 颜色值切换 *********************************/
|
||||
.color_picker .color_options {
|
||||
height: 28px;
|
||||
margin-top: 6px;
|
||||
display: flex;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.color_picker .color_options .color_draw {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: default;
|
||||
flex: none
|
||||
}
|
||||
|
||||
.color_picker .color_options .color_draw:hover {
|
||||
background: #f3f5f9
|
||||
}
|
||||
|
||||
.color_picker .color_options .color_edit {
|
||||
flex: auto
|
||||
}
|
||||
|
||||
.color_picker .color_options .color_edit>div {
|
||||
display: flex;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.color_picker .color_options .color_edit>div .input_change {
|
||||
width: 42px;
|
||||
height: 20px;
|
||||
margin-left: 4px;
|
||||
margin-right: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
flex: none
|
||||
}
|
||||
|
||||
.color_picker .color_options .color_edit>div .input_change:hover {
|
||||
background: #f3f5f9
|
||||
}
|
||||
|
||||
.color_picker .color_options .color_edit>div .input_change i {
|
||||
margin-left: 2px;
|
||||
font-size: 12px;
|
||||
color: #b4b9c8
|
||||
}
|
||||
|
||||
.color_picker .color_options .color_edit>div .input_box {
|
||||
width: 92px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e9edf2;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
flex: auto
|
||||
}
|
||||
|
||||
.color_picker .color_options .color_edit>div .input_box:focus-within {
|
||||
border-color: #067bef
|
||||
}
|
||||
|
||||
.color_picker .color_options .color_edit>div .input_box input {
|
||||
width: 30px;
|
||||
line-height: 100%;
|
||||
background: #fff;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-left: 1px solid #e9edf2;
|
||||
text-align: center;
|
||||
flex: auto
|
||||
}
|
||||
|
||||
.color_picker .color_options .color_edit>div .input_box input:first-child {
|
||||
border-left: none
|
||||
}
|
||||
|
||||
.color_picker .color_options .color_edit>div .input_box input.input_hex {
|
||||
padding-left: 8px;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.color_picker .color_options .color_edit .rgb {
|
||||
display: none
|
||||
}
|
||||
|
||||
.color_picker .color_options .color_show {
|
||||
display: flex;
|
||||
flex: none;
|
||||
margin-left: 8px
|
||||
}
|
||||
|
||||
.color_picker .color_options .color_show span {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid rgba(0,0,0,.1);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.color_picker .color_options .color_show span:after {
|
||||
content: "";
|
||||
display: block;
|
||||
border-radius: 1px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/************************************* 更多颜色 *********************************/
|
||||
.color_picker .color_sep {
|
||||
height: 1px;
|
||||
background: #e9edf2;
|
||||
margin: 8px 0
|
||||
}
|
||||
|
||||
.color_picker .color_more {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
cursor: default
|
||||
}
|
||||
|
||||
.color_picker .color_more .color_more_bg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
border-radius: 8px;
|
||||
background-size: cover
|
||||
}
|
||||
|
||||
.color_picker .color_more>.extend-icon {
|
||||
margin-left: auto;
|
||||
cursor: default;
|
||||
color: #9aa5b8
|
||||
}
|
||||
|
||||
.color_picker .color_more:hover {
|
||||
background: #f3f5f7
|
||||
}
|
||||
|
||||
/************************************* 颜色选择器 *********************************/
|
||||
.color_picker .color_more:hover .more_panel {
|
||||
display: block
|
||||
}
|
||||
|
||||
.color_picker .more_panel {
|
||||
width: 178px;
|
||||
height: 130px;
|
||||
box-sizing: border-box;
|
||||
padding: 8px;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 10px 0 rgba(0,0,0,.1);
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
bottom: -9px;
|
||||
left: calc(100% + 13px);
|
||||
display: none;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
.color_picker .more_panel:before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 46px;
|
||||
width: 20px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -18px
|
||||
}
|
||||
|
||||
.color_picker .more_panel.left {
|
||||
left: -191px
|
||||
}
|
||||
|
||||
.color_picker .more_panel.left:before {
|
||||
left: 100%
|
||||
}
|
||||
|
||||
.color_picker .more_panel .color_panel {
|
||||
width: 162px;
|
||||
height: 100px;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.color_picker .more_panel .color_panel .saturation_white {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg,#fff,hsla(0,0%,100%,0))
|
||||
}
|
||||
|
||||
.color_picker .more_panel .color_panel .saturation_black {
|
||||
height: 100%;
|
||||
background: linear-gradient(0deg,#000,transparent)
|
||||
}
|
||||
|
||||
.color_picker .more_panel .alpha_horizontal,.color_picker .more_panel .hue_horizontal {
|
||||
width: 162px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
margin-top: 8px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.color_picker .more_panel .alpha_horizontal .picker_pin,.color_picker .more_panel .hue_horizontal .picker_pin {
|
||||
border: 2px solid #fff
|
||||
}
|
||||
|
||||
.color_picker .more_panel .hue_horizontal {
|
||||
background: linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)
|
||||
}
|
||||
|
||||
.color_picker .more_panel .alpha_horizontal:before {
|
||||
border-radius: 4px;
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(90deg,currentColor,transparent)
|
||||
}
|
||||
|
||||
|
||||
.color_picker .picker_pin {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 4px 0 #aaa;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #fff;
|
||||
margin-left: -6px;
|
||||
margin-top: -6px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%
|
||||
}
|
||||
|
||||
.color_picker .picker_pin:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: currentColor;
|
||||
border-radius: 50%
|
||||
}
|
||||
|
||||
.color_picker.alpha_disabled .color_transparent {
|
||||
display: none
|
||||
}
|
||||
|
||||
.color_picker.alpha_disabled .color_item.alpha:hover:after {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "\e6eb";
|
||||
font-size: 14px;
|
||||
color: red;
|
||||
background: hsla(0,0%,100%,.8);
|
||||
position: absolute
|
||||
}
|
||||
|
||||
/************************************* 颜色渐变 *********************************/
|
||||
.color_picker .color_extend {
|
||||
height: 30px;
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e9edf2;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.color_picker .color_extend .extend_item {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 12px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.color_picker .color_extend .extend_item img {
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user