Merge pull request #4 from indirectlylit/pageicon

pageicon updates

kolibri/core/assets/src/core-global.styl

@@ -62,9 +62,6 @@ img
 svg:not(:root)
   overflow: hidden
 
-.pageicon
-  fill: $core-text-default
-
 button
   // structure (from https://github.com/yahoo/pure/blob/master/src/buttons/css/buttons-core.css)
   display: inline-block

kolibri/plugins/learn/assets/src/vue/content-card/index.vue

@@ -6,6 +6,7 @@
         <content-icon
           :class='thumb ? "content-icon" : "content-icon-center" '
           v-if="kind"
+          :size="thumb ? 30 : 60"
           :kind="kind"
           :progress="progress">
         </content-icon>

kolibri/plugins/learn/assets/src/vue/content-icon/index.vue

@@ -1,38 +1,80 @@
 <template>
 
-  <img :src="src" :alt="altText">
+  <div>
+    <!-- complete -->
+    <svg v-if="thisIs('complete', 'audio')" src="./content-icons/complete-audio.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
+    <svg v-if="thisIs('complete', 'document')" src="./content-icons/complete-document.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
+    <svg v-if="thisIs('complete', 'exercise')" src="./content-icons/complete-exercise.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
+    <svg v-if="thisIs('complete', 'video')" src="./content-icons/complete-video.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
+
+    <!-- partial -->
+    <svg v-if="thisIs('partial', 'audio')" src="./content-icons/partial-audio.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
+    <svg v-if="thisIs('partial', 'document')" src="./content-icons/partial-document.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
+    <svg v-if="thisIs('partial', 'exercise')" src="./content-icons/partial-exercise.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
+    <svg v-if="thisIs('partial', 'video')" src="./content-icons/partial-video.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
+
+    <!-- unstarted -->
+    <svg v-if="thisIs('unstarted', 'audio')" src="./content-icons/unstarted-audio.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
+    <svg v-if="thisIs('unstarted', 'document')" src="./content-icons/unstarted-document.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
+    <svg v-if="thisIs('unstarted', 'exercise')" src="./content-icons/unstarted-exercise.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
+    <svg v-if="thisIs('unstarted', 'video')" src="./content-icons/unstarted-video.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
+  </div>
 
 </template>
 
 
 <script>
 
+  const PROGRESS_STATES = ['complete', 'partial', 'unstarted'];
+  const KINDS = ['audio', 'document', 'video']; // not 'exercise' for now
+
   module.exports = {
     props: {
+      ispageicon: {
+        type: Boolean,
+        default: false,
+      },
+      size: {
+        type: Number,
+        default: 30,
+      },
       progress: {
         type: String,
         default: 'unstarted',
+        validator(value) {
+          return PROGRESS_STATES.indexOf(value) !== -1;
+        },
       },
       kind: {
         type: String,
         required: true,
+        validator(value) {
+          return KINDS.indexOf(value) !== -1;
+        },
       },
     },
     computed: {
       altText() {
         // TODO - I18N
         return `${this.progress} - ${this.kind}`;
       },
-      src() {
-        // Note: dynamic requires should be used carefully because
-        //  they greedily add items to the webpack bundle.
-        // See https://webpack.github.io/docs/context.html
-        return require(`./content-icons/${this.progress}-${this.kind}.svg`);
+    },
+    methods: {
+      thisIs(progress, kind) {
+        return this.progress === progress && this.kind === kind;
       },
     },
   };
 
 </script>
 
 
-<style lang="stylus" scoped></style>
+<style lang="stylus" scoped>
+
+  @require '~core-theme.styl'
+
+  // replace the correct path
+  .pageicon [fill='#996189']
+    fill: $core-text-default
+
+</style>

kolibri/plugins/learn/assets/src/vue/content-page/index.vue

@@ -14,6 +14,8 @@
       </a>
       <content-icon
         slot='icon'
+        :ispageicon="true"
+        :size="25"
         :kind="kind"
         :progress="progress">
       </content-icon>
@@ -96,7 +98,7 @@
   .content-container
     height: 60vh
     margin-bottom: 1em
-    
+
   #little-arrow
     font-size: 28px
     font-weight: 900

kolibri/plugins/learn/assets/src/vue/learn.styl

@@ -28,3 +28,7 @@ width-auto-adjust()
     $grid-width = grid-width($n-cols)
     @media (min-width: breakpoint($grid-width))
       width: $grid-width
+
+.pageicon
+  fill: $core-text-default
+