fix(dropdowns): Allow for dropdowns to fill full column (#2684)

* fix(dropdowns): Allow for dropdowns to fill full column

When the text inside a dropdown is longer than it is for English, the text is truncated which can result in a less-than-usable experience for languages such as German with longer words. This commit addresses the following:

* Allow the dropdown to expand to the entire width of the column based on the length of the text in the dropdown
* Align active dropdown arrow in relation to the trigger rather than the dropdown
* Show the right hand side of the dropdown which was previously hidden (could not see border radius)
* Ensure the three places dropdowns of status, account, and emoji appear well in Chrome, Firefox, Safari

* fix(emoji-dropdown): Restore emoji dropdown caret
This commit is contained in:
Stephen Burgess 2017-05-01 12:13:10 -04:00 committed by Eugen Rochko
parent f025cc6782
commit 33b9e8d461
2 changed files with 40 additions and 27 deletions

View file

@ -97,7 +97,7 @@ class EmojiPickerDropdown extends React.PureComponent {
<img draggable="false" className="emojione" alt="🙂" src="/emoji/1f602.svg" /> <img draggable="false" className="emojione" alt="🙂" src="/emoji/1f602.svg" />
</DropdownTrigger> </DropdownTrigger>
<DropdownContent className='dropdown__left light'> <DropdownContent className='dropdown__left'>
<EmojiPicker emojione={settings} onChange={this.handleChange} searchPlaceholder={intl.formatMessage(messages.emoji_search)} categories={categories} search={true} /> <EmojiPicker emojione={settings} onChange={this.handleChange} searchPlaceholder={intl.formatMessage(messages.emoji_search)} categories={categories} search={true} />
</DropdownContent> </DropdownContent>
</Dropdown> </Dropdown>

View file

@ -181,6 +181,19 @@
color: $color4; color: $color4;
} }
.dropdown--active:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4.5px 7.8px 4.5px;
border-color: transparent transparent $color2 transparent;
bottom: 8px;
right: 104px;
}
.invisible { .invisible {
font-size: 0; font-size: 0;
line-height: 0; line-height: 0;
@ -317,6 +330,12 @@
.compose-form__autosuggest-wrapper { .compose-form__autosuggest-wrapper {
position: relative; position: relative;
.dropdown--active:after {
border-color: transparent transparent $color5 transparent;
bottom: -1px;
right: 8px;
}
} }
.compose-form__publish { .compose-form__publish {
@ -563,7 +582,6 @@ a.status__content__spoiler-link {
align-items: center; align-items: center;
display: flex; display: flex;
margin-top: 10px; margin-top: 10px;
overflow: hidden;
} }
.status__action-bar-button-wrapper { .status__action-bar-button-wrapper {
@ -737,6 +755,20 @@ a.status__content__spoiler-link {
.account__action-bar-dropdown { .account__action-bar-dropdown {
flex: 1 1 auto; flex: 1 1 auto;
padding: 10px; padding: 10px;
.dropdown--active {
.dropdown__content.dropdown__right {
left: 6px;
right: initial;
}
&:after {
bottom: initial;
margin-left: 11px;
margin-top: -7px;
right: initial;
}
}
} }
.account__action-bar-links { .account__action-bar-links {
@ -1009,28 +1041,11 @@ a.status__content__spoiler-link {
.dropdown--active .dropdown__content { .dropdown--active .dropdown__content {
display: block; display: block;
line-height: 18px; line-height: 18px;
max-width: 311px;
right: 0;
text-align: left; text-align: left;
z-index: 9999; z-index: 9999;
&:before {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4.5px 7.8px 4.5px;
border-color: transparent transparent $color2 transparent;
top: -7px;
left: 8px;
}
&.light {
&:before {
border-color: transparent transparent $color5 transparent;
}
}
& > ul { & > ul {
list-style: none; list-style: none;
background: $color2; background: $color2;
@ -1039,17 +1054,16 @@ a.status__content__spoiler-link {
box-shadow: 0 0 15px rgba($color8, 0.4); box-shadow: 0 0 15px rgba($color8, 0.4);
min-width: 140px; min-width: 140px;
position: relative; position: relative;
left: -10px; }
&.dropdown__right {
right: 0;
} }
&.dropdown__left { &.dropdown__left {
& > ul { & > ul {
left: -98px; left: -98px;
} }
& > .emoji-dialog {
left: -210px;
}
} }
& > ul > li > a { & > ul > li > a {
@ -1058,7 +1072,6 @@ a.status__content__spoiler-link {
display: block; display: block;
padding: 4px 14px; padding: 4px 14px;
box-sizing: border-box; box-sizing: border-box;
width: 140px;
text-decoration: none; text-decoration: none;
background: $color2; background: $color2;
color: $color1; color: $color1;