Skip to content

Commit

Permalink
Merge pull request #126 from tranvan538/AddColorPicker
Browse files Browse the repository at this point in the history 
LGTM.
Issue #125 is fixed with this merge.
Documents on developer network will be updated after this.
  • Loading branch information
@will-yama
will-yama committed Feb 13, 2018
2 parents 3ec5b14 + cb49587 commit ae73a6e
Show file tree
Hide file tree
Showing 5 changed files with 183 additions and 83 deletions.
86 changes: 79 additions & 7 deletions examples/conditionformat2/css/config.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,8 @@
}

.cf-plugin-column5, .cf-plugin-column6 {
width: 90px;
}

.cf-plugin-column5-color, .cf-plugin-column6-color{
display:none;
width: 120px;
box-shadow: none;
}

.color-paint-brush {
Expand All @@ -70,6 +67,81 @@
border-bottom: 3px solid #000000;
}

.cf-plugin-column9{
.cf-plugin-column9 {
min-width: 70px;
}
}

.cf-plugin-submit {
margin-top: 50px;
}

/* color picker */
.kintone-ui.cp-color-picker {
background: #fff;
box-sizing: border-box;
width: 330px;
border-radius: 0px;
box-shadow: 0 0 8px 2px rgba(0,0,0,.1);
}

.kintone-ui.cp-color-picker .cp-panel {
width: 75px;
line-height: 21px;
float: right;
padding: 0 1px 0 8px;
margin-top: -1px;
overflow: visible
}
.kintone-ui.cp-color-picker .cp-panel div {
margin-bottom: 4px;
padding-left: 10px;
display: inline-block;
}
.kintone-ui.cp-color-picker .cp-panel div label {
width: 10px;
float: left;
text-align: left;
line-height: 20px;
padding-right: 4px;
display: inline-block;
}
.kintone-ui.cp-color-picker .cp-panel div input {
width: 50px;
height: 20px;
font-size: 12px;
padding: 4px 2px;
box-sizing: border-box;
text-align: right;
color: #a7a7a7;
background-color: #ffffff;
border: 1px solid #e3e7e8;
box-shadow: 2px 2px 6px #f5f5f5 inset, -2px -2px 6px #f5f5f5 inset;
display: inline-block;
}
.kintone-ui.cp-color-picker .cp-panel div input:focus {
background-color: #e2f2fe;
box-shadow: none;
}
.kintone-ui.cp-color-picker .cp-panel hr {
border-top: 1px solid #e3e7e8;
border-left: none;
border-right: none;
border-bottom: none;
}
.kintone-ui.cp-color-picker .cp-panel .cp-HEX {
width: 65px;
float: right;
}

.kintone-ui.cp-color-picker .cp-z-slider {
height: 200px;
}

.kintone-ui.cp-color-picker .cp-xy-slider {
width: 200px;
height: 200px;
}
.kintone-ui.cp-color-picker .cp-xy-slider:active {
cursor: none;
}
/* color picker */
14 changes: 3 additions & 11 deletions examples/conditionformat2/html/config.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,8 +104,6 @@
<div class="kintoneplugin-table-td-control-value">
<div>
<input type="text" class="kintoneplugin-input-text cf-plugin-column5" maxlength="7" value="#000000"/>
<i class="fa fa-paint-brush color-paint-brush"></i>
<input type="color" class="cf-plugin-column5-color"/>
</div>
</div>
</div>
Expand All @@ -114,9 +112,7 @@
<div class="kintoneplugin-table-td-control">
<div class="kintoneplugin-table-td-control-value">
<div>
<input type="text" class="kintoneplugin-input-text cf-plugin-column6" maxlength="7" value="#">
<i class="fa fa-paint-brush color-paint-brush"></i>
<input type="color" class="cf-plugin-column6-color"/>
<input type="text" class="kintoneplugin-input-text cf-plugin-column6" maxlength="7" value="#FFFFFF">
</div>
</div>
</div>
Expand Down Expand Up @@ -266,8 +262,6 @@
<div class="kintoneplugin-table-td-control-value">
<div>
<input type="text" class="kintoneplugin-input-text cf-plugin-column5" maxlength="7" value="#000000"/>
<i class="fa fa-paint-brush color-paint-brush"></i>
<input type="color" class="cf-plugin-column5-color"/>
</div>
</div>
</div>
Expand All @@ -276,9 +270,7 @@
<div class="kintoneplugin-table-td-control">
<div class="kintoneplugin-table-td-control-value">
<div>
<input type="text" class="kintoneplugin-input-text cf-plugin-column6" maxlength="7" value="#"/>
<i class="fa fa-paint-brush color-paint-brush"></i>
<input type="color" class="cf-plugin-column6-color"/>
<input type="text" class="kintoneplugin-input-text cf-plugin-column6" maxlength="7" value="#FFFFFF"/>
</div>
</div>
</div>
Expand Down Expand Up @@ -325,7 +317,7 @@
</table>
</div>
</div>
<div class="block">
<div class="block cf-plugin-submit">
<button class="kintoneplugin-button-dialog-ok" id="cf-submit" type="button">{{html:terms.cf_plugin_submit}}</button>
<button class="kintoneplugin-button-dialog-cancel" id="cf-cancel" type="button">{{html:terms.cf_plugin_cancel}}</button>
</div>
Expand Down
158 changes: 95 additions & 63 deletions examples/conditionformat2/js/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,60 @@ jQuery.noConflict();
DATE_ROW_NUM = 10;
}

function createColorPickerConfig(callback) {
return {
opacity: false,
doRender: false,
buildCallback: function($elm) {
$elm.addClass('kintone-ui');

var colorInstance = this.color,
colorPicker = this;

$elm.prepend('<div class="cp-panel">' +
'<div><label>R</label> <input type="text" class="cp-r" /></div>' +
'<div><label>G</label> <input type="text" class="cp-g" /></div>' +
'<div><label>B</label> <input type="text" class="cp-b" /></div>' +
'<hr>' +
'<div><label>H</label> <input type="text" class="cp-h" /></div>' +
'<div><label>S</label> <input type="text" class="cp-s" /></div>' +
'<div><label>V</label> <input type="text" class="cp-v" /></div>' +
'<hr>' +
'<div><input type="text" class="cp-HEX" /></div>' +
'</div>').on('change', 'input', function(e) {
var value = this.value,
className = this.className,
type = className.split('-')[1],
color = {};

color[type] = value;
colorInstance.setColor(type === 'HEX' ? value : color,
type === 'HEX' ? 'HEX' : /(?:r|g|b)/.test(type) ? 'rgb' : 'hsv');
colorPicker.render();
this.blur();
});
},
renderCallback: function($elm, toggled) {
var colors = this.color.colors.RND,
modes = {
r: colors.rgb.r, g: colors.rgb.g, b: colors.rgb.b,
h: colors.hsv.h, s: colors.hsv.s, v: colors.hsv.v,
HEX: this.color.colors.HEX
};

$('input', '.cp-panel').each(function() {
this.value = modes[this.className.substr(3)];
});

this.$trigger = $elm;
callback(this.color.colors.HEX);
},
positionCallback: function($elm) {
this.color.setColor($elm.val());
}
}
}

$(document).ready(function() {
var terms = {
'ja': {
Expand Down Expand Up @@ -251,29 +305,23 @@ jQuery.noConflict();
$('#cf-plugin-text-tbody > tr:eq(' + ti + ') .cf-plugin-column3').val(CONF['text_row' + ti]['value']);
$('#cf-plugin-text-tbody > tr:eq(' + ti + ') .cf-plugin-column4').
val(CONF['text_row' + ti]['targetfield']);
$('#cf-plugin-text-tbody > tr:eq(' + ti + ') .cf-plugin-column5').
val(CONF['text_row' + ti]['targetcolor']);
$('#cf-plugin-text-tbody > tr:eq(' + ti + ') .cf-plugin-column6').
val(CONF['text_row' + ti]['targetbgcolor']);
$('#cf-plugin-text-tbody > tr:eq(' + ti + ') .cf-plugin-column7').
val(CONF['text_row' + ti]['targetsize']);
$('#cf-plugin-text-tbody > tr:eq(' + ti + ') .cf-plugin-column8').
val(CONF['text_row' + ti]['targetfont']);
$('#cf-plugin-text-tbody > tr:eq(' + ti + ') .cf-plugin-column5').
css('color', CONF['text_row' + ti]['targetcolor']);
$('#cf-plugin-text-tbody > tr:eq(' + ti + ') .cf-plugin-column6').
css('background-color', CONF['text_row' + ti]['targetbgcolor']);
$('#cf-plugin-text-tbody > tr:eq(' + ti + ') .cf-plugin-column5').
parent('div').find('i').css('border-bottom-color', CONF['text_row' + ti]['targetcolor']);
$('#cf-plugin-text-tbody > tr:eq(' + ti + ') .cf-plugin-column6').
parent('div').find('i').css('border-bottom-color', CONF['text_row' + ti]['targetbgcolor']);
$('#cf-plugin-text-tbody > tr:eq(' + ti + ') .cf-plugin-column5-color').
val(CONF['text_row' + ti]['targetcolor']);

var $fontColor = $('#cf-plugin-text-tbody > tr:eq(' + ti + ') .cf-plugin-column5');
$fontColor.val(CONF['text_row' + ti]['targetcolor']);
$fontColor.css('color', CONF['text_row' + ti]['targetcolor']);

var $backgroundColor = $('#cf-plugin-text-tbody > tr:eq(' + ti + ') .cf-plugin-column6');
$backgroundColor.css('color', CONF['text_row' + ti]['targetcolor']);
if (CONF['text_row' + ti]['targetbgcolor'] !== '#') {
$('#cf-plugin-text-tbody > tr:eq(' + ti + ') .cf-plugin-column6-color').
val(CONF['text_row' + ti]['targetbgcolor']);
$backgroundColor.val(CONF['text_row' + ti]['targetbgcolor']);
$backgroundColor.css('background-color', CONF['text_row' + ti]['targetbgcolor']);
} else {
$('#cf-plugin-text-tbody > tr:eq(' + ti + ') .cf-plugin-column6-color').val('#808080');
$backgroundColor.val('#808080');
$backgroundColor.css('background-color', '#808080');
}
}
}
Expand All @@ -290,32 +338,25 @@ jQuery.noConflict();
val(CONF['date_row' + di]['type2']);
$('#cf-plugin-date-tbody > tr:eq(' + di + ') .cf-plugin-column4').
val(CONF['date_row' + di]['targetfield']);
$('#cf-plugin-date-tbody > tr:eq(' + di + ') .cf-plugin-column5').
val(CONF['date_row' + di]['targetcolor']);
$('#cf-plugin-date-tbody > tr:eq(' + di + ') .cf-plugin-column6').
val(CONF['date_row' + di]['targetbgcolor']);
$('#cf-plugin-date-tbody > tr:eq(' + di + ') .cf-plugin-column7').
val(CONF['date_row' + di]['targetsize']);
$('#cf-plugin-date-tbody > tr:eq(' + di + ') .cf-plugin-column8').
val(CONF['date_row' + di]['targetfont']);
$('#cf-plugin-date-tbody > tr:eq(' + di + ') .cf-plugin-column5').
css('color', CONF['date_row' + di]['targetcolor']);
$('#cf-plugin-date-tbody > tr:eq(' + di + ') .cf-plugin-column6').
css('background-color', CONF['date_row' + di]['targetbgcolor']);
$('#cf-plugin-date-tbody > tr:eq(' + di + ') .cf-plugin-column5').
parent('div').find('i').css('border-bottom-color', CONF['date_row' + di]['targetcolor']);
$('#cf-plugin-date-tbody > tr:eq(' + di + ') .cf-plugin-column6').
parent('div').find('i').css('border-bottom-color', CONF['date_row' + di]['targetbgcolor']);
$('#cf-plugin-date-tbody > tr:eq(' + di + ') .cf-plugin-column5-color').
val(CONF['date_row' + di]['targetcolor']);

var $fontColor = $('#cf-plugin-date-tbody > tr:eq(' + di + ') .cf-plugin-column5');
$fontColor.val(CONF['date_row' + di]['targetcolor']);
$fontColor.css('color', CONF['date_row' + di]['targetcolor']);

var $backgroundColor = $('#cf-plugin-date-tbody > tr:eq(' + di + ') .cf-plugin-column6');
$backgroundColor.css('color', CONF['date_row' + di]['targetcolor']);
if (CONF['date_row' + di]['targetbgcolor'] !== '#') {
$('#cf-plugin-date-tbody > tr:eq(' + di + ') .cf-plugin-column6-color').
val(CONF['date_row' + di]['targetbgcolor']);
$backgroundColor.val(CONF['date_row' + di]['targetbgcolor']);
$backgroundColor.css('background-color', CONF['date_row' + di]['targetbgcolor']);
} else {
$('#cf-plugin-date-tbody > tr:eq(' + di + ') .cf-plugin-column6-color').val('#808080');
$backgroundColor.val('#808080');
$backgroundColor.css('background-color', '#808080');
}
}

}

function setDefault() {
Expand Down Expand Up @@ -447,45 +488,36 @@ jQuery.noConflict();
});
}

// Change color
$('.cf-plugin-column5').change(function() {
$(this).css('color', $(this).val());
$(this).parent('div').find('i').css('border-bottom-color', $(this).val());
return true;
$('.cf-plugin-column5').focus(function(event) {
var $fontColorInput = $(this);
var $backgroundColorInput = $fontColorInput.parents('td').next().find('.cf-plugin-column6');
$(this).colorPicker(createColorPickerConfig(function(colorCode) {
$fontColorInput.css('color', '#' + colorCode);
$backgroundColorInput.css('color', '#' + colorCode);
}));
});

// Change backgroundcolor
$('.cf-plugin-column6').change(function() {
$(this).css('background-color', $(this).val());
$(this).parent('div').find('i').css('border-bottom-color', $(this).val());
return true;
$('.cf-plugin-column6').focus(function(event) {
var $backgroundColorInput = $(this);
$(this).colorPicker(createColorPickerConfig(function(colorCode) {
$backgroundColorInput.css('background-color', '#' + colorCode);
}));
});

// Change color
$('.cf-plugin-column5-color').change(function() {
var color_code = $(this).parent('div').find('input[type="color"]').val();
var $el = $(this).parent('div').find('input[type="text"]');
$el.val(color_code);
$el.css('color', color_code);
$(this).parent('div').find('i').css('border-bottom-color', $(this).val());
$('.cf-plugin-column5').change(function() {
var $fontColorInput = $(this);
$fontColorInput.css('color', $fontColorInput.val());
$fontColorInput.parents('td').next().find('.cf-plugin-column6').css('color', $fontColorInput.val());
return true;
});

// Change color
$('.cf-plugin-column6-color').change(function() {
var color_code = $(this).parent('div').find('input[type="color"]').val();
var $el = $(this).parent('div').find('input[type="text"]');
$el.val(color_code);
$el.css('background-color', color_code);
$(this).parent('div').find('i').css('border-bottom-color', $(this).val());
// Change backgroundcolor
$('.cf-plugin-column6').change(function() {
$(this).css('background-color', $(this).val());
return true;
});

// Color picker
$('.color-paint-brush').click(function() {
$($(this).parents('td')[0]).find('input[type="color"]').click();
});

// Add Row
$('#cf-plugin-text-tbody .addList').click(function() {
$('#cf-plugin-text-tbody > tr').eq(0).clone(true).insertAfter($(this).parent().parent());
Expand Down
5 changes: 3 additions & 2 deletions examples/conditionformat2/manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@
"type": "APP",
"name": {
"ja": "新条件書式プラグイン",
"en": "New conditional format plug-in",
"en": "Conditional Format",
"zh": "新条件格式插件"
},
"description": {
"ja": "新デザインに対応した条件により表示するアイテムの色、背景色等を変更するプラグインです。",
"en": "It is plug-in which changes the color etc. of the item displayed according to conditions. ",
"en": "This plug-in changes colors and styles of fields",
"zh": "是變更根據條件表示的條款的顏色等的插件。"
},
"icon": "image/icon.png",
Expand All @@ -32,6 +32,7 @@
"js": [
"https://js.cybozu.com/jquery/2.1.4/jquery.min.js",
"https://js.cybozu.com/jsrender/0.9.83/jsrender.min.js",
"thirdparties/jqColorPicker.min.js",
"js/config.js"
],
"css": [
Expand Down

0 comments on commit ae73a6e

Please sign in to comment.