Spectrum 컬러피커 추가 등

- MIT 라이선스의 Spectrum 컬러피커 추가. (기존 jPicker를 대체 - 파일은 그대로 두어서 의존성 문제 회피)
- 색상 선택하는 부분을 전반적으로 다듬음
This commit is contained in:
MinSoo Kim 2016-02-06 17:53:53 +09:00
parent 4698bcac3e
commit 3288d504d2
65 changed files with 36275 additions and 28 deletions

View file

@ -427,11 +427,13 @@ margin-bottom: 10px;
.x input[type="email"],
.x input[type="url"],
.x input[type="search"],
.x input[type="tel"],
.x input[type="color"] {
.x input[type="tel"] {
height: 16px;
line-height: 16px;
}
.x input[type="color"] {
height: 25px;
}
.x input[type="number"] {
width: 50px;
}

View file

@ -5,7 +5,7 @@
<!--%load_js_plugin("ui.tree")-->
<load target="js/document_category.js" />
<!--%load_js_plugin("ui.colorpicker")-->
<!--%load_js_plugin("spectrum")-->
<script>
var category_title = "{$lang->category}";
</script>
@ -61,7 +61,7 @@
<div class="x_control-group">
<label class="x_control-label" for="category_color">{$lang->category_color}</label>
<div class="x_controls">
<span class="x_input-append"><input type="text" class="color-indicator" name="category_color" id="category_color" value="" /></span>
<span class="x_input-append"><input type="color" class="color-indicator" name="category_color" id="category_color" value="" /></span>
<a href="#categoy_color_help" class="x_icon-question-sign" data-toggle>{$lang->help}</a>
<p id="categoy_color_help" hidden style="margin:8px 0 0 0">{$lang->about_category_color}</p>
</div>

View file

@ -65,5 +65,5 @@
</div>
</form>
</section>
<!--%load_js_plugin("ui.colorpicker")-->
<!--%load_js_plugin("spectrum")-->

View file

@ -1,5 +1,5 @@
<!--%load_js_plugin("ui")-->
<!--%load_js_plugin("ui.colorpicker")-->
<!--%load_js_plugin("spectrum")-->
<!--%import("js/ui.hotkey.js",optimized=false)-->
<!--%import("js/ui.toolbar.js",optimized=false)-->
<!--%import("js/faceoff.js",optimized=false)-->
@ -218,7 +218,7 @@
<legend>{$lang->layout_manager[38]}</legend>
<span class="inputall">
<input type="text" id="border-width" size="3" title="border-width+px" />
<input type="text" id="border-color" size="7" class="color-indicator" title="border-color" />
<input type="color" id="border-color" size="7" class="color-indicator" title="border-color" />
<select id="border-style" title="border-style">
<option value="none">{$lang->layout_manager[39]}</option>
<option value="hidden">hidden</option>
@ -237,7 +237,7 @@
<div>
<label for="border-top-width">{$lang->layout_manager[34]} : </label>
<input type="text" id="border-top-width" size="3" title="border-width+px" />
<input type="text" id="border-top-color" size="7" class="color-indicator" title="border-color" />
<input type="color" id="border-top-color" size="7" class="color-indicator" title="border-color" />
<select id="border-top-style" title="border-style">
<option value="none">{$lang->layout_manager[39]}</option>
<option value="hidden">hidden</option>
@ -254,7 +254,7 @@
<div>
<label for="border-right-width">{$lang->layout_manager[36]} : </label>
<input type="text" id="border-right-width" size="3" title="border-width+px" />
<input type="text" id="border-right-color" size="7" class="color-indicator" title="border-color" />
<input type="color" id="border-right-color" size="7" class="color-indicator" title="border-color" />
<select id="border-right-style" title="border-style">
<option value="none">{$lang->layout_manager[39]}</option>
<option value="hidden">hidden</option>
@ -271,7 +271,7 @@
<div>
<label for="border-bottom-width">{$lang->layout_manager[37]} : </label>
<input type="text" id="border-bottom-width" size="3" title="border-width+px" />
<input type="text" id="border-bottom-color" size="7" class="color-indicator" title="border-color" />
<input type="color" id="border-bottom-color" size="7" class="color-indicator" title="border-color" />
<select id="border-bottom-style" title="border-style">
<option value="none">{$lang->layout_manager[39]}</option>
<option value="hidden">hidden</option>
@ -288,7 +288,7 @@
<div>
<label for="border-left-width">{$lang->layout_manager[35]} : </label>
<input type="text" id="border-left-width" size="3" title="border-width+px" />
<input type="text" id="border-left-color" size="7" class="color-indicator" title="border-color" />
<input type="color" id="border-left-color" size="7" class="color-indicator" title="border-color" />
<select id="border-left-style" title="border-style">
<option value="none">{$lang->layout_manager[39]}</option>
<option value="hidden">hidden</option>
@ -309,7 +309,7 @@
<div class="visible-more">
<div>
<label for="background-color">{$lang->layout_manager[41]} : </label>
<input type="text" id="background-color" size="7" class="color-indicator" />
<input type="color" id="background-color" size="7" class="color-indicator" />
</div>
<div>
<label for="background-image">{$lang->layout_manager[42]} :</label>
@ -335,7 +335,7 @@
</div>
<div>
<label for="color">{$lang->layout_manager[54]} : </label>
<input type="text" id="color" size="7" class="color-indicator" />
<input type="color" id="color" size="7" class="color-indicator" />
</div>
</div>
</fieldset>

View file

@ -129,7 +129,7 @@
</block>
<block cond="$var->type == 'colorpicker'">
{@ $use_colorpicker = true; }
<input type="text" class="color-indicator" name="{$name}" id="{$name}" value="{$var->value}" />
<input type="color" class="color-indicator" name="{$name}" id="{$name}" value="{$var->value}" />
<p id="categoy_color_help" hidden style="margin:8px 0 0 0">{$lang->about_category_color}</p>
</block>
<p class="x_help-block">{$var->description}</p>
@ -172,5 +172,5 @@
</section>
<iframe name="hiddenIframe" src="about:blank" hidden></iframe>
<!--@if($use_colorpicker)-->
<!--%load_js_plugin("ui.colorpicker")-->
<!--%load_js_plugin("spectrum")-->
<!--@end-->

View file

@ -117,7 +117,7 @@
<!--// colorpicker-->
<div cond="$val->type == 'colorpicker'">
{@ $use_colorpicker = true; }
<input type="text" class="color-indicator" name="{$val->name}" id="{$val->name}" value="{$val->value}" />
<input type="color" class="color-indicator" name="{$val->name}" id="{$val->name}" value="{$val->value}" />
<p id="categoy_color_help" hidden style="margin:8px 0 0 0">{$lang->about_category_color}</p>
</div>
<a href="#about_{$val->name}" data-toggle class="x_icon-question-sign" cond="$val->description" style="vertical-align:top;margin-top:5px"|cond="$val->type == 'textarea'">{$lang->help}</a>
@ -132,5 +132,5 @@
</div>
</form>
<!--@if($use_colorpicker)-->
<!--%load_js_plugin("ui.colorpicker")-->
<!--%load_js_plugin("spectrum")-->
<!--@end-->

View file

@ -1,7 +1,7 @@
<load target="../../module/tpl/js/multi_order.js" />
<load target="../../module/tpl/js/module_list.js" />
<load target="../../module/tpl/js/mid.js" />
<!--%load_js_plugin("ui.colorpicker")-->
<!--%load_js_plugin("spectrum")-->
<div class="x_control-group">
<label class="x_control-label" for="skin">{$lang->skin}</label>
@ -49,7 +49,7 @@
<input type="text" name="{$id}" />
</block>
<block cond="$var->type == 'color'">
<input type="text" name="{$id}" value="" id="{$id}" class="color-indicator" style="width:178px" />
<input type="color" name="{$id}" value="" id="{$id}" class="color-indicator" style="width:178px" />
</block>
<block cond="$var->type == 'textarea'">
<textarea cond="$var->type == 'textarea'" name="{$id}" id="{$id}" rows="8" cols="42"></textarea>

View file

@ -62,7 +62,7 @@
<option value="solid">{$lang->cmd_widget_border_solid}</option>
<option value="dotted">{$lang->cmd_widget_border_dotted}</option>
</select>
<input type="text" name="border_top_color" value="" class="color_input color-indicator" maxlength="7"/>
<input type="color" name="border_top_color" value="" class="color_input color-indicator" maxlength="7"/>
</td>
</tr>
<tr>
@ -72,7 +72,7 @@
<option value="solid">{$lang->cmd_widget_border_solid}</option>
<option value="dotted">{$lang->cmd_widget_border_dotted}</option>
</select>
<input type="text" name="border_left_color" value="" class="color_input color-indicator" maxlength="7"/>
<input type="color" name="border_left_color" value="" class="color_input color-indicator" maxlength="7"/>
</td>
<td style="text-align:right">
<input type="number" name="border_right_thick" value="" class="small_input" /> px
@ -80,7 +80,7 @@
<option value="solid">{$lang->cmd_widget_border_solid}</option>
<option value="dotted">{$lang->cmd_widget_border_dotted}</option>
</select>
<input type="text" name="border_right_color" value="" class="color_input color-indicator" maxlength="7"/>
<input type="color" name="border_right_color" value="" class="color_input color-indicator" maxlength="7"/>
</td>
</tr>
<tr>
@ -90,12 +90,12 @@
<option value="solid">{$lang->cmd_widget_border_solid}</option>
<option value="dotted">{$lang->cmd_widget_border_dotted}</option>
</select>
<input type="text" name="border_bottom_color" value="" class="color_input color-indicator" maxlength="7"/>
<input type="color" name="border_bottom_color" value="" class="color_input color-indicator" maxlength="7"/>
</td>
</tr>
<tr>
<th>{$lang->cmd_widget_background_color}</th>
<td colspan="2"><input type="text" name="background_color" value="" class="input color-indicator" /></td>
<td colspan="2"><input type="color" name="background_color" value="" class="input color-indicator" /></td>
</tr>
<tr>
<th>{$lang->cmd_widget_background_image_url}</th>
@ -129,5 +129,5 @@
.wgs input{margin:0!important;width:60px}
</style>
</section>
<!--%load_js_plugin("ui.colorpicker")-->
<!--%load_js_plugin("spectrum")-->

View file

@ -6,7 +6,7 @@
<load target="../../admin/tpl/js/admin.js" />
<load target="../../admin/tpl/js/jquery.tmpl.js" />
<load target="js/generate_code.js" />
<!--%load_js_plugin("ui.colorpicker")-->
<!--%load_js_plugin("spectrum")-->
<script>
jQuery(function(){
getWidgetVars();
@ -72,7 +72,7 @@
<input type="text" name="{$id}" value="" class="lang_code" />
</div>
<input cond="$var->type == 'color'" type="text" name="{$id}" class="color-indicator" />
<input cond="$var->type == 'color'" type="color" name="{$id}" class="color-indicator" />
<div cond="$var->type == 'textarea'">
<textarea name="{$id}" rows="8" cols="42" class="lang_code"></textarea>