From c17584516b37a466ea8a4983cf5a516a59015b65 Mon Sep 17 00:00:00 2001 From: Gabriel Oliveira Date: Tue, 3 Dec 2024 18:19:26 +0000 Subject: [PATCH 1/8] fix: clean code and styles --- .../countly/vue/components/content.js | 205 +++++++++--------- .../content/UI/content-sidebar-input.html | 48 ++++ .../public/stylesheets/vue/clyvue.scss | 158 +++++++++----- 3 files changed, 256 insertions(+), 155 deletions(-) create mode 100644 frontend/express/public/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html diff --git a/frontend/express/public/javascripts/countly/vue/components/content.js b/frontend/express/public/javascripts/countly/vue/components/content.js index fedea228047..af45f801d43 100644 --- a/frontend/express/public/javascripts/countly/vue/components/content.js +++ b/frontend/express/public/javascripts/countly/vue/components/content.js @@ -315,7 +315,7 @@ methods: { }, template: ` -
+
@@ -324,129 +324,130 @@
-
{{ header }}
+
{{ header }}
`, })); + + // CONSTANTS + + const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_COLOR_PICKER = 'color-picker'; + const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_DROPDOWN = 'dropdown'; + const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT = 'input'; + const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT_NUMBER = 'input-number'; + const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER = 'slider'; + const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWITCH = 'switch'; + const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_TAB = 'tab'; + + const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE = { + [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_COLOR_PICKER]: 'cly-colorpicker', + [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_DROPDOWN]: 'el-select', + [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT]: 'el-input', + [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT_NUMBER]: 'el-input-number', + [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER]: 'el-slider', + [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWITCH]: 'el-switch', + [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_TAB]: 'div' + }; + + const COUNTLY_CONTENT_SIDEBAR_INPUT_PLACEMENT_HORIZONTAL = 'horizontal'; + const COUNTLY_CONTENT_SIDEBAR_INPUT_PLACEMENT_VERTICAL = 'vertical'; + Vue.component("cly-content-step", countlyVue.components.create({ + template: CV.T('/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html'), + props: { - value: { - type: [String, Number, Boolean, Object], - default: null - }, - subHeader: { - type: String, - required: false, - default: null + disabled: { + default: false, + type: Boolean }, + label: { - type: String, - required: false, - default: null - }, - inputType: { - type: String, - required: false, - default: 'text' + default: null, + type: String }, + options: { - type: Array, - required: false, - default: () => [] + default: () => [], + type: Array }, + + placement: { + default: COUNTLY_CONTENT_SIDEBAR_INPUT_PLACEMENT_HORIZONTAL, + type: String + }, + position: { - type: String, - required: false, - default: 'horizontal' + default: COUNTLY_CONTENT_SIDEBAR_INPUT_PLACEMENT_HORIZONTAL, + type: String }, - width: { - type: String, - required: false, - default: null + + subHeader: { + default: null, + type: String }, - inputProps: { - type: Object, - required: false, - default: () => ({}) - } - }, - data() { - return { - localValue: this.initializeLocalValue(), - }; - }, - watch: { + + suffix: { + default: null, + type: String + }, + + type: { + default: COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT, + type: String + }, + value: { - handler: function(newValue) { - this.localValue = this.initializeLocalValue(newValue); - }, - deep: true + default: null, + type: [String, Number, Boolean, Object] }, - localValue: { - handler: function(newValue) { - this.$emit('input', newValue); - }, - deep: true + + size: { + default: null, + type: String } }, - methods: { - initializeLocalValue(val = this.value) { - if (this.inputType === 'switch') { - return val === true; + + emits: [ + 'input' + ], + + computed: { + componentValue: { + get() { + if (this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWITCH) { + return !!this.value; + } + + return this.value || null; + }, + set(newValue) { + this.$emit('input', newValue); } - return val !== undefined ? val : null; - }, - updateValue: function(newValue) { - this.localValue = newValue; - }, - getComponentType: function(type) { - const mapping = { - dropdown: 'el-select', - input: 'el-input', - switch: 'el-switch', - slider: 'el-slider', - 'color-picker': 'cly-colorpicker', - 'input-number': 'el-input-number', - }; - return mapping[type] || 'div'; + }, + + isDropdownInput() { + return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_DROPDOWN; + }, + + isSliderInput() { + return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER; + }, + + isSuffixVisible() { + return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT && this.suffix; + }, + + isVerticalInput() { + return this.position === COUNTLY_CONTENT_SIDEBAR_INPUT_PLACEMENT_VERTICAL; + }, + + mainComponent() { + return COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE[this.type] || 'div'; } - }, - created: function() { - }, - template: ` -
-
{{ subHeader }}
-
-
{{ label }}
- - - - - - -
-
- `, + } })); Vue.component("cly-option-swapper", countlyVue.components.BaseComponent.extend({ diff --git a/frontend/express/public/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html b/frontend/express/public/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html new file mode 100644 index 00000000000..745148f1114 --- /dev/null +++ b/frontend/express/public/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html @@ -0,0 +1,48 @@ +
+
+ {{ subHeader }} +
+
+
+ {{ label }} +
+ + + + + + +
+
diff --git a/frontend/express/public/stylesheets/vue/clyvue.scss b/frontend/express/public/stylesheets/vue/clyvue.scss index d0e8a66a78f..0547de1de3b 100644 --- a/frontend/express/public/stylesheets/vue/clyvue.scss +++ b/frontend/express/public/stylesheets/vue/clyvue.scss @@ -4246,65 +4246,16 @@ .cly-vue-content-builder { position: absolute; z-index: 2001; - // z-index: 2006; - // z-index: 9999999; - background-color: white; - // width: 100vw; - width: 100%; top: 0; left: 0; - display: flex; - flex-direction: column; + width: 100%; min-height: 100vh; - &__layout-step { - position: relative; - .picker-body--right { - position: absolute !important; - right: 0 !important; - left: auto !important - } - &__component { - .el-input-group__append { - padding: 0 8px !important; - } - /* .el-slider__bar { - background-color: #0166D6; - } + display: flex; + flex-direction: column; - .el-slider__button { - border-color: #0166D6; - } */ + background-color: white; - .el-slider__runway { - background-color: #E2E4E8; - } - } - &__header { - font-family: Inter; - font-size: 12px; - font-weight: 500; - line-height: 14px; - letter-spacing: 0.5px; - text-align: left; - color: #424243; - margin-bottom: 24px; - } - &__label { - font-family: Inter; - font-size: 13px; - font-weight: 500; - line-height: 16px; - text-align: left; - color: #333C48; - } - &__element { - margin-bottom: 24px; - } - &__sub-header { - font-weight: 500; - } - } &__layout-steps { padding: 0 16px; .el-collapse-item__wrap { @@ -4315,6 +4266,7 @@ } background-color: #FFF } + &__layout-header { display: flex; height: 80px; @@ -4479,6 +4431,106 @@ } } +.cly-vue-content-builder-sidebar-input { + // .cly-vue-content-builder-sidebar-input__component + &__component { + max-width: 50%; + width: auto; + box-shadow: none; + + // .cly-vue-content-builder-sidebar-input__component .el-input__inner + & .el-input__inner { + font-size: 14px; + font-weight: 400; + line-height: 20px; + color: #383A3F; + + background-color: #FFFFFF; + border: 1px solid #E2E4E8; + border-radius: 6px; + padding: 6px 10px; + + // .cly-vue-content-builder-sidebar-input__component .el-input__inner:hover + &:hover { + border-color: #0166D6; + } + } + + // .cly-vue-content-builder-sidebar-input__component .el-input__suffix + & .el-input__suffix { + right: 0; + } + + // .cly-vue-content-builder-sidebar-input__component .el-input__suffix-inner + & .el-input__suffix-inner { + padding: 6px 10px; + padding-left: 0; + color: #81868D; + width: 16px; + } + + // .cly-vue-content-builder-sidebar-input__component.el-input--suffix + &.el-input--suffix { + + // .cly-vue-content-builder-sidebar-input__component.el-input--suffix .el-input__inner + & .el-input__inner { + padding-right: 34px; + } + } + + // .cly-vue-content-builder-sidebar-input__component--slider + &--slider { + width: 100%; + } + } + + // .cly-vue-content-builder-sidebar-input__input-container + &__input-container { + display: flex; + justify-content: flex-start; + align-items: center; + flex-wrap: wrap; + gap: 8px; + + // .cly-vue-content-builder-sidebar-input__input-container--small .cly-vue-content-builder-sidebar-input__component + &--small .cly-vue-content-builder-sidebar-input__component { + max-width: 64px; + } + + // .cly-vue-content-builder-sidebar-input__input-container--large .cly-vue-content-builder-sidebar-input__component + &--large .cly-vue-content-builder-sidebar-input__component { + max-width: 100%; + } + + // .cly-vue-content-builder-sidebar-input__input-container--vertical + &--vertical { + flex-direction: column; + align-items: flex-start; + + // .cly-vue-content-builder-sidebar-input__input-container--vertical .cly-vue-content-builder-sidebar-input__component + & .cly-vue-content-builder-sidebar-input__component { + width: 100%; + max-width: 100%; + } + } + } + + // .cly-vue-content-builder-sidebar-input__label + &__label { + flex-shrink: 0; + margin-right: auto; + } + + // .cly-vue-content-builder-sidebar-input__sub-header + &__sub-header { + color: #81868D; + font-size: 13px; + font-weight: 500; + line-height: 16px; + margin-bottom: 16px; + } +} + .cly-option-swapper { display: flex; justify-content: space-around; From 3696eb83b10bdf36c6a065d676b23260ba1d74f1 Mon Sep 17 00:00:00 2001 From: Gabriel Oliveira Date: Wed, 4 Dec 2024 12:54:44 +0000 Subject: [PATCH 2/8] feat: add option swapper and content sidebar input type --- .../countly/vue/components/content.js | 117 +++++++----------- .../vue/templates/UI/option-swapper.html | 23 ++++ .../content/UI/content-sidebar-input.html | 11 +- .../public/stylesheets/vue/clyvue.scss | 72 +++++++---- 4 files changed, 121 insertions(+), 102 deletions(-) create mode 100644 frontend/express/public/javascripts/countly/vue/templates/UI/option-swapper.html diff --git a/frontend/express/public/javascripts/countly/vue/components/content.js b/frontend/express/public/javascripts/countly/vue/components/content.js index af45f801d43..6f49de323a4 100644 --- a/frontend/express/public/javascripts/countly/vue/components/content.js +++ b/frontend/express/public/javascripts/countly/vue/components/content.js @@ -339,6 +339,7 @@ const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT = 'input'; const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT_NUMBER = 'input-number'; const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER = 'slider'; + const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWAPPER = 'swapper'; const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWITCH = 'switch'; const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_TAB = 'tab'; @@ -348,6 +349,7 @@ [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT]: 'el-input', [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT_NUMBER]: 'el-input-number', [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER]: 'el-slider', + [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWAPPER]: 'cly-option-swapper', [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWITCH]: 'el-switch', [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_TAB]: 'div' }; @@ -432,6 +434,10 @@ return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_DROPDOWN; }, + isComponentWithOptions() { + return this.isDropdownInput && Array.isArray(this.options) && this.options.length; + }, + isSliderInput() { return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER; }, @@ -440,6 +446,10 @@ return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT && this.suffix; }, + isSwapperInput() { + return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWAPPER; + }, + isVerticalInput() { return this.position === COUNTLY_CONTENT_SIDEBAR_INPUT_PLACEMENT_VERTICAL; }, @@ -450,89 +460,50 @@ } })); - Vue.component("cly-option-swapper", countlyVue.components.BaseComponent.extend({ - mixins: [countlyVue.mixins.i18n], + Vue.component("cly-option-swapper", countlyVue.components.create({ + template: CV.T('/javascripts/countly/vue/templates/UI/option-swapper.html'), + props: { - value: { - type: [String, Number], - default: null - }, - items: { - type: Array, - default: function() { - return []; - } + highlightOnSelect: { + default: true, + type: Boolean }, - activeColorCode: { - type: String, - default: '#0166D6' + + options: { + default: () => [], + type: Array }, - width: { - type: String, - default: '100' + + value: { + default: null, + type: [String, Number] } }, - data: function() { - return { - selectedValue: this.items[0].value || 0 - }; - }, - watch: { - value: function(value) { - this.selectedValue = value; + + emits: [ + 'input' + ], + + mixins: [countlyVue.mixins.i18n], + + computed: { + selectedOption: { + get() { + return this.value || this.options[0].value; + }, + set(value) { + this.$emit('input', value); + } } }, + methods: { - numberChange: function(item) { - if (!item.disabled) { - this.selectedValue = item.value; - this.$emit('input', this.selectedValue); + onOptionClick: function(option) { + if (!option.disabled) { + this.selectedOption = option.value; } } - }, - created: function() { - this.selectedValue = this.value || this.items[0].value || 0; - }, - template: ` -
-
-
-
- - - - {{ item.text }} - -
-
-
-
- ` + } })); Vue.component("cly-device-selector", countlyVue.components.BaseComponent.extend({ diff --git a/frontend/express/public/javascripts/countly/vue/templates/UI/option-swapper.html b/frontend/express/public/javascripts/countly/vue/templates/UI/option-swapper.html new file mode 100644 index 00000000000..e8824430245 --- /dev/null +++ b/frontend/express/public/javascripts/countly/vue/templates/UI/option-swapper.html @@ -0,0 +1,23 @@ + +
+
+ + {{ option.text }} +
+
diff --git a/frontend/express/public/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html b/frontend/express/public/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html index 745148f1114..062c9a44c42 100644 --- a/frontend/express/public/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html +++ b/frontend/express/public/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html @@ -12,12 +12,12 @@ [`cly-vue-content-builder-sidebar-input__input-container--${size}`]: !!size }" > -
{{ label }} -
+ -