调整颜色板样式
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/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/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/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">
|
<link rel="stylesheet" href="../commons/css/awsui.css">
|
||||||
<style>
|
<style>
|
||||||
.button.blue {
|
.button.blue {
|
||||||
@ -1869,131 +1870,122 @@
|
|||||||
-->
|
-->
|
||||||
<div id="ui_container">
|
<div id="ui_container">
|
||||||
<div id='color_picker' class="menu color_picker" style="display: none;">
|
<div id='color_picker' class="menu color_picker" style="display: none;">
|
||||||
<div class="color_items">
|
<div class="color_transparent"><I18N#无填充></div>
|
||||||
<div style="background-color:rgb(255,255,255);"></div>
|
<div class="color_group">
|
||||||
<div style="background-color:rgb(229,229,229);"></div>
|
<div class="color_item" awsui-qtip="#EFECEB" style="background:#EFECEB;"></div>
|
||||||
<div style="background-color:rgb(207,207,207);"></div>
|
<div class="color_item" awsui-qtip="#F2F2F2" style="background:#F2F2F2;"></div>
|
||||||
<div style="background-color:rgb(184,184,184);"></div>
|
<div class="color_item" awsui-qtip="#E7EBED" style="background:#E7EBED;"></div>
|
||||||
<div style="background-color:rgb(161,161,161);"></div>
|
<div class="color_item" awsui-qtip="#FADCDB" style="background:#FADCDB;"></div>
|
||||||
<div style="background-color:rgb(138,138,138);"></div>
|
<div class="color_item" awsui-qtip="#FBEADA" style="background:#FBEADA;"></div>
|
||||||
<div style="background-color:rgb(115,115,115);"></div>
|
<div class="color_item" awsui-qtip="#FCF9EA" style="background:#FCF9EA;"></div>
|
||||||
<div style="background-color:rgb(92,92,92);"></div>
|
<div class="color_item" awsui-qtip="#E5F6DA" style="background:#E5F6DA;"></div>
|
||||||
<div style="background-color:rgb(69,69,69);"></div>
|
<div class="color_item" awsui-qtip="#DBF5F5" style="background:#DBF5F5;"></div>
|
||||||
<div style="background-color:rgb(50,50,50);"></div>
|
<div class="color_item" awsui-qtip="#D2D6F9" style="background:#D2D6F9;"></div>
|
||||||
<div style="background-color:rgb(23,23,23);"></div>
|
<div class="color_item" awsui-qtip="#FADDED" style="background:#FADDED;"></div>
|
||||||
<div style="background-color:rgb(0,0,0);"></div>
|
<div class="color_item" awsui-qtip="#DED9D7" style="background:#DED9D7;"></div>
|
||||||
<div class="clear"></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>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
<ul id="bar_list_file" class="menu list options_menu noico">
|
<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({
|
$("#bar_font_color").button({
|
||||||
onMousedown : function() {
|
onMousedown: function () {
|
||||||
var color = $("#bar_font_color").button("getColor");
|
var color = $("#bar_font_color").button("getColor");
|
||||||
$.colorpicker({
|
let pickerHtml = $("#color_picker", parent.document).html()
|
||||||
target : $("#bar_font_color"),
|
let newPicker = $("#color_picker").html(pickerHtml)
|
||||||
onSelect : function(color) {
|
newPicker.dropdown({
|
||||||
|
target: $("#bar_font_color")
|
||||||
|
})
|
||||||
|
ColorPicker.init({
|
||||||
|
color: color,
|
||||||
|
pickerDom: newPicker,
|
||||||
|
page: 'graph',
|
||||||
|
onSelect: function (color) {
|
||||||
Designer.setFontStyle({
|
Designer.setFontStyle({
|
||||||
color : color
|
color: color
|
||||||
});
|
});
|
||||||
$("#bar_font_color").button("setColor",
|
$("#bar_font_color").button("setColor",
|
||||||
color)
|
color)
|
||||||
},
|
},
|
||||||
color : color
|
onClose: function () {
|
||||||
});
|
newPicker.dropdown("close")
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// 文本对齐
|
// 文本对齐
|
||||||
@ -268,58 +277,78 @@ var UI = {
|
|||||||
});
|
});
|
||||||
// 填充
|
// 填充
|
||||||
$("#bar_fill").button({
|
$("#bar_fill").button({
|
||||||
onMousedown : function() {
|
onMousedown: function () {
|
||||||
var color = $("#bar_fill").button("getColor");
|
var color = $("#bar_fill").button("getColor");
|
||||||
$.colorpicker({
|
let pickerHtml = $("#color_picker", parent.document).html()
|
||||||
target : $("#bar_fill"),
|
let newPicker = $("#color_picker").html(pickerHtml)
|
||||||
onSelect : function(color) {
|
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({
|
Designer.setFillStyle({
|
||||||
type : "solid",
|
type: "solid",
|
||||||
color : color
|
color: color
|
||||||
});
|
});
|
||||||
$("#bar_fill").button("setColor", color)
|
$("#bar_fill").button("setColor", color)
|
||||||
},
|
},
|
||||||
color : color,
|
onClose: function () {
|
||||||
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-->"
|
newPicker.dropdown("close")
|
||||||
});
|
}
|
||||||
$("#bar_fill_gradient").unbind().bind("click", function() {
|
})
|
||||||
|
$("#bar_fill_gradient").unbind().bind("click", function () {
|
||||||
Designer.setFillStyle({
|
Designer.setFillStyle({
|
||||||
type : "gradient"
|
type: "gradient"
|
||||||
});
|
});
|
||||||
$("#color_picker").dropdown("close");
|
$("#color_picker").dropdown("close");
|
||||||
});
|
});
|
||||||
$("#bar_fill_img").unbind().bind("click", function() {
|
// 暂时注释掉无用代码
|
||||||
UI.showImageSelect(function(fileId, w, h) {
|
// $("#bar_fill_img").unbind().bind("click", function () {
|
||||||
Designer.setFillStyle({
|
// UI.showImageSelect(function (fileId, w, h) {
|
||||||
type : "image",
|
// Designer.setFillStyle({
|
||||||
fileId : fileId,
|
// type: "image",
|
||||||
imageW : w,
|
// fileId: fileId,
|
||||||
imageH : h
|
// imageW: w,
|
||||||
});
|
// imageH: h
|
||||||
});
|
// });
|
||||||
$("#color_picker").dropdown("close");
|
// });
|
||||||
});
|
// $("#color_picker").dropdown("close");
|
||||||
$("#bar_fill_more").unbind().bind("click", function() {
|
// });
|
||||||
Dock.showView("graphic");
|
// $("#bar_fill_more").unbind().bind("click", function () {
|
||||||
$("#color_picker").dropdown("close");
|
// Dock.showView("graphic");
|
||||||
});
|
// $("#color_picker").dropdown("close");
|
||||||
|
// });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// 线条颜色
|
// 线条颜色
|
||||||
$("#bar_line_color").button({
|
$("#bar_line_color").button({
|
||||||
onMousedown : function() {
|
onMousedown: function () {
|
||||||
var color = $("#bar_line_color").button("getColor");
|
var color = $("#bar_line_color").button("getColor");
|
||||||
$.colorpicker({
|
let pickerHtml = $("#color_picker", parent.document).html()
|
||||||
target : $("#bar_line_color"),
|
let newPicker = $("#color_picker").html(pickerHtml)
|
||||||
onSelect : function(color) {
|
newPicker.dropdown({
|
||||||
|
target: $("#bar_line_color")
|
||||||
|
})
|
||||||
|
ColorPicker.init({
|
||||||
|
color: color,
|
||||||
|
pickerDom: newPicker,
|
||||||
|
page: 'graph',
|
||||||
|
onSelect: function (color) {
|
||||||
Designer.setLineStyle({
|
Designer.setLineStyle({
|
||||||
lineColor : color
|
lineColor: color
|
||||||
});
|
});
|
||||||
$("#bar_line_color").button("setColor",
|
$("#bar_line_color").button("setColor",
|
||||||
color)
|
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的扩展
|
* 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