ReplyEditor: only show toolbar when active
This commit is contained in:
		
							parent
							
								
									5c2ebada28
								
							
						
					
					
						commit
						2c0978b572
					
				
					 2 changed files with 40 additions and 34 deletions
				
			
		| 
						 | 
					@ -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>
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -270,6 +270,7 @@ const TootBottomSheet: Component = (props) => {
 | 
				
			||||||
          )}
 | 
					          )}
 | 
				
			||||||
        </For>
 | 
					        </For>
 | 
				
			||||||
      </TimeSourceProvider>
 | 
					      </TimeSourceProvider>
 | 
				
			||||||
 | 
					      <div style={{height: "var(--safe-area-inset-bottom, 0)"}}></div>
 | 
				
			||||||
    </Scaffold>
 | 
					    </Scaffold>
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue