From e1e26afe111fdee5c0204f3f6c649079b003f119 Mon Sep 17 00:00:00 2001 From: mgabdev <> Date: Wed, 6 May 2020 00:33:54 -0400 Subject: [PATCH] Progress --- app/javascript/gabsocial/actions/tenor.js | 1 - .../gabsocial/components/comment.js | 2 +- .../components/floating_action_button.js | 2 +- app/javascript/gabsocial/components/footer.js | 59 ----- .../gabsocial/components/footer_bar.js | 88 +++++++ .../intersection_observer_article.js | 6 +- .../gabsocial/components/media_gallery.js | 1 + .../gabsocial/components/navigation_bar.js | 76 ++++-- .../components/sidebar_section_item.js | 24 +- app/javascript/gabsocial/components/status.js | 246 ++++++++++-------- .../gabsocial/components/status_card.js | 41 ++- .../gabsocial/components/status_content.js | 9 +- .../gabsocial/components/status_media.js | 3 + .../components/timeline_compose_block.js | 8 +- .../gabsocial/containers/status_container.js | 18 +- .../compose/components/compose_form.js | 2 - .../gabsocial/features/group_create.js | 1 - .../ui/util/responsive_classes_component.js | 76 ++++++ .../features/ui/util/responsive_component.js | 3 + app/javascript/gabsocial/layouts/layout.js | 79 +++--- app/javascript/gabsocial/selectors/index.js | 3 - app/javascript/gabsocial/utils/is_mobile.js | 27 +- app/javascript/styles/global.css | 18 ++ 23 files changed, 501 insertions(+), 292 deletions(-) delete mode 100644 app/javascript/gabsocial/components/footer.js create mode 100644 app/javascript/gabsocial/components/footer_bar.js create mode 100644 app/javascript/gabsocial/features/ui/util/responsive_classes_component.js diff --git a/app/javascript/gabsocial/actions/tenor.js b/app/javascript/gabsocial/actions/tenor.js index 075fee9d..85a856b7 100644 --- a/app/javascript/gabsocial/actions/tenor.js +++ b/app/javascript/gabsocial/actions/tenor.js @@ -40,7 +40,6 @@ export const fetchGifResults = (expand) => { const pos = 0 //expand ? getState().getIn(['tenor', 'results'], []).length api(getState).get('/api/v1/gifs/search', { search, pos }).then((response) => { - console.log("response.data:", response.data) dispatch(fetchGifResultsSuccess(response.data)) }).catch(function (error) { dispatch(fetchGifResultsFail(error)) diff --git a/app/javascript/gabsocial/components/comment.js b/app/javascript/gabsocial/components/comment.js index 03847495..f93e3a0a 100644 --- a/app/javascript/gabsocial/components/comment.js +++ b/app/javascript/gabsocial/components/comment.js @@ -175,7 +175,7 @@ class Comment extends ImmutablePureComponent { isComment collapsable /> -
+
- - - , - - - - - , - - - - , - - - - , - - - - , -] - -export default -@injectIntl -@withRouter -class FooterBar extends PureComponent { - - static propTypes = { - intl: PropTypes.object.isRequired, - } - - render() { - const { intl: { formatMessage } } = this.props; - - return ( -
-
- { - links.map((link) => - React.cloneElement(link, { - key: link.props.to, - 'aria-label': formatMessage({ - id: link.props['data-preview-title-id'] - }) - })) - } -
-
- ); - } -} diff --git a/app/javascript/gabsocial/components/footer_bar.js b/app/javascript/gabsocial/components/footer_bar.js new file mode 100644 index 00000000..a9b2f04a --- /dev/null +++ b/app/javascript/gabsocial/components/footer_bar.js @@ -0,0 +1,88 @@ +import { NavLink, withRouter } from 'react-router-dom'; +import { FormattedMessage, injectIntl } from 'react-intl'; +import Button from './button' +import Icon from './icon' + +const links = [ + + + + , + + + + , + + + , + + + + , + + + + , +] + +export default +@injectIntl +@withRouter +class FooterBar extends PureComponent { + + static propTypes = { + intl: PropTypes.object.isRequired, + } + + handleSettings = () => { + // + } + + render() { + const { intl } = this.props + + return ( +
+
+
+
+
+
+ ) + } +} diff --git a/app/javascript/gabsocial/components/intersection_observer_article.js b/app/javascript/gabsocial/components/intersection_observer_article.js index aa7238fa..52aa2077 100644 --- a/app/javascript/gabsocial/components/intersection_observer_article.js +++ b/app/javascript/gabsocial/components/intersection_observer_article.js @@ -46,7 +46,7 @@ class IntersectionObserverArticle extends React.Component { state = { isIntersecting: false, - isHidden: true, + isHidden: false, } componentDidMount() { @@ -142,7 +142,7 @@ class IntersectionObserverArticle extends React.Component { data-id={id} tabIndex='0' > - {React.cloneElement(children, { isHidden: true })} + {React.cloneElement(children, { isHidden: true, cachedHeight })} ) } @@ -155,7 +155,7 @@ class IntersectionObserverArticle extends React.Component { data-id={id} tabIndex='0' > - {React.cloneElement(children, { isHidden: false, isIntersecting })} + {React.cloneElement(children, { isHidden: false, isIntersecting, cachedHeight })} ) } diff --git a/app/javascript/gabsocial/components/media_gallery.js b/app/javascript/gabsocial/components/media_gallery.js index 255653b5..cbd4602d 100644 --- a/app/javascript/gabsocial/components/media_gallery.js +++ b/app/javascript/gabsocial/components/media_gallery.js @@ -253,6 +253,7 @@ class MediaGallery extends PureComponent { visible: PropTypes.bool, onToggleVisibility: PropTypes.func, reduced: PropTypes.bool, + isComment: PropTypes.bool, }; static defaultProps = { diff --git a/app/javascript/gabsocial/components/navigation_bar.js b/app/javascript/gabsocial/components/navigation_bar.js index 14783ce9..6fe0d980 100644 --- a/app/javascript/gabsocial/components/navigation_bar.js +++ b/app/javascript/gabsocial/components/navigation_bar.js @@ -7,6 +7,7 @@ import Responsive from '../features/ui/util/responsive_component' import { CX } from '../constants' import Avatar from './avatar' import Button from './button' +import Heading from './heading' import Icon from './icon' import Search from './search' import Text from './text' @@ -48,11 +49,31 @@ class NavigationBar extends ImmutablePureComponent {
-

- -

+ + { + !!account && + + } +
+ + {title} + +
+ + + +

+ +

+
@@ -64,25 +85,34 @@ class NavigationBar extends ImmutablePureComponent {
- + + +
+ { /** actions */} +
+ + + + + + + + + + + - - - - - - - - { - !!account && - - } + { + !!account && + + } +
diff --git a/app/javascript/gabsocial/components/sidebar_section_item.js b/app/javascript/gabsocial/components/sidebar_section_item.js index 12d15f3d..6b90a579 100644 --- a/app/javascript/gabsocial/components/sidebar_section_item.js +++ b/app/javascript/gabsocial/components/sidebar_section_item.js @@ -1,9 +1,11 @@ -import classNames from 'classnames/bind' +import { + CX, + BREAKPOINT_SMALL +} from '../constants' import Button from './button' import Icon from './icon' import Image from './image' - -const cx = classNames.bind(_s) +import Responsive from '../features/ui/util/responsive_component' export default class SidebarSectionItem extends PureComponent { @@ -57,7 +59,7 @@ export default class SidebarSectionItem extends PureComponent { const shouldShowActive = hovering || active || currentPathname === to || currentPathname === href const isNotifications = to === '/notifications' - const containerClasses = cx({ + const containerClasses = CX({ default: 1, maxWidth100PC: 1, width100PC: 1, @@ -74,7 +76,7 @@ export default class SidebarSectionItem extends PureComponent { bgPrimary: shouldShowActive, }) - const textClasses = cx({ + const textClasses = CX({ default: 1, fontWeightNormal: 1, fs15PX: 1, @@ -83,11 +85,11 @@ export default class SidebarSectionItem extends PureComponent { colorPrimary: 1, }) - const iconClasses = cx({ + const iconClasses = CX({ fillPrimary: 1, }) - const countClasses = cx({ + const countClasses = CX({ default: 1, text: 1, mlAuto: 1, @@ -130,9 +132,11 @@ export default class SidebarSectionItem extends PureComponent { /> } -
- {title} -
+ +
+ {title} +
+ { count > 0 && diff --git a/app/javascript/gabsocial/components/status.js b/app/javascript/gabsocial/components/status.js index 48f74dde..94b72ac3 100644 --- a/app/javascript/gabsocial/components/status.js +++ b/app/javascript/gabsocial/components/status.js @@ -4,7 +4,10 @@ import ImmutablePureComponent from 'react-immutable-pure-component' import { HotKeys } from 'react-hotkeys' import classNames from 'classnames/bind' import { me, displayMedia, compactMode } from '../initial_state' +import scheduleIdleTask from '../utils/schedule_idle_task' import ComposeFormContainer from '../features/compose/containers/compose_form_container' +import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component' +import ColumnIndicator from './column_indicator' import StatusContent from './status_content' import StatusPrepend from './status_prepend' import StatusActionBar from './status_action_bar' @@ -133,12 +136,14 @@ class Status extends ImmutablePureComponent { if (nextProps.isChild) return null if (!nextProps.isHidden && (nextProps.isIntersecting || !nextProps.commentsLimited) && !prevState.loadedComments) { + console.log("111111111111111111111111111111111111", nextProps.isHidden, nextProps.isIntersecting) return { loadedComments: true } } if (nextProps.status && nextProps.status.get('id') !== prevState.statusId) { + console.log("2222222222222222222222222222222222222") return { loadedComments: false, //reset showMedia: defaultMediaVisibility(nextProps.status), @@ -154,12 +159,14 @@ class Status extends ImmutablePureComponent { // timeline lazy loading comments if (!prevState.loadedComments && this.state.loadedComments && this.props.status && !this.props.isChild) { const commentCount = this.props.status.get('replies_count') - if (commentCount > 0 && !this.props.isComment) { - this.props.onFetchComments(this.props.status.get('id')) - // this._measureHeight(prevState.height !== this.state.height) - } else { - console.log("before fetch:", this.props.status) + if (this.props.isComment) { this.props.onFetchContext(this.props.status.get('id')) + this._measureHeight(prevState.height !== this.state.height) + } else { + if (commentCount > 0) { + this._measureHeight(prevState.height !== this.state.height) + this.props.onFetchComments(this.props.status.get('id')) + } } } @@ -170,6 +177,7 @@ class Status extends ImmutablePureComponent { if (snapshot !== null && this.props.updateScrollBottom) { if (this.node && this.node.offsetTop < snapshot.top) { + console.log("updateScrollBottom") this.props.updateScrollBottom(snapshot.height - snapshot.top) } } @@ -332,15 +340,15 @@ class Status extends ImmutablePureComponent { return status } - _measureHeight (heightJustChanged) { + _measureHeight(heightJustChanged) { try { scheduleIdleTask(() => this.node && this.setState({ height: Math.ceil(this.node.scrollHeight) + 1 })) - + if (heightJustChanged) { this.props.onHeightChange() - } + } } catch (error) { - + // } } @@ -360,12 +368,18 @@ class Status extends ImmutablePureComponent { commentsLimited, ancestorStatus, isComment, + contextType, } = this.props - + // const { height } = this.state + let { status } = this.props if (!status) return null + if (isComment && !ancestorStatus && !isChild) { + return + } + let reblogContent, rebloggedByText = null if (ancestorStatus) { @@ -394,35 +408,27 @@ class Status extends ImmutablePureComponent { toggleSensitive: this.handleHotkeyToggleSensitive, } - if (isHidden) { - return ( - -
- {status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])} - {status.get('content')} -
- - ) - } - - if (status.get('filtered') || status.getIn(['reblog', 'filtered'])) { - return null - } + const parentClasses = cx({ + pb15: !isChild && !compactMode, + }) const containerClasses = cx({ - default: 1, - pb15: isFeatured, radiusSmall: !isChild && !compactMode, bgPrimary: !isChild, boxShadowBlock: !isChild && !compactMode, - outlineNone: 1, - mb15: !isChild && !compactMode, borderRight1PX: !isChild && compactMode, borderLeft1PX: !isChild && compactMode, borderBottom1PX: !isChild && compactMode, borderColorSecondary: !isChild && compactMode, }) + const containerClassesXS = cx({ + bgPrimary: !isChild, + boxShadowBlock: !isChild && !compactMode, + borderBottom1PX: !isChild && compactMode, + borderColorSecondary: !isChild && compactMode, + }) + const innerContainerClasses = cx({ default: 1, overflowHidden: 1, @@ -435,95 +441,117 @@ class Status extends ImmutablePureComponent { bgSubtle_onHover: isChild, }) + if (status.get('filtered') || status.getIn(['reblog', 'filtered'])) { + return null + } + + if (isHidden) { + return ( + +
+ {status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])} + {status.get('content')} +
+ + ) + } + return ( -
-
+
+ +
+
-
+
- + - + -
- +
+ +
+ + + + { + !!status.get('quote') && !isChild && +
+ +
+ } + + { + !isChild && + + } + + { + !isChild && !compactMode && !!me && +
+ +
+ } + + { + descendantsIds && !compactMode && !isChild && descendantsIds.size > 0 && +
+ } + + { + descendantsIds && !compactMode && !isChild && descendantsIds.size > 0 && + + } +
- - - - { - !!status.get('quote') && !isChild && -
- -
- } - - { - !isChild && - - } - - { - !isChild && !compactMode && !!me && -
- -
- } - - { - descendantsIds && !compactMode && !isChild && descendantsIds.size > 0 && -
- } - - { - descendantsIds && !compactMode && !isChild && descendantsIds.size > 0 && - - }
-
+
) diff --git a/app/javascript/gabsocial/components/status_card.js b/app/javascript/gabsocial/components/status_card.js index 295ab075..d2196209 100644 --- a/app/javascript/gabsocial/components/status_card.js +++ b/app/javascript/gabsocial/components/status_card.js @@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes' import ImmutablePureComponent from 'react-immutable-pure-component' import punycode from 'punycode' import { DEFAULT_REL } from '../constants' +import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component' import Icon from './icon' const IDNA_PREFIX = 'xn--' @@ -67,7 +68,7 @@ export default class Card extends ImmutablePureComponent { embedded: false, } - componentWillReceiveProps (nextProps) { + componentWillReceiveProps(nextProps) { if (!Immutable.is(this.props.card, nextProps.card)) { this.setState({ embedded: false }) } @@ -111,12 +112,12 @@ export default class Card extends ImmutablePureComponent { } } - renderVideo () { - const { card } = this.props - const content = { __html: addAutoPlay(card.get('html')) } + renderVideo() { + const { card } = this.props + const content = { __html: addAutoPlay(card.get('html')) } const { width } = this.state - const ratio = card.get('width') / card.get('height') - const height = width / ratio + const ratio = card.get('width') / card.get('height') + const height = width / ratio return (
: - {''} + ( + + {''} + + ) if (interactive) { if (embedded) { @@ -193,9 +201,9 @@ export default class Card extends ImmutablePureComponent {
- { !!embed && embed} - { !embed && thumbnail} - { !embed && + {!!embed && embed} + {!embed && thumbnail} + {!embed && ) diff --git a/app/javascript/gabsocial/components/status_content.js b/app/javascript/gabsocial/components/status_content.js index b85d3147..b4086210 100644 --- a/app/javascript/gabsocial/components/status_content.js +++ b/app/javascript/gabsocial/components/status_content.js @@ -169,7 +169,12 @@ class StatusContent extends ImmutablePureComponent { } render() { - const { status, intl, isComment } = this.props + const { + collapsable, + intl, + isComment, + status, + } = this.props const { collapsed } = this.state if (status.get('content').length === 0) return null @@ -302,7 +307,7 @@ class StatusContent extends ImmutablePureComponent { onMouseUp={this.handleMouseUp} /> { - this.state.collapsed && + this.state.collapsed && collapsable &&