ReplyEditor: only show toolbar when active

This commit is contained in:
thislight 2024-09-28 12:43:12 +08:00
parent 2f8613c4fe
commit baf0ed1447
2 changed files with 40 additions and 34 deletions

View file

@ -229,51 +229,56 @@ const ReplyEditor: Component<{
onClick={(e) => inputRef.focus()} onClick={(e) => inputRef.focus()}
> >
<div class={tootComposers.replyInput}> <div class={tootComposers.replyInput}>
<Avatar src={props.profile.inf?.avatar} sx={{marginLeft: '-0.25em'}} /> <Avatar
src={props.profile.inf?.avatar}
sx={{ marginLeft: "-0.25em" }}
/>
<textarea <textarea
ref={inputRef!} ref={inputRef!}
placeholder={`Reply to ${props.replyToDisplayName}...`} placeholder={`Reply to ${props.replyToDisplayName}...`}
style={{ width: "100%", border: "none" }} style={{ width: "100%", border: "none" }}
></textarea> ></textarea>
<IconButton sx={{marginRight: '-0.5em'}}> <IconButton sx={{ marginRight: "-0.5em" }}>
<Send /> <Send />
</IconButton> </IconButton>
</div> </div>
<div <Show when={typing()}>
style={{ <div
display: "flex", style={{
"justify-content": "flex-end", display: "flex",
"margin-top": "8px", "justify-content": "flex-end",
gap: "16px", "margin-top": "8px",
"flex-flow": "row wrap", gap: "16px",
}} "flex-flow": "row wrap",
> }}
<Button onClick={[setLangPickerOpen, true]}> >
<Translate sx={{ marginTop: "-0.25em", marginRight: "0.25em" }} /> <Button onClick={[setLangPickerOpen, true]}>
{iso639_1.getNativeName(language())} <Translate sx={{ marginTop: "-0.25em", marginRight: "0.25em" }} />
<ArrowDropDown sx={{ marginTop: "-0.25em" }} /> {iso639_1.getNativeName(language())}
</Button> <ArrowDropDown sx={{ marginTop: "-0.25em" }} />
<Button onClick={[setPermPicker, true]}> </Button>
<Visibility sx={{ marginTop: "-0.15em", marginRight: "0.25em" }} /> <Button onClick={[setPermPicker, true]}>
{visibilityText()} <Visibility sx={{ marginTop: "-0.15em", marginRight: "0.25em" }} />
<ArrowDropDown sx={{ marginTop: "-0.25em" }} /> {visibilityText()}
</Button> <ArrowDropDown sx={{ marginTop: "-0.25em" }} />
</div> </Button>
</div>
<TootVisibilityPickerDialog <TootVisibilityPickerDialog
open={permPicker()} open={permPicker()}
onClose={() => setPermPicker(false)} onClose={() => setPermPicker(false)}
visibility={visibility()} visibility={visibility()}
onVisibilityChange={setVisibility} onVisibilityChange={setVisibility}
/> />
<TootLanguagePickerDialog <TootLanguagePickerDialog
open={langPickerOpen()} open={langPickerOpen()}
onClose={() => setLangPickerOpen(false)} onClose={() => setLangPickerOpen(false)}
code={language()} code={language()}
onCodeChange={setLanguage} onCodeChange={setLanguage}
/> />
</Show>
</div> </div>
); );
}; };

View file

@ -270,6 +270,7 @@ const TootBottomSheet: Component = (props) => {
)} )}
</For> </For>
</TimeSourceProvider> </TimeSourceProvider>
<div style={{height: "var(--safe-area-inset-bottom, 0)"}}></div>
</Scaffold> </Scaffold>
); );
}; };