diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/Button/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/Button/index.js index bd76aca605..b021d3a862 100755 --- a/packages/strapi-plugin-content-type-builder/admin/src/components/Button/index.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/Button/index.js @@ -13,6 +13,15 @@ class Button extends React.Component { render() { const label = this.props.handlei18n ? : this.props.label; const addShape = this.props.addShape ? : ''; + if (this.props.loader) { + return ( + + + ... + + + ) + } return ( {addShape}{label} @@ -27,6 +36,7 @@ Button.propTypes = { buttonSize: React.PropTypes.string, handlei18n: React.PropTypes.bool, label: React.PropTypes.string.isRequired, + loader: React.PropTypes.bool, }; export default Button; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/Button/styles.scss b/packages/strapi-plugin-content-type-builder/admin/src/components/Button/styles.scss index 508eeff5bc..d73493b075 100755 --- a/packages/strapi-plugin-content-type-builder/admin/src/components/Button/styles.scss +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/Button/styles.scss @@ -67,3 +67,50 @@ padding-left: 1.6rem; padding-right: 1.6rem; } + +@keyframes blink { + 0% { + opacity: .2; + } + 20% { + opacity: 1; + } + 100% { + opacity: .2; + } +} + +.saving { + margin-top: -2rem; + line-height: 3.8rem; + font-size: 4rem; +} + +.loader { + height: 3rem; + padding: 0; + border-radius: 0.3rem; + letter-spacing: .5rem; + font-family: Lato; + cursor: not-allowed; + opacity: .65; + &:focus { + outline: 0; + } +} + +.saving span { + animation-name: blink; + animation-duration: 1.4s; + animation-iteration-count: infinite; + animation-fill-mode: both; + // font-size: 5rem; +} + +.saving span:nth-child(2) { + animation-delay: .2s; +} + +.saving span:nth-child(3) { + animation-delay: .4s; +} diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/ContentHeader/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/ContentHeader/index.js index 8d65e8416e..18858b3d90 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/components/ContentHeader/index.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/ContentHeader/index.js @@ -18,7 +18,18 @@ class ContentHeader extends React.Component { // eslint-disable-line react/prefe } renderButtonContainer = () => { - console.log('waiting'); + if (this.props.isLoading) { + return ( + + + {(message) => ( + + )} + + + ); + } + return ( @@ -81,6 +92,7 @@ ContentHeader.propTypes = { handleCancel: React.PropTypes.func, handleSubmit: React.PropTypes.func, icoType: React.PropTypes.string, + isLoading: React.PropTypes.bool, name: React.PropTypes.string, noMargin: React.PropTypes.bool, }; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/PopUpForm/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/PopUpForm/index.js index d967086271..cff28dbd9c 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/components/PopUpForm/index.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/PopUpForm/index.js @@ -124,7 +124,7 @@ PopUpForm.propTypes = { renderCustomPopUpHeader: React.PropTypes.oneOfType([ React.PropTypes.func, React.PropTypes.object, - React.PropTypes.object, + React.PropTypes.bool, ]), renderModalBody: React.PropTypes.oneOfType([ React.PropTypes.bool, diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/actions.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/actions.js index 1252426198..acf7680a55 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/actions.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/actions.js @@ -15,8 +15,10 @@ import { MODEL_FETCH, MODEL_FETCH_SUCCEEDED, POST_CONTENT_TYPE_SUCCEEDED, + SET_BUTTON_LOADER, SUBMIT, RESET_SHOW_BUTTONS_PROPS, + UNSET_BUTTON_LOADER, UPDATE_CONTENT_TYPE, } from './constants'; @@ -103,12 +105,24 @@ export function resetShowButtonsProps() { }; } +export function setButtonLoader() { + return { + type: SET_BUTTON_LOADER, + }; +} + export function submit() { return { type: SUBMIT, } } +export function unsetButtonLoader() { + return { + type: UNSET_BUTTON_LOADER, + }; +} + export function updateContentType(data) { return { type: UPDATE_CONTENT_TYPE, diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/constants.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/constants.js index c936d650a1..caac2b6948 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/constants.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/constants.js @@ -12,6 +12,8 @@ export const DELETE_ATTRIBUTE = 'ContentTypeBuilder/ModelPage/DELETE_ATTRIBUTE'; export const MODEL_FETCH = 'ContentTypeBuilder/ModelPage/MODEL_FETCH'; export const MODEL_FETCH_SUCCEEDED = 'ContentTypeBuilder/ModelPage/MODEL_FETCH_SUCCEEDED'; export const POST_CONTENT_TYPE_SUCCEEDED = 'ContentTypeBuilder/ModelPage/POST_CONTENT_TYPE_SUCCEEDED'; +export const SET_BUTTON_LOADER = 'ContentTypeBuilder/ModelPage/SET_BUTTON_LOADER'; export const SUBMIT = 'ContentTypeBuilder/ModelPage/SUBMIT'; export const UPDATE_CONTENT_TYPE = 'ContentTypeBuilder/ModelPage/UPDATE_CONTENT_TYPE'; +export const UNSET_BUTTON_LOADER = 'ContentTypeBuilder/ModelPage/UNSET_BUTTON_LOADER'; export const RESET_SHOW_BUTTONS_PROPS = 'ContentTypeBuilder/ModelPage/RESET_SHOW_BUTTONS_PROPS'; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js index 1b60213181..d22bb2e946 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js @@ -194,7 +194,7 @@ export class ModelPage extends React.Component { // eslint-disable-line react/pr const redirectRoute = replace(this.props.route.path, '/:modelName', ''); // const addButtons = this.props.modelPage.showButtons; const addButtons = get(storeData.getContentType(), 'name') === this.props.params.modelName && size(get(storeData.getContentType(), 'attributes')) > 0 || this.props.modelPage.showButtons; - + const content = size(this.props.modelPage.model.attributes) === 0 ? : {content} diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/reducer.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/reducer.js index 362a039dfd..d291f0d484 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/reducer.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/reducer.js @@ -16,6 +16,8 @@ import { MODEL_FETCH_SUCCEEDED, POST_CONTENT_TYPE_SUCCEEDED, RESET_SHOW_BUTTONS_PROPS, + SET_BUTTON_LOADER, + UNSET_BUTTON_LOADER, UPDATE_CONTENT_TYPE, } from './constants'; @@ -29,6 +31,7 @@ const initialState = fromJS({ postContentTypeSuccess: false, showButtons: false, modelLoading: true, + showButtonLoader: false, }); function modelPageReducer(state = initialState, action) { @@ -72,6 +75,10 @@ function modelPageReducer(state = initialState, action) { return state.set('postContentTypeSuccess', !state.get('postContentTypeSuccess')); case RESET_SHOW_BUTTONS_PROPS: return state.set('showButtons', false); + case SET_BUTTON_LOADER: + return state.set('showButtonLoader', true); + case UNSET_BUTTON_LOADER: + return state.set('showButtonLoader', false); case UPDATE_CONTENT_TYPE: return state .set('model', Map(action.data)) diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/sagas.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/sagas.js index d169f5002d..0e101029db 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/sagas.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/sagas.js @@ -10,7 +10,7 @@ import { temporaryContentTypePosted } from 'containers/App/actions'; import { storeData } from '../../utils/storeData'; import { MODEL_FETCH, SUBMIT } from './constants'; -import { modelFetchSucceeded, postContentTypeSucceeded, resetShowButtonsProps } from './actions'; +import { modelFetchSucceeded, postContentTypeSucceeded, resetShowButtonsProps, setButtonLoader, unsetButtonLoader } from './actions'; import { makeSelectModel } from './selectors'; export function* fetchModel(action) { @@ -28,6 +28,9 @@ export function* fetchModel(action) { export function* submitChanges() { try { + // Show button loader + yield put(setButtonLoader()); + const modelName = get(storeData.getContentType(), 'name'); const body = yield select(makeSelectModel()); @@ -70,6 +73,8 @@ export function* submitChanges() { }); yield put(resetShowButtonsProps()); + // Remove loader + yield put(unsetButtonLoader()); } catch(error) { console.log(error);