diff --git a/shared/js/ui/modal/bookmarks/Renderer.scss b/shared/js/ui/modal/bookmarks/Renderer.scss index f4941a8f..bb6c3bc8 100644 --- a/shared/js/ui/modal/bookmarks/Renderer.scss +++ b/shared/js/ui/modal/bookmarks/Renderer.scss @@ -16,6 +16,11 @@ @include user-select(none); + &.windowed { + width: 100%; + height: 100%; + } + .inputBoxed { height: 2em; } diff --git a/shared/js/ui/modal/bookmarks/Renderer.tsx b/shared/js/ui/modal/bookmarks/Renderer.tsx index aab9f440..8e752e5c 100644 --- a/shared/js/ui/modal/bookmarks/Renderer.tsx +++ b/shared/js/ui/modal/bookmarks/Renderer.tsx @@ -774,11 +774,11 @@ class ModalBookmarks extends AbstractModal { this.variables.destroy(); } - renderBody(): React.ReactElement { + renderBody(renderBody): React.ReactElement { return ( -
+
diff --git a/shared/js/ui/react-elements/external-modal/PopoutRendererClient.tsx b/shared/js/ui/react-elements/external-modal/PopoutRendererClient.tsx index 9ef5bf20..5d81e730 100644 --- a/shared/js/ui/react-elements/external-modal/PopoutRendererClient.tsx +++ b/shared/js/ui/react-elements/external-modal/PopoutRendererClient.tsx @@ -57,6 +57,8 @@ export class ClientModalRenderer implements ModalRenderer { headerClass={cssStyle.header} headerTitleClass={cssStyle.title} bodyClass={cssStyle.body} + + windowed={true} />, this.container, () => { diff --git a/shared/js/ui/react-elements/external-modal/PopoutRendererWeb.tsx b/shared/js/ui/react-elements/external-modal/PopoutRendererWeb.tsx index d6185c92..d2c7bd81 100644 --- a/shared/js/ui/react-elements/external-modal/PopoutRendererWeb.tsx +++ b/shared/js/ui/react-elements/external-modal/PopoutRendererWeb.tsx @@ -48,7 +48,7 @@ class BodyRenderer { this.modalInstance = instance; if(this.modalInstance) { - ReactDOM.render(<>{this.modalInstance.renderBody()}, this.htmlContainer); + ReactDOM.render(<>{this.modalInstance.renderBody({ windowed: true })}, this.htmlContainer); } } } diff --git a/shared/js/ui/react-elements/internal-modal/Renderer.tsx b/shared/js/ui/react-elements/internal-modal/Renderer.tsx index c83a464d..f5ae22d0 100644 --- a/shared/js/ui/react-elements/internal-modal/Renderer.tsx +++ b/shared/js/ui/react-elements/internal-modal/Renderer.tsx @@ -17,9 +17,11 @@ export const InternalModalContentRenderer = React.memo((props: { headerTitleClass?: string, bodyClass?: string, - refContent?: React.Ref + refContent?: React.Ref, + + windowed: boolean, }) => { - const body = useMemo(() => props.modal.renderBody(), [props.modal]); + const body = useMemo(() => props.modal.renderBody({ windowed: props.windowed }), [props.modal]); const title = useMemo(() => props.modal.renderTitle(), [props.modal]); return ( @@ -87,6 +89,8 @@ export class InternalModalRenderer extends React.PureComponent<{ modal: Abstract containerClass={cssStyle.contentInternal} bodyClass={cssStyle.body + " " + cssStyle["modal-" + this.props.modal.color()]} + + windowed={false} />
diff --git a/shared/js/ui/react-elements/modal/Definitions.ts b/shared/js/ui/react-elements/modal/Definitions.ts index 892b9e9e..9658ed9b 100644 --- a/shared/js/ui/react-elements/modal/Definitions.ts +++ b/shared/js/ui/react-elements/modal/Definitions.ts @@ -90,7 +90,7 @@ export interface ModalController { export abstract class AbstractModal { protected constructor() {} - abstract renderBody() : ReactElement; + abstract renderBody(properties: { windowed: boolean }) : ReactElement; abstract renderTitle() : string | React.ReactElement; /* only valid for the "inline" modals */