mirror of
https://github.com/strapi/strapi.git
synced 2025-08-21 23:28:58 +00:00
Fix css
This commit is contained in:
parent
372842ef5c
commit
da865168e8
@ -3,11 +3,11 @@
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
> div {
|
||||
border: 6px solid #f3f3f3; /* Light grey */
|
||||
border-top: 6px solid #3498db; /* Blue */
|
||||
border: 4px solid #f3f3f3; /* Light grey */
|
||||
border-top: 4px solid #555555 !important; /* Blue */
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
}
|
||||
|
@ -7,7 +7,7 @@
|
||||
> div {
|
||||
margin: auto;
|
||||
border: 6px solid #f3f3f3; /* Light grey */
|
||||
border-top: 6px solid #3498db; /* Blue */
|
||||
border-top: 6px solid #1C91E7; /* Blue */
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
@ -72,10 +72,11 @@ export function deleteSeveralDataSuccess() {
|
||||
};
|
||||
}
|
||||
|
||||
export function getData(currentModel, source) {
|
||||
export function getData(currentModel, source, setUpdatingParams = false) {
|
||||
return {
|
||||
type: GET_DATA,
|
||||
currentModel,
|
||||
setUpdatingParams,
|
||||
source,
|
||||
};
|
||||
}
|
||||
|
@ -87,7 +87,7 @@ export class ListPage extends React.Component {
|
||||
}
|
||||
|
||||
if (search !== this.props.location.search) {
|
||||
this.getData(this.props);
|
||||
this.getData(this.props, true);
|
||||
}
|
||||
|
||||
if (prevProps.listPage.filtersUpdated !== filtersUpdated) {
|
||||
@ -120,7 +120,7 @@ export class ListPage extends React.Component {
|
||||
* Function to fetch data
|
||||
* @param {Object} props
|
||||
*/
|
||||
getData = props => {
|
||||
getData = (props, setUpdatingParams = false) => {
|
||||
const source = getQueryParameters(props.location.search, 'source');
|
||||
const _limit = toInteger(getQueryParameters(props.location.search, '_limit')) || 10;
|
||||
const _page = toInteger(getQueryParameters(props.location.search, '_page')) || 1;
|
||||
@ -130,7 +130,7 @@ export class ListPage extends React.Component {
|
||||
const filters = generateFiltersFromSearch(props.location.search);
|
||||
|
||||
this.props.setParams(params, filters);
|
||||
this.props.getData(props.match.params.slug, source);
|
||||
this.props.getData(props.match.params.slug, source, setUpdatingParams);
|
||||
};
|
||||
|
||||
/**
|
||||
@ -306,9 +306,9 @@ export class ListPage extends React.Component {
|
||||
};
|
||||
|
||||
showLoaders = () => {
|
||||
const { listPage: { isLoading, records } } = this.props;
|
||||
const { listPage: { isLoading, records, updatingParams } } = this.props;
|
||||
|
||||
return isLoading && get(records, this.getCurrentModelName()) === undefined;
|
||||
return updatingParams || isLoading && get(records, this.getCurrentModelName()) === undefined;
|
||||
}
|
||||
|
||||
render() {
|
||||
|
@ -43,10 +43,10 @@ const initialState = fromJS({
|
||||
_sort: '',
|
||||
_q: '',
|
||||
}),
|
||||
// records: List([]),
|
||||
records: fromJS({}),
|
||||
showFilter: false,
|
||||
showWarningDeleteAll: false,
|
||||
updatingParams: false,
|
||||
});
|
||||
|
||||
function listPageReducer(state = initialState, action) {
|
||||
@ -86,17 +86,25 @@ function listPageReducer(state = initialState, action) {
|
||||
}
|
||||
|
||||
return v;
|
||||
});
|
||||
})
|
||||
.update('updatingParams', () => true);
|
||||
case GET_DATA:
|
||||
return state
|
||||
.update('isLoading', () => true)
|
||||
.update('currentModel', () => action.currentModel);
|
||||
.update('currentModel', () => action.currentModel)
|
||||
.update('updatingParams', v => {
|
||||
if (action.setUpdatingParams) {
|
||||
return true;
|
||||
}
|
||||
return v;
|
||||
});
|
||||
case GET_DATA_SUCCEEDED:
|
||||
return state
|
||||
.update('entriesToDelete', () => List([]))
|
||||
.updateIn(['count', state.get('currentModel')], () => action.data[0].count)
|
||||
.update('isLoading', () => false)
|
||||
.updateIn(['records', state.get('currentModel')], () => List(action.data[1]));
|
||||
.updateIn(['records', state.get('currentModel')], () => List(action.data[1]))
|
||||
.update('updatingParams', () => false);
|
||||
case ON_CHANGE:
|
||||
return state.updateIn(['appliedFilters', action.index, action.key], () => action.value);
|
||||
case ON_CLICK_REMOVE:
|
||||
|
@ -1,9 +1 @@
|
||||
{
|
||||
"product": {
|
||||
"attributes": {
|
||||
"description": {
|
||||
"appearance": "WYSIWYG"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
{}
|
@ -7,6 +7,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { get } from 'lodash';
|
||||
import cn from 'classnames';
|
||||
|
||||
import LoadingIndicator from 'components/LoadingIndicator';
|
||||
import Input from 'components/InputsIndex';
|
||||
@ -28,7 +29,7 @@ class EditForm extends React.Component { // eslint-disable-line react/prefer-sta
|
||||
render() {
|
||||
if (this.props.showLoaders) {
|
||||
return (
|
||||
<div className={styles.editForm}>
|
||||
<div className={cn(styles.editForm, this.props.showLoaders && styles.loadIndicatorContainer)}>
|
||||
<LoadingIndicator />
|
||||
</div>
|
||||
);
|
||||
|
@ -13,3 +13,11 @@
|
||||
margin-bottom: 2.1rem;
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
.loadIndicatorContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
min-height: 209px;
|
||||
padding-top: 88px;
|
||||
}
|
@ -72,7 +72,7 @@ function List({ data, deleteData, noButton, onButtonClick, settingType, showLoad
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={cn(styles.ulContainer, showLoaders && styles.loadingContainer)}>
|
||||
<div className={cn(styles.ulContainer, showLoaders && styles.loadingContainer, showLoaders && settingType === 'roles' && styles.loadingContainerRole )}>
|
||||
{showLoaders ? <LoadingIndicator /> : (
|
||||
<ul className={noButton ? styles.listPadded : ''}>
|
||||
{map(object, item => (
|
||||
|
@ -39,6 +39,12 @@
|
||||
.loadingContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: 150px;
|
||||
justify-content: space-around;
|
||||
min-height: 162px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.loadingContainerRole {
|
||||
min-height: 142px !important;
|
||||
padding-top: 0;
|
||||
}
|
@ -158,7 +158,7 @@ export class HomePage extends React.Component {
|
||||
showLoaders = () => {
|
||||
const { data, isLoading, modifiedData } = this.props;
|
||||
const isAdvanded = this.getEndPoint() === 'advanced';
|
||||
|
||||
|
||||
return isLoading && get(data, this.getEndPoint()) === undefined && !isAdvanded || isLoading && isAdvanded && get(modifiedData, this.getEndPoint()) === undefined;
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user