hamptonmoore
/
mastodon
forked from treehouse/mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

highlight … button if any options enabled

signup-info-prompt
Surinna Curtis 2017-07-02 23:34:14 -05:00 committed by Gô Shoemake
parent cb7f54891f
commit 301c185878
2 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/mastodon/features/compose/components/advanced_options_dropdown.js
View File

@ -71,6 +71,8 @@ export default class AdvancedOptionsDropdown extends React.PureComponent {
const options = [ const options = [
{ icon: 'wifi', shortText: messages.local_only_short, longText: messages.local_only_long, key: 'do_not_federate' }, { icon: 'wifi', shortText: messages.local_only_short, longText: messages.local_only_long, key: 'do_not_federate' },
]; ];
const anyEnabled = values.some((enabled) => enabled);
const optionElems = options.map((option) => { const optionElems = options.map((option) => {
const active = values.get(option.key) ? 'active' : ''; const active = values.get(option.key) ? 'active' : '';
return ( return (
@ -86,11 +88,11 @@ export default class AdvancedOptionsDropdown extends React.PureComponent {
); );
}); });
return <div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'active' : ''}`}> return <div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'open' : ''} ${anyEnabled ? 'active' : ''} `}>
<div className='advanced-options-dropdown__value'> <div className='advanced-options-dropdown__value'>
<IconButton className='advanced-options-dropdown__value' <IconButton className='advanced-options-dropdown__value'
title={intl.formatMessage(messages.advanced_options_icon_title)} title={intl.formatMessage(messages.advanced_options_icon_title)}
icon='ellipsis-h' active={open} icon='ellipsis-h' active={open || anyEnabled}
size={18} inverted size={18} inverted
style={iconStyle} style={iconStyle}
onClick={this.onToggleDropdown} /> onClick={this.onToggleDropdown} />

2
app/javascript/styles/components.scss
View File

@ -2941,7 +2941,9 @@ button.icon-button.active i.fa-retweet {
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
} }
}
.advanced-options-dropdown.open {
.advanced-options-dropdown__dropdown { .advanced-options-dropdown__dropdown {
display: block; display: block;
box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1); box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);