Fix tests, colour behaviour, and snackbar button styling.

learningequality · Dec 18, 2018 · 69856a1 · 69856a1
1 parent 3dd6733
commit 69856a1
Show file tree

Hide file tree

Showing 30 changed files with 158 additions and 72 deletions.
diff --git a/kolibri/core/assets/src/core-app/apiSpec.js b/kolibri/core/assets/src/core-app/apiSpec.js
@@ -12,7 +12,6 @@
 // N.B. You cannot use keys that require quotation marks in this object.
 // e.g. 'content-icon' (although this can be used as a value in module).
 
-import vue from 'vue';
 import vuex from 'vuex';
 import seededshuffle from 'seededshuffle';
 import UiAlert from 'keen-ui/src/UiAlert';
@@ -97,6 +96,7 @@ import navComponents from '../utils/navComponents';
 import CatchErrors from '../utils/CatchErrors';
 import KTooltip from '../views/KTooltip';
 import * as colour from '../utils/colour';
+import vue from './kolibriVue';
 import * as client from './client';
 import urls from './urls';
 

diff --git a/kolibri/core/assets/src/core-app/constructor.js b/kolibri/core/assets/src/core-app/constructor.js
@@ -3,14 +3,10 @@
  * @module Facade
  */
 
-import Vue from 'vue';
-import VueMeta from 'vue-meta';
-import VueRouter from 'vue-router';
-import Vuex from 'vuex';
+import Vue from 'kolibri.lib.vue';
 import { i18nSetup } from '../utils/i18n';
 import Mediator from './mediator';
 import apiSpec from './apiSpec';
-import VueAphrodite from './vueAphrodite';
 
 /**
  * Array containing the names of all methods of the Mediator that
@@ -48,12 +44,6 @@ export default class CoreApp {
 
     Vue.prototype.Kolibri = this;
 
-    // Register Vue plugins
-    Vue.use(Vuex);
-    Vue.use(VueRouter);
-    Vue.use(VueMeta);
-    Vue.use(VueAphrodite);
-
     // Shim window.location.origin for IE.
     if (!window.location.origin) {
       window.location.origin = `${window.location.protocol}//${window.location.hostname}${
@@ -66,9 +56,9 @@ export default class CoreApp {
       mediator.setReady();
     };
 
-    if (process.env.NODE !== 'production') {
+    if (process.env.NODE_ENV !== 'production') {
       const colourPicker = require('../utils/colourPicker').default;
-      colourPicker.start();
+      window.colourPicker = colourPicker;
     }
 
     i18nSetup().then(intlReady);

diff --git a/kolibri/core/assets/src/core-app/kolibriVue.js b/kolibri/core/assets/src/core-app/kolibriVue.js
@@ -0,0 +1,13 @@
+import Vue from 'vue';
+import VueMeta from 'vue-meta';
+import VueRouter from 'vue-router';
+import Vuex from 'vuex';
+import VueAphrodite from './vueAphrodite';
+
+// Register Vue plugins
+Vue.use(Vuex);
+Vue.use(VueRouter);
+Vue.use(VueMeta);
+Vue.use(VueAphrodite);
+
+export default Vue;
diff --git a/kolibri/core/assets/src/utils/colour.js b/kolibri/core/assets/src/utils/colour.js
@@ -23,7 +23,7 @@ function _modifyColour(sourceColour, ratio, colourFn, name) {
       parsedRatio = Number(ratio);
     }
     if (parsedRatio !== null) {
-      return colourFn(sourceColour, ratio).toString();
+      return colourFn(sourceColour, parsedRatio).toString();
     }
     throw TypeError(`Unparseable ratio: ${ratio} passed to ${name} function`);
   }
@@ -39,7 +39,7 @@ export function lighten(sourceColour, ratio) {
 }
 
 function _darken(sourceColour, ratio) {
-  return sourceColour.brighter(Math.log(1 - ratio) / darkenLogBase);
+  return sourceColour.darker(Math.log(1 - ratio) / darkenLogBase);
 }
 
 export function darken(sourceColour, ratio) {

diff --git a/kolibri/core/assets/src/utils/colourPicker.js b/kolibri/core/assets/src/utils/colourPicker.js
@@ -3,7 +3,7 @@ import store from 'kolibri.coreVue.vuex.store';
 import ColourPicker from '../views/ColourPicker';
 
 export default {
-  start() {
+  show() {
     const pickerDiv = global.document.createElement('div');
     global.document.body.appendChild(pickerDiv);
     this.rootvue = new Vue(
@@ -16,4 +16,8 @@ export default {
       )
     );
   },
+  hide() {
+    global.document.body.removeChild(this.rootvue.$el);
+    this.rootvue.$destroy();
+  },
 };
diff --git a/kolibri/core/assets/src/views/CoreSnackbar/KeenUiSnackbar.vue b/kolibri/core/assets/src/views/CoreSnackbar/KeenUiSnackbar.vue
@@ -16,17 +16,12 @@
       </div>
 
       <div class="ui-snackbar-action">
-        <UiButton
+        <button
           v-if="action"
           class="ui-snackbar-action-button"
-          :class="$computedClass(actionButtonStyles)"
-
-          type="secondary"
-
-          :color="actionColor"
-
+          :style="{ color: $coreBgLight }"
           @click.stop="onActionClick"
-        >{{ action }}</UiButton>
+        >{{ action }}</button>
       </div>
     </div>
   </transition>
@@ -36,44 +31,25 @@
 
 <script>
 
-  import UiButton from 'keen-ui/src/UiButton';
+  import { mapGetters } from 'vuex';
 
   export default {
     name: 'KeenUiSnackbar',
 
-    components: {
-      UiButton,
-    },
-
     props: {
       message: String,
       action: String,
-      actionColor: {
-        type: String,
-        default: 'accent', // 'primary' or 'accent'
-      },
       transition: {
         type: String,
         default: 'slide', // 'slide' or 'fade'
       },
     },
 
     computed: {
+      ...mapGetters(['$coreBgLight']),
       transitionName() {
         return 'ui-snackbar--transition-' + this.transition;
       },
-      actionButtonStyles() {
-        return {
-          color: this.$coreBgLight,
-          fontWeight: 'bold',
-          ':hover:not(.is-disabled)': {
-            backgroundColor: 'rgba(white, 0.05)',
-          },
-          ":focus body[modality='keyboard']": {
-            backgroundColor: 'rgba(white, 0.1)',
-          },
-        };
-      },
     },
 
     methods: {
@@ -139,10 +115,40 @@
   }
 
   .ui-snackbar-action-button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     min-width: initial;
+    /* stylelint-disable csstree/validator */
+    min-width: rem-calc(80px);
+    height: $ui-button-height;
     min-height: initial;
-    padding: rem-calc(12px); // stylelint-disable-line csstree/validator
+    padding: rem-calc(12px);
+    padding: 0;
+    padding-right: rem-calc(16px);
+    padding-left: rem-calc(16px);
+    /* stylelint-enable */
     margin: 0;
+    overflow: hidden;
+    font-family: $font-stack;
+    font-size: $ui-button-font-size;
+    font-weight: bold;
+    line-height: 1;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    touch-action: manipulation; // IE
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: $ui-default-border-radius;
+    outline: none;
+    &:hover {
+      background-color: lighten($ui-snackbar-background-color, 5%);
+    }
+    &:focus body[modality='keyboard'] {
+      background-color: lighten($ui-snackbar-background-color, 10%);
+    }
   }
 
   .ui-snackbar--transition-slide-enter-active,

diff --git a/kolibri/core/assets/test/content-renderer.spec.js b/kolibri/core/assets/test/content-renderer.spec.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import { mount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import ContentRenderer from '../src/views/ContentRenderer';
 
 jest.mock('kolibri.lib.logging');
@@ -33,6 +34,7 @@ describe('ContentRenderer Component', () => {
       function testAvailableFiles(files, expected) {
         const wrapper = mount(ContentRenderer, {
           propsData: defaultPropsDataFromFiles(files),
+          store,
         });
         expect(wrapper.vm.availableFiles.length).toEqual(expected);
       }
@@ -78,6 +80,7 @@ describe('ContentRenderer Component', () => {
       function testDefaultFile(files, expected) {
         const wrapper = mount(ContentRenderer, {
           propsData: defaultPropsDataFromFiles(files),
+          store,
         });
         expect(wrapper.vm.defaultFile).toEqual(expected);
       }
@@ -95,6 +98,7 @@ describe('ContentRenderer Component', () => {
       function testExtension(files, expected) {
         const wrapper = mount(ContentRenderer, {
           propsData: defaultPropsDataFromFiles(files),
+          store,
         });
         expect(wrapper.vm.extension).toEqual(expected);
       }
@@ -128,6 +132,7 @@ describe('ContentRenderer Component', () => {
             });
             const wrapper = mount(ContentRenderer, {
               propsData: props,
+              store,
             });
             return Vue.nextTick().then(() => {
               expect(wrapper.vm.currentViewClass).toEqual(dummyComponent);
@@ -141,6 +146,7 @@ describe('ContentRenderer Component', () => {
             });
             const wrapper = mount(ContentRenderer, {
               propsData: props,
+              store,
             });
             return Vue.nextTick().then(() => {
               expect(wrapper.vm.initSession).toHaveBeenCalledTimes(1);
@@ -164,6 +170,7 @@ describe('ContentRenderer Component', () => {
             });
             const wrapper = mount(ContentRenderer, {
               propsData: props,
+              store,
             });
             // 'created' hook runs it once. Running it here again for testing.
             // TODO Look into how to do this without calling the method directly
@@ -181,6 +188,7 @@ describe('ContentRenderer Component', () => {
           });
           const wrapper = mount(ContentRenderer, {
             propsData: props,
+            store,
           });
           // 'created' hook runs it once. Running it here again for testing.
           return wrapper.vm.updateRendererComponent().then(component => {

diff --git a/kolibri/core/assets/test/download-button.spec.js b/kolibri/core/assets/test/download-button.spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import DownloadButton from '../src/views/ContentRenderer/DownloadButton';
 
 describe('download-button Component', function() {
@@ -22,6 +23,7 @@ describe('download-button Component', function() {
           propsData: {
             files: samplesFiles,
           },
+          store,
         });
         expect(wrapper.vm.fileOptions.length).toEqual(samplesFiles.length);
       });

diff --git a/kolibri/core/assets/test/progress-bar.spec.js b/kolibri/core/assets/test/progress-bar.spec.js
@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import ProgressBar from '../src/views/ProgressBar';
 
 function testProgressBar(wrapper, expected) {
@@ -13,6 +14,7 @@ describe('ProgressBar Component', () => {
       propsData: {
         progress: -0.0000001,
       },
+      store,
     });
     // The negative still shows up...
     testProgressBar(wrapper, { text: '-0%', width: '0%' });
@@ -23,6 +25,7 @@ describe('ProgressBar Component', () => {
       propsData: {
         progress: 0.1,
       },
+      store,
     });
     testProgressBar(wrapper, { text: '10%', width: '10%' });
   });
@@ -32,6 +35,7 @@ describe('ProgressBar Component', () => {
       propsData: {
         progress: 1.0,
       },
+      store,
     });
     testProgressBar(wrapper, { text: '100%', width: '100%' });
   });
@@ -41,6 +45,7 @@ describe('ProgressBar Component', () => {
       propsData: {
         progress: 1.0000001,
       },
+      store,
     });
     testProgressBar(wrapper, { text: '100%', width: '100%' });
   });

diff --git a/kolibri/core/assets/test/progress-icon.spec.js b/kolibri/core/assets/test/progress-icon.spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import store from 'kolibri.coreVue.vuex.store';
 import UiIcon from 'keen-ui/src/UiIcon';
 import ProgressIcon from '../src/views/ProgressIcon';
 
@@ -18,6 +19,7 @@ describe('ProgressIcon Component', () => {
         // Causes a validation error
         progress: -1.0,
       },
+      store,
     });
     await wrapper.vm.$nextTick();
     const tooltip = wrapper.find({ name: 'KTooltip' });
@@ -31,6 +33,7 @@ describe('ProgressIcon Component', () => {
       propsData: {
         progress: 0.1,
       },
+      store,
     });
     await wrapper.vm.$nextTick();
     testIcon(wrapper, 'In progress');
@@ -41,6 +44,7 @@ describe('ProgressIcon Component', () => {
       propsData: {
         progress: 1.0,
       },
+      store,
     });
     await wrapper.vm.$nextTick();
     testIcon(wrapper, 'Completed');
@@ -51,6 +55,7 @@ describe('ProgressIcon Component', () => {
       propsData: {
         progress: 2.0,
       },
+      store,
     });
     await wrapper.vm.$nextTick();
     testIcon(wrapper, 'Completed');

diff --git a/kolibri/core/assets/test/utils/colour.spec.js b/kolibri/core/assets/test/utils/colour.spec.js
@@ -0,0 +1,20 @@
+import { lighten, darken } from '../../src/utils/colour';
+
+describe('colour utils', () => {
+  describe('lighten function', () => {
+    it('should lighten a colour using a ratio', () => {
+      expect(lighten('#555555', 0.1)).toEqual('rgb(94, 94, 94)');
+    });
+    it('should lighten a colour using a percentage', () => {
+      expect(lighten('#555555', '10%')).toEqual('rgb(94, 94, 94)');
+    });
+  });
+  describe('darken function', () => {
+    it('should darken a colour using a ratio', () => {
+      expect(darken('#555555', 0.1)).toEqual('rgb(77, 77, 77)');
+    });
+    it('should darken a colour using a percentage', () => {
+      expect(darken('#555555', '10%')).toEqual('rgb(77, 77, 77)');
+    });
+  });
+});