diff options
Diffstat (limited to 'app/javascript/flavours/glitch')
7 files changed, 94 insertions, 58 deletions
diff --git a/app/javascript/flavours/glitch/components/autosuggest_textarea.js b/app/javascript/flavours/glitch/components/autosuggest_textarea.js index cf3907fbf..7a6b9d8ac 100644 --- a/app/javascript/flavours/glitch/components/autosuggest_textarea.js +++ b/app/javascript/flavours/glitch/components/autosuggest_textarea.js @@ -192,7 +192,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' }; @@ -200,34 +200,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/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js index 0120be28f..87ab2aa04 100644 --- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js +++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js @@ -335,32 +335,31 @@ class ComposeForm extends ImmutablePureComponent { /> </div> - <div className='composer--textarea'> - <TextareaIcons advancedOptions={advancedOptions} /> - - <AutosuggestTextarea - ref={this.setAutosuggestTextarea} - placeholder={intl.formatMessage(messages.placeholder)} - disabled={isSubmitting} - value={this.props.text} - onChange={this.handleChange} - suggestions={this.props.suggestions} - onFocus={this.handleFocus} - onKeyDown={this.handleKeyDown} - onSuggestionsFetchRequested={onFetchSuggestions} - onSuggestionsClearRequested={onClearSuggestions} - onSuggestionSelected={this.onSuggestionSelected} - onPaste={onPaste} - autoFocus={!showSearch && !isMobile(window.innerWidth, layout)} - /> - + <div className='emoji-picker-wrapper'> <EmojiPicker onPickEmoji={handleEmoji} /> </div> - <div className='compose-form__modifiers'> - <UploadFormContainer /> - <PollFormContainer /> - </div> + <AutosuggestTextarea + ref={this.setAutosuggestTextarea} + placeholder={intl.formatMessage(messages.placeholder)} + disabled={isSubmitting} + value={this.props.text} + onChange={this.handleChange} + suggestions={this.props.suggestions} + onFocus={this.handleFocus} + onKeyDown={this.handleKeyDown} + onSuggestionsFetchRequested={onFetchSuggestions} + onSuggestionsClearRequested={onClearSuggestions} + onSuggestionSelected={this.onSuggestionSelected} + onPaste={onPaste} + autoFocus={!showSearch && !isMobile(window.innerWidth, layout)} + > + <TextareaIcons advancedOptions={advancedOptions} /> + <div className='compose-form__modifiers'> + <UploadFormContainer /> + <PollFormContainer /> + </div> + </AutosuggestTextarea> <OptionsContainer advancedOptions={advancedOptions} diff --git a/app/javascript/flavours/glitch/features/ui/components/compose_panel.js b/app/javascript/flavours/glitch/features/ui/components/compose_panel.js index 115f0620c..f5eefee0d 100644 --- a/app/javascript/flavours/glitch/features/ui/components/compose_panel.js +++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js index f08b2dab8..b26956086 100644 --- a/app/javascript/flavours/glitch/features/ui/index.js +++ b/app/javascript/flavours/glitch/features/ui/index.js @@ -320,7 +320,7 @@ export default class UI extends React.Component { handleHotkeyNew = e => { e.preventDefault(); - const element = this.node.querySelector('.composer--textarea textarea'); + const element = this.node.querySelector('.compose-form__autosuggest-wrapper textarea'); if (element) { element.focus(); diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss index ba517a2ab..b2603a008 100644 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ b/app/javascript/flavours/glitch/styles/components/composer.scss @@ -12,7 +12,8 @@ opacity: 0.0; &.composer--spoiler--visible { - height: 47px; + height: 36px; + margin-bottom: 11px; opacity: 1.0; } @@ -98,6 +99,9 @@ border-radius: 4px; padding: 10px; background: $ui-primary-color; + min-height: 23px; + overflow-y: auto; + flex: 0 2 auto; & > header { margin-bottom: 5px; @@ -218,6 +222,7 @@ position: absolute; right: 5px; top: 5px; + z-index: 1; ::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-track:active { @@ -225,7 +230,7 @@ } } -.composer--textarea, +.compose-form__autosuggest-wrapper, .autosuggest-input { position: relative; @@ -284,6 +289,12 @@ } } +.emoji-picker-wrapper, +.autosuggest-textarea__suggestions-wrapper { + position: relative; + height: 0; +} + .autosuggest-textarea__suggestions { display: block; position: absolute; @@ -485,6 +496,7 @@ box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05); border-radius: 0 0 4px 4px; height: 27px; + flex: 0 0 auto; & > * { display: inline-block; @@ -575,6 +587,7 @@ text-align: right; white-space: nowrap; overflow: hidden; + justify-content: flex-end; & > .count { display: inline-block; diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 81098e52c..577a7b85a 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -818,7 +818,8 @@ margin-top: 10px; display: flex; flex-direction: column; - height: 100%; + height: calc(100% - 10px); + overflow-y: hidden; .search__input { line-height: 18px; @@ -834,14 +835,33 @@ .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 { @@ -851,6 +871,9 @@ .navigation-panel { margin-top: 10px; + margin-bottom: 10px; + height: calc(100% - 20px); + overflow-y: auto; hr { border: 0; diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index 3e4a15c9f..7da8edbde 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -125,7 +125,7 @@ // Change the default color of several parts of the compose form .composer { - .composer--spoiler input, .composer--textarea textarea { + .composer--spoiler input, .compose-form__autosuggest-wrapper textarea { color: lighten($ui-base-color, 80%); &:disabled { background: lighten($simple-background-color, 10%) } |