mirror of
https://github.com/WenPai-org/wpmind.git
synced 2025-08-03 02:48:41 +08:00
fixed some layout styles in preview
change modal to fullscreen when generating blocks
This commit is contained in:
parent
b9e35e28ae
commit
207b97c6cc
5 changed files with 39 additions and 4 deletions
|
@ -26,7 +26,35 @@ const AIResponse = memo(
|
|||
>
|
||||
{response.length > 0 && (
|
||||
<div className="mind-popup-response__preview">
|
||||
<BlockPreview blocks={response} viewportWidth={800} />
|
||||
<BlockPreview
|
||||
blocks={response}
|
||||
viewportWidth={0}
|
||||
// TODO: the following container style is hardcoded and should be changed.
|
||||
additionalStyles={[
|
||||
{
|
||||
css: `
|
||||
.is-root-container > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
|
||||
max-width: var(--wp--style--global--content-size);
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
.is-root-container > .alignwide {
|
||||
max-width: var(--wp--style--global--wide-size);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.is-root-container > .alignfull {
|
||||
max-width: none;
|
||||
}
|
||||
:root :where(.is-layout-flow) > *,
|
||||
.is-root-container > * {
|
||||
margin-block-start: 1.2rem;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
@ -15,6 +15,8 @@ $padding: 10px;
|
|||
}
|
||||
|
||||
.mind-popup-request {
|
||||
margin-bottom: auto;
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: auto;
|
||||
|
|
|
@ -41,6 +41,7 @@ export default function Input(props) {
|
|||
}
|
||||
);
|
||||
|
||||
const hasResponse = response?.length > 0;
|
||||
let contextLabel = context;
|
||||
|
||||
switch (context) {
|
||||
|
@ -97,7 +98,7 @@ export default function Input(props) {
|
|||
// Trying to set this with state or a ref will product an incorrect value.
|
||||
ref.current.style.height = scrollHeight + 'px';
|
||||
}
|
||||
}, [ref, input]);
|
||||
}, [ref, input, loading, hasResponse]);
|
||||
|
||||
return (
|
||||
<div className="mind-popup-input">
|
||||
|
|
|
@ -9,7 +9,6 @@ import './style.scss';
|
|||
import { createRoot } from '@wordpress/element';
|
||||
import { Modal } from '@wordpress/components';
|
||||
import { useSelect, useDispatch } from '@wordpress/data';
|
||||
import { rawHandler } from '@wordpress/blocks';
|
||||
import domReady from '@wordpress/dom-ready';
|
||||
import clsx from 'clsx';
|
||||
|
||||
|
@ -100,6 +99,7 @@ export default function Popup() {
|
|||
reset();
|
||||
close();
|
||||
}}
|
||||
isFullScreen={loading || response?.length}
|
||||
__experimentalHideHeader
|
||||
>
|
||||
{connected ? (
|
||||
|
|
|
@ -5,11 +5,15 @@ $padding: 10px;
|
|||
position: relative;
|
||||
top: 15%;
|
||||
margin-top: 0;
|
||||
width: 650px;
|
||||
width: 550px;
|
||||
max-height: clamp(0px, 440px, 75vh);
|
||||
border-radius: 10px;
|
||||
color: #000;
|
||||
|
||||
&.is-full-screen {
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
.components-modal__content {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue