better checkbox handling

learningequality · Nov 1, 2024 · e0d300c · e0d300c
1 parent fbcff2d
commit e0d300c
Showing 1 changed file with 18 additions and 8 deletions.
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/AccordionSelectGroup.vue b/packages/kolibri-common/components/SearchFiltersPanel/AccordionSelectGroup.vue
@@ -15,8 +15,12 @@
             :key="'cat-' + key"
             appearance="flat-button"
             class="category-button"
+            :class="$computedClass({ ':hover': { background: selectedHighlightColor } })"
             :style="{
               background: isCategoryActive(category.value) ? selectedHighlightColor : '',
+              ':hover': {
+                background: 'orange!important',
+              },
             }"
             :text="coreString(category.value)"
             :disabled="
@@ -63,8 +67,8 @@
           <KCheckbox
             v-for="lang in languageOptionsList"
             :key="'lang-' + lang.value"
-            :checked="isSelected('languages', lang)"
-            :disabled="lang.disabled"
+            :checked="isChecked('languages', lang)"
+            :disabled="lang.disabled || isEnabledButNotSelected('languages', lang)"
             :label="lang.label"
             @change="handleChange('languages', lang)"
           />
@@ -88,8 +92,8 @@
           <KCheckbox
             v-for="level in contentLevelsList"
             :key="'level-' + level.value"
-            :checked="isSelected('grade_levels', level)"
-            :disabled="level.disabled"
+            :checked="isChecked('grade_levels', level)"
+            :disabled="level.disabled || isEnabledButNotSelected('grade_levels', level)"
             :label="level.label"
             @change="handleChange('grade_levels', level)"
           />
@@ -140,8 +144,8 @@
           <KCheckbox
             v-for="a11y in accessibilityOptionsList"
             :key="'a11y-' + a11y.value"
-            :checked="isSelected('accessibility_labels', a11y)"
-            :disabled="a11y.disabled"
+            :checked="isChecked('accessibility_labels', a11y)"
+            :disabled="a11y.disabled || isEnabledButNotSelected('accessibility_labels', a11y)"
             :label="a11y.label"
             @change="handleChange('accessibility_labels', a11y)"
           />
@@ -213,7 +217,7 @@
     computed: {
       selectedHighlightColor() {
         // get right color
-        return this.$themePalette.blue.v_200;
+        return '#D9E1FD';
       },
       availableRootCategories() {
         if (this.searchableLabels) {
@@ -324,9 +328,15 @@
       },
     },
     methods: {
+      isChecked(inputKey, value) {
+        return this.isSelected(inputKey, value) || this.isEnabledButNotSelected(inputKey, value);
+      },
       isSelected(inputKey, value) {
+        return this.value[inputKey][value.value] === true;
+      },
+      isEnabledButNotSelected(inputKey, value) {
         return (
-          this.value[inputKey][value.value] === true ||
+          !this.isSelected(inputKey, value) &&
           {
             languages: this.enabledLanguageOptions,
             channels: this.enabledChannelOptions,