Small Logo Preview looks better

app/assets/javascripts/wizard/components/image-preview-logo-small-url.js.es6

@@ -0,0 +1,70 @@
+import { observes } from 'ember-addons/ember-computed-decorators';
+
+import {
+  createPreviewComponent,
+  loadImage,
+  drawHeader,
+  LOREM
+} from 'wizard/lib/preview';
+
+export default createPreviewComponent(375, 100, {
+  image: null,
+
+  @observes('field.value')
+  imageChanged() {
+    this.reload();
+  },
+
+  load() {
+    return loadImage(this.get('field.value')).then(image => {
+      this.image = image;
+    });
+  },
+
+  paint(ctx, colors, width, height) {
+    const headerHeight = height / 2;
+
+    drawHeader(ctx, colors, width, headerHeight);
+
+    const image = this.image;
+    const headerMargin = headerHeight * 0.2;
+
+    const maxWidth = headerHeight - (headerMargin * 2.0);
+    let imageWidth = image.width;
+    let ratio = 1.0;
+    if (imageWidth > maxWidth) {
+      ratio = maxWidth / imageWidth;
+      imageWidth = maxWidth;
+    }
+
+    ctx.drawImage(image, headerMargin, headerMargin, imageWidth, image.height * ratio);
+
+    const afterLogo = (headerMargin * 1.7) + imageWidth;
+    const fontSize = Math.round(headerHeight * 0.4);
+    ctx.font = `Bold ${fontSize}px 'Arial'`;
+    ctx.fillStyle = colors.primary;
+    const title = LOREM.substring(0, 27);
+    ctx.fillText(title, headerMargin + imageWidth, headerHeight - (fontSize * 1.1));
+
+    const badgeSize = height / 13.0;
+    ctx.beginPath();
+    ctx.fillStyle = colors.primary;
+    ctx.rect(afterLogo, (headerHeight * 0.70), badgeSize, badgeSize);
+    ctx.fill();
+
+    ctx.font = `Bold ${badgeSize * 1.2}px 'Arial'`;
+    ctx.fillStyle = colors.primary;
+    const category = "consectetur";
+    ctx.fillText(category, afterLogo + (badgeSize * 1.5), headerHeight * 0.7 + (badgeSize * 0.9));
+
+    const LINE_HEIGHT = 12;
+    ctx.font = `${LINE_HEIGHT}px 'Arial'`;
+    const lines = LOREM.split("\n");
+    for (let i=0; i<10; i++) {
+      const line = (height * 0.55) + (i * (LINE_HEIGHT * 1.5));
+      ctx.fillText(lines[i], afterLogo, line);
+    }
+  }
+
+});
+

app/assets/javascripts/wizard/components/theme-preview.js.es6

@@ -5,25 +5,13 @@ import {
   loadImage,
   darkLightDiff,
   chooseBrighter,
-  drawHeader
+  drawHeader,
+  LOREM
 } from 'wizard/lib/preview';
 
 const LINE_HEIGHT = 12.0;
 
-const LOREM = `
-Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-Nullam eget sem non elit tincidunt rhoncus. Fusce velit nisl,
-porttitor sed nisl ac, consectetur interdum metus. Fusce in
-consequat augue, vel facilisis felis. Nunc tellus elit, and
-semper vitae orci nec, blandit pharetra enim. Aenean a ebus
-posuere nunc. Maecenas ultrices viverra enim ac commodo
-Vestibulum nec quam sit amet libero ultricies sollicitudin.
-Nulla quis scelerisque sem, eget volutpat velit. Fusce eget
-accumsan sapien, nec feugiat quam. Quisque non risus.
-placerat lacus vitae, lacinia nisi. Sed metus arcu, iaculis
-sit amet cursus nec, sodales at eros.`;
-
-export default createPreviewComponent(400, 220, {
+export default createPreviewComponent(375, 220, {
   logo: null,
   avatar: null,
 

app/assets/javascripts/wizard/lib/preview.js.es6

@@ -1,5 +1,18 @@
 /*eslint no-bitwise:0 */
 
+export const LOREM = `
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Nullam eget sem non elit tincidunt rhoncus. Fusce velit nisl,
+porttitor sed nisl ac, consectetur interdum metus. Fusce in
+consequat augue, vel facilisis felis. Nunc tellus elit, and
+semper vitae orci nec, blandit pharetra enim. Aenean a ebus
+posuere nunc. Maecenas ultrices viverra enim ac commodo
+Vestibulum nec quam sit amet libero ultricies sollicitudin.
+Nulla quis scelerisque sem, eget volutpat velit. Fusce eget
+accumsan sapien, nec feugiat quam. Quisque non risus.
+placerat lacus vitae, lacinia nisi. Sed metus arcu, iaculis
+sit amet cursus nec, sodales at eros.`;
+
 export function createPreviewComponent(width, height, obj) {
   return Ember.Component.extend({
     layoutName: 'components/theme-preview',