调整颜色板样式
This commit is contained in:
袁东强
parent
cda97c7505
commit
06668a41f7
@ -8,7 +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.versionCompare.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 {
|
||||
@ -177,100 +177,6 @@
|
||||
<script type='text/javascript' src='../commons/js/jquery/scripts/jquery.js'></script>
|
||||
<script type="text/javascript" src="../commons/js/jquery/scripts/jquery-migrate.js"></script>
|
||||
<script type='text/javascript' charset='UTF-8' src='../apps/com.actionsoft.apps.coe.pal/lib/designer/scripts/util.js'></script>
|
||||
<!-- i18n -->
|
||||
<script>
|
||||
var 快速查询 = "<I18N#快速查询>";
|
||||
var 已保存成功 = "<I18N#已保存成功>";
|
||||
var 保存成功 = "<I18N#保存成功>";
|
||||
var 页面中有未保存的内容请先保存 = "<I18N#页面中有未保存的内容，请先保存>";
|
||||
var 保存失败 = "<I18N#保存失败>";
|
||||
var 列的第 = "<I18N#列的第>";
|
||||
var 行不允许为空 = "<I18N#行不允许为空>";
|
||||
var 文件属性 = "<I18N#文件属性>";
|
||||
var 不允许为空 = "<I18N#不允许为空>";
|
||||
var 返回 = "<I18N#返回>";
|
||||
var 版本号 = "<I18N#版本号>";
|
||||
var 吸色 = "<I18N#吸色>";
|
||||
var 退出 = "<I18N#退出>";
|
||||
var 当前颜色 = "<I18N#当前颜色>";
|
||||
$(document).ready(function(){
|
||||
$("#queryInput").attr("placeholder", 快速查询);
|
||||
$("#back-vue-page-span").attr("awsui-qtip", 返回);
|
||||
$("#toolbar_designer_version_no").attr("awsui-qtip", 版本号);
|
||||
$("#color_draw").attr("awsui-qtip", 吸色 + "Esc" + 退出);
|
||||
$("#color_show_now").attr("awsui-qtip", 当前颜色);
|
||||
});
|
||||
// designer.ui.debug.js i18n
|
||||
var 颜色渐变 = "<I18N#颜色渐变>";
|
||||
var 起始版本 = "<I18N#起始版本>";
|
||||
var 错误个数 = "<I18N#错误个数>";
|
||||
var 校验通过 = "<I18N#校验通过>";
|
||||
var 文件过大不允许超过 = "<I18N#文件过大, 不允许超过>";
|
||||
var 上传成功 = "<I18N#上传成功>";
|
||||
var 正在加载预览 = "<I18N#正在加载预览>";
|
||||
var 此地址下无法加载图片 = "<I18N#此地址下无法加载图片>";
|
||||
var 请检查图片地址是否正确 = "<I18N#请检查图片地址是否正确>";
|
||||
var 确保图片地址处于公开状态 = "<I18N#确保图片地址处于公开状态>";
|
||||
var 正在加载图片 = "<I18N#正在加载图片>";
|
||||
var 显示更多结果 = "<I18N#显示更多结果>";
|
||||
var 正在应用图片请稍候 = "<I18N#正在应用图片，请稍候>";
|
||||
var 无法使用此图片请选择其他图片 = "<I18N#无法使用此图片，请选择其他图片>";
|
||||
var 页面中有未保存的内容请先保存 = "<I18N#页面中有未保存的内容，请先保存>";
|
||||
var 请稍后 = "<I18N#请稍后>";
|
||||
var 请您先保存一个版本 = "<I18N#请您先保存一个版本>";
|
||||
var 预览 = "<I18N#预览>";
|
||||
var 图片创建完成 = "<I18N#图片创建完成>";
|
||||
var 是否打开图片预览 = "<I18N#是否打开图片预览>";
|
||||
var 导出完成 = "<I18N#导出完成>";
|
||||
var 确定 = "<I18N#确定>";
|
||||
var 关闭 = "<I18N#关闭>";
|
||||
var 节点编号排序 = "<I18N#节点编号排序>";
|
||||
var 提示 = "<I18N#提示>";
|
||||
var 拖动排序确定后请保存设计器 = "<I18N#拖动排序，确定后请保存设计器>";
|
||||
var 无名称 = "<I18N#无名称>";
|
||||
var 不支持编号排序 = "<I18N#不支持编号排序>";
|
||||
var 画布没有形状或者形状没有编号属性 = "<I18N#画布没有形状或者形状没有编号属性>";
|
||||
var 名称 = "<I18N#名称>";
|
||||
var 节点号 = "<I18N#节点号>";
|
||||
var 新发布 = "<I18N#新发布>";
|
||||
var 变更 = "<I18N#变更>";
|
||||
var 停用 = "<I18N#停用>";
|
||||
var 暂无发布历史 = "<I18N#暂无发布历史>";
|
||||
var 文件链接 = "<I18N#文件链接>";
|
||||
var 自定义链接 = "<I18N#自定义链接>";
|
||||
var 暂无链接 = "<I18N#暂无链接>";
|
||||
var 处修改 = "<I18N#处修改>";
|
||||
var 暂停 = "<I18N#暂停>";
|
||||
var 从此版本播放 = "<I18N#从此版本播放>";
|
||||
var 浏览器限制无法进入演示视图 = "<I18N#浏览器限制，无法进入演示视图>";
|
||||
var 无法进入全屏视图您可以按F11进入 = "<I18N#无法进入全屏视图，您可以按(F11)进入>";
|
||||
var 秒后自动保存 = "<I18N#秒后自动保存>";
|
||||
|
||||
var 修改 = "<I18N#修改>"
|
||||
var 由 = "<I18N#由>"
|
||||
var 创建 = "<I18N#创建>"
|
||||
var 新建版本 = "<I18N#新建版本>"
|
||||
var 版本对比 = "<I18N#版本对比>"
|
||||
var 切换该版本 = "<I18N#切换该版本>"
|
||||
var 设计中 = "<I18N#设计中>"
|
||||
var 已发布 = "<I18N#已发布>"
|
||||
var 已停用 = "<I18N#已停用>"
|
||||
var 审核中 = "<I18N#审核中>"
|
||||
var 设计 = "<I18N#设计>"
|
||||
var 是否继续切换 = "<I18N#是否继续切换>"
|
||||
var 历史版本 = "<I18N#历史版本>"
|
||||
var 提示 = "<I18N#提示>"
|
||||
var 确定将 = "<I18N#确定将>"
|
||||
var 版本为模板创建新版本文件 = "<I18N#版本为模板创建新版本文件>"
|
||||
var 历史版本为模板创建新版本文件 = "<I18N#历史版本为模板创建新版本文件>"
|
||||
var 请选择版本号 = "<I18N#请选择版本号>"
|
||||
var 文件修改未保存 = "<I18N#文件修改未保存>"
|
||||
var 文件已修改未保存 = "<I18N#文件已修改，未保存>"
|
||||
|
||||
var 附件 = "<I18N#附件>"
|
||||
var 形状属性 = "<I18N#形状属性>"
|
||||
var 链接 = "<I18N#链接>"
|
||||
</script>
|
||||
<!--扩展设计器的样式-->
|
||||
<link type='text/css' rel='stylesheet' href='../apps/com.actionsoft.apps.coe.pal/lib/designer/extend/css/designer.extend.css' />
|
||||
<!--针对设计器进行颜色扩展，以及文字扩充-->
|
||||
@ -285,7 +191,6 @@
|
||||
<script src="../apps/com.actionsoft.apps.coe.pal/lib/designer/extend/js/driver.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
//公共信息
|
||||
var wsId = "<#wsId>";
|
||||
var browserId = "<#browserId>";// 浏览器唯一标识
|
||||
var appId = "<#appId>";
|
||||
var sessionId = "<#sid>";
|
||||
@ -315,13 +220,6 @@
|
||||
//三员管理
|
||||
var isHighSecurity = "<#isHighSecurity>";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// BPMN所需参数
|
||||
var BPMN_TYPE_START_EVENT = "<#BPMN_TYPE_START_EVENT>";
|
||||
var AWS_ELEMENT_START_EVENT_MESSAGE_EVENT_DEFINITION = "<#AWS_ELEMENT_START_EVENT_MESSAGE_EVENT_DEFINITION>";
|
||||
@ -448,7 +346,6 @@
|
||||
var pid = "<#parentChartId>";
|
||||
var teamId = "<#teamId>";
|
||||
var jssdk;
|
||||
var mrStatus = "0";
|
||||
</script>
|
||||
<!--工具js-->
|
||||
<script type='text/javascript' charset='UTF-8' src='../apps/com.actionsoft.apps.coe.pal/lib/designer/extend/js/util/map.js'></script>
|
||||
@ -599,11 +496,6 @@
|
||||
$("#switchViews").css('display','none');
|
||||
}
|
||||
|
||||
// 只有epc和泳道图显示切换按钮
|
||||
if (methodId !== 'process.epc' && methodId !== 'process.flowchart') {
|
||||
$("#switchMRViews").css('display', 'none');
|
||||
}
|
||||
|
||||
|
||||
isGetHidden();
|
||||
if (!installBatch) {// 未安装批处理应用，删除功能入口
|
||||
@ -655,149 +547,6 @@
|
||||
});
|
||||
|
||||
|
||||
// 页面停留时间统计
|
||||
class PageStayTimeTracker {
|
||||
constructor() {
|
||||
this.startTime = null;
|
||||
this.lastReportTime = null;
|
||||
this.reportInterval = 60000; // 60秒报告一次
|
||||
this.isPageVisible = true; // 默认页面是可见的
|
||||
this.visibilityBound = false; // 是否已绑定可见性事件
|
||||
}
|
||||
|
||||
|
||||
// 延迟绑定可见性事件
|
||||
bindVisibilityEvents() {
|
||||
if (this.visibilityBound) return;
|
||||
|
||||
document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this));
|
||||
this.visibilityBound = true;
|
||||
|
||||
// 初始检查页面可见状态
|
||||
this.isPageVisible = !document.hidden;
|
||||
if (!this.isPageVisible) {
|
||||
this.lastReportTime = new Date(); // 更新最后记录时间
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 开始跟踪
|
||||
startTracking() {
|
||||
if (this.isActive) return;
|
||||
|
||||
this.startTime = new Date();
|
||||
this.lastReportTime = this.startTime;
|
||||
this.isActive = true;
|
||||
|
||||
|
||||
|
||||
// 设置定时器
|
||||
this.intervalId = setInterval(() => {
|
||||
if (this.isPageVisible) {
|
||||
this.reportStayTime();
|
||||
}
|
||||
}, this.reportInterval);
|
||||
|
||||
|
||||
|
||||
// 页面卸载前发送剩余时间
|
||||
window.addEventListener('beforeunload', this.finalReport.bind(this));
|
||||
|
||||
|
||||
// 延迟绑定可见性事件（在用户首次交互后）
|
||||
const bindOnInteraction = () => {
|
||||
this.bindVisibilityEvents();
|
||||
// 移除所有交互监听器
|
||||
['click', 'scroll', 'keydown', 'mousemove', 'touchstart'].forEach(event => {
|
||||
window.removeEventListener(event, bindOnInteraction);
|
||||
});
|
||||
};
|
||||
|
||||
// 添加多种交互监听
|
||||
['click', 'scroll', 'keydown', 'mousemove', 'touchstart'].forEach(event => {
|
||||
window.addEventListener(event, bindOnInteraction, { once: true });
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
// 报告停留时间
|
||||
reportStayTime() {
|
||||
const now = new Date();
|
||||
const elapsed = now - this.lastReportTime;
|
||||
this.totalStayTime += elapsed;
|
||||
this.lastReportTime = now;
|
||||
|
||||
this.sendStayTimeToServer(elapsed, true);
|
||||
}
|
||||
|
||||
// 最终报告
|
||||
finalReport() {
|
||||
if (!this.isActive) return;
|
||||
if (this.isPageVisible) {
|
||||
const now = new Date();
|
||||
const elapsed = now - this.lastReportTime;
|
||||
}
|
||||
|
||||
|
||||
this.sendStayTimeToServer(elapsed, false);
|
||||
this.cleanUp();
|
||||
}
|
||||
|
||||
// 处理页面可见性变化
|
||||
handleVisibilityChange() {
|
||||
var now = new Date();
|
||||
if (document.hidden) {
|
||||
if (this.isPageVisible) {
|
||||
this.isPageVisible = false;
|
||||
// 页面不可见，暂停计时
|
||||
const now = new Date();
|
||||
const elapsed = now - this.lastReportTime;
|
||||
this.totalStayTime += elapsed;
|
||||
this.sendStayTimeToServer(elapsed, false);
|
||||
clearInterval(this.intervalId);
|
||||
}
|
||||
|
||||
} else {
|
||||
// 页面恢复可见
|
||||
if (!this.isPageVisible) {
|
||||
this.lastReportTime = now; // 重置最后记录时间
|
||||
}
|
||||
this.isPageVisible = true;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// 发送数据到服务器
|
||||
sendStayTimeToServer(elapsedMs,isActive) {
|
||||
$.ajax({
|
||||
type : "POST",
|
||||
url : "./w?sid=" + encodeURIComponent($('#sid').val()) + "&cmd=com.awspaas.user.apps.browsing_data.service.insertReadingLog",
|
||||
data : "userId="+userId+"&userName="+userName+"&ruuid="+ruuid+"&fileName="+fileName+"&startTime="+new Date(this.startTime).getTime()+"¤tTime="+new Date().getTime()+"&browserId="+browserId+"&isActive="+isActive,
|
||||
success : function(msg) {
|
||||
if (msg.result == "error") {
|
||||
$.simpleAlert("新增失败", "error");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 清理资源
|
||||
cleanUp() {
|
||||
clearInterval(this.intervalId);
|
||||
document.removeEventListener('visibilitychange', this.handleVisibilityChange);
|
||||
window.removeEventListener('beforeunload', this.finalReport);
|
||||
this.isActive = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 使用示例
|
||||
const tracker = new PageStayTimeTracker();
|
||||
tracker.startTracking();
|
||||
|
||||
|
||||
|
||||
//初始化封面模板
|
||||
function initCoverTpl(){
|
||||
@ -853,14 +602,11 @@
|
||||
|
||||
function initContentHtml(obj){
|
||||
var checkHtml = '';
|
||||
if (obj!=undefined) {
|
||||
obj.forEach(function(model, index) {
|
||||
checkHtml += '<p>';
|
||||
checkHtml += '<input class="awsui-checkbox" name="tplRadio" id="'+model.id+'" showText="'+model.text+'" type="radio"/>';
|
||||
checkHtml += '<label class="awsui-checkbox-label">'+model.text+'</label>';
|
||||
});
|
||||
}
|
||||
|
||||
obj.forEach(function(model, index) {
|
||||
checkHtml += '<p>';
|
||||
checkHtml += '<input class="awsui-checkbox" name="tplRadio" id="'+model.id+'" showText="'+model.text+'" type="radio"/>';
|
||||
checkHtml += '<label class="awsui-checkbox-label">'+model.text+'</label>';
|
||||
});
|
||||
return checkHtml;
|
||||
}
|
||||
|
||||
@ -1183,33 +929,6 @@
|
||||
reloadFile();
|
||||
}
|
||||
}
|
||||
async function switchWpsMRDisplay(flag) {
|
||||
if (flag) {//显示wps页面，隐藏其余页面
|
||||
$("#wpsPage").css('display', 'block');
|
||||
$("#wpsPage").height($('#designer_viewport').height());
|
||||
$("#shape_panel").css('display', 'none');
|
||||
$("#shape_panel_more_shape").css('display', 'none');
|
||||
$("#designer_layout").css('display', 'none');
|
||||
//打开wps在线编辑页面
|
||||
$("#dock").css("right", 0);
|
||||
openWpsMRUrl();
|
||||
} else {
|
||||
//先判断是否要更新管理办法的生效状态
|
||||
updateMrStatus();
|
||||
$("#wpsPage").css('display', 'none');
|
||||
$("#shape_panel").css('display', 'block');
|
||||
$("#shape_panel_more_shape").css('display', 'block');
|
||||
$("#designer_layout").css('display', 'block');
|
||||
var layoutW = $("#designer_layout").width();
|
||||
var viewW = $("#layout_block").width();
|
||||
// 总宽度减去可视区域的宽度，得到滚动条宽度
|
||||
var navRight = layoutW - viewW;
|
||||
$("#dock").css("right", navRight);
|
||||
//先触发保存
|
||||
await saveWps();
|
||||
updateShapePanel();
|
||||
}
|
||||
}
|
||||
//切换视图页面
|
||||
function switchViews(){
|
||||
if ($("#wpsPage").is(":visible")) {
|
||||
@ -1218,41 +937,6 @@
|
||||
switchWpsDisplay(true);
|
||||
}
|
||||
}
|
||||
//切换管理要求视图
|
||||
function switchMRViews() {
|
||||
if ($("#wpsPage").is(":visible")) {
|
||||
switchWpsMRDisplay(false);
|
||||
} else {
|
||||
switchWpsMRDisplay(true);
|
||||
}
|
||||
}
|
||||
|
||||
function updateMrStatus(){//更新管理办法的生效状态
|
||||
//先判断是否要更新管理办法的生效状态
|
||||
if(mrStatus == 0){//生效
|
||||
//先弹出二次确认框
|
||||
var options = {
|
||||
title : "当前管理办法未生效，是否更新管理办法的生效状态？",
|
||||
content:"确认生效",
|
||||
onConfirm: function(){
|
||||
$.ajax({
|
||||
url: "./jd?sid=" + sid + "&cmd=com.awspaas.user.apps.yiliwps.updateMrStatus&palId=" + ruuid,
|
||||
type: 'GET',
|
||||
success: function (data) {
|
||||
mrStatus = data.data.mrStatus;
|
||||
}
|
||||
});
|
||||
},
|
||||
onCancel : function(){
|
||||
$.simpleAlert("您选择了取消");
|
||||
}
|
||||
};
|
||||
$.confirm(options);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//保存wps内容
|
||||
async function saveWps() {
|
||||
try {
|
||||
@ -1283,27 +967,6 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openWpsMRUrl() {
|
||||
$.ajax({
|
||||
url: "./jd?sid=" + sid + "&cmd=com.awspaas.user.apps.yiliwps.previewUrl_mr&palId=" + ruuid,
|
||||
type: 'GET',
|
||||
success: function (data) {
|
||||
if (data.code === 200) {
|
||||
//换一种打开方式
|
||||
console.log('引入后可以开始使用 JSSDK 了~');
|
||||
jssdk = WebOfficeSDK.config({
|
||||
url: data.data.link, // 该地址需要对接方服务端提供，形如 https://wwo.wps.cn/office/p/xxx
|
||||
mount: document.querySelector('#wpsPage')
|
||||
})
|
||||
|
||||
jssdk.on('fileOpen', (data) => {
|
||||
console.log('打开文档成功: ', data)
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
//渲染形状配置信息
|
||||
/*function painterShapeConfig(dataArray, shapeId, key) {
|
||||
for (var i = 0; i < dataArray.length; i++) {
|
||||
@ -1347,12 +1010,9 @@
|
||||
}
|
||||
}*/
|
||||
</script>
|
||||
<!-- 版本对比 -->
|
||||
<script type='text/javascript' async charset='UTF-8' src='../apps/com.actionsoft.apps.coe.pal/lib/designer/scripts/diagraming/versionCompare/version.methods.debug.js'></script>
|
||||
</head>
|
||||
|
||||
<body style="overflow:hidden;" onload="updateShapePanel();">
|
||||
<div class="compare-main" id="versionCompareBox" style="display:none;"></div>
|
||||
<canvas id="support_canvas" style="display: none;"></canvas>
|
||||
<div id="designer_header">
|
||||
|
||||
@ -1361,12 +1021,9 @@
|
||||
<span class="diagram_title"><#fileName></span>
|
||||
<span id="securityLevelName" style="display: none;"><#securityLevelName></span>
|
||||
<div id="toolbar_wfversion_info" class="toolbar_info">
|
||||
<!-- <div id="toolbar_designer_version_no" class="info version" awsui-qtip="版本管理">
|
||||
<div id="toolbar_designer_version_no" class="info version" awsui-qtip="版本管理">
|
||||
<#versionNum>
|
||||
</div> -->
|
||||
<span id="toolbar_designer_version_no" class="info version" style="cursor: pointer" awsui-qtip="版本号" onclick="versionListFun.openVersionList()">
|
||||
<#versionNum>
|
||||
</span>
|
||||
</div>
|
||||
<div id="toolbar_wfversion_info_status" style="display:none;" class="versioninfo version0" awsui-qtip="<#state>"><#state></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1566,9 +1223,6 @@
|
||||
<div id="switchViews" awsui-qtip='切换视图' class="toolbar_button">
|
||||
<div class="ico switchViews" onclick="switchViews()"></div>
|
||||
</div>
|
||||
<div id="switchMRViews" awsui-qtip='切换管理要求视图' class="toolbar_button">
|
||||
<div class="ico switchViews" onclick="switchMRViews()"></div>
|
||||
</div>
|
||||
<!-- <div id="bar_import" awsui-qtip='导入' class="toolbar_button" style="<#importStyle>">
|
||||
<div class="ico ico_import"></div>
|
||||
</div> -->
|
||||
@ -2216,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_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 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>
|
||||
<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