bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Snackbar: clean up styles, basic functionality

Browse source
This commit is contained in:
Alex Gleason 2020-09-29 18:55:05 -05:00
parent a999c5d8ce
commit b782f6ab1a
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
4 changed files with 23 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/soapbox/actions/alerts.js
View file

@ -1,4 +1,3 @@
//test
import { defineMessages } from 'react-intl'; import { defineMessages } from 'react-intl';
const messages = defineMessages({ const messages = defineMessages({
@ -23,11 +22,12 @@ export function clearAlert() {
}; };
}; };
export function showAlert(title = messages.unexpectedTitle, message = messages.unexpectedMessage) { export function showAlert(title = messages.unexpectedTitle, message = messages.unexpectedMessage, severity = 'info') {
return { return {
type: ALERT_SHOW, type: ALERT_SHOW,
title, title,
message, message,
severity,
}; };
}; };
@ -47,9 +47,9 @@ export function showAlertForError(error) {
message = data.error; message = data.error;
} }
return showAlert(title, message); return showAlert(title, message, 'error');
} else { } else {
console.error(error); console.error(error);
return showAlert(); return showAlert(undefined, undefined, 'error');
} }
} }

14
app/soapbox/features/security/index.js
View file

@ -20,7 +20,7 @@ import {
deleteAccount, deleteAccount,
} from 'soapbox/actions/auth'; } from 'soapbox/actions/auth';
import { fetchUserMfaSettings } from '../../actions/mfa'; import { fetchUserMfaSettings } from '../../actions/mfa';
import { showAlert } from 'soapbox/actions/alerts'; import snackbar from 'soapbox/actions/snackbar';
import { changeSetting, getSettings } from 'soapbox/actions/settings'; import { changeSetting, getSettings } from 'soapbox/actions/settings';
/* /*
@ -119,10 +119,10 @@ class ChangeEmailForm extends ImmutablePureComponent {
this.setState({ isLoading: true }); this.setState({ isLoading: true });
return dispatch(changeEmail(email, password)).then(() => { return dispatch(changeEmail(email, password)).then(() => {
this.setState({ email: '', password: '' }); // TODO: Maybe redirect user this.setState({ email: '', password: '' }); // TODO: Maybe redirect user
dispatch(showAlert('', intl.formatMessage(messages.updateEmailSuccess))); dispatch(snackbar.success(intl.formatMessage(messages.updateEmailSuccess)));
}).catch(error => { }).catch(error => {
this.setState({ password: '' }); this.setState({ password: '' });
dispatch(showAlert('', intl.formatMessage(messages.updateEmailFail))); dispatch(snackbar.error(intl.formatMessage(messages.updateEmailFail)));
}).then(() => { }).then(() => {
this.setState({ isLoading: false }); this.setState({ isLoading: false });
}); });
@ -193,10 +193,10 @@ class ChangePasswordForm extends ImmutablePureComponent {
this.setState({ isLoading: true }); this.setState({ isLoading: true });
return dispatch(changePassword(oldPassword, newPassword, confirmation)).then(() => { return dispatch(changePassword(oldPassword, newPassword, confirmation)).then(() => {
this.clearForm(); // TODO: Maybe redirect user this.clearForm(); // TODO: Maybe redirect user
dispatch(showAlert('', intl.formatMessage(messages.updatePasswordSuccess))); dispatch(snackbar.success(intl.formatMessage(messages.updatePasswordSuccess)));
}).catch(error => { }).catch(error => {
this.clearForm(); this.clearForm();
dispatch(showAlert('', intl.formatMessage(messages.updatePasswordFail))); dispatch(snackbar.error(intl.formatMessage(messages.updatePasswordFail)));
}).then(() => { }).then(() => {
this.setState({ isLoading: false }); this.setState({ isLoading: false });
}); });
@ -374,10 +374,10 @@ class DeactivateAccount extends ImmutablePureComponent {
this.setState({ isLoading: true }); this.setState({ isLoading: true });
return dispatch(deleteAccount(password)).then(() => { return dispatch(deleteAccount(password)).then(() => {
//this.setState({ email: '', password: '' }); // TODO: Maybe redirect user //this.setState({ email: '', password: '' }); // TODO: Maybe redirect user
dispatch(showAlert('', intl.formatMessage(messages.deleteAccountSuccess))); dispatch(snackbar.success(intl.formatMessage(messages.deleteAccountSuccess)));
}).catch(error => { }).catch(error => {
this.setState({ password: '' }); this.setState({ password: '' });
dispatch(showAlert('', intl.formatMessage(messages.deleteAccountFail))); dispatch(snackbar.error(intl.formatMessage(messages.deleteAccountFail)));
}).then(() => { }).then(() => {
this.setState({ isLoading: false }); this.setState({ isLoading: false });
}); });

10
app/soapbox/features/ui/containers/notifications_container.js
View file

@ -4,6 +4,14 @@ import { NotificationStack } from 'react-notification';
import { dismissAlert } from '../../../actions/alerts'; import { dismissAlert } from '../../../actions/alerts';
import { getAlerts } from '../../../selectors'; import { getAlerts } from '../../../selectors';
const defaultBarStyleFactory = (index, style, notification) => {
return Object.assign(
{},
style,
{ bottom: `${14 + index * 12 + index * 42}px` }
);
};
const mapStateToProps = (state, { intl }) => { const mapStateToProps = (state, { intl }) => {
const notifications = getAlerts(state); const notifications = getAlerts(state);
@ -23,6 +31,8 @@ const mapDispatchToProps = (dispatch) => {
onDismiss: alert => { onDismiss: alert => {
dispatch(dismissAlert(alert)); dispatch(dismissAlert(alert));
}, },
barStyleFactory: defaultBarStyleFactory,
activeBarStyleFactory: defaultBarStyleFactory,
}; };
}; };

4
app/styles/components/snackbar.scss
View file

@ -13,7 +13,7 @@
} }
&--info { &--info {
background-color: blue !important; background-color: #19759e !important;
&::before { &::before {
content: ''; content: '';
@ -29,7 +29,7 @@
} }
&--error { &--error {
background-color: red !important; background-color: #9e1919 !important;
&::before { &::before {
content: ''; content: '';