diff options
Diffstat (limited to 'src/client/views/nodes')
| -rw-r--r-- | src/client/views/nodes/DocumentView.scss | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/ImageBox.scss | 8 | ||||
| -rw-r--r-- | src/client/views/nodes/ImageBox.tsx | 49 |
3 files changed, 39 insertions, 20 deletions
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index a3d47290a..e71f391c6 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -276,11 +276,13 @@ right: 0; top: 0; overflow-y: scroll; + scrollbar-width: thin; } .documentView-editorView { width: 100%; overflow-y: scroll; + scrollbar-width: thin; justify-items: center; background-color: rgb(223, 223, 223); diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss index 1b6b3c85a..759f2584b 100644 --- a/src/client/views/nodes/ImageBox.scss +++ b/src/client/views/nodes/ImageBox.scss @@ -144,16 +144,20 @@ display: flex; flex-direction: column; align-items: center; - padding: 5 0 0 5; - gap: 5px; + text-align: center; .imageBox-aiView-img { width: 100%; + padding: 5px; &:hover { filter: brightness(0.8); } } + + .imageBox-aiView-caption { + font-size: 7px; + } } .imageBox-aiView { diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 9838af4d0..8a7fb99b1 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -536,23 +536,35 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { } componentAIViewHistory = () => { + const imgs: FireflyImageData[] = this.dataDoc.ai_firefly_history ? JSON.parse(StrCast(this.dataDoc.ai_firefly_history)) : []; return ( - <div className="imageBox-aiView-history"> - <Button text="Clear History" type={Type.SEC} size={Size.XSMALL} /> - {this._prevImgs.map(img => ( - <div key={img.pathname}> - <img - className="imageBox-aiView-img" - src={img.href} - onClick={() => { - this.dataDoc[this.fieldKey] = new ImageField(img.pathname); - this.dataDoc.ai_firefly_prompt = img.prompt; - this.dataDoc.ai_firefly_seed = img.seed; - }} - /> - <text>{img.prompt}</text> - </div> - ))} + <div className="imageBox-aiView-history" ref={this.createDashEventsTarget}> + <Button + text="Clear History" + type={Type.SEC} + style={{ marginTop: '5px' }} + size={Size.XSMALL} + onClick={action(() => { + this._prevImgs = []; + this.dataDoc.ai_firefly_history = undefined; + })} + /> + {imgs.length >= 2 && + imgs.map(img => ( + <div> + <img + key={img.pathname} + className="imageBox-aiView-img" + src={img.href} + onClick={() => { + this.dataDoc[this.fieldKey] = new ImageField(img.pathname); + this.dataDoc.ai_firefly_prompt = img.prompt; + this.dataDoc.ai_firefly_seed = img.seed; + }} + /> + <text className="imageBox-aiView-caption">{img.prompt.replace(/ ~~~/g, ',')}</text> + </div> + ))} </div> ); }; @@ -562,6 +574,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { const showRegenerate = this.Document[DocData].ai; return ( <div className="imageBox-aiView"> + Edit Image with AI {showRegenerate && ( <div className="imageBox-aiView-regenerate-container"> <div className="imageBox-aiView-regenerate"> @@ -587,9 +600,9 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { const imgField = new ImageField(url); this._prevImgs.length === 0 && this._prevImgs.push({ prompt: StrCast(this.dataDoc.ai_firefly_prompt), seed: this.dataDoc.ai_firefly_seed as number, href: this.paths.lastElement(), pathname: field.url.pathname }); - this._prevImgs.unshift({ prompt: newImgs[0].prompt, seed: newImgs[0].seed, href: this.paths.lastElement(), pathname: url }); - this.dataDoc.ai_firefly_history = `${this._prevImgs}`; this.dataDoc[this.fieldKey] = imgField; + this._prevImgs.unshift({ prompt: newImgs[0].prompt, seed: newImgs[0].seed, href: this.paths.lastElement(), pathname: url }); + this.dataDoc.ai_firefly_history = JSON.stringify(this._prevImgs); this._regenerateLoading = false; this._regenInput = ''; } |