random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated placeholder component structures

Browse Source 
• Updated:
- placeholder component structures
This commit is contained in:
mgabdev 2020-08-14 12:44:58 -05:00
parent 261ba8937b
commit 67e1082cf5
8 changed files with 76 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/javascript/gabsocial/components/placeholder/account_placeholder.js
View File

@ -2,12 +2,7 @@ import { CX } from '../../constants'
import { getRandomInt } from '../../utils/numbers' import { getRandomInt } from '../../utils/numbers'
import PlaceholderLayout from './placeholder_layout' import PlaceholderLayout from './placeholder_layout'
export default class AccountPlaceholder extends PureComponent { class AccountPlaceholder extends PureComponent {
static propTypes = {
isLast: PropTypes.bool,
isSmall: PropTypes.bool,
}
render() { render() {
const { isLast, isSmall } = this.props const { isLast, isSmall } = this.props
@ -38,11 +33,18 @@ export default class AccountPlaceholder extends PureComponent {
<div className={classes}> <div className={classes}>
<PlaceholderLayout viewBox='0 0 400 32'> <PlaceholderLayout viewBox='0 0 400 32'>
<rect x="38" y="4" rx="3" ry="3" width="268" height="6" /> <rect x="38" y="4" rx="3" ry="3" width="268" height="6" />
<circle cx="14" cy="14" r="14" /> <circle cx="14" cy="14" r="14" />
<rect x="36" y="18" rx="3" ry="3" width="208" height="6" /> <rect x="36" y="18" rx="3" ry="3" width="208" height="6" />
</PlaceholderLayout> </PlaceholderLayout>
</div> </div>
) )
} }
} }
AccountPlaceholder.propTypes = {
isLast: PropTypes.bool,
isSmall: PropTypes.bool,
}
export default AccountPlaceholder

4
app/javascript/gabsocial/components/placeholder/comment_placeholder.js
View File

@ -4,10 +4,6 @@ import PlaceholderLayout from './placeholder_layout'
export default class CommentPlaceholder extends PureComponent { export default class CommentPlaceholder extends PureComponent {
static propTypes = {
isLast: PropTypes.bool,
}
render() { render() {
const classes = CX({ const classes = CX({
default: 1, default: 1,

14
app/javascript/gabsocial/components/placeholder/group_list_item_placeholder.js
View File

@ -2,12 +2,8 @@ import { CX } from '../../constants'
import { getRandomInt } from '../../utils/numbers' import { getRandomInt } from '../../utils/numbers'
import PlaceholderLayout from './placeholder_layout' import PlaceholderLayout from './placeholder_layout'
export default class GroupListItemPlaceholder extends PureComponent { class GroupListItemPlaceholder extends PureComponent {
static propTypes = {
isLast: PropTypes.bool,
}
render() { render() {
const { isLast } = this.props const { isLast } = this.props
@ -32,4 +28,10 @@ export default class GroupListItemPlaceholder extends PureComponent {
) )
} }
} }
GroupListItemPlaceholder.propTypes = {
isLast: PropTypes.bool,
}
export default GroupListItemPlaceholder

16
app/javascript/gabsocial/components/placeholder/list_item_placeholder.js
View File

@ -3,11 +3,7 @@ import { getRandomInt } from '../../utils/numbers'
import PlaceholderLayout from './placeholder_layout' import PlaceholderLayout from './placeholder_layout'
import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component' import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component'
export default class ListItemPlaceholder extends PureComponent { class ListItemPlaceholder extends PureComponent {
static propTypes = {
isLast: PropTypes.bool,
}
render() { render() {
const { isLast } = this.props const { isLast } = this.props
@ -36,11 +32,17 @@ export default class ListItemPlaceholder extends PureComponent {
classNamesXS={classesXS} classNamesXS={classesXS}
> >
<PlaceholderLayout viewBox='0 0 400 30'> <PlaceholderLayout viewBox='0 0 400 30'>
<circle cx='10' cy='17' r='10' /> <circle cx='10' cy='17' r='10' />
<rect x='30' y='12' rx='5' ry='5' width={width} height='12' /> <rect x='30' y='12' rx='5' ry='5' width={width} height='12' />
</PlaceholderLayout> </PlaceholderLayout>
</ResponsiveClassesComponent> </ResponsiveClassesComponent>
) )
} }
} }
ListItemPlaceholder.propTypes = {
isLast: PropTypes.bool,
}
export default ListItemPlaceholder

6
app/javascript/gabsocial/components/placeholder/media_gallery_placeholder.js
View File

@ -1,14 +1,8 @@
import PlaceholderLayout from './placeholder_layout' import PlaceholderLayout from './placeholder_layout'
export default class MediaGalleryPlaceholder extends PureComponent { export default class MediaGalleryPlaceholder extends PureComponent {
static propTypes = {
type: PropTypes.string,
}
render() { render() {
const { type } = this.props
return ( return (
<div className={[_s.default, _s.px5, _s.py5].join(' ')}> <div className={[_s.default, _s.px5, _s.py5].join(' ')}>
<PlaceholderLayout viewBox='0 0 400 196'> <PlaceholderLayout viewBox='0 0 400 196'>

58
app/javascript/gabsocial/components/placeholder/notification_placeholder.js
View File

@ -7,11 +7,7 @@ import { getRandomInt } from '../../utils/numbers'
import ResponsiveComponent from '../../features/ui/util/responsive_component' import ResponsiveComponent from '../../features/ui/util/responsive_component'
import PlaceholderLayout from './placeholder_layout' import PlaceholderLayout from './placeholder_layout'
export default class NotificationPlaceholder extends PureComponent { class NotificationPlaceholder extends PureComponent {
static propTypes = {
isLast: PropTypes.bool,
}
render() { render() {
const { isLast } = this.props const { isLast } = this.props
@ -42,21 +38,21 @@ export default class NotificationPlaceholder extends PureComponent {
<div className={classes}> <div className={classes}>
<div className={[_s.default, _s.py2, _s.px2].join(' ')}> <div className={[_s.default, _s.py2, _s.px2].join(' ')}>
<PlaceholderLayout viewBox='0 0 400 170'> <PlaceholderLayout viewBox='0 0 400 170'>
<rect x='24' y='34' rx='4' ry='4' width={width2} height='8' /> <rect x='24' y='34' rx='4' ry='4' width={width2} height='8' />
<rect x={left} y='34' rx='4' ry='4' width='12' height='8' /> <rect x={left} y='34' rx='4' ry='4' width='12' height='8' />
<circle cx='8' cy='10' r='8' /> <circle cx='8' cy='10' r='8' />
<circle cx='36' cy='12' r='12' /> <circle cx='36' cy='12' r='12' />
<rect x='24' y='55' rx='0' ry='0' width='375' height='1' /> <rect x='24' y='55' rx='0' ry='0' width='375' height='1' />
<rect x='24' y='166' rx='0' ry='0' width='475' height='1' /> <rect x='24' y='166' rx='0' ry='0' width='475' height='1' />
<rect x='24' y='55' rx='0' ry='0' width='1' height='112' /> <rect x='24' y='55' rx='0' ry='0' width='1' height='112' />
<rect x='399' y='55' rx='0' ry='0' width='1' height='112' /> <rect x='399' y='55' rx='0' ry='0' width='1' height='112' />
<rect x='32' y='64' rx='4' ry='4' width={width1} height='8' /> <rect x='32' y='64' rx='4' ry='4' width={width1} height='8' />
<rect x='32' y='80' rx='4' ry='4' width='23' height='8' /> <rect x='32' y='80' rx='4' ry='4' width='23' height='8' />
<rect x='32' y='102' rx='4' ry='4' width='337' height='8' /> <rect x='32' y='102' rx='4' ry='4' width='337' height='8' />
<rect x='32' y='118' rx='4' ry='4' width='290' height='8' /> <rect x='32' y='118' rx='4' ry='4' width='290' height='8' />
<rect x='32' y='134' rx='4' ry='4' width='216' height='8' /> <rect x='32' y='134' rx='4' ry='4' width='216' height='8' />
<rect x='32' y='152' rx='4' ry='4' width='23' height='8' /> <rect x='32' y='152' rx='4' ry='4' width='23' height='8' />
<rect x='62' y='152' rx='4' ry='4' width='60' height='8' /> <rect x='62' y='152' rx='4' ry='4' width='60' height='8' />
<rect x='130' y='152' rx='4' ry='4' width='26' height='8' /> <rect x='130' y='152' rx='4' ry='4' width='26' height='8' />
</PlaceholderLayout> </PlaceholderLayout>
</div> </div>
@ -66,16 +62,16 @@ export default class NotificationPlaceholder extends PureComponent {
<div className={classesXS}> <div className={classesXS}>
<div className={[_s.default, _s.py2, _s.px2].join(' ')}> <div className={[_s.default, _s.py2, _s.px2].join(' ')}>
<PlaceholderLayout viewBox='0 0 380 200'> <PlaceholderLayout viewBox='0 0 380 200'>
<circle cx='20' cy='20' r='20' /> <circle cx='20' cy='20' r='20' />
<rect x='0' y='54' rx='5' ry='5' width={width1} height='10' /> <rect x='0' y='54' rx='5' ry='5' width={width1} height='10' />
<rect x='0' y='76' rx='0' ry='0' width='1' height='120' /> <rect x='0' y='76' rx='0' ry='0' width='1' height='120' />
<rect x='379' y='76' rx='0' ry='0' width='1' height='120' /> <rect x='379' y='76' rx='0' ry='0' width='1' height='120' />
<rect x='0' y='76' rx='0' ry='0' width='380' height='1' /> <rect x='0' y='76' rx='0' ry='0' width='380' height='1' />
<rect x='0' y='195' rx='0' ry='0' width='380' height='1' /> <rect x='0' y='195' rx='0' ry='0' width='380' height='1' />
<rect x='12' y='90' rx='5' ry='5' width='280' height='10' /> <rect x='12' y='90' rx='5' ry='5' width='280' height='10' />
<rect x='12' y='108' rx='5' ry='5' width='80' height='10' /> <rect x='12' y='108' rx='5' ry='5' width='80' height='10' />
<rect x='12' y='136' rx='5' ry='5' width='320' height='10' /> <rect x='12' y='136' rx='5' ry='5' width='320' height='10' />
<rect x='12' y='154' rx='5' ry='5' width='210' height='10' /> <rect x='12' y='154' rx='5' ry='5' width='210' height='10' />
<rect x='12' y='174' rx='5' ry='5' width='120' height='10' /> <rect x='12' y='174' rx='5' ry='5' width='120' height='10' />
</PlaceholderLayout> </PlaceholderLayout>
</div> </div>
@ -85,4 +81,10 @@ export default class NotificationPlaceholder extends PureComponent {
) )
} }
} }
NotificationPlaceholder.propTypes = {
isLast: PropTypes.bool,
}
export default NotificationPlaceholder

37
app/javascript/gabsocial/components/placeholder/placeholder_layout.js
View File

@ -2,26 +2,8 @@ import { defineMessages, injectIntl } from 'react-intl'
import ContentLoader from 'react-content-loader' import ContentLoader from 'react-content-loader'
import { DEFAULT_THEME } from '../../constants' import { DEFAULT_THEME } from '../../constants'
const messages = defineMessages({
loading: { id: 'loading_indicator.label', defaultMessage: 'Loading..' },
})
const mapStateToProps = (state) => ({
theme: state.getIn(['settings', 'displayOptions', 'theme'], DEFAULT_THEME),
})
export default
@injectIntl
@connect(mapStateToProps)
class PlaceholderLayout extends PureComponent { class PlaceholderLayout extends PureComponent {
static propTypes = {
children: PropTypes.node,
intl: PropTypes.object.isRequired,
theme: PropTypes.string.isRequired,
viewBox: PropTypes.object.isRequired,
}
render() { render() {
const { const {
intl, intl,
@ -46,4 +28,21 @@ class PlaceholderLayout extends PureComponent {
) )
} }
} }
const messages = defineMessages({
loading: { id: 'loading_indicator.label', defaultMessage: 'Loading...' },
})
const mapStateToProps = (state) => ({
theme: state.getIn(['settings', 'displayOptions', 'theme'], DEFAULT_THEME),
})
PlaceholderLayout.propTypes = {
children: PropTypes.node,
intl: PropTypes.object.isRequired,
theme: PropTypes.string.isRequired,
viewBox: PropTypes.object.isRequired,
}
export default injectIntl(connect(mapStateToProps)(PlaceholderLayout))

2
app/javascript/gabsocial/components/placeholder/profile_info_panel_placeholder.js
View File

@ -4,7 +4,7 @@ export default class ProfileInfoPanelPlaceholder extends PureComponent {
render() { render() {
return ( return (
<div className={[_s.default]}> <div className={_s.default}>
<PlaceholderLayout viewBox='0 0 340 108'> <PlaceholderLayout viewBox='0 0 340 108'>
<rect x='0' y='0' rx='4' ry='4' width='330' height='8' /> <rect x='0' y='0' rx='4' ry='4' width='330' height='8' />
<rect x='0' y='18' rx='4' ry='4' width='314' height='8' /> <rect x='0' y='18' rx='4' ry='4' width='314' height='8' />