diff --git a/app/soapbox/components/autosuggest_input.js b/app/soapbox/components/autosuggest_input.js index 8b3e5bb96..ab977b0d3 100644 --- a/app/soapbox/components/autosuggest_input.js +++ b/app/soapbox/components/autosuggest_input.js @@ -122,7 +122,7 @@ export default class AutosuggestInput extends ImmutablePureComponent { case 'Enter': case 'Tab': // Select suggestion - if (this.state.lastToken !== null && suggestions.size > 0 && !suggestionsHidden) { + if (suggestions.size > 0 && !suggestionsHidden) { e.preventDefault(); e.stopPropagation(); this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestions.get(selectedSuggestion)); diff --git a/app/styles/application.scss b/app/styles/application.scss index 89d99a949..e8f054202 100644 --- a/app/styles/application.scss +++ b/app/styles/application.scss @@ -30,6 +30,7 @@ @import 'chats'; @import 'navigation'; @import 'placeholder'; +@import 'autosuggest'; // COMPONENTS @import 'components/buttons'; diff --git a/app/styles/autosuggest.scss b/app/styles/autosuggest.scss new file mode 100644 index 000000000..ea322e233 --- /dev/null +++ b/app/styles/autosuggest.scss @@ -0,0 +1,104 @@ +.autosuggest-textarea, +.autosuggest-input, +.spoiler-input { + position: relative; +} + +.autosuggest-textarea__textarea, +.autosuggest-input input, +.react-datepicker__input-container input { + display: block; + box-sizing: border-box; + width: 100%; + margin: 0; + background: transparent; + color: var(--primary-text-color); + padding: 10px; + font-family: inherit; + font-size: 16px; + resize: vertical; + border: 0; + outline: 0; + + &:focus { + outline: 0; + } + + @media screen and (max-width: 600px) { + font-size: 16px; + } +} + +.autosuggest-textarea__textarea { + min-height: 100px; + border-radius: 5px 5px 0 0; + padding-bottom: 0; + padding-right: 10px + 22px; + resize: none; + scrollbar-color: initial; + transition: 0.2s; + + &::-webkit-scrollbar { + all: unset; + } + + @media screen and (max-width: 600px) { + max-height: 100px !important; // prevent auto-resize textarea + resize: vertical; + } +} + +.autosuggest-textarea__suggestions-wrapper { + position: relative; + height: 0; +} + +.autosuggest-textarea__suggestions { + box-sizing: border-box; + display: none; + position: absolute; + top: 100%; + width: 100%; + z-index: 501; /* Above TimelineQueueHeader */ + box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); + background: var(--background-color); + border-radius: 0 0 4px 4px; + font-size: 14px; + padding: 6px; + &.autosuggest-textarea__suggestions--visible { display: block; } +} + +.autosuggest-textarea__suggestions__item { + padding: 10px; + cursor: pointer; + border-radius: 4px; + + &:hover, + &:focus, + &:active, + &.selected { + background: var(--brand-color--med); + } +} + +.autosuggest-account, +.autosuggest-emoji { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + line-height: 18px; + font-size: 14px; +} + +.autosuggest-account-icon, +.autosuggest-emoji img { + display: block; + margin-right: 8px; + width: 16px; + height: 16px; +} + +.autosuggest-account .display-name__account { + color: var(--primary-text-color--faint); +} diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss index cd9e91ec4..73edf3e30 100644 --- a/app/styles/components/compose-form.scss +++ b/app/styles/components/compose-form.scss @@ -70,12 +70,6 @@ position: relative; } - .autosuggest-textarea, - .autosuggest-input, - .spoiler-input { - position: relative; - } - .spoiler-input { height: 0; transform-origin: bottom; @@ -88,51 +82,8 @@ } } - .autosuggest-textarea__textarea, - .spoiler-input__input, - .react-datepicker__input-container input { - display: block; - box-sizing: border-box; - width: 100%; - margin: 0; - background: var(--background-color); - color: var(--primary-text-color); - padding: 10px; - font-family: inherit; - font-size: 16px; - resize: vertical; - border: 0; - outline: 0; - - &:focus { - outline: 0; - } - - @media screen and (max-width: 600px) { - font-size: 16px; - } - } .spoiler-input__input { border-radius: 4px; } - .autosuggest-textarea__textarea { - min-height: 100px; - border-radius: 5px 5px 0 0; - padding-bottom: 0; - padding-right: 10px + 22px; - resize: none; - scrollbar-color: initial; - transition: 0.2s; - - &::-webkit-scrollbar { - all: unset; - } - - @media screen and (max-width: 600px) { - max-height: 100px !important; // prevent auto-resize textarea - resize: vertical; - } - } - &.condensed { .autosuggest-textarea__textarea { min-height: 46px; @@ -140,61 +91,6 @@ } } - .autosuggest-textarea__suggestions-wrapper { - position: relative; - height: 0; - } - - .autosuggest-textarea__suggestions { - box-sizing: border-box; - display: none; - position: absolute; - top: 100%; - width: 100%; - z-index: 501; /* Above TimelineQueueHeader */ - box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); - background: var(--background-color); - border-radius: 0 0 4px 4px; - font-size: 14px; - padding: 6px; - &.autosuggest-textarea__suggestions--visible { display: block; } - } - - .autosuggest-textarea__suggestions__item { - padding: 10px; - cursor: pointer; - border-radius: 4px; - - &:hover, - &:focus, - &:active, - &.selected { - background: var(--brand-color--med); - } - } - - .autosuggest-account, - .autosuggest-emoji { - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - line-height: 18px; - font-size: 14px; - } - - .autosuggest-account-icon, - .autosuggest-emoji img { - display: block; - margin-right: 8px; - width: 16px; - height: 16px; - } - - .autosuggest-account .display-name__account { - color: var(--primary-text-color--faint); - } - &__modifiers { color: var(--primary-text-color); font-family: inherit; diff --git a/app/styles/ui.scss b/app/styles/ui.scss index a6672ce5f..f47c10f87 100644 --- a/app/styles/ui.scss +++ b/app/styles/ui.scss @@ -166,6 +166,15 @@ padding: 0 !important; } + .spoiler-input__input, + .autosuggest-textarea__textarea { + background-color: var(--background-color); + } + + .autosuggest-textarea__textarea { + padding: 14px 32px 13px 10px !important; + } + .compose-form__autosuggest-wrapper { &::before { content: ""; @@ -184,10 +193,6 @@ display: none; } } - - .autosuggest-textarea__textarea { - padding: 14px 32px 13px 10px !important; - } } }