highlight … button if any options enabled
parent
cb7f54891f
commit
301c185878
|
@ -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} />
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue