From cb55ef9f042e9dc53f766f771d257b65cf4c12ef Mon Sep 17 00:00:00 2001 From: mgabdev <> Date: Wed, 29 Jan 2020 16:53:33 -0500 Subject: [PATCH] Progress on refactor Update files paths, components --- app/javascript/gabsocial/api.js | 2 +- .../gabsocial/components/account/account.js | 4 +- .../autosuggest_account.js | 2 +- .../autosuggest_textbox.js | 4 +- .../gabsocial/components/column/column.js | 8 +- .../column_header/home_column_header.js | 2 +- .../components/display_name/display_name.js | 2 +- .../gabsocial/components/domain/domain.js | 2 +- .../components/dropdown_menu/dropdown_menu.js | 2 +- .../footer_bar}/footer_bar.js | 6 +- .../components/footer_bar/footer_bar.scss | 45 +++++ .../gabsocial/components/footer_bar/index.js | 1 + .../{ => group_list_item}/group_list_item.js | 2 +- .../components/group_list_item/index.js | 0 .../components/link_footer/link_footer.js | 2 +- .../components/media_gallery/media_gallery.js | 3 +- .../components/modal/mute_modal/mute_modal.js | 4 +- .../modal/pro_upgrade_modal/index.js | 0 .../pro_upgrade_modal}/pro_upgrade_modal.js | 6 +- .../modal/report_modal/report_modal.js | 2 +- .../status_revision_modal.js | 2 +- .../components/modal_root/modal_root.js | 4 +- .../gabsocial/components/poll/poll.js | 2 +- .../components/progress_panel/index.js | 1 + .../progress_panel}/progress_panel.js | 2 +- .../scrollable_list/scrollable_list.js | 4 +- .../components/search_popout/search_popout.js | 2 +- .../components/sidebar_menu/index.js | 1 + .../{ => sidebar_menu}/sidebar_menu.js | 20 +- .../components/sidebar_menu/sidebar_menu.scss | 174 ++++++++++++++++++ .../gabsocial/components/status/status.js | 14 +- .../status_action_bar/status_action_bar.js | 4 +- .../status_check_box/status_check_box.js | 4 +- .../components/status_list/status_list.js | 3 +- .../components/status_quote/index.js | 0 .../{ => status_quote}/status_quote.js | 6 +- .../components/status_revision_list/index.js | 0 .../status_revision_list.js | 40 ++++ .../gabsocial/components/tabs_bar/tabs_bar.js | 10 +- .../timeline_compose_block.js | 4 +- .../components/trending_item/trending_item.js | 4 +- .../components/upload_area/upload_area.js | 4 +- .../components/user_panel/user_panel.js | 2 +- .../gabsocial/containers/account_container.js | 4 +- .../gabsocial/containers/compose_container.js | 6 +- .../gabsocial/containers/domain_container.js | 2 +- .../containers/dropdown_menu_container.js | 2 +- .../gabsocial/containers/gabsocial.js | 6 +- ...intersection_observer_article_container.js | 2 +- .../gabsocial/containers/status_container.js | 6 +- .../containers/status_list_container.js | 2 +- .../status_revision_list_container.js | 0 .../containers/timeline_container.js | 4 +- .../account_gallery/account_gallery.js | 6 +- .../account_timeline/account_timeline.js | 4 +- .../search_results/search_results.js | 2 - .../gabsocial/features/compose/compose.js | 11 +- .../features/domain_blocks/domain_blocks.js | 4 +- .../favourited_statuses.js | 2 +- .../account_authorize/account_authorize.js | 4 +- .../follow_requests/follow_requests.js | 2 +- .../gabsocial/features/followers/followers.js | 2 +- .../gabsocial/features/following/following.js | 2 +- .../hashtag_timeline/hashtag_timeline.js | 15 +- .../gabsocial/features/home_timeline/index.js | 8 +- .../features/introduction/introduction.js | 8 +- .../list_adder/components/list/list.js | 2 +- .../features/list_adder/list_adder.js | 3 +- .../list_editor/components/account.js | 7 +- .../features/list_editor/list_editor.js | 5 +- .../features/list_timeline/list_timeline.js | 6 +- .../gabsocial/features/lists/lists.js | 2 +- .../gabsocial/features/mutes/mutes.js | 4 +- .../containers/filter_bar_container.js | 2 +- .../containers/notification_container.js | 4 +- .../features/notifications/notifications.js | 4 +- .../pinned_statuses/pinned_statuses.js | 2 +- .../gabsocial/features/reblogs/reblogs.js | 4 +- .../gabsocial/features/search/search.js | 2 - .../detailed_status/detailed_status.js | 6 +- .../detailed_status_action_bar.js | 4 +- .../containers/detailed_status_container.js | 8 +- .../gabsocial/features/status/status.js | 13 +- .../ui/components/status_revision_list.js | 43 ----- app/javascript/gabsocial/features/ui/ui.js | 5 +- .../features/ui/util/async-components.js | 2 +- app/javascript/gabsocial/pages/group_page.js | 10 +- app/javascript/gabsocial/pages/home_page.js | 4 +- .../gabsocial/pages/profile_page.js | 2 +- app/javascript/gabsocial/selectors/index.js | 34 ++-- .../gabsocial/service_worker/entry.js | 6 +- .../service_worker/web_push_locales.js | 8 +- .../service_worker/web_push_notifications.js | 32 ++-- app/javascript/gabsocial/stream.js | 18 +- app/javascript/gabsocial/utils/compare_id.js | 4 +- app/javascript/gabsocial/utils/numbers.js | 4 +- .../gabsocial/utils/resize_image.js | 26 +-- .../gabsocial/components/footer-bar.scss | 45 ----- .../gabsocial/components/sidebar-menu.scss | 174 ------------------ 99 files changed, 497 insertions(+), 508 deletions(-) rename app/javascript/gabsocial/{features/ui/components => components/footer_bar}/footer_bar.js (93%) create mode 100644 app/javascript/gabsocial/components/footer_bar/footer_bar.scss create mode 100644 app/javascript/gabsocial/components/footer_bar/index.js rename app/javascript/gabsocial/components/{ => group_list_item}/group_list_item.js (94%) create mode 100644 app/javascript/gabsocial/components/group_list_item/index.js create mode 100644 app/javascript/gabsocial/components/modal/pro_upgrade_modal/index.js rename app/javascript/gabsocial/{features/ui/components => components/modal/pro_upgrade_modal}/pro_upgrade_modal.js (94%) rename app/javascript/gabsocial/{features/ui/components => components/modal/status_revision_modal}/status_revision_modal.js (93%) create mode 100644 app/javascript/gabsocial/components/progress_panel/index.js rename app/javascript/gabsocial/{features/ui/components => components/progress_panel}/progress_panel.js (93%) create mode 100644 app/javascript/gabsocial/components/sidebar_menu/index.js rename app/javascript/gabsocial/components/{ => sidebar_menu}/sidebar_menu.js (95%) create mode 100644 app/javascript/gabsocial/components/sidebar_menu/sidebar_menu.scss create mode 100644 app/javascript/gabsocial/components/status_quote/index.js rename app/javascript/gabsocial/components/{ => status_quote}/status_quote.js (88%) create mode 100644 app/javascript/gabsocial/components/status_revision_list/index.js create mode 100644 app/javascript/gabsocial/components/status_revision_list/status_revision_list.js rename app/javascript/gabsocial/{features/ui => }/containers/status_revision_list_container.js (100%) delete mode 100644 app/javascript/gabsocial/features/ui/components/status_revision_list.js diff --git a/app/javascript/gabsocial/api.js b/app/javascript/gabsocial/api.js index 8898bdeb..6781b907 100644 --- a/app/javascript/gabsocial/api.js +++ b/app/javascript/gabsocial/api.js @@ -33,7 +33,7 @@ export default getState => axios.create({ transformResponse: [function (data) { try { return JSON.parse(data); - } catch(Exception) { + } catch (Exception) { return data; } }], diff --git a/app/javascript/gabsocial/components/account/account.js b/app/javascript/gabsocial/components/account/account.js index 0f9b769b..d1b92551 100644 --- a/app/javascript/gabsocial/components/account/account.js +++ b/app/javascript/gabsocial/components/account/account.js @@ -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 { ); } - + return (
diff --git a/app/javascript/gabsocial/components/autosuggest_account/autosuggest_account.js b/app/javascript/gabsocial/components/autosuggest_account/autosuggest_account.js index 16163876..441e02b2 100644 --- a/app/javascript/gabsocial/components/autosuggest_account/autosuggest_account.js +++ b/app/javascript/gabsocial/components/autosuggest_account/autosuggest_account.js @@ -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'; diff --git a/app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js b/app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js index af28388f..fd8ebcac 100644 --- a/app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js +++ b/app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js @@ -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'; diff --git a/app/javascript/gabsocial/components/column/column.js b/app/javascript/gabsocial/components/column/column.js index 3ec6899d..be2133e7 100644 --- a/app/javascript/gabsocial/components/column/column.js +++ b/app/javascript/gabsocial/components/column/column.js @@ -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 && ( - // - // ); + const header = showHeading && ( + + ); return (
diff --git a/app/javascript/gabsocial/components/column_header/home_column_header.js b/app/javascript/gabsocial/components/column_header/home_column_header.js index 7e66d43d..6e6032c5 100644 --- a/app/javascript/gabsocial/components/column_header/home_column_header.js +++ b/app/javascript/gabsocial/components/column_header/home_column_header.js @@ -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'; diff --git a/app/javascript/gabsocial/components/display_name/display_name.js b/app/javascript/gabsocial/components/display_name/display_name.js index 0de0cfcf..fe7bc18b 100644 --- a/app/javascript/gabsocial/components/display_name/display_name.js +++ b/app/javascript/gabsocial/components/display_name/display_name.js @@ -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'; diff --git a/app/javascript/gabsocial/components/domain/domain.js b/app/javascript/gabsocial/components/domain/domain.js index 6bc09842..bd8563bf 100644 --- a/app/javascript/gabsocial/components/domain/domain.js +++ b/app/javascript/gabsocial/components/domain/domain.js @@ -1,5 +1,5 @@ -import IconButton from '../icon_button'; import { defineMessages, injectIntl } from 'react-intl'; +import IconButton from '../icon_button'; import './domain.scss'; diff --git a/app/javascript/gabsocial/components/dropdown_menu/dropdown_menu.js b/app/javascript/gabsocial/components/dropdown_menu/dropdown_menu.js index 20f5ab38..913fca5d 100644 --- a/app/javascript/gabsocial/components/dropdown_menu/dropdown_menu.js +++ b/app/javascript/gabsocial/components/dropdown_menu/dropdown_menu.js @@ -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'; diff --git a/app/javascript/gabsocial/features/ui/components/footer_bar.js b/app/javascript/gabsocial/components/footer_bar/footer_bar.js similarity index 93% rename from app/javascript/gabsocial/features/ui/components/footer_bar.js rename to app/javascript/gabsocial/components/footer_bar/footer_bar.js index 369a4d1c..627e93c4 100644 --- a/app/javascript/gabsocial/features/ui/components/footer_bar.js +++ b/app/javascript/gabsocial/components/footer_bar/footer_bar.js @@ -1,7 +1,9 @@ import { NavLink, withRouter } from 'react-router-dom'; import { FormattedMessage, injectIntl } from 'react-intl'; -import NotificationCounter from '../../../components/notification_counter'; -import { me } from '../../../initial_state'; +import NotificationCounter from '../notification_counter'; +import { me } from '../../initial_state'; + +import './footer_bar.scss'; const links = [ diff --git a/app/javascript/gabsocial/components/footer_bar/footer_bar.scss b/app/javascript/gabsocial/components/footer_bar/footer_bar.scss new file mode 100644 index 00000000..ab0ce2e7 --- /dev/null +++ b/app/javascript/gabsocial/components/footer_bar/footer_bar.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/app/javascript/gabsocial/components/footer_bar/index.js b/app/javascript/gabsocial/components/footer_bar/index.js new file mode 100644 index 00000000..4384f992 --- /dev/null +++ b/app/javascript/gabsocial/components/footer_bar/index.js @@ -0,0 +1 @@ +export { default } from './footer_bar'; \ No newline at end of file diff --git a/app/javascript/gabsocial/components/group_list_item.js b/app/javascript/gabsocial/components/group_list_item/group_list_item.js similarity index 94% rename from app/javascript/gabsocial/components/group_list_item.js rename to app/javascript/gabsocial/components/group_list_item/group_list_item.js index c26d495d..45b747d6 100644 --- a/app/javascript/gabsocial/components/group_list_item.js +++ b/app/javascript/gabsocial/components/group_list_item/group_list_item.js @@ -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' }, diff --git a/app/javascript/gabsocial/components/group_list_item/index.js b/app/javascript/gabsocial/components/group_list_item/index.js new file mode 100644 index 00000000..e69de29b diff --git a/app/javascript/gabsocial/components/link_footer/link_footer.js b/app/javascript/gabsocial/components/link_footer/link_footer.js index 8d0c0da1..c14219df 100644 --- a/app/javascript/gabsocial/components/link_footer/link_footer.js +++ b/app/javascript/gabsocial/components/link_footer/link_footer.js @@ -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'; diff --git a/app/javascript/gabsocial/components/media_gallery/media_gallery.js b/app/javascript/gabsocial/components/media_gallery/media_gallery.js index 6dbb0590..a1505480 100644 --- a/app/javascript/gabsocial/components/media_gallery/media_gallery.js +++ b/app/javascript/gabsocial/components/media_gallery/media_gallery.js @@ -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' }, diff --git a/app/javascript/gabsocial/components/modal/mute_modal/mute_modal.js b/app/javascript/gabsocial/components/modal/mute_modal/mute_modal.js index 5a6e323f..5471a697 100644 --- a/app/javascript/gabsocial/components/modal/mute_modal/mute_modal.js +++ b/app/javascript/gabsocial/components/modal/mute_modal/mute_modal.js @@ -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}?' }, diff --git a/app/javascript/gabsocial/components/modal/pro_upgrade_modal/index.js b/app/javascript/gabsocial/components/modal/pro_upgrade_modal/index.js new file mode 100644 index 00000000..e69de29b diff --git a/app/javascript/gabsocial/features/ui/components/pro_upgrade_modal.js b/app/javascript/gabsocial/components/modal/pro_upgrade_modal/pro_upgrade_modal.js similarity index 94% rename from app/javascript/gabsocial/features/ui/components/pro_upgrade_modal.js rename to app/javascript/gabsocial/components/modal/pro_upgrade_modal/pro_upgrade_modal.js index 3e9b4c58..a22e8485 100644 --- a/app/javascript/gabsocial/features/ui/components/pro_upgrade_modal.js +++ b/app/javascript/gabsocial/components/modal/pro_upgrade_modal/pro_upgrade_modal.js @@ -1,8 +1,8 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { me } from '../../../initial_state'; -import IconButton from '../../../components/icon_button'; -import Icon from '../../../components/icon'; +import { me } from '../initial_state'; +import IconButton from './icon_button'; +import Icon from './icon'; const messages = defineMessages({ close: { id: 'lightbox.close', defaultMessage: 'Close' }, diff --git a/app/javascript/gabsocial/components/modal/report_modal/report_modal.js b/app/javascript/gabsocial/components/modal/report_modal/report_modal.js index df16b460..9f20849a 100644 --- a/app/javascript/gabsocial/components/modal/report_modal/report_modal.js +++ b/app/javascript/gabsocial/components/modal/report_modal/report_modal.js @@ -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'; diff --git a/app/javascript/gabsocial/features/ui/components/status_revision_modal.js b/app/javascript/gabsocial/components/modal/status_revision_modal/status_revision_modal.js similarity index 93% rename from app/javascript/gabsocial/features/ui/components/status_revision_modal.js rename to app/javascript/gabsocial/components/modal/status_revision_modal/status_revision_modal.js index 137381e2..102db132 100644 --- a/app/javascript/gabsocial/features/ui/components/status_revision_modal.js +++ b/app/javascript/gabsocial/components/modal/status_revision_modal/status_revision_modal.js @@ -2,7 +2,7 @@ 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 StatusRevisionListContainer from '../../../containers/status_revision_list_container'; import IconButton from '../../../components/icon_button'; const messages = defineMessages({ diff --git a/app/javascript/gabsocial/components/modal_root/modal_root.js b/app/javascript/gabsocial/components/modal_root/modal_root.js index 68832882..dde0443e 100644 --- a/app/javascript/gabsocial/components/modal_root/modal_root.js +++ b/app/javascript/gabsocial/components/modal_root/modal_root.js @@ -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 }), diff --git a/app/javascript/gabsocial/components/poll/poll.js b/app/javascript/gabsocial/components/poll/poll.js index ee0a6cd6..a635112e 100644 --- a/app/javascript/gabsocial/components/poll/poll.js +++ b/app/javascript/gabsocial/components/poll/poll.js @@ -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'; diff --git a/app/javascript/gabsocial/components/progress_panel/index.js b/app/javascript/gabsocial/components/progress_panel/index.js new file mode 100644 index 00000000..5a89a6d3 --- /dev/null +++ b/app/javascript/gabsocial/components/progress_panel/index.js @@ -0,0 +1 @@ +export { default } from './progress_panel'; \ No newline at end of file diff --git a/app/javascript/gabsocial/features/ui/components/progress_panel.js b/app/javascript/gabsocial/components/progress_panel/progress_panel.js similarity index 93% rename from app/javascript/gabsocial/features/ui/components/progress_panel.js rename to app/javascript/gabsocial/components/progress_panel/progress_panel.js index b8a2db0c..3b4a3f38 100644 --- a/app/javascript/gabsocial/features/ui/components/progress_panel.js +++ b/app/javascript/gabsocial/components/progress_panel/progress_panel.js @@ -1,4 +1,4 @@ -import { monthlyExpensesComplete } from '../../../initial_state'; +import { monthlyExpensesComplete } from '../../initial_state'; export default class ProgressPanel extends React.PureComponent { render() { diff --git a/app/javascript/gabsocial/components/scrollable_list/scrollable_list.js b/app/javascript/gabsocial/components/scrollable_list/scrollable_list.js index 33dd5d0e..bd39f7b6 100644 --- a/app/javascript/gabsocial/components/scrollable_list/scrollable_list.js +++ b/app/javascript/gabsocial/components/scrollable_list/scrollable_list.js @@ -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'; diff --git a/app/javascript/gabsocial/components/search_popout/search_popout.js b/app/javascript/gabsocial/components/search_popout/search_popout.js index 3d534fa0..67eca3ac 100644 --- a/app/javascript/gabsocial/components/search_popout/search_popout.js +++ b/app/javascript/gabsocial/components/search_popout/search_popout.js @@ -13,7 +13,7 @@ export default class SearchPopout extends PureComponent { render() { const { style } = this.props; - + return (
diff --git a/app/javascript/gabsocial/components/sidebar_menu/index.js b/app/javascript/gabsocial/components/sidebar_menu/index.js new file mode 100644 index 00000000..940f2607 --- /dev/null +++ b/app/javascript/gabsocial/components/sidebar_menu/index.js @@ -0,0 +1 @@ +export { default } from './sidebar_menu'; \ No newline at end of file diff --git a/app/javascript/gabsocial/components/sidebar_menu.js b/app/javascript/gabsocial/components/sidebar_menu/sidebar_menu.js similarity index 95% rename from app/javascript/gabsocial/components/sidebar_menu.js rename to app/javascript/gabsocial/components/sidebar_menu/sidebar_menu.js index 8e9491ad..3cf10379 100644 --- a/app/javascript/gabsocial/components/sidebar_menu.js +++ b/app/javascript/gabsocial/components/sidebar_menu/sidebar_menu.js @@ -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' }, diff --git a/app/javascript/gabsocial/components/sidebar_menu/sidebar_menu.scss b/app/javascript/gabsocial/components/sidebar_menu/sidebar_menu.scss new file mode 100644 index 00000000..8d6068d5 --- /dev/null +++ b/app/javascript/gabsocial/components/sidebar_menu/sidebar_menu.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/app/javascript/gabsocial/components/status/status.js b/app/javascript/gabsocial/components/status/status.js index db0d0903..4b8ec007 100644 --- a/app/javascript/gabsocial/components/status/status.js +++ b/app/javascript/gabsocial/components/status/status.js @@ -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') && } + /> */ } {showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && (