diff --git a/app/assets/javascripts/discourse/tests/acceptance/wizard-test.js b/app/assets/javascripts/discourse/tests/acceptance/wizard-test.js index 8bc467145ee..115f4561889 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/wizard-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/wizard-test.js @@ -7,60 +7,74 @@ acceptance("Wizard", function (needs) { test("Wizard starts", async function (assert) { await visit("/wizard"); - assert.ok(exists(".wizard-column-contents")); + assert.ok(exists(".wizard-container")); assert.strictEqual(currentRouteName(), "wizard.step"); }); test("Going back and forth in steps", async function (assert) { await visit("/wizard/steps/hello-world"); - assert.ok(exists(".wizard-step")); + assert.ok(exists(".wizard-container__step")); assert.ok( - exists(".wizard-step-hello-world"), + exists(".wizard-container__step.hello-world"), "it adds a class for the step id" ); - assert.ok(!exists(".wizard-btn.finish"), "cannot finish on first step"); - assert.ok(exists(".wizard-progress")); - assert.ok(exists(".wizard-step-title")); - assert.ok(exists(".wizard-step-description")); assert.ok( - !exists(".invalid .field-full-name"), + !exists(".wizard-container__button.finish"), + "cannot finish on first step" + ); + assert.ok(exists(".wizard-container__step-progress")); + assert.ok(exists(".wizard-container__step-title")); + assert.ok(exists(".wizard-container__step-description")); + assert.ok( + !exists(".invalid #full_name"), "don't show it as invalid until the user does something" ); - assert.ok(exists(".wizard-field .field-description")); - assert.ok(!exists(".wizard-btn.back")); - assert.ok(!exists(".wizard-field .field-error-description")); + assert.ok(!exists(".wizard-container__button.back")); + assert.ok(!exists(".wizard-container__field .error")); // invalid data - await click(".wizard-btn.next"); - assert.ok(exists(".invalid .field-full-name")); + await click(".wizard-container__button.next"); + assert.ok(exists(".invalid #full_name")); // server validation fail - await fillIn("input.field-full-name", "Server Fail"); - await click(".wizard-btn.next"); - assert.ok(exists(".invalid .field-full-name")); - assert.ok(exists(".wizard-field .field-error-description")); + await fillIn("input#full_name", "Server Fail"); + await click(".wizard-container__button.next"); + assert.ok(exists(".invalid #full_name")); + assert.ok(exists(".wizard-container__field .error")); // server validation ok - await fillIn("input.field-full-name", "Evil Trout"); - await click(".wizard-btn.next"); - assert.ok(!exists(".wizard-field .field-error-description")); - assert.ok(!exists(".wizard-step-description")); + await fillIn("input#full_name", "Evil Trout"); + await click(".wizard-container__button.next"); + assert.ok(!exists(".wizard-container__field .error")); + assert.ok(!exists(".wizard-container__step-description")); assert.ok( - exists(".wizard-btn.finish"), + exists(".wizard-container__button.finish"), "shows finish on an intermediate step" ); - await click(".wizard-btn.next"); - assert.ok(exists(".select-kit.field-snack"), "went to the next step"); - assert.ok(exists(".preview-area"), "renders the component field"); - assert.ok(exists(".wizard-btn.done"), "last step shows a done button"); - assert.ok(exists(".action-link.back"), "shows the back button"); - assert.ok(!exists(".wizard-step-title")); - assert.ok(!exists(".wizard-btn.finish"), "cannot finish on last step"); + await click(".wizard-container__button.next"); + assert.ok( + exists(".dropdown-field.dropdown-snack"), + "went to the next step" + ); + assert.ok( + exists(".wizard-container__preview"), + "renders the component field" + ); + assert.ok( + exists(".wizard-container__button.jump-in"), + "last step shows a jump in button" + ); + assert.ok(exists(".wizard-container__link.back"), "shows the back button"); + assert.ok(!exists(".wizard-container__step-title")); + assert.ok( + !exists(".wizard-container__button.finish"), + "cannot finish on last step" + ); - await click(".action-link.back"); - assert.ok(exists(".wizard-step-title")); - assert.ok(exists(".wizard-btn.next")); + await click(".wizard-container__link.back"); + assert.ok(exists(".wizard-container__step-title")); + assert.ok(exists(".wizard-container__button.next")); assert.ok(!exists(".wizard-prev")); }); }); diff --git a/app/assets/javascripts/discourse/tests/integration/components/wizard-invite-list-test.js b/app/assets/javascripts/discourse/tests/integration/components/wizard-invite-list-test.js index a48c830dc80..e69de29bb2d 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/wizard-invite-list-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/wizard-invite-list-test.js @@ -1,73 +0,0 @@ -import { module, test } from "qunit"; -import { setupRenderingTest } from "discourse/tests/helpers/component-test"; -import { click, fillIn, render } from "@ember/test-helpers"; -import { count, exists } from "discourse/tests/helpers/qunit-helpers"; -import { hbs } from "ember-cli-htmlbars"; - -module("Integration | Component | Wizard | invite-list", function (hooks) { - setupRenderingTest(hooks); - - test("can add users", async function (assert) { - this.set("field", {}); - - await render(hbs``); - - assert.ok(!exists(".users-list .invite-list-user"), "no users at first"); - assert.ok(!exists(".new-user .invalid"), "not invalid at first"); - - const firstVal = JSON.parse(this.field.value); - assert.strictEqual(firstVal.length, 0, "empty JSON at first"); - - assert.ok(this.field.warning, "it has a warning since no users were added"); - - await click(".add-user"); - assert.ok( - !exists(".users-list .invite-list-user"), - "doesn't add a blank user" - ); - assert.strictEqual(count(".new-user .invalid"), 1); - - await fillIn(".invite-email", "eviltrout@example.com"); - await click(".add-user"); - - assert.strictEqual( - count(".users-list .invite-list-user"), - 1, - "adds the user" - ); - assert.ok(!exists(".new-user .invalid")); - - const val = JSON.parse(this.field.value); - assert.strictEqual(val.length, 1); - assert.strictEqual( - val[0].email, - "eviltrout@example.com", - "adds the email to the JSON" - ); - assert.ok(val[0].role.length, "adds the role to the JSON"); - assert.ok(!this.get("field.warning"), "no warning once the user is added"); - - await fillIn(".invite-email", "eviltrout@example.com"); - await click(".add-user"); - - assert.strictEqual( - count(".users-list .invite-list-user"), - 1, - "can't add the same user twice" - ); - assert.strictEqual(count(".new-user .invalid"), 1); - - await fillIn(".invite-email", "not-an-email"); - await click(".add-user"); - - assert.strictEqual( - count(".users-list .invite-list-user"), - 1, - "won't add an invalid email" - ); - assert.strictEqual(count(".new-user .invalid"), 1); - - await click(".invite-list .invite-list-user:nth-of-type(1) .remove-user"); - assert.ok(!exists(".users-list .invite-list-user"), 0, "removed the user"); - }); -}); diff --git a/app/assets/javascripts/wizard/addon/components/homepage-preview.js b/app/assets/javascripts/wizard/addon/components/homepage-preview.js index b0800076ab9..6a1a09208b9 100644 --- a/app/assets/javascripts/wizard/addon/components/homepage-preview.js +++ b/app/assets/javascripts/wizard/addon/components/homepage-preview.js @@ -4,7 +4,7 @@ import { darkLightDiff, } from "wizard/lib/preview"; -export default createPreviewComponent(659, 320, { +export default createPreviewComponent(342, 322, { logo: null, avatar: null, @@ -22,9 +22,7 @@ export default createPreviewComponent(659, 320, { }, paint({ ctx, colors, font, width, height }) { - if (this.logo) { - this.drawFullHeader(colors, font, this.logo); - } + this.drawFullHeader(colors, font, this.logo); if (this.get("step.fieldsById.homepage_style.value") === "latest") { this.drawPills(colors, font, height * 0.15); @@ -361,7 +359,10 @@ export default createPreviewComponent(659, 320, { renderLatest(ctx, colors, font, width, height) { const rowHeight = height / 6.6; - const textColor = darkLightDiff(colors.primary, colors.secondary, 50, 50); + // accounts for hard-set color variables in solarized themes + const textColor = + colors.primary_medium || + darkLightDiff(colors.primary, colors.secondary, 50, 50); const bodyFontSize = height / 440.0; ctx.font = `${bodyFontSize}em '${font}'`; @@ -370,12 +371,10 @@ export default createPreviewComponent(659, 320, { const drawLine = (y) => { ctx.beginPath(); - ctx.strokeStyle = darkLightDiff( - colors.primary, - colors.secondary, - 90, - -75 - ); + // accounts for hard-set color variables in solarized themes + ctx.strokeStyle = + colors.primary_low || + darkLightDiff(colors.primary, colors.secondary, 90, -75); ctx.moveTo(margin, y); ctx.lineTo(width - margin, y); ctx.stroke(); diff --git a/app/assets/javascripts/wizard/addon/components/invite-list-user.js b/app/assets/javascripts/wizard/addon/components/invite-list-user.js deleted file mode 100644 index 7ef828be6e2..00000000000 --- a/app/assets/javascripts/wizard/addon/components/invite-list-user.js +++ /dev/null @@ -1,11 +0,0 @@ -import Component from "@ember/component"; -import discourseComputed from "discourse-common/utils/decorators"; - -export default Component.extend({ - classNames: ["invite-list-user"], - - @discourseComputed("user.role") - roleName(role) { - return this.roles.findBy("id", role).label; - }, -}); diff --git a/app/assets/javascripts/wizard/addon/components/invite-list.js b/app/assets/javascripts/wizard/addon/components/invite-list.js deleted file mode 100644 index 3d8b0ab120f..00000000000 --- a/app/assets/javascripts/wizard/addon/components/invite-list.js +++ /dev/null @@ -1,78 +0,0 @@ -import Component from "@ember/component"; -import I18n from "I18n"; -import { schedule } from "@ember/runloop"; -import { action } from "@ember/object"; - -export default Component.extend({ - classNames: ["invite-list"], - users: null, - inviteEmail: "", - inviteRole: "", - invalid: false, - - init() { - this._super(...arguments); - this.set("users", []); - - this.set("roles", [ - { id: "moderator", label: I18n.t("wizard.invites.roles.moderator") }, - { id: "regular", label: I18n.t("wizard.invites.roles.regular") }, - ]); - - this.set("inviteRole", this.get("roles.0.id")); - - this.updateField(); - }, - - keyPress(e) { - if (e.key === "Enter") { - e.preventDefault(); - e.stopPropagation(); - this.send("addUser"); - } - }, - - updateField() { - const users = this.users; - - this.set("field.value", JSON.stringify(users)); - - const staffCount = this.get("step.fieldsById.staff_count.value") || 1; - const showWarning = staffCount < 3 && users.length === 0; - - this.set("field.warning", showWarning ? "invites.none_added" : null); - }, - - @action - addUser() { - const user = { - email: this.inviteEmail || "", - role: this.inviteRole, - }; - - if (!/(.+)@(.+){2,}\.(.+){2,}/.test(user.email)) { - return this.set("invalid", true); - } - - const users = this.users; - if (users.findBy("email", user.email)) { - return this.set("invalid", true); - } - - this.set("invalid", false); - - users.pushObject(user); - this.updateField(); - - this.set("inviteEmail", ""); - schedule("afterRender", () => - this.element.querySelector(".invite-email").focus() - ); - }, - - @action - removeUser(user) { - this.users.removeObject(user); - this.updateField(); - }, -}); diff --git a/app/assets/javascripts/wizard/addon/components/staff-count.js b/app/assets/javascripts/wizard/addon/components/staff-count.js deleted file mode 100644 index 1edb53e5695..00000000000 --- a/app/assets/javascripts/wizard/addon/components/staff-count.js +++ /dev/null @@ -1,7 +0,0 @@ -import Component from "@ember/component"; -import discourseComputed from "discourse-common/utils/decorators"; - -export default Component.extend({ - @discourseComputed("field.value") - showStaffCount: (staffCount) => staffCount > 1, -}); diff --git a/app/assets/javascripts/wizard/addon/components/styling-preview.js b/app/assets/javascripts/wizard/addon/components/styling-preview.js index f3bc3e941ad..6db712327dc 100644 --- a/app/assets/javascripts/wizard/addon/components/styling-preview.js +++ b/app/assets/javascripts/wizard/addon/components/styling-preview.js @@ -13,7 +13,7 @@ Nullam eget sem non elit tincidunt rhoncus. Fusce velit nisl, porttitor sed nisl ac, consectetur interdum metus. Fusce in consequat augue, vel facilisis felis.`; -export default createPreviewComponent(659, 320, { +export default createPreviewComponent(642, 322, { logo: null, avatar: null, previewTopic: true, @@ -113,9 +113,7 @@ export default createPreviewComponent(659, 320, { paint({ ctx, colors, font, headingFont, width, height }) { const headerHeight = height * 0.3; - if (this.logo) { - this.drawFullHeader(colors, headingFont, this.logo); - } + this.drawFullHeader(colors, headingFont, this.logo); const margin = 20; const avatarSize = height * 0.15; @@ -152,8 +150,10 @@ export default createPreviewComponent(659, 320, { ctx.beginPath(); ctx.rect(margin, line + lineHeight, shareButtonWidth, height * 0.1); - ctx.fillStyle = darkLightDiff(colors.primary, colors.secondary, 90, 65); - ctx.fill(); + // accounts for hard-set color variables in solarized themes + ctx.fillStyle = + colors.primary_low || + darkLightDiff(colors.primary, colors.secondary, 90, 65); ctx.fillStyle = chooseDarker(colors.primary, colors.secondary); ctx.font = `${bodyFontSize}em '${font}'`; ctx.fillText( diff --git a/app/assets/javascripts/wizard/addon/components/wizard-field-checkbox.js b/app/assets/javascripts/wizard/addon/components/wizard-field-checkbox.js index 87d5ddb040f..44494409ab5 100644 --- a/app/assets/javascripts/wizard/addon/components/wizard-field-checkbox.js +++ b/app/assets/javascripts/wizard/addon/components/wizard-field-checkbox.js @@ -1,3 +1,5 @@ import Component from "@ember/component"; -export default Component.extend({}); +export default Component.extend({ + tagName: "", +}); diff --git a/app/assets/javascripts/wizard/addon/components/wizard-field-image.js b/app/assets/javascripts/wizard/addon/components/wizard-field-image.js index 365db6e836a..283c8695c4f 100644 --- a/app/assets/javascripts/wizard/addon/components/wizard-field-image.js +++ b/app/assets/javascripts/wizard/addon/components/wizard-field-image.js @@ -10,7 +10,7 @@ import DropTarget from "@uppy/drop-target"; import XHRUpload from "@uppy/xhr-upload"; export default Component.extend({ - classNames: ["wizard-image-row"], + classNames: ["wizard-container__image-upload"], uploading: false, @discourseComputed("field.id") diff --git a/app/assets/javascripts/wizard/addon/components/wizard-field-radio.js b/app/assets/javascripts/wizard/addon/components/wizard-field-radio.js deleted file mode 100644 index f16c97a5886..00000000000 --- a/app/assets/javascripts/wizard/addon/components/wizard-field-radio.js +++ /dev/null @@ -1,9 +0,0 @@ -import Component from "@ember/component"; -import { action } from "@ember/object"; - -export default Component.extend({ - @action - changed(value) { - this.set("field.value", value); - }, -}); diff --git a/app/assets/javascripts/wizard/addon/components/wizard-field-textarea.js b/app/assets/javascripts/wizard/addon/components/wizard-field-textarea.js deleted file mode 100644 index a3b4bcdc322..00000000000 --- a/app/assets/javascripts/wizard/addon/components/wizard-field-textarea.js +++ /dev/null @@ -1,6 +0,0 @@ -import Component from "@ember/component"; -export default Component.extend({ - keyPress(e) { - e.stopPropagation(); - }, -}); diff --git a/app/assets/javascripts/wizard/addon/components/wizard-field.js b/app/assets/javascripts/wizard/addon/components/wizard-field.js index 443b589f6e7..63b42c536d0 100644 --- a/app/assets/javascripts/wizard/addon/components/wizard-field.js +++ b/app/assets/javascripts/wizard/addon/components/wizard-field.js @@ -3,7 +3,11 @@ import { dasherize } from "@ember/string"; import discourseComputed from "discourse-common/utils/decorators"; export default Component.extend({ - classNameBindings: [":wizard-field", "typeClasses", "field.invalid"], + classNameBindings: [ + ":wizard-container__field", + "typeClasses", + "field.invalid", + ], @discourseComputed("field.type", "field.id") typeClasses: (type, id) => diff --git a/app/assets/javascripts/wizard/addon/components/wizard-step-form.js b/app/assets/javascripts/wizard/addon/components/wizard-step-form.js index 73406b4f0f5..0cdb7b2ce89 100644 --- a/app/assets/javascripts/wizard/addon/components/wizard-step-form.js +++ b/app/assets/javascripts/wizard/addon/components/wizard-step-form.js @@ -1,9 +1,5 @@ import Component from "@ember/component"; -import discourseComputed from "discourse-common/utils/decorators"; export default Component.extend({ - classNameBindings: [":wizard-step-form", "customStepClass"], - - @discourseComputed("step.id") - customStepClass: (stepId) => `wizard-step-${stepId}`, + classNameBindings: [":wizard-container__step-form"], }); diff --git a/app/assets/javascripts/wizard/addon/components/wizard-step.js b/app/assets/javascripts/wizard/addon/components/wizard-step.js index 2e6b95e2c49..c3777684dea 100644 --- a/app/assets/javascripts/wizard/addon/components/wizard-step.js +++ b/app/assets/javascripts/wizard/addon/components/wizard-step.js @@ -9,7 +9,7 @@ import { action } from "@ember/object"; const alreadyWarned = {}; export default Component.extend({ - classNames: ["wizard-step"], + classNameBindings: [":wizard-container__step", "stepClass"], saving: null, didInsertElement() { @@ -17,27 +17,40 @@ export default Component.extend({ this.autoFocus(); }, - @discourseComputed("step.index") - showQuitButton: (index) => index === 0, - @discourseComputed("step.displayIndex", "wizard.totalSteps") - showNextButton: (current, total) => current < total, + showNextButton(current, total) { + return current < total; + }, - @discourseComputed("step.displayIndex", "wizard.totalSteps") - showDoneButton: (current, total) => current === total, + @discourseComputed("step.id", "step.displayIndex", "wizard.totalSteps") + showDoneButton(step, current, total) { + return step === "ready" || current === total; + }, - @discourseComputed( - "step.index", - "step.displayIndex", - "wizard.totalSteps", - "wizard.completed" - ) - showFinishButton: (index, displayIndex, total, completed) => { - return index !== 0 && displayIndex !== total && completed; + @discourseComputed("step.id") + showFinishButton(step) { + return step === "styling" || step === "branding"; }, @discourseComputed("step.index") - showBackButton: (index) => index > 0, + showBackButton(index) { + return index > 0; + }, + + @discourseComputed("step.id") + nextButtonLabel(step) { + return `wizard.${step === "ready" ? "configure_more" : "next"}`; + }, + + @discourseComputed("step.id") + nextButtonClass(step) { + return step === "ready" ? "configure-more" : "next"; + }, + + @discourseComputed("step.id") + stepClass(step) { + return step; + }, @discourseComputed("step.banner") bannerImage(src) { @@ -47,9 +60,9 @@ export default Component.extend({ return getUrl(`/images/wizard/${src}`); }, - @discourseComputed("step.id") - bannerAndDescriptionClass(id) { - return `wizard-banner-and-description wizard-banner-and-description-${id}`; + @discourseComputed() + bannerAndDescriptionClass() { + return `wizard-container__step-banner`; }, @observes("step.id") @@ -89,7 +102,7 @@ export default Component.extend({ autoFocus() { schedule("afterRender", () => { const $invalid = $( - ".wizard-field.invalid:nth-of-type(1) .wizard-focusable" + ".wizard-container__input.invalid:nth-of-type(1) .wizard-focusable" ); if ($invalid.length) { diff --git a/app/assets/javascripts/wizard/addon/lib/preview.js b/app/assets/javascripts/wizard/addon/lib/preview.js index 964691539a3..27c16f9e758 100644 --- a/app/assets/javascripts/wizard/addon/lib/preview.js +++ b/app/assets/javascripts/wizard/addon/lib/preview.js @@ -191,7 +191,10 @@ export function createPreviewComponent(width, height, obj) { avatarSize, avatarSize ); - ctx.fillStyle = darkLightDiff(colors.primary, colors.secondary, 45, 55); + // accounts for hard-set color variables in solarized themes + ctx.fillStyle = + colors.primary_low_mid || + darkLightDiff(colors.primary, colors.secondary, 45, 55); const pathScale = headerHeight / 1200; // search icon SVG path diff --git a/app/assets/javascripts/wizard/addon/templates/components/discourse-logo.hbs b/app/assets/javascripts/wizard/addon/templates/components/discourse-logo.hbs new file mode 100644 index 00000000000..325af0ba10a --- /dev/null +++ b/app/assets/javascripts/wizard/addon/templates/components/discourse-logo.hbs @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + diff --git a/app/assets/javascripts/wizard/addon/templates/components/invite-list-user.hbs b/app/assets/javascripts/wizard/addon/templates/components/invite-list-user.hbs deleted file mode 100644 index 96117b3fe95..00000000000 --- a/app/assets/javascripts/wizard/addon/templates/components/invite-list-user.hbs +++ /dev/null @@ -1,6 +0,0 @@ -{{this.user.email}} -{{this.roleName}} - - diff --git a/app/assets/javascripts/wizard/addon/templates/components/invite-list.hbs b/app/assets/javascripts/wizard/addon/templates/components/invite-list.hbs deleted file mode 100644 index 659e506335c..00000000000 --- a/app/assets/javascripts/wizard/addon/templates/components/invite-list.hbs +++ /dev/null @@ -1,20 +0,0 @@ - -{{#if this.users}} -
- {{#each this.users as |user|}} - - {{/each}} -
-{{/if}} - -
-
- -
- - - - -
diff --git a/app/assets/javascripts/wizard/addon/templates/components/staff-count.hbs b/app/assets/javascripts/wizard/addon/templates/components/staff-count.hbs deleted file mode 100644 index 355c813c589..00000000000 --- a/app/assets/javascripts/wizard/addon/templates/components/staff-count.hbs +++ /dev/null @@ -1,5 +0,0 @@ -{{#if this.showStaffCount}} -
- {{i18n "wizard.staff_count" count=this.field.value}} -
-{{/if}} diff --git a/app/assets/javascripts/wizard/addon/templates/components/styling-preview.hbs b/app/assets/javascripts/wizard/addon/templates/components/styling-preview.hbs index e490afd1860..4d49d4febdd 100644 --- a/app/assets/javascripts/wizard/addon/templates/components/styling-preview.hbs +++ b/app/assets/javascripts/wizard/addon/templates/components/styling-preview.hbs @@ -1,9 +1,9 @@
-
+
-
+
diff --git a/app/assets/javascripts/wizard/addon/templates/components/theme-preview.hbs b/app/assets/javascripts/wizard/addon/templates/components/theme-preview.hbs index e034e5a6e76..cc8959bc008 100644 --- a/app/assets/javascripts/wizard/addon/templates/components/theme-preview.hbs +++ b/app/assets/javascripts/wizard/addon/templates/components/theme-preview.hbs @@ -1,4 +1,4 @@ -
+
- - {{this.field.placeholder}} + diff --git a/app/assets/javascripts/wizard/addon/templates/components/wizard-field-checkboxes.hbs b/app/assets/javascripts/wizard/addon/templates/components/wizard-field-checkboxes.hbs index d2bb45f6170..135d9e4a67b 100644 --- a/app/assets/javascripts/wizard/addon/templates/components/wizard-field-checkboxes.hbs +++ b/app/assets/javascripts/wizard/addon/templates/components/wizard-field-checkboxes.hbs @@ -1,7 +1,7 @@ {{#each this.field.choices as |c|}}