442 lines
20 KiB
Plaintext
442 lines
20 KiB
Plaintext
<%@ Page Title="" Language="C#" MasterPageFile="~/SystemSettings/SysSettingMasterPage.master" AutoEventWireup="true" CodeFile="SettingColors.aspx.cs" Inherits="SystemSettings_SettingColors" %>
|
|
|
|
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
|
|
<style type="text/css">
|
|
.colorinput {
|
|
float: left;
|
|
height: 20px;
|
|
width: 60px;
|
|
}
|
|
|
|
p {
|
|
background-color: #f78e1e;
|
|
float: right;
|
|
width: 30px;
|
|
height: 24px;
|
|
margin: 0px;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.solutionlisttable {
|
|
border: 1px solid #b0b0b0;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.solutionlisttable th {
|
|
border: 1px solid #b0b0b0;
|
|
line-height: 25px;
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.solutionlisttable tr td {
|
|
border: 1px solid #b0b0b0;
|
|
line-height: 25px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.solutionlisttable tr:hover {
|
|
background-color: #efebeb;
|
|
}
|
|
|
|
.selected {
|
|
background-color: #efebeb;
|
|
}
|
|
|
|
.usingscheme {
|
|
text-align: center;
|
|
}
|
|
|
|
#leftcontentdiv {
|
|
border: 1px solid #ddd;
|
|
border-radius: 3px 4px;
|
|
width: 250px;
|
|
overflow: auto;
|
|
border-top: none;
|
|
}
|
|
</style>
|
|
<link href="<%=GetFileUrlWithVersion("Css/colorpick.css")%>" rel="stylesheet" />
|
|
<script type="text/javascript" src="<%=GetFileUrlWithVersion("Js/colorpick.js")%>"></script>
|
|
<script type="text/javascript">
|
|
/*RGB颜色转换为16进制*/
|
|
function regrgb(rgb) {
|
|
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
|
|
function hex(x) {
|
|
return ("0" + parseInt(x).toString(16)).slice(-2);
|
|
}
|
|
rgb = "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
|
|
return rgb;
|
|
}
|
|
|
|
function iscolorStr(str) {
|
|
//var reg = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/;
|
|
var reg = /^#([0-9a-fA-F]{6})$/;
|
|
if (reg.test(str))
|
|
return true;
|
|
return false;
|
|
}
|
|
|
|
function onblur_setcolor(c_dom, change_dom) {
|
|
//var colorvalue = c_dom.val();
|
|
|
|
//if (iscolorStr(colorvalue))
|
|
// change_dom.css('background-color', colorvalue);
|
|
//else {
|
|
// showAlert("The color format is wrong. Please enter the correct color.", "System Message");
|
|
// c_dom.val("");
|
|
//}
|
|
}
|
|
|
|
$(function () {
|
|
setPageTitle(GetTextByKey("P_SET_STYLESETTING", 'Style Setting'), true);
|
|
$('#leftcontentdiv').css('height', $(window).height() - $('#h3title').height() - $('#top_bt').height() - 67);
|
|
$('#rightheaderDiv').css('width', $(window).width() - $('#leftcontentdiv').width() - 140);
|
|
$('#dialog_colorscheme').prop('iframe', true).dialog(function () {
|
|
showmaskbg(false);
|
|
});
|
|
|
|
$('#charttitlecolor').colorpick({
|
|
color: regrgb($('#charttitlecolor').css('background-color')),
|
|
onShow: function (hsb, hex, rgb, el) {
|
|
$(this).colorpickSetColor(regrgb($('#charttitlecolor').css('background-color')));
|
|
},
|
|
onSubmit: function (hsb, hex, rgb, el) {
|
|
$("#r").attr("value", rgb.r);
|
|
$("#g").attr("value", rgb.g);
|
|
$("#b").attr("value", rgb.b);
|
|
|
|
$('#charttitlecolor').css('background-color', '#' + hex);
|
|
$('#charttitle_input').val('#' + hex);
|
|
$(el).colorpickHide();
|
|
},
|
|
onCancelSubmit: function (cal) {
|
|
$(cal).hide();
|
|
}
|
|
});
|
|
$('#charttitle_input').blur(function () {
|
|
onblur_setcolor($(this), $('#charttitlecolor'));
|
|
});
|
|
|
|
$('#chartbordercolor').colorpick({
|
|
color: regrgb($('#chartbordercolor').css('background-color')),
|
|
onShow: function (hsb, hex, rgb, el) {
|
|
$(this).colorpickSetColor(regrgb($('#chartbordercolor').css('background-color')));
|
|
},
|
|
onSubmit: function (hsb, hex, rgb, el) {
|
|
$("#r").attr("value", rgb.r);
|
|
$("#g").attr("value", rgb.g);
|
|
$("#b").attr("value", rgb.b);
|
|
|
|
$('#chartbordercolor').css('background-color', '#' + hex);
|
|
$('#chartborder_input').val('#' + hex);
|
|
$(el).colorpickHide();
|
|
},
|
|
onCancelSubmit: function (cal) {
|
|
$(cal).hide();
|
|
}
|
|
});
|
|
$('#chartborder_input').blur(function () {
|
|
onblur_setcolor($(this), $('#chartbordercolor'));
|
|
});
|
|
|
|
$('#menubackgroundcolor').colorpick({
|
|
color: regrgb($('#menubackgroundcolor').css('background-color')),
|
|
onShow: function (hsb, hex, rgb, el) {
|
|
$(this).colorpickSetColor(regrgb($('#menubackgroundcolor').css('background-color')));
|
|
},
|
|
onSubmit: function (hsb, hex, rgb, el) {
|
|
$("#r").attr("value", rgb.r);
|
|
$("#g").attr("value", rgb.g);
|
|
$("#b").attr("value", rgb.b);
|
|
|
|
$('#menubackgroundcolor').css('background-color', '#' + hex);
|
|
$('#menubackground_input').val('#' + hex);
|
|
$(el).colorpickHide();
|
|
},
|
|
onCancelSubmit: function (cal) {
|
|
$(cal).hide();
|
|
}
|
|
});
|
|
$('#menubackground_input').blur(function () {
|
|
onblur_setcolor($(this), $('#menubackgroundcolor'));
|
|
});
|
|
|
|
$('#titlebarcolor').colorpick({
|
|
color: regrgb($('#titlebarcolor').css('background-color')),
|
|
onShow: function (hsb, hex, rgb, el) {
|
|
$(this).colorpickSetColor(regrgb($('#titlebarcolor').css('background-color')));
|
|
},
|
|
onSubmit: function (hsb, hex, rgb, el) {
|
|
$("#r").attr("value", rgb.r);
|
|
$("#g").attr("value", rgb.g);
|
|
$("#b").attr("value", rgb.b);
|
|
|
|
$('#titlebarcolor').css('background-color', '#' + hex);
|
|
$('#titlebar_input').val('#' + hex);
|
|
$(el).colorpickHide();
|
|
},
|
|
onCancelSubmit: function (cal) {
|
|
$(cal).hide();
|
|
}
|
|
});
|
|
$('#titlebar_input').blur(function () {
|
|
onblur_setcolor($(this), $('#titlebarcolor'));
|
|
});
|
|
GetCompanyUIStyles();
|
|
});
|
|
|
|
function GetCompanyUIStyles() {
|
|
$('#s_tboy').empty();
|
|
$.ajax({
|
|
type: "POST",
|
|
async: false,
|
|
datatype: "json",
|
|
url: "SettingColors.aspx",
|
|
data: {
|
|
MethodName: "GetCompanyUIStyles"
|
|
},
|
|
success: function (result) {
|
|
var schemes = eval(result);
|
|
if (schemes && schemes.length > 0) {
|
|
if (schemes[0].UIStyleName != undefined) {
|
|
var selectedID = $('#styleID').text() == "" ? -1 : parseInt($('#styleID').text());
|
|
var selectedIndex = 0;
|
|
for (var i = 0; i < schemes.length; i++) {
|
|
var tr = $('<tr></tr>').data('jsondata', schemes[i]).click(function (e) {
|
|
trclick(this);
|
|
});
|
|
if (selectedID == schemes[i].UIStyleID)
|
|
selectedIndex = i;
|
|
tr.append($('<td></td>').text(schemes[i].UIStyleName));
|
|
|
|
var tddefault = $('<td style="text-align:center;">No</td>');
|
|
if (schemes[i].IsDefault) {
|
|
tddefault.text('Yes');
|
|
}
|
|
tr.append(tddefault);
|
|
$('#s_tboy').append(tr);
|
|
}
|
|
$('#s_tboy tr')[selectedIndex].click();
|
|
}
|
|
else {
|
|
SetColor(null);
|
|
}
|
|
}
|
|
showmaskbg(false);
|
|
},
|
|
error: function (msg) {
|
|
showmaskbg(false);
|
|
showAlert(msg.statusText, GetTextByKey("P_SET_ERROR", 'Error'));
|
|
}
|
|
});
|
|
}
|
|
|
|
function SetColor(data) {
|
|
if (data) {
|
|
$('#charttitlecolor').css('background-color', data.ChartTitleBackgroundColor);
|
|
$('#chartbordercolor').css('background-color', data.ChartBorderColor);
|
|
$('#menubackgroundcolor').css('background-color', data.MenuBackgroundColor);
|
|
$('#titlebarcolor').css('background-color', data.TitleBarColor);
|
|
|
|
$('#charttitle_input').val(data.ChartTitleBackgroundColor);
|
|
$('#chartborder_input').val(data.ChartBorderColor);
|
|
$('#menubackground_input').val(data.MenuBackgroundColor);
|
|
$('#titlebar_input').val(data.TitleBarColor);
|
|
|
|
$('#styleID').text(data.UIStyleID);
|
|
$('#stylename_input').val(data.UIStyleName);
|
|
if (data.IsDefault) {
|
|
$('#isdefault').attr('checked', 'checked');
|
|
}
|
|
else
|
|
$('#isdefault').removeAttr('checked');
|
|
}
|
|
else {
|
|
$('#charttitlecolor').css('background-color', '#F78E1E');
|
|
$('#chartbordercolor').css('background-color', '#F78E1E');
|
|
$('#menubackgroundcolor').css('background-color', '#0078D7');
|
|
$('#titlebarcolor').css('background-color', '#F78E1E');
|
|
|
|
$('#charttitle_input').val('#F78E1E');
|
|
$('#chartborder_input').val('#F78E1E');
|
|
$('#menubackground_input').val('#0078D7');
|
|
$('#titlebar_input').val('#F78E1E');
|
|
|
|
$('#isdefault').removeAttr('checked');
|
|
$('#styleID').text("");
|
|
$('#stylename_input').val("").focus();
|
|
}
|
|
}
|
|
|
|
function DeleteUIStyle() {
|
|
showConfirm(GetTextByKey("P_SET_DOYOUWANTTODELETETHISSTYLE",'Do you want to delete this style?'), GetTextByKey("P_SET_DELETE", 'Delete'), function (e) {
|
|
$.ajax({
|
|
type: "POST",
|
|
async: false,
|
|
datatype: "json",
|
|
url: "SettingColors.aspx",
|
|
data: {
|
|
ClientData: parseInt($('#styleID').text()),
|
|
MethodName: "DeleteCompanyUIStyle"
|
|
},
|
|
success: function (msg) {
|
|
GetCompanyUIStyles();
|
|
showmaskbg(false);
|
|
},
|
|
error: function (msg) {
|
|
showAlert(msg.statusText, GetTextByKey("P_SET_ERROR", 'Error'));
|
|
showmaskbg(false);
|
|
}
|
|
});
|
|
}, function () { showmaskbg(false); });
|
|
}
|
|
|
|
function SaveCompanyUIStyle() {
|
|
var alerttitle = GetTextByKey("P_SET_SYSTEMMESSAGE", "System Message");
|
|
if ($.trim($('#stylename_input').val()) == "") {
|
|
showAlert(GetTextByKey("P_SET_STYLENAMECANTBEEMPTY", "Style name can't be empty."), alerttitle);
|
|
return;
|
|
}
|
|
var styledata = {
|
|
ChartTitleBackgroundColor: $('#charttitle_input').val(),
|
|
ChartBorderColor: $('#chartborder_input').val(),
|
|
MenuBackgroundColor: $('#menubackground_input').val(),
|
|
TitleBarColor: $('#titlebar_input').val(),
|
|
|
|
IsDefault: $('#isdefault').is(':checked'),
|
|
UIStyleID: $('#styleID').text() == "" ? -1 : parseInt($('#styleID').text()),
|
|
UIStyleName: htmlencode($.trim($('#stylename_input').val()))
|
|
};
|
|
|
|
if (!iscolorStr(styledata.ChartTitleBackgroundColor)) {
|
|
showAlert(GetTextByKey("P_SET_CHARTTITLEBGCOLORFORMATISINVALID", "Chart Title Background Color format is invalid. Please enter a valid color code."), alerttitle);
|
|
return;
|
|
}
|
|
if (!iscolorStr(styledata.ChartBorderColor)) {
|
|
showAlert(GetTextByKey("P_SET_CHARTBORDERCOLORFORMATISINVALID", "Chart Border Color format is invalid. Please enter a valid code."), alerttitle);
|
|
return;
|
|
}
|
|
if (!iscolorStr(styledata.MenuBackgroundColor)) {
|
|
showAlert(GetTextByKey("P_SET_MENUBGCOLORFORMATISINVALID", "Menu Background Color format is invalid. Please enter a valid code."), alerttitle);
|
|
return;
|
|
}
|
|
if (!iscolorStr(styledata.TitleBarColor)) {
|
|
showAlert(GetTextByKey("P_SET_TITLEBARCOLORFORMATISINVALID", "Title Bar Color format is invalid. Please enter a valid code."), alerttitle);
|
|
return;
|
|
}
|
|
showmaskbg(true);
|
|
$.ajax({
|
|
type: "POST",
|
|
async: false,
|
|
datatype: "json",
|
|
url: "SettingColors.aspx",
|
|
data: {
|
|
ClientData: JSON.stringify(styledata),
|
|
MethodName: "SetCompanyUIStyle"
|
|
},
|
|
success: function (msg) {
|
|
if (eval(msg) == "OK") {
|
|
showAlert(GetTextByKey("P_SET_SAVSUCCESSFULLY", "Saved Successfully"), GetTextByKey("P_SET_SAVESTYLE", 'Save Style'));
|
|
GetCompanyUIStyles();
|
|
}
|
|
else
|
|
showAlert(eval(msg), GetTextByKey("P_SET_SAVESTYLE", 'Save Style'));
|
|
showmaskbg(false);
|
|
},
|
|
error: function (msg) {
|
|
showAlert(msg.statusText, GetTextByKey("P_SET_ERROR", 'Error'));
|
|
showmaskbg(false);
|
|
}
|
|
});
|
|
}
|
|
|
|
function trclick(obj) {
|
|
$('#s_tboy tr').each(function () {
|
|
$(this).removeClass('selected');
|
|
});
|
|
$(obj).addClass('selected');
|
|
SetColor($(obj).data('jsondata'));
|
|
}
|
|
</script>
|
|
</asp:Content>
|
|
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
|
|
<div style="padding: 0px; margin: 0px;">
|
|
<div class="page_title" data-lgid="P_SET_STYLESETTING">Style Setting</div>
|
|
<div class="function_title">
|
|
<span class="sbutton iconadd" onclick="SetColor(null);" data-lgid="P_SET_ADD">Add</span>
|
|
<span class="sbutton icondelete" onclick="DeleteUIStyle();" data-lgid="P_SET_DELETE">Delete</span>
|
|
<span class="sbutton iconsave" onclick="SaveCompanyUIStyle();" data-lgid="P_SET_SAVE">Save</span>
|
|
<span class="sbutton iconrefresh" onclick="GetCompanyUIStyles();" data-lgid="P_SET_REFRESH">Refresh</span>
|
|
</div>
|
|
<div class="content_main content_div" style="padding-top: 10px;">
|
|
<table>
|
|
<tr>
|
|
<td style="vertical-align: top;">
|
|
<div id="leftcontentdiv">
|
|
<table class="solutionlisttable">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 200px;" data-lgid="P_SET_STYLENAME">Style Name</th>
|
|
<th class="usingscheme" style="width: 90px;" data-lgid="P_SET_ISDEFAULT">Is Default</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="s_tboy"></tbody>
|
|
</table>
|
|
</div>
|
|
</td>
|
|
<td style="vertical-align: top; padding-left: 20px;">
|
|
<div id="rightheaderDiv" style="border-bottom: 1px solid #b0b0b0; margin-bottom: 20px; line-height: 30px;">
|
|
<table>
|
|
<tr>
|
|
<td style="text-align: right; padding-right: 5px; width: 160px;" data-lgid="P_SET_STYLENAME_COLON">Style Name :</td>
|
|
<td>
|
|
<input id="stylename_input" style="width: 400px; height: 20px;" maxlength="200" /><label id="styleID" style="display: none;"></label></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align: right; padding-right: 5px;" data-lgid="P_SET_ISDEFAULT_COLON">Is Default:</td>
|
|
<td>
|
|
<input id="isdefault" type="checkbox" style="margin-left: 0;" /></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<table style="min-width: 200px; border: none; line-height: 50px;">
|
|
<tr>
|
|
<td style="text-align: right; padding-right: 5px; width: 160px;" data-lgid="P_SET_CHARTTITLECOLOR_COLON">Chart Title Color :</td>
|
|
<td>
|
|
<p id="charttitlecolor"></p>
|
|
<input id="charttitle_input" class="colorinput" maxlength="7" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align: right; padding-right: 5px;" data-lgid="P_SET_CHARTBORDERCOLOR_COLON">Chart Border Color :</td>
|
|
<td>
|
|
<p id="chartbordercolor"></p>
|
|
<input id="chartborder_input" class="colorinput" maxlength="7" />
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align: right; padding-right: 5px;" data-lgid="P_SET_MENUBACKGROUNDCOLOR_COLON">Menu Background Color :</td>
|
|
<td>
|
|
<p id="menubackgroundcolor"></p>
|
|
<input id="menubackground_input" class="colorinput" maxlength="7" />
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align: right; padding-right: 5px;" data-lgid="P_SET_TITLEBARCOLOR_COLON">Title Bar Color :</td>
|
|
<td>
|
|
<p id="titlebarcolor"></p>
|
|
<input id="titlebar_input" class="colorinput" maxlength="7" />
|
|
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div id="mask_bg" style="display: none;"><div class="loading c-spin"></div></div>
|
|
</asp:Content>
|
|
|