Progress on refactor
Update files paths, components
This commit is contained in:
@@ -3,10 +3,10 @@ import { Link } from 'react-router-dom';
|
||||
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 DisplayName from '../display_name';
|
||||
import IconButton from '../icon_button';
|
||||
import { me } from '../../initial_state';
|
||||
|
||||
import './account.scss';
|
||||
|
||||
@@ -122,7 +122,7 @@ class Account extends ImmutablePureComponent {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className='account'>
|
||||
<div className='account__wrapper'>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { makeGetAccount } from '../../selectors';
|
||||
import Avatar from '../avatar';
|
||||
import DisplayName from '../display_name';
|
||||
import { makeGetAccount } from '../../selectors';
|
||||
|
||||
import './autosuggest_account.scss';
|
||||
|
||||
|
||||
@@ -2,10 +2,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import classNames from 'classnames';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import Textarea from 'react-textarea-autosize';
|
||||
import AutosuggestAccount from '../autosuggest_account';
|
||||
import AutosuggestEmoji from '../autosuggest_emoji';
|
||||
import { isRtl } from '../../utils/rtl';
|
||||
import { textAtCursorMatchesToken } from '../../utils/cursor_token_match';
|
||||
import AutosuggestAccount from '../autosuggest_account';
|
||||
import AutosuggestEmoji from '../autosuggest_emoji';
|
||||
|
||||
import './autosuggest_textbox.scss';
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import ColumnHeader from '../column_header';
|
||||
import { isMobile } from '../../utils/is_mobile';
|
||||
import { ColumnHeader } from '../column_header';
|
||||
import ColumnBackButton from '../column_back_button';
|
||||
|
||||
import './column.scss';
|
||||
@@ -23,9 +23,9 @@ export default class Column extends PureComponent {
|
||||
|
||||
const showHeading = heading && (!hideHeadingOnMobile || (hideHeadingOnMobile && !isMobile(window.innerWidth)));
|
||||
const columnHeaderId = showHeading && heading.replace(/ /g, '-');
|
||||
// const header = showHeading && (
|
||||
// <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} />
|
||||
// );
|
||||
const header = showHeading && (
|
||||
<ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} />
|
||||
);
|
||||
|
||||
return (
|
||||
<div role='region' aria-labelledby={columnHeaderId} className='column'>
|
||||
|
||||
@@ -4,8 +4,8 @@ import classNames from 'classnames';
|
||||
import { injectIntl, defineMessages } from 'react-intl';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { createSelector } from 'reselect';
|
||||
import Icon from '../icon';
|
||||
import { fetchLists } from '../../actions/lists';
|
||||
import Icon from '../icon';
|
||||
|
||||
import './column_header.scss';
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import VerifiedIcon from '../verified_icon/verified_icon';
|
||||
import VerifiedIcon from '../verified_icon';
|
||||
|
||||
import './display_name.scss';
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import IconButton from '../icon_button';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import IconButton from '../icon_button';
|
||||
|
||||
import './domain.scss';
|
||||
|
||||
|
||||
@@ -3,8 +3,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import detectPassiveEvents from 'detect-passive-events';
|
||||
import Overlay from 'react-overlays/lib/Overlay';
|
||||
import spring from 'react-motion/lib/spring';
|
||||
import IconButton from '../icon_button';
|
||||
import Motion from '../../features/ui/util/optional_motion';
|
||||
import IconButton from '../icon_button';
|
||||
|
||||
import './dropdown_menu.scss';
|
||||
|
||||
|
||||
58
app/javascript/gabsocial/components/footer_bar/footer_bar.js
Normal file
58
app/javascript/gabsocial/components/footer_bar/footer_bar.js
Normal file
@@ -0,0 +1,58 @@
|
||||
import { NavLink, withRouter } from 'react-router-dom';
|
||||
import { FormattedMessage, injectIntl } from 'react-intl';
|
||||
import NotificationCounter from '../notification_counter';
|
||||
import { me } from '../../initial_state';
|
||||
|
||||
import './footer_bar.scss';
|
||||
|
||||
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'/>
|
||||
<NotificationCounter />
|
||||
<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />
|
||||
</NavLink>,
|
||||
<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>,
|
||||
<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>,
|
||||
]
|
||||
|
||||
export default
|
||||
@injectIntl
|
||||
@withRouter
|
||||
class FooterBar extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
render () {
|
||||
const { intl: { formatMessage } } = this.props;
|
||||
|
||||
if (!me) return null;
|
||||
|
||||
return (
|
||||
<div className='footer-bar'>
|
||||
<div className='footer-bar__container'>
|
||||
{
|
||||
links.map((link) =>
|
||||
React.cloneElement(link, {
|
||||
key: link.props.to,
|
||||
'aria-label': formatMessage({
|
||||
id: link.props['data-preview-title-id']
|
||||
})
|
||||
}))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
.footer-bar {
|
||||
display: block;
|
||||
position: fixed;
|
||||
background: #000;
|
||||
height: 58px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
transition: transform 0.2s ease;
|
||||
overflow: hidden;
|
||||
padding-bottom: 0;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
@media screen and (min-width: 895px) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
margin: 0;
|
||||
min-width: 36px;
|
||||
height: 58px;
|
||||
padding-top: 4px;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-top: 2px solid transparent;
|
||||
|
||||
&.active {
|
||||
border-top-color: $gab-brand-default;
|
||||
}
|
||||
|
||||
& > span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
1
app/javascript/gabsocial/components/footer_bar/index.js
Normal file
1
app/javascript/gabsocial/components/footer_bar/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './footer_bar';
|
||||
@@ -2,7 +2,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { shortNumberFormat } from '../utils/numbers';
|
||||
import { shortNumberFormat } from '../../utils/numbers';
|
||||
|
||||
const messages = defineMessages({
|
||||
members: { id: 'groups.card.members', defaultMessage: 'Members' },
|
||||
@@ -1,6 +1,6 @@
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import { invitesEnabled, version, repository, source_url, me } from '../../initial_state';
|
||||
import { openModal } from '../../actions/modal';
|
||||
import { invitesEnabled, version, repository, source_url, me } from '../../initial_state';
|
||||
|
||||
import './link_footer.scss';
|
||||
|
||||
|
||||
@@ -4,14 +4,13 @@ import { is } from 'immutable';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
import { decode } from 'blurhash';
|
||||
import { autoPlayGif, displayMedia } from '../../initial_state';
|
||||
import { isIOS } from '../../utils/is_mobile';
|
||||
import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../../utils/media_aspect_ratio';
|
||||
import { autoPlayGif, displayMedia } from '../../initial_state';
|
||||
import IconButton from '../icon_button';
|
||||
|
||||
import './media_gallery.scss';
|
||||
|
||||
|
||||
const messages = defineMessages({
|
||||
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
|
||||
warning: { id: 'status.sensitive_warning', defaultMessage: 'Sensitive content' },
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { injectIntl, defineMessages } from 'react-intl';
|
||||
import ToggleSwitch from '../../toggle_switch';
|
||||
import Button from '../../button';
|
||||
import { closeModal } from '../../../actions/modal';
|
||||
import { muteAccount } from '../../../actions/accounts';
|
||||
import { toggleHideNotifications } from '../../../actions/mutes';
|
||||
import ToggleSwitch from '../../toggle_switch';
|
||||
import Button from '../../button';
|
||||
|
||||
const messages = defineMessages({
|
||||
muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { me } from '../initial_state';
|
||||
import IconButton from './icon_button';
|
||||
import Icon from './icon';
|
||||
|
||||
const messages = defineMessages({
|
||||
close: { id: 'lightbox.close', defaultMessage: 'Close' },
|
||||
});
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
account: state.getIn(['accounts', me]),
|
||||
};
|
||||
};
|
||||
|
||||
class ProUpgradeModal extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
onClickClose = () => {
|
||||
this.props.onClose('PRO_UPGRADE');
|
||||
};
|
||||
|
||||
render () {
|
||||
const { intl } = this.props;
|
||||
|
||||
return (
|
||||
<div className='modal-root__modal compose-modal pro-upgrade-modal'>
|
||||
<div className='compose-modal__header'>
|
||||
<h3 className='compose-modal__header__title'><FormattedMessage id='promo.gab_pro' defaultMessage='Upgrade to GabPRO' /></h3>
|
||||
<IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
|
||||
</div>
|
||||
<div className='compose-modal__content pro-upgrade-modal__content'>
|
||||
<div>
|
||||
<span className="pro-upgrade-modal__text">
|
||||
<FormattedMessage id='pro_upgrade_modal.text' defaultMessage='Gab is fully funded by people like you. Please consider supporting us on our mission to defend free expression online for all people.' />
|
||||
<FormattedMessage id='pro_upgrade_modal.benefits' defaultMessage='Here are just some of the benefits that thousands of GabPRO members receive:' />
|
||||
</span>
|
||||
<ul className="pro-upgrade-modal__list">
|
||||
<li>Schedule Posts</li>
|
||||
<li>Get Verified</li>
|
||||
<li>Create Groups</li>
|
||||
<li>Larger Video and Image Uploads</li>
|
||||
<li>Receive the PRO Badge</li>
|
||||
<li>Remove in-feed promotions</li>
|
||||
<li>More value being added daily!</li>
|
||||
</ul>
|
||||
<a href='https://pro.gab.com' className='pro-upgrade-modal__button button'>
|
||||
<Icon id='arrow-up' fixedWidth/>
|
||||
<FormattedMessage id='promo.gab_pro' defaultMessage='Upgrade to GabPRO' />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default injectIntl(connect(mapStateToProps)(ProUpgradeModal));
|
||||
@@ -2,11 +2,11 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import { OrderedSet } from 'immutable';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import ToggleSwitch from '../../toggle_switch';
|
||||
import { changeReportComment, changeReportForward, submitReport } from '../../../actions/reports';
|
||||
import { expandAccountTimeline } from '../../../actions/timelines';
|
||||
import { makeGetAccount } from '../../../selectors';
|
||||
import StatusCheckBox from '../../status_check_box';
|
||||
import ToggleSwitch from '../../toggle_switch';
|
||||
import Button from '../../button';
|
||||
import IconButton from '../../icon_button';
|
||||
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import StatusRevisionListContainer from '../../../containers/status_revision_list_container';
|
||||
import IconButton from '../../../components/icon_button';
|
||||
|
||||
const messages = defineMessages({
|
||||
close: { id: 'lightbox.close', defaultMessage: 'Close' },
|
||||
});
|
||||
|
||||
export default @injectIntl
|
||||
class StatusRevisionModal extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
status: ImmutablePropTypes.map.isRequired
|
||||
};
|
||||
|
||||
render () {
|
||||
const { intl, onClose, status } = this.props;
|
||||
|
||||
return (
|
||||
<div className='modal-root__modal status-revisions-root'>
|
||||
<div className='status-revisions'>
|
||||
<div className='status-revisions__header'>
|
||||
<h3 className='status-revisions__header__title'><FormattedMessage id='status_revisions.heading' defaultMessage='Revision History' /></h3>
|
||||
<IconButton className='status-revisions__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
|
||||
</div>
|
||||
<div className='status-revisions__content'>
|
||||
<StatusRevisionListContainer id={status.get('id')} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -12,9 +12,6 @@ import {
|
||||
ComposeModal,
|
||||
UnauthorizedModal,
|
||||
} from '../modal';
|
||||
|
||||
import ModalLoading from '../modal_loading';
|
||||
|
||||
import {
|
||||
MuteModal,
|
||||
ReportModal,
|
||||
@@ -23,6 +20,7 @@ import {
|
||||
ListAdder,
|
||||
StatusRevisionModal,
|
||||
} from '../../features/ui/util/async-components';
|
||||
import ModalLoading from '../modal_loading';
|
||||
|
||||
const MODAL_COMPONENTS = {
|
||||
'MEDIA': () => Promise.resolve({ default: MediaModal }),
|
||||
|
||||
@@ -7,7 +7,7 @@ import spring from 'react-motion/lib/spring';
|
||||
import Motion from '../../features/ui/util/optional_motion';
|
||||
import { vote, fetchPoll } from '../../actions/polls';
|
||||
import emojify from '../emoji/emoji';
|
||||
import RelativeTimestamp from '../relative_timestamp/relative_timestamp';
|
||||
import RelativeTimestamp from '../relative_timestamp';
|
||||
import Button from '../button';
|
||||
|
||||
import './poll.scss';
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from './progress_panel';
|
||||
@@ -0,0 +1,28 @@
|
||||
import { monthlyExpensesComplete } from '../../initial_state';
|
||||
|
||||
export default class ProgressPanel extends React.PureComponent {
|
||||
render() {
|
||||
if (!monthlyExpensesComplete) return null;
|
||||
|
||||
const completed = Math.min(monthlyExpensesComplete, 100);
|
||||
const style = {
|
||||
width: `${completed}%`,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='wtf-panel progress-panel'>
|
||||
<div className='wtf-panel-header progress-panel-header'>
|
||||
<div className='wtf-panel-header__label'>Gab's Operational Expenses</div>
|
||||
</div>
|
||||
<div className='wtf-panel__content progress-panel__content'>
|
||||
<span className='progress-panel__text'>We are 100% funded by you.</span>
|
||||
<div className='progress-panel__bar-container'>
|
||||
<a className='progress-panel__bar' style={style} href='https://shop.dissenter.com/category/donations'>
|
||||
<span className='progress-panel__bar__text'>{completed}% covered this month</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,9 @@
|
||||
import { throttle } from 'lodash';
|
||||
import { List as ImmutableList } from 'immutable';
|
||||
import ColumnIndicator from '../column_indicator';
|
||||
import IntersectionObserverArticleContainer from '../../containers/intersection_observer_article_container';
|
||||
import LoadMore from '../load_more';
|
||||
import IntersectionObserverWrapper from '../../features/ui/util/intersection_observer_wrapper';
|
||||
import ColumnIndicator from '../column_indicator';
|
||||
import LoadMore from '../load_more';
|
||||
|
||||
import './scrollable_list.scss';
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ export default class SearchPopout extends PureComponent {
|
||||
|
||||
render() {
|
||||
const { style } = this.props;
|
||||
|
||||
|
||||
return (
|
||||
<div className='search-popout-container' style={{ ...style, position: 'absolute', zIndex: 1000 }}>
|
||||
<Motion defaultStyle={{ opacity: 0, scaleX: 1, scaleY: 1 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from './sidebar_menu';
|
||||
@@ -3,15 +3,17 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { injectIntl, defineMessages } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
import Avatar from './avatar';
|
||||
import IconButton from './icon_button';
|
||||
import Icon from './icon';
|
||||
import DisplayName from './display_name';
|
||||
import { closeSidebar } from '../actions/sidebar';
|
||||
import { shortNumberFormat } from '../utils/numbers';
|
||||
import { me } from '../initial_state';
|
||||
import { makeGetAccount } from '../selectors';
|
||||
import ProgressPanel from '../features/ui/components/progress_panel';
|
||||
import Avatar from '../avatar';
|
||||
import IconButton from '../icon_button';
|
||||
import Icon from '../icon';
|
||||
import DisplayName from '../display_name';
|
||||
import { closeSidebar } from '../../actions/sidebar';
|
||||
import { shortNumberFormat } from '../../utils/numbers';
|
||||
import { me } from '../../initial_state';
|
||||
import { makeGetAccount } from '../../selectors';
|
||||
import ProgressPanel from '../progress_panel';
|
||||
|
||||
import './sidebar_menu.scss';
|
||||
|
||||
const messages = defineMessages({
|
||||
followers: { id: 'account.followers', defaultMessage: 'Followers' },
|
||||
@@ -0,0 +1,174 @@
|
||||
.sidebar-menu {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
flex-direction: column;
|
||||
width: 275px;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: $gab-background-container;
|
||||
transform: translateX(-275px);
|
||||
transition: all 0.15s linear;
|
||||
z-index: 10001;
|
||||
|
||||
body.theme-gabsocial-light & {
|
||||
background: $gab-background-container-light;
|
||||
}
|
||||
|
||||
&__root {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10000;
|
||||
background-color: transparent;
|
||||
transition: background-color 0.2s linear;
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex: 1 1;
|
||||
flex-direction: column;
|
||||
padding-bottom: 40px;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
&__section {
|
||||
display: block;
|
||||
margin: 4px 0;
|
||||
border-top: 1px solid lighten($ui-base-color, 4%);
|
||||
|
||||
&--borderless {
|
||||
margin: 0;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
width: 90vw;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu__root--visible {
|
||||
display: block;
|
||||
|
||||
.sidebar-menu {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.sidebar-menu__wrapper {
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu-header {
|
||||
display: flex;
|
||||
height: 46px;
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
|
||||
&__title {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu-profile {
|
||||
display: block;
|
||||
padding: 14px 18px;
|
||||
|
||||
&__avatar {
|
||||
display: block;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
&__name {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
|
||||
.display-name__account {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&__stats {
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu-profile-stat {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
&__value {
|
||||
display: flex;
|
||||
margin-right: 3px;
|
||||
font-weight: 700;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: flex;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu-item {
|
||||
display: flex;
|
||||
padding: 16px 18px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: $primary-text-color;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
height: 50px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($gab-brand-default, 0.1);
|
||||
|
||||
.fa {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.fa {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&__title {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -5,18 +5,18 @@ import { injectIntl, FormattedMessage } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { HotKeys } from 'react-hotkeys';
|
||||
import classNames from 'classnames';
|
||||
import { displayMedia } from '../../initial_state';
|
||||
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 Icon from '../icon';
|
||||
import Poll from '../poll';
|
||||
import StatusContent from '../status_content';
|
||||
import StatusActionBar from '../status_action_bar';
|
||||
import Card from '../../features/status/components/card';
|
||||
import { MediaGallery, Video } from '../../features/ui/util/async-components';
|
||||
import { displayMedia } from '../../initial_state';
|
||||
import Icon from '../icon';
|
||||
import Poll from '../poll';
|
||||
|
||||
import './status.scss';
|
||||
|
||||
@@ -483,9 +483,9 @@ class Status extends ImmutablePureComponent {
|
||||
|
||||
{media}
|
||||
|
||||
{status.get('quote') && <StatusQuote
|
||||
{ /* status.get('quote') && <StatusQuote
|
||||
id={status.get('quote')}
|
||||
/>}
|
||||
/> */ }
|
||||
|
||||
{showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && (
|
||||
<button className='status__content__read-more-button' onClick={this.handleClick}>
|
||||
|
||||
@@ -3,10 +3,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { openModal } from '../../actions/modal';
|
||||
import { me, isStaff } from '../../initial_state';
|
||||
import DropdownMenuContainer from '../../containers/dropdown_menu_container';
|
||||
import IconButton from '../icon_button';
|
||||
import { me, isStaff } from '../../initial_state';
|
||||
import { openModal } from '../../actions/modal';
|
||||
|
||||
import './status_action_bar.scss';
|
||||
|
||||
|
||||
@@ -2,10 +2,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { Set as ImmutableSet } from 'immutable';
|
||||
import noop from 'lodash/noop';
|
||||
import StatusContent from '../status_content';
|
||||
import { toggleStatusReport } from '../../actions/reports';
|
||||
import { MediaGallery, Video } from '../../features/ui/util/async-components';
|
||||
import Bundle from '../../features/ui/util/bundle';
|
||||
import { toggleStatusReport } from '../../actions/reports';
|
||||
import StatusContent from '../status_content';
|
||||
import ToggleSwitch from '../toggle_switch';
|
||||
|
||||
import './status_check_box.scss';
|
||||
|
||||
@@ -2,11 +2,10 @@ import { Fragment } from 'react';
|
||||
import { debounce } from 'lodash';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import LoadMore from '../load_more';
|
||||
import StatusContainer from '../../containers/status_container';
|
||||
import ScrollableList from '../scrollable_list';
|
||||
import TimelineQueueButtonHeader from '../timeline_queue_button_header';
|
||||
import ColumnIndicator from '../column_indicator';
|
||||
import StatusContainer from '../../containers/status_container';
|
||||
|
||||
export default class StatusList extends ImmutablePureComponent {
|
||||
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import StatusContent from './status_content';
|
||||
import DisplayName from './display_name';
|
||||
import StatusContent from '../status_content';
|
||||
import DisplayName from '../display_name';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
|
||||
import './status_quote.scss';
|
||||
|
||||
const mapStateToProps = (state, { id }) => ({
|
||||
status: state.getIn(['statuses', id]),
|
||||
account: state.getIn(['accounts', state.getIn(['statuses', id, 'account'])]),
|
||||
@@ -0,0 +1,40 @@
|
||||
|
||||
import { injectIntl } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import ModalLoading from './modal_loading';
|
||||
import RelativeTimestamp from './relative_timestamp';
|
||||
|
||||
export default @injectIntl
|
||||
class StatusRevisionsList extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
loading: PropTypes.bool.isRequired,
|
||||
error: PropTypes.object,
|
||||
data: PropTypes.array
|
||||
};
|
||||
|
||||
render() {
|
||||
const { loading, error, data } = this.props;
|
||||
|
||||
if (loading || !data) return <ModalLoading />;
|
||||
|
||||
if (error) return (
|
||||
<div className='status-revisions-list'>
|
||||
<div className='status-revisions-list__error'>An error occured</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='status-revisions-list'>
|
||||
{data.map((revision, i) => (
|
||||
<div key={i} className='status-revisions-list__item'>
|
||||
<div className='status-revisions-list__item__timestamp'>
|
||||
<RelativeTimestamp timestamp={revision.created_at} />
|
||||
</div>
|
||||
<div className='status-revisions-list__item__text'>{revision.text}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -2,12 +2,12 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { NavLink, withRouter } from 'react-router-dom';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { me } from '../../initial_state';
|
||||
import NotificationsCounter from '../notification_counter';
|
||||
import SearchContainer from '../../features/compose/containers/search_container';
|
||||
import Avatar from '../avatar';
|
||||
import ActionBar from '../../features/compose/components/action_bar';
|
||||
import { openModal } from '../../actions/modal';
|
||||
import { me } from '../../initial_state';
|
||||
import SearchContainer from '../../features/compose/containers/search_container';
|
||||
import ActionBar from '../../features/compose/components/action_bar';
|
||||
import Avatar from '../avatar';
|
||||
import NotificationsCounter from '../notification_counter';
|
||||
import GabLogo from './assets/gab_logo/gab_logo';
|
||||
import {
|
||||
GroupIcon,
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import Avatar from '../avatar';
|
||||
import ComposeFormContainer from '../../features/compose/containers/compose_form_container';
|
||||
import { me } from '../../initial_state';
|
||||
import ComposeFormContainer from '../../features/compose/containers/compose_form_container';
|
||||
import Avatar from '../avatar';
|
||||
|
||||
import './timeline_compose_block.scss';
|
||||
|
||||
|
||||
@@ -2,8 +2,8 @@ import { Sparklines, SparklinesCurve } from 'react-sparklines';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import Permalink from '../permalink/permalink';
|
||||
import { shortNumberFormat } from '../../utils/numbers';
|
||||
import Permalink from '../permalink';
|
||||
|
||||
import './trending_item.scss';
|
||||
|
||||
@@ -15,7 +15,7 @@ export default class TrendingItem extends ImmutablePureComponent {
|
||||
|
||||
render() {
|
||||
const { hashtag } = this.props;
|
||||
|
||||
|
||||
return (
|
||||
<div className='trending-item'>
|
||||
<div className='trending-item__text'>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import Motion from '../../features/ui/util/optional_motion';
|
||||
import spring from 'react-motion/lib/spring';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import spring from 'react-motion/lib/spring';
|
||||
import Motion from '../../features/ui/util/optional_motion';
|
||||
|
||||
import './upload_area.scss';
|
||||
|
||||
|
||||
@@ -4,8 +4,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { autoPlayGif, me } from '../../initial_state';
|
||||
import { makeGetAccount } from '../../selectors';
|
||||
import Avatar from '../avatar';
|
||||
import { shortNumberFormat } from '../../utils/numbers';
|
||||
import Avatar from '../avatar';
|
||||
|
||||
import './user_panel.scss';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user