Skip to content

Commit 7f59c82

Browse files
gabrieloliveirapintogabrieloliveirapinto
committed
wip: refactor color picler
1 parent 8823312 commit 7f59c82

File tree

3 files changed

+338
-100
lines changed

3 files changed

+338
-100
lines changed

‎frontend/express/public/javascripts/countly/vue/components/input.js

+76-67
Original file line numberDiff line numberDiff line change
@@ -3,108 +3,117 @@
33
(function(countlyVue) {
44

55
var _mixins = countlyVue.mixins;
6-
var HEX_COLOR_REGEX = new RegExp('^#([0-9a-f]{3}|[0-9a-f]{6})$', 'i');
6+
var HEX_COLOR_REGEX = new RegExp('^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$', 'i');
7+
8+
Vue.component("cly-colorpicker", countlyVue.components.create({
9+
template: CV.T('/javascripts/countly/vue/templates/UI/color-picker.html'),
10+
11+
components: {
12+
picker: window.VueColor.Sketch
13+
},
14+
15+
props: {
16+
placement: {
17+
default: 'left',
18+
type: String
19+
},
20+
21+
resetValue: {
22+
default: '#FFFFFF',
23+
type: [String, Object]
24+
},
25+
26+
testId: {
27+
default: 'cly-colorpicker-test-id',
28+
type: String
29+
},
30+
31+
value: {
32+
default: '#FFFFFF',
33+
type: [String, Object],
34+
}
35+
},
36+
37+
emits: [
38+
'change',
39+
'input'
40+
],
741

8-
Vue.component("cly-colorpicker", countlyVue.components.BaseComponent.extend({
942
mixins: [
1043
_mixins.i18n
1144
],
12-
props: {
13-
value: {type: [String, Object], default: "#FFFFFF"},
14-
resetValue: { type: [String, Object], default: "#FFFFFF"},
15-
placement: {type: String, default: "left"},
16-
testId: {type: String, default: "cly-colorpicker-test-id"}
17-
},
45+
1846
data: function() {
1947
return {
2048
isOpened: false,
2149

2250
previousColor: null
2351
};
2452
},
53+
2554
computed: {
26-
previewStyle: function() {
27-
return {
28-
"background-color": this.value
29-
};
55+
bodyClasses() {
56+
return ['cly-vue-color-picker__body--' + this.placement];
57+
},
58+
59+
dropStyles() {
60+
return { color: this.localValue };
3061
},
31-
localValue: {
32-
get: function() {
33-
var rawValue = this.value || this.resetValue;
3462

35-
return rawValue.replace("#", "");
63+
localValue: {
64+
get() {
65+
return (this.value || this.resetValue);
3666
},
37-
set: function(value) {
38-
var colorValue = "#" + value.replace("#", "");
67+
set(value) {
68+
let finalValue = value;
69+
70+
if (!finalValue.startsWith('#')) {
71+
finalValue = `#${finalValue}`;
72+
}
3973

40-
if (colorValue.match(HEX_COLOR_REGEX)) {
41-
this.setColor({hex: colorValue});
74+
if (finalValue.match(HEX_COLOR_REGEX)) {
75+
this.$emit('input', finalValue);
4276
}
4377
}
44-
},
45-
alignment: function() {
46-
return "picker-body--" + this.placement;
47-
},
78+
}
4879
},
4980

5081
watch: {
51-
isOpened: {
52-
handler(value) {
53-
if (value) {
54-
this.previousColor = JSON.parse(JSON.stringify(this.value));
55-
}
82+
isOpened(value) {
83+
if (value) {
84+
this.previousColor = JSON.parse(JSON.stringify(this.value));
5685
}
5786
}
5887
},
5988

6089
methods: {
61-
setColor: function(color) {
62-
var finalColor = color.hex8 || color.hex;
63-
this.previousColor = JSON.parse(JSON.stringify(this.localValue));
64-
this.$emit("input", finalColor);
65-
},
66-
reset: function() {
67-
this.setColor({hex: this.resetValue});
68-
this.close();
69-
},
70-
open: function() {
90+
onInputContainerClick() {
7191
this.isOpened = true;
7292
},
73-
close: function() {
74-
this.isOpened = false;
75-
},
76-
confirm: function(color) {
77-
this.$emit('change', color);
93+
94+
close() {
7895
this.isOpened = false;
7996
},
8097

8198
onCancelClick() {
8299
this.localValue = this.previousColor;
83100
this.close();
101+
},
102+
103+
onConfirmClick() {
104+
this.$emit('change', this.localValue);
105+
this.close();
106+
},
107+
108+
onPickerInput(color) {
109+
this.localValue = color.hex8 || color.hex;
110+
},
111+
112+
onResetClick() {
113+
this.localValue = this.resetValue;
114+
this.close();
84115
}
85-
},
86-
components: {
87-
picker: window.VueColor.Sketch
88-
},
89-
template: '<div class="cly-vue-colorpicker">\n' +
90-
'<div @click.stop="open" :data-test-id="testId" class="preview">\n' +
91-
'<div>\n' +
92-
'<div class="drop bu-mt-auto" :data-test-id="testId + \'-cly-color-picker-img-wrapper\'" :style="previewStyle"></div>\n' +
93-
'<img src="images/icons/blob.svg"/>\n' +
94-
'</div>\n' +
95-
'<input class="color-input" v-model="localValue" type="text"/>\n' +
96-
'<img height="12px" width="10px" class="bu-pt-2" v-if="!isOpened" src="images/icons/arrow_drop_down_.svg"/>\n' +
97-
'<img height="12px" width="10px" class="bu-pt-2" v-if="isOpened" src="images/icons/arrow_drop_up_.svg"/>\n' +
98-
'</div>\n' +
99-
'<div class="picker-body" v-if="isOpened" v-click-outside="close" :class="alignment">\n' +
100-
'<picker :preset-colors="[]" :value="value" @input="setColor"></picker>\n' +
101-
'<div class="button-controls">\n' +
102-
'<cly-button :data-test-id="testId + \'-reset-button\'" :label="i18n(\'common.reset\')" @click="reset" skin="light"></cly-button>\n' +
103-
'<cly-button :data-test-id="testId + \'-cancel-button\'" :label="i18n(\'common.cancel\')" @click="onCancelClick" skin="light"></cly-button>\n' +
104-
'<cly-button :data-test-id="testId + \'-confirm-button\'" :label="i18n(\'common.confirm\')" @click="confirm(setColor)" skin="green"></cly-button>\n' +
105-
'</div>\n' +
106-
'</div>\n' +
107-
'</div>'
116+
}
108117
}));
109118

110119
Vue.component("cly-dropzone", window.vue2Dropzone);

‎frontend/express/public/javascripts/countly/vue/templates/UI/color-picker.html

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<div class="cly-vue-color-picker">
2+
<div
3+
class="cly-vue-color-picker__input-container"
4+
:data-test-id="testId"
5+
@click.stop="onInputContainerClick"
6+
>
7+
<div
8+
class="cly-vue-color-picker__input-drop-container"
9+
:data-test-id="testId + '-cly-color-picker-img-wrapper'"
10+
:style="dropStyles"
11+
>
12+
<img
13+
class="cly-vue-color-picker__input-drop"
14+
src="images/icons/blob.svg"
15+
/>
16+
</div>
17+
<input
18+
v-model="localValue"
19+
class="cly-vue-color-picker__input"
20+
type="text"
21+
/>
22+
<div
23+
class="cly-vue-color-picker__input-arrow"
24+
:class="{ 'cly-vue-color-picker__input-arrow--open': isOpened }"
25+
>
26+
<i class="cly-is cly-is-arrow-drop-up cly-vue-color-picker__input-arrow-icon-open" />
27+
<i class="cly-is cly-is-arrow-drop-down cly-vue-color-picker__input-arrow-icon-closed" />
28+
</div>
29+
</div>
30+
<div
31+
v-if="isOpened"
32+
v-click-outside="close"
33+
class="cly-vue-color-picker__body"
34+
:class="bodyClasses"
35+
>
36+
<picker
37+
class="cly-vue-color-picker__picker"
38+
:preset-colors="[]"
39+
:value="localValue"
40+
@input="onPickerInput"
41+
/>
42+
<div class="cly-vue-color-picker__buttons-container">
43+
<cly-button
44+
class="cly-vue-color-picker__button"
45+
:data-test-id="testId + '-reset-button'"
46+
:label="i18n('common.reset')"
47+
skin="light"
48+
@click="onResetClick"
49+
/>
50+
<cly-button
51+
class="cly-vue-color-picker__button"
52+
:data-test-id="testId + '-cancel-button'"
53+
:label="i18n('common.cancel')"
54+
skin="light"
55+
@click="onCancelClick"
56+
/>
57+
<cly-button
58+
class="cly-vue-color-picker__button"
59+
:data-test-id="testId + '-confirm-button'"
60+
:label="i18n('common.confirm')"
61+
@click="onConfirmClick"
62+
skin="green"
63+
/>
64+
</div>
65+
</div>
66+
</div>

0 commit comments

Comments
 (0)