diff --git a/packages/strapi-plugin-settings-manager/admin/src/components/Button/index.js b/packages/strapi-plugin-settings-manager/admin/src/components/Button/index.js index 675dc769b6..4d6da25f1c 100755 --- a/packages/strapi-plugin-settings-manager/admin/src/components/Button/index.js +++ b/packages/strapi-plugin-settings-manager/admin/src/components/Button/index.js @@ -6,6 +6,7 @@ import React from 'react'; import PropTypes from 'prop-types'; +import cn from 'classnames'; import { FormattedMessage } from 'react-intl'; import styles from './styles.scss'; @@ -16,9 +17,23 @@ class Button extends React.Component { const addShape = this.props.addShape ? : ''; const buttonProps = Object.assign({}, this.props); - const propsToDelete = ['addShape', 'buttonBackground', 'buttonSize', 'handlei18n', 'label']; + const propsToDelete = ['addShape', 'buttonBackground', 'buttonSize', 'handlei18n', 'label', 'loader']; propsToDelete.map((value) => delete buttonProps[value]); + + if (this.props.loader) { + return ( + + + + + + ) + } return ( {addShape}{label} @@ -33,6 +48,7 @@ Button.propTypes = { buttonSize: PropTypes.string, handlei18n: PropTypes.bool, label: PropTypes.string, + loader: PropTypes.bool, }; export default Button; diff --git a/packages/strapi-plugin-settings-manager/admin/src/components/Button/styles.scss b/packages/strapi-plugin-settings-manager/admin/src/components/Button/styles.scss index b4410e0c7e..50d7b9cd22 100755 --- a/packages/strapi-plugin-settings-manager/admin/src/components/Button/styles.scss +++ b/packages/strapi-plugin-settings-manager/admin/src/components/Button/styles.scss @@ -46,7 +46,6 @@ } .secondary { - // height: 32px !important; color: #F64D0A; border: 0.1rem solid #F64D0A; position: relative; @@ -67,3 +66,58 @@ padding-left: 1.6rem; padding-right: 1.6rem; } + +@keyframes blink { + 0% { + opacity: .2; + } + 20% { + opacity: 1; + } + 100% { + opacity: .2; + } +} + +.saving { + height: 3rem; + display: flex; + justify-content: center; +} + +.loader { + height: 3rem; + padding: 0 0 0 1.2rem; + line-height: 3.2rem; + border-radius: 0.3rem; + letter-spacing: 1rem; + font-family: Lato; + cursor: not-allowed; + position: relative; + opacity: .65; + width: 15rem; + font-size: 1rem; + &:focus { + outline: 0; + } +} + +.saving p { + margin-bottom: 0; + animation-name: blink; + animation-duration: 1.4s; + animation-iteration-count: infinite; + animation-fill-mode: both; + &::before { + content: '\F111'; + font-family: 'FontAwesome'; + } +} + +.saving p:nth-child(2) { + animation-delay: .2s; +} + +.saving p:nth-child(3) { + animation-delay: .4s; +} diff --git a/packages/strapi-plugin-settings-manager/admin/src/components/EditForm/index.js b/packages/strapi-plugin-settings-manager/admin/src/components/EditForm/index.js index 027a83bb98..c06834ab05 100755 --- a/packages/strapi-plugin-settings-manager/admin/src/components/EditForm/index.js +++ b/packages/strapi-plugin-settings-manager/admin/src/components/EditForm/index.js @@ -14,6 +14,7 @@ import styles from './styles.scss'; class EditForm extends React.Component { // eslint-disable-line react/prefer-stateless-function render() { + const buttonStyle = this.props.showLoader ? { display: 'none' } : {}; return ( @@ -41,12 +42,12 @@ class EditForm extends React.Component { // eslint-disable-line react/prefer-sta {(message) => ( - + )} {(message) => ( - + )} @@ -63,6 +64,7 @@ EditForm.propTypes = { handleChange: PropTypes.func, handleSubmit: PropTypes.func, sections: PropTypes.array, + showLoader: PropTypes.bool, values: PropTypes.object, }; diff --git a/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/actions.js b/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/actions.js index 38221cf561..e0be7f402e 100755 --- a/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/actions.js +++ b/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/actions.js @@ -33,6 +33,8 @@ import { DATABASE_ACTION_ERROR, EMPTY_DB_MODIFIED_DATA, SET_ERRORS, + SET_LOADER, + UNSET_LOADER, } from './constants'; export function defaultAction() { @@ -300,3 +302,15 @@ export function setErrors(errors) { errors, }; } + +export function setLoader() { + return { + type: SET_LOADER, + }; +} + +export function unsetLoader() { + return { + type: UNSET_LOADER, + }; +} diff --git a/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/constants.js b/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/constants.js index 1e95f2603c..ec40dd48cd 100755 --- a/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/constants.js +++ b/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/constants.js @@ -30,3 +30,5 @@ export const DATABASE_EDIT = 'SettingsManager/HomePage/DATABASE_EDIT'; export const DATABASE_ACTION_ERROR = 'SettingsManager/HomePage/DATABASE_ACTION_ERROR'; export const EMPTY_DB_MODIFIED_DATA = 'SettingsManager/HomePage/EMPTY_DB_MODIFIED_DATA'; export const SET_ERRORS = 'SettingsManager/HomePage/SET_ERRORS'; +export const SET_LOADER = 'SettingsManager/HomePage/SET_LOADER'; +export const UNSET_LOADER = 'SettingsManager/HomePage/UNSET_LOADER'; diff --git a/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/index.js b/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/index.js index f550cb653b..11e32be7c6 100755 --- a/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/index.js +++ b/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/index.js @@ -439,6 +439,7 @@ export class HomePage extends React.Component { // eslint-disable-line react/pre addListTitleMarginTop={addListTitleMarginTop} formErrors={this.props.home.formErrors} error={this.props.home.error} + showLoader={this.props.home.showLoader} /> ); } @@ -547,7 +548,6 @@ HomePage.propTypes = { menuSections: PropTypes.array.isRequired, newDatabasePost: PropTypes.func.isRequired, newLanguagePost: PropTypes.func.isRequired, - // params: PropTypes.func.isRequired, setErrors: PropTypes.func.isRequired, specificDatabaseFetch: PropTypes.func.isRequired, }; diff --git a/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/reducer.js b/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/reducer.js index f1691ff1fc..e0e5876f62 100755 --- a/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/reducer.js +++ b/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/reducer.js @@ -24,6 +24,8 @@ import { NEW_LANGUAGE_POST, EMPTY_DB_MODIFIED_DATA, SET_ERRORS, + SET_LOADER, + UNSET_LOADER, } from './constants'; /* eslint-disable new-cap */ @@ -43,6 +45,7 @@ const initialState = fromJS({ formValidations: [], formErrors: [], error: false, + showLoader: false, }); /* eslint-disable no-case-declarations */ @@ -140,6 +143,10 @@ function homePageReducer(state = initialState, action) { case SET_ERRORS: return state .set('formErrors', action.errors) + case SET_LOADER: + return state.set('showLoader', true); + case UNSET_LOADER: + return state.set('showLoader', false); default: return state; } diff --git a/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/sagas.js b/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/sagas.js index 576333999f..9f57b484f6 100755 --- a/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/sagas.js +++ b/packages/strapi-plugin-settings-manager/admin/src/containers/HomePage/sagas.js @@ -30,6 +30,8 @@ import { databaseActionSucceeded, specificDatabaseFetchSucceeded, databaseActionError, + unsetLoader, + setLoader, } from './actions'; /* eslint-disable no-template-curly-in-string */ @@ -240,6 +242,9 @@ export function* postDatabase(action) { export function* settingsEdit(action) { try { + // Show button loader + yield put(setLoader()); + const opts = { body: action.newSettings, method: 'PUT', @@ -252,11 +257,13 @@ export function* settingsEdit(action) { if (resp.ok) { window.Strapi.notification.success('settings-manager.strapi.notification.success.settingsEdit'); yield put(editSettingsSucceeded()); + yield put(unsetLoader()); } } catch(error) { window.Strapi.notification.error('settings-manager.strapi.notification.error'); + yield put(unsetLoader()); } }