1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
<script>
import { validateHexColor, hexToRgb } from '~/lib/utils/color_utils';
import { s__ } from '~/locale';
import { getCssVariable } from '~/lib/utils/css_utils';
import ColorPicker from '~/vue_shared/components/color_picker/color_picker.vue';
import DiffsColorsPreview from './diffs_colors_preview.vue';
export default {
components: {
ColorPicker,
DiffsColorsPreview,
},
inject: ['deletion', 'addition'],
data() {
return {
deletionColor: this.deletion || '',
additionColor: this.addition || '',
defaultDeletionColor: getCssVariable('--default-diff-color-deletion'),
defaultAdditionColor: getCssVariable('--default-diff-color-addition'),
};
},
computed: {
suggestedColors() {
const colors = {
'#d99530': s__('SuggestedColors|Orange'),
'#1f75cb': s__('SuggestedColors|Blue'),
};
if (this.isValidColor(this.deletion)) {
colors[this.deletion] = s__('SuggestedColors|Current removal color');
}
if (this.isValidColor(this.addition)) {
colors[this.addition] = s__('SuggestedColors|Current addition color');
}
if (this.isValidColor(this.defaultDeletionColor)) {
colors[this.defaultDeletionColor] = s__('SuggestedColors|Default removal color');
}
if (this.isValidColor(this.defaultAdditionColor)) {
colors[this.defaultAdditionColor] = s__('SuggestedColors|Default addition color');
}
return colors;
},
previewClasses() {
return {
'diff-custom-addition-color': this.isValidColor(this.additionColor),
'diff-custom-deletion-color': this.isValidColor(this.deletionColor),
};
},
previewStyle() {
let style = {};
if (this.isValidColor(this.deletionColor)) {
const colorRgb = hexToRgb(this.deletionColor).join();
style = {
...style,
'--diff-deletion-color': `rgba(${colorRgb},0.2)`,
};
}
if (this.isValidColor(this.additionColor)) {
const colorRgb = hexToRgb(this.additionColor).join();
style = {
...style,
'--diff-addition-color': `rgba(${colorRgb},0.2)`,
};
}
return style;
},
},
methods: {
isValidColor(color) {
return validateHexColor(color);
},
},
i18n: {
colorDeletionInputLabel: s__('Preferences|Color for removed lines'),
colorAdditionInputLabel: s__('Preferences|Color for added lines'),
previewLabel: s__('Preferences|Preview'),
},
};
</script>
<template>
<div :style="previewStyle" :class="previewClasses">
<diffs-colors-preview />
<color-picker
v-model="deletionColor"
:label="$options.i18n.colorDeletionInputLabel"
:state="isValidColor(deletionColor)"
:suggested-colors="suggestedColors"
/>
<input
id="user_diffs_deletion_color"
v-model="deletionColor"
name="user[diffs_deletion_color]"
type="hidden"
/>
<color-picker
v-model="additionColor"
:label="$options.i18n.colorAdditionInputLabel"
:state="isValidColor(additionColor)"
:suggested-colors="suggestedColors"
/>
<input
id="user_diffs_addition_color"
v-model="additionColor"
name="user[diffs_addition_color]"
type="hidden"
/>
</div>
</template>
|
