Commit e96c0af8 authored by Joram Wilander's avatar Joram Wilander Committed by Carlos Tadeu Panato Junior

Fix color settings in the admin console and announcement setting disabling (#1309)

parent 84c73a67
......@@ -1462,21 +1462,21 @@ export default {
label_default: 'Banner Text:',
help_text: 'admin.customization.announcement.bannerTextDesc',
help_text_default: 'Text that will appear in the announcement banner.',
needs: [['EnableBanner', true]],
isDisabled: needsUtils.stateValueFalse('AnnouncementSettings.EnableBanner'),
},
{
type: Constants.SettingsTypes.TYPE_COLOR,
key: 'AnnouncementSettings.BannerColor',
label: 'admin.customization.announcement.bannerColorTitle',
label_default: 'Banner Color:',
needs: [['EnableBanner', true]],
isDisabled: needsUtils.stateValueFalse('AnnouncementSettings.EnableBanner'),
},
{
type: Constants.SettingsTypes.TYPE_COLOR,
key: 'AnnouncementSettings.BannerTextColor',
label: 'admin.customization.announcement.bannerTextColorTitle',
label_default: 'Banner Text Color:',
needs: [['EnableBanner', true]],
isDisabled: needsUtils.stateValueFalse('AnnouncementSettings.EnableBanner'),
},
{
type: Constants.SettingsTypes.TYPE_BOOL,
......@@ -1485,7 +1485,7 @@ export default {
label_default: 'Allow Banner Dismissal:',
help_text: 'admin.customization.announcement.allowBannerDismissalDesc',
help_text_default: 'When true, users can dismiss the banner until its next update. When false, the banner is permanently visible until it is turned off by the System Admin.',
needs: [['EnableBanner', true]],
isDisabled: needsUtils.stateValueFalse('AnnouncementSettings.EnableBanner'),
},
],
},
......
......@@ -70,7 +70,7 @@ export default class ColorSetting extends React.PureComponent {
}
closePicker = (e) => {
if (!e.target.closest('.picker-' + this.props.id)) {
if (!e.target.closest('.' + this.getPickerClass())) {
this.setState({showPicker: false});
}
}
......@@ -79,11 +79,15 @@ export default class ColorSetting extends React.PureComponent {
this.props.onChange(this.props.id, e.target.value);
}
getPickerClass = () => {
return this.props.id ? 'picker-' + this.props.id.replace('.', '-') : '';
}
render() {
let picker;
if (this.state.showPicker) {
picker = (
<div className={'color-picker__popover picker-' + this.props.id}>
<div className={'color-picker__popover ' + this.getPickerClass()}>
<ChromePicker
color={this.props.value}
onChange={this.handleChange}
......@@ -107,7 +111,7 @@ export default class ColorSetting extends React.PureComponent {
disabled={this.props.disabled}
/>
<span
className={'input-group-addon picker-' + this.props.id}
className={'input-group-addon ' + this.getPickerClass()}
onClick={this.togglePicker}
>
<i style={{backgroundColor: this.props.value}}/>
......
......@@ -32,6 +32,47 @@ exports[`components/ColorSetting should match snapshot, all 1`] = `
</Settings>
`;
exports[`components/ColorSetting should match snapshot, clicked on color setting 1`] = `
<Settings
helpText="helptext"
inputId="id"
label="label"
>
<div
className="input-group color-picker colorpicker-element"
>
<input
className="form-control"
disabled={false}
onChange={[Function]}
type="text"
value="#fff"
/>
<span
className="input-group-addon picker-id"
onClick={[Function]}
>
<i
style={
Object {
"backgroundColor": "#fff",
}
}
/>
</span>
<div
className="color-picker__popover picker-id"
>
<ColorPicker
color="#fff"
disableAlpha={false}
onChange={[Function]}
/>
</div>
</div>
</Settings>
`;
exports[`components/ColorSetting should match snapshot, disabled 1`] = `
<Settings
inputId="id"
......
......@@ -52,4 +52,21 @@ describe('components/ColorSetting', () => {
);
expect(wrapper).toMatchSnapshot();
});
test('should match snapshot, clicked on color setting', () => {
function emptyFunction() {} //eslint-disable-line no-empty-function
const wrapper = shallow(
<ColorSetting
id='id'
label='label'
helpText='helptext'
value='#fff'
onChange={emptyFunction}
disabled={false}
/>
);
wrapper.find('.picker-id').first().simulate('click');
expect(wrapper).toMatchSnapshot();
});
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment