Skip to content

Commit 77a0351

Browse files
kanwarujjavalkanwarujjaval
authored
Merge pull request #5631 from Countly/merge-content-builder
merge with content-builder branch
2 parents 9299c76 + 403a693 commit 77a0351

File tree

8 files changed

+130
-163
lines changed

8 files changed

+130
-163
lines changed

‎frontend/express/public/core/date-presets/stylesheets/_main.scss

Lines changed: 0 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,3 @@
1-
2-
.preset-table {
3-
4-
.el-table {
5-
background-color: unset;
6-
7-
&__body {
8-
border-collapse: separate;
9-
border-spacing: 0 8px;
10-
}
11-
12-
&__row {
13-
cursor: pointer;
14-
15-
td {
16-
cursor: pointer;
17-
height: 56px;
18-
border-top: 1px solid #ECECEC !important;
19-
border-bottom: 2px solid #ECECEC !important;
20-
background-color: #FFF !important;
21-
padding: 18px 0px;
22-
23-
&:first-child {
24-
border-left: 1px solid #ECECEC !important;
25-
border-radius: 4px 0 0 4px !important;
26-
}
27-
28-
&:last-child {
29-
border-right: 1px solid #ECECEC !important;
30-
border-radius: 0 4px 4px 0 !important;
31-
}
32-
33-
.cell {
34-
line-height: 20px;
35-
}
36-
37-
&.drag-icon {
38-
.cell {
39-
text-overflow: unset !important;
40-
}
41-
}
42-
}
43-
}
44-
45-
// tr:hover {
46-
// td {
47-
// border-top: 1px solid #0166D6 !important;
48-
// border-bottom: 2px solid #0166D6 !important;
49-
// background-color: #FFF !important;
50-
51-
// &:first-child {
52-
// border-left: 1px solid #0166D6 !important;
53-
// }
54-
55-
// &:last-child {
56-
// border-right: 1px solid #0166D6 !important;
57-
// }
58-
// }
59-
// }
60-
61-
// .cly-vue-more-options {
62-
// position: absolute;
63-
// top: calc(50% - 16px);
64-
// right: calc(50% - 20px);
65-
66-
// .el-select-dropdown {
67-
// //display: block !important;
68-
// }
69-
// }
70-
71-
.sortable-chosen {
72-
.cly-vue-more-options {
73-
display: none !important;
74-
}
75-
}
76-
77-
thead {
78-
tr {
79-
background-color: unset !important;
80-
}
81-
}
82-
83-
th {
84-
background-color: unset !important;
85-
border: none !important;
86-
padding: 0 !important;
87-
color: #81868D !important;
88-
}
89-
90-
&__fixed-right::before {
91-
height: 0 !important;
92-
}
93-
}
94-
}
95-
961
.preset-list {
972

983
display: inline-block;

‎frontend/express/public/core/date-presets/templates/preset-management.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@
88
</template>
99
</cly-header>
1010

11-
<cly-main class="preset-table">
11+
<cly-main>
1212
<cly-datatable-n
13+
:display-mode="'list'"
1314
:rows="rows"
1415
:resizable="true"
1516
:force-loading="isLoading"

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

Lines changed: 40 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* global Vue, CV */
1+
/* global Vue, CV, countlyCommon */
22
(function(countlyVue) {
33
Vue.component("cly-content-layout", countlyVue.components.create({
44
props: {
@@ -55,16 +55,18 @@
5555
}
5656
},
5757
status: {
58-
type: String,
58+
type: Object,
5959
required: false,
60-
default: null
60+
default: function() {
61+
return { show: false, label: 'Status', mode: 'primary' };
62+
},
6163
},
6264
saveButtonLabel: {
6365
type: String,
6466
required: false,
6567
default: CV.i18n('common.save')
6668
},
67-
saveButtonDisabled: {
69+
disableSaveButton: {
6870
type: Boolean,
6971
required: false,
7072
default: false
@@ -91,6 +93,11 @@
9193
required: false,
9294
default: false
9395
},
96+
isToggleDisabled: {
97+
type: Boolean,
98+
required: false,
99+
default: false
100+
},
94101
toggleTooltip: {
95102
type: String,
96103
required: false
@@ -99,7 +106,7 @@
99106
data: function() {
100107
return {
101108
currentTab: this.tabs[0]?.value || null,
102-
localTitle: this.value,
109+
localTitle: countlyCommon.unescapeHtml(this.value),
103110
isEditing: !this.value
104111
};
105112
},
@@ -223,62 +230,38 @@
223230

224231
Vue.component("cly-status-badge", countlyVue.components.create({
225232
props: {
226-
label: {
227-
type: String,
228-
required: false,
229-
default: 'Status'
230-
},
231-
color: {
232-
type: String,
233-
required: false,
234-
default: 'gray'
235-
},
236-
icon: {
237-
type: String,
238-
required: false,
239-
default: 'cly-is cly-is-status'
240-
},
241-
iconSize: {
242-
type: String,
243-
required: false,
244-
default: '8'
245-
},
246-
width: {
233+
mode: {
247234
type: String,
248-
required: false,
249-
default: '55'
250-
},
251-
height: {
252-
type: String,
253-
required: false,
254-
default: '16'
255-
},
256-
radius: {
257-
type: String,
258-
required: false,
259-
default: '8'
235+
required: true,
236+
default: 'primary',
237+
validator: function(value) {
238+
return ['primary', 'secondary'].includes(value);
239+
}
260240
},
261-
fontClass: {
241+
label: {
262242
type: String,
263243
required: false,
264-
default: 'text-small'
244+
default: 'Status'
265245
}
266246
},
267247
data: function() {
268248
return {
269-
colorEnum: {
270-
'gray': {background: '#E2E4E8', icon: '#81868D'},
271-
// add more colors when needed
249+
modeConfig: {
250+
primary: { background: '#E2E4E8', color: '#81868D', icon: 'cly-is cly-is-status' },
251+
secondary: { background: '#EBFAEE', color: '#12AF51', icon: 'cly-is cly-is-status' }
252+
// Add more modes here if needed
272253
}
273254
};
274255
},
275256
computed: {
257+
currentConfig() {
258+
return this.modeConfig[this.mode];
259+
},
276260
badgeStyles() {
277261
return {
278-
width: `${this.width}px`,
279-
height: `${this.height}px`,
280-
borderRadius: `${this.radius}px`,
281-
backgroundColor: this.colorEnum[this.color]?.background || this.color,
262+
height: '16px',
263+
borderRadius: '8px',
264+
backgroundColor: this.currentConfig.background,
282265
display: 'flex',
283266
alignItems: 'center',
284267
justifyContent: 'center',
@@ -287,21 +270,23 @@
287270
},
288271
iconStyles() {
289272
return {
290-
color: this.colorEnum[this.color]?.icon || this.color,
291-
fontSize: `${this.iconSize}px`,
273+
color: this.currentConfig.color,
274+
fontSize: '8px',
292275
marginRight: '4px',
293276
};
294277
},
295278
fontStyles() {
296279
return {
297-
color: this.colorEnum[this.color]?.icon || this.color,
280+
color: this.currentConfig.color,
298281
};
299282
}
300283
},
301-
template: `<div :style="badgeStyles">
302-
<i :class="icon" :style="iconStyles"></i>
303-
<span :class="fontClass" :style="fontStyles">{{ label }}</span>
304-
</div>`,
284+
template: `
285+
<div :style="badgeStyles">
286+
<i :class="currentConfig.icon" :style="iconStyles"></i>
287+
<span class="text-small" :style="fontStyles">{{ label }}</span>
288+
</div>
289+
`,
305290
}));
306291

307292
Vue.component("cly-content-steps", countlyVue.components.create({
@@ -603,4 +588,4 @@
603588
</div>
604589
`
605590
}));
606-
}(window.countlyVue = window.countlyVue || {}));
591+
}(window.countlyVue = window.countlyVue || {}));

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,9 @@
109109
});
110110
}
111111
var filteredTotal = currentArray.length;
112+
if (this.displayMode === 'list') {
113+
this.controlParams.perPage = currentArray.length;
114+
}
112115
if (this.controlParams.perPage < currentArray.length) {
113116
var startIndex = (this.controlParams.page - 1) * this.controlParams.perPage,
114117
endIndex = startIndex + this.controlParams.perPage;
@@ -947,6 +950,13 @@
947950
sortable: {
948951
type: Boolean,
949952
default: false
953+
},
954+
displayMode: {
955+
type: String,
956+
default: null,
957+
validator: function(value) {
958+
return ['list', /** add others if needed */].indexOf(value) !== -1;
959+
}
950960
}
951961
},
952962
data: function() {
@@ -1000,7 +1010,9 @@
10001010
if (!this.forceLoading && this.dataSource && this.externalStatus === 'silent-pending') {
10011011
classes.push("silent-loading");
10021012
}
1003-
1013+
if (this.displayMode) {
1014+
classes.push("display-mode--" + this.displayMode);
1015+
}
10041016
return classes;
10051017
},
10061018
sourceRows: function() {

‎frontend/express/public/javascripts/countly/vue/templates/content/content-header.html

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@
66
<div v-else class="cly-vue-content-builder__layout-header__icon cly-vue-content-builder__layout-header__icon--back" @click="close">
77
<i class="cly-io cly-io-arrow-sm-left color-warm-gray-60"></i>
88
</div>
9-
<div v-if="toggle" class="cly-vue-content-builder__layout-header__toggle">
9+
<div v-if="toggle" class="cly-vue-content-builder__layout-header__toggle bu-ml-4">
1010
<el-switch
11-
v-tooltip="toggleTooltip"
11+
v-tooltip.right="toggleTooltip"
1212
:value="isToggleActive"
13+
:disabled="isToggleDisabled"
1314
@change="$emit('switch-toggle', $event)">
1415
</el-switch>
1516
</div>
@@ -35,13 +36,13 @@ <h4 v-if="!isEditing">{{ localTitle }}</h4>
3536
<cly-dynamic-tabs v-if="tabs" v-model="currentTab" :tabs="tabs" :custom-style="'background-color: ' + backgroundColor" :no-history=true></cly-dynamic-tabs>
3637
</div>
3738
<div class="cly-vue-content-builder__layout-header__actions">
38-
<cly-status-badge v-if="status" :label="status" class="cly-vue-content-builder__layout-header__status"></cly-status-badge>
39+
<cly-status-badge v-if="status.show" :label="status.label" :mode="status.mode" class="cly-vue-content-builder__layout-header__status"></cly-status-badge>
3940
<div v-if="!hideSaveButton" class="cly-vue-content-builder__layout-header__save">
40-
<el-button type="success" :disabled="saveButtonDisabled" size="small" @click="save">{{ saveButtonLabel }}</el-button>
41+
<el-button type="success" :disabled="disableSaveButton" size="small" @click="save">{{ saveButtonLabel }}</el-button>
4142
</div>
4243
<div v-if="topDropdownOptions.length" class="cly-vue-content-builder__layout-header__options">
4344
<cly-more-options size="small" @command="handleCommand($event)">
44-
<el-dropdown-item v-for="(item, idx) in topDropdownOptions" :key="idx" :command="item.value">
45+
<el-dropdown-item v-for="(item, idx) in topDropdownOptions" :disabled="item.disabled" :key="idx" :command="item.value">
4546
<span class="cly-vue-content-builder__layout-header__option-label" @click="$emit('selected-command')">{{ item.label }}</span>
4647
</el-dropdown-item>
4748
</cly-more-options>

‎frontend/express/public/stylesheets/styles/base/_colors.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ $colors: (
2727
"cool-gray-05": #FBFDFE,
2828

2929
"charts-blue": #017AFF,
30+
"charts-light-turquoise": #EBF9F9,
3031
"charts-turquoise": #39C0C8,
3132
"charts-amber": #F5C900,
3233
"charts-orange": #F96300,
@@ -40,8 +41,6 @@ $colors: (
4041
"charts-olive": #AABB5D,
4142
"charts-scarlet": #F62404,
4243
"charts-pink": #FFB6F5,
43-
"charts-teal": #39C0C8,
44-
"charts-light-teal": #EBF9F9,
4544

4645
"yellow-100": #E49700,
4746
"yellow-70": #FFC760,

0 commit comments

Comments
 (0)