Merge pull request #236 from nucleogenesis/232-learning-activity-icons

232 learning activity icons
learningequality · Jun 14, 2021 · e80c59b · e80c59b
2 parents 50ca135 + 428d675
commit e80c59b
Show file tree

Hide file tree

Showing 33 changed files with 358 additions and 10 deletions.
diff --git a/custom-icons/all-solid.svg b/custom-icons/all-solid.svg
diff --git a/custom-icons/create-shaded.svg b/custom-icons/create-shaded.svg
diff --git a/custom-icons/create-solid.svg b/custom-icons/create-solid.svg
diff --git a/custom-icons/interact-shaded.svg b/custom-icons/interact-shaded.svg
diff --git a/custom-icons/interact-solid.svg b/custom-icons/interact-solid.svg
diff --git a/custom-icons/listen-shaded.svg b/custom-icons/listen-shaded.svg
diff --git a/custom-icons/listen-solid.svg b/custom-icons/listen-solid.svg
diff --git a/custom-icons/practice-shaded.svg b/custom-icons/practice-shaded.svg
diff --git a/custom-icons/practice-solid.svg b/custom-icons/practice-solid.svg
diff --git a/custom-icons/read-shaded.svg b/custom-icons/read-shaded.svg
diff --git a/custom-icons/read-solid.svg b/custom-icons/read-solid.svg
diff --git a/custom-icons/reflect-shaded.svg b/custom-icons/reflect-shaded.svg
diff --git a/custom-icons/reflect-solid.svg b/custom-icons/reflect-solid.svg
diff --git a/custom-icons/watch-shaded.svg b/custom-icons/watch-shaded.svg
diff --git a/custom-icons/watch-solid.svg b/custom-icons/watch-solid.svg
diff --git a/docs/pages/icons/IconTable.vue b/docs/pages/icons/IconTable.vue
@@ -25,6 +25,17 @@
       />
     </div>
 
+    <h3 v-if="displayedWithColor.length">
+      Learning activities
+    </h3>
+    <div class="icon-table">
+      <IconBlock
+        v-for="(aliasList, index) in displayedLearningActivity"
+        :key="index"
+        :aliasList="aliasList"
+        class="icon-block"
+      />
+    </div>
   </div>
 
 </template>
@@ -60,16 +71,14 @@
    * Return an object where the keys are unique icon identifiers. These identifiers
    * map to an array of alphabetically sorted aliases associated with that icon.
    *
-   * Parameter `withDefaultColor` selects icons with or without a defined default color.
+   * Parameter `filterFn` must take 1 alias and return true or false. When false, the alias
+   * will not be included in the output.
    */
-  function getIconGroups(withDefaultColor) {
+  function getIconGroups(filterFn) {
     const iconGroups = {};
-    Object.keys(KolibriIcons).forEach(alias => {
-      // exit if not applicable
-      const hasDefaultColor = Boolean(KolibriIcons[alias].defaultColor);
-      if ((withDefaultColor && !hasDefaultColor) || (!withDefaultColor && hasDefaultColor)) {
-        return;
-      }
+    const filteredIcons = Object.keys(KolibriIcons).filter(filterFn);
+
+    filteredIcons.forEach(alias => {
       // track a list of aliases
       const iconIdentifier = KolibriIcons[alias].icon.name;
       if (iconGroups[iconIdentifier]) {
@@ -96,17 +105,23 @@
         return termList(this.filterText);
       },
       general() {
-        return sortedIconAliases(getIconGroups(false));
+        return sortedIconAliases(getIconGroups(this.blackIconFilter));
       },
       displayedGeneral() {
         return this.general.filter(this.termFilter);
       },
       withColor() {
-        return sortedIconAliases(getIconGroups(true));
+        return sortedIconAliases(getIconGroups(this.iconWithDefaultColorFilter));
       },
       displayedWithColor() {
         return this.withColor.filter(this.termFilter);
       },
+      withLearningActivity() {
+        return sortedIconAliases(getIconGroups(this.learningActivityIconFilter));
+      },
+      displayedLearningActivity() {
+        return this.withLearningActivity.filter(this.termFilter);
+      },
     },
     methods: {
       termFilter(aliasList) {
@@ -117,6 +132,15 @@
         }
         return false;
       },
+      blackIconFilter(alias) {
+        return !KolibriIcons[alias].defaultColor && !KolibriIcons[alias].learningActivity;
+      },
+      iconWithDefaultColorFilter(alias) {
+        return Boolean(KolibriIcons[alias].defaultColor);
+      },
+      learningActivityIconFilter(alias) {
+        return KolibriIcons[alias].learningActivity;
+      },
     },
   };