mirror of
https://github.com/discourse/discourse.git
synced 2025-06-11 13:01:32 +08:00
FIX: supports height/preview form-kit composer (#31121)
- `@height` was supported but not working correctly, this is now fixed and tested - `@preview` was not supported, we would always hide the preview in form kit. You now have control over this, default `false`.
This commit is contained in:
@ -105,6 +105,7 @@ export default class FKControlWrapper extends Component {
|
|||||||
@before={{@before}}
|
@before={{@before}}
|
||||||
@after={{@after}}
|
@after={{@after}}
|
||||||
@height={{@height}}
|
@height={{@height}}
|
||||||
|
@preview={{@preview}}
|
||||||
@selection={{@selection}}
|
@selection={{@selection}}
|
||||||
id={{@field.id}}
|
id={{@field.id}}
|
||||||
name={{@field.name}}
|
name={{@field.name}}
|
||||||
|
@ -2,6 +2,7 @@ import Component from "@glimmer/component";
|
|||||||
import { action } from "@ember/object";
|
import { action } from "@ember/object";
|
||||||
import { htmlSafe } from "@ember/template";
|
import { htmlSafe } from "@ember/template";
|
||||||
import DEditor from "discourse/components/d-editor";
|
import DEditor from "discourse/components/d-editor";
|
||||||
|
import concatClass from "discourse/helpers/concat-class";
|
||||||
import { escapeExpression } from "discourse/lib/utilities";
|
import { escapeExpression } from "discourse/lib/utilities";
|
||||||
|
|
||||||
export default class FKControlComposer extends Component {
|
export default class FKControlComposer extends Component {
|
||||||
@ -13,7 +14,7 @@ export default class FKControlComposer extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
get style() {
|
get style() {
|
||||||
if (this.args.height) {
|
if (!this.args.height) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -25,7 +26,10 @@ export default class FKControlComposer extends Component {
|
|||||||
@value={{readonly @field.value}}
|
@value={{readonly @field.value}}
|
||||||
@change={{this.handleInput}}
|
@change={{this.handleInput}}
|
||||||
@disabled={{@field.disabled}}
|
@disabled={{@field.disabled}}
|
||||||
class="form-kit__control-composer"
|
class={{concatClass
|
||||||
|
"form-kit__control-composer"
|
||||||
|
(if @preview "--preview")
|
||||||
|
}}
|
||||||
style={{this.style}}
|
style={{this.style}}
|
||||||
@textAreaId={{@field.id}}
|
@textAreaId={{@field.id}}
|
||||||
/>
|
/>
|
||||||
|
@ -44,5 +44,41 @@ module(
|
|||||||
|
|
||||||
assert.dom(".d-editor-input").hasAttribute("disabled");
|
assert.dom(".d-editor-input").hasAttribute("disabled");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test("@height", async function (assert) {
|
||||||
|
await render(<template>
|
||||||
|
<Form as |form|>
|
||||||
|
<form.Field @name="foo" @title="Foo" as |field|>
|
||||||
|
<field.Composer @height={{42}} />
|
||||||
|
</form.Field>
|
||||||
|
</Form>
|
||||||
|
</template>);
|
||||||
|
|
||||||
|
assert
|
||||||
|
.dom(".form-kit__control-composer")
|
||||||
|
.hasAttribute("style", "height: 42px");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("@preview", async function (assert) {
|
||||||
|
await render(<template>
|
||||||
|
<Form as |form|>
|
||||||
|
<form.Field @name="foo" @title="Foo" as |field|>
|
||||||
|
<field.Composer />
|
||||||
|
</form.Field>
|
||||||
|
</Form>
|
||||||
|
</template>);
|
||||||
|
|
||||||
|
assert.dom(".form-kit__control-composer.--preview").doesNotExist();
|
||||||
|
|
||||||
|
await render(<template>
|
||||||
|
<Form as |form|>
|
||||||
|
<form.Field @name="foo" @title="Foo" as |field|>
|
||||||
|
<field.Composer @preview={{true}} />
|
||||||
|
</form.Field>
|
||||||
|
</Form>
|
||||||
|
</template>);
|
||||||
|
|
||||||
|
assert.dom(".form-kit__control-composer.--preview").exists();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
@ -7,6 +7,12 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.--preview {
|
||||||
|
.d-editor-preview-wrapper {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.d-editor-button-bar {
|
.d-editor-button-bar {
|
||||||
> .btn {
|
> .btn {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
Reference in New Issue
Block a user