diff options
Diffstat (limited to 'app')
4 files changed, 95 insertions, 58 deletions
diff --git a/app/javascript/mastodon/components/autosuggest_textarea.js b/app/javascript/mastodon/components/autosuggest_textarea.js index f3fb7fa8b..5cad43e82 100644 --- a/app/javascript/mastodon/components/autosuggest_textarea.js +++ b/app/javascript/mastodon/components/autosuggest_textarea.js @@ -189,7 +189,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent { } render () { - const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus } = this.props; + const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, children } = this.props; const { suggestionsHidden } = this.state; const style = { direction: 'ltr' }; @@ -197,34 +197,38 @@ export default class AutosuggestTextarea extends ImmutablePureComponent { style.direction = 'rtl'; } - return ( - <div className='autosuggest-textarea'> - <label> - <span style={{ display: 'none' }}>{placeholder}</span> - - <Textarea - inputRef={this.setTextarea} - className='autosuggest-textarea__textarea' - disabled={disabled} - placeholder={placeholder} - autoFocus={autoFocus} - value={value} - onChange={this.onChange} - onKeyDown={this.onKeyDown} - onKeyUp={onKeyUp} - onFocus={this.onFocus} - onBlur={this.onBlur} - onPaste={this.onPaste} - style={style} - aria-autocomplete='list' - /> - </label> - + return [ + <div className='compose-form__autosuggest-wrapper'> + <div className='autosuggest-textarea'> + <label> + <span style={{ display: 'none' }}>{placeholder}</span> + + <Textarea + inputRef={this.setTextarea} + className='autosuggest-textarea__textarea' + disabled={disabled} + placeholder={placeholder} + autoFocus={autoFocus} + value={value} + onChange={this.onChange} + onKeyDown={this.onKeyDown} + onKeyUp={onKeyUp} + onFocus={this.onFocus} + onBlur={this.onBlur} + onPaste={this.onPaste} + style={style} + aria-autocomplete='list' + /> + </label> + </div> + {children} + </div>, + <div className='autosuggest-textarea__suggestions-wrapper'> <div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}> {suggestions.map(this.renderSuggestion)} </div> - </div> - ); + </div>, + ]; } } diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js index cf82ef5a8..eff193929 100644 --- a/app/javascript/mastodon/features/compose/components/compose_form.js +++ b/app/javascript/mastodon/features/compose/components/compose_form.js @@ -200,29 +200,29 @@ class ComposeForm extends ImmutablePureComponent { /> </div> - <div className='compose-form__autosuggest-wrapper'> - <AutosuggestTextarea - ref={this.setAutosuggestTextarea} - placeholder={intl.formatMessage(messages.placeholder)} - disabled={disabled} - value={this.props.text} - onChange={this.handleChange} - suggestions={this.props.suggestions} - onKeyDown={this.handleKeyDown} - onSuggestionsFetchRequested={this.onSuggestionsFetchRequested} - onSuggestionsClearRequested={this.onSuggestionsClearRequested} - onSuggestionSelected={this.onSuggestionSelected} - onPaste={onPaste} - autoFocus={!showSearch && !isMobile(window.innerWidth)} - /> - + <div className='emoji-picker-wrapper'> <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} /> </div> - <div className='compose-form__modifiers'> - <UploadFormContainer /> - <PollFormContainer /> - </div> + <AutosuggestTextarea + ref={this.setAutosuggestTextarea} + placeholder={intl.formatMessage(messages.placeholder)} + disabled={disabled} + value={this.props.text} + onChange={this.handleChange} + suggestions={this.props.suggestions} + onKeyDown={this.handleKeyDown} + onSuggestionsFetchRequested={this.onSuggestionsFetchRequested} + onSuggestionsClearRequested={this.onSuggestionsClearRequested} + onSuggestionSelected={this.onSuggestionSelected} + onPaste={onPaste} + autoFocus={!showSearch && !isMobile(window.innerWidth)} + > + <div className='compose-form__modifiers'> + <UploadFormContainer /> + <PollFormContainer /> + </div> + </AutosuggestTextarea> <div className='compose-form__buttons-wrapper'> <div className='compose-form__buttons'> diff --git a/app/javascript/mastodon/features/ui/components/compose_panel.js b/app/javascript/mastodon/features/ui/components/compose_panel.js index c456a6400..a05fbbe39 100644 --- a/app/javascript/mastodon/features/ui/components/compose_panel.js +++ b/app/javascript/mastodon/features/ui/components/compose_panel.js @@ -9,9 +9,6 @@ const ComposePanel = () => ( <SearchContainer openInRoute /> <NavigationContainer /> <ComposeFormContainer /> - - <div className='flex-spacer' /> - <LinkFooter withHotkeys /> </div> ); diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index e234c39e1..569ccd33d 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -333,14 +333,15 @@ } } + .emoji-picker-dropdown { + position: absolute; + top: 5px; + right: 5px; + z-index: 1; + } + .compose-form__autosuggest-wrapper { position: relative; - - .emoji-picker-dropdown { - position: absolute; - right: 5px; - top: 5px; - } } .autosuggest-textarea, @@ -355,7 +356,8 @@ opacity: 0.0; &.spoiler-input--visible { - height: 47px; + height: 36px; + margin-bottom: 11px; opacity: 1.0; } } @@ -406,6 +408,12 @@ } } + .emoji-picker-wrapper, + .autosuggest-textarea__suggestions-wrapper { + position: relative; + height: 0; + } + .autosuggest-textarea__suggestions { box-sizing: border-box; display: none; @@ -566,6 +574,7 @@ border-radius: 0 0 4px 4px; display: flex; justify-content: space-between; + flex: 0 0 auto; .compose-form__buttons { display: flex; @@ -614,6 +623,7 @@ display: flex; justify-content: flex-end; min-width: 0; + flex: 0 0 auto; .compose-form__publish-button-wrapper { overflow: hidden; @@ -644,6 +654,9 @@ margin-bottom: 10px; background: $ui-primary-color; padding: 10px; + min-height: 23px; + overflow-y: auto; + flex: 0 2 auto; } .reply-indicator__header { @@ -2184,7 +2197,8 @@ a.account__display-name { margin-top: 10px; display: flex; flex-direction: column; - height: 100%; + height: calc(100% - 10px); + overflow-y: hidden; .search__input { line-height: 18px; @@ -2200,14 +2214,33 @@ a.account__display-name { .navigation-bar { padding-top: 20px; padding-bottom: 20px; + flex: 0 1 48px; + min-height: 20px; } .flex-spacer { background: transparent; } + .compose-form { + flex: 1; + overflow-y: hidden; + display: flex; + flex-direction: column; + min-height: 310px; + padding-bottom: 71px; + margin-bottom: -71px; + } + + .compose-form__autosuggest-wrapper { + overflow-y: auto; + background-color: $white; + border-radius: 4px 4px 0 0; + flex: 0 1 auto; + } + .autosuggest-textarea__textarea { - max-height: 200px; + overflow-y: hidden; } .compose-form__upload-thumbnail { @@ -2217,6 +2250,9 @@ a.account__display-name { .navigation-panel { margin-top: 10px; + margin-bottom: 10px; + height: calc(100% - 20px); + overflow-y: auto; hr { border: 0; |