Hide disabled addons

ltouroumov · Sep 21, 2024 · 8759182 · 8759182
1 parent 7074bc9
commit 8759182
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 12 deletions.
diff --git a/components/viewer/ViewProjectObj.vue b/components/viewer/ViewProjectObj.vue
@@ -12,6 +12,7 @@
         disabled: !isEnabled,
         notSelectable: obj.isNotSelectable || row.isInfoRow,
         canToggle: canToggle,
+        hideDisabledAddons: $props.hideDisabledAddons,
       }"
       @click="toggle"
     >
@@ -90,6 +91,7 @@ const $props = defineProps<{
   width?: string;
   forceWidth?: string;
   template?: string;
+  hideDisabledAddons?: boolean;
 }>();
 
 const objClass = computed(() => {
@@ -192,6 +194,12 @@ const decrement = () => {
   display: flex;
   flex-direction: column;
 
+  &.hideDisabledAddons {
+    .addon.disabled {
+      display: none;
+    }
+  }
+
   .project-obj-content {
     overflow: auto;
 

diff --git a/components/viewer/modal/BackpackModal.vue b/components/viewer/modal/BackpackModal.vue
@@ -9,17 +9,31 @@
           <div class="pack-scores">
             <ViewScoreStatus vertical />
           </div>
-          <div class="form-check form-switch pack-selection-controls">
-            <input
-              id="packRowDisabledSwitch"
-              v-model="lockBackpackObjects"
-              class="form-check-input"
-              type="checkbox"
-              role="switch"
-            />
-            <label class="form-check-label" for="packRowDisabledSwitch">
-              Lock Objects in the Backpack
-            </label>
+          <div class="d-flex flex-column pack-selection-controls">
+            <div class="form-check form-switch">
+              <input
+                id="packRowDisabledSwitch"
+                v-model="lockBackpackObjects"
+                class="form-check-input"
+                type="checkbox"
+                role="switch"
+              />
+              <label class="form-check-label" for="packRowDisabledSwitch">
+                Lock Objects in the Backpack
+              </label>
+            </div>
+            <div class="form-check form-switch">
+              <input
+                id="hideDisabledAddons"
+                v-model="hideDisabledAddons"
+                class="form-check-input"
+                type="checkbox"
+                role="switch"
+              />
+              <label class="form-check-label" for="hideDisabledAddons">
+                Hide Disabled Addons
+              </label>
+            </div>
           </div>
         </div>
         <div
@@ -39,6 +53,7 @@
                 :row="row"
                 :width="packRow.objectWidth"
                 :view-object="objectMode"
+                :hide-disabled-addons="hideDisabledAddons"
               />
             </div>
           </div>
@@ -93,7 +108,7 @@ const packRows = computed(() => {
     backpack.value,
   );
 });
-
+const hideDisabledAddons = ref(true);
 const lockBackpackObjects = ref(true);
 const objectMode = computed(() => {
   if (lockBackpackObjects.value) return ViewContext.BackpackDisabled;