display topic checkbox messaging

learningequality · Feb 13, 2024 · ba57742 · ba57742
1 parent 7dbfdea
commit ba57742
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 48 deletions.
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue
@@ -1,5 +1,4 @@
 <template>
-
   <div>
     <ul class="content-list">
       <KCheckbox
@@ -9,6 +8,18 @@
         :indeterminate="selectAllIndeterminate"
         @change="$emit('changeselectall', $event)"
       />
+
+      <template>
+        <div 
+          class="warning-div-style" 
+          :style="{ backgroundColor: $themePalette.grey.v_300 }"
+        >
+          <p>
+            {{ chooseSmallerFolderDescription$() }}
+          </p>
+        </div>
+      </template>
+
       <li
         v-for="content in contentList"
         :key="content.id"
@@ -64,6 +75,7 @@
 
 <script>
 
+  import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import LessonContentCard from './LessonContentCard';
 
@@ -73,6 +85,15 @@
       LessonContentCard,
     },
     mixins: [commonCoreStrings],
+    setup() {
+      const {
+        chooseSmallerFolderDescription$,
+      } = enhancedQuizManagementStrings;
+
+      return {
+        chooseSmallerFolderDescription$
+      }
+    },
     props: {
       showSelectAll: {
         type: Boolean,
@@ -176,4 +197,11 @@
     margin-left: $checkbox-offset;
   }
 
+  .warning-div-style{
+    padding:0.4em;
+    margin-bottom:0.5em;
+    border-radius: 0.2em;
+    font-weight: bold;
+  }
+
 </style>
diff --git a/...ugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue b/...ugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue
@@ -2,58 +2,63 @@
 
   <router-link :to="link" class="content-card" :style="{ backgroundColor: $themeTokens.surface }">
 
-    <CardThumbnail
-      class="thumbnail"
-      :thumbnail="thumbnail"
-      :kind="kind"
-      :isMobile="windowIsSmall"
-    />
-
-    <div :class="windowIsSmall ? 'mobile-text' : 'text'" :style="{ color: $themeTokens.text }">
-      <div
-        :class="{ 'title-message-wrapper': Boolean(!windowIsSmall) }"
-        :style="{ color: $themeTokens.text }"
-      >
-        <h3
-          v-if="!windowIsSmall"
-          class="title"
-          dir="auto"
-        >
-          <KLabeledIcon :label="title">
-            <template #icon>
-              <ContentIcon :kind="kind" />
-            </template>
-          </KLabeledIcon>
-        </h3>
-        <h3
-          v-if="windowIsSmall"
-          dir="auto"
+    <div>
+      <CardThumbnail
+        class="thumbnail"
+        :thumbnail="thumbnail"
+        :kind="kind"
+        :isMobile="windowIsSmall"
+      />
+
+      <div :class="windowIsSmall ? 'mobile-text' : 'text'" :style="{ color: $themeTokens.text }">
+        <div
+          :class="{ 'title-message-wrapper': Boolean(!windowIsSmall) }"
+          :style="{ color: $themeTokens.text }"
         >
-          <KLabeledIcon :label="title">
-            <template #icon>
-              <ContentIcon :kind="kind" />
-            </template>
-          </KLabeledIcon>
-        </h3>
-        <div v-if="message" class="message" :style="{ color: $themeTokens.text }">
-          {{ message }}
+          <h3
+            v-if="!windowIsSmall"
+            class="title"
+            dir="auto"
+          >
+            <KLabeledIcon :label="title">
+              <template #icon>
+                <ContentIcon :kind="kind" />
+              </template>
+            </KLabeledIcon>
+          </h3>
+          <h3
+            v-if="windowIsSmall"
+            dir="auto"
+          >
+            <KLabeledIcon :label="title">
+              <template #icon>
+                <ContentIcon :kind="kind" />
+              </template>
+            </KLabeledIcon>
+          </h3>
+          <div v-if="message" class="message" :style="{ color: $themeTokens.text }">
+            {{ message }}
+          </div>
         </div>
-      </div>
-      <TextTruncatorCss
-        v-if="!windowIsSmall"
-        :text="description"
-        :maxLines="3"
-        class="description"
-      />
-      <div>
-        <CoachContentLabel
-          class="coach-content-label"
-          :value="numCoachContents"
-          :isTopic="isTopic"
+        <TextTruncatorCss
+          v-if="!windowIsSmall"
+          :text="description"
+          :maxLines="3"
+          class="description"
         />
+        <div>
+          <CoachContentLabel
+            class="coach-content-label"
+            :value="numCoachContents"
+            :isTopic="isTopic"
+          />
+        </div>
       </div>
     </div>
-
+    <br>
+    <div class="background-color:grey;border-radius:0.5em;height:50px">
+      Folder exceeds 12 exercises
+    </div>
   </router-link>
 
 </template>