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

Progress

Browse Source
This commit is contained in:
mgabdev
2020-05-07 00:03:34 -04:00
parent c1131db577
commit a026d86b86
22 changed files with 217 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/gabsocial/components/autosuggest_textbox.js
View File

@@ -246,7 +246,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
fs14PX: small,
heightMax200PX: small,
heightMax80VH: !small,
heightMin100PX: !small,
heightMin80PX: !small,
})
const textareaContainerClasses = cx({

17
app/javascript/gabsocial/components/card_view.js Normal file
View File

@@ -0,0 +1,17 @@
export default class CardView extends PureComponent {
static propTypes = {
children: PropTypes.any,
}
render() {
const { children } = this.props
return (
<div className={[_s.default, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden, _s.radiusSmall].join(' ')}>
{children}
</div>
)
}
}

2
app/javascript/gabsocial/components/floating_action_button.js
View File

@@ -31,7 +31,7 @@ class FloatingActionButton extends PureComponent {
return (
<Button
onClick={onOpenCompose}
className={[_s.posFixed, _s.z4, _s.py15, _s.mb15, _s.mr15, _s.bottom50PX, _s.height60PX, _s.width60PX, _s.right0, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
className={[_s.posFixed, _s.z4, _s.py15, _s.mb15, _s.mr15, _s.bottom55PX, _s.height60PX, _s.width60PX, _s.right0, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
title={message}
aria-label={message}
icon='pencil'

66
app/javascript/gabsocial/components/footer_bar.js
View File

@@ -1,50 +1,18 @@
import { NavLink, withRouter } from 'react-router-dom';
import { FormattedMessage, injectIntl } from 'react-intl';
import { withRouter } from 'react-router-dom'
import { me } from '../initial_state'
import Button from './button'
import Icon from './icon'
const links = [
<NavLink key='pr1' className='footer-bar__link' to='/home' data-preview-title-id='column.home'>
<i className='tabs-bar__link__icon home' />
<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
</NavLink>,
<NavLink key='pr2' className='footer-bar__link' to='/notifications' data-preview-title-id='column.notifications'>
<i className='tabs-bar__link__icon notifications' />
<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />
</NavLink>,
<a key='pl5' className='footer-bar__link footer-bar__link--chat' href='https://chat.gab.com' data-preview-title-id='tabs_bar.chat'>
<FormattedMessage id='tabs_bar.chat' defaultMessage='Chat' />
</a>,
<a key='pl4' className='footer-bar__link footer-bar__link--trends' href='https://trends.gab.com' data-preview-title-id='tabs_bar.trends'>
<i className='tabs-bar__link__icon trends' />
<FormattedMessage id='tabs_bar.trends' defaultMessage='Trends' />
</a>,
<NavLink key='pr3' className='footer-bar__link' to='/groups' data-preview-title-id='column.groups'>
<i className='tabs-bar__link__icon groups' />
<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />
</NavLink>,
]
export default
@injectIntl
@withRouter
class FooterBar extends PureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
}
handleSettings = () => {
//
}
render() {
const { intl } = this.props
if (!me) return false
return (
<div className={[_s.default, _s.z4, _s.height53PX, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.posFixed, _s.left0, _s.right0, _s.bottom0, _s.height53PX, _s.width100PC, _s.bgPrimary, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentSpaceAround].join(' ')}>
<div className={[_s.default, _s.z4, _s.heightMin58PX, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.posFixed, _s.left0, _s.right0, _s.bottom0, _s.heightMin58PX, _s.width100PC, _s.bgPrimary, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.heightMin58PX, _s.footerChin, _s.justifyContentSpaceAround].join(' ')}>
<Button
backgroundColor='none'
color='secondary'
@@ -52,13 +20,6 @@ class FooterBar extends PureComponent {
icon='home'
iconSize='20px'
/>
<Button
backgroundColor='none'
color='secondary'
to='/search'
icon='search'
iconSize='20px'
/>
<Button
backgroundColor='none'
color='secondary'
@@ -69,15 +30,22 @@ class FooterBar extends PureComponent {
<Button
backgroundColor='none'
color='secondary'
to='/groups'
icon='group'
href='https://chat.gab.com'
icon='chat'
iconSize='20px'
/>
<Button
backgroundColor='none'
color='secondary'
onClick={this.handleSettings}
icon='hamburger'
href='https://trends.gab.com'
icon='trends'
iconSize='20px'
/>
<Button
backgroundColor='none'
color='secondary'
to='/groups'
icon='group'
iconSize='20px'
/>
</div>

32
app/javascript/gabsocial/components/modal/group_members_modal.js Normal file
View File

@@ -0,0 +1,32 @@
import { defineMessages, injectIntl } from 'react-intl'
import ImmutablePureComponent from 'react-immutable-pure-component'
import ModalLayout from './modal_layout'
import GroupCreate from '../../features/group_create'
const messages = defineMessages({
title: { id: 'create_group', defaultMessage: 'Create group' },
})
export default
@injectIntl
class GroupMembersModal extends ImmutablePureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
onClose: PropTypes.func.isRequired,
}
render() {
const { intl, onClose } = this.props
return (
<ModalLayout
title={intl.formatMessage(messages.title)}
width={440}
onClose={onClose}
>
<GroupCreate onCloseModal={onClose} />
</ModalLayout>
)
}
}

103
app/javascript/gabsocial/components/modal/media_modal/media_modal.scss
View File

@@ -1,103 +0,0 @@
.media-modal {
position: relative;
@include size(100%);
&__closer {
@include abs-position(0, 0, 0, 0);
}
&__navigation {
pointer-events: none;
transition: opacity 0.3s linear;
will-change: opacity;
@include abs-position(0, 0, 0, 0);
* {
pointer-events: auto;
}
&.media-modal__navigation--hidden {
opacity: 0;
* {
pointer-events: none;
}
}
}
&__nav {
background: rgba($base-overlay-background, 0.5);
box-sizing: border-box;
border: 0;
color: $primary-text-color;
cursor: pointer;
display: flex;
align-items: center;
font-size: 24px;
height: 20vmax;
margin: auto 0;
padding: 30px 15px;
@include abs-position(0, auto, 0, auto);
&--left {
left: 0;
}
&--right {
right: 0;
}
}
&__meta,
&__pagination {
width: 100%;
text-align: center;
pointer-events: none;
@include abs-position(auto, auto, 20px, 0);
}
&__meta {
&--shifted {
bottom: 62px;
}
a {
text-decoration: none;
font-weight: 500;
color: $ui-secondary-color;
&:hover,
&:focus,
&:active {
text-decoration: underline;
}
}
}
&__page-dot {
display: inline-block;
}
&__button {
background-color: $primary-text-color;
border-radius: 6px;
margin: 10px;
padding: 0;
border: 0;
font-size: 0;
@include size(12px);
&--active {
background-color: $highlight-text-color;
}
}
&__close {
@include abs-position(8px, 8px);
}
}

5
app/javascript/gabsocial/components/modal/modal_root.js
View File

@@ -18,6 +18,7 @@ import {
MODAL_GROUP_CREATE,
MODAL_GROUP_DELETE,
MODAL_GROUP_EDITOR,
MODAL_GROUP_MEMBERS,
MODAL_HASHTAG_TIMELINE_SETTINGS,
MODAL_HOME_TIMELINE_SETTINGS,
MODAL_HOTKEYS,
@@ -51,6 +52,7 @@ import {
GroupCreateModal,
GroupDeleteModal,
GroupEditorModal,
GroupMembersModal,
HashtagTimelineSettingsModal,
HomeTimelineSettingsModal,
HotkeysModal,
@@ -85,6 +87,7 @@ MODAL_COMPONENTS[MODAL_GIF_PICKER] = GifPickerModal
MODAL_COMPONENTS[MODAL_GROUP_CREATE] = GroupCreateModal
MODAL_COMPONENTS[MODAL_GROUP_DELETE] = GroupDeleteModal
MODAL_COMPONENTS[MODAL_GROUP_EDITOR] = GroupEditorModal
MODAL_COMPONENTS[MODAL_GROUP_MEMBERS] = GroupMembersModal
MODAL_COMPONENTS[MODAL_HASHTAG_TIMELINE_SETTINGS] = HashtagTimelineSettingsModal
MODAL_COMPONENTS[MODAL_HOME_TIMELINE_SETTINGS] = HomeTimelineSettingsModal
MODAL_COMPONENTS[MODAL_HOTKEYS] = HotkeysModal
@@ -156,6 +159,8 @@ class ModalRoot extends PureComponent {
const { type, props } = this.props
const visible = !!type
// : todo : init card view if mobile
return (
<ModalBase onClose={this.onClickClose} type={type}>
{

23
app/javascript/gabsocial/components/pull_to_refresher.js Normal file
View File

@@ -0,0 +1,23 @@
import { BREAKPOINT_EXTRA_SMALL } from '../constants'
import Responsive from '../features/ui//util/responsive_component'
import Icon from './icon'
export default class PullToRefresher extends PureComponent {
static propTypes = {
children: PropTypes.any,
}
render() {
const { children } = this.props
return (
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<div className={[_s.default, _s.posAbs, _s.left0, _s.right0, _s.topNeg60PX].join(' ')}>
<Icon id='loading' size='20px' />
</div>
</Responsive>
)
}
}

4
app/javascript/gabsocial/components/scrollable_list.js
View File

@@ -1,7 +1,9 @@
import throttle from 'lodash.throttle'
import { List as ImmutableList } from 'immutable'
import { BREAKPOINT_EXTRA_SMALL } from '../constants'
import IntersectionObserverArticle from './intersection_observer_article'
import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper'
import Responsive from '../features/ui/util/responsive_component'
import Block from './block'
import ColumnIndicator from './column_indicator'
import LoadMore from './load_more'
@@ -17,6 +19,7 @@ export default class ScrollableList extends PureComponent {
static propTypes = {
scrollKey: PropTypes.string.isRequired,
onLoadMore: PropTypes.func,
onReload: PropTypes.func,
isLoading: PropTypes.bool,
showLoading: PropTypes.bool,
hasMore: PropTypes.bool,
@@ -259,3 +262,4 @@ export default class ScrollableList extends PureComponent {
}
}

40
app/javascript/gabsocial/components/status_list.js
View File

@@ -17,15 +17,13 @@ import ColumnIndicator from './column_indicator';
const makeGetStatusIds = () => createSelector([
(state, { type, id }) => state.getIn(['settings', type], ImmutableMap()),
(state, { type, id }) => state.getIn(['timelines', id, 'items'], ImmutableList()),
(state) => state.get('statuses'),
(state) => state.get('statuses'),
], (columnSettings, statusIds, statuses) => {
return statusIds.filter(id => {
if (id === null) return true;
const statusForId = statuses.get(id);
let showStatus = true;
console.log("columnSettings:", columnSettings)
let showStatus = true;
if (columnSettings.getIn(['shows', 'reblog']) === false) {
showStatus = showStatus && statusForId.get('reblog') === null;
@@ -41,12 +39,12 @@ const makeGetStatusIds = () => createSelector([
const mapStateToProps = (state, { timelineId }) => {
if (!timelineId) return {}
const getStatusIds = makeGetStatusIds();
const promotion = promotions.length > 0 && sample(promotions.filter(p => p.timeline_id === timelineId));
const statusIds = getStatusIds(state, {
type: timelineId.substring(0,5) === 'group' ? 'group' : timelineId,
type: timelineId.substring(0, 5) === 'group' ? 'group' : timelineId,
id: timelineId
})
@@ -136,10 +134,14 @@ class StatusList extends ImmutablePureComponent {
}
handleLoadOlder = debounce(() => {
this.props.onLoadMore(this.props.statusIds.size > 0 ? this.props.statusIds.last() : undefined);
this.props.onLoadMore(this.props.statusIds.size > 0 ? this.props.statusIds.last() : undefined)
}, 300, { leading: true })
_selectChild (index, align_top) {
handleReload = debounce(() => {
this.props.onLoadMore()
}, 300, { leading: true })
_selectChild(index, align_top) {
const container = this.node.node;
const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
@@ -164,7 +166,7 @@ class StatusList extends ImmutablePureComponent {
this.node = c;
}
render () {
render() {
const {
statusIds,
featuredStatusIds,
@@ -177,7 +179,7 @@ class StatusList extends ImmutablePureComponent {
promotion,
promotedStatus,
...other
} = this.props
} = this.props
if (isPartial) {
return <ColumnIndicator type='loading' />
@@ -192,15 +194,15 @@ class StatusList extends ImmutablePureComponent {
onClick={onLoadMore}
/>
) : (
<StatusContainer
key={statusId}
id={statusId}
onMoveUp={this.handleMoveUp}
onMoveDown={this.handleMoveDown}
contextType={timelineId}
commentsLimited
/>
))
<StatusContainer
key={statusId}
id={statusId}
onMoveUp={this.handleMoveUp}
onMoveDown={this.handleMoveDown}
contextType={timelineId}
commentsLimited
/>
))
) : null;
if (scrollableContent && featuredStatusIds) {

20
app/javascript/gabsocial/components/timeline_compose_block.js
View File

@@ -2,10 +2,11 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
import ImmutablePropTypes from 'react-immutable-proptypes'
import { injectIntl, defineMessages } from 'react-intl'
import { me } from '../initial_state'
import { BREAKPOINT_EXTRA_SMALL } from '../constants'
import ComposeFormContainer from '../features/compose/containers/compose_form_container'
import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
import Responsive from '../features/ui/util/responsive_component'
import Avatar from './avatar'
import Block from './block'
import Heading from './heading'
const messages = defineMessages({
@@ -42,7 +43,6 @@ class TimelineComposeBlock extends ImmutablePureComponent {
} = this.props
if (modal) {
console.log("modal timeline composer: ", this.props)
return (
<section className={_s.default}>
<div className={[_s.default, _s.flexRow].join(' ')}>
@@ -58,14 +58,16 @@ class TimelineComposeBlock extends ImmutablePureComponent {
classNames={[_s.default, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden, _s.radiusSmall].join(' ')}
classNamesXS={[_s.default, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden].join(' ')}
>
<div className={[_s.default, _s.bgSubtle, _s.borderTop1PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15, _s.py2, _s.alignItemsCenter, _s.flexRow].join(' ')}>
<div className={_s.mr10}>
<Avatar account={account} size={20} noHover />
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
<div className={[_s.default, _s.bgSubtle, _s.borderTop1PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15, _s.py2, _s.alignItemsCenter, _s.flexRow].join(' ')}>
<div className={_s.mr10}>
<Avatar account={account} size={20} noHover />
</div>
<Heading size='h5'>
{intl.formatMessage(messages.createPost)}
</Heading>
</div>
<Heading size='h5'>
{intl.formatMessage(messages.createPost)}
</Heading>
</div>
</Responsive>
<ComposeFormContainer {...rest} />
</ResponsiveClassesComponent>
</section>