Progress
This commit is contained in:
mgabdev
parent
be3daea78b
commit
e37500c0cf
|
|
@ -0,0 +1,39 @@
|
|||
import api from '../api';
|
||||
|
||||
export const HASHTAGS_FETCH_REQUEST = 'HASHTAGS_FETCH_REQUEST';
|
||||
export const HASHTAGS_FETCH_SUCCESS = 'HASHTAGS_FETCH_SUCCESS';
|
||||
export const HASHTAGS_FETCH_FAIL = 'HASHTAGS_FETCH_FAIL';
|
||||
|
||||
export function fetchHashtags() {
|
||||
return (dispatch, getState) => {
|
||||
dispatch(fetchHashtagsRequest());
|
||||
|
||||
api(getState).get('/api/v1/trends').then(response => {
|
||||
dispatch(fetchHashtagsSuccess(response.data));
|
||||
}).catch(error => dispatch(fetchHashtagsFail(error)));
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchHashtagsRequest() {
|
||||
return {
|
||||
type: HASHTAGS_FETCH_REQUEST,
|
||||
skipLoading: true,
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchHashtagsSuccess(tags) {
|
||||
return {
|
||||
tags,
|
||||
type: HASHTAGS_FETCH_SUCCESS,
|
||||
skipLoading: true,
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchHashtagsFail(error) {
|
||||
return {
|
||||
error,
|
||||
type: HASHTAGS_FETCH_FAIL,
|
||||
skipLoading: true,
|
||||
skipAlert: true,
|
||||
};
|
||||
};
|
||||
|
|
@ -81,13 +81,17 @@ export const fetchListFail = (id, error) => ({
|
|||
});
|
||||
|
||||
export const fetchLists = () => (dispatch, getState) => {
|
||||
if (!me) return;
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
dispatch(fetchListsRequest());
|
||||
|
||||
api(getState).get('/api/v1/lists')
|
||||
.then(({ data }) => dispatch(fetchListsSuccess(data)))
|
||||
.catch(err => dispatch(fetchListsFail(err)));
|
||||
if (!me) return reject()
|
||||
api(getState).get('/api/v1/lists').then(({ data }) => {
|
||||
dispatch(fetchListsSuccess(data))
|
||||
return resolve()
|
||||
}).catch((err) => {
|
||||
dispatch(fetchListsFail(err))
|
||||
return reject()
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
export const fetchListsRequest = () => ({
|
||||
|
|
|
|||
|
|
@ -1,39 +0,0 @@
|
|||
import api from '../api';
|
||||
|
||||
export const TRENDS_FETCH_REQUEST = 'TRENDS_FETCH_REQUEST';
|
||||
export const TRENDS_FETCH_SUCCESS = 'TRENDS_FETCH_SUCCESS';
|
||||
export const TRENDS_FETCH_FAIL = 'TRENDS_FETCH_FAIL';
|
||||
|
||||
export function fetchTrends() {
|
||||
return (dispatch, getState) => {
|
||||
dispatch(fetchTrendsRequest());
|
||||
|
||||
api(getState).get('/api/v1/trends').then(response => {
|
||||
dispatch(fetchTrendsSuccess(response.data));
|
||||
}).catch(error => dispatch(fetchTrendsFail(error)));
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchTrendsRequest() {
|
||||
return {
|
||||
type: TRENDS_FETCH_REQUEST,
|
||||
skipLoading: true,
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchTrendsSuccess(tags) {
|
||||
return {
|
||||
type: TRENDS_FETCH_SUCCESS,
|
||||
tags,
|
||||
skipLoading: true,
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchTrendsFail(error) {
|
||||
return {
|
||||
type: TRENDS_FETCH_FAIL,
|
||||
error,
|
||||
skipLoading: true,
|
||||
skipAlert: true,
|
||||
};
|
||||
};
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<AvatarOverlay renders a overlay avatar 1`] = `
|
||||
<div
|
||||
className="account__avatar-overlay"
|
||||
>
|
||||
<div
|
||||
className="account__avatar-overlay-base"
|
||||
style={
|
||||
Object {
|
||||
"backgroundImage": "url(/static/alice.jpg)",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<div
|
||||
className="account__avatar-overlay-overlay"
|
||||
style={
|
||||
Object {
|
||||
"backgroundImage": "url(/static/eve.jpg)",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import renderer from 'react-test-renderer';
|
||||
import { fromJS } from 'immutable';
|
||||
import AvatarOverlay from '../avatar_overlay';
|
||||
|
||||
describe('<AvatarOverlay', () => {
|
||||
const account = fromJS({
|
||||
username: 'alice',
|
||||
acct: 'alice',
|
||||
display_name: 'Alice',
|
||||
avatar: '/animated/alice.gif',
|
||||
avatar_static: '/static/alice.jpg',
|
||||
});
|
||||
|
||||
const friend = fromJS({
|
||||
username: 'eve',
|
||||
acct: 'eve@blackhat.lair',
|
||||
display_name: 'Evelyn',
|
||||
avatar: '/animated/eve.gif',
|
||||
avatar_static: '/static/eve.jpg',
|
||||
});
|
||||
|
||||
it('renders a overlay avatar', () => {
|
||||
const component = renderer.create(<AvatarOverlay account={account} friend={friend} />);
|
||||
const tree = component.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -4,7 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
|
|||
import { defineMessages, injectIntl } from 'react-intl'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { me } from '../../initial_state'
|
||||
import Avatar from '../avatar/avatar'
|
||||
import Avatar from '../avatar'
|
||||
import DisplayName from '../display_name'
|
||||
import IconButton from '../icon_button'
|
||||
import Icon from '../icon'
|
||||
|
|
@ -107,33 +107,33 @@ class Account extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={[styles.default, styles.marginTop5PX, styles.marginBottom15PX].join(' ')}>
|
||||
<div className={[styles.default, styles.flexRow].join(' ')}>
|
||||
<div className={[_s.default, _s.marginTop5PX, _s.marginBottom15PX].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow].join(' ')}>
|
||||
|
||||
<NavLink
|
||||
className={[styles.default, styles.noUnderline].join(' ')}
|
||||
className={[_s.default, _s.noUnderline].join(' ')}
|
||||
title={account.get('acct')}
|
||||
to={`/${account.get('acct')}`}
|
||||
>
|
||||
<Avatar account={account} size={52} />
|
||||
</NavLink>
|
||||
|
||||
<div className={[styles.default, styles.alignItemsStart, styles.paddingHorizontal10PX].join(' ')}>
|
||||
<div className={[_s.default, _s.alignItemsStart, _s.paddingHorizontal10PX].join(' ')}>
|
||||
<NavLink
|
||||
className={[styles.default, styles.noUnderline].join(' ')}
|
||||
className={[_s.default, _s.noUnderline].join(' ')}
|
||||
title={account.get('acct')}
|
||||
to={`/${account.get('acct')}`}
|
||||
>
|
||||
<DisplayName account={account} />
|
||||
</NavLink>
|
||||
<button className={[styles.default, styles.marginTop5PX, styles.colorBrand, styles.text, styles.cursorPointer, styles.fontSize14PX, styles.circle, styles.border1PX, styles.borderColorBrand, styles.paddingHorizontal20PX, styles.paddingVertical5PX].join(' ')}>
|
||||
<button className={[_s.default, _s.marginTop5PX, _s.colorBrand, _s.text, _s.cursorPointer, _s.fontSize14PX, _s.circle, _s.border1PX, _s.borderColorBrand, _s.paddingHorizontal20PX, _s.paddingVertical5PX].join(' ')}>
|
||||
{intl.formatMessage(messages.follow)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={[styles.default, styles.marginLeftAuto].join(' ')}>
|
||||
<button className={[styles.default, styles.circle, styles.backgroundTransparent, styles.paddingVertical5PX, styles.paddingHorizontal5PX, styles.cursorPointer].join(' ')}>
|
||||
<Icon className={styles.fillColorSubtle} id='close' width='8px' height='8px' />
|
||||
<div className={[_s.default, _s.marginLeftAuto].join(' ')}>
|
||||
<button className={[_s.default, _s.circle, _s.backgroundTransparent, _s.paddingVertical5PX, _s.paddingHorizontal5PX, _s.cursorPointer].join(' ')}>
|
||||
<Icon className={_s.fillcolorSecondary} id='close' width='8px' height='8px' />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,14 +14,14 @@ const GabLogo = ({
|
|||
xmlSpace='preserve'
|
||||
>
|
||||
<g>
|
||||
<path className={styles.fillColorBrand} d='M13.8,7.6h-2.4v0.7V9l-0.4-0.3C10.2,7.8,9,7.2,7.7,7.2c-0.2,0-0.4,0-0.4,0c-0.1,0-0.3,0-0.5,0
|
||||
<path className={_s.fillColorBrand} d='M13.8,7.6h-2.4v0.7V9l-0.4-0.3C10.2,7.8,9,7.2,7.7,7.2c-0.2,0-0.4,0-0.4,0c-0.1,0-0.3,0-0.5,0
|
||||
c-5.6,0.3-8.7,7.2-5.4,12.1c2.3,3.4,7.1,4.1,9.7,1.5l0.3-0.3l0,0.7c0,1-0.1,1.5-0.4,2.2c-1,2.4-4.1,3-6.8,1.3
|
||||
c-0.2-0.1-0.4-0.2-0.4-0.2c-0.1,0.1-1.9,3.5-1.9,3.6c0,0.1,0.5,0.4,0.8,0.6c2.2,1.4,5.6,1.7,8.3,0.8c2.7-0.9,4.5-3.2,5-6.4
|
||||
c0.2-1.1,0.2-0.8,0.2-8.4l0-7.1H13.8z M9.7,17.6c-2.2,1.2-4.9-0.4-4.9-2.9C4.8,12.6,7,11,9,11.6C11.8,12.4,12.3,16.1,9.7,17.6z'/>
|
||||
<path className={styles.fillColorBrand} d='M45.6,7.7c-2.4-1-5-0.6-6.7,1L38.6,9V4.5V0h-2.4h-2.4v11v11h2.4h2.4v-0.7v-0.7l0.3,0.3
|
||||
<path className={_s.fillColorBrand} d='M45.6,7.7c-2.4-1-5-0.6-6.7,1L38.6,9V4.5V0h-2.4h-2.4v11v11h2.4h2.4v-0.7v-0.7l0.3,0.3
|
||||
c2.4,2.4,6.9,1.9,9.3-0.9C51.5,15.9,50.1,9.6,45.6,7.7z M43.7,17.5c-2.1,1.4-5.1-0.2-5.1-2.8c0-2.1,1.9-3.7,3.9-3.3
|
||||
C45.4,12.1,46.2,15.8,43.7,17.5z'/>
|
||||
<path className={styles.fillColorBrand} d='M31.5,12.5c-0.7-3.7-3.1-5.5-7.1-5.3c-1.7,0.1-4,0.7-4.8,1.4l-0.1,0.1l0.7,1.7c0.4,0.9,0.7,1.7,0.7,1.7
|
||||
<path className={_s.fillColorBrand} d='M31.5,12.5c-0.7-3.7-3.1-5.5-7.1-5.3c-1.7,0.1-4,0.7-4.8,1.4l-0.1,0.1l0.7,1.7c0.4,0.9,0.7,1.7,0.7,1.7
|
||||
c0,0,0.1,0,0.2-0.1c2.7-1.4,5.4-0.9,5.6,1.1l0,0.2l-0.4-0.1c-3-0.8-6.3-0.1-7.7,1.6c-1.8,2.2-0.9,5.8,1.7,7.1
|
||||
c2.1,1,4.6,0.6,6.1-0.8l0.2-0.2v0.6v0.6h2.4h2.4v-4C31.7,13.7,31.7,13.3,31.5,12.5z M26.9,16.4c-0.1,0.7-0.5,1.5-1,2
|
||||
c-1.2,1.1-3,0.7-3.2-0.7c-0.2-1,0.6-1.7,2-1.8c0.1,0,0.2,0,0.2,0c0,0,0.2,0,0.4,0c0.5,0,1,0.1,1.4,0.2l0.3,0.1L26.9,16.4z'/>
|
||||
|
|
|
|||
|
|
@ -199,11 +199,11 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
|
|||
if (textarea) {
|
||||
return (
|
||||
<Fragment>
|
||||
<div className={[styles.default].join(' ')}>
|
||||
<div className={[styles.default, styles.marginLeft5PX].join(' ')}>
|
||||
<div className={[_s.default].join(' ')}>
|
||||
<div className={[_s.default, _s.marginLeft5PX].join(' ')}>
|
||||
<Textarea
|
||||
inputRef={this.setTextbox}
|
||||
className={[styles.default, styles.backgroundWhite, styles.lineHeight125, styles.resizeNone, styles.paddingVertical15PX, styles.outlineFocusBrand, styles.fontSize16PX, styles.text, styles.displayBlock].join(' ')}
|
||||
className={[_s.default, _s.backgroundWhite, _s.lineHeight125, _s.resizeNone, _s.paddingVertical15PX, _s.outlineFocusBrand, _s.fontSize16PX, _s.text, _s.displayBlock].join(' ')}
|
||||
disabled={disabled}
|
||||
placeholder={placeholder}
|
||||
autoFocus={autoFocus}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { Map as ImmutableMap } from 'immutable'
|
||||
import { autoPlayGif } from '../initial_state'
|
||||
import Image from './image'
|
||||
|
||||
export default class Avatar extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.map,
|
||||
size: PropTypes.number.isRequired,
|
||||
animate: PropTypes.bool,
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
account: ImmutableMap(),
|
||||
animate: autoPlayGif,
|
||||
size: 40,
|
||||
}
|
||||
|
||||
state = {
|
||||
hovering: false,
|
||||
sameImg: this.props.account.get('avatar') === this.props.account.get('avatar_static'),
|
||||
}
|
||||
|
||||
handleMouseEnter = () => {
|
||||
this.setState({ hovering: true })
|
||||
}
|
||||
|
||||
handleMouseLeave = () => {
|
||||
this.setState({ hovering: false })
|
||||
}
|
||||
|
||||
render () {
|
||||
const { account, size, animate } = this.props
|
||||
const { hovering, sameImg } = this.state
|
||||
|
||||
const shouldAnimate = animate || !sameImg
|
||||
|
||||
const options = {
|
||||
className: [_s.default, _s.circle].join(' '),
|
||||
onMouseEnter: shouldAnimate ? this.handleMouseEnter : undefined,
|
||||
onMouseLeave: shouldAnimate ? this.handleMouseLeave : undefined,
|
||||
src: account.get((hovering || animate) ? 'avatar' : 'avatar_static'),
|
||||
alt: account.get('display_name'),
|
||||
style: {
|
||||
width: `${size}px`,
|
||||
height: `${size}px`,
|
||||
},
|
||||
}
|
||||
|
||||
return (
|
||||
<Image {...options} />
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { Map as ImmutableMap } from 'immutable'
|
||||
import classNames from 'classnames'
|
||||
import { autoPlayGif } from '../../initial_state'
|
||||
|
||||
export default class Avatar extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.map,
|
||||
size: PropTypes.number,
|
||||
inline: PropTypes.bool,
|
||||
animate: PropTypes.bool,
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
account: ImmutableMap(),
|
||||
animate: autoPlayGif,
|
||||
inline: false,
|
||||
}
|
||||
|
||||
state = {
|
||||
hovering: false,
|
||||
sameImg: this.props.account.get('avatar') === this.props.account.get('avatar_static'),
|
||||
}
|
||||
|
||||
handleMouseEnter = () => {
|
||||
if (this.props.animate || this.state.sameImg) return
|
||||
|
||||
this.setState({ hovering: true })
|
||||
}
|
||||
|
||||
handleMouseLeave = () => {
|
||||
if (this.props.animate || this.state.sameImg) return
|
||||
|
||||
this.setState({ hovering: false })
|
||||
}
|
||||
|
||||
render () {
|
||||
const { account, size, animate, inline } = this.props
|
||||
const { hovering } = this.state
|
||||
|
||||
// : TODO : remove inline and change all avatars to be sized using css
|
||||
const style = !size ? {} : {
|
||||
width: `${size}px`,
|
||||
height: `${size}px`,
|
||||
}
|
||||
|
||||
const theSrc = account.get((hovering || animate) ? 'avatar' : 'avatar_static')
|
||||
|
||||
return (
|
||||
<img
|
||||
className={[styles.default, styles.circle].join(' ')}
|
||||
onMouseEnter={this.handleMouseEnter}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
style={style}
|
||||
src={theSrc}
|
||||
alt={account.get('display_name')}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
.avatar,
|
||||
.account__avatar {
|
||||
// @include avatar-radius();
|
||||
display: block;
|
||||
position: relative;
|
||||
// background-color: $ui-base-color;
|
||||
object-fit: cover;
|
||||
background-size: cover;
|
||||
|
||||
// TEMPORARY - need a default size for the avatars for now
|
||||
// They are sized individually all over the application and need to change with breakpoints as well
|
||||
// Might create a mixin to accept the size attribute and apply the various properties where necessary
|
||||
@include size(56px);
|
||||
|
||||
&--inline {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&-composite {
|
||||
// @include avatar-radius();
|
||||
overflow: hidden;
|
||||
|
||||
&>div {
|
||||
// @include avatar-radius();
|
||||
float: left;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a .account__avatar {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default } from './avatar';
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { autoPlayGif } from '../../initial_state';
|
||||
|
||||
export default class AvatarOverlay extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.map.isRequired,
|
||||
friend: ImmutablePropTypes.map.isRequired,
|
||||
animate: PropTypes.bool,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
animate: autoPlayGif,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { account, friend, animate } = this.props;
|
||||
|
||||
const baseSrc = account.get(animate ? 'avatar' : 'avatar_static');
|
||||
const overlaySrc = friend.get(animate ? 'avatar' : 'avatar_static');
|
||||
|
||||
return (
|
||||
<div className='avatar-overlay'>
|
||||
<img className='avatar-overlay__base' src={baseSrc} />
|
||||
<img className='avatar-overlay__overlay' src={overlaySrc} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
.avatar-overlay {
|
||||
background-size: 48px 48px;
|
||||
|
||||
@include circle(48px);
|
||||
|
||||
&__base {
|
||||
@include circle(36px);
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
@include circle(36px);
|
||||
@include abs-position(auto, 0, 0);
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default } from './avatar_overlay';
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import Text from './text'
|
||||
|
||||
export default class Badge extends PureComponent {
|
||||
static propTypes = {
|
||||
children: PropTypes.string,
|
||||
popover: PropTypes.string,
|
||||
}
|
||||
|
||||
state = {
|
||||
hovering: false,
|
||||
}
|
||||
|
||||
handleOnMouseEnter = () => {
|
||||
this.setState({ hovering: true })
|
||||
}
|
||||
|
||||
handleOnMouseLeave = () => {
|
||||
this.setState({ hovering: false })
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children, popover } = this.props
|
||||
const { hovering } = this.state
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Text color='secondary' size='small' className={_s.marginVertical5PX}>
|
||||
{children}
|
||||
</Text>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
import { NavLink } from 'react-router-dom'
|
||||
import classNames from 'classnames/bind'
|
||||
|
||||
const cx = classNames.bind(_s)
|
||||
|
||||
const COLORS = {
|
||||
primary: 'primary',
|
||||
secondary: 'secondary',
|
||||
tertiary: 'tertiary',
|
||||
brand: 'brand',
|
||||
error: 'error',
|
||||
none: 'none',
|
||||
}
|
||||
|
||||
export default class Button extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
to: PropTypes.string,
|
||||
href: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
className: PropTypes.string,
|
||||
icon: PropTypes.string,
|
||||
color: PropTypes.string,
|
||||
block: PropTypes.bool,
|
||||
text: PropTypes.bool,
|
||||
disabled: PropTypes.bool,
|
||||
outline: PropTypes.bool,
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
color: COLORS.brand,
|
||||
}
|
||||
|
||||
handleClick = (e) => {
|
||||
if (!this.props.disabled && this.props.onClick) {
|
||||
this.props.onClick(e)
|
||||
}
|
||||
}
|
||||
|
||||
setRef = (c) => {
|
||||
this.node = c
|
||||
}
|
||||
|
||||
focus() {
|
||||
this.node.focus()
|
||||
}
|
||||
|
||||
render () {
|
||||
const { block, className, disabled, text, to, children, href, outline, color } = this.props
|
||||
|
||||
// : todo :
|
||||
const classes = cx(className, {
|
||||
default: 1,
|
||||
noUnderline: 1,
|
||||
font: 1,
|
||||
cursorPointer: 1,
|
||||
textAlignCenter: 1,
|
||||
|
||||
backgroundColorBrand: !text && !outline,
|
||||
|
||||
// colorPrimary: 1,
|
||||
// colorSecondary: 1,
|
||||
colorWhite: [].indexOf(color) > -1,
|
||||
colorBrand: text || [].indexOf(color) > -1,
|
||||
|
||||
// borderColorBrand: 1,
|
||||
// border1PX: 1,
|
||||
|
||||
circle: !text,
|
||||
|
||||
paddingVertical10PX: !text,
|
||||
paddingHorizontal15PX: !text,
|
||||
|
||||
width100PC: block,
|
||||
})
|
||||
|
||||
const tagName = !!href ? 'a' : !!to ? 'NavLink' : 'button'
|
||||
|
||||
return React.createElement(
|
||||
tagName,
|
||||
{
|
||||
className: classes,
|
||||
ref: this.setRef,
|
||||
disabled: disabled,
|
||||
to: to || undefined,
|
||||
to: href || undefined,
|
||||
onClick: this.handleClick || undefined,
|
||||
},
|
||||
children,
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
import { NavLink } from 'react-router-dom'
|
||||
import classNames from 'classnames/bind'
|
||||
|
||||
export default class Button extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
text: PropTypes.node,
|
||||
to: PropTypes.string,
|
||||
href: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
disabled: PropTypes.bool,
|
||||
block: PropTypes.bool,
|
||||
secondary: PropTypes.bool,
|
||||
className: PropTypes.string,
|
||||
}
|
||||
|
||||
|
||||
handleClick = (e) => {
|
||||
if (!this.props.disabled && this.props.onClick) {
|
||||
this.props.onClick(e)
|
||||
}
|
||||
}
|
||||
|
||||
setRef = (c) => {
|
||||
this.node = c
|
||||
}
|
||||
|
||||
focus() {
|
||||
this.node.focus()
|
||||
}
|
||||
|
||||
render () {
|
||||
const { block, className, disabled, text, to, children, href } = this.props
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
|
||||
const classes = cx(className, {
|
||||
default: 1,
|
||||
noUnderline: 1,
|
||||
font: 1,
|
||||
colorWhite: 1,
|
||||
circle: 1,
|
||||
cursorPointer: 1,
|
||||
textAlignCenter: 1,
|
||||
paddingVertical10PX: 1,
|
||||
paddingHorizontal15PX: 1,
|
||||
width100PC: block,
|
||||
backgroundColorBrand: 1,
|
||||
backgroundColorBrandDark_onHover: 1,
|
||||
})
|
||||
|
||||
if (href) {
|
||||
return (
|
||||
<a className={classes} href={href}>
|
||||
{text || children}
|
||||
</a>
|
||||
)
|
||||
} else if (to) {
|
||||
return (
|
||||
<NavLink className={classes} to={to}>
|
||||
{text || children}
|
||||
</NavLink>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={this.setRef}
|
||||
disabled={disabled}
|
||||
onClick={this.handleClick}
|
||||
className={classes}
|
||||
>
|
||||
{text || children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
.button {
|
||||
display: inline-block;
|
||||
font-family: inherit;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
background-color: $ui-highlight-color;
|
||||
box-sizing: border-box;
|
||||
color: $primary-text-color;
|
||||
cursor: pointer;
|
||||
|
||||
@include border-design(transparent, 10px, 4px);
|
||||
@include text-sizing(14px, 600, 1em, center);
|
||||
@include size(auto, 36px);
|
||||
// @include text-overflow(nowrap);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: lighten($ui-highlight-color, 10%);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
background-color: $ui-primary-color;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner,
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
&--block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&--destructive {
|
||||
transition: none;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $error-red;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--alternative {
|
||||
color: $inverted-text-color;
|
||||
background: $ui-primary-color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: lighten($ui-primary-color, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
&--alternative-2 {
|
||||
background: $ui-base-lighter-color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: lighten($ui-base-lighter-color, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
color: $darker-text-color;
|
||||
background: transparent;
|
||||
padding: 3px 15px;
|
||||
border: 1px solid $ui-primary-color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: lighten($ui-primary-color, 4%);
|
||||
color: lighten($darker-text-color, 4%);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default } from './button';
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
import { isMobile } from '../../utils/is_mobile';
|
||||
import { ColumnHeader } from '../column_header';
|
||||
import ColumnBackButton from '../column_back_button';
|
||||
|
||||
export default class Column extends PureComponent {
|
||||
|
||||
|
|
@ -26,8 +25,7 @@ export default class Column extends PureComponent {
|
|||
);
|
||||
|
||||
return (
|
||||
<div role='region' aria-labelledby={columnHeaderId} className={[styles.default].join(' ')}>
|
||||
{ backBtn && <ColumnBackButton slim={backBtn === 'slim'} />}
|
||||
<div role='region' aria-labelledby={columnHeaderId} className={[_s.default].join(' ')}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
import { FormattedMessage } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
import Icon from '../icon';
|
||||
|
||||
export default class ColumnBackButton extends PureComponent {
|
||||
|
||||
static contextTypes = {
|
||||
router: PropTypes.object,
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
slim: PropTypes.bool,
|
||||
};
|
||||
|
||||
handleClick = () => {
|
||||
if (window.history && window.history.length === 1) {
|
||||
this.context.router.history.push('/home'); // homehack
|
||||
} else {
|
||||
this.context.router.history.goBack();
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const { slim } = this.props;
|
||||
|
||||
const btnClasses = classNames('column-back-button', {
|
||||
'column-back-button--slim': slim,
|
||||
});
|
||||
|
||||
return (
|
||||
<button className={btnClasses} onClick={this.handleClick}>
|
||||
<Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
|
||||
<FormattedMessage id='column_back_button.label' defaultMessage='Back' />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
.column-back-button {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
color: $highlight-text-color;
|
||||
cursor: pointer;
|
||||
flex: 0 0 auto;
|
||||
border: 0;
|
||||
text-align: unset;
|
||||
padding: 15px;
|
||||
margin: 0;
|
||||
z-index: 3;
|
||||
outline: 0;
|
||||
|
||||
@include text-sizing(16px, 400, 1);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&--slim {
|
||||
cursor: pointer;
|
||||
flex: 0 0 auto;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
|
||||
@include abs-position(0, 0);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default } from './column_back_button';
|
||||
|
|
@ -19,6 +19,8 @@ class ColumnHeader extends PureComponent {
|
|||
icon: PropTypes.string,
|
||||
active: PropTypes.bool,
|
||||
children: PropTypes.node,
|
||||
showBackBtn: PropTypes.bool,
|
||||
actions: PropTypes.array,
|
||||
}
|
||||
|
||||
state = {
|
||||
|
|
@ -45,24 +47,38 @@ class ColumnHeader extends PureComponent {
|
|||
}
|
||||
|
||||
render () {
|
||||
const { title, icon, active, children, intl: { formatMessage } } = this.props
|
||||
const { title, showBackBtn, icon, active, children, actions, intl: { formatMessage } } = this.props
|
||||
const { collapsed } = this.state
|
||||
|
||||
return (
|
||||
<div className={[styles.default, styles.height100PC, styles.flexRow].join(' ')}>
|
||||
{ /* <button className={[styles.default, styles.cursorPointer, styles.backgroundTransparent, styles.alignItemsCenter, styles.marginRight10PX, styles.justifyContentCenter].join(' ')}>
|
||||
<Icon className={[styles.marginRight5PX, styles.fillColorBrand].join(' ')} id='back' width='24px' height='24px' />
|
||||
</button> */ }
|
||||
<h1 role='heading' className={[styles.default, styles.height100PC, styles.justifyContentCenter].join(' ')}>
|
||||
<span className={[styles.default, styles.text, styles.fontSize24PX, styles.fontWeight500, styles.colorBlack].join(' ')}>
|
||||
<div className={[_s.default, _s.height100PC, _s.flexRow].join(' ')}>
|
||||
{
|
||||
showBackBtn &&
|
||||
<button className={[_s.default, _s.cursorPointer, _s.backgroundTransparent, _s.alignItemsCenter, _s.marginRight10PX, _s.justifyContentCenter].join(' ')}>
|
||||
<Icon className={[_s.marginRight5PX, _s.fillColorBrand].join(' ')} id='back' width='20px' height='20px' />
|
||||
</button>
|
||||
}
|
||||
<h1 role='heading' className={[_s.default, _s.height100PC, _s.justifyContentCenter].join(' ')}>
|
||||
<span className={[_s.default, _s.text, _s.fontSize24PX, _s.fontWeightMedium, _s.colorPrimary].join(' ')}>
|
||||
{title}
|
||||
</span>
|
||||
</h1>
|
||||
<div className={[styles.default, styles.backgroundTransparent, styles.flexRow, styles.alignItemsCenter, styles.justifyContentCenter, styles.marginLeftAuto].join(' ')}>
|
||||
<button className={[styles.default, styles.marginLeft5PX, styles.cursorPointer, styles.backgroundSubtle2, styles.paddingHorizontal10PX, styles.paddingVertical5PX, styles.radiusSmall].join(' ')}>
|
||||
<Icon className={styles.fillColorSubtle} id='ellipsis' width='24px' height='24px' />
|
||||
{
|
||||
!!actions &&
|
||||
<div className={[_s.default, _s.backgroundTransparent, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.marginLeftAuto].join(' ')}>
|
||||
{
|
||||
actions.map((action, i) => (
|
||||
<button
|
||||
onClick={() => action.onClick()}
|
||||
key={`column-header-action-btn-${i}`}
|
||||
className={[_s.default, _s.marginLeft5PX, _s.cursorPointer, _s.backgroundSubtle2, _s.paddingHorizontal10PX, _s.paddingVertical10PX, _s.radiusSmall].join(' ')}
|
||||
>
|
||||
<Icon className={_s.fillcolorSecondary} id={action.icon} width='20px' height='20px' />
|
||||
</button>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
import { Link } from 'react-router-dom';
|
||||
import classNames from 'classnames';
|
||||
import Icon from '../icon';
|
||||
|
||||
export default class ColumnHeaderSettingButton extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
title: PropTypes.node.isRequired,
|
||||
icon: PropTypes.string.isRequired,
|
||||
onClick: PropTypes.func,
|
||||
to: PropTypes.string,
|
||||
};
|
||||
|
||||
render () {
|
||||
const { title, icon, to, onClick } = this.props;
|
||||
|
||||
const classes = classNames('column-header-setting-btn', {
|
||||
'column-header-setting-btn--link': !!to
|
||||
});
|
||||
|
||||
if (to) {
|
||||
return (
|
||||
<Link to={to} className={classes}>
|
||||
{title}
|
||||
<Icon id={icon} />
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<button className={classes} tabIndex='0' onClick={onClick}>
|
||||
<Icon id={icon} />
|
||||
{title}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
.column-header-setting-btn {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
padding: 0 10px;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $darker-text-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&--link {
|
||||
text-decoration: none;
|
||||
|
||||
.fa {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default } from './column_header_setting_button';
|
||||
|
|
@ -28,11 +28,11 @@ class ColumnIndicator extends PureComponent {
|
|||
const title = type !== 'error' ? intl.formatMessage(messages[type]) : message
|
||||
|
||||
return (
|
||||
<div className={[styles.default, styles.width100PC, styles.justifyContentCenter, styles.alignItemsCenter, styles.paddingVertical15PX].join(' ')}>
|
||||
<div className={[_s.default, _s.width100PC, _s.justifyContentCenter, _s.alignItemsCenter, _s.paddingVertical15PX].join(' ')}>
|
||||
<Icon id={type} width='52px' height='52px' />
|
||||
{
|
||||
type !== 'loading' &&
|
||||
<span className={[styles.default, styles.marginTop10PX, styles.text, styles.displayFlex, styles.colorBrand, styles.fontWeightNormal, styles.fontSize14PX].join(' ')}>
|
||||
<span className={[_s.default, _s.marginTop10PX, _s.text, _s.displayFlex, _s.colorBrand, _s.fontWeightNormal, _s.fontSize14PX].join(' ')}>
|
||||
{title}
|
||||
</span>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
import { Link } from 'react-router-dom';
|
||||
import Icon from '../../components/icon';
|
||||
|
||||
export default class ColumnLink extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
icon: PropTypes.string.isRequired,
|
||||
text: PropTypes.string.isRequired,
|
||||
to: PropTypes.string,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { to, icon, text } = this.props;
|
||||
|
||||
return (
|
||||
<Link to={to} className='column-link'>
|
||||
<Icon id={icon} fixedWidth className='column-link__icon' />
|
||||
{text}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
.column-link {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-base-color, 11%);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&--transparent {
|
||||
background: transparent;
|
||||
color: $ui-secondary-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: transparent;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default } from './column_link';
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
export default class ColumnSubheading extends PureComponent {
|
||||
static propTypes = {
|
||||
text: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { text } = this.props;
|
||||
|
||||
return (
|
||||
<div className='column-subheading'>
|
||||
{text}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
.column-subheading {
|
||||
background: $ui-base-color;
|
||||
color: $dark-text-color;
|
||||
padding: 8px 20px;
|
||||
text-transform: uppercase;
|
||||
cursor: default;
|
||||
|
||||
@include text-sizing(12px, 500);
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { default } from './column_subheading';
|
||||
|
|
@ -6,27 +6,28 @@ export default class DisplayName extends ImmutablePureComponent {
|
|||
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.map.isRequired,
|
||||
multiline: PropTypes.bool,
|
||||
};
|
||||
|
||||
render () {
|
||||
const { account } = this.props;
|
||||
|
||||
return (
|
||||
<span className={[styles.default, styles.flexRow, styles.maxWidth100PC, styles.alignItemsCenter].join(' ')}>
|
||||
<bdi className={[styles.text, styles.whiteSpaceNoWrap, styles.textOverflowEllipsis].join(' ')}>
|
||||
<span className={[_s.default, _s.flexRow, _s.maxWidth100PC, _s.alignItemsCenter].join(' ')}>
|
||||
<bdi className={[_s.text, _s.whiteSpaceNoWrap, _s.textOverflowEllipsis].join(' ')}>
|
||||
<strong
|
||||
className={[styles.text, styles.overflowWrapBreakWord, styles.whiteSpaceNoWrap, styles.fontSize15PX, styles.fontWeightBold, styles.colorBlack, styles.lineHeight125, styles.marginRight2PX].join(' ')}
|
||||
className={[_s.text, _s.overflowWrapBreakWord, _s.whiteSpaceNoWrap, _s.fontSize15PX, _s.fontWeightBold, _s.colorPrimary, _s.lineHeight125, _s.marginRight2PX].join(' ')}
|
||||
dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }}
|
||||
/>
|
||||
</bdi>
|
||||
{
|
||||
account.get('is_verified') &&
|
||||
<Icon id='verified' width='16px' height='16px' className={[styles.default]} title='Verified Account' />
|
||||
/*<Icon id='verified' width='15px' height='15px' className={[styles.default]} title='PRO' />
|
||||
<Icon id='verified' width='15px' height='15px' className={[styles.default]} title='Donor' />
|
||||
<Icon id='verified' width='15px' height='15px' className={[styles.default]} title='Investor' />*/
|
||||
<Icon id='verified' width='16px' height='16px' className={_s.default} title='Verified Account' />
|
||||
/*<Icon id='verified' width='15px' height='15px' className={[_s.default]} title='PRO' />
|
||||
<Icon id='verified' width='15px' height='15px' className={[_s.default]} title='Donor' />
|
||||
<Icon id='verified' width='15px' height='15px' className={[_s.default]} title='Investor' />*/
|
||||
}
|
||||
<span className={[styles.text, styles.displayFlex, styles.flexNormal, styles.flexShrink1, styles.fontSize15PX, styles.overflowWrapBreakWord, styles.textOverflowEllipsis, styles.marginLeft5PX, styles.colorSubtle, styles.fontWeightNormal, styles.lineHeight125].join(' ')}>
|
||||
<span className={[_s.text, _s.displayFlex, _s.flexNormal, _s.flexShrink1, _s.fontSize15PX, _s.overflowWrapBreakWord, _s.textOverflowEllipsis, _s.marginLeft5PX, _s.colorSecondary, _s.fontWeightNormal, _s.lineHeight125].join(' ')}>
|
||||
@{account.get('acct')}
|
||||
</span>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
export default class Divider extends PureComponent {
|
||||
render() {
|
||||
return (
|
||||
<div className={[_s.default, _s.borderBottom1PX, _s.bordercolorSecondary2, _s.marginBottom15PX, _s.width100PC].join(' ')} />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { Fragment } from 'react'
|
||||
import { NavLink } from 'react-router-dom'
|
||||
import { defineMessages, injectIntl } from 'react-intl'
|
||||
import { shortNumberFormat } from '../utils/numbers'
|
||||
import Image from './image'
|
||||
import Text from './text'
|
||||
|
||||
const messages = defineMessages({
|
||||
new_statuses: { id: 'groups.sidebar-panel.item.view', defaultMessage: 'new gabs' },
|
||||
no_recent_activity: { id: 'groups.sidebar-panel.item.no_recent_activity', defaultMessage: 'No recent activity' },
|
||||
})
|
||||
|
||||
const mapStateToProps = (state, { id }) => ({
|
||||
group: state.getIn(['groups', id]),
|
||||
relationships: state.getIn(['group_relationships', id]),
|
||||
})
|
||||
|
||||
export default
|
||||
@connect(mapStateToProps)
|
||||
@injectIntl
|
||||
class GroupListItem extends ImmutablePureComponent {
|
||||
static propTypes = {
|
||||
group: ImmutablePropTypes.map,
|
||||
relationships: ImmutablePropTypes.map,
|
||||
}
|
||||
|
||||
state = {
|
||||
hovering: false,
|
||||
}
|
||||
|
||||
handleOnMouseEnter = () => {
|
||||
this.setState({ hovering: true })
|
||||
}
|
||||
|
||||
handleOnMouseLeave = () => {
|
||||
this.setState({ hovering: false })
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl, group, relationships } = this.props
|
||||
const { hovering } = this.state
|
||||
|
||||
if (!relationships) return null
|
||||
|
||||
const unreadCount = relationships.get('unread_count')
|
||||
|
||||
const subtitle = unreadCount > 0 ? (
|
||||
<Fragment>
|
||||
{shortNumberFormat(unreadCount)}
|
||||
|
||||
{intl.formatMessage(messages.new_statuses)}
|
||||
</Fragment>
|
||||
) : intl.formatMessage(messages.no_recent_activity)
|
||||
|
||||
return (
|
||||
<NavLink
|
||||
to={`/groups/${group.get('id')}`}
|
||||
className={[_s.default, _s.noUnderline, _s.marginTop5PX, _s.overflowHidden, _s.radiusSmall, _s.marginBottom10PX, _s.border1PX, _s.bordercolorSecondary, _s.backgroundSubtle_onHover].join(' ')}
|
||||
onMouseEnter={() => this.handleOnMouseEnter()}
|
||||
onMouseLeave={() => this.handleOnMouseLeave()}
|
||||
>
|
||||
<Image
|
||||
src={group.get('cover')}
|
||||
alt={group.get('title')}
|
||||
className={_s.height122PX}
|
||||
/>
|
||||
<div className={[_s.default, _s.paddingHorizontal10PX, _s.marginVertical5PX].join(' ')}>
|
||||
<Text color='brand' weight='bold' underline={hovering}>
|
||||
{group.get('title')}
|
||||
</Text>
|
||||
<Text color='secondary' size='small' className={_s.marginVertical5PX}>
|
||||
{subtitle}
|
||||
</Text>
|
||||
</div>
|
||||
</NavLink>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
import { FormattedMessage } from 'react-intl'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { NavLink } from 'react-router-dom'
|
||||
import { shortNumberFormat } from '../utils/numbers'
|
||||
import Text from './text'
|
||||
|
||||
export default class HashtagItem extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
hashtag: ImmutablePropTypes.map.isRequired,
|
||||
};
|
||||
|
||||
state = {
|
||||
hovering: false,
|
||||
}
|
||||
|
||||
handleOnMouseEnter = () => {
|
||||
this.setState({ hovering: true })
|
||||
}
|
||||
|
||||
handleOnMouseLeave = () => {
|
||||
this.setState({ hovering: false })
|
||||
}
|
||||
|
||||
render() {
|
||||
const { hashtag } = this.props
|
||||
const { hovering } = this.state
|
||||
|
||||
return (
|
||||
<NavLink
|
||||
to='/test'
|
||||
className={[_s.default, _s.noUnderline, _s.backgroundSubtle_onHover, _s.paddingHorizontal15PX, _s.paddingVertical5PX].join(' ')}
|
||||
onMouseEnter={() => this.handleOnMouseEnter()}
|
||||
onMouseLeave={() => this.handleOnMouseLeave()}
|
||||
>
|
||||
<Text color='brand' size='medium' weight='bold' className={_s.paddingVertical2PX}>
|
||||
#randomhashtag
|
||||
</Text>
|
||||
<Text color='secondary' size='small' underline={hovering} className={_s.paddingVertical2PX}>
|
||||
10,240 Gabs
|
||||
</Text>
|
||||
</NavLink>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import classNames from 'classnames/bind'
|
||||
|
||||
const cx = classNames.bind(_s)
|
||||
|
||||
const SIZES = {
|
||||
h1: 'h1',
|
||||
h2: 'h2',
|
||||
h3: 'h3',
|
||||
h4: 'h4',
|
||||
h5: 'h5',
|
||||
h6: 'h6',
|
||||
}
|
||||
|
||||
export default class Heading extends PureComponent {
|
||||
static propTypes = {
|
||||
className: PropTypes.string,
|
||||
children: PropTypes.any,
|
||||
size: PropTypes.oneOf(Object.keys(SIZES)),
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
size: SIZES.h1,
|
||||
}
|
||||
|
||||
render() {
|
||||
const { className, children, size } = this.props
|
||||
|
||||
const classes = cx({
|
||||
default: 1,
|
||||
text: 1,
|
||||
|
||||
colorPrimary: [SIZES.h1, SIZES.h3].indexOf(size) > -1,
|
||||
colorSecondary: [SIZES.h2, SIZES.h4].indexOf(size) > -1,
|
||||
|
||||
fontSize24PX: size === SIZES.h1,
|
||||
fontSize19PX: size === SIZES.h2,
|
||||
fontSize16PX: size === SIZES.h3,
|
||||
fontSize13PX: size === SIZES.h4,
|
||||
|
||||
marginTop5PX: [SIZES.h2, SIZES.h4].indexOf(size) > -1,
|
||||
|
||||
// fontWeightNormal: weight === WEIGHTS.normal,
|
||||
// fontWeightMedium: weight === WEIGHTS.medium,
|
||||
fontWeightBold: [SIZES.h3, SIZES.h4].indexOf(size) > -1
|
||||
})
|
||||
|
||||
return React.createElement(
|
||||
size,
|
||||
{
|
||||
className: classes,
|
||||
},
|
||||
children,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
import AddIcon from './svgs/add_icon'
|
||||
import AppsIcon from './svgs/apps_icon'
|
||||
import AngleRightIcon from './svgs/angle_right_icon'
|
||||
import BackIcon from './svgs/back_icon'
|
||||
import CalendarIcon from './svgs/calendar_icon'
|
||||
import ChatIcon from './svgs/chat_icon'
|
||||
|
|
@ -20,6 +22,7 @@ import RepostIcon from './svgs/repost_icon'
|
|||
import SearchIcon from './svgs/search_icon'
|
||||
import ShareIcon from './svgs/share_icon'
|
||||
import ShopIcon from './svgs/shop_icon'
|
||||
import SubtractIcon from './svgs/subtract_icon'
|
||||
import TrendsIcon from './svgs/trends_icon'
|
||||
import VerifiedIcon from './svgs/verified_icon'
|
||||
import WarningIcon from './svgs/warning_icon'
|
||||
|
|
@ -37,8 +40,12 @@ export default class Icon extends PureComponent {
|
|||
const { id, ...options } = this.props
|
||||
|
||||
switch (id) {
|
||||
case 'add':
|
||||
return <AddIcon {...options} />
|
||||
case 'apps':
|
||||
return <AppsIcon {...options} />
|
||||
case 'angle-right':
|
||||
return <AngleRightIcon {...options} />
|
||||
case 'back':
|
||||
return <BackIcon {...options} />
|
||||
case 'calendar':
|
||||
|
|
@ -81,6 +88,8 @@ export default class Icon extends PureComponent {
|
|||
return <ShareIcon {...options} />
|
||||
case 'shop':
|
||||
return <ShopIcon {...options} />
|
||||
case 'subtract':
|
||||
return <SubtractIcon {...options} />
|
||||
case 'trends':
|
||||
return <TrendsIcon {...options} />
|
||||
case 'verified':
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
const AddIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 64 64',
|
||||
title = 'Add',
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<path d="M 61.5 29.5 L 34.5 29.5 L 34.5 2.5 C 34.5 1.121094 33.378906 0 32 0 C 30.621094 0 29.5 1.121094 29.5 2.5 L 29.5 29.5 L 2.5 29.5 C 1.121094 29.5 0 30.621094 0 32 C 0 33.378906 1.121094 34.5 2.5 34.5 L 29.5 34.5 L 29.5 61.5 C 29.5 62.878906 30.621094 64 32 64 C 33.378906 64 34.5 62.878906 34.5 61.5 L 34.5 34.5 L 61.5 34.5 C 62.878906 34.5 64 33.378906 64 32 C 64 30.621094 62.878906 29.5 61.5 29.5 Z M 61.5 29.5" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default AddIcon
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
const AngleRightIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 64 64',
|
||||
title = '',
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<path d="M 49.777344 29.503906 L 21.296875 1.023438 C 20.640625 0.363281 19.761719 0 18.824219 0 C 17.882812 0 17.003906 0.363281 16.347656 1.023438 L 14.25 3.121094 C 12.882812 4.484375 12.882812 6.707031 14.25 8.070312 L 38.164062 31.988281 L 14.222656 55.929688 C 13.5625 56.589844 13.199219 57.46875 13.199219 58.40625 C 13.199219 59.34375 13.5625 60.222656 14.222656 60.882812 L 16.320312 62.976562 C 16.980469 63.636719 17.859375 64 18.796875 64 C 19.734375 64 20.613281 63.636719 21.273438 62.976562 L 49.777344 34.472656 C 50.4375 33.808594 50.800781 32.925781 50.800781 31.988281 C 50.800781 31.046875 50.4375 30.164062 49.777344 29.503906 Z M 49.777344 29.503906" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default AngleRightIcon
|
||||
|
|
@ -18,7 +18,7 @@ const BackIcon = ({
|
|||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<path d="M 19.570312 9.542969 C 20.417969 8.695312 21.75 8.695312 22.59375 9.542969 C 23.410156 10.359375 23.410156 11.71875 22.59375 12.535156 L 7.265625 27.867188 L 57.851562 27.867188 C 59.03125 27.867188 60 28.804688 60 29.984375 C 60 31.164062 59.03125 32.128906 57.851562 32.128906 L 7.265625 32.128906 L 22.59375 47.433594 C 23.410156 48.277344 23.410156 49.640625 22.59375 50.457031 C 21.75 51.300781 20.417969 51.300781 19.570312 50.457031 L 0.613281 31.496094 C -0.207031 30.679688 -0.207031 29.316406 0.613281 28.503906 Z M 19.570312 9.542969" />
|
||||
<path d="M 56.394531 25.789062 C 56.148438 25.75 55.898438 25.730469 55.652344 25.734375 L 13.324219 25.734375 L 14.246094 25.304688 C 15.148438 24.878906 15.96875 24.296875 16.671875 23.585938 L 28.539062 11.71875 C 30.105469 10.226562 30.367188 7.824219 29.164062 6.027344 C 27.761719 4.117188 25.078125 3.699219 23.164062 5.101562 C 23.007812 5.214844 22.863281 5.339844 22.722656 5.472656 L 1.257812 26.9375 C -0.417969 28.609375 -0.417969 31.328125 1.253906 33.007812 C 1.257812 33.007812 1.257812 33.007812 1.257812 33.011719 L 22.722656 54.476562 C 24.402344 56.148438 27.121094 56.144531 28.796875 54.464844 C 28.925781 54.335938 29.050781 54.195312 29.164062 54.046875 C 30.367188 52.25 30.105469 49.851562 28.539062 48.359375 L 16.691406 36.464844 C 16.0625 35.835938 15.339844 35.308594 14.546875 34.898438 L 13.257812 34.320312 L 55.414062 34.320312 C 57.609375 34.402344 59.53125 32.867188 59.945312 30.714844 C 60.324219 28.371094 58.734375 26.167969 56.394531 25.789062 Z M 56.394531 25.789062" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const LoadingIcon = ({
|
|||
>
|
||||
<g transform='translate(82,50)'>
|
||||
<g transform='rotate(0)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fill-opacity='1' transform='scale(1.03405 1.03405)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='1' transform='scale(1.03405 1.03405)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='-1.0294117647058822s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-1.0294117647058822s'></animate>
|
||||
</circle>
|
||||
|
|
@ -23,7 +23,7 @@ const LoadingIcon = ({
|
|||
</g>
|
||||
<g transform='translate(72.62741699796952,72.62741699796952)'>
|
||||
<g transform='rotate(45)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fill-opacity='0.875' transform='scale(1.09655 1.09655)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.875' transform='scale(1.09655 1.09655)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='-0.8823529411764705s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.8823529411764705s'></animate>
|
||||
</circle>
|
||||
|
|
@ -31,7 +31,7 @@ const LoadingIcon = ({
|
|||
</g>
|
||||
<g transform='translate(50,82)'>
|
||||
<g transform='rotate(90)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fill-opacity='0.75' transform='scale(1.15905 1.15905)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.75' transform='scale(1.15905 1.15905)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='-0.7352941176470588s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.7352941176470588s'></animate>
|
||||
</circle>
|
||||
|
|
@ -39,7 +39,7 @@ const LoadingIcon = ({
|
|||
</g>
|
||||
<g transform='translate(27.37258300203048,72.62741699796952)'>
|
||||
<g transform='rotate(135)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fill-opacity='0.625' transform='scale(1.22155 1.22155)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.625' transform='scale(1.22155 1.22155)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='-0.588235294117647s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.588235294117647s'></animate>
|
||||
</circle>
|
||||
|
|
@ -47,7 +47,7 @@ const LoadingIcon = ({
|
|||
</g>
|
||||
<g transform='translate(18,50)'>
|
||||
<g transform='rotate(180)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fill-opacity='0.5' transform='scale(1.28405 1.28405)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.5' transform='scale(1.28405 1.28405)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='-0.4411764705882352s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.4411764705882352s'></animate>
|
||||
</circle>
|
||||
|
|
@ -55,7 +55,7 @@ const LoadingIcon = ({
|
|||
</g>
|
||||
<g transform='translate(27.372583002030474,27.37258300203048)'>
|
||||
<g transform='rotate(225)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fill-opacity='0.375' transform='scale(1.34655 1.34655)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.375' transform='scale(1.34655 1.34655)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='-0.2941176470588235s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.2941176470588235s'></animate>
|
||||
</circle>
|
||||
|
|
@ -63,7 +63,7 @@ const LoadingIcon = ({
|
|||
</g>
|
||||
<g transform='translate(50,18)'>
|
||||
<g transform='rotate(270)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fill-opacity='0.25' transform='scale(1.40905 1.40905)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.25' transform='scale(1.40905 1.40905)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='-0.14705882352941174s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.14705882352941174s'></animate>
|
||||
</circle>
|
||||
|
|
@ -71,7 +71,7 @@ const LoadingIcon = ({
|
|||
</g>
|
||||
<g transform='translate(72.62741699796952,27.372583002030474)'>
|
||||
<g transform='rotate(315)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fill-opacity='0.125' transform='scale(1.47155 1.47155)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.125' transform='scale(1.47155 1.47155)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='0s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='0s'></animate>
|
||||
</circle>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
const SubtractIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 64 64',
|
||||
title = 'Subtract',
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<path d="M 61.5 29.5 L 2.5 29.5 C 1.121094 29.5 0 30.621094 0 32 C 0 33.378906 1.121094 34.5 2.5 34.5 L 61.5 34.5 C 62.878906 34.5 64 33.378906 64 32 C 64 30.621094 62.878906 29.5 61.5 29.5 Z M 61.5 29.5" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default SubtractIcon
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import classNames from 'classnames/bind'
|
||||
import { autoPlayGif } from '../initial_state'
|
||||
|
||||
// : testing :
|
||||
const placeholderSource = 'https://via.placeholder.com/150'
|
||||
|
||||
const cx = classNames.bind(_s)
|
||||
|
||||
export default class Image extends PureComponent {
|
||||
static propTypes = {
|
||||
alt: PropTypes.string,
|
||||
src: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
fit: PropTypes.oneOf(['contain', 'cover', 'tile', 'none']),
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
width: '100%',
|
||||
fit: 'cover',
|
||||
}
|
||||
|
||||
render() {
|
||||
const { src, fit, className, ...otherProps } = this.props
|
||||
|
||||
const source = src || placeholderSource
|
||||
const classes = cx(className, {
|
||||
default: 1,
|
||||
objectFitCover: fit === 'cover'
|
||||
})
|
||||
|
||||
return (
|
||||
<img
|
||||
className={classes}
|
||||
{...otherProps}
|
||||
src={source}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
export default class Input extends PureComponent {
|
||||
render() {
|
||||
const { children } = this.props
|
||||
|
||||
return (
|
||||
<input />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,48 +1,52 @@
|
|||
import Sticky from 'react-stickynode'
|
||||
import Search from '../search'
|
||||
import ColumnHeader from '../column_header'
|
||||
import Header from '../header'
|
||||
import Sidebar from '../sidebar'
|
||||
|
||||
export default class DefaultLayout extends PureComponent {
|
||||
static propTypes = {
|
||||
actions: PropTypes.array,
|
||||
layout: PropTypes.object,
|
||||
title: PropTypes.string,
|
||||
showBackBtn: PropTypes.boolean,
|
||||
showBackBtn: PropTypes.bool,
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children, title, showBackBtn, layout } = this.props
|
||||
const { children, title, showBackBtn, layout, actions } = this.props
|
||||
|
||||
return (
|
||||
<div className={[styles.default, styles.flexRow, styles.width100PC, styles.backgroundColorSubtle3].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.width100PC, _s.heightMin100VH, _s.backgroundcolorSecondary3].join(' ')}>
|
||||
|
||||
<Header />
|
||||
<Sidebar />
|
||||
|
||||
<main role='main' className={[styles.default, styles.flexShrink1, styles.flexGrow1, styles.borderColorSubtle2, styles.borderLeft1PX].join(' ')}>
|
||||
<main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.bordercolorSecondary2, _s.borderLeft1PX].join(' ')}>
|
||||
|
||||
<div className={[styles.default, styles.height53PX, styles.borderBottom1PX, styles.borderColorSubtle2, styles.backgroundColorSubtle3, styles.z3, styles.top0, styles.positionFixed].join(' ')}>
|
||||
<div className={[styles.default, styles.height53PX, styles.paddingLeft15PX, styles.width1015PX, styles.flexRow, styles.justifyContentSpaceBetween].join(' ')}>
|
||||
<div className={[styles.default, styles.width660PX].join(' ')}>
|
||||
<ColumnHeader title={title} />
|
||||
<div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.bordercolorSecondary2, _s.backgroundcolorSecondary3, _s.z3, _s.top0, _s.positionFixed].join(' ')}>
|
||||
<div className={[_s.default, _s.height53PX, _s.paddingLeft15PX, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
|
||||
<div className={[_s.default, _s.width660PX].join(' ')}>
|
||||
<ColumnHeader title={title} showBackBtn={showBackBtn} actions={actions} />
|
||||
</div>
|
||||
<div className={[styles.default, styles.width325PX].join(' ')}>
|
||||
<div className={[_s.default, _s.width325PX].join(' ')}>
|
||||
<Search />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={[styles.default, styles.height53PX].join(' ')}></div>
|
||||
<div className={[_s.default, _s.height53PX].join(' ')}></div>
|
||||
|
||||
<div className={[styles.default, styles.width1015PX, styles.flexRow, styles.justifyContentSpaceBetween, styles.paddingLeft15PX, styles.paddingVertical15PX].join(' ')}>
|
||||
<div className={[styles.default, styles.width660PX, styles.z1].join(' ')}>
|
||||
<div className={styles.default}>
|
||||
<div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.paddingLeft15PX, _s.paddingVertical15PX].join(' ')}>
|
||||
<div className={[_s.default, _s.width660PX, _s.z1].join(' ')}>
|
||||
<div className={_s.default}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={[styles.default, styles.width325PX].join(' ')}>
|
||||
<div className={styles.default}>
|
||||
<div className={[_s.default, _s.width325PX].join(' ')}>
|
||||
<Sticky top={73} enabled>
|
||||
<div className={[_s.default, _s.width325PX].join(' ')}>
|
||||
{layout}
|
||||
</div>
|
||||
</Sticky>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,32 +1,32 @@
|
|||
import ColumnHeader from '../column_header'
|
||||
import Header from '../header'
|
||||
import Sidebar from '../sidebar'
|
||||
|
||||
export default class ProfileLayout extends PureComponent {
|
||||
static propTypes = {
|
||||
layout: PropTypes.object,
|
||||
title: PropTypes.string,
|
||||
showBackBtn: PropTypes.boolean,
|
||||
showBackBtn: PropTypes.bool,
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children } = this.props
|
||||
|
||||
return (
|
||||
<div className={[styles.default, styles.flexRow, styles.width100PC, styles.backgroundColorSubtle3].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.width100PC, _s.heightMin100VH, _s.backgroundcolorSecondary3].join(' ')}>
|
||||
|
||||
<Header />
|
||||
<Sidebar />
|
||||
|
||||
<main role='main' className={[styles.default, styles.flexShrink1, styles.flexGrow1, styles.borderColorSubtle2, styles.borderLeft1PX].join(' ')}>
|
||||
<main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.bordercolorSecondary2, _s.borderLeft1PX].join(' ')}>
|
||||
|
||||
<div className={[styles.default, styles.height350PX, styles.width100PC].join(' ')}>
|
||||
<div className={[_s.default, _s.height350PX, _s.width100PC].join(' ')}>
|
||||
<img
|
||||
className={[styles.default, styles.height350PX, styles.width100PC, styles.objectFitCover].join(' ')}
|
||||
className={[_s.default, _s.height350PX, _s.width100PC, _s.objectFitCover].join(' ')}
|
||||
src='https://gab.com/media/user/bz-5cf53d08403d4.jpeg'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={[styles.default, styles.width1015PX, styles.flexRow, styles.justifyContentSpaceBetween, styles.paddingLeft15PX, styles.paddingVertical15PX].join(' ')}>
|
||||
<div className={[styles.default, styles.z1].join(' ')}>
|
||||
<div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.paddingLeft15PX, _s.paddingVertical15PX].join(' ')}>
|
||||
<div className={[_s.default, _s.z1].join(' ')}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,6 +31,9 @@ const mapDispatchToProps = (dispatch) => ({
|
|||
},
|
||||
})
|
||||
|
||||
const cx = classNames.bind(_s)
|
||||
const currentYear = moment().format('YYYY')
|
||||
|
||||
export default @connect(null, mapDispatchToProps)
|
||||
@injectIntl
|
||||
class LinkFooter extends PureComponent {
|
||||
|
|
@ -60,10 +63,6 @@ class LinkFooter extends PureComponent {
|
|||
const { onOpenHotkeys, intl } = this.props
|
||||
const { hoveringItemIndex } = this.state
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
|
||||
const currentYear = moment().format('YYYY')
|
||||
|
||||
const linkFooterItems = [
|
||||
{
|
||||
to: '#',
|
||||
|
|
@ -109,8 +108,8 @@ class LinkFooter extends PureComponent {
|
|||
]
|
||||
|
||||
return (
|
||||
<div className={[styles.default, styles.paddingHorizontal10PX].join(' ')}>
|
||||
<nav aria-label='Footer' role='navigation' className={[styles.default, styles.flexWrap, styles.flexRow].join(' ')}>
|
||||
<div className={[_s.default, _s.paddingHorizontal10PX].join(' ')}>
|
||||
<nav aria-label='Footer' role='navigation' className={[_s.default, _s.flexWrap, _s.flexRow].join(' ')}>
|
||||
{
|
||||
linkFooterItems.map((linkFooterItem, i) => {
|
||||
if (linkFooterItem.requiresUser && !me) return null
|
||||
|
|
@ -122,9 +121,9 @@ class LinkFooter extends PureComponent {
|
|||
paddingRight15PX: 1,
|
||||
cursorPointer: 1,
|
||||
backgroundTransparent: 1,
|
||||
colorSubtle: i !== hoveringItemIndex,
|
||||
colorSecondary: i !== hoveringItemIndex,
|
||||
noUnderline: i !== hoveringItemIndex,
|
||||
colorBlack: i === hoveringItemIndex,
|
||||
colorPrimary: i === hoveringItemIndex,
|
||||
underline: i === hoveringItemIndex,
|
||||
})
|
||||
|
||||
|
|
@ -157,14 +156,14 @@ class LinkFooter extends PureComponent {
|
|||
)
|
||||
})
|
||||
}
|
||||
<span className={[styles.default, styles.text, styles.fontSize13PX, styles.colorSubtle, styles.marginVertical5PX].join(' ')}>© {currentYear} Gab AI, Inc.</span>
|
||||
<span className={[_s.default, _s.text, _s.fontSize13PX, _s.colorSecondary, _s.marginVertical5PX].join(' ')}>© {currentYear} Gab AI, Inc.</span>
|
||||
</nav>
|
||||
|
||||
<p className={[styles.default, styles.text, styles.fontSize13PX, styles.colorSubtle, styles.marginTop10PX].join(' ')}>
|
||||
<p className={[_s.default, _s.text, _s.fontSize13PX, _s.colorSecondary, _s.marginTop10PX, _s.marginBottom15PX].join(' ')}>
|
||||
<FormattedMessage
|
||||
id='getting_started.open_source_notice'
|
||||
defaultMessage='Gab Social is open source software. You can contribute or report issues on our self-hosted GitLab at {gitlab}.'
|
||||
values={{ gitlab: <a href={source_url} className={[styles.inherit].join(' ')} rel='noopener' target='_blank'>{repository}</a> }}
|
||||
values={{ gitlab: <a href={source_url} className={[_s.inherit].join(' ')} rel='noopener' target='_blank'>{repository}</a> }}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ class LoadMore extends PureComponent {
|
|||
|
||||
return (
|
||||
<button
|
||||
className={[styles.default].join(' ')}
|
||||
className={[_s.default].join(' ')}
|
||||
disabled={disabled || !visible}
|
||||
style={{ visibility: visible ? 'visible' : 'hidden' }}
|
||||
onClick={this.handleClick}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ const messages = defineMessages({
|
|||
hidden: { id: 'status.media_hidden', defaultMessage: 'Media hidden' },
|
||||
});
|
||||
|
||||
const cx = classNames.bind(_s)
|
||||
class Item extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
|
|
@ -139,7 +140,7 @@ class Item extends ImmutablePureComponent {
|
|||
|
||||
if (attachment.get('type') === 'unknown') {
|
||||
return (
|
||||
<div className={[styles.default].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
|
||||
<div className={[_s.default].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
|
||||
<a className='media-gallery__item-thumbnail' href={attachment.get('remote_url')} target='_blank' style={{ cursor: 'pointer' }}>
|
||||
<canvas width={32} height={32} ref={this.setCanvasRef} className='media-gallery__preview' />
|
||||
</a>
|
||||
|
|
@ -164,7 +165,7 @@ class Item extends ImmutablePureComponent {
|
|||
|
||||
thumbnail = (
|
||||
<a
|
||||
className={[styles.default, styles.overflowHidden, styles.height100PC, styles.width100PC, styles.cursorPointer].join(' ')}
|
||||
className={[_s.default, _s.overflowHidden, _s.height100PC, _s.width100PC, _s.cursorPointer].join(' ')}
|
||||
href={attachment.get('remote_url') || originalUrl}
|
||||
onClick={this.handleClick}
|
||||
target='_blank'
|
||||
|
|
@ -173,7 +174,7 @@ class Item extends ImmutablePureComponent {
|
|||
src={previewUrl}
|
||||
srcSet={srcSet}
|
||||
sizes={sizes}
|
||||
className={[styles.height100PC, styles.width100PC, styles.objectFitCover].join(' ')}
|
||||
className={[_s.height100PC, _s.width100PC, _s.objectFitCover].join(' ')}
|
||||
alt={attachment.get('description')}
|
||||
title={attachment.get('description')}
|
||||
style={{ objectPosition: `${x}% ${y}%` }}
|
||||
|
|
@ -185,9 +186,9 @@ class Item extends ImmutablePureComponent {
|
|||
const autoPlay = !isIOS() && autoPlayGif !== false;
|
||||
|
||||
thumbnail = (
|
||||
<div className={[styles.default, styles.overflowHidden, styles.heigh100PC, styles.width100PC].join(' ')}>
|
||||
<div className={[_s.default, _s.overflowHidden, _s.heigh100PC, _s.width100PC].join(' ')}>
|
||||
<video
|
||||
className={[styles.default, styles.cursorPointer, styles.objectFitCover, styles.width100PC, styles.height100PC, styles.z1].join(' ')}
|
||||
className={[_s.default, _s.cursorPointer, _s.objectFitCover, _s.width100PC, _s.height100PC, _s.z1].join(' ')}
|
||||
aria-label={attachment.get('description')}
|
||||
title={attachment.get('description')}
|
||||
role='application'
|
||||
|
|
@ -209,8 +210,8 @@ class Item extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={[styles.defeault, styles.positionAbsolute].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
|
||||
<canvas width={0} height={0} ref={this.setCanvasRef} className={styles.displayNone} />
|
||||
<div className={[_s.defeault, _s.positionAbsolute].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
|
||||
<canvas width={0} height={0} ref={this.setCanvasRef} className={_s.displayNone} />
|
||||
{visible && thumbnail}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -512,12 +513,11 @@ class MediaGallery extends PureComponent {
|
|||
);
|
||||
}
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
const containerClasses = cx({
|
||||
default: 1,
|
||||
displayBlock: 1,
|
||||
overflowHidden: 1,
|
||||
borderColorSubtle: size === 1,
|
||||
bordercolorSecondary: size === 1,
|
||||
borderTop1PX: size === 1,
|
||||
borderBottom1PX: size === 1,
|
||||
paddingHorizontal5PX: size > 1,
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
export { default } from './notification_counter';
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
.notification-counter {
|
||||
box-sizing: border-box;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 1px 3px 0;
|
||||
border-radius: 8px;
|
||||
// @include font-montserrat();
|
||||
color: #fff;
|
||||
background: $gab-alert-red;
|
||||
|
||||
@include text-sizing(14px, 400, 14px, center);
|
||||
@include abs-position(-14px, auto, auto, -16px);
|
||||
|
||||
@media screen and (max-width: $nav-breakpoint-1) {
|
||||
@include abs-position(0, auto, auto, 27px, false);
|
||||
}
|
||||
}
|
||||
|
||||
.column-link--transparent .notification-counter {
|
||||
border-color: darken($ui-base-color, 8%);
|
||||
}
|
||||
|
|
@ -1,19 +1,14 @@
|
|||
import { Fragment } from 'react'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { defineMessages, injectIntl } from 'react-intl'
|
||||
import { NavLink } from 'react-router-dom'
|
||||
import classNames from 'classnames/bind'
|
||||
import { shortNumberFormat } from '../../utils/numbers'
|
||||
import PanelLayout from './panel_layout'
|
||||
import Icon from '../icon'
|
||||
import GroupListItem from '../group_list_item'
|
||||
import Button from '../button'
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'groups.sidebar-panel.title', defaultMessage: 'Groups you\'re in' },
|
||||
show_all: { id: 'groups.sidebar-panel.show_all', defaultMessage: 'Show all' },
|
||||
all: { id: 'groups.sidebar-panel.all', defaultMessage: 'All' },
|
||||
new_statuses: { id: 'groups.sidebar-panel.item.view', defaultMessage: 'new gabs' },
|
||||
no_recent_activity: { id: 'groups.sidebar-panel.item.no_recent_activity', defaultMessage: 'No recent activity' },
|
||||
})
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
|
|
@ -36,119 +31,26 @@ class GroupSidebarPanel extends ImmutablePureComponent {
|
|||
return (
|
||||
<PanelLayout
|
||||
title={intl.formatMessage(messages.title)}
|
||||
button={(
|
||||
<NavLink
|
||||
to='/groups/browse/member'
|
||||
className={[styles.default, styles.fontWeightBold, styles.text, styles.colorBrand, styles.fontSize13PX, styles.noUnderline].join(' ')}
|
||||
buttonTitle={intl.formatMessage(messages.all)}
|
||||
buttonTo='/groups/browse/member'
|
||||
>
|
||||
{intl.formatMessage(messages.all)}
|
||||
</NavLink>
|
||||
)}
|
||||
>
|
||||
<div className={styles.default}>
|
||||
<div className={_s.default}>
|
||||
{
|
||||
groupIds.slice(0, 6).map(groupId => (
|
||||
<GroupPanelItem key={`group-panel-item-${groupId}`} id={groupId} />
|
||||
<GroupListItem
|
||||
key={`group-panel-item-${groupId}`}
|
||||
id={groupId}
|
||||
/>
|
||||
))
|
||||
}
|
||||
{
|
||||
count > 6 &&
|
||||
<NavLink
|
||||
to='/groups/browse/member'
|
||||
className={[styles.default, styles.noUnderline, styles.paddingVertical5PX, styles.marginRightAuto, styles.marginTop5PX, styles.marginLeftAuto, styles.cursorPointer, styles.circle, styles.text, styles.displayFlex, styles.colorBrand].join(' ')}
|
||||
>
|
||||
<Button to='/groups/browse/member' block text>
|
||||
{intl.formatMessage(messages.show_all)}
|
||||
</NavLink>
|
||||
</Button>
|
||||
}
|
||||
</div>
|
||||
</PanelLayout>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps2 = (state, { id }) => ({
|
||||
group: state.getIn(['groups', id]),
|
||||
relationships: state.getIn(['group_relationships', id]),
|
||||
})
|
||||
|
||||
@connect(mapStateToProps2)
|
||||
@injectIntl
|
||||
class GroupPanelItem extends ImmutablePureComponent {
|
||||
static propTypes = {
|
||||
group: ImmutablePropTypes.map,
|
||||
relationships: ImmutablePropTypes.map,
|
||||
}
|
||||
|
||||
state = {
|
||||
hovering: false,
|
||||
}
|
||||
|
||||
handleOnMouseEnter = () => {
|
||||
this.setState({ hovering: true })
|
||||
}
|
||||
|
||||
handleOnMouseLeave = () => {
|
||||
this.setState({ hovering: false })
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl, group, relationships } = this.props
|
||||
const { hovering } = this.state
|
||||
|
||||
if (!relationships) return null
|
||||
|
||||
const unreadCount = relationships.get('unread_count')
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
|
||||
const titleClasses = cx({
|
||||
default: 1,
|
||||
text: 1,
|
||||
displayFlex: 1,
|
||||
colorBrand: 1,
|
||||
fontSize14PX: 1,
|
||||
fontWeightBold: 1,
|
||||
lineHeight15: 1,
|
||||
underline: hovering,
|
||||
})
|
||||
|
||||
return (
|
||||
<NavLink
|
||||
to={`/groups/${group.get('id')}`}
|
||||
className={[styles.default, styles.noUnderline, styles.marginTop5PX, styles.overflowHidden, styles.radiusSmall, styles.marginBottom10PX, styles.border1PX, styles.borderColorSubtle].join(' ')}
|
||||
onMouseEnter={() => this.handleOnMouseEnter()}
|
||||
onMouseLeave={() => this.handleOnMouseLeave()}
|
||||
>
|
||||
<div className={[styles.default, styles.height122PX].join(' ')}>
|
||||
<img
|
||||
src='https://gab.com/media/user/bz-5cf53d08403d4.jpeg'
|
||||
alt={group.get('title')}
|
||||
className={[styles.default, styles.objectFitCover, styles.height122PX, styles.width100PC].join(' ')}
|
||||
/>
|
||||
</div>
|
||||
<div className={[styles.default, styles.paddingHorizontal10PX, styles.marginVertical5PX].join(' ')}>
|
||||
<span className={titleClasses}>
|
||||
{group.get('title')}
|
||||
</span>
|
||||
<span className={[styles.default, styles.text, styles.alignItemsCenter, styles.displayFlex, styles.flexRow, styles.colorSubtle, styles.fontSize13PX, styles.fontWeightNormal, styles.lineHeight15].join(' ')}>
|
||||
{
|
||||
unreadCount > 0 &&
|
||||
<Fragment>
|
||||
{shortNumberFormat(unreadCount)}
|
||||
|
||||
{intl.formatMessage(messages.new_statuses)}
|
||||
</Fragment>
|
||||
}
|
||||
{
|
||||
unreadCount === 0 &&
|
||||
<Fragment>
|
||||
{intl.formatMessage(messages.no_recent_activity)}
|
||||
</Fragment>
|
||||
}
|
||||
<span className={[styles.marginLeftAuto, styles.inherit].join(' ')}>→</span>
|
||||
</span>
|
||||
</div>
|
||||
</NavLink>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
import { injectIntl, defineMessages } from 'react-intl'
|
||||
import { fetchHashtags } from '../../actions/hashtags'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import PanelLayout from './panel_layout'
|
||||
import HashtagItem from '../hashtag_item'
|
||||
import Button from '../button'
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'hashtags.title', defaultMessage: 'Popular Hashtags' },
|
||||
show_all: { id: 'groups.sidebar-panel.show_all', defaultMessage: 'Show all' },
|
||||
})
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
hashtags: state.getIn(['hashtags', 'items']),
|
||||
})
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
fetchHashtags: () => dispatch(fetchHashtags()),
|
||||
}
|
||||
}
|
||||
|
||||
export default @connect(mapStateToProps, mapDispatchToProps)
|
||||
@injectIntl
|
||||
class HashtagsPanel extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
hashtags: ImmutablePropTypes.list.isRequired,
|
||||
fetchHashtags: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.props.fetchHashtags()
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl, hashtags } = this.props
|
||||
|
||||
// !!! TESTING !!!
|
||||
// if (hashtags.isEmpty()) {
|
||||
// return null
|
||||
// }
|
||||
|
||||
return (
|
||||
<PanelLayout title={intl.formatMessage(messages.title)} noPadding>
|
||||
<div className={_s.default}>
|
||||
{ /* hashtags && hashtags.map(hashtag => (
|
||||
<HashtagingItem key={hashtag.get('name')} hashtag={hashtag} />
|
||||
)) */ }
|
||||
<HashtagItem />
|
||||
<HashtagItem />
|
||||
<HashtagItem />
|
||||
<HashtagItem />
|
||||
<HashtagItem />
|
||||
</div>
|
||||
<Button to='/groups/browse/member' block text>
|
||||
{intl.formatMessage(messages.show_all)}
|
||||
</Button>
|
||||
</PanelLayout>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import { fetchSuggestions, dismissSuggestion } from '../../actions/suggestions';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PanelLayout from './panel_layout';
|
||||
|
||||
const messages = defineMessages({
|
||||
dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' },
|
||||
title: { id: 'lists.panel_title', defaultMessage: 'On This List ({count})' },
|
||||
show_all: { id: 'groups.sidebar-panel.show_all', defaultMessage: 'Show all' },
|
||||
});
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
// accountIds: state.getIn(['listEditor', 'accounts', 'items']),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
export default @connect(mapStateToProps, mapDispatchToProps)
|
||||
@injectIntl
|
||||
class ListDetailsPanel extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
handleShowAllLists() {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl } = this.props;
|
||||
|
||||
const count = 10
|
||||
|
||||
return (
|
||||
<PanelLayout
|
||||
title={intl.formatMessage(messages.title, { count })}
|
||||
buttonTitle={intl.formatMessage(messages.show_all)}
|
||||
buttonAction={this.handleShowAllLists}
|
||||
>
|
||||
<div className={_s.default}>
|
||||
|
||||
</div>
|
||||
</PanelLayout>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
|
@ -1,37 +1,62 @@
|
|||
import classNames from 'classnames/bind'
|
||||
import Heading from '../heading'
|
||||
import Button from '../button'
|
||||
|
||||
export default class PanelLayout extends PureComponent {
|
||||
static propTypes = {
|
||||
title: PropTypes.string,
|
||||
subtitle: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
hasBackground: PropTypes.boolean,
|
||||
button: PropTypes.node,
|
||||
buttonTitle: PropTypes.string,
|
||||
buttonAction: PropTypes.func,
|
||||
buttonTo: PropTypes.func,
|
||||
noPadding: PropTypes.bool,
|
||||
}
|
||||
|
||||
render() {
|
||||
const { title, subtitle, button, hasBackground, children } = this.props
|
||||
const { title, subtitle, buttonTitle, buttonAction, buttonTo, noPadding, children } = this.props
|
||||
|
||||
return (
|
||||
<aside className={[styles.default, styles.backgroundWhite, styles.overflowHidden, styles.radiusSmall, styles.marginBottom15PX, styles.borderColorSubtle, styles.border1PX].join(' ')}>
|
||||
<aside className={[_s.default, _s.backgroundWhite, _s.overflowHidden, _s.radiusSmall, _s.marginBottom15PX, _s.bordercolorSecondary, _s.border1PX].join(' ')}>
|
||||
{
|
||||
(title || subtitle) &&
|
||||
<div className={[styles.default, styles.paddingHorizontal15PX, styles.paddingVertical10PX, styles.borderColorSubtle, styles.borderBottom1PX].join(' ')}>
|
||||
<div className={[styles.default, styles.flexRow, styles.alignItemsCenter].join(' ')}>
|
||||
<h1 className={[styles.default, styles.text, styles.fontWeightBold, styles.colorBlack, styles.fontSize16PX].join(' ')}>{title}</h1>
|
||||
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX, _s.bordercolorSecondary, _s.borderBottom1PX].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
|
||||
<Heading size='h3'>
|
||||
{title}
|
||||
</Heading>
|
||||
{
|
||||
!!button &&
|
||||
<div className={[styles.default, styles.marginLeftAuto].join(' ')}>
|
||||
{button}
|
||||
(!!buttonTitle && (!!buttonAction || !!buttonTo)) &&
|
||||
<div className={[_s.default, _s.marginLeftAuto].join(' ')}>
|
||||
<Button
|
||||
text
|
||||
to={buttonTo}
|
||||
onClick={buttonAction}
|
||||
className={[_s.default, _s.cursorPointer, _s.fontWeightBold, _s.text, _s.colorBrand, _s.fontSize13PX, _s.noUnderline].join(' ')}
|
||||
>
|
||||
{buttonTitle}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
{subtitle && <h2 className={[styles.default, styles.text, styles.colorSubtle, styles.fontSize13PX, styles.fontWeightBold, styles.marginTop5PX].join(' ')}>{subtitle}</h2>}
|
||||
{
|
||||
subtitle &&
|
||||
<Heading size='h4'>
|
||||
{subtitle}
|
||||
</Heading>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<div className={[styles.default, styles.paddingHorizontal15PX, styles.paddingVertical10PX].join(' ')}>
|
||||
|
||||
{
|
||||
!noPadding &&
|
||||
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
|
||||
{children}
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
noPadding && children
|
||||
}
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,9 @@ class SignUpPanel extends PureComponent {
|
|||
title={intl.formatMessage(messages.title)}
|
||||
subtitle={intl.formatMessage(messages.subtitle)}
|
||||
>
|
||||
<Button href="/auth/sign_up">{intl.formatMessage(messages.register)}</Button>
|
||||
<Button href="/auth/sign_up">
|
||||
{intl.formatMessage(messages.register)}
|
||||
</Button>
|
||||
</PanelLayout>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,49 +1,50 @@
|
|||
import { injectIntl, defineMessages } from 'react-intl';
|
||||
import { fetchTrends } from '../../actions/trends';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import TrendingItem from '../../components/trending_item';
|
||||
import PanelLayout from './panel_layout';
|
||||
import { injectIntl, defineMessages } from 'react-intl'
|
||||
// import { fetchTrends } from '../../actions/trends'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import TrendingItem from '../../components/trending_item'
|
||||
import PanelLayout from './panel_layout'
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id:'trends.title', defaultMessage: 'Trends for you' },
|
||||
});
|
||||
title: { id:'trends.title', defaultMessage: 'Trending right now' },
|
||||
})
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
trends: state.getIn(['trends', 'items']),
|
||||
});
|
||||
// const mapStateToProps = state => ({
|
||||
// trends: state.getIn(['trends', 'items']),
|
||||
// })
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
fetchTrends: () => dispatch(fetchTrends()),
|
||||
}
|
||||
};
|
||||
// const mapDispatchToProps = dispatch => {
|
||||
// return {
|
||||
// fetchTrends: () => dispatch(fetchTrends()),
|
||||
// }
|
||||
// }
|
||||
|
||||
export default @connect(mapStateToProps, mapDispatchToProps)
|
||||
export default
|
||||
// @connect(mapStateToProps, mapDispatchToProps)
|
||||
@injectIntl
|
||||
class TrendsPanel extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
trends: ImmutablePropTypes.list.isRequired,
|
||||
fetchTrends: PropTypes.func.isRequired,
|
||||
// fetchTrends: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
this.props.fetchTrends();
|
||||
// this.props.fetchTrends()
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl, trends } = this.props;
|
||||
const { intl, trends } = this.props
|
||||
|
||||
// !!! TESTING !!!
|
||||
// if (trends.isEmpty()) {
|
||||
// return null;
|
||||
// return null
|
||||
// }
|
||||
|
||||
return (
|
||||
<PanelLayout title={intl.formatMessage(messages.title)}>
|
||||
<div className={styles.default}>
|
||||
<div className={_s.default}>
|
||||
{ /* trends && trends.map(hashtag => (
|
||||
<TrendingItem key={hashtag.get('name')} hashtag={hashtag} />
|
||||
)) */ }
|
||||
|
|
@ -54,6 +55,6 @@ class TrendsPanel extends ImmutablePureComponent {
|
|||
<TrendingItem />
|
||||
</div>
|
||||
</PanelLayout>
|
||||
);
|
||||
)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
import { NavLink } from 'react-router-dom'
|
||||
import { injectIntl, defineMessages } from 'react-intl'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { autoPlayGif, me } from '../../initial_state'
|
||||
import { makeGetAccount } from '../../selectors'
|
||||
import { shortNumberFormat } from '../../utils/numbers'
|
||||
import DisplayName from '../display_name'
|
||||
import Avatar from '../avatar'
|
||||
import Image from '../image'
|
||||
import UserStat from '../user_stat'
|
||||
import PanelLayout from './panel_layout'
|
||||
|
||||
const messages = defineMessages({
|
||||
gabs: { id: 'account.posts', defaultMessage: 'Gabs' },
|
||||
followers: { id: 'account.followers', defaultMessage: 'Followers' },
|
||||
follows: { id: 'account.follows', defaultMessage: 'Follows' }
|
||||
})
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const getAccount = makeGetAccount()
|
||||
|
||||
return {
|
||||
account: getAccount(state, me),
|
||||
}
|
||||
}
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
@injectIntl
|
||||
class UserPanel extends ImmutablePureComponent {
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.map,
|
||||
intl: PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
render() {
|
||||
const { account, intl } = this.props
|
||||
const displayNameHtml = { __html: account.get('display_name_html') }
|
||||
|
||||
const statItems = [
|
||||
{
|
||||
to: `/${account.get('acct')}`,
|
||||
title: intl.formatMessage(messages.gabs),
|
||||
value: shortNumberFormat(account.get('statuses_count')),
|
||||
},
|
||||
{
|
||||
to: `/${account.get('acct')}/followers`,
|
||||
title: intl.formatMessage(messages.followers),
|
||||
value: shortNumberFormat(account.get('followers_count')),
|
||||
},
|
||||
{
|
||||
to: `/${account.get('acct')}/following`,
|
||||
title: intl.formatMessage(messages.follows),
|
||||
value: shortNumberFormat(account.get('following_count')),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<PanelLayout noPadding>
|
||||
<Image
|
||||
className={_s.height122PX}
|
||||
src={account.get('header_static')}
|
||||
/>
|
||||
|
||||
<NavLink
|
||||
className={[_s.default, _s.flexRow, _s.paddingVertical10PX, _s.paddingHorizontal15PX, _s.noUnderline].join(' ')}
|
||||
to={`/${account.get('acct')}`}
|
||||
>
|
||||
<div className={[_s.default, _s.marginTopNeg30PX, _s.circle, _s.borderColorWhite, _s.border2PX].join(' ')}>
|
||||
<Avatar account={account} size={62} />
|
||||
</div>
|
||||
<div className={[_s.default, _s.marginLeft15PX].join(' ')}>
|
||||
<DisplayName account={account} multiline />
|
||||
</div>
|
||||
</NavLink>
|
||||
|
||||
<div className={[_s.default, _s.marginBottom15PX, _s.marginTop5PX, _s.flexRow, _s.paddingHorizontal15PX].join(' ')}>
|
||||
{
|
||||
statItems.map((statItem, i) => (
|
||||
<UserStat {...statItem} key={`user-stat-panel-item-${i}`} />
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</PanelLayout>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -41,8 +41,6 @@ class WhoToFollowPanel extends ImmutablePureComponent {
|
|||
// : testing!!! :
|
||||
const suggestions = [
|
||||
"1",
|
||||
"1",
|
||||
"1",
|
||||
]
|
||||
// if (suggestions.isEmpty()) {
|
||||
// return null;
|
||||
|
|
@ -50,7 +48,7 @@ class WhoToFollowPanel extends ImmutablePureComponent {
|
|||
|
||||
return (
|
||||
<PanelLayout title={intl.formatMessage(messages.title)}>
|
||||
<div className={styles.default}>
|
||||
<div className={_s.default}>
|
||||
{suggestions && suggestions.map(accountId => (
|
||||
<AccountContainer
|
||||
key={accountId}
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ export default class Permalink extends PureComponent {
|
|||
className: PropTypes.string,
|
||||
href: PropTypes.string.isRequired,
|
||||
children: PropTypes.node,
|
||||
blank: PropTypes.boolean,
|
||||
button: PropTypes.boolean,
|
||||
blank: PropTypes.bool,
|
||||
button: PropTypes.bool,
|
||||
};
|
||||
|
||||
handleClick = e => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
export default class Popover extends PureComponent {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
{ /* */ }
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
import Text from './text'
|
||||
|
||||
export default class ProgressBar extends PureComponent {
|
||||
static propTypes = {
|
||||
progress: PropTypes.number,
|
||||
|
|
@ -10,11 +12,16 @@ export default class ProgressBar extends PureComponent {
|
|||
const style = {
|
||||
width: `${completed}%`,
|
||||
}
|
||||
const title = `${completed}% covered this month`
|
||||
|
||||
return (
|
||||
<a href='https://shop.dissenter.com/category/donations' className={[styles.default, styles.backgroundPanel, styles.noUnderline, styles.circle, styles.overflowHidden, styles.height22PX, styles.cursorPointer].join(' ')}>
|
||||
<div className={[styles.default, styles.backgroundColorBrandDark, styles.circle, styles.height22PX].join(' ')} style={style} />
|
||||
<span className={[styles.default, styles.text, styles.width100PC, styles.textAlignCenter, styles.colorWhite, styles.fontSize13PX, styles.positionAbsolute, styles.fontWeightBold, styles.displayFlex, styles.height100PC, styles.justifyContentCenter].join(' ')}>{completed}% covered this month</span>
|
||||
<a href='https://shop.dissenter.com/category/donations' className={[_s.default, _s.backgroundPanel, _s.noUnderline, _s.circle, _s.overflowHidden, _s.height22PX, _s.cursorPointer].join(' ')}>
|
||||
<div className={[_s.default, _s.backgroundColorBrandDark, _s.circle, _s.height22PX].join(' ')} style={style} />
|
||||
<div className={[_s.default, _s.positionAbsolute, _s.width100PC, _s.height22PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
|
||||
<Text size='small' weight='bold' color='white'>
|
||||
{title}
|
||||
</Text>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export default class ScrollableList extends PureComponent {
|
|||
isLoading: PropTypes.bool,
|
||||
showLoading: PropTypes.bool,
|
||||
hasMore: PropTypes.bool,
|
||||
emptyMessage: PropTypes.node,
|
||||
emptyMessage: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
onScrollToTop: PropTypes.func,
|
||||
onScroll: PropTypes.func,
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import Overlay from 'react-overlays/lib/Overlay';
|
|||
import Icon from '../icon';
|
||||
import SearchPopout from '../search_popout';
|
||||
|
||||
const cx = classNames.bind(_s)
|
||||
|
||||
export default class Search extends PureComponent {
|
||||
|
||||
static contextTypes = {
|
||||
|
|
@ -10,17 +12,17 @@ export default class Search extends PureComponent {
|
|||
};
|
||||
|
||||
static propTypes = {
|
||||
value: PropTypes.string.isRequired,
|
||||
// value: PropTypes.string.isRequired,
|
||||
submitted: PropTypes.bool,
|
||||
onShow: PropTypes.func.isRequired,
|
||||
// onShow: PropTypes.func.isRequired,
|
||||
openInRoute: PropTypes.bool,
|
||||
placeholder: PropTypes.string.isRequired,
|
||||
// placeholder: PropTypes.string.isRequired,
|
||||
searchTitle: PropTypes.string,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
onKeyUp: PropTypes.func.isRequired,
|
||||
// onChange: PropTypes.func.isRequired,
|
||||
// onKeyUp: PropTypes.func.isRequired,
|
||||
handleSubmit: PropTypes.func,
|
||||
withOverlay: PropTypes.bool,
|
||||
handleClear: PropTypes.func.isRequired,
|
||||
// handleClear: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
state = {
|
||||
|
|
@ -42,8 +44,6 @@ export default class Search extends PureComponent {
|
|||
|
||||
const hasValue = value ? value.length > 0 || submitted : 0;
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
|
||||
const btnClasses = cx({
|
||||
default: 1,
|
||||
cursorPointer: 1,
|
||||
|
|
@ -56,11 +56,11 @@ export default class Search extends PureComponent {
|
|||
})
|
||||
|
||||
return (
|
||||
<div className={[styles.default, styles.justifyContentCenter, styles.height53PX].join(' ')}>
|
||||
<div className={[styles.default, styles.backgroundWhite, styles.border1PX, styles.borderColorSubtle, styles.flexRow, styles.circle, styles.alignItemsCenter].join(' ')}>
|
||||
<Icon id='search' width='16px' height='16px' className={[styles.default, styles.marginLeft15PX, styles.marginRight10PX].join(' ')} />
|
||||
<div className={[_s.default, _s.justifyContentCenter, _s.height53PX].join(' ')}>
|
||||
<div className={[_s.default, _s.backgroundWhite, _s.border1PX, _s.bordercolorSecondary, _s.flexRow, _s.circle, _s.alignItemsCenter].join(' ')}>
|
||||
<Icon id='search' width='16px' height='16px' className={[_s.default, _s.marginLeft15PX, _s.marginRight10PX].join(' ')} />
|
||||
<input
|
||||
className={[styles.default, styles.text, styles.outlineFocusBrand, styles.lineHeight125, styles.displayBlock, styles.paddingVertical10PX, styles.paddingHorizontal10PX, styles.backgroundTransparent, styles.fontSize15PX, styles.flexGrow1].join(' ')}
|
||||
className={[_s.default, _s.text, _s.outlineFocusBrand, _s.lineHeight125, _s.displayBlock, _s.paddingVertical10PX, _s.paddingHorizontal10PX, _s.backgroundTransparent, _s.fontSize15PX, _s.flexGrow1].join(' ')}
|
||||
type='text'
|
||||
placeholder='Search on Gab...'
|
||||
value={value}
|
||||
|
|
@ -70,7 +70,7 @@ export default class Search extends PureComponent {
|
|||
onBlur={this.handleBlur}
|
||||
/>
|
||||
<div role='button' tabIndex='0' className={btnClasses} onClick={handleClear}>
|
||||
<Icon id='close' width='10px' height='10px' className={styles.fillColorWhite} aria-label={placeholder} />
|
||||
<Icon id='close' width='10px' height='10px' className={_s.fillColorWhite} aria-label={placeholder} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,225 @@
|
|||
import { NavLink } from 'react-router-dom'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { injectIntl, defineMessages } from 'react-intl'
|
||||
import Button from './button'
|
||||
import { closeSidebar } from '../actions/sidebar'
|
||||
import { me } from '../initial_state'
|
||||
import { makeGetAccount } from '../selectors'
|
||||
import GabLogo from './assets/gab_logo'
|
||||
import SidebarSectionTitle from './sidebar_section_title'
|
||||
import SidebarSectionItem from './sidebar_section_item'
|
||||
|
||||
const messages = defineMessages({
|
||||
followers: { id: 'account.followers', defaultMessage: 'Followers' },
|
||||
follows: { id: 'account.follows', defaultMessage: 'Follows' },
|
||||
profile: { id: 'account.profile', defaultMessage: 'Profile' },
|
||||
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
|
||||
follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
|
||||
blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
|
||||
domain_blocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Hidden domains' },
|
||||
mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
|
||||
filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
|
||||
logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
|
||||
lists: { id: 'column.lists', defaultMessage: 'Lists', },
|
||||
apps: { id: 'tabs_bar.apps', defaultMessage: 'Apps' },
|
||||
more: { id: 'sidebar.more', defaultMessage: 'More' },
|
||||
pro: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
|
||||
trends: { id: 'promo.trends', defaultMessage: 'Trends' },
|
||||
search: { id: 'tabs_bar.search', defaultMessage: 'Search' },
|
||||
shop: { id: 'tabs_bar.shop', defaultMessage: 'Store - Buy Merch' },
|
||||
donate: { id: 'tabs_bar.donate', defaultMessage: 'Make a Donation' },
|
||||
})
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const getAccount = makeGetAccount()
|
||||
|
||||
return {
|
||||
account: getAccount(state, me),
|
||||
sidebarOpen: state.get('sidebar').sidebarOpen,
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
onClose() {
|
||||
dispatch(closeSidebar())
|
||||
},
|
||||
})
|
||||
|
||||
export default @connect(mapStateToProps, mapDispatchToProps)
|
||||
@injectIntl
|
||||
class Sidebar extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
account: ImmutablePropTypes.map,
|
||||
sidebarOpen: PropTypes.bool,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
state = {
|
||||
moreOpen: false,
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
if (!me) return
|
||||
|
||||
if (this.props.sidebarOpen) {
|
||||
document.body.classList.add('with-modals--active')
|
||||
} else {
|
||||
document.body.classList.remove('with-modals--active')
|
||||
}
|
||||
}
|
||||
|
||||
toggleMore = () => {
|
||||
this.setState({
|
||||
moreOpen: !this.state.moreOpen
|
||||
})
|
||||
}
|
||||
|
||||
handleSidebarClose = () => {
|
||||
this.props.onClose()
|
||||
this.setState({
|
||||
moreOpen: false,
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const { sidebarOpen, intl, account } = this.props
|
||||
const { moreOpen } = this.state
|
||||
|
||||
if (!me || !account) return null
|
||||
|
||||
const acct = account.get('acct')
|
||||
const isPro = account.get('is_pro')
|
||||
|
||||
const moreIcon = moreOpen ? 'minus' : 'plus'
|
||||
const moreContainerStyle = { display: moreOpen ? 'block' : 'none' }
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
title: 'Home',
|
||||
icon: 'home',
|
||||
to: '/',
|
||||
count: 124,
|
||||
},
|
||||
{
|
||||
title: 'Notifications',
|
||||
icon: 'notifications',
|
||||
to: '/notifications',
|
||||
count: 40,
|
||||
},
|
||||
{
|
||||
title: 'Groups',
|
||||
icon: 'group',
|
||||
to: '/groups',
|
||||
},
|
||||
{
|
||||
title: 'Lists',
|
||||
icon: 'list',
|
||||
to: '/lists',
|
||||
},
|
||||
{
|
||||
title: 'Chat',
|
||||
icon: 'chat',
|
||||
to: '/',
|
||||
},
|
||||
{
|
||||
title: 'More',
|
||||
icon: 'more',
|
||||
to: '/',
|
||||
},
|
||||
]
|
||||
|
||||
const shortcutItems = [
|
||||
{
|
||||
title: 'Meme Group',
|
||||
icon: 'group',
|
||||
to: '/',
|
||||
count: 0,
|
||||
},
|
||||
{
|
||||
title: '@andrew',
|
||||
image: 'http://localhost:3000/system/accounts/avatars/000/000/001/original/260e8c96c97834da.jpeg?1562898139',
|
||||
to: '/',
|
||||
count: 3,
|
||||
},
|
||||
]
|
||||
|
||||
const exploreItems = [
|
||||
{
|
||||
title: 'Apps',
|
||||
icon: 'apps',
|
||||
to: '/',
|
||||
},
|
||||
{
|
||||
title: 'Shop',
|
||||
icon: 'shop',
|
||||
to: '/',
|
||||
},
|
||||
{
|
||||
title: 'Trends',
|
||||
icon: 'trends',
|
||||
to: '/',
|
||||
},
|
||||
{
|
||||
title: 'Dissenter',
|
||||
icon: 'dissenter',
|
||||
to: '/',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<header role='banner' className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
|
||||
<div className={[_s.default, _s.width240PX].join(' ')}>
|
||||
<div className={[_s.default, _s.positionFixed, _s.top0, _s.height100PC].join(' ')}>
|
||||
<div className={[_s.default, _s.height100PC, _s.width240PX, _s.paddingRight15PX, _s.marginVertical10PX].join(' ')}>
|
||||
|
||||
<h1 className={[_s.default].join(' ')}>
|
||||
<NavLink to='/' aria-label='Gab' className={[_s.default, _s.noSelect, _s.noUnderline, _s.height50PX, _s.justifyContentCenter, _s.cursorPointer, _s.paddingHorizontal10PX].join(' ')}>
|
||||
<GabLogo />
|
||||
</NavLink>
|
||||
</h1>
|
||||
|
||||
<SidebarSectionItem
|
||||
image='http://localhost:3000/system/accounts/avatars/000/000/001/original/260e8c96c97834da.jpeg?1562898139'
|
||||
title='@admin'
|
||||
to='/profile'
|
||||
/>
|
||||
|
||||
<nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.marginBottom15PX].join(' ')}>
|
||||
<SidebarSectionTitle>Menu</SidebarSectionTitle>
|
||||
{
|
||||
menuItems.map((menuItem, i) => (
|
||||
<SidebarSectionItem {...menuItem} key={`sidebar-item-menu-${i}`} />
|
||||
))
|
||||
}
|
||||
<SidebarSectionTitle>Shortcuts</SidebarSectionTitle>
|
||||
{
|
||||
shortcutItems.map((shortcutItem, i) => (
|
||||
<SidebarSectionItem {...shortcutItem} key={`sidebar-item-shortcut-${i}`} />
|
||||
))
|
||||
}
|
||||
<SidebarSectionTitle>Explore</SidebarSectionTitle>
|
||||
{
|
||||
exploreItems.map((exploreItem, i) => (
|
||||
<SidebarSectionItem {...exploreItem} key={`sidebar-item-explore-${i}`} />
|
||||
))
|
||||
}
|
||||
</nav>
|
||||
|
||||
<Button
|
||||
block
|
||||
className={[_s.paddingVertical15PX, _s.fontSize15PX, _s.fontWeightBold].join(' ')}
|
||||
>
|
||||
Gab
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -47,9 +47,11 @@ const mapDispatchToProps = (dispatch) => ({
|
|||
},
|
||||
})
|
||||
|
||||
const cx = classNames.bind(_s)
|
||||
|
||||
export default @connect(mapStateToProps, mapDispatchToProps)
|
||||
@injectIntl
|
||||
class Header extends ImmutablePureComponent {
|
||||
class Sidebar extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
|
|
@ -175,12 +177,10 @@ class Header extends ImmutablePureComponent {
|
|||
},
|
||||
]
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
|
||||
const titleClasses = cx({
|
||||
default: 1,
|
||||
text: 1,
|
||||
colorSubtle: 1,
|
||||
colorSecondary: 1,
|
||||
displayBlock: 1,
|
||||
fontSize13PX: 1,
|
||||
paddingVertical5PX: 1,
|
||||
|
|
@ -190,19 +190,19 @@ class Header extends ImmutablePureComponent {
|
|||
})
|
||||
|
||||
return (
|
||||
<header role='banner' className={[styles.default, styles.flexGrow1, styles.z3, styles.alignItemsEnd].join(' ')}>
|
||||
<div className={[styles.default, styles.width250PX].join(' ')}>
|
||||
<div className={[styles.default, styles.positionFixed, styles.top0, styles.height100PC].join(' ')}>
|
||||
<div className={[styles.default, styles.height100PC, styles.width250PX, styles.paddingHorizontal15PX, styles.marginVertical10PX].join(' ')}>
|
||||
<h1 className={[styles.default].join(' ')}>
|
||||
<NavLink to='/' aria-label='Gab' className={[styles.default, styles.noSelect, styles.noUnderline, styles.height50PX, styles.justifyContentCenter, styles.cursorPointer, styles.paddingHorizontal10PX].join(' ')}>
|
||||
<header role='banner' className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
|
||||
<div className={[_s.default, _s.width240PX].join(' ')}>
|
||||
<div className={[_s.default, _s.positionFixed, _s.top0, _s.height100PC].join(' ')}>
|
||||
<div className={[_s.default, _s.height100PC, _s.width240PX, _s.paddingRight15PX, _s.marginVertical10PX].join(' ')}>
|
||||
<h1 className={[_s.default].join(' ')}>
|
||||
<NavLink to='/' aria-label='Gab' className={[_s.default, _s.noSelect, _s.noUnderline, _s.height50PX, _s.justifyContentCenter, _s.cursorPointer, _s.paddingHorizontal10PX].join(' ')}>
|
||||
<GabLogo />
|
||||
</NavLink>
|
||||
</h1>
|
||||
<div>
|
||||
<HeaderMenuItem me image='http://localhost:3000/system/accounts/avatars/000/000/001/original/260e8c96c97834da.jpeg?1562898139' title='@admin' to='/profile' />
|
||||
</div>
|
||||
<nav aria-label='Primary' role='navigation' className={[styles.default, styles.width100PC, styles.marginBottom15PX].join(' ')}>
|
||||
<nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.marginBottom15PX].join(' ')}>
|
||||
<span className={titleClasses}>Menu</span>
|
||||
{
|
||||
menuItems.map((menuItem, i) => (
|
||||
|
|
@ -222,7 +222,7 @@ class Header extends ImmutablePureComponent {
|
|||
))
|
||||
}
|
||||
</nav>
|
||||
<Button block className={[styles.paddingVertical15PX, styles.fontSize15PX, styles.fontWeightBold].join(' ')}>
|
||||
<Button block className={[_s.paddingVertical15PX, _s.fontSize15PX, _s.fontWeightBold].join(' ')}>
|
||||
Gab
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -241,7 +241,7 @@ class HeaderMenuItem extends PureComponent {
|
|||
icon: PropTypes.string,
|
||||
image: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
me: PropTypes.boolean,
|
||||
me: PropTypes.bool,
|
||||
count: PropTypes.number,
|
||||
}
|
||||
|
||||
|
|
@ -261,8 +261,6 @@ class HeaderMenuItem extends PureComponent {
|
|||
const { to, active, icon, image, title, me, count } = this.props
|
||||
const { hovering } = this.state
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
|
||||
const iconSize = '16px'
|
||||
const shouldShowActive = hovering || active
|
||||
const isNotifications = to === '/notifications'
|
||||
|
|
@ -277,7 +275,7 @@ class HeaderMenuItem extends PureComponent {
|
|||
alignItemsCenter: 1,
|
||||
radiusSmall: 1,
|
||||
// border1PX: shouldShowActive,
|
||||
// borderColorSubtle: shouldShowActive,
|
||||
// bordercolorSecondary: shouldShowActive,
|
||||
backgroundSubtle2: shouldShowActive,
|
||||
})
|
||||
|
||||
|
|
@ -287,13 +285,13 @@ class HeaderMenuItem extends PureComponent {
|
|||
fontSize15PX: 1,
|
||||
text: 1,
|
||||
textOverflowEllipsis: 1,
|
||||
colorBlack: shouldShowActive || me,
|
||||
colorSubtle: !hovering && !active && !me,
|
||||
colorPrimary: shouldShowActive || me,
|
||||
colorSecondary: !hovering && !active && !me,
|
||||
})
|
||||
|
||||
const iconClasses = cx({
|
||||
fillColorBlack: shouldShowActive,
|
||||
fillColorSubtle: !hovering && !active,
|
||||
fillcolorSecondary: !hovering && !active,
|
||||
})
|
||||
|
||||
const countClasses = cx({
|
||||
|
|
@ -305,7 +303,7 @@ class HeaderMenuItem extends PureComponent {
|
|||
marginRight2PX: 1,
|
||||
lineHeight15: 1,
|
||||
marginLeft5PX: 1,
|
||||
colorSubtle: !isNotifications,
|
||||
colorSecondary: !isNotifications,
|
||||
colorWhite: isNotifications,
|
||||
backgroundColorBrand: isNotifications,
|
||||
radiusSmall: isNotifications,
|
||||
|
|
@ -316,21 +314,21 @@ class HeaderMenuItem extends PureComponent {
|
|||
to={to}
|
||||
onMouseEnter={() => this.handleOnMouseEnter()}
|
||||
onMouseLeave={() => this.handleOnMouseLeave()}
|
||||
className={[styles.default, styles.noUnderline, styles.cursorPointer, styles.width100PC, styles.alignItemsStart, styles.flexGrow1].join(' ')}
|
||||
className={[_s.default, _s.noUnderline, _s.cursorPointer, _s.width100PC, _s.alignItemsStart, _s.flexGrow1].join(' ')}
|
||||
>
|
||||
<div className={containerClasses}>
|
||||
<div className={[styles.default]}>
|
||||
<div className={[_s.default]}>
|
||||
{ icon && <Icon id={icon} className={iconClasses} width={iconSize} height={iconSize} /> }
|
||||
{ image &&
|
||||
<img
|
||||
className={[styles.default, styles.circle].join(' ')}
|
||||
className={[_s.default, _s.circle].join(' ')}
|
||||
width={iconSize}
|
||||
height={iconSize}
|
||||
src={image}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
<div className={[styles.default, styles.flexNormal, styles.paddingHorizontal10PX, styles.textOverflowEllipsis, styles.overflowWrapBreakWord, styles.flexRow, styles.width100PC].join(' ')}>
|
||||
<div className={[_s.default, _s.flexNormal, _s.paddingHorizontal10PX, _s.textOverflowEllipsis, _s.overflowWrapBreakWord, _s.flexRow, _s.width100PC].join(' ')}>
|
||||
<span className={textClasses}>{title}</span>
|
||||
</div>
|
||||
{ count > 0 &&
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
import { NavLink } from 'react-router-dom'
|
||||
import classNames from 'classnames/bind'
|
||||
import Button from './button'
|
||||
import Icon from './icon'
|
||||
import Text from './text'
|
||||
|
||||
const cx = classNames.bind(_s)
|
||||
|
||||
export default class SidebarSectionItem extends PureComponent {
|
||||
static propTypes = {
|
||||
to: PropTypes.string,
|
||||
active: PropTypes.bool,
|
||||
icon: PropTypes.string,
|
||||
image: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
me: PropTypes.bool,
|
||||
suffix: PropTypes.node,
|
||||
}
|
||||
|
||||
state = {
|
||||
hovering: false,
|
||||
}
|
||||
|
||||
handleOnMouseEnter = () => {
|
||||
this.setState({ hovering: true })
|
||||
}
|
||||
|
||||
handleOnMouseLeave = () => {
|
||||
this.setState({ hovering: false })
|
||||
}
|
||||
|
||||
render() {
|
||||
const { to, active, icon, image, title, me, count } = this.props
|
||||
const { hovering } = this.state
|
||||
|
||||
const iconSize = '16px'
|
||||
const shouldShowActive = hovering || active
|
||||
const isNotifications = to === '/notifications'
|
||||
|
||||
const containerClasses = cx({
|
||||
default: 1,
|
||||
maxWidth100PC: 1,
|
||||
width100PC: 1,
|
||||
flexRow: 1,
|
||||
paddingVertical5PX: 1,
|
||||
paddingHorizontal10PX: 1,
|
||||
alignItemsCenter: 1,
|
||||
radiusSmall: 1,
|
||||
// border1PX: shouldShowActive,
|
||||
// bordercolorSecondary: shouldShowActive,
|
||||
backgroundSubtle2: shouldShowActive,
|
||||
})
|
||||
|
||||
const textClasses = cx({
|
||||
default: 1,
|
||||
fontWeightNormal: 1,
|
||||
fontSize15PX: 1,
|
||||
text: 1,
|
||||
textOverflowEllipsis: 1,
|
||||
colorPrimary: shouldShowActive || me,
|
||||
colorSecondary: !hovering && !active && !me,
|
||||
})
|
||||
|
||||
const iconClasses = cx({
|
||||
fillColorBlack: shouldShowActive,
|
||||
fillcolorSecondary: !hovering && !active,
|
||||
})
|
||||
|
||||
const countClasses = cx({
|
||||
default: 1,
|
||||
text: 1,
|
||||
marginLeftAuto: 1,
|
||||
fontSize12PX: 1,
|
||||
paddingHorizontal5PX: 1,
|
||||
marginRight2PX: 1,
|
||||
lineHeight15: 1,
|
||||
marginLeft5PX: 1,
|
||||
colorSecondary: !isNotifications,
|
||||
colorWhite: isNotifications,
|
||||
backgroundColorBrand: isNotifications,
|
||||
radiusSmall: isNotifications,
|
||||
})
|
||||
|
||||
return (
|
||||
<NavLink
|
||||
to={to}
|
||||
onMouseEnter={() => this.handleOnMouseEnter()}
|
||||
onMouseLeave={() => this.handleOnMouseLeave()}
|
||||
className={[_s.default, _s.noUnderline, _s.cursorPointer, _s.width100PC, _s.alignItemsStart, _s.flexGrow1].join(' ')}
|
||||
>
|
||||
<div className={containerClasses}>
|
||||
<div className={[_s.default]}>
|
||||
{ icon && <Icon id={icon} className={iconClasses} width={iconSize} height={iconSize} /> }
|
||||
{ image &&
|
||||
<img
|
||||
className={[_s.default, _s.circle].join(' ')}
|
||||
width={iconSize}
|
||||
height={iconSize}
|
||||
src={image}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
<div className={[_s.default, _s.flexNormal, _s.paddingHorizontal10PX, _s.textOverflowEllipsis, _s.overflowWrapBreakWord, _s.flexRow, _s.width100PC].join(' ')}>
|
||||
<span className={textClasses}>{title}</span>
|
||||
</div>
|
||||
{ count > 0 &&
|
||||
<span className={countClasses}>
|
||||
{count}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
</NavLink>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import Text from './text'
|
||||
|
||||
export default class SidebarSectionTitle extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
children: PropTypes.string.isRequired,
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children } = this.props
|
||||
|
||||
return (
|
||||
<div className={[_s.default, _s.paddingVertical5PX, _s.paddingHorizontal10PX, _s.marginTop10PX].join(' ')}>
|
||||
<Text size='small' weight='bold' color='secondary'>
|
||||
{children}
|
||||
</Text>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -10,7 +10,6 @@ import Card from '../../features/status/components/card';
|
|||
import { MediaGallery, Video } from '../../features/ui/util/async-components';
|
||||
import Avatar from '../avatar';
|
||||
import StatusQuote from '../status_quote';
|
||||
import AvatarOverlay from '../avatar_overlay';
|
||||
import RelativeTimestamp from '../relative_timestamp';
|
||||
import DisplayName from '../display_name';
|
||||
import StatusContent from '../status_content';
|
||||
|
|
@ -406,8 +405,6 @@ class Status extends ImmutablePureComponent {
|
|||
|
||||
if (account === undefined || account === null) {
|
||||
statusAvatar = <Avatar account={status.get('account')} size={50} />;
|
||||
} else {
|
||||
statusAvatar = <AvatarOverlay account={status.get('account')} friend={account} />;
|
||||
}
|
||||
|
||||
const handlers = this.props.muted
|
||||
|
|
@ -430,7 +427,7 @@ class Status extends ImmutablePureComponent {
|
|||
return (
|
||||
<HotKeys handlers={handlers}>
|
||||
<div
|
||||
className={[styles.default, styles.backgroundWhite, styles.radiusSmall, styles.marginBottom15PX, styles.border1PX, styles.borderColorSubtle].join(' ')}
|
||||
className={[_s.default, _s.backgroundWhite, _s.radiusSmall, _s.marginBottom15PX, _s.border1PX, _s.bordercolorSecondary].join(' ')}
|
||||
tabIndex={this.props.muted ? null : 0}
|
||||
data-featured={featured ? 'true' : null}
|
||||
aria-label={textForScreenReader(intl, status, rebloggedByText)}
|
||||
|
|
@ -448,37 +445,37 @@ class Status extends ImmutablePureComponent {
|
|||
data-id={status.get('id')}
|
||||
>
|
||||
|
||||
<div className={[styles.default, styles.paddingHorizontal15PX, styles.paddingVertical10PX].join(' ')}>
|
||||
<div className={[styles.default, styles.flexRow, styles.marginTop5PX].join(' ')}>
|
||||
<div className={[styles.default, styles.marginRight10PX].join(' ')}>{statusAvatar}</div>
|
||||
<div className={[styles.default, styles.alignItemsStart, styles.flexGrow1, styles.marginTop5PX].join(' ')}>
|
||||
<div className={[styles.default, styles.flexRow, styles.width100PC, styles.alignItemsStart].join(' ')}>
|
||||
<div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.marginTop5PX].join(' ')}>
|
||||
<div className={[_s.default, _s.marginRight10PX].join(' ')}>{statusAvatar}</div>
|
||||
<div className={[_s.default, _s.alignItemsStart, _s.flexGrow1, _s.marginTop5PX].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.width100PC, _s.alignItemsStart].join(' ')}>
|
||||
<NavLink
|
||||
className={[styles.default, styles.flexRow, styles.alignItemsStart, styles.noUnderline].join(' ')}
|
||||
className={[_s.default, _s.flexRow, _s.alignItemsStart, _s.noUnderline].join(' ')}
|
||||
to={`/${status.getIn(['account', 'acct'])}`}
|
||||
title={status.getIn(['account', 'acct'])}
|
||||
>
|
||||
<DisplayName account={status.get('account')} />
|
||||
</NavLink>
|
||||
<Icon id='ellipsis' width='20px' height='20px' className={[styles.default, styles.fillColorSubtle, styles.marginLeftAuto].join(' ')} />
|
||||
<Icon id='ellipsis' width='20px' height='20px' className={[_s.default, _s.fillcolorSecondary, _s.marginLeftAuto].join(' ')} />
|
||||
</div>
|
||||
<div className={[styles.default, styles.flexRow, styles.alignItemsCenter, styles.lineHeight15].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.lineHeight15].join(' ')}>
|
||||
<NavLink
|
||||
to={statusUrl}
|
||||
className={[styles.default, styles.text, styles.fontSize13PX, styles.noUnderline, styles.colorSubtle].join(' ')}
|
||||
className={[_s.default, _s.text, _s.fontSize13PX, _s.noUnderline, _s.colorSecondary].join(' ')}
|
||||
>
|
||||
<RelativeTimestamp timestamp={status.get('created_at')} />
|
||||
</NavLink>
|
||||
<span className={[styles.default, styles.text, styles.fontSize12PX, styles.marginLeft5PX, styles.colorSubtle].join(' ')}>•</span>
|
||||
<Icon id='globe' width='12px' height='12px' className={[styles.default, styles.displayInline, styles.marginLeft5PX, styles.fillColorSubtle].join(' ')}/>
|
||||
<span className={[_s.default, _s.text, _s.fontSize12PX, _s.marginLeft5PX, _s.colorSecondary].join(' ')}>•</span>
|
||||
<Icon id='globe' width='12px' height='12px' className={[_s.default, _s.displayInline, _s.marginLeft5PX, _s.fillcolorSecondary].join(' ')}/>
|
||||
|
||||
{
|
||||
!!status.get('group') &&
|
||||
<Fragment>
|
||||
<span className={[styles.default, styles.text, styles.fontSize12PX, styles.marginLeft5PX, styles.colorSubtle].join(' ')}>•</span>
|
||||
<span className={[_s.default, _s.text, _s.fontSize12PX, _s.marginLeft5PX, _s.colorSecondary].join(' ')}>•</span>
|
||||
<NavLink
|
||||
to={`/groups/${status.getIn(['group', 'id'])}`}
|
||||
className={[styles.default, styles.text, styles.fontSize13PX, styles.marginLeft5PX, styles.colorBlack].join(' ')}
|
||||
className={[_s.default, _s.text, _s.fontSize13PX, _s.marginLeft5PX, _s.colorPrimary].join(' ')}
|
||||
>
|
||||
{status.getIn(['group', 'title'])}
|
||||
</NavLink>
|
||||
|
|
@ -488,10 +485,10 @@ class Status extends ImmutablePureComponent {
|
|||
{
|
||||
status.get('revised_at') !== null &&
|
||||
<Fragment>
|
||||
<span className={[styles.default, styles.text, styles.fontSize12PX, styles.marginLeft5PX, styles.colorSubtle].join(' ')}>•</span>
|
||||
<span className={[_s.default, _s.text, _s.fontSize12PX, _s.marginLeft5PX, _s.colorSecondary].join(' ')}>•</span>
|
||||
<button
|
||||
onClick={() => other.onShowRevisions(status)}
|
||||
className={[styles.default, styles.text, styles.fontSize13PX, styles.marginLeft5PX, styles.colorSubtle].join(' ')}
|
||||
className={[_s.default, _s.text, _s.fontSize13PX, _s.marginLeft5PX, _s.colorSecondary].join(' ')}
|
||||
>
|
||||
Edited
|
||||
</button>
|
||||
|
|
@ -503,7 +500,7 @@ class Status extends ImmutablePureComponent {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.default}>
|
||||
<div className={_s.default}>
|
||||
<StatusContent
|
||||
status={status}
|
||||
reblogContent={reblogContent}
|
||||
|
|
|
|||
|
|
@ -48,6 +48,8 @@ const mapDispatchToProps = (dispatch) => ({
|
|||
},
|
||||
});
|
||||
|
||||
const cx = classNames.bind(_s)
|
||||
|
||||
class StatusActionBarItem extends PureComponent {
|
||||
static propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
|
|
@ -60,13 +62,11 @@ class StatusActionBarItem extends PureComponent {
|
|||
render() {
|
||||
const { title, onClick, icon, active, disabled } = this.props
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
|
||||
const btnClasses = cx({
|
||||
default: 1,
|
||||
text: 1,
|
||||
fontSize13PX: 1,
|
||||
fontWeight500: 1,
|
||||
fontWeightMedium: 1,
|
||||
cursorPointer: 1,
|
||||
displayFlex: 1,
|
||||
justifyContentCenter: 1,
|
||||
|
|
@ -79,18 +79,18 @@ class StatusActionBarItem extends PureComponent {
|
|||
outlineFocusBrand: 1,
|
||||
backgroundTransparent: 1,
|
||||
backgroundSubtle_onHover: 1,
|
||||
colorSubtle: 1,
|
||||
colorSecondary: 1,
|
||||
})
|
||||
|
||||
return (
|
||||
<div className={[styles.default, styles.flexGrow1, styles.paddingHorizontal10PX].join(' ')}>
|
||||
<div className={[_s.default, _s.flexGrow1, _s.paddingHorizontal10PX].join(' ')}>
|
||||
<button
|
||||
className={btnClasses}
|
||||
onClick={onClick}
|
||||
active={active}
|
||||
disabled={disabled}
|
||||
>
|
||||
<Icon width='16px' height='16px' id={icon} className={[styles.default, styles.marginRight10PX, styles.fillColorSubtle].join(' ')} />
|
||||
<Icon width='16px' height='16px' id={icon} className={[_s.default, _s.marginRight10PX, _s.fillcolorSecondary].join(' ')} />
|
||||
{title}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -317,20 +317,20 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||
{
|
||||
title: formatMessage(messages.like),
|
||||
icon: 'like',
|
||||
active: status.get('favourited'),
|
||||
active: !!status.get('favourited'),
|
||||
onClick: this.handleFavouriteClick,
|
||||
},
|
||||
{
|
||||
title: formatMessage(messages.comment),
|
||||
icon: 'comment',
|
||||
active: 0,
|
||||
active: false,
|
||||
onClick: this.handleReplyClick,
|
||||
},
|
||||
{
|
||||
title: reblogTitle,
|
||||
icon: (status.get('visibility') === 'private') ? 'lock' : 'repost',
|
||||
disabled: !publicStatus,
|
||||
active: status.get('reblogged'),
|
||||
active: !!status.get('reblogged'),
|
||||
onClick: this.handleReblogClick,
|
||||
},
|
||||
{
|
||||
|
|
@ -344,8 +344,6 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||
const hasInteractions = favoriteCount > 0 || replyCount > 0 || reblogCount > 0
|
||||
const shouldCondense = (!!status.get('card') || status.get('media_attachments').size > 0) && !hasInteractions
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
|
||||
const containerClasses = cx({
|
||||
default: 1,
|
||||
paddingHorizontal10PX: 1,
|
||||
|
|
@ -359,14 +357,14 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||
flexRow: 1,
|
||||
width100PC: 1,
|
||||
borderTop1PX: !shouldCondense,
|
||||
borderColorSubtle: !shouldCondense,
|
||||
bordercolorSecondary: !shouldCondense,
|
||||
marginTop5PX: hasInteractions,
|
||||
})
|
||||
|
||||
const interactionBtnClasses = cx({
|
||||
default: 1,
|
||||
text: 1,
|
||||
colorSubtle: 1,
|
||||
colorSecondary: 1,
|
||||
cursorPointer: 1,
|
||||
fontSize15PX: 1,
|
||||
fontWeightNormal: 1,
|
||||
|
|
@ -378,7 +376,7 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||
<div className={containerClasses}>
|
||||
{
|
||||
hasInteractions &&
|
||||
<div className={[styles.default, styles.flexRow, styles.paddingHorizontal5PX].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.paddingHorizontal5PX].join(' ')}>
|
||||
{ favoriteCount > 0 &&
|
||||
<button className={interactionBtnClasses}>
|
||||
{favoriteCount}
|
||||
|
|
@ -400,7 +398,7 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||
</div>
|
||||
}
|
||||
<div className={innerContainerClasses}>
|
||||
<div className={[styles.default, styles.flexRow, styles.paddingVertical2PX, styles.width100PC].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.paddingVertical2PX, _s.width100PC].join(' ')}>
|
||||
{
|
||||
items.map((item, i) => (
|
||||
<StatusActionBarItem key={`status-action-bar-item-${i}`} {...item} />
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@ const messages = defineMessages({
|
|||
readMore: { id: 'status.read_more', defaultMessage: 'Read more' },
|
||||
})
|
||||
|
||||
const cx = classNames.bind(_s)
|
||||
|
||||
export default
|
||||
@injectIntl
|
||||
class StatusContent extends ImmutablePureComponent {
|
||||
|
|
@ -167,15 +169,13 @@ class StatusContent extends ImmutablePureComponent {
|
|||
// 'status__content--with-action': this.props.onClick && this.context.router,
|
||||
// 'status__content--with-spoiler': status.get('spoiler_text').length > 0,
|
||||
// 'status__content--collapsed': this.state.collapsed === true,
|
||||
// // styles.paddingHorizontal15PX, styles.marginBottom15PX
|
||||
// // _s.paddingHorizontal15PX, _s.marginBottom15PX
|
||||
// });
|
||||
|
||||
if (isRtl(status.get('search_index'))) {
|
||||
directionStyle.direction = 'rtl';
|
||||
}
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
|
||||
if (status.get('spoiler_text').length > 0) {
|
||||
let mentionsPlaceholder = '';
|
||||
|
||||
|
|
@ -217,7 +217,7 @@ class StatusContent extends ImmutablePureComponent {
|
|||
<div
|
||||
ref={this.setRef}
|
||||
tabIndex='0'
|
||||
className={[styles.statusContent].join(' ')}
|
||||
className={[_s.statusContent].join(' ')}
|
||||
style={directionStyle}
|
||||
dangerouslySetInnerHTML={content}
|
||||
lang={status.get('language')}
|
||||
|
|
@ -227,7 +227,7 @@ class StatusContent extends ImmutablePureComponent {
|
|||
{
|
||||
this.state.collapsed &&
|
||||
<button
|
||||
className={[styles.default, styles.displayFlex, styles.cursorPointer, styles.paddingVertical2PX, styles.text, styles.colorBlack, styles.fontWeightBold, styles.fontSize15PX].join(' ')}
|
||||
className={[_s.default, _s.displayFlex, _s.cursorPointer, _s.paddingVertical2PX, _s.text, _s.colorPrimary, _s.fontWeightBold, _s.fontSize15PX].join(' ')}
|
||||
onClick={this.props.onClick}
|
||||
>
|
||||
{intl.formatMessage(messages.readMore)}
|
||||
|
|
@ -241,7 +241,7 @@ class StatusContent extends ImmutablePureComponent {
|
|||
<div
|
||||
tabIndex='0'
|
||||
ref={this.setRef}
|
||||
className={[styles.paddingHorizontal15PX, styles.marginBottom15PX, styles.statusContent].join(' ')}
|
||||
className={[_s.paddingHorizontal15PX, _s.marginBottom15PX, _s.statusContent].join(' ')}
|
||||
style={directionStyle}
|
||||
dangerouslySetInnerHTML={content}
|
||||
lang={status.get('language')}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export default class StatusList extends ImmutablePureComponent {
|
|||
isLoading: PropTypes.bool,
|
||||
isPartial: PropTypes.bool,
|
||||
hasMore: PropTypes.bool,
|
||||
emptyMessage: PropTypes.node,
|
||||
emptyMessage: PropTypes.string,
|
||||
timelineId: PropTypes.string,
|
||||
queuedItemSize: PropTypes.number,
|
||||
onDequeueTimeline: PropTypes.func,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
import classNames from 'classnames/bind'
|
||||
|
||||
const cx = classNames.bind(_s)
|
||||
|
||||
const COLORS = {
|
||||
primary: 'primary',
|
||||
secondary: 'secondary',
|
||||
brand: 'brand',
|
||||
error: 'error',
|
||||
white: 'white',
|
||||
}
|
||||
|
||||
const SIZES = {
|
||||
extraSmall: 'extraSmall',
|
||||
small: 'small',
|
||||
normal: 'normal',
|
||||
medium: 'medium',
|
||||
large: 'large',
|
||||
extraLarge: 'extraLarge',
|
||||
}
|
||||
|
||||
const WEIGHTS = {
|
||||
normal: 'normal',
|
||||
medium: 'medium',
|
||||
bold: 'bold',
|
||||
extraBold: 'extraBold',
|
||||
}
|
||||
|
||||
export default class Text extends PureComponent {
|
||||
static propTypes = {
|
||||
tagName: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
children: PropTypes.any,
|
||||
color: PropTypes.oneOf(Object.keys(COLORS)),
|
||||
size: PropTypes.oneOf(Object.keys(SIZES)),
|
||||
weight: PropTypes.oneOf(Object.keys(WEIGHTS)),
|
||||
underline: PropTypes.bool,
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
tagName: 'span',
|
||||
color: COLORS.primary,
|
||||
size: SIZES.normal,
|
||||
weight: WEIGHTS.normal,
|
||||
}
|
||||
|
||||
render() {
|
||||
const { tagName, className, children, color, size, weight, underline } = this.props
|
||||
|
||||
const classes = cx(className, {
|
||||
default: 1,
|
||||
text: 1,
|
||||
|
||||
colorPrimary: color === COLORS.primary,
|
||||
colorSecondary: color === COLORS.secondary,
|
||||
colorBrand: color === COLORS.brand,
|
||||
colorWhite: color === COLORS.white,
|
||||
|
||||
fontSize19PX: size === SIZES.large,
|
||||
fontSize15PX: size === SIZES.medium,
|
||||
fontSize14PX: size === SIZES.normal,
|
||||
fontSize13PX: size === SIZES.small,
|
||||
|
||||
fontWeightNormal: weight === WEIGHTS.normal,
|
||||
fontWeightMedium: weight === WEIGHTS.medium,
|
||||
fontWeightBold: weight === WEIGHTS.bold,
|
||||
|
||||
underline: underline,
|
||||
})
|
||||
|
||||
return React.createElement(
|
||||
tagName,
|
||||
{
|
||||
className: classes,
|
||||
},
|
||||
children,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -26,14 +26,14 @@ class TimelineComposeBlock extends ImmutablePureComponent {
|
|||
const { account, size, ...rest } = this.props;
|
||||
|
||||
return (
|
||||
<section className={[styles.default, styles.overflowHidden, styles.radiusSmall, styles.border1PX, styles.borderColorSubtle, styles.backgroundWhite, styles.marginBottom15PX].join(' ')}>
|
||||
<div className={[styles.default, styles.backgroundSubtle, styles.borderBottom1PX, styles.borderColorSubtle, styles.paddingHorizontal15PX, styles.paddingVertical2PX].join(' ')}>
|
||||
<h1 className={[styles.default, styles.text, styles.colorSubtle, styles.fontSize12PX, styles.fontWeight500, styles.lineHeight2, styles.paddingVertical2PX].join(' ')}>
|
||||
<section className={[_s.default, _s.overflowHidden, _s.radiusSmall, _s.border1PX, _s.bordercolorSecondary, _s.backgroundWhite, _s.marginBottom15PX].join(' ')}>
|
||||
<div className={[_s.default, _s.backgroundSubtle, _s.borderBottom1PX, _s.bordercolorSecondary, _s.paddingHorizontal15PX, _s.paddingVertical2PX].join(' ')}>
|
||||
<h1 className={[_s.default, _s.text, _s.colorSecondary, _s.fontSize12PX, _s.fontWeightMedium, _s.lineHeight2, _s.paddingVertical2PX].join(' ')}>
|
||||
Create Post
|
||||
</h1>
|
||||
</div>
|
||||
<div className={[styles.default, styles.flexRow, styles.paddingVertical15PX, styles.paddingHorizontal15PX].join(' ')}>
|
||||
<div className={[styles.default, styles.marginRight10PX].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.paddingVertical15PX, _s.paddingHorizontal15PX].join(' ')}>
|
||||
<div className={[_s.default, _s.marginRight10PX].join(' ')}>
|
||||
<Avatar account={account} size={46} />
|
||||
</div>
|
||||
<ComposeFormContainer {...rest} />
|
||||
|
|
|
|||
|
|
@ -5,10 +5,12 @@ import { NavLink } from 'react-router-dom'
|
|||
import classNames from 'classnames/bind'
|
||||
import { shortNumberFormat } from '../utils/numbers'
|
||||
|
||||
const cx = classNames.bind(_s)
|
||||
|
||||
export default class TrendingItem extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
hashtag: ImmutablePropTypes.map.isRequired,
|
||||
trend: ImmutablePropTypes.map.isRequired,
|
||||
};
|
||||
|
||||
state = {
|
||||
|
|
@ -24,28 +26,27 @@ export default class TrendingItem extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { hashtag } = this.props
|
||||
const { trend } = this.props
|
||||
const { hovering } = this.state
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
const subtitleClasses = cx({
|
||||
default: 1,
|
||||
text: 1,
|
||||
displayFlex: 1,
|
||||
fontSize13PX: 1,
|
||||
fontWeightNormal: 1,
|
||||
colorSubtle: 1,
|
||||
colorSecondary: 1,
|
||||
underline: hovering,
|
||||
})
|
||||
|
||||
return (
|
||||
<NavLink
|
||||
to='/test'
|
||||
className={[styles.default, styles.noUnderline, styles.marginBottom10PX].join(' ')}
|
||||
className={[_s.default, _s.noUnderline, _s.marginBottom10PX].join(' ')}
|
||||
onMouseEnter={() => this.handleOnMouseEnter()}
|
||||
onMouseLeave={() => this.handleOnMouseLeave()}
|
||||
>
|
||||
<span className={[styles.default, styles.text, styles.displayFlex, styles.colorBrand, styles.fontSize15PX, styles.fontWeightBold, styles.lineHeight15].join(' ')}>#randomhashtag</span>
|
||||
<span className={[_s.default, _s.text, _s.displayFlex, _s.colorBrand, _s.fontSize15PX, _s.fontWeightBold, _s.lineHeight15].join(' ')}>#randomhashtag</span>
|
||||
<span className={subtitleClasses}>10,240 Gabs</span>
|
||||
</NavLink>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,154 +0,0 @@
|
|||
import { NavLink } from 'react-router-dom'
|
||||
import { injectIntl, defineMessages } from 'react-intl'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import classNames from 'classnames/bind'
|
||||
import { autoPlayGif, me } from '../initial_state'
|
||||
import { makeGetAccount } from '../selectors'
|
||||
import { shortNumberFormat } from '../utils/numbers'
|
||||
import Avatar from './avatar'
|
||||
|
||||
const messages = defineMessages({
|
||||
gabs: { id: 'account.posts', defaultMessage: 'Gabs' },
|
||||
followers: { id: 'account.followers', defaultMessage: 'Followers' },
|
||||
follows: { id: 'account.follows', defaultMessage: 'Follows' }
|
||||
})
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const getAccount = makeGetAccount()
|
||||
|
||||
return {
|
||||
account: getAccount(state, me),
|
||||
}
|
||||
}
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
@injectIntl
|
||||
class UserPanel extends ImmutablePureComponent {
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.map,
|
||||
intl: PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
render() {
|
||||
const { account, intl } = this.props
|
||||
const displayNameHtml = { __html: account.get('display_name_html') }
|
||||
|
||||
const statItems = [
|
||||
{
|
||||
to: `/${account.get('acct')}`,
|
||||
title: intl.formatMessage(messages.gabs),
|
||||
value: shortNumberFormat(account.get('statuses_count')),
|
||||
},
|
||||
{
|
||||
to: `/${account.get('acct')}/followers`,
|
||||
title: intl.formatMessage(messages.followers),
|
||||
value: shortNumberFormat(account.get('followers_count')),
|
||||
},
|
||||
{
|
||||
to: `/${account.get('acct')}/following`,
|
||||
title: intl.formatMessage(messages.follows),
|
||||
value: shortNumberFormat(account.get('following_count')),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<aside className={[styles.default, styles.backgroundWhite, styles.overflowHidden, styles.radiusSmall, styles.marginBottom15PX, styles.borderColorSubtle, styles.border1PX].join(' ')}>
|
||||
<div className={[styles.default].join(' ')}>
|
||||
|
||||
<div className={[styles.default, styles.height122PX].join(' ')}>
|
||||
<img
|
||||
className={[styles.default, styles.image, styles.height122PX, styles.width100PC, styles.objectFitCover].join(' ')}
|
||||
src={autoPlayGif ? account.get('header') : account.get('header_static')}
|
||||
alt=''
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={[styles.default, styles.positionRelative].join(' ')}>
|
||||
<NavLink
|
||||
className={[styles.default, styles.flexRow, styles.paddingVertical10PX, styles.paddingHorizontal15PX, styles.noUnderline].join(' ')}
|
||||
to={`/${account.get('acct')}`}
|
||||
>
|
||||
<div className={[styles.default, styles.marginTopNeg30PX, styles.circle, styles.borderColorWhite, styles.border2PX].join(' ')}>
|
||||
<Avatar account={account} size={62} />
|
||||
</div>
|
||||
<h1 className={[styles.default, styles.marginLeft15PX].join(' ')}>
|
||||
<span
|
||||
className={[styles.default, styles.text, styles.displayBlock, styles.textOverflowEllipsis, styles.fontSize14PX, styles.colorBlack, styles.fontWeightBold].join(' ')}
|
||||
dangerouslySetInnerHTML={displayNameHtml}
|
||||
/>
|
||||
<small className={[styles.default, styles.text, styles.displayBlock, styles.textOverflowEllipsis, styles.fontWeightNormal, styles.fontSize14PX, styles.colorSubtle].join(' ')}>@{account.get('acct')}</small>
|
||||
</h1>
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div className={[styles.default, styles.marginBottom15PX, styles.marginTop5PX, styles.flexRow, styles.paddingHorizontal15PX].join(' ')}>
|
||||
{
|
||||
statItems.map((statItem, i) => (
|
||||
<UserPanelStatItem {...statItem} key={`user-panel-stat-item-${i}`} />
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
class UserPanelStatItem extends PureComponent {
|
||||
static propTypes = {
|
||||
to: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
}
|
||||
|
||||
state = {
|
||||
hovering: false,
|
||||
}
|
||||
|
||||
handleOnMouseEnter = () => {
|
||||
this.setState({ hovering: true })
|
||||
}
|
||||
|
||||
handleOnMouseLeave = () => {
|
||||
this.setState({ hovering: false })
|
||||
}
|
||||
|
||||
render() {
|
||||
const { to, title, value } = this.props
|
||||
const { hovering } = this.state
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
const titleClasses = cx({
|
||||
default: 1,
|
||||
fontWeightNormal: 1,
|
||||
text: 1,
|
||||
displayFlex: 1,
|
||||
fontSize13PX: 1,
|
||||
colorSubtle: !hovering,
|
||||
colorBlack: hovering,
|
||||
underline: hovering,
|
||||
})
|
||||
|
||||
return (
|
||||
<NavLink
|
||||
to={to}
|
||||
title={`${value} ${title}`}
|
||||
className={[styles.default, styles.flexGrow1, styles.cursorPointer, styles.noUnderline, styles.paddingRight15PX].join(' ')}
|
||||
onMouseEnter={() => this.handleOnMouseEnter()}
|
||||
onMouseLeave={() => this.handleOnMouseLeave()}
|
||||
>
|
||||
<span
|
||||
className={[styles.default, styles.fontWeightBold, styles.text, styles.displayFlex, styles.fontSize19PX, styles.colorBrand].join(' ')}
|
||||
>
|
||||
{value}
|
||||
</span>
|
||||
<strong
|
||||
className={titleClasses}
|
||||
>
|
||||
{title}
|
||||
</strong>
|
||||
</NavLink>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import { NavLink } from 'react-router-dom'
|
||||
import Text from './text'
|
||||
|
||||
export default class UserStat extends PureComponent {
|
||||
static propTypes = {
|
||||
to: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
}
|
||||
|
||||
state = {
|
||||
hovering: false,
|
||||
}
|
||||
|
||||
handleOnMouseEnter = () => {
|
||||
this.setState({ hovering: true })
|
||||
}
|
||||
|
||||
handleOnMouseLeave = () => {
|
||||
this.setState({ hovering: false })
|
||||
}
|
||||
|
||||
render() {
|
||||
const { to, title, value } = this.props
|
||||
const { hovering } = this.state
|
||||
|
||||
return (
|
||||
<NavLink
|
||||
to={to}
|
||||
title={`${value} ${title}`}
|
||||
className={[_s.default, _s.flexGrow1, _s.cursorPointer, _s.noUnderline, _s.paddingRight15PX].join(' ')}
|
||||
onMouseEnter={() => this.handleOnMouseEnter()}
|
||||
onMouseLeave={() => this.handleOnMouseLeave()}
|
||||
>
|
||||
<Text size='large' weight='bold' color='brand'>
|
||||
{value}
|
||||
</Text>
|
||||
<Text size='small' weight='medium' color='secondary' underline={hovering}>
|
||||
{title}
|
||||
</Text>
|
||||
</NavLink>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
|||
import { FormattedMessage } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import AvatarOverlay from '../../../../components/avatar_overlay';
|
||||
import DisplayName from '../../../../components/display_name';
|
||||
import Icon from '../../../../components/icon';
|
||||
|
||||
|
|
@ -13,12 +12,11 @@ export default class MovedNote extends ImmutablePureComponent {
|
|||
};
|
||||
|
||||
static propTypes = {
|
||||
from: ImmutablePropTypes.map.isRequired,
|
||||
to: ImmutablePropTypes.map.isRequired,
|
||||
};
|
||||
|
||||
render () {
|
||||
const { from, to } = this.props;
|
||||
const { to } = this.props;
|
||||
const displayNameHtml = { __html: from.get('display_name_html') };
|
||||
|
||||
return (
|
||||
|
|
@ -38,7 +36,7 @@ export default class MovedNote extends ImmutablePureComponent {
|
|||
|
||||
<NavLink to={`/${this.props.to.get('acct')}`} className='moved-note__display-name'>
|
||||
<div className='moved-note__display-avatar'>
|
||||
<AvatarOverlay account={to} friend={from} />
|
||||
<Avatar account={to} />
|
||||
</div>
|
||||
<DisplayName account={to} />
|
||||
</NavLink>
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@ export default class CharacterCounter extends PureComponent {
|
|||
const dashoffset = circumference * (1 - diff)
|
||||
|
||||
return (
|
||||
<div className={[styles.default, styles.marginRight10PX, styles.justifyContentCenter, styles.alignItemsCenter].join(' ')}>
|
||||
<div className={[_s.default, _s.marginRight10PX, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
|
||||
<svg width="32" height="32" viewBox="0 0 32 32">
|
||||
<circle fill='none' cx="16" cy="16" r="12" fill="none" stroke="#e6e6e6" stroke-width="2" />
|
||||
<circle fill='none' cx="16" cy="16" r="12" fill="none" stroke="#e6e6e6" strokeWidth="2" />
|
||||
<circle style={{
|
||||
// transform: 'rotate(-90deg)',
|
||||
strokeDashoffset: dashoffset,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import classNames from 'classnames/bind'
|
||||
import Icon from '../../../components/icon'
|
||||
|
||||
const cx = classNames.bind(_s)
|
||||
|
||||
export default class ComposeExtraButton extends PureComponent {
|
||||
static propTypes = {
|
||||
title: PropTypes.string,
|
||||
|
|
@ -25,8 +27,6 @@ export default class ComposeExtraButton extends PureComponent {
|
|||
const { title, disabled, onClick, icon, children } = this.props
|
||||
const { hovering } = this.state
|
||||
|
||||
const cx = classNames.bind(styles)
|
||||
|
||||
const btnClasses = cx({
|
||||
default: 1,
|
||||
circle: 1,
|
||||
|
|
@ -44,13 +44,13 @@ export default class ComposeExtraButton extends PureComponent {
|
|||
text: 1,
|
||||
lineHeight15: 1,
|
||||
fontSize12PX: 1,
|
||||
fontWeight500: 1,
|
||||
colorSubtle: 1,
|
||||
fontWeightMedium: 1,
|
||||
colorSecondary: 1,
|
||||
displayNone: !hovering,
|
||||
})
|
||||
|
||||
return (
|
||||
<div className={[styles.default, styles.marginRight10PX].join(' ')}>
|
||||
<div className={[_s.default, _s.marginRight10PX].join(' ')}>
|
||||
<button
|
||||
className={btnClasses}
|
||||
title={title}
|
||||
|
|
@ -59,7 +59,7 @@ export default class ComposeExtraButton extends PureComponent {
|
|||
onMouseEnter={() => this.handleOnMouseEnter()}
|
||||
onMouseLeave={() => this.handleOnMouseLeave()}
|
||||
>
|
||||
<Icon id={icon} width='18px' height='18px' className={styles.fillColorSubtle} />
|
||||
<Icon id={icon} width='18px' height='18px' className={_s.fillcolorSecondary} />
|
||||
<span className={titleClasses}>
|
||||
{title}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -225,7 +225,7 @@ class ComposeForm extends ImmutablePureComponent {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={[styles.default, styles.flexGrow1].join(' ')}
|
||||
className={[_s.default, _s.flexGrow1].join(' ')}
|
||||
ref={this.setForm}
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
|
|
@ -287,8 +287,8 @@ class ComposeForm extends ImmutablePureComponent {
|
|||
|
||||
{
|
||||
/* !condensed && */
|
||||
<div className={[styles.default, styles.flexRow, styles.marginTop10PX].join(' ')}>
|
||||
<div className={[styles.default, styles.flexRow, styles.marginRightAuto].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.marginTop10PX].join(' ')}>
|
||||
<div className={[_s.default, _s.flexRow, _s.marginRightAuto].join(' ')}>
|
||||
<UploadButton />
|
||||
{
|
||||
!edit && <PollButton />
|
||||
|
|
@ -299,11 +299,12 @@ class ComposeForm extends ImmutablePureComponent {
|
|||
</div>
|
||||
<CharacterCounter max={maxPostCharacterCount} text={text} />
|
||||
<Button
|
||||
className={[styles.fontSize15PX, styles.paddingHorizontal15PX].join(' ')}
|
||||
text={intl.formatMessage(scheduledAt ? messages.schedulePost : messages.publish)}
|
||||
className={[_s.fontSize15PX, _s.paddingHorizontal15PX].join(' ')}
|
||||
onClick={this.handleSubmit}
|
||||
disabled={disabledButton}
|
||||
/>
|
||||
>
|
||||
{intl.formatMessage(scheduledAt ? messages.schedulePost : messages.publish)}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ class UploadButton extends ImmutablePureComponent {
|
|||
icon='media'
|
||||
>
|
||||
<label>
|
||||
<span className={styles.displayNone}>{intl.formatMessage(messages.upload)}</span>
|
||||
<span className={_s.displayNone}>{intl.formatMessage(messages.upload)}</span>
|
||||
<input
|
||||
key={resetFileKey}
|
||||
ref={this.setRef}
|
||||
|
|
@ -76,7 +76,7 @@ class UploadButton extends ImmutablePureComponent {
|
|||
accept={acceptContentTypes.toArray().join(',')}
|
||||
onChange={this.handleChange}
|
||||
disabled={disabled}
|
||||
className={styles.displayNone}
|
||||
className={_s.displayNone}
|
||||
multiple
|
||||
/>
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,15 @@
|
|||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import { expandHomeTimeline } from '../../actions/timelines';
|
||||
import StatusListContainer from '../../containers/status_list_container';
|
||||
import ColumnSettings from './components/column_settings';
|
||||
import Column from '../../components/column';
|
||||
import { HomeColumnHeader } from '../../components/column_header';
|
||||
import { defineMessages, injectIntl } from 'react-intl'
|
||||
import { expandHomeTimeline } from '../../actions/timelines'
|
||||
import StatusListContainer from '../../containers/status_list_container'
|
||||
|
||||
const messages = defineMessages({
|
||||
title: { id: 'column.home', defaultMessage: 'Home' },
|
||||
});
|
||||
empty: { id: 'empty_column.home', defaultMessage: 'Your home timeline is empty. Start following other users to recieve their content here.' },
|
||||
})
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0,
|
||||
isPartial: state.getIn(['timelines', 'home', 'isPartial']),
|
||||
});
|
||||
})
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
@injectIntl
|
||||
|
|
@ -21,60 +18,57 @@ class HomeTimeline extends PureComponent {
|
|||
static propTypes = {
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
hasUnread: PropTypes.bool,
|
||||
isPartial: PropTypes.bool,
|
||||
};
|
||||
}
|
||||
|
||||
handleLoadMore = maxId => {
|
||||
this.props.dispatch(expandHomeTimeline({ maxId }));
|
||||
this.props.dispatch(expandHomeTimeline({ maxId }))
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
this._checkIfReloadNeeded(false, this.props.isPartial);
|
||||
this._checkIfReloadNeeded(false, this.props.isPartial)
|
||||
}
|
||||
|
||||
componentDidUpdate (prevProps) {
|
||||
this._checkIfReloadNeeded(prevProps.isPartial, this.props.isPartial);
|
||||
this._checkIfReloadNeeded(prevProps.isPartial, this.props.isPartial)
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
this._stopPolling();
|
||||
this._stopPolling()
|
||||
}
|
||||
|
||||
_checkIfReloadNeeded (wasPartial, isPartial) {
|
||||
const { dispatch } = this.props;
|
||||
const { dispatch } = this.props
|
||||
|
||||
if (wasPartial === isPartial) {
|
||||
return;
|
||||
} else if (!wasPartial && isPartial) {
|
||||
if (!wasPartial && isPartial) {
|
||||
this.polling = setInterval(() => {
|
||||
dispatch(expandHomeTimeline());
|
||||
}, 3000);
|
||||
dispatch(expandHomeTimeline())
|
||||
}, 3000)
|
||||
} else if (wasPartial && !isPartial) {
|
||||
this._stopPolling();
|
||||
this._stopPolling()
|
||||
}
|
||||
}
|
||||
|
||||
_stopPolling () {
|
||||
if (this.polling) {
|
||||
clearInterval(this.polling);
|
||||
this.polling = null;
|
||||
clearInterval(this.polling)
|
||||
this.polling = null
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const { intl, hasUnread } = this.props;
|
||||
const { intl } = this.props
|
||||
|
||||
const emptyMessage = intl.formatMessage(messages.empty)
|
||||
|
||||
return (
|
||||
<Column heading={intl.formatMessage(messages.title)}>
|
||||
<StatusListContainer
|
||||
scrollKey='home_timeline'
|
||||
onLoadMore={this.handleLoadMore}
|
||||
timelineId='home'
|
||||
emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage='Your home timeline is empty. Start following other users to recieve their content here.'/>}
|
||||
emptyMessage={emptyMessage}
|
||||
/>
|
||||
</Column>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import List from './components/list';
|
|||
import Account from '../../components/account';
|
||||
import IconButton from '../../components/icon_button';
|
||||
import NewListForm from '../lists/components/new_list_form';
|
||||
import ColumnSubheading from '../../components/column_subheading/column_subheading';
|
||||
|
||||
const getOrderedLists = createSelector([state => state.get('lists')], lists => {
|
||||
if (!lists) {
|
||||
|
|
@ -78,12 +77,10 @@ class ListAdder extends ImmutablePureComponent {
|
|||
|
||||
<br />
|
||||
|
||||
<ColumnSubheading text={intl.formatMessage(messages.add)} />
|
||||
<NewListForm />
|
||||
|
||||
<br />
|
||||
|
||||
<ColumnSubheading text={intl.formatMessage(messages.subheading)} />
|
||||
<div className='list-adder__lists'>
|
||||
{listIds.map(ListId => <List key={ListId} listId={ListId} />)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { setupListEditor, resetListEditor } from '../../actions/lists';
|
|||
import Account from './components/account';
|
||||
import ListEditorSearch from './components/list_editor_search';
|
||||
import EditListForm from './components/edit_list_form/edit_list_form';
|
||||
import ColumnSubheading from '../../components/column_subheading';
|
||||
import IconButton from '../../components/icon_button';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
|
|
@ -66,14 +65,12 @@ class ListEditor extends ImmutablePureComponent {
|
|||
</div>
|
||||
<div className='compose-modal__content'>
|
||||
<div className='list-editor'>
|
||||
<ColumnSubheading text={intl.formatMessage(messages.changeTitle)} />
|
||||
<EditListForm />
|
||||
<br />
|
||||
|
||||
{
|
||||
accountIds.size > 0 &&
|
||||
<div>
|
||||
<ColumnSubheading text={intl.formatMessage(messages.removeFromList)} />
|
||||
<div className='list-editor__accounts'>
|
||||
{accountIds.map(accountId => <Account key={accountId} accountId={accountId} added />)}
|
||||
</div>
|
||||
|
|
@ -81,7 +78,6 @@ class ListEditor extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
<br />
|
||||
<ColumnSubheading text={intl.formatMessage(messages.addToList)} />
|
||||
<ListEditorSearch />
|
||||
<div className='list-editor__accounts'>
|
||||
{searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,8 @@ import { expandListTimeline } from '../../actions/timelines';
|
|||
import { fetchList, deleteList } from '../../actions/lists';
|
||||
import { openModal } from '../../actions/modal';
|
||||
import StatusListContainer from '../../containers/status_list_container';
|
||||
import Column from '../../components/column';
|
||||
import ColumnIndicator from '../../components/column_indicator';
|
||||
import { HomeColumnHeader } from '../../components/column_header';
|
||||
import Button from '../../components/button';
|
||||
import ColumnHeaderSettingButton from '../../components/column_header_setting_button';
|
||||
|
||||
const messages = defineMessages({
|
||||
deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' },
|
||||
|
|
@ -19,7 +16,6 @@ const messages = defineMessages({
|
|||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
list: state.getIn(['lists', props.params.id]),
|
||||
hasUnread: state.getIn(['timelines', `list:${props.params.id}`, 'unread']) > 0,
|
||||
});
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
|
|
@ -33,7 +29,6 @@ class ListTimeline extends ImmutablePureComponent {
|
|||
static propTypes = {
|
||||
params: PropTypes.object.isRequired,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
hasUnread: PropTypes.bool,
|
||||
list: PropTypes.oneOfType([ImmutablePropTypes.map, PropTypes.bool]),
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
|
@ -93,7 +88,7 @@ class ListTimeline extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { hasUnread, list } = this.props;
|
||||
const { list } = this.props;
|
||||
const { id } = this.props.params;
|
||||
const title = list ? list.get('title') : id;
|
||||
|
||||
|
|
@ -116,38 +111,12 @@ class ListTimeline extends ImmutablePureComponent {
|
|||
);
|
||||
|
||||
return (
|
||||
<Column heading={title}>
|
||||
<HomeColumnHeader activeItem='lists' activeSubItem={id} active={hasUnread}>
|
||||
<div>
|
||||
<ColumnHeaderSettingButton
|
||||
onClick={this.handleEditClick}
|
||||
icon='pencil'
|
||||
title={<FormattedMessage id='lists.edit' defaultMessage='Edit list' />}
|
||||
/>
|
||||
|
||||
<ColumnHeaderSettingButton
|
||||
onClick={this.handleDeleteClick}
|
||||
icon='trash'
|
||||
title={<FormattedMessage id='lists.delete' defaultMessage='Delete list' />}
|
||||
/>
|
||||
|
||||
<hr />
|
||||
|
||||
<ColumnHeaderSettingButton
|
||||
to='/lists'
|
||||
icon='arrow-right'
|
||||
title={<FormattedMessage id='lists.view_all' defaultMessage='View all lists' />}
|
||||
/>
|
||||
</div>
|
||||
</HomeColumnHeader>
|
||||
|
||||
<StatusListContainer
|
||||
scrollKey='list_timeline'
|
||||
timelineId={`list:${id}`}
|
||||
onLoadMore={this.handleLoadMore}
|
||||
emptyMessage={emptyMessage}
|
||||
/>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,77 +1,118 @@
|
|||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { createSelector } from 'reselect';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { fetchLists } from '../../actions/lists';
|
||||
import ColumnIndicator from '../../components/column_indicator';
|
||||
import Column from '../../components/column';
|
||||
import ColumnLink from '../../components/column_link';
|
||||
import ColumnSubheading from '../../components/column_subheading';
|
||||
import NewListForm from './components/new_list_form';
|
||||
import ScrollableList from '../../components/scrollable_list';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import { NavLink } from 'react-router-dom'
|
||||
import { createSelector } from 'reselect'
|
||||
import { defineMessages, injectIntl } from 'react-intl'
|
||||
import classNames from 'classnames/bind'
|
||||
import { fetchLists } from '../../actions/lists'
|
||||
import ColumnIndicator from '../../components/column_indicator'
|
||||
import ScrollableList from '../../components/scrollable_list'
|
||||
import Icon from '../../components/icon'
|
||||
|
||||
const messages = defineMessages({
|
||||
heading: { id: 'column.lists', defaultMessage: 'Lists' },
|
||||
subheading: { id: 'lists.subheading', defaultMessage: 'Your lists' },
|
||||
add: { id: 'lists.new.create', defaultMessage: 'Add List' },
|
||||
});
|
||||
empty: { id: 'empty_column.lists', defaultMessage: 'You don\'t have any lists yet. When you create one, it will show up here.' },
|
||||
})
|
||||
|
||||
const getOrderedLists = createSelector([state => state.get('lists')], lists => {
|
||||
if (!lists) {
|
||||
return lists;
|
||||
}
|
||||
if (!lists) return lists
|
||||
|
||||
return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
|
||||
});
|
||||
return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')))
|
||||
})
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
lists: getOrderedLists(state),
|
||||
});
|
||||
})
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
onFetchLists() {
|
||||
return dispatch(fetchLists())
|
||||
},
|
||||
})
|
||||
|
||||
const cx = classNames.bind(_s)
|
||||
|
||||
export default @connect(mapStateToProps, mapDispatchToProps)
|
||||
@injectIntl
|
||||
class Lists extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
params: PropTypes.object.isRequired,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
onFetchLists: PropTypes.func.isRequired,
|
||||
lists: ImmutablePropTypes.list,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
}
|
||||
|
||||
state = {
|
||||
fetched: false,
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.props.dispatch(fetchLists());
|
||||
this.props.onFetchLists()
|
||||
.then(() => this.setState({ fetched: true }))
|
||||
.catch(() => this.setState({ fetched: true }))
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl, lists } = this.props;
|
||||
const { intl, lists } = this.props
|
||||
const { fetched } = this.state
|
||||
|
||||
if (!lists) {
|
||||
return (<ColumnIndicator type='loading' />);
|
||||
if (lists.size === 0 && !fetched) {
|
||||
return <ColumnIndicator type='loading' />
|
||||
}
|
||||
|
||||
const emptyMessage = intl.formatMessage(messages.empty)
|
||||
|
||||
return (
|
||||
<Column icon='list-ul' heading={intl.formatMessage(messages.heading)} backBtn='slim'>
|
||||
<br />
|
||||
<ColumnSubheading text={intl.formatMessage(messages.add)} />
|
||||
<NewListForm />
|
||||
<br />
|
||||
<ColumnSubheading text={intl.formatMessage(messages.subheading)} />
|
||||
<ScrollableList
|
||||
scrollKey='lists'
|
||||
emptyMessage={<FormattedMessage id='empty_column.lists' defaultMessage="You don't have any lists yet. When you create one, it will show up here." />}
|
||||
emptyMessage={emptyMessage}
|
||||
>
|
||||
{lists.map(list =>
|
||||
<ColumnLink
|
||||
key={list.get('id')}
|
||||
to={`/list/${list.get('id')}`}
|
||||
icon='list-ul'
|
||||
text={list.get('title')}
|
||||
/>
|
||||
)}
|
||||
<div className={[_s.default, _s.backgroundWhite, _s.radiusSmall, _s.overflowHidden, _s.border1PX, _s.bordercolorSecondary].join(' ')}>
|
||||
{
|
||||
lists.map((list, i) => {
|
||||
const isLast = lists.length - 1 === i
|
||||
return (
|
||||
<ListItem key={list.get('id')} list={list} isLast={isLast} />
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</ScrollableList>
|
||||
</Column>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class ListItem extends ImmutablePureComponent {
|
||||
static propTypes = {
|
||||
isLast: PropTypes.bool,
|
||||
list: ImmutablePropTypes.map,
|
||||
}
|
||||
|
||||
render() {
|
||||
const { list, isLast } = this.props
|
||||
|
||||
const containerClasses = cx({
|
||||
default: 1,
|
||||
cursorPointer: 1,
|
||||
noUnderline: 1,
|
||||
paddingHorizontal15PX: 1,
|
||||
paddingVertical15PX: 1,
|
||||
flexRow: 1,
|
||||
alignItemsCenter: 1,
|
||||
backgroundSubtle_onHover: 1,
|
||||
bordercolorSecondary: !isLast,
|
||||
borderBottom1PX: !isLast,
|
||||
})
|
||||
|
||||
return (
|
||||
<NavLink to={`/list/${list.get('id')}`} className={containerClasses} >
|
||||
<span className={[_s.default, _s.text, _s.colorPrimary, _s.fontSize14PX].join(' ')}>
|
||||
{list.get('title')}
|
||||
</span>
|
||||
<Icon id='angle-right' className={[_s.marginLeftAuto, _s.fillColorBlack].join(' ')} width='10px' height='10px' />
|
||||
</NavLink>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -124,7 +124,7 @@ export default class Card extends ImmutablePureComponent {
|
|||
return (
|
||||
<div
|
||||
ref={this.setRef}
|
||||
className={[styles.default, styles.backgroundColorSubtle3, styles.positionAbsolute, styles.top0, styles.right0, styles.bottom0, styles.left0, styles.statusCardVideo].join(' ')}
|
||||
className={[_s.default, _s.backgroundcolorSecondary3, _s.positionAbsolute, _s.top0, _s.right0, _s.bottom0, _s.left0, _s.statusCardVideo].join(' ')}
|
||||
dangerouslySetInnerHTML={content}
|
||||
/>
|
||||
)
|
||||
|
|
@ -145,7 +145,7 @@ export default class Card extends ImmutablePureComponent {
|
|||
const title = interactive ?
|
||||
(
|
||||
<a
|
||||
className={[styles.default, styles.displayFlex, styles.text, styles.noUnderline, styles.overflowWrapBreakWord, styles.colorBlack, styles.fontSize15PX, styles.fontWeight500].join(' ')}
|
||||
className={[_s.default, _s.displayFlex, _s.text, _s.noUnderline, _s.overflowWrapBreakWord, _s.colorPrimary, _s.fontSize15PX, _s.fontWeightMedium].join(' ')}
|
||||
href={card.get('url')}
|
||||
title={card.get('title')}
|
||||
rel='noopener'
|
||||
|
|
@ -155,19 +155,19 @@ export default class Card extends ImmutablePureComponent {
|
|||
</a>
|
||||
)
|
||||
: (
|
||||
<span className={[styles.default, styles.displayFlex, styles.text, styles.overflowWrapBreakWord, styles.colorBlack, styles.fontSize15PX, styles.fontWeight500].join(' ')}>
|
||||
<span className={[_s.default, _s.displayFlex, _s.text, _s.overflowWrapBreakWord, _s.colorPrimary, _s.fontSize15PX, _s.fontWeightMedium].join(' ')}>
|
||||
{card.get('title')}
|
||||
</span>
|
||||
)
|
||||
|
||||
const description = (
|
||||
<div className={[styles.default, styles.flexNormal, styles.paddingHorizontal10PX, styles.paddingVertical10PX, styles.borderColorSubtle, styles.borderLeft1PX].join(' ')}>
|
||||
<div className={[_s.default, _s.flexNormal, _s.paddingHorizontal10PX, _s.paddingVertical10PX, _s.bordercolorSecondary, _s.borderLeft1PX].join(' ')}>
|
||||
{title}
|
||||
<p className={[styles.default, styles.displayFlex, styles.text, styles.marginVertical5PX, styles.overflowWrapBreakWord, styles.colorSubtle, styles.fontSize13PX, styles.fontWeightNormal].join(' ')}>
|
||||
<p className={[_s.default, _s.displayFlex, _s.text, _s.marginVertical5PX, _s.overflowWrapBreakWord, _s.colorSecondary, _s.fontSize13PX, _s.fontWeightNormal].join(' ')}>
|
||||
{trim(card.get('description') || '', maxDescription)}
|
||||
</p>
|
||||
<span className={[styles.default, styles.marginTopAuto, styles.flexRow, styles.alignItemsCenter, styles.colorSubtle, styles.text, styles.displayFlex, styles.textOverflowEllipsis, styles.fontSize13PX].join(' ')}>
|
||||
<Icon id='link' width='12px' height='12px' className={[styles.fillColorSubtle, styles.marginRight5PX].join(' ')} fixedWidth />
|
||||
<span className={[_s.default, _s.marginTopAuto, _s.flexRow, _s.alignItemsCenter, _s.colorSecondary, _s.text, _s.displayFlex, _s.textOverflowEllipsis, _s.fontSize13PX].join(' ')}>
|
||||
<Icon id='link' width='12px' height='12px' className={[_s.fillcolorSecondary, _s.marginRight5PX].join(' ')} fixedWidth />
|
||||
{provider}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -175,9 +175,9 @@ export default class Card extends ImmutablePureComponent {
|
|||
|
||||
let embed = ''
|
||||
let thumbnail = interactive ?
|
||||
<img src={cardImg} className={[styles.default, styles.objectFitCover, styles.positionAbsolute, styles.width100PC, styles.height100PC, styles.top0, styles.right0, styles.bottom0, styles.left0].join(' ')} />
|
||||
<img src={cardImg} className={[_s.default, _s.objectFitCover, _s.positionAbsolute, _s.width100PC, _s.height100PC, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')} />
|
||||
:
|
||||
<img src={cardImg} className={[styles.default, styles.objectFitCover, styles.width400PX, styles.height260PX].join(' ')} />
|
||||
<img src={cardImg} className={[_s.default, _s.objectFitCover, _s.width400PX, _s.height260PX].join(' ')} />
|
||||
|
||||
if (interactive) {
|
||||
if (embedded) {
|
||||
|
|
@ -191,19 +191,19 @@ export default class Card extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={[styles.default, styles.width100PC, styles.paddingHorizontal10PX].join(' ')}>
|
||||
<div className={[styles.default, styles.overflowHidden, styles.width100PC, styles.borderColorSubtle2, styles.border1PX, styles.radiusSmall].join(' ')}>
|
||||
<div className={[styles.default, styles.width100PC].join(' ')}>
|
||||
<div className={[styles.default, styles.width100PC, styles.paddingTop5625PC].join(' ')}>
|
||||
<div className={[_s.default, _s.width100PC, _s.paddingHorizontal10PX].join(' ')}>
|
||||
<div className={[_s.default, _s.overflowHidden, _s.width100PC, _s.bordercolorSecondary2, _s.border1PX, _s.radiusSmall].join(' ')}>
|
||||
<div className={[_s.default, _s.width100PC].join(' ')}>
|
||||
<div className={[_s.default, _s.width100PC, _s.paddingTop5625PC].join(' ')}>
|
||||
{ !!embed && embed}
|
||||
{ !embed && thumbnail}
|
||||
{ !embed &&
|
||||
<div className={[styles.default, styles.positionAbsolute, styles.top0, styles.right0, styles.left0, styles.bottom0, styles.alignItemsCenter, styles.justifyContentCenter].join(' ')}>
|
||||
<div className={[_s.default, _s.positionAbsolute, _s.top0, _s.right0, _s.left0, _s.bottom0, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
|
||||
<button
|
||||
className={[styles.default, styles.cursorPointer, styles.backgroundColorOpaque, styles.radiusSmall, styles.paddingVertical15PX, styles.paddingHorizontal15PX].join(' ')}
|
||||
className={[_s.default, _s.cursorPointer, _s.backgroundColorOpaque, _s.radiusSmall, _s.paddingVertical15PX, _s.paddingHorizontal15PX].join(' ')}
|
||||
onClick={this.handleEmbedClick}
|
||||
>
|
||||
<Icon id={iconVariant} className={[styles.fillColorWhite].join(' ')}/>
|
||||
<Icon id={iconVariant} className={[_s.fillColorWhite].join(' ')}/>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -215,23 +215,23 @@ export default class Card extends ImmutablePureComponent {
|
|||
)
|
||||
} else if (cardImg) {
|
||||
embed = (
|
||||
<div className={[styles.default].join(' ')}>
|
||||
<div className={[_s.default].join(' ')}>
|
||||
{thumbnail}
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
embed = (
|
||||
<div className={[styles.default, styles.paddingVertical15PX, styles.paddingHorizontal15PX, styles.width72PX, styles.alignItemsCenter, styles.justifyContentCenter].join(' ')}>
|
||||
<Icon id='file-text' width='22px' height='22px' className={styles.fillColorSubtle} />
|
||||
<div className={[_s.default, _s.paddingVertical15PX, _s.paddingHorizontal15PX, _s.width72PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
|
||||
<Icon id='file-text' width='22px' height='22px' className={_s.fillcolorSecondary} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={[styles.default, styles.width100PC, styles.paddingHorizontal10PX].join(' ')}>
|
||||
<div className={[_s.default, _s.width100PC, _s.paddingHorizontal10PX].join(' ')}>
|
||||
<a
|
||||
href={card.get('url')}
|
||||
className={[styles.default, styles.cursorPointer, styles.flexRow, styles.overflowHidden, styles.noUnderline, styles.width100PC, styles.borderColorSubtle2, styles.border1PX, styles.radiusSmall].join(' ')}
|
||||
className={[_s.default, _s.cursorPointer, _s.flexRow, _s.overflowHidden, _s.noUnderline, _s.width100PC, _s.bordercolorSecondary2, _s.border1PX, _s.radiusSmall].join(' ')}
|
||||
rel='noopener'
|
||||
ref={this.setRef}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -30,6 +30,8 @@ import ProfilePage from '../../pages/profile_page'
|
|||
// import SearchPage from '../../pages/search_page';
|
||||
import HomePage from '../../pages/home_page'
|
||||
import NotificationsPage from '../../pages/notifications_page'
|
||||
import ListPage from '../../pages/list_page'
|
||||
import ListsPage from '../../pages/lists_page'
|
||||
// import GroupSidebarPanel from '../groups/sidebar_panel';
|
||||
|
||||
import {
|
||||
|
|
@ -57,8 +59,8 @@ import {
|
|||
// Explore,
|
||||
// Groups,
|
||||
// GroupTimeline,
|
||||
// ListTimeline,
|
||||
// Lists,
|
||||
ListTimeline,
|
||||
Lists,
|
||||
// GroupMembers,
|
||||
// GroupRemovedAccounts,
|
||||
// GroupCreate,
|
||||
|
|
@ -192,11 +194,11 @@ class SwitchingColumnsArea extends PureComponent {
|
|||
<WrappedRoute path='/groups/:id' page={GroupPage} component={GroupTimeline} content={children} />
|
||||
|
||||
<WrappedRoute path='/tags/:id' publicRoute component={HashtagTimeline} content={children} />
|
||||
*/}
|
||||
<WrappedRoute path='/lists' page={ListsPage} component={Lists} content={children} />
|
||||
<WrappedRoute path='/list/:id' page={ListPage} component={ListTimeline} content={children} />
|
||||
|
||||
<WrappedRoute path='/lists' layout={LAYOUT.DEFAULT} component={Lists} content={children} />
|
||||
<WrappedRoute path='/list/:id' page={HomePage} component={ListTimeline} content={children} />
|
||||
*/}
|
||||
<WrappedRoute path='/notifications' layout={LAYOUT.DEFAULT} page={NotificationsPage} component={Notifications} content={children} />
|
||||
<WrappedRoute path='/notifications' page={NotificationsPage} component={Notifications} content={children} />
|
||||
{/*
|
||||
<WrappedRoute path='/search' exact publicRoute page={SearchPage} component={Search} content={children} />
|
||||
<WrappedRoute path='/search/people' exact page={SearchPage} component={Search} content={children} />
|
||||
|
|
|
|||
|
|
@ -3,21 +3,37 @@ import GroupSidebarPanel from '../components/panel/groups_panel'
|
|||
import LinkFooter from '../components/link_footer'
|
||||
import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
|
||||
import ProgressPanel from '../components/panel/progress_panel'
|
||||
import UserPanel from '../components/user_panel'
|
||||
import UserPanel from '../components/panel/user_panel'
|
||||
import TrendsPanel from '../components/panel/trends_panel'
|
||||
import HashtagsPanel from '../components/panel/hashtags_panel'
|
||||
import DefaultLayout from '../components/layouts/default_layout'
|
||||
import TimelineComposeBlock from '../components/timeline_compose_block'
|
||||
import Divider from '../components/divider'
|
||||
|
||||
export default class HomePage extends PureComponent {
|
||||
|
||||
handleEditHomeTimeline () {
|
||||
console.log("handleEditHomeTimeline")
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children } = this.props
|
||||
|
||||
return (
|
||||
<DefaultLayout
|
||||
title='Home'
|
||||
actions={[
|
||||
{
|
||||
icon: 'ellipsis',
|
||||
onClick: this.handleEditHomeTimeline
|
||||
},
|
||||
]}
|
||||
layout={(
|
||||
<Fragment>
|
||||
<UserPanel />
|
||||
<ProgressPanel />
|
||||
<TrendsPanel />
|
||||
<HashtagsPanel />
|
||||
<WhoToFollowPanel />
|
||||
<GroupSidebarPanel />
|
||||
<LinkFooter />
|
||||
|
|
@ -25,7 +41,7 @@ export default class HomePage extends PureComponent {
|
|||
)}
|
||||
>
|
||||
<TimelineComposeBlock autoFocus={false} shouldCondense />
|
||||
<div className={[styles.default, styles.borderBottom1PX, styles.borderColorSubtle2, styles.marginBottom15PX, styles.width100PC].join(' ')} />
|
||||
<Divider />
|
||||
{children}
|
||||
</DefaultLayout>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
import { Fragment } from 'react'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import LinkFooter from '../components/link_footer'
|
||||
import DefaultLayout from '../components/layouts/default_layout'
|
||||
import ListDetailsPanel from '../components/panel/list_details_panel'
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
list: state.getIn(['lists', props.params.id]),
|
||||
});
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
class ListPage extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
list: ImmutablePropTypes.map,
|
||||
};
|
||||
|
||||
handleEditListTimeline () {
|
||||
console.log("handleEditListTimeline")
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children, list } = this.props
|
||||
|
||||
const title = list ? list.get('title') : ''
|
||||
|
||||
return (
|
||||
<DefaultLayout
|
||||
title={title}
|
||||
actions={[
|
||||
{
|
||||
icon: 'ellipsis',
|
||||
onClick: this.handleEditListTimeline
|
||||
},
|
||||
]}
|
||||
layout={(
|
||||
<Fragment>
|
||||
<ListDetailsPanel />
|
||||
<LinkFooter />
|
||||
</Fragment>
|
||||
)}
|
||||
showBackBtn
|
||||
>
|
||||
{ children }
|
||||
</DefaultLayout>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import { Fragment } from 'react'
|
||||
import LinkFooter from '../components/link_footer'
|
||||
import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
|
||||
import TrendsPanel from '../components/panel/trends_panel'
|
||||
import DefaultLayout from '../components/layouts/default_layout'
|
||||
|
||||
export default class ListsPage extends PureComponent {
|
||||
|
||||
handleClickNewList () {
|
||||
console.log("handleClickNewList")
|
||||
}
|
||||
|
||||
handleClickEditLists () {
|
||||
console.log("handleClickEditLists")
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children } = this.props
|
||||
|
||||
return (
|
||||
<DefaultLayout
|
||||
title='Lists'
|
||||
actions={[
|
||||
{
|
||||
icon: 'subtract',
|
||||
onClick: this.handleClickEditLists
|
||||
},
|
||||
{
|
||||
icon: 'add',
|
||||
onClick: this.handleClickNewList
|
||||
},
|
||||
]}
|
||||
layout={(
|
||||
<Fragment>
|
||||
<TrendsPanel />
|
||||
<WhoToFollowPanel />
|
||||
<LinkFooter />
|
||||
</Fragment>
|
||||
)}
|
||||
showBackBtn
|
||||
>
|
||||
{children}
|
||||
</DefaultLayout>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import {
|
||||
TRENDS_FETCH_REQUEST,
|
||||
TRENDS_FETCH_SUCCESS,
|
||||
TRENDS_FETCH_FAIL,
|
||||
} from '../actions/trends';
|
||||
HASHTAGS_FETCH_REQUEST,
|
||||
HASHTAGS_FETCH_SUCCESS,
|
||||
HASHTAGS_FETCH_FAIL,
|
||||
} from '../actions/hashtags';
|
||||
import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
|
||||
|
||||
const initialState = ImmutableMap({
|
||||
|
|
@ -10,16 +10,16 @@ const initialState = ImmutableMap({
|
|||
isLoading: false,
|
||||
});
|
||||
|
||||
export default function trendsReducer(state = initialState, action) {
|
||||
export default function hashtagsReducer(state = initialState, action) {
|
||||
switch(action.type) {
|
||||
case TRENDS_FETCH_REQUEST:
|
||||
case HASHTAGS_FETCH_REQUEST:
|
||||
return state.set('isLoading', true);
|
||||
case TRENDS_FETCH_SUCCESS:
|
||||
case HASHTAGS_FETCH_SUCCESS:
|
||||
return state.withMutations(map => {
|
||||
map.set('items', fromJS(action.tags.map((x => x))))
|
||||
map.set('isLoading', false);
|
||||
});
|
||||
case TRENDS_FETCH_FAIL:
|
||||
case HASHTAGS_FETCH_FAIL:
|
||||
return state.set('isLoading', false);
|
||||
default:
|
||||
return state;
|
||||
|
|
@ -31,7 +31,7 @@ import conversations from './conversations';
|
|||
import suggestions from './suggestions';
|
||||
import polls from './polls';
|
||||
import identity_proofs from './identity_proofs';
|
||||
import trends from './trends';
|
||||
import hashtags from './hashtags';
|
||||
import groups from './groups';
|
||||
import group_relationships from './group_relationships';
|
||||
import group_lists from './group_lists';
|
||||
|
|
@ -72,7 +72,7 @@ const reducers = {
|
|||
conversations,
|
||||
suggestions,
|
||||
polls,
|
||||
trends,
|
||||
hashtags,
|
||||
groups,
|
||||
group_relationships,
|
||||
group_lists,
|
||||
|
|
|
|||
|
|
@ -1,29 +1,57 @@
|
|||
'use strict';
|
||||
'use strict'
|
||||
|
||||
import detectPassiveEvents from 'detect-passive-events';
|
||||
import detectPassiveEvents from 'detect-passive-events'
|
||||
|
||||
const LAYOUT_BREAKPOINT = 630;
|
||||
const BREAKPOINT_EXTRA_LARGE = 1480
|
||||
const BREAKPOINT_LARGE = 1280
|
||||
const BREAKPOINT_MEDIUM = 1160
|
||||
const BREAKPOINT_SMALL = 1080
|
||||
const BREAKPOINT_EXTRA_SMALL = 992
|
||||
|
||||
export function isMobile(width) {
|
||||
return width <= LAYOUT_BREAKPOINT;
|
||||
};
|
||||
|
||||
const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
|
||||
|
||||
let userTouching = false;
|
||||
let listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false;
|
||||
|
||||
function touchListener() {
|
||||
userTouching = true;
|
||||
window.removeEventListener('touchstart', touchListener, listenerOptions);
|
||||
export function breakpointExtraLarge(width) {
|
||||
return width > BREAKPOINT_EXTRA_LARGE
|
||||
}
|
||||
|
||||
window.addEventListener('touchstart', touchListener, listenerOptions);
|
||||
export function breakpointLarge(width) {
|
||||
return width > BREAKPOINT_MEDIUM && width < BREAKPOINT_LARGE
|
||||
}
|
||||
|
||||
export function breakpointMedium(width) {
|
||||
return width > BREAKPOINT_SMALL && width < BREAKPOINT_MEDIUM
|
||||
}
|
||||
|
||||
export function breakpointSmall(width) {
|
||||
return width > BREAKPOINT_EXTRA_SMALL && width < BREAKPOINT_SMALL
|
||||
}
|
||||
|
||||
export function breakpointExtraSmall(width) {
|
||||
return width < BREAKPOINT_EXTRA_SMALL
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
const LAYOUT_BREAKPOINT = 630
|
||||
|
||||
export function isMobile(width) {
|
||||
return width <= LAYOUT_BREAKPOINT
|
||||
}
|
||||
|
||||
const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream
|
||||
|
||||
let userTouching = false
|
||||
let listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false
|
||||
|
||||
function touchListener() {
|
||||
userTouching = true
|
||||
window.removeEventListener('touchstart', touchListener, listenerOptions)
|
||||
}
|
||||
|
||||
window.addEventListener('touchstart', touchListener, listenerOptions)
|
||||
|
||||
export function isUserTouching() {
|
||||
return userTouching;
|
||||
return userTouching
|
||||
}
|
||||
|
||||
export function isIOS() {
|
||||
return iOS;
|
||||
};
|
||||
return iOS
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue