Merge pull request #5917 from Countly/SER-2143-content-position-options-should-be-active-according-to-the-devices

[Feat] Add disabled state to option swapper

Author: pnrgenc

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

@@ -527,6 +527,11 @@
         template: CV.T('/javascripts/countly/vue/templates/UI/option-swapper.html'),
 
         props: {
+            disabled: {
+                default: false,
+                type: Boolean
+            },
+
             highlightOnSelect: {
                 default: true,
                 type: Boolean

frontend/express/public/javascripts/countly/vue/templates/UI/option-swapper.html

@@ -1,13 +1,17 @@
-<!-- :style="{'width': width + 'px'}" -->
-<div class="cly-option-swapper">
+<div 
+  class="cly-option-swapper"
+  :class="{
+    'cly-option-swapper--disabled': disabled
+  }"
+>
   <div
     v-for="(option, index) in options"
     :key="`cly-option-swapper-option-${index}`"
     v-tooltip="option.tooltip"
     class="cly-option-swapper__option"
     :class="{
       'cly-option-swapper__option--active': option.value === selectedOption,
-      'cly-option-swapper__option--disabled': option.disabled,
+      'cly-option-swapper__option--disabled': option.disabled || disabled,
       'cly-option-swapper__option--first': index === 0,
       'cly-option-swapper__option--last': index === (options.length - 1),
       'cly-option-swapper__option--no-highlight': !highlightOnSelect

frontend/express/public/stylesheets/vue/clyvue.scss

@@ -4829,6 +4829,12 @@
             background: #F6F6F6;
         }
     }
+
+    // .cly-option-swapper--disabled
+    &--disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
 }
 
 .cly-list-drawer {