From 6d21c8c9ebf4341f98d2c69b05b75b6a268a129e Mon Sep 17 00:00:00 2001
From: Anwarul Islam <anwaarulislaam@gmail.com>
Date: Wed, 19 Feb 2025 13:06:15 +0600
Subject: [PATCH] feat: visual enhancement for inactive fields (#4760)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>
---
 .../hoppscotch-common/src/components/http/BodyParameters.vue   | 3 +++
 packages/hoppscotch-common/src/components/http/KeyValue.vue    | 3 +++
 .../hoppscotch-common/src/components/http/RequestVariables.vue | 2 ++
 .../hoppscotch-common/src/components/http/URLEncodedParams.vue | 2 ++
 4 files changed, 10 insertions(+)

diff --git a/packages/hoppscotch-common/src/components/http/BodyParameters.vue b/packages/hoppscotch-common/src/components/http/BodyParameters.vue
index 255f2c62..b9c47492 100644
--- a/packages/hoppscotch-common/src/components/http/BodyParameters.vue
+++ b/packages/hoppscotch-common/src/components/http/BodyParameters.vue
@@ -94,6 +94,7 @@
           </span>
           <SmartEnvInput
             v-model="entry.key"
+            :class="{ 'opacity-50': !entry.active }"
             :placeholder="`${t('count.parameter', { count: index + 1 })}`"
             :auto-complete-env="true"
             :envs="envs"
@@ -119,6 +120,7 @@
           <span v-else class="flex flex-1">
             <SmartEnvInput
               v-model="entry.value"
+              :class="{ 'opacity-50': !entry.active }"
               :placeholder="`${t('count.value', { count: index + 1 })}`"
               :auto-complete-env="true"
               :envs="envs"
@@ -142,6 +144,7 @@
               :auto-complete-env="true"
               :auto-complete-source="autoCompleteContenTypes"
               :envs="envs"
+              :class="{ 'opacity-50': !entry.active }"
               @change="
                 updateBodyParam(index, {
                   key: entry.key,
diff --git a/packages/hoppscotch-common/src/components/http/KeyValue.vue b/packages/hoppscotch-common/src/components/http/KeyValue.vue
index da2f2364..f2200648 100644
--- a/packages/hoppscotch-common/src/components/http/KeyValue.vue
+++ b/packages/hoppscotch-common/src/components/http/KeyValue.vue
@@ -19,6 +19,7 @@
       />
     </span>
     <SmartEnvInput
+      :class="{ 'opacity-50': !entityActive }"
       :model-value="name"
       :placeholder="t('count.key')"
       :auto-complete-source="keyAutoCompleteSource"
@@ -37,6 +38,7 @@
       "
     />
     <SmartEnvInput
+      :class="{ 'opacity-50': !entityActive }"
       :model-value="value"
       :placeholder="t('count.value')"
       :auto-complete-env="true"
@@ -59,6 +61,7 @@
       :placeholder="t('count.description')"
       class="flex flex-1 px-4 bg-transparent"
       type="text"
+      :class="{ 'opacity-50': !entityActive }"
       @update:value="emit('update:description', $event.target.value)"
       @input="
         updateEntity(index, {
diff --git a/packages/hoppscotch-common/src/components/http/RequestVariables.vue b/packages/hoppscotch-common/src/components/http/RequestVariables.vue
index 9d8dab35..ad1c1354 100644
--- a/packages/hoppscotch-common/src/components/http/RequestVariables.vue
+++ b/packages/hoppscotch-common/src/components/http/RequestVariables.vue
@@ -84,6 +84,7 @@
             <SmartEnvInput
               v-model="variable.key"
               :placeholder="`${t('count.variable', { count: index + 1 })}`"
+              :class="{ 'opacity-50': !variable.active }"
               @change="
                 updateVariable(index, {
                   id: variable.id,
@@ -96,6 +97,7 @@
             <SmartEnvInput
               v-model="variable.value"
               :placeholder="`${t('count.value', { count: index + 1 })}`"
+              :class="{ 'opacity-50': !variable.active }"
               @change="
                 updateVariable(index, {
                   id: variable.id,
diff --git a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue b/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
index a953e94c..92278993 100644
--- a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
+++ b/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
@@ -86,6 +86,7 @@
             </span>
             <SmartEnvInput
               v-model="param.key"
+              :class="{ 'opacity-50': !param.active }"
               :placeholder="`${t('count.parameter', { count: index + 1 })}`"
               :auto-complete-env="true"
               :envs="envs"
@@ -100,6 +101,7 @@
             />
             <SmartEnvInput
               v-model="param.value"
+              :class="{ 'opacity-50': !param.active }"
               :placeholder="`${t('count.value', { count: index + 1 })}`"
               :auto-complete-env="true"
               :envs="envs"