treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

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
lolsob-rspec
Stephen Burgess 2017-05-01 12:13:10 -04:00 committed by Eugen Rochko
parent c44ef23e50
commit 747d9809cc
2 changed files with 40 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx
View File

@ -97,7 +97,7 @@ class EmojiPickerDropdown extends React.PureComponent {
<img draggable="false" className="emojione" alt="🙂" src="/emoji/1f602.svg" />
</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} />
</DropdownContent>
</Dropdown>

65
app/assets/stylesheets/components.scss
View File

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