Merge pull request #4310 from Countly/SER-741

[SER-741] Adding the right-click feature to [push] campaign names

Author: Cookiezaurs

plugins/push/frontend/public/javascripts/countly.models.js

@@ -1519,7 +1519,10 @@
                     drill: dto.filter && dto.filter.drill,
                     expiration: countlyPushNotification.helper.convertMSToDaysAndHours(this.findDefaultLocaleItem(dto.contents).expiration),
                     dashboard: this.mapDashboard(dto),
-                    campaignType: ""
+                    campaignType: "",
+                    isCohorts: typeof countlyCohorts !== 'undefined',
+                    isEe: typeof countlySegmentation !== 'undefined',
+                    isGeo: typeof countlyLocationTargetComponent !== 'undefined',
                 };
             },
             mapDtoToOneTimeModel: function(dto) {

plugins/push/frontend/public/javascripts/countly.views.component.common.js

@@ -22,6 +22,11 @@
             tooltip: {
                 type: String,
                 required: false,
+            },
+            size: {
+                type: String,
+                default: 'medium',
+                required: false
             }
         },
         data: function() {
@@ -38,6 +43,17 @@
             },
             hasDefaultSlot: function() {
                 return Boolean(this.$slots.default);
+            },
+            calculatedHeight() {
+                if (this.size === 'small') {
+                    return '60px';
+                }
+                else if (this.size === 'large') {
+                    return '110px';
+                }
+                else {
+                    return '97px';
+                }
             }
         },
         template: "#large-radio-button-with-description"

plugins/push/frontend/public/javascripts/countly.views.js

@@ -1631,9 +1631,6 @@
                 }
                 }
             },
-            onRowClick: function(row) {
-                window.location.hash = "#/messaging/details/" + row._id;
-            },
             mapNotificationKinds(notificationKinds) {
                 const kindMapping = {
                     plain: "plain",

plugins/push/frontend/public/stylesheets/main.scss

@@ -611,10 +611,6 @@
         }
     }
 
-    &__button {
-        width:100%;
-        height:105px !important;
-    }
 
     &__title {
         display: inline-block;
@@ -628,6 +624,7 @@
         font-size: typography.$text-small-size;
         white-space: pre-line;
         min-width: 200px;
+        line-height: 14px;
     }
 
     &__content-header{

plugins/push/frontend/public/templates/common-components.html

@@ -1,6 +1,6 @@
 <script type="text/x-template" id="large-radio-button-with-description">
     <div v-bind:class="['bu-level-item','cly-vue-push-notification-large-radio-button-with-description__container','bu-pr-1']">
-        <el-radio :label="label"  border class="cly-vue-push-notification-large-radio-button-with-description__button" v-model="innerValue"> 
+        <el-radio :style="{height: calculatedHeight, width: '100%'}" :label="label"  border class="cly-vue-push-notification-large-radio-button-with-description__button" v-model="innerValue"> 
             <div class="cly-vue-push-notification-large-radio-button-with-description__title bu-mt-2">
             <span>{{title}}</span>
             <cly-tooltip-icon

plugins/push/frontend/public/templates/push-notification-drawer.html

@@ -481,15 +481,17 @@
                             {{i18n('push-notification.timezone')}}
                             <cly-tooltip-icon :tooltip="i18n('push-notification.timezone-description')" icon="ion ion-help-circled"> </cly-tooltip-icon>
                         </div>
-                        <div class="bu-level bu-is-flex-wrap-wrap">
+                        <div class="bu-level bu-is-flex-wrap-wrap bu-mt-2">
                             <large-radio-button-with-description
                                 :label="TimezoneEnum.SAME"
+                                size="large"
                                 v-model="pushNotificationUnderEdit.timezone"
                                 :title="i18n('push-notification.deliver-to-all-users-same-time')"
                                 :description="i18n('push-notification.deliver-to-all-users-same-time-description')">
                             </large-radio-button-with-description>
                             <large-radio-button-with-description
                                 :label="TimezoneEnum.DEVICE"
+                                size="large"
                                 v-model="pushNotificationUnderEdit.timezone"
                                 :title="i18n('push-notification.deliver-to-all-users-device-time')"
                                 :description="i18n('push-notification.deliver-to-all-users-device-time-description')">
@@ -674,7 +676,7 @@
                             <validation-provider v-slot="validation" rules="required|integer" class="bu-mr-1">
                                 <el-input v-model="pushNotificationUnderEdit.delivery.repetition.every" :min="0" style="width:120px" :class="{'is-error': validation.errors.length > 0}">
                                     <template slot="suffix">
-                                        <span class="bu-is-flex bu-is-align-items-center cly-vue-push-notification-drawer__input-suffix">
+                                        <span class="bu-mr-3 bu-is-flex bu-is-align-items-center cly-vue-push-notification-drawer__input-suffix">
                                             {{pushNotificationUnderEdit.delivery.repetition.every === '0' || pushNotificationUnderEdit.delivery.repetition.every === '1' ? i18n('push-notification-drawer.repetition-' + pushNotificationUnderEdit.delivery.repetition.bucket) : i18n('push-notification-drawer.repetitions-' + pushNotificationUnderEdit.delivery.repetition.bucket)}}
                                         </span>
                                     </template>
@@ -735,14 +737,14 @@
                         <validation-provider v-slot="validation" rules="required|integer" class="bu-mr-1">
                             <el-input v-model="pushNotificationUnderEdit.expiration.days" :min="0" style="width:100px" :class="{'is-error': validation.errors.length > 0}">
                                 <template slot="suffix">
-                                    <span class="bu-is-flex bu-is-align-items-center cly-vue-push-notification-drawer__input-suffix">{{i18n('push-notification.days')}}</span>
+                                    <span class="bu-mr-3 bu-is-flex bu-is-align-items-center cly-vue-push-notification-drawer__input-suffix">{{i18n('push-notification.days')}}</span>
                                 </template>
                             </el-input>
                         </validation-provider>
                         <validation-provider v-slot="validation" rules="required|integer|min_value:0|max_value:23" class="bu-ml-1">
                             <el-input v-model="pushNotificationUnderEdit.expiration.hours" :min="0" style="width:100px" :class="{'is-error': validation.errors.length > 0}">
                                 <template slot="suffix">
-                                    <span class="bu-is-flex bu-is-align-items-center cly-vue-push-notification-drawer__input-suffix">{{i18n('push-notification.hours')}}</span>
+                                    <span class="bu-mr-3 bu-is-flex bu-is-align-items-center cly-vue-push-notification-drawer__input-suffix">{{i18n('push-notification.hours')}}</span>
                                 </template>
                             </el-input>
                         </validation-provider>

plugins/push/frontend/public/templates/push-notification-tab.html

@@ -41,7 +41,9 @@
                         <el-table-column fixed width="400" type="clickable" sortable="custom" prop="name" :label="i18n('push-notification.table-campaign-name')" class="cly-vue-push-notification-table-column">
                             <template slot-scope="scope">
                                 <div class="bu-is-flex bu-is-flex-direction-column">
-                                    <span class="cly-vue-push-notification-table-column__first-line" @click="onRowClick(scope.row)">{{scope.row.name}}</span>
+                                    <a v-bind:href="'#/messaging/details/' + scope.row._id" class="bu-is-flex bu-is-align-items-center">
+                                        <a class="has-ellipsis">{{(scope.row.name)}}</a>
+                                    </a>
                                     <span class="cly-vue-push-notification-table-column__second-line">
                                         <span> {{getPreviewPlatforms(scope.row.platforms)}} </span>
                                         <span class="blinker cly-vue-push-notification-table-column__separator-blinker"></span>