Merge pull request #1692 from CanStudios/theme-previews

Theme previews

Author: canstudios-louisem

frontend/src/modules/editor/selectTheme/less/editorTheme.less

@@ -6,7 +6,7 @@
 }
 
 .theme-list-item {
-  height: 175px;
+  height: 295px;
   width: 275px;
   margin-left:0px;
   margin-right: 30px;
@@ -20,33 +20,49 @@
   transition:all 0.3s;
   border: 1px solid #d6f2f9;
 
+  &-inner {
+    .theme-header {
+      padding: 20px;
+
+      .display-name {
+        font-size: 175%;
+        font-weight: @font-weight;
+      }
+
+      .description {
+        font-size: 110%;
+        color: @quaternary-color;
+      }
+    }
+
+    .theme-preview {
+      position: relative;
+      height: 205px;
+      width: 100%;
+
+      .fa {
+        color:rgb(214, 242, 249);
+        position: absolute;
+        font-size: 70px;
+        top: 45%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+
   &.selected {
     background-color: @primary-color;
     color: @button-primary-text-color;
     .description {
       color: #d6f2f9;
     }
   }
+
   &:hover {
     cursor: pointer;
     box-shadow: 0 0 5px 2px #CBE1E6;
   }
-
-  &-inner {
-    padding: 20px;
-    .theme-header {
-      padding-bottom: 30px;
-    }
-  }
-
-  .display-name {
-    font-size: 175%;
-    font-weight: @font-weight;
-  }
-  .description {
-    font-size: 110%;
-    color: #a6c2ca;
-  }
 }
 
 .theme-palette {
@@ -56,7 +72,6 @@
     width: 60px;
     float: left;
     position: relative;
-    background: url(/css/assets/theme_bg.png) top left no-repeat;
     margin-left: 0;
     margin-right: 18px;
 

frontend/src/modules/editor/selectTheme/templates/editorThemeItem.hbs

@@ -3,6 +3,7 @@
     <div class="display-name"><h4 style="color: {{foreground_color.default}}">{{displayName}}</h4></div>
     <div class="description">{{description}}</div>
   </div>
+  <div class="theme-preview"></div>
   {{#if settings}}
     <div class="theme-pallet-container">
       <ul class="theme-palette">

frontend/src/modules/editor/selectTheme/views/editorThemeItemView.js

@@ -24,6 +24,19 @@ define(function(require){
     },
 
     postRender: function() {
+      var previewUrl = '/api/theme/preview/' + this.model.get('name') + '/' + this.model.get('name');
+      var $previewLoc = this.$('.theme-preview');
+
+      $.ajax(previewUrl, {
+        statusCode: {
+          200: function() {
+            $previewLoc.prepend($('<img/>', { src: previewUrl, alt: Origin.l10n.t('app.themepreviewalt') }));
+          },
+          204: function() {
+            $previewLoc.prepend($('<i/>', { 'class': 'fa fa-paint-brush' }));
+          }
+        }
+      });
     },
 
     toggleSelect: function(event) {

package.json

@@ -90,7 +90,7 @@
   },
   "dependencies": {
     "archiver": "~0.16.0",
-    "async": "0.2.5",
+    "async": "2.5.0",
     "bcrypt-nodejs": "0.0.3",
     "body-parser": "^1.13.3",
     "bower": "1.6.5",

plugins/content/theme/index.js

@@ -130,6 +130,33 @@ function initialize () {
   var app = origin();
   app.once('serverStarted', function (server) {
 
+    //get the theme preview image
+    rest.get('/theme/preview/:themename/:version', function (req, res, next) {
+      //strip slashes to stop unwanted directory traversal
+      var themeName = req.params.themename.replace(/\\(.)/mg, "$1");
+      var themeVersion = req.params.version.replace(/\\(.)/mg, "$1");
+      var tenantId = configuration.getConfig('masterTenantID');
+
+      async.tryEach([
+        function(callback) {
+          //try manual install location
+          fs.readFile(path.join(__dirname, 'versions', themeName, themeVersion, themeName, 'preview.jpg'), callback);
+        },
+        function(callback) {
+          //try bower install location
+          fs.readFile(path.join(__dirname, '..', '..', '..', 'temp', tenantId, 'adapt_framework', 'src', 'theme', themeName, 'preview.jpg'), callback);
+        }
+      ],function(err, img) {
+        if(err){
+          res.sendStatus(204);
+          return res;
+        }
+        res.writeHead(200, {'Content-Type': 'image/jpg' });
+        res.end(img);
+        return res;
+      });
+    });
+
     // Assign a theme to to a course
     rest.post('/theme/:themeid/makeitso/:courseid', function (req, res, next) {
       var themeId = req.params.themeid;

routes/lang/en-application.json

@@ -144,6 +144,7 @@
   "app.configurationsettings": "Configuration settings",
   "app.themesettings": "Theme settings",
   "app.themepicker": "Theme picker",
+  "app.themepreviewalt": "Preview image",
   "app.lastupdated": "UPDATED",
   "app.recent": "Recent",
   "app.assettitle": "Asset title",