1065 lines
62 KiB
PHP
1065 lines
62 KiB
PHP
|
<style>
|
|||
|
|
.wc-theme-item {
|
|||
|
|
font-size: 15px;
|
|||
|
|
padding-top: 6px;
|
|||
|
|
padding-bottom: 6px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
border-bottom: 1px solid #eeeeee;
|
|||
|
|
}
|
|||
|
|
/*.wc-theme-item:hover {*/
|
|||
|
|
/* background: var(--btn_background);*/
|
|||
|
|
/* color: white;*/
|
|||
|
|
/*}*/
|
|||
|
|
.wc-theme-item.active {
|
|||
|
|
background: var(--btn_background);
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
.wc-theme-row {
|
|||
|
|
height: 25px;
|
|||
|
|
line-height: 25px;
|
|||
|
|
}
|
|||
|
|
.wc-theme-key {
|
|||
|
|
height: 25px !important;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
.wc-theme-mark {
|
|||
|
|
width: 10px;
|
|||
|
|
height: 25px;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
border: 1px solid #dddddd;
|
|||
|
|
background: #fb0;
|
|||
|
|
margin-left: -5px;
|
|||
|
|
}
|
|||
|
|
.wc-theme-addTheme{
|
|||
|
|
font-size: 14px;
|
|||
|
|
width: 36px;
|
|||
|
|
height: 36px;
|
|||
|
|
border-radius: 18px;
|
|||
|
|
margin-top: 15px
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<div class="modal fade bs-modal-lg" id="myManager" tabindex="-1">
|
|||
|
|
<div class="modal-dialog modal-lg" role="document" style="width: 90%">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
|||
|
|
<span style="font-size: 16px">
|
|||
|
|
<cn>主题管理器</cn>
|
|||
|
|
<en>Theme Manager</en>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body">
|
|||
|
|
<div id="themeAlert"></div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div id="themeBox" class="col-md-2 col-sm-2 text-center"></div>
|
|||
|
|
<!-- 第1列 -->
|
|||
|
|
<div class="col-md-3 col-sm-3" style="border-left: 1px solid #cccccc;overflow: auto">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="panel panel-default" style="border: none;margin: 0px">
|
|||
|
|
<div class="title">
|
|||
|
|
<h3 class="panel-title">
|
|||
|
|
<cn>Html/Body</cn>
|
|||
|
|
<en>Html/Body</en>
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
<div class="panel-body">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>背景色</cn>
|
|||
|
|
<en>Background</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--body_background" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="panel panel-default" style="border: none;margin: 0px">
|
|||
|
|
<div class="title">
|
|||
|
|
<h3 class="panel-title">
|
|||
|
|
<cn>导航栏</cn>
|
|||
|
|
<en>Navigation Bar</en>
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
<div class="panel-body">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>导航栏背景色</cn>
|
|||
|
|
<en>Background</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--navbar_background" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>图标背景色</cn>
|
|||
|
|
<en>Icon Background</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--navbar_item_background" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>图标颜色</cn>
|
|||
|
|
<en>Icon Color</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--navbar_item_color" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>选中图标背景色</cn>
|
|||
|
|
<en>Select Icon Background</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--navbar_item_active_background" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>选中图标颜色</cn>
|
|||
|
|
<en>Select Icon Color</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--navbar_item_active" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="panel panel-default" style="border: none;margin: 0px">
|
|||
|
|
<div class="title">
|
|||
|
|
<h3 class="panel-title">
|
|||
|
|
<cn>导航栏下拉菜单</cn>
|
|||
|
|
<en>Navigation Bar Drop-down Menu</en>
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
<div class="panel-body">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>菜单背景色</cn>
|
|||
|
|
<en>Background</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--dropdown_background" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>字体颜色</cn>
|
|||
|
|
<en>Font Color</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--dropdown_color" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>悬停背景色</cn>
|
|||
|
|
<en>Hover Background</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--dropdown_item_active_background" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>悬停字体颜色</cn>
|
|||
|
|
<en>Hover Font Color</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--dropdown_item_active" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第2列 -->
|
|||
|
|
<div class="col-md-4 col-sm-4" style="border-left: 1px solid #cccccc;overflow: auto">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="panel panel-default" style="border: none;margin: 0px">
|
|||
|
|
<div class="title">
|
|||
|
|
<h3 class="panel-title">
|
|||
|
|
<cn>页脚</cn>
|
|||
|
|
<en>Footer</en>
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
<div class="panel-body">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>背景色</cn>
|
|||
|
|
<en>Background</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--foot_background" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>字体颜色</cn>
|
|||
|
|
<en>Font Color</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--foot_color" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="panel panel-default" style="border: none;margin: 0px">
|
|||
|
|
<div class="title">
|
|||
|
|
<h3 class="panel-title">
|
|||
|
|
<cn>Tab标签</cn>
|
|||
|
|
<en>Tab Label</en>
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
<div class="panel-body">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>标签栏背景色</cn>
|
|||
|
|
<en>Background</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--navtab_background" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>Item背景色</cn>
|
|||
|
|
<en>Item Background</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--navtab_item_background" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>Item字体颜色</cn>
|
|||
|
|
<en>Item Font Color</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--navtab_item_color" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>Item选中背景色</cn>
|
|||
|
|
<en>Item Select Background</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--navtab_item_active_border" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>Item选中字体颜色</cn>
|
|||
|
|
<en>Item Select Font Color</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--navtab_item_active" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="panel panel-default" style="border: none;margin: 0px">
|
|||
|
|
<div class="title">
|
|||
|
|
<h3 class="panel-title">
|
|||
|
|
<cn>Slider滑动条</cn>
|
|||
|
|
<en>Slider Bar</en>
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
<div class="panel-body">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>滑块颜色</cn>
|
|||
|
|
<en>Slider Handle Background</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--slider_touch" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>滑动条颜色</cn>
|
|||
|
|
<en>Slider Selection Background</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--slider_selection" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 第3列 -->
|
|||
|
|
<div class="col-md-3 col-sm-3" style="border-left: 1px solid #cccccc;overflow: auto">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="panel panel-default" style="border: none;margin: 0px">
|
|||
|
|
<div class="title">
|
|||
|
|
<h3 class="panel-title">
|
|||
|
|
<cn>Button按钮</cn>
|
|||
|
|
<en>Button</en>
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
<div class="panel-body">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>按钮背景颜色</cn>
|
|||
|
|
<en>Background</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--btn_background" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>按钮字体颜色</cn>
|
|||
|
|
<en>Font Color</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--btn_color" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>悬停背景色</cn>
|
|||
|
|
<en>Hover Background</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--btn_hover_background" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>悬停字体颜色</cn>
|
|||
|
|
<en>Hover Font Color</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--btn_hover_color" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="panel panel-default" style="border: none;margin: 0px">
|
|||
|
|
<div class="title">
|
|||
|
|
<h3 class="panel-title">
|
|||
|
|
<cn>Checkbox复选框</cn>
|
|||
|
|
<en>Checkbox</en>
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
<div class="panel-body">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>勾选背景颜色</cn>
|
|||
|
|
<en>Active Background</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--checkbox_active" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="panel panel-default" style="border: none;margin: 0px">
|
|||
|
|
<div class="title">
|
|||
|
|
<h3 class="panel-title">
|
|||
|
|
<cn>Switch开关</cn>
|
|||
|
|
<en>Switch</en>
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
<div class="panel-body">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>打开背景色</cn>
|
|||
|
|
<en>Active Background</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--switch_active" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="panel panel-default" style="border: none;margin: 0px">
|
|||
|
|
<div class="title">
|
|||
|
|
<h3 class="panel-title">
|
|||
|
|
<cn>CPU、内存、温度、网络</cn>
|
|||
|
|
<en>CPU/Memory/Temperature/Netword</en>
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
<div class="panel-body">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
<div class="form-group wc-theme-row">
|
|||
|
|
<label class="col-md-5 col-sm-5 control-label">
|
|||
|
|
<cn>模块颜色</cn>
|
|||
|
|
<en>Active Background</en>
|
|||
|
|
</label>
|
|||
|
|
<div class="col-md-7 col-sm-7">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-8">
|
|||
|
|
<input id="--system_state_active" class="colorPicker form-control wc-theme-key" type="text"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-2 col-sm-2 text-center">
|
|||
|
|
<div class="wc-theme-mark"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-footer">
|
|||
|
|
<!-- <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal">新建</button>-->
|
|||
|
|
<button type="button" class="btn btn-warning" id="delete" onclick="onDelTheme()">删除</button>
|
|||
|
|
<button type="button" class="btn btn-warning" id="save" onclick="onSaveTheme()">保存</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="modal fade" id="myModal" tabindex="-1" style="z-index: 10000">
|
|||
|
|
<div class="modal-dialog" role="document" style="width: 20%;">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
|||
|
|
<h4 class="modal-title" id="myModalLabel">新建主题</h4>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body">
|
|||
|
|
<input type="text" id="newThemeName" class="form-control" property="请输入主题名">
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-footer">
|
|||
|
|
<button type="button" class="btn btn-warning" data-dismiss="modal">取消</button>
|
|||
|
|
<button type="button" class="btn btn-warning" onclick="onNewThemeOK()">确定</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="modal fade" id="delModal" tabindex="1" style="z-index: 10000;">
|
|||
|
|
<div class="modal-dialog" role="document" style="width: 20%">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
|||
|
|
<h4 class="modal-title">
|
|||
|
|
<cn>提示</cn>
|
|||
|
|
<en>Info</en>
|
|||
|
|
</h4>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-7" style="line-height: 34px;font-size: 14px">
|
|||
|
|
<span>
|
|||
|
|
<cn>确认删除主题</cn>
|
|||
|
|
<en>Confirm deletion the theme of</en>
|
|||
|
|
<span id="delThemeName"></span>
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-footer">
|
|||
|
|
<button type="button" class="btn btn-warning" data-dismiss="modal">
|
|||
|
|
<cn>取消</cn>
|
|||
|
|
<en>Cancel</en>
|
|||
|
|
</button>
|
|||
|
|
<button type="button" class="btn btn-warning" onclick="onDelThemeBtn()">
|
|||
|
|
<cn>确定</cn>
|
|||
|
|
<en>OK</en>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script id="theme_tpl" type="text/x-handlebars-template">
|
|||
|
|
{{#each this}}
|
|||
|
|
<div id="{{this}}_" class="row wc-theme-item" onclick='onThemeClick("{{this}}")'>
|
|||
|
|
<div class="col-md-12 col-sm-12">
|
|||
|
|
{{this}}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{{/each}}
|
|||
|
|
<div class="text-center">
|
|||
|
|
<button class="btn wc-theme-addTheme btn-warning" onclick="onAddTheme()">
|
|||
|
|
<i class="fa fa-plus"></i>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script src="vendor/colorpicker/js/bootstrap-colorpicker.min.js"></script>
|
|||
|
|
<script>
|
|||
|
|
var themeObj = null;
|
|||
|
|
|
|||
|
|
// Modal垂直居中
|
|||
|
|
$("#myModal,#myManager,#delModal").on('show.bs.modal', function(){
|
|||
|
|
var $this = $(this);
|
|||
|
|
var $modal_dialog = $this.find('.modal-dialog');
|
|||
|
|
// 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零
|
|||
|
|
$this.css('display', 'block');
|
|||
|
|
$modal_dialog.css({'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) });
|
|||
|
|
if($this.attr("id") == "myManager"){
|
|||
|
|
$("body").css("overflow","hidden");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$("#myManager").on('hide.bs.modal', function(){
|
|||
|
|
$("body").css("overflow","auto");
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function onSetKeyColor(key,data) {
|
|||
|
|
data = data.substring(data.indexOf(key), data.length);
|
|||
|
|
var index1 = data.indexOf(":");
|
|||
|
|
var index2 = data.indexOf(";");
|
|||
|
|
var color = data.substring(index1 + 1, index2);
|
|||
|
|
|
|||
|
|
//$("#"+key).val(color);
|
|||
|
|
$("#"+key).parent().next().children().css("background-color",color);
|
|||
|
|
$("#"+key).colorpicker({format: "hex", color: color});
|
|||
|
|
$("#"+key).colorpicker('setValue',color);
|
|||
|
|
$("#"+key).colorpicker().on('changeColor', function () {
|
|||
|
|
$(this).parent().next().children().css("background-color",$(this).val());
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onThemeClick(themeName) {
|
|||
|
|
|
|||
|
|
if(themeName === "default"){
|
|||
|
|
$("#delete").css("visibility","hidden");
|
|||
|
|
$("#save").css("visibility","hidden");
|
|||
|
|
} else {
|
|||
|
|
$("#delete").css("visibility","visible");
|
|||
|
|
$("#save").css("visibility","visible");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$("#"+themeName+"_").siblings().removeClass("active");
|
|||
|
|
$("#"+themeName+"_").addClass("active");
|
|||
|
|
$.ajax({
|
|||
|
|
url: "/css/theme/" + themeName + ".css", success: function (data) {
|
|||
|
|
onSetKeyColor("--body_background",data);
|
|||
|
|
onSetKeyColor("--foot_background",data);
|
|||
|
|
onSetKeyColor("--foot_color",data);
|
|||
|
|
|
|||
|
|
onSetKeyColor("--navbar_background",data);
|
|||
|
|
onSetKeyColor("--navbar_item_color",data);
|
|||
|
|
onSetKeyColor("--navbar_item_background",data);
|
|||
|
|
onSetKeyColor("--navbar_item_active",data);
|
|||
|
|
onSetKeyColor("--navbar_item_active_background",data);
|
|||
|
|
|
|||
|
|
onSetKeyColor("--navtab_background",data);
|
|||
|
|
onSetKeyColor("--navtab_item_color",data);
|
|||
|
|
onSetKeyColor("--navtab_item_background",data);
|
|||
|
|
onSetKeyColor("--navtab_item_active",data);
|
|||
|
|
onSetKeyColor("--navtab_item_active_border",data);
|
|||
|
|
|
|||
|
|
onSetKeyColor("--dropdown_background",data);
|
|||
|
|
onSetKeyColor("--dropdown_color",data);
|
|||
|
|
onSetKeyColor("--dropdown_item_active_background",data);
|
|||
|
|
onSetKeyColor("--dropdown_item_active",data);
|
|||
|
|
|
|||
|
|
onSetKeyColor("--title_panel_background",data);
|
|||
|
|
onSetKeyColor("--title_panel_color",data);
|
|||
|
|
|
|||
|
|
onSetKeyColor("--slider_touch",data);
|
|||
|
|
onSetKeyColor("--slider_selection",data);
|
|||
|
|
|
|||
|
|
onSetKeyColor("--switch_active",data);
|
|||
|
|
|
|||
|
|
onSetKeyColor("--btn_color",data);
|
|||
|
|
onSetKeyColor("--btn_background",data);
|
|||
|
|
onSetKeyColor("--btn_hover_color",data);
|
|||
|
|
onSetKeyColor("--btn_hover_background",data);
|
|||
|
|
|
|||
|
|
onSetKeyColor("--checkbox_active",data);
|
|||
|
|
onSetKeyColor("--input_active",data);
|
|||
|
|
onSetKeyColor("--system_state_active",data);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onDelTheme() {
|
|||
|
|
var id = $(".wc-theme-item.active").attr("id");
|
|||
|
|
var themeName = id.replace("_","");
|
|||
|
|
$("#delThemeName").text(themeName+"?");
|
|||
|
|
$("#delModal").modal("show");
|
|||
|
|
$(".modal-backdrop").each(function (index,obj) {
|
|||
|
|
if(index === 1)
|
|||
|
|
$(obj).css("z-index","9999")
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onDelThemeBtn() {
|
|||
|
|
var id = $(".wc-theme-item.active").attr("id");
|
|||
|
|
var themeName = id.replace("_","");
|
|||
|
|
var obj = {"name":themeName};
|
|||
|
|
func("delTheme",obj,function (res) {
|
|||
|
|
if (res["result"] === "OK") {
|
|||
|
|
var themes = themeObj["themes"];
|
|||
|
|
var array = [];
|
|||
|
|
for(var i=0;i<themes.length;i++){
|
|||
|
|
if(themeName !== themes[i])
|
|||
|
|
array.push(themes[i]);
|
|||
|
|
}
|
|||
|
|
themeObj["themes"] = array;
|
|||
|
|
func("saveConfigFile",{path: "config/theme.json",data: JSON.stringify(themeObj,null,2)},function (res) {
|
|||
|
|
if(res["result"] === "OK"){
|
|||
|
|
var theme_tpl = $("#theme_tpl").html();
|
|||
|
|
var template = Handlebars.compile(theme_tpl);
|
|||
|
|
var html = template(array);
|
|||
|
|
$("#themeBox").html(html);
|
|||
|
|
$("#delModal").modal("hide");
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onSaveTheme() {
|
|||
|
|
var id = $(".wc-theme-item.active").attr("id");
|
|||
|
|
var themeName = id.replace("_","");
|
|||
|
|
|
|||
|
|
var obj = {
|
|||
|
|
"--body_background" : $("#--body_background").val(),
|
|||
|
|
"--foot_background" : $("#--foot_background").val(),
|
|||
|
|
"--foot_color" : $("#--foot_color").val(),
|
|||
|
|
|
|||
|
|
"--navbar_background" : $("#--navbar_background").val(),
|
|||
|
|
"--navbar_item_color" : $("#--navbar_item_color").val(),
|
|||
|
|
"--navbar_item_background" : $("#--navbar_item_background").val(),
|
|||
|
|
"--navbar_item_active" : $("#--navbar_item_active").val(),
|
|||
|
|
"--navbar_item_active_background" : $("#--navbar_item_active_background").val(),
|
|||
|
|
|
|||
|
|
"--navtab_background" : $("#--navtab_background").val(),
|
|||
|
|
"--navtab_item_color": $("#--navtab_item_color").val(),
|
|||
|
|
"--navtab_item_background" : $("#--navtab_item_background").val(),
|
|||
|
|
"--navtab_item_active": $("#--navtab_item_active").val(),
|
|||
|
|
"--navtab_item_active_border": $("#--navtab_item_active_border").val(),
|
|||
|
|
|
|||
|
|
"--dropdown_background": $("#--dropdown_background").val(),
|
|||
|
|
"--dropdown_color": $("#--dropdown_color").val(),
|
|||
|
|
"--dropdown_item_active_background": $("#--dropdown_item_active_background").val(),
|
|||
|
|
"--dropdown_item_active": $("#--dropdown_item_active").val(),
|
|||
|
|
|
|||
|
|
"--slider_touch": $("#--slider_touch").val(),
|
|||
|
|
"--slider_selection": $("#--slider_selection").val(),
|
|||
|
|
|
|||
|
|
"--switch_active": $("#--switch_active").val(),
|
|||
|
|
|
|||
|
|
"--btn_color": $("#--btn_color").val(),
|
|||
|
|
"--btn_background": $("#--btn_background").val(),
|
|||
|
|
"--btn_hover_color": $("#--btn_hover_color").val(),
|
|||
|
|
"--btn_hover_background": $("#--btn_hover_background").val(),
|
|||
|
|
|
|||
|
|
"--checkbox_active": $("#--checkbox_active").val(),
|
|||
|
|
"--system_state_active": $("#--system_state_active").val(),
|
|||
|
|
"--placeholder":"#fb0"
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var css = JSON.stringify(obj,null,2);
|
|||
|
|
css = "html "+ css;
|
|||
|
|
css = css.replace(/\"/g,"");
|
|||
|
|
css = css.replace(/,/g,";");
|
|||
|
|
css = css.replace(/ /g,"");
|
|||
|
|
|
|||
|
|
func("saveTheme",{"css": css,"name":themeName},function (res) {
|
|||
|
|
if(res["result"] === "OK")
|
|||
|
|
htmlAlert("#themeAlert", "success", "<cn>保存成功！</cn><en>Save success!</en>", "", 3000);
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onAddTheme() {
|
|||
|
|
var themes = themeObj["themes"];
|
|||
|
|
if(themes.length >= 15) {
|
|||
|
|
htmlAlert("#themeAlert", "danger", "<cn>新建主题失败，最多保存15个主题!</cn><en>New theme failed, save up to 15 themes!</en>", "", 3000);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
$("#myModal").modal("show");
|
|||
|
|
$(".modal-backdrop").each(function (index,obj) {
|
|||
|
|
if(index === 1)
|
|||
|
|
$(obj).css("z-index","9999")
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
function onNewThemeOK() {
|
|||
|
|
var name = $("#newThemeName").val();
|
|||
|
|
if(name === "" || name === null || name === undefined)
|
|||
|
|
return;
|
|||
|
|
|
|||
|
|
var themes = themeObj["themes"];
|
|||
|
|
for(var i=0;i<themes.length;i++) {
|
|||
|
|
var themeName = themes[i];
|
|||
|
|
themeName = themeName.replace(/\s+/g,"");
|
|||
|
|
if(themeName == name) {
|
|||
|
|
htmlAlert("#themeAlert", "danger", "<cn>主题名重复!</cn><en>The name of theme is duplication!</en>", "", 3000);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var obj = {"name":name};
|
|||
|
|
func("addNewTheme",obj,function (res) {
|
|||
|
|
if(res["result"] === "OK") {
|
|||
|
|
var themes = themeObj["themes"];
|
|||
|
|
themes.push(name);
|
|||
|
|
themeObj["themes"] = themes;
|
|||
|
|
func("saveConfigFile",{path: "config/theme.json",data: JSON.stringify(themeObj,null,2)},function (res) {
|
|||
|
|
if(res["result"] === "OK") {
|
|||
|
|
$('#myModal').modal('hide');
|
|||
|
|
var theme_tpl = $("#theme_tpl").html();
|
|||
|
|
var template = Handlebars.compile(theme_tpl);
|
|||
|
|
var html = template(themes);
|
|||
|
|
$("#themeBox").html(html);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$( "#setTheme" ).click( function () {
|
|||
|
|
themeObj["used"] = $("#theme").val();
|
|||
|
|
func("saveConfigFile",{path: "config/theme.json",data: JSON.stringify(themeObj,null,2)},function (res) {
|
|||
|
|
if(res["result"] === "OK"){
|
|||
|
|
localStorage.removeItem("themeName");
|
|||
|
|
location.reload();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(function () {
|
|||
|
|
$.ajax({url:"config/theme.json",success:function(data){
|
|||
|
|
themeObj = data;
|
|||
|
|
var used = data["used"];
|
|||
|
|
var themes = data["themes"];
|
|||
|
|
for(var i=0;i<themes.length;i++){
|
|||
|
|
var opt = new Option(themes[i],themes[i]);
|
|||
|
|
if(themes[i] === used)
|
|||
|
|
opt.selected = true;
|
|||
|
|
$("#theme")[0].add(opt);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var theme_tpl = $("#theme_tpl").html();
|
|||
|
|
var template = Handlebars.compile(theme_tpl);
|
|||
|
|
var html = template(themes);
|
|||
|
|
$("#themeBox").html(html);
|
|||
|
|
}});
|
|||
|
|
|
|||
|
|
setTimeout(function () {
|
|||
|
|
onThemeClick("default");
|
|||
|
|
},1000)
|
|||
|
|
});
|
|||
|
|
</script>
|