Skip to content

Commit 5428cdd

Browse files
kanwarujjavalkanwarujjaval
authored
Merge pull request #5841 from Countly/SER-2144-content-cancel-buttons-for-color-on-the-styles-are-working-weird
[SER-2144] Content cancel buttons for color on the styles are working weird
2 parents 4d93908 + 2527ba2 commit 5428cdd

File tree

7 files changed

+667
-374
lines changed

7 files changed

+667
-374
lines changed

‎frontend/express/public/core/app-management/stylesheets/_main.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585
}
8686
}
8787
&__colorpicker{
88-
.picker-body {overflow: auto;}
88+
.cly-vue-color-picker__picker {overflow: auto;}
8989
}
9090
&__button{
9191
&:active, &:focus, &:hover {background-color: unset !important;border-color: unset !important;}
@@ -193,4 +193,4 @@
193193
width: 177%;
194194
}
195195
}
196-
}
196+
}

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

Lines changed: 146 additions & 174 deletions
Original file line numberDiff line numberDiff line change
@@ -336,207 +336,179 @@
336336
`,
337337
}));
338338

339-
Vue.component("cly-content-step", countlyVue.components.create({
339+
340+
// CONSTANTS
341+
342+
const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_COLOR_PICKER = 'color-picker';
343+
const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_DROPDOWN = 'dropdown';
344+
const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT = 'input';
345+
const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT_NUMBER = 'input-number';
346+
const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER = 'slider';
347+
const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWAPPER = 'swapper';
348+
const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWITCH = 'switch';
349+
const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_TAB = 'tab';
350+
351+
const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE = {
352+
[COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_COLOR_PICKER]: 'cly-colorpicker',
353+
[COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_DROPDOWN]: 'el-select',
354+
[COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT]: 'el-input',
355+
[COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT_NUMBER]: 'el-input-number',
356+
[COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER]: 'el-slider',
357+
[COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWAPPER]: 'cly-option-swapper',
358+
[COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWITCH]: 'el-switch',
359+
[COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_TAB]: 'div'
360+
};
361+
362+
const COUNTLY_CONTENT_SIDEBAR_INPUT_PLACEMENT_HORIZONTAL = 'horizontal';
363+
const COUNTLY_CONTENT_SIDEBAR_INPUT_PLACEMENT_VERTICAL = 'vertical';
364+
365+
Vue.component("cly-content-builder-sidebar-input", countlyVue.components.create({
366+
template: CV.T('/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html'),
367+
340368
props: {
341-
value: {
342-
type: [String, Number, Boolean, Object],
343-
default: null
344-
},
345-
subHeader: {
346-
type: String,
347-
required: false,
348-
default: null
369+
disabled: {
370+
default: false,
371+
type: Boolean
349372
},
373+
350374
label: {
351-
type: String,
352-
required: false,
353-
default: null
354-
},
355-
inputType: {
356-
type: String,
357-
required: false,
358-
default: 'text'
375+
default: null,
376+
type: String
359377
},
378+
360379
options: {
361-
type: Array,
362-
required: false,
363-
default: () => []
380+
default: () => [],
381+
type: Array
364382
},
383+
384+
placement: {
385+
default: COUNTLY_CONTENT_SIDEBAR_INPUT_PLACEMENT_HORIZONTAL,
386+
type: String
387+
},
388+
365389
position: {
366-
type: String,
367-
required: false,
368-
default: 'horizontal'
390+
default: COUNTLY_CONTENT_SIDEBAR_INPUT_PLACEMENT_HORIZONTAL,
391+
type: String
369392
},
370-
width: {
371-
type: String,
372-
required: false,
373-
default: null
393+
394+
subHeader: {
395+
default: null,
396+
type: String
374397
},
375-
inputProps: {
376-
type: Object,
377-
required: false,
378-
default: () => ({})
379-
}
380-
},
381-
data() {
382-
return {
383-
localValue: this.initializeLocalValue(),
384-
};
385-
},
386-
watch: {
398+
399+
suffix: {
400+
default: null,
401+
type: String
402+
},
403+
404+
type: {
405+
default: COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT,
406+
type: String
407+
},
408+
387409
value: {
388-
handler: function(newValue) {
389-
this.localValue = this.initializeLocalValue(newValue);
390-
},
391-
deep: true
410+
default: null,
411+
type: [String, Number, Boolean, Object]
392412
},
393-
localValue: {
394-
handler: function(newValue) {
395-
this.$emit('input', newValue);
396-
},
397-
deep: true
413+
414+
size: {
415+
default: null,
416+
type: String
398417
}
399418
},
400-
methods: {
401-
initializeLocalValue(val = this.value) {
402-
if (this.inputType === 'switch') {
403-
return val === true;
419+
420+
emits: [
421+
'input'
422+
],
423+
424+
computed: {
425+
componentValue: {
426+
get() {
427+
if (this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWITCH) {
428+
return !!this.value;
429+
}
430+
431+
return this.value || null;
432+
},
433+
set(newValue) {
434+
this.$emit('input', newValue);
404435
}
405-
return val !== undefined ? val : null;
406-
},
407-
updateValue: function(newValue) {
408-
this.localValue = newValue;
409-
},
410-
getComponentType: function(type) {
411-
const mapping = {
412-
dropdown: 'el-select',
413-
input: 'el-input',
414-
switch: 'el-switch',
415-
slider: 'el-slider',
416-
'color-picker': 'cly-colorpicker',
417-
'input-number': 'el-input-number',
418-
};
419-
return mapping[type] || 'div';
436+
},
437+
438+
isDropdownInput() {
439+
return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_DROPDOWN;
440+
},
441+
442+
isComponentWithOptions() {
443+
return this.isDropdownInput && Array.isArray(this.options) && this.options.length;
444+
},
445+
446+
isSliderInput() {
447+
return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER;
448+
},
449+
450+
isSuffixVisible() {
451+
return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT && this.suffix;
452+
},
453+
454+
isSwapperInput() {
455+
return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWAPPER;
456+
},
457+
458+
isVerticalInput() {
459+
return this.position === COUNTLY_CONTENT_SIDEBAR_INPUT_PLACEMENT_VERTICAL;
460+
},
461+
462+
mainComponent() {
463+
return COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE[this.type] || 'div';
420464
}
421-
},
422-
created: function() {
423-
},
424-
template: `
425-
<div class="cly-vue-content-builder__layout-step">
426-
<div v-if="subHeader" class="cly-vue-content-builder__layout-step__sub-header color-cool-gray-50 bu-mb-2">{{ subHeader }}</div>
427-
<div class="cly-vue-content-builder__layout-step__element bu-is-flex bu-is-justify-content-space-between bu-is-align-items-center" :class="{'bu-is-flex-direction-column bu-is-align-items-baseline': position !== 'horizontal' }" :style="[position !== 'horizontal' ? {'gap': '8px'}: {}]">
428-
<div v-if="label" class="cly-vue-content-builder__layout-step__label">{{ label }}</div>
429-
<slot name="content-builder-layout-step">
430-
<component
431-
:is="getComponentType(inputType)"
432-
v-bind="inputProps"
433-
:value="localValue"
434-
@input="updateValue"
435-
:format-tooltip="inputProps && inputProps.formatTooltip"
436-
:min="inputProps && inputProps.min"
437-
:max="inputProps && inputProps.max"
438-
class="cly-vue-content-builder__layout-step__component"
439-
:style="[ position !== 'horizontal' ? {\'width\': \'100%\'} : {\'width\': width + \'px\'}]"
440-
>
441-
<template v-if="inputProps && inputProps.append" v-slot:append>{{inputProps.append}}</template>
442-
<el-option
443-
v-if="inputType === 'dropdown'"
444-
v-for="option in options"
445-
:key="option.value"
446-
:label="option.label"
447-
:value="option.value"
448-
class="cly-vue-content-builder__layout-step__option"
449-
></el-option>
450-
</component>
451-
</slot>
452-
</div>
453-
</div>
454-
`,
465+
}
455466
}));
456467

457-
Vue.component("cly-option-swapper", countlyVue.components.BaseComponent.extend({
458-
mixins: [countlyVue.mixins.i18n],
468+
Vue.component("cly-option-swapper", countlyVue.components.create({
469+
template: CV.T('/javascripts/countly/vue/templates/UI/option-swapper.html'),
470+
459471
props: {
460-
value: {
461-
type: [String, Number],
462-
default: null
472+
highlightOnSelect: {
473+
default: true,
474+
type: Boolean
463475
},
464-
items: {
465-
type: Array,
466-
default: function() {
467-
return [];
468-
}
469-
},
470-
activeColorCode: {
471-
type: String,
472-
default: '#0166D6'
476+
477+
options: {
478+
default: () => [],
479+
type: Array
473480
},
474-
width: {
475-
type: String,
476-
default: '100'
481+
482+
value: {
483+
default: null,
484+
type: [String, Number]
477485
}
478486
},
479-
data: function() {
480-
return {
481-
selectedValue: this.items[0].value || 0
482-
};
483-
},
484-
watch: {
485-
value: function(value) {
486-
this.selectedValue = value;
487+
488+
emits: [
489+
'input'
490+
],
491+
492+
mixins: [countlyVue.mixins.i18n],
493+
494+
computed: {
495+
selectedOption: {
496+
get() {
497+
return this.value || this.options[0].value;
498+
},
499+
set(value) {
500+
this.$emit('input', value);
501+
}
487502
}
488503
},
504+
489505
methods: {
490-
numberChange: function(item) {
491-
if (!item.disabled) {
492-
this.selectedValue = item.value;
493-
this.$emit('input', this.selectedValue);
506+
onOptionClick: function(option) {
507+
if (!option.disabled) {
508+
this.selectedOption = option.value;
494509
}
495510
}
496-
},
497-
created: function() {
498-
this.selectedValue = this.value || this.items[0].value || 0;
499-
},
500-
template: `
501-
<div>
502-
<div class="bu-is-flex cly-option-swapper" :style="{'width': width + 'px'}">
503-
<div v-for="(item, index) in items" :key="item.value" class="cly-option-swapper__each-box-wrapper">
504-
<div
505-
:style="[
506-
item.value === selectedValue && !item.disabled ? {'background-color': activeColorCode} : {},
507-
item.disabled ? {'opacity': '0.5', 'cursor': 'not-allowed', 'background-color': '#E2E4E8'} : {}
508-
]"
509-
:class="{
510-
'cly-option-swapper__active': item.value === selectedValue && !item.disabled,
511-
'cly-option-swapper__first': index === 0,
512-
'cly-option-swapper__last': index === (items.length - 1),
513-
'cly-option-swapper__disabled': item.disabled
514-
}"
515-
v-tooltip="item.tooltip"
516-
class="cly-option-swapper__each"
517-
@click="numberChange(item)"
518-
>
519-
<i v-if="item.icon"
520-
:class="item.icon"
521-
:style="[
522-
item.value === selectedValue && !item.disabled ? {'color': '#0166d6'} : {'color': '#000'},
523-
item.disabled ? {'color': '#999'} : {}
524-
]">
525-
</i>
526-
<span v-else
527-
:style="[
528-
item.value === selectedValue && !item.disabled ? {'color': '#0166d6'} : {'color': '#000'},
529-
item.disabled ? {'color': '#999'} : {}
530-
]"
531-
class="text-medium"
532-
>
533-
{{ item.text }}
534-
</span>
535-
</div>
536-
</div>
537-
</div>
538-
</div>
539-
`
511+
}
540512
}));
541513

542514
Vue.component("cly-device-selector", countlyVue.components.BaseComponent.extend({

0 commit comments

Comments
 (0)