Convert wizard es6 files to js

2026-08-11 05:25:16 -05:00 · 2020-03-23 14:15:16 -04:00
parent 39dde33cbb
commit 1ac0242201
42 changed files with 2 additions and 1 deletions
@@ -0,0 +1,124 @@
+import discourseComputed from "discourse-common/utils/decorators";
+import { observes } from "discourse-common/utils/decorators";
+import {
+  createPreviewComponent,
+  darkLightDiff,
+  chooseDarker,
+  LOREM
+} from "wizard/lib/preview";
+
+export default createPreviewComponent(305, 165, {
+  logo: null,
+  avatar: null,
+
+  classNameBindings: ["isSelected"],
+
+  @discourseComputed("selectedId", "colorsId")
+  isSelected(selectedId, colorsId) {
+    return selectedId === colorsId;
+  },
+
+  click() {
+    this.onChange(this.colorsId);
+  },
+
+  @observes("step.fieldsById.base_scheme_id.value")
+  themeChanged() {
+    this.triggerRepaint();
+  },
+
+  images() {
+    return {
+      logo: this.wizard.getLogoUrl(),
+      avatar: "/images/wizard/trout.png"
+    };
+  },
+
+  paint(ctx, colors, width, height) {
+    const headerHeight = height * 0.3;
+
+    this.drawFullHeader(colors);
+
+    const margin = width * 0.04;
+    const avatarSize = height * 0.2;
+    const lineHeight = height / 9.5;
+
+    // Draw a fake topic
+    this.scaleImage(
+      this.avatar,
+      margin,
+      headerHeight + height * 0.085,
+      avatarSize,
+      avatarSize
+    );
+
+    const titleFontSize = headerHeight / 44;
+
+    ctx.beginPath();
+    ctx.fillStyle = colors.primary;
+    ctx.font = `bold ${titleFontSize}em 'Arial'`;
+    ctx.fillText(I18n.t("wizard.previews.topic_title"), margin, height * 0.3);
+
+    const bodyFontSize = height / 220.0;
+    ctx.font = `${bodyFontSize}em 'Arial'`;
+
+    let line = 0;
+    const lines = LOREM.split("\n");
+    for (let i = 0; i < 4; i++) {
+      line = height * 0.35 + i * lineHeight;
+      ctx.fillText(lines[i], margin + avatarSize + margin, line);
+    }
+
+    // Share Button
+    ctx.beginPath();
+    ctx.rect(margin, line + lineHeight, width * 0.14, height * 0.14);
+    ctx.fillStyle = darkLightDiff(colors.primary, colors.secondary, 90, 65);
+    ctx.fill();
+    ctx.fillStyle = chooseDarker(colors.primary, colors.secondary);
+    ctx.font = `${bodyFontSize}em 'Arial'`;
+    ctx.fillText(
+      I18n.t("wizard.previews.share_button"),
+      margin + width / 55,
+      line + lineHeight * 1.85
+    );
+
+    // Reply Button
+    ctx.beginPath();
+    ctx.rect(
+      margin * 2 + width * 0.14,
+      line + lineHeight,
+      width * 0.14,
+      height * 0.14
+    );
+    ctx.fillStyle = colors.tertiary;
+    ctx.fill();
+    ctx.fillStyle = colors.secondary;
+    ctx.font = `${bodyFontSize}em 'Arial'`;
+    ctx.fillText(
+      I18n.t("wizard.previews.reply_button"),
+      margin * 2 + width * 0.14 + width / 55,
+      line + lineHeight * 1.85
+    );
+
+    // Draw Timeline
+    const timelineX = width * 0.8;
+    ctx.beginPath();
+    ctx.strokeStyle = colors.tertiary;
+    ctx.lineWidth = 0.5;
+    ctx.moveTo(timelineX, height * 0.3);
+    ctx.lineTo(timelineX, height * 0.7);
+    ctx.stroke();
+
+    // Timeline
+    ctx.beginPath();
+    ctx.strokeStyle = colors.tertiary;
+    ctx.lineWidth = 2;
+    ctx.moveTo(timelineX, height * 0.3);
+    ctx.lineTo(timelineX, height * 0.4);
+    ctx.stroke();
+
+    ctx.font = `Bold ${bodyFontSize}em Arial`;
+    ctx.fillStyle = colors.primary;
+    ctx.fillText("1 / 20", timelineX + margin, height * 0.3 + margin * 1.5);
+  }
+});