From 3ca4ffcc6bdde3af89297e70c92a9ac87e43608b Mon Sep 17 00:00:00 2001 From: mgabdev <> Date: Fri, 28 Feb 2020 10:20:47 -0500 Subject: [PATCH] Progress --- .../gabsocial/actions/dropdown_menu.js | 10 - .../gabsocial/actions/favourites.js | 28 +- .../gabsocial/actions/pin_statuses.js | 43 - app/javascript/gabsocial/actions/popover.js | 18 + .../autosuggest_textbox.js | 27 +- app/javascript/gabsocial/components/avatar.js | 4 +- app/javascript/gabsocial/components/button.js | 1 - .../gabsocial/components/display_name.js | 130 +- .../components/dropdown_menu/dropdown_menu.js | 297 -- .../dropdown_menu/dropdown_menu.scss | 93 - .../components/dropdown_menu/index.js | 1 - .../gabsocial/components/list_item.js | 1 + .../gabsocial/components/modal/modal_root.js | 69 +- .../components/panel/group_info_panel.js | 31 + .../components/panel/media_gallery_panel.js | 68 +- .../components/panel/profile_info_panel.js | 182 +- .../components/panel/profile_stats_panel.js | 63 + .../gabsocial/components/panel/user_panel.js | 45 +- .../popover/content_warning_popover.js | 2 +- .../components/popover/date_picker_popover.js | 2 +- .../components/popover/group_info_popover.js | 12 + .../gabsocial/components/popover/popover.js | 9 - .../components/popover/popover_base.js | 146 + .../components/popover/popover_layout.js | 10 +- .../components/popover/popover_root.js | 171 + .../popover/profile_options_popover.js | 12 + .../components/popover/search_popover.js | 2 +- .../popover/sidebar_more_popover.js | 2 +- .../popover/status_options_popover.js | 2 +- .../popover/status_visibility_popover.js | 2 +- .../components/popover/user_info_popover.js | 12 + .../components/popover/user_popover.js | 9 - .../gabsocial/components/sidebar.js | 23 +- .../gabsocial/components/sidebar_header.js | 3 +- .../gabsocial/components/status/status.js | 50 +- .../status_action_bar/status_action_bar.js | 123 +- .../components/status_action_bar_item.js | 52 + .../gabsocial/components/tab_bar.js | 7 +- .../gabsocial/components/tab_bar_item.js | 34 +- .../components/timeline_compose_block.js | 3 - .../containers/loading_bar_container.js | 4 +- .../gabsocial/containers/modal_container.js | 20 - .../status_revision_list_container.js | 32 +- .../containers/timeline_container.js | 2 +- .../components/inner_header/inner_header.js | 1 - .../components/action_bar/action_bar.js | 1 - .../character_counter/character_counter.js | 17 +- .../components/compose_extra_button.js | 30 +- .../components/compose_form/compose_form.js | 161 +- .../compose/components/poll_button.js | 4 +- .../components/schedule_post_dropdown.js | 4 +- .../compose/components/spoiler_button.js | 4 +- .../compose/components/upload_button.js | 4 +- .../containers/compose_form_container.js | 90 +- .../favourited_statuses.js | 6 +- .../features/groups/members/index.js | 1 - .../groups/timeline/components/header.js | 1 - .../features/groups/timeline/index.js | 163 +- .../features/pinned_statuses/index.js | 1 - .../pinned_statuses/pinned_statuses.js | 49 - .../features/standalone/compose/compose.js | 4 +- .../detailed_status_action_bar.js | 1 - app/javascript/gabsocial/features/ui/ui.js | 17 +- .../features/ui/util/async-components.js | 6 +- .../gabsocial/layouts/group_layout.js | 106 + .../gabsocial/layouts/profile_layout.js | 95 +- app/javascript/gabsocial/pages/group_page.js | 112 +- app/javascript/gabsocial/pages/home_page.js | 2 +- .../gabsocial/pages/profile_page.js | 39 +- .../gabsocial/reducers/dropdown_menu.js | 18 - app/javascript/gabsocial/reducers/index.js | 4 +- app/javascript/gabsocial/reducers/popover.js | 28 + .../gabsocial/reducers/status_lists.js | 5 - app/javascript/gabsocial/utils/is_mobile.js | 14 + app/javascript/styles/global.css | 774 +++- package.json | 2 + yarn.lock | 3916 ++++++++++++++++- 77 files changed, 6110 insertions(+), 1427 deletions(-) delete mode 100644 app/javascript/gabsocial/actions/dropdown_menu.js delete mode 100644 app/javascript/gabsocial/actions/pin_statuses.js create mode 100644 app/javascript/gabsocial/actions/popover.js delete mode 100644 app/javascript/gabsocial/components/dropdown_menu/dropdown_menu.js delete mode 100644 app/javascript/gabsocial/components/dropdown_menu/dropdown_menu.scss delete mode 100644 app/javascript/gabsocial/components/dropdown_menu/index.js create mode 100644 app/javascript/gabsocial/components/panel/group_info_panel.js create mode 100644 app/javascript/gabsocial/components/panel/profile_stats_panel.js create mode 100644 app/javascript/gabsocial/components/popover/group_info_popover.js delete mode 100644 app/javascript/gabsocial/components/popover/popover.js create mode 100644 app/javascript/gabsocial/components/popover/popover_base.js create mode 100644 app/javascript/gabsocial/components/popover/popover_root.js create mode 100644 app/javascript/gabsocial/components/popover/profile_options_popover.js create mode 100644 app/javascript/gabsocial/components/popover/user_info_popover.js delete mode 100644 app/javascript/gabsocial/components/popover/user_popover.js create mode 100644 app/javascript/gabsocial/components/status_action_bar_item.js delete mode 100644 app/javascript/gabsocial/containers/modal_container.js delete mode 100644 app/javascript/gabsocial/features/pinned_statuses/index.js delete mode 100644 app/javascript/gabsocial/features/pinned_statuses/pinned_statuses.js create mode 100644 app/javascript/gabsocial/layouts/group_layout.js delete mode 100644 app/javascript/gabsocial/reducers/dropdown_menu.js create mode 100644 app/javascript/gabsocial/reducers/popover.js diff --git a/app/javascript/gabsocial/actions/dropdown_menu.js b/app/javascript/gabsocial/actions/dropdown_menu.js deleted file mode 100644 index 14f2939c..00000000 --- a/app/javascript/gabsocial/actions/dropdown_menu.js +++ /dev/null @@ -1,10 +0,0 @@ -export const DROPDOWN_MENU_OPEN = 'DROPDOWN_MENU_OPEN'; -export const DROPDOWN_MENU_CLOSE = 'DROPDOWN_MENU_CLOSE'; - -export function openDropdownMenu(id, placement, keyboard) { - return { type: DROPDOWN_MENU_OPEN, id, placement, keyboard }; -} - -export function closeDropdownMenu(id) { - return { type: DROPDOWN_MENU_CLOSE, id }; -} diff --git a/app/javascript/gabsocial/actions/favourites.js b/app/javascript/gabsocial/actions/favourites.js index a25c0afe..03703853 100644 --- a/app/javascript/gabsocial/actions/favourites.js +++ b/app/javascript/gabsocial/actions/favourites.js @@ -10,7 +10,7 @@ export const FAVOURITED_STATUSES_EXPAND_REQUEST = 'FAVOURITED_STATUSES_EXPAND_RE export const FAVOURITED_STATUSES_EXPAND_SUCCESS = 'FAVOURITED_STATUSES_EXPAND_SUCCESS'; export const FAVOURITED_STATUSES_EXPAND_FAIL = 'FAVOURITED_STATUSES_EXPAND_FAIL'; -export function fetchFavouritedStatuses() { +export function fetchFavoritedStatuses() { return (dispatch, getState) => { if (!me) return; @@ -18,26 +18,26 @@ export function fetchFavouritedStatuses() { return; } - dispatch(fetchFavouritedStatusesRequest()); + dispatch(fetchFavoritedStatusesRequest()); api(getState).get('/api/v1/favourites').then(response => { const next = getLinks(response).refs.find(link => link.rel === 'next'); dispatch(importFetchedStatuses(response.data)); - dispatch(fetchFavouritedStatusesSuccess(response.data, next ? next.uri : null)); + dispatch(fetchFavoritedStatusesSuccess(response.data, next ? next.uri : null)); }).catch(error => { - dispatch(fetchFavouritedStatusesFail(error)); + dispatch(fetchFavoritedStatusesFail(error)); }); }; }; -export function fetchFavouritedStatusesRequest() { +export function fetchFavoritedStatusesRequest() { return { type: FAVOURITED_STATUSES_FETCH_REQUEST, skipLoading: true, }; }; -export function fetchFavouritedStatusesSuccess(statuses, next) { +export function fetchFavoritedStatusesSuccess(statuses, next) { return { type: FAVOURITED_STATUSES_FETCH_SUCCESS, statuses, @@ -46,7 +46,7 @@ export function fetchFavouritedStatusesSuccess(statuses, next) { }; }; -export function fetchFavouritedStatusesFail(error) { +export function fetchFavoritedStatusesFail(error) { return { type: FAVOURITED_STATUSES_FETCH_FAIL, error, @@ -54,7 +54,7 @@ export function fetchFavouritedStatusesFail(error) { }; }; -export function expandFavouritedStatuses() { +export function expandFavoritedStatuses() { return (dispatch, getState) => { if (!me) return; @@ -64,25 +64,25 @@ export function expandFavouritedStatuses() { return; } - dispatch(expandFavouritedStatusesRequest()); + dispatch(expandFavoritedStatusesRequest()); api(getState).get(url).then(response => { const next = getLinks(response).refs.find(link => link.rel === 'next'); dispatch(importFetchedStatuses(response.data)); - dispatch(expandFavouritedStatusesSuccess(response.data, next ? next.uri : null)); + dispatch(expandFavoritedStatusesSuccess(response.data, next ? next.uri : null)); }).catch(error => { - dispatch(expandFavouritedStatusesFail(error)); + dispatch(expandFavoritedStatusesFail(error)); }); }; }; -export function expandFavouritedStatusesRequest() { +export function expandFavoritedStatusesRequest() { return { type: FAVOURITED_STATUSES_EXPAND_REQUEST, }; }; -export function expandFavouritedStatusesSuccess(statuses, next) { +export function expandFavoritedStatusesSuccess(statuses, next) { return { type: FAVOURITED_STATUSES_EXPAND_SUCCESS, statuses, @@ -90,7 +90,7 @@ export function expandFavouritedStatusesSuccess(statuses, next) { }; }; -export function expandFavouritedStatusesFail(error) { +export function expandFavoritedStatusesFail(error) { return { type: FAVOURITED_STATUSES_EXPAND_FAIL, error, diff --git a/app/javascript/gabsocial/actions/pin_statuses.js b/app/javascript/gabsocial/actions/pin_statuses.js deleted file mode 100644 index 8be3dd87..00000000 --- a/app/javascript/gabsocial/actions/pin_statuses.js +++ /dev/null @@ -1,43 +0,0 @@ -import api from '../api'; -import { importFetchedStatuses } from './importer'; -import { me } from '../initial_state'; - -export const PINNED_STATUSES_FETCH_REQUEST = 'PINNED_STATUSES_FETCH_REQUEST'; -export const PINNED_STATUSES_FETCH_SUCCESS = 'PINNED_STATUSES_FETCH_SUCCESS'; -export const PINNED_STATUSES_FETCH_FAIL = 'PINNED_STATUSES_FETCH_FAIL'; - -export function fetchPinnedStatuses() { - return (dispatch, getState) => { - if (!me) return; - - dispatch(fetchPinnedStatusesRequest()); - - api(getState).get(`/api/v1/accounts/${me}/statuses`, { params: { pinned: true } }).then(response => { - dispatch(importFetchedStatuses(response.data)); - dispatch(fetchPinnedStatusesSuccess(response.data, null)); - }).catch(error => { - dispatch(fetchPinnedStatusesFail(error)); - }); - }; -}; - -export function fetchPinnedStatusesRequest() { - return { - type: PINNED_STATUSES_FETCH_REQUEST, - }; -}; - -export function fetchPinnedStatusesSuccess(statuses, next) { - return { - type: PINNED_STATUSES_FETCH_SUCCESS, - statuses, - next, - }; -}; - -export function fetchPinnedStatusesFail(error) { - return { - type: PINNED_STATUSES_FETCH_FAIL, - error, - }; -}; diff --git a/app/javascript/gabsocial/actions/popover.js b/app/javascript/gabsocial/actions/popover.js new file mode 100644 index 00000000..5863e08c --- /dev/null +++ b/app/javascript/gabsocial/actions/popover.js @@ -0,0 +1,18 @@ +export const POPOVER_OPEN = 'POPOVER_OPEN' +export const POPOVER_CLOSE = 'POPOVER_CLOSE' + +export function openPopover(type, keyboard = false, placement = 'top') { + return { + keyboard, + placement, + type: POPOVER_OPEN, + popoverType: type, + } +} + +export function closePopover(type) { + return { + type: POPOVER_CLOSE, + popoverType: type, + } +} diff --git a/app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js b/app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js index aa81a9f0..5f0f8816 100644 --- a/app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js +++ b/app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js @@ -1,6 +1,6 @@ import { Fragment } from 'react' import ImmutablePropTypes from 'react-immutable-proptypes'; -import classNames from 'classnames'; +import classNames from 'classnames/bind' import ImmutablePureComponent from 'react-immutable-pure-component'; import Textarea from 'react-textarea-autosize'; import { isRtl } from '../../utils/rtl'; @@ -8,6 +8,8 @@ import { textAtCursorMatchesToken } from '../../utils/cursor_token_match'; import AutosuggestAccount from '../autosuggest_account'; import AutosuggestEmoji from '../autosuggest_emoji'; +const cx = classNames.bind(_s) + export default class AutosuggestTextbox extends ImmutablePureComponent { static propTypes = { @@ -30,6 +32,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent { onFocus: PropTypes.func, onBlur: PropTypes.func, textarea: PropTypes.bool, + small: PropTypes.bool, }; static defaultProps = { @@ -188,7 +191,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent { } render () { - const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, children, className, id, maxLength, textarea } = this.props; + const { value, small, suggestions, disabled, placeholder, onKeyUp, autoFocus, children, className, id, maxLength, textarea } = this.props; const { suggestionsHidden } = this.state; const style = { direction: 'ltr' }; @@ -196,14 +199,30 @@ export default class AutosuggestTextbox extends ImmutablePureComponent { style.direction = 'rtl'; } + const textClasses = cx({ + default: 1, + lineHeight125: 1, + resizeNone: 1, + text: 1, + displayBlock: 1, + outlineNone: 1, + backgroundColorPrimary: !small, + backgroundSubtle: small, + paddingVertical15PX: !small, + paddingVertical10PX: small, + fontSize16PX: !small, + fontSize14PX: small, + marginRight5PX: small, + }) + if (textarea) { return ( -
+