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()}
>
<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
ref={inputRef!}
placeholder={`Reply to ${props.replyToDisplayName}...`}
style={{ width: "100%", border: "none" }}
></textarea>
<IconButton sx={{marginRight: '-0.5em'}}>
<IconButton sx={{ marginRight: "-0.5em" }}>
<Send />
</IconButton>
</div>
<div
style={{
display: "flex",
"justify-content": "flex-end",
"margin-top": "8px",
gap: "16px",
"flex-flow": "row wrap",
}}
>
<Button onClick={[setLangPickerOpen, true]}>
<Translate sx={{ marginTop: "-0.25em", marginRight: "0.25em" }} />
{iso639_1.getNativeName(language())}
<ArrowDropDown sx={{ marginTop: "-0.25em" }} />
</Button>
<Button onClick={[setPermPicker, true]}>
<Visibility sx={{ marginTop: "-0.15em", marginRight: "0.25em" }} />
{visibilityText()}
<ArrowDropDown sx={{ marginTop: "-0.25em" }} />
</Button>
</div>
<Show when={typing()}>
<div
style={{
display: "flex",
"justify-content": "flex-end",
"margin-top": "8px",
gap: "16px",
"flex-flow": "row wrap",
}}
>
<Button onClick={[setLangPickerOpen, true]}>
<Translate sx={{ marginTop: "-0.25em", marginRight: "0.25em" }} />
{iso639_1.getNativeName(language())}
<ArrowDropDown sx={{ marginTop: "-0.25em" }} />
</Button>
<Button onClick={[setPermPicker, true]}>
<Visibility sx={{ marginTop: "-0.15em", marginRight: "0.25em" }} />
{visibilityText()}
<ArrowDropDown sx={{ marginTop: "-0.25em" }} />
</Button>
</div>
<TootVisibilityPickerDialog
open={permPicker()}
onClose={() => setPermPicker(false)}
visibility={visibility()}
onVisibilityChange={setVisibility}
/>
<TootVisibilityPickerDialog
open={permPicker()}
onClose={() => setPermPicker(false)}
visibility={visibility()}
onVisibilityChange={setVisibility}
/>
<TootLanguagePickerDialog
open={langPickerOpen()}
onClose={() => setLangPickerOpen(false)}
code={language()}
onCodeChange={setLanguage}
/>
<TootLanguagePickerDialog
open={langPickerOpen()}
onClose={() => setLangPickerOpen(false)}
code={language()}
onCodeChange={setLanguage}
/>
</Show>
</div>
);
};

View file

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