Merge pull request #274 from ExtensionEngine/release/3.1

3.1 Silk 👔🔝

client/App.vue

@@ -2,7 +2,7 @@
   <v-app id="app">
     <navbar v-if="user" :user="user"/>
     <v-content>
-      <router-view class="view"/>
+      <router-view class="view grey lighten-3"/>
     </v-content>
     <confirmation-modal/>
   </v-app>
@@ -40,12 +40,11 @@ html {
 
 #app {
   color: rgba(0,0,0,0.87);
-  font-family: Roboto, Helvetica, Arial, sans-serif;
+  font-family: Poppins, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   overflow: hidden;
-  background-color: #e0e0e0 !important;
 }
 
 .v-content .view {

client/api/resource.js

@@ -18,7 +18,7 @@ export default class Resource {
   }
 
   url(path = '') {
-    return join(this.getBaseUrl(), path);
+    return join(this.getBaseUrl(), path.toString());
   }
 
   /**
@@ -106,7 +106,7 @@ export default class Resource {
       // if server id is not provided but exist inside resource cache
       if (!model.id && this.getKey(model._cid)) this.setKey(model);
       const action = model.id ? 'patch' : 'post';
-      const url = model.id ? this.url(model.id) : this.url('');
+      const url = model.id ? this.url(model.id) : this.url();
       return axios[action](url, this.clean(model))
         .then(response => {
           if (!model.id) this.map(model._cid, response.data.data.id);

client/assets/stylesheets/main.scss

@@ -2,8 +2,8 @@
 /* stylelint-disable function-comma-newline-after */
 @import '~sass-web-fonts/web-fonts';
 $web-font-path: web-fonts-url(
-  ('Catamaran': (300, 400, 500, 600, 700)),
-  ('Roboto': (300, 400, 500, 700))
+  ('Roboto': (300, 400, 500, 700)),
+  ('Poppins': (300, 400, 500, 700))
 );
 /* stylelint-enable */
 

client/components/catalog/Card/index.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="col-lg-4">
-    <div @click="navigateTo" class="course-card">
+    <div @click="navigateTo" class="repo-card white elevation-2">
       <div class="body">
-        <div class="title">
-          <acronym :course="course"></acronym>
+        <div class="repo-title">
+          <acronym :course="course"/>
           {{ name }}
         </div>
         <div class="description">{{ description }}</div>
       </div>
       <div class="row">
         <span class="col-xs-6">
-          <stat :name="objectiveLabel" :value="objectives"></stat>
+          <stat :name="objectiveLabel" :value="objectives"/>
         </span>
         <span class="col-xs-6">
-          <stat :value="assessments" name="Knowledge checks"></stat>
+          <stat :value="assessments" name="Knowledge checks"/>
         </span>
       </div>
     </div>
@@ -68,20 +68,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.course-card {
+.repo-card {
   min-height: 300px;
   margin-top: 40px;
   padding: 30px 30px 20px;
   color: #555;
-  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
   border-radius: 3px;
-  background-color: #fff;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.54);
   transition: box-shadow 0.2s ease;
   cursor: pointer;
 
   &:hover {
-    box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 8px 8px rgba(0,0,0,0.18);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 8px 8px rgba(0,0,0,0.18) !important;
   }
 
   .body {
@@ -95,7 +92,7 @@ export default {
   }
 }
 
-.title {
+.repo-title {
   height: 100px;
   margin: 20px 0 10px;
   font-size: 20px;

client/components/catalog/Container.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="catalog" infinite-wrapper>
+  <div class="catalog grey lighten-2" infinite-wrapper>
     <div class="row">
       <div class="col-md-6 col-md-offset-3 col-sm-10 col-sm-offset-1">
         <search @change="search"></search>
@@ -8,15 +8,19 @@
         <create-course class="pull-right"/>
       </div>
     </div>
-    <div v-show="searching" class="search-spinner"><circular-progress/></div>
+    <div v-show="searching" class="search-spinner">
+      <v-progress-circular color="primary" indeterminate/>
+    </div>
     <div v-show="!searching" class="row course-list">
       <course-card
         v-for="course in orderedCourses"
         :key="course._cid"
         :course="course">
       </course-card>
       <infinite-loading ref="infiniteLoading" @infinite="loadMore">
-        <div slot="spinner" class="spinner"><circular-progress/></div>
+        <div slot="spinner" class="spinner">
+          <v-progress-circular color="primary" indeterminate/>
+        </div>
         <div slot="no-results" class="no-results">
           {{ orderedCourses.length ? '' : 'No courses found.' }}
         </div>
@@ -27,7 +31,6 @@
 </template>
 
 <script>
-import CircularProgress from 'components/common/CircularProgress';
 import CourseCard from './Card';
 import CreateCourse from './Create';
 import get from 'lodash/get';
@@ -81,7 +84,6 @@ export default {
     this.search();
   },
   components: {
-    CircularProgress,
     CourseCard,
     CreateCourse,
     InfiniteLoading,

client/components/catalog/Create.vue

@@ -44,7 +44,7 @@
         <v-card-actions>
           <v-spacer/>
           <v-btn :disabled="showLoader" @click="hide">Cancel</v-btn>
-          <v-btn :loading="showLoader" color="success" outline type="submit">
+          <v-btn :loading="showLoader" color="primary" outline type="submit">
             Create
           </v-btn>
         </v-card-actions>

client/components/catalog/Search.vue

@@ -81,7 +81,7 @@ export default {
   }
 
   .btn {
-    padding: 8px 12px 4px;
+    padding: 8px 12px 5px;
     color: #656565;
     font-size: 22px;
     background-color: white;

client/components/common/Acronym.vue

@@ -1,6 +1,6 @@
 <template>
   <div :style="{ color }" class="acronym">
-    <span>{{ acronym }}</span>
+    {{ acronym }}
   </div>
 </template>
 
@@ -31,13 +31,9 @@ export default {
   margin-right: 8px;
   font-size: 18px;
   font-weight: 400;
+  line-height: 45px;
   text-align: center;
   border-radius: 30px;
-  background-color: #eee;
-
-  span {
-    display: inline-block;
-    padding-top: 13px;
-  }
+  background: #f1f1f1;
 }
 </style>

client/components/common/Navbar.vue

@@ -92,7 +92,6 @@ $font-color: #333;
   color: $font-color;
   font-size: 16px;
   line-height: $container-height;
-  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
   text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;

client/components/common/ProgressDialog.vue

@@ -7,10 +7,7 @@
       <v-card color="blue-grey darken-3" dark>
         <v-card-text>
           Please wait...
-          <v-progress-linear
-            indeterminate
-            color="white"
-            class="mb-0"/>
+          <v-progress-linear :value="status" color="white" class="mb-0"/>
         </v-card-text>
       </v-card>
     </v-dialog>
@@ -20,7 +17,8 @@
 <script>
 export default {
   props: {
-    show: { type: Boolean, default: false }
+    show: { type: Boolean, default: false },
+    status: { type: Number, default: 0 }
   }
 };
 </script>

client/components/common/Select.vue

@@ -86,7 +86,6 @@ export default {
   padding-right: 24px;
   color: #555;
   font-size: 14px;
-  font-family: 'Catamaran', Helvetica, Arial, sans-serif;
 
   &:focus {
     box-shadow: inset 0 -2px 0 #337ab7;
@@ -130,7 +129,7 @@ export default {
     padding-left: 12px;
     border-radius: 26px;
     color: #4a4a4a;
-    line-height: 26px;
+    line-height: 24px;
     background: #e0e0e0;
     cursor: default;
 
@@ -157,7 +156,7 @@ export default {
     vertical-align: middle;
     width: 20px;
     margin: 0 4px;
-    line-height: 26px;
+    line-height: 24px;
     overflow: hidden;
     cursor: pointer;
 

client/components/common/mixins/publish.vue

@@ -6,12 +6,12 @@ import Promise from 'bluebird';
 const appChannel = EventBus.channel('app');
 const prefix = message => `Are you sure you want to publish ${message}`;
 
+const initialStatus = () => ({ progress: 0, message: '' });
+
 export default {
-  data() {
-    return {
-      isPublishing: false,
-      publishStatus: ''
-    };
+  data: () => ({ publishStatus: initialStatus() }),
+  computed: {
+    isPublishing: ({ publishStatus }) => publishStatus.progress > 0
   },
   methods: {
     confirmPublishing(activities = [this.activity]) {
@@ -23,14 +23,13 @@ export default {
       });
     },
     publish(activities) {
-      this.isPublishing = true;
-      return Promise.each(activities, activity => {
-        this.publishStatus = `Publishing ${activity.data.name}`;
+      return Promise.each(activities, (activity, i) => {
+        const progress = (i + 1) / activities.length;
+        const message = `Publishing ${activity.data.name}`;
+        this.publishStatus = { progress, message };
         return this.publishActivity(activity);
-      }).then(() => {
-        this.isPublishing = false;
-        this.publishStatus = '';
-      });
+      })
+      .finally(() => (this.publishStatus = initialStatus()));
     },
     getPublishMessage(activityCount) {
       const name = get(this, 'activity.data.name', 'activity');

client/components/common/tce-core/AddElement/index.vue

@@ -4,7 +4,7 @@
       v-if="large"
       @click.stop="isVisible = true"
       outline
-      color="blue-grey darken-2"
+      color="primary"
       class="mt-3 mb-4">
       <v-icon class="pr-2">{{ icon }}</v-icon>{{ label }}
     </v-btn>
@@ -13,7 +13,7 @@
       @click.stop="isVisible = true"
       icon
       flat
-      color="blue-grey darken-2">
+      color="primary">
       <v-icon>{{ icon }}</v-icon>
     </v-btn>
     <v-bottom-sheet v-model="isVisible" max-width="1240" inset lazy>
@@ -186,8 +186,8 @@ $disabled-color: #a1a1a1;
 }
 
 .group-heading {
-  margin: 0 26px 5px;
-  padding-top: 10px;
+  margin: 0 40px 5px;
+  padding-top: 20px;
   color: #555;
   font-size: 16px;
   font-weight: 500;
@@ -208,7 +208,7 @@ $disabled-color: #a1a1a1;
 .group-elements {
   display: flex;
   width: 100%;
-  padding: 0 20px;
+  padding: 0 30px;
   flex-wrap: wrap;
 }
 

client/components/common/tce-core/DefaultToolbar.vue

@@ -15,7 +15,5 @@ export default {
   width: 100%;
   height: 50px;
   padding: 13px 45px 0;
-  background-color: #fff;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.34);
 }
 </style>

client/components/common/tce-core/ElementToolbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :key="id" class="element-toolbar-wrapper">
+  <div :key="id" class="element-toolbar-wrapper white elevation-1">
     <component
       v-if="componentExists"
       :is="componentName"
@@ -10,7 +10,7 @@
     <slot name="embed-toolbar"></slot>
     <div class="delete-element">
       <slot name="actions"></slot>
-      <v-btn @click="requestDeleteConfirmation" color="error" fab dark>
+      <v-btn v-if="!embed" @click="requestDeleteConfirmation" color="error" fab dark>
         <v-icon>mdi-delete</v-icon>
       </v-btn>
     </div>
@@ -64,7 +64,7 @@ export default {
       appBus.emit('showConfirmationModal', {
         title: 'Delete element?',
         message: 'Are you sure you want to delete element?',
-        action: () => this.remove(this.element)
+        action: () => this.remove(this.element.parent || this.element)
       });
     }
   },
@@ -78,11 +78,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.element-toolbar-wrapper {
+  position: absolute;
+  width: 100%;
+  min-height: 45px;
+}
+
 .delete-element {
   position: absolute;
   z-index: 999;
   right: 0;
-  transform: translate(-90%, -40%);
+  transform: translate(-90%, -45%);
 
   .v-btn {
     margin: 4px;

client/components/common/tce-core/QuestionContainer/Controls.vue

@@ -4,12 +4,12 @@
       <v-btn @click="$emit('cancel')" flat>
         Cancel
       </v-btn>
-      <v-btn @click="save" color="success" depressed>
+      <v-btn @click="save" color="primary">
         Save
       </v-btn>
     </div>
     <div v-else class="pull-right">
-      <v-btn @click="$emit('edit')" color="blue-grey lighten-1" dark depressed>
+      <v-btn @click="$emit('edit')" color="primary">
         Edit
       </v-btn>
     </div>