miklo
/
soapbox
sforkowany z mirror/soapbox
1
0
Forkuj 0
Kod Zgłoszenia Oczekujące zmiany Packages Projekty Wydania Wiki Aktywność

AutosuggestInput: refactor CSS, fix hotkeys

profile-avatar-switcher
Alex Gleason 2021-10-14 10:57:06 -05:00
rodzic f6f410d276
commit b0b13e9e59
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
5 zmienionych plików z 115 dodań i 109 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
app/soapbox/components/autosuggest_input.js
Wyświetl plik

@ -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));

1
app/styles/application.scss
Wyświetl plik

@ -30,6 +30,7 @@
@import 'chats';
@import 'navigation';
@import 'placeholder';
@import 'autosuggest';
// COMPONENTS
@import 'components/buttons';

104
app/styles/autosuggest.scss 100644
Wyświetl plik

@ -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);
}

104
app/styles/components/compose-form.scss
Wyświetl plik

@ -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;

13
app/styles/ui.scss
Wyświetl plik

@ -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;
}
}
}