Commit cb55ef9f authored by mgabdev's avatar mgabdev

Progress on refactor

Update files paths, components
parent c0f0d4f0
...@@ -33,7 +33,7 @@ export default getState => axios.create({ ...@@ -33,7 +33,7 @@ export default getState => axios.create({
transformResponse: [function (data) { transformResponse: [function (data) {
try { try {
return JSON.parse(data); return JSON.parse(data);
} catch(Exception) { } catch (Exception) {
return data; return data;
} }
}], }],
......
...@@ -3,10 +3,10 @@ import { Link } from 'react-router-dom'; ...@@ -3,10 +3,10 @@ import { Link } from 'react-router-dom';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { me } from '../../initial_state';
import Avatar from '../avatar/avatar'; import Avatar from '../avatar/avatar';
import DisplayName from '../display_name'; import DisplayName from '../display_name';
import IconButton from '../icon_button'; import IconButton from '../icon_button';
import { me } from '../../initial_state';
import './account.scss'; import './account.scss';
...@@ -122,7 +122,7 @@ class Account extends ImmutablePureComponent { ...@@ -122,7 +122,7 @@ class Account extends ImmutablePureComponent {
</div> </div>
); );
} }
return ( return (
<div className='account'> <div className='account'>
<div className='account__wrapper'> <div className='account__wrapper'>
......
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { makeGetAccount } from '../../selectors';
import Avatar from '../avatar'; import Avatar from '../avatar';
import DisplayName from '../display_name'; import DisplayName from '../display_name';
import { makeGetAccount } from '../../selectors';
import './autosuggest_account.scss'; import './autosuggest_account.scss';
......
...@@ -2,10 +2,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; ...@@ -2,10 +2,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import classNames from 'classnames'; import classNames from 'classnames';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import Textarea from 'react-textarea-autosize'; import Textarea from 'react-textarea-autosize';
import AutosuggestAccount from '../autosuggest_account';
import AutosuggestEmoji from '../autosuggest_emoji';
import { isRtl } from '../../utils/rtl'; import { isRtl } from '../../utils/rtl';
import { textAtCursorMatchesToken } from '../../utils/cursor_token_match'; import { textAtCursorMatchesToken } from '../../utils/cursor_token_match';
import AutosuggestAccount from '../autosuggest_account';
import AutosuggestEmoji from '../autosuggest_emoji';
import './autosuggest_textbox.scss'; import './autosuggest_textbox.scss';
......
import ColumnHeader from '../column_header';
import { isMobile } from '../../utils/is_mobile'; import { isMobile } from '../../utils/is_mobile';
import { ColumnHeader } from '../column_header';
import ColumnBackButton from '../column_back_button'; import ColumnBackButton from '../column_back_button';
import './column.scss'; import './column.scss';
...@@ -23,9 +23,9 @@ export default class Column extends PureComponent { ...@@ -23,9 +23,9 @@ export default class Column extends PureComponent {
const showHeading = heading && (!hideHeadingOnMobile || (hideHeadingOnMobile && !isMobile(window.innerWidth))); const showHeading = heading && (!hideHeadingOnMobile || (hideHeadingOnMobile && !isMobile(window.innerWidth)));
const columnHeaderId = showHeading && heading.replace(/ /g, '-'); const columnHeaderId = showHeading && heading.replace(/ /g, '-');
// const header = showHeading && ( const header = showHeading && (
// <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} /> <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} />
// ); );
return ( return (
<div role='region' aria-labelledby={columnHeaderId} className='column'> <div role='region' aria-labelledby={columnHeaderId} className='column'>
......
...@@ -4,8 +4,8 @@ import classNames from 'classnames'; ...@@ -4,8 +4,8 @@ import classNames from 'classnames';
import { injectIntl, defineMessages } from 'react-intl'; import { injectIntl, defineMessages } from 'react-intl';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import Icon from '../icon';
import { fetchLists } from '../../actions/lists'; import { fetchLists } from '../../actions/lists';
import Icon from '../icon';
import './column_header.scss'; import './column_header.scss';
......
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import VerifiedIcon from '../verified_icon/verified_icon'; import VerifiedIcon from '../verified_icon';
import './display_name.scss'; import './display_name.scss';
......
import IconButton from '../icon_button';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import IconButton from '../icon_button';
import './domain.scss'; import './domain.scss';
......
...@@ -3,8 +3,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; ...@@ -3,8 +3,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import detectPassiveEvents from 'detect-passive-events'; import detectPassiveEvents from 'detect-passive-events';
import Overlay from 'react-overlays/lib/Overlay'; import Overlay from 'react-overlays/lib/Overlay';
import spring from 'react-motion/lib/spring'; import spring from 'react-motion/lib/spring';
import IconButton from '../icon_button';
import Motion from '../../features/ui/util/optional_motion'; import Motion from '../../features/ui/util/optional_motion';
import IconButton from '../icon_button';
import './dropdown_menu.scss'; import './dropdown_menu.scss';
......
import { NavLink, withRouter } from 'react-router-dom'; import { NavLink, withRouter } from 'react-router-dom';
import { FormattedMessage, injectIntl } from 'react-intl'; import { FormattedMessage, injectIntl } from 'react-intl';
import NotificationCounter from '../../../components/notification_counter'; import NotificationCounter from '../notification_counter';
import { me } from '../../../initial_state'; import { me } from '../../initial_state';
import './footer_bar.scss';
const links = [ const links = [
<NavLink key='pr1' className='footer-bar__link' to='/home' data-preview-title-id='column.home'> <NavLink key='pr1' className='footer-bar__link' to='/home' data-preview-title-id='column.home'>
......
.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;
}
}
}
\ No newline at end of file
export { default } from './footer_bar';
\ No newline at end of file
...@@ -2,7 +2,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; ...@@ -2,7 +2,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { shortNumberFormat } from '../utils/numbers'; import { shortNumberFormat } from '../../utils/numbers';
const messages = defineMessages({ const messages = defineMessages({
members: { id: 'groups.card.members', defaultMessage: 'Members' }, members: { id: 'groups.card.members', defaultMessage: 'Members' },
......
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import { invitesEnabled, version, repository, source_url, me } from '../../initial_state';
import { openModal } from '../../actions/modal'; import { openModal } from '../../actions/modal';
import { invitesEnabled, version, repository, source_url, me } from '../../initial_state';
import './link_footer.scss'; import './link_footer.scss';
......
...@@ -4,14 +4,13 @@ import { is } from 'immutable'; ...@@ -4,14 +4,13 @@ import { is } from 'immutable';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import classNames from 'classnames'; import classNames from 'classnames';
import { decode } from 'blurhash'; import { decode } from 'blurhash';
import { autoPlayGif, displayMedia } from '../../initial_state';
import { isIOS } from '../../utils/is_mobile'; import { isIOS } from '../../utils/is_mobile';
import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../../utils/media_aspect_ratio'; import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../../utils/media_aspect_ratio';
import { autoPlayGif, displayMedia } from '../../initial_state';
import IconButton from '../icon_button'; import IconButton from '../icon_button';
import './media_gallery.scss'; import './media_gallery.scss';
const messages = defineMessages({ const messages = defineMessages({
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' }, toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
warning: { id: 'status.sensitive_warning', defaultMessage: 'Sensitive content' }, warning: { id: 'status.sensitive_warning', defaultMessage: 'Sensitive content' },
......
import { injectIntl, defineMessages } from 'react-intl'; import { injectIntl, defineMessages } from 'react-intl';
import ToggleSwitch from '../../toggle_switch';
import Button from '../../button';
import { closeModal } from '../../../actions/modal'; import { closeModal } from '../../../actions/modal';
import { muteAccount } from '../../../actions/accounts'; import { muteAccount } from '../../../actions/accounts';
import { toggleHideNotifications } from '../../../actions/mutes'; import { toggleHideNotifications } from '../../../actions/mutes';
import ToggleSwitch from '../../toggle_switch';
import Button from '../../button';
const messages = defineMessages({ const messages = defineMessages({
muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' }, muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
......
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { me } from '../../../initial_state'; import { me } from '../initial_state';
import IconButton from '../../../components/icon_button'; import IconButton from './icon_button';
import Icon from '../../../components/icon'; import Icon from './icon';
const messages = defineMessages({ const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' }, close: { id: 'lightbox.close', defaultMessage: 'Close' },
......
...@@ -2,11 +2,11 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; ...@@ -2,11 +2,11 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import { OrderedSet } from 'immutable'; import { OrderedSet } from 'immutable';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import ToggleSwitch from '../../toggle_switch';
import { changeReportComment, changeReportForward, submitReport } from '../../../actions/reports'; import { changeReportComment, changeReportForward, submitReport } from '../../../actions/reports';
import { expandAccountTimeline } from '../../../actions/timelines'; import { expandAccountTimeline } from '../../../actions/timelines';
import { makeGetAccount } from '../../../selectors'; import { makeGetAccount } from '../../../selectors';
import StatusCheckBox from '../../status_check_box'; import StatusCheckBox from '../../status_check_box';
import ToggleSwitch from '../../toggle_switch';
import Button from '../../button'; import Button from '../../button';
import IconButton from '../../icon_button'; import IconButton from '../../icon_button';
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import StatusRevisionListContainer from '../containers/status_revision_list_container'; import StatusRevisionListContainer from '../../../containers/status_revision_list_container';
import IconButton from '../../../components/icon_button'; import IconButton from '../../../components/icon_button';
const messages = defineMessages({ const messages = defineMessages({
......
...@@ -12,9 +12,6 @@ import { ...@@ -12,9 +12,6 @@ import {
ComposeModal, ComposeModal,
UnauthorizedModal, UnauthorizedModal,
} from '../modal'; } from '../modal';
import ModalLoading from '../modal_loading';
import { import {
MuteModal, MuteModal,
ReportModal, ReportModal,
...@@ -23,6 +20,7 @@ import { ...@@ -23,6 +20,7 @@ import {
ListAdder, ListAdder,
StatusRevisionModal, StatusRevisionModal,
} from '../../features/ui/util/async-components'; } from '../../features/ui/util/async-components';
import ModalLoading from '../modal_loading';
const MODAL_COMPONENTS = { const MODAL_COMPONENTS = {
'MEDIA': () => Promise.resolve({ default: MediaModal }), 'MEDIA': () => Promise.resolve({ default: MediaModal }),
......
...@@ -7,7 +7,7 @@ import spring from 'react-motion/lib/spring'; ...@@ -7,7 +7,7 @@ import spring from 'react-motion/lib/spring';
import Motion from '../../features/ui/util/optional_motion'; import Motion from '../../features/ui/util/optional_motion';
import { vote, fetchPoll } from '../../actions/polls'; import { vote, fetchPoll } from '../../actions/polls';
import emojify from '../emoji/emoji'; import emojify from '../emoji/emoji';
import RelativeTimestamp from '../relative_timestamp/relative_timestamp'; import RelativeTimestamp from '../relative_timestamp';
import Button from '../button'; import Button from '../button';
import './poll.scss'; import './poll.scss';
......
export { default } from './progress_panel';
\ No newline at end of file
import { monthlyExpensesComplete } from '../../../initial_state'; import { monthlyExpensesComplete } from '../../initial_state';
export default class ProgressPanel extends React.PureComponent { export default class ProgressPanel extends React.PureComponent {
render() { render() {
......
import { throttle } from 'lodash'; import { throttle } from 'lodash';
import { List as ImmutableList } from 'immutable'; import { List as ImmutableList } from 'immutable';
import ColumnIndicator from '../column_indicator';
import IntersectionObserverArticleContainer from '../../containers/intersection_observer_article_container'; import IntersectionObserverArticleContainer from '../../containers/intersection_observer_article_container';
import LoadMore from '../load_more';
import IntersectionObserverWrapper from '../../features/ui/util/intersection_observer_wrapper'; import IntersectionObserverWrapper from '../../features/ui/util/intersection_observer_wrapper';
import ColumnIndicator from '../column_indicator';
import LoadMore from '../load_more';
import './scrollable_list.scss'; import './scrollable_list.scss';
......
...@@ -13,7 +13,7 @@ export default class SearchPopout extends PureComponent { ...@@ -13,7 +13,7 @@ export default class SearchPopout extends PureComponent {
render() { render() {
const { style } = this.props; const { style } = this.props;
return ( return (
<div className='search-popout-container' style={{ ...style, position: 'absolute', zIndex: 1000 }}> <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 }) }}> <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 }) }}>
......
export { default } from './sidebar_menu';
\ No newline at end of file
...@@ -3,15 +3,17 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; ...@@ -3,15 +3,17 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { injectIntl, defineMessages } from 'react-intl'; import { injectIntl, defineMessages } from 'react-intl';
import classNames from 'classnames'; import classNames from 'classnames';
import Avatar from './avatar'; import Avatar from '../avatar';
import IconButton from './icon_button'; import IconButton from '../icon_button';
import Icon from './icon'; import Icon from '../icon';
import DisplayName from './display_name'; import DisplayName from '../display_name';
import { closeSidebar } from '../actions/sidebar'; import { closeSidebar } from '../../actions/sidebar';
import { shortNumberFormat } from '../utils/numbers'; import { shortNumberFormat } from '../../utils/numbers';
import { me } from '../initial_state'; import { me } from '../../initial_state';
import { makeGetAccount } from '../selectors'; import { makeGetAccount } from '../../selectors';
import ProgressPanel from '../features/ui/components/progress_panel'; import ProgressPanel from '../progress_panel';
import './sidebar_menu.scss';
const messages = defineMessages({ const messages = defineMessages({
followers: { id: 'account.followers', defaultMessage: 'Followers' }, followers: { id: 'account.followers', defaultMessage: 'Followers' },
......
.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;
}
}