From 06d5aee82f80adf5d1c9316f0dbff2912157346d Mon Sep 17 00:00:00 2001 From: Morgan Bazalgette Date: Sat, 21 Apr 2018 17:58:19 +0200 Subject: [PATCH] Getting-Started column customisation (panel, notice) --- .../glitch/features/getting_started/index.js | 22 +++++- .../features/ui/components/link_footer.js | 48 +++---------- .../flavours/glitch/reducers/index.js | 2 + .../flavours/glitch/reducers/pleroma.js | 18 +++++ .../glitch/styles/components/index.scss | 8 ++- app/javascript/mastodon/actions/pleroma.js | 72 +++++++++++++++++++ app/javascript/mastodon/locales/en.json | 1 + app/javascript/mastodon/locales/fr.json | 1 + app/javascript/mastodon/reducers/index.js | 2 + app/javascript/mastodon/reducers/pleroma.js | 18 +++++ .../styles/mastodon/components.scss | 34 +++++++-- 11 files changed, 174 insertions(+), 52 deletions(-) create mode 100644 app/javascript/flavours/glitch/reducers/pleroma.js create mode 100644 app/javascript/mastodon/actions/pleroma.js create mode 100644 app/javascript/mastodon/reducers/pleroma.js diff --git a/app/javascript/flavours/glitch/features/getting_started/index.js b/app/javascript/flavours/glitch/features/getting_started/index.js index d8a51c689..0ee19c54a 100644 --- a/app/javascript/flavours/glitch/features/getting_started/index.js +++ b/app/javascript/flavours/glitch/features/getting_started/index.js @@ -16,6 +16,7 @@ import { fetchLists } from 'flavours/glitch/actions/lists'; import { preferencesLink } from 'flavours/glitch/util/backend_links'; import NavigationBar from '../compose/components/navigation_bar'; import LinkFooter from 'flavours/glitch/features/ui/components/link_footer'; +import { fetchPanel, fetchPleromaConfig } from 'mastodon/actions/pleroma'; import TrendsContainer from './containers/trends_container'; const messages = defineMessages({ @@ -55,6 +56,8 @@ const makeMapStateToProps = () => { columns: state.getIn(['settings', 'columns']), unreadFollowRequests: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size, unreadNotifications: state.getIn(['notifications', 'unread']), + customPanelEnabled: state.getIn(['custom_panel', 'enabled']), + customPanel: state.getIn(['custom_panel', 'panel']), }); return mapStateToProps; @@ -64,6 +67,8 @@ const mapDispatchToProps = dispatch => ({ fetchFollowRequests: () => dispatch(fetchFollowRequests()), fetchLists: () => dispatch(fetchLists()), openSettings: () => dispatch(openModal('SETTINGS', {})), + fetchPanel: () => dispatch(fetchPanel()), + fetchPleromaConfig: () => dispatch(fetchPleromaConfig()), }); const badgeDisplay = (number, limit) => { @@ -97,6 +102,10 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2); lists: ImmutablePropTypes.list, fetchLists: PropTypes.func.isRequired, openSettings: PropTypes.func.isRequired, + fetchPanel: PropTypes.func.isRequired, + fetchPleromaConfig: PropTypes.func.isRequired, + customPanelEnabled: PropTypes.bool, + customPanel: PropTypes.string.isRequired, }; componentWillMount () { @@ -104,7 +113,7 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2); } componentDidMount () { - const { fetchFollowRequests, multiColumn } = this.props; + const { fetchFollowRequests, multiColumn, fetchPleromaConfig, fetchPanel } = this.props; if (!multiColumn && window.innerWidth >= NAVIGATION_PANEL_BREAKPOINT) { this.context.router.history.replace('/timelines/home'); @@ -112,10 +121,13 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2); } fetchFollowRequests(); + + fetchPleromaConfig(); + fetchPanel(); } render () { - const { intl, myAccount, columns, multiColumn, unreadFollowRequests, unreadNotifications, lists, openSettings } = this.props; + const { intl, myAccount, columns, multiColumn, unreadFollowRequests, unreadNotifications, lists, openSettings, customPanelEnabled, customPanel } = this.props; const navItems = []; let listItems = []; @@ -165,10 +177,12 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2); , ]); + const instance_panel = (customPanelEnabled ?
: null); + return (
-
+
{!multiColumn && } {multiColumn && } {navItems} @@ -179,6 +193,8 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2);
+ {instance_panel} +
diff --git a/app/javascript/flavours/glitch/features/ui/components/link_footer.js b/app/javascript/flavours/glitch/features/ui/components/link_footer.js index 4d7fc36c2..2d503eda5 100644 --- a/app/javascript/flavours/glitch/features/ui/components/link_footer.js +++ b/app/javascript/flavours/glitch/features/ui/components/link_footer.js @@ -3,65 +3,33 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; import { Link } from 'react-router-dom'; -import { invitesEnabled, version, repository, source_url } from 'flavours/glitch/util/initial_state'; -import { signOutLink, securityLink } from 'flavours/glitch/util/backend_links'; -import { logOut } from 'flavours/glitch/util/log_out'; -import { openModal } from 'flavours/glitch/actions/modal'; const messages = defineMessages({ logoutMessage: { id: 'confirmations.logout.message', defaultMessage: 'Are you sure you want to log out?' }, logoutConfirm: { id: 'confirmations.logout.confirm', defaultMessage: 'Log out' }, }); -const mapDispatchToProps = (dispatch, { intl }) => ({ - onLogout () { - dispatch(openModal('CONFIRM', { - message: intl.formatMessage(messages.logoutMessage), - confirm: intl.formatMessage(messages.logoutConfirm), - onConfirm: () => logOut(), - })); - }, -}); - export default @injectIntl @connect(null, mapDispatchToProps) class LinkFooter extends React.PureComponent { static propTypes = { - onLogout: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, }; - handleLogoutClick = e => { - e.preventDefault(); - e.stopPropagation(); - - this.props.onLogout(); - - return false; - } - render () { return ( -
-
    - {invitesEnabled &&
  • ·
    • } - {!!securityLink &&
  • ·
    • } -
  • ·
    • -
  • ·
    • -
  • ·
    • -
  • ·
    • -
  • ·
    • -
    • -
- +

glitch-soc/mastodon (v{version}), - Mastodon: Mastodon }} + mastofe: Mastofe, + glitchsoc: glitch-soc, + mastodon: Mastodon, + pleroma: Pleroma + }} />

diff --git a/app/javascript/flavours/glitch/reducers/index.js b/app/javascript/flavours/glitch/reducers/index.js index 7dbca3a29..d5d9ccd57 100644 --- a/app/javascript/flavours/glitch/reducers/index.js +++ b/app/javascript/flavours/glitch/reducers/index.js @@ -34,6 +34,7 @@ import suggestions from './suggestions'; import pinnedAccountsEditor from './pinned_accounts_editor'; import polls from './polls'; import identity_proofs from './identity_proofs'; +import custom_panel from './pleroma'; import trends from './trends'; const reducers = { @@ -72,6 +73,7 @@ const reducers = { suggestions, pinnedAccountsEditor, polls, + custom_panel, trends, }; diff --git a/app/javascript/flavours/glitch/reducers/pleroma.js b/app/javascript/flavours/glitch/reducers/pleroma.js new file mode 100644 index 000000000..fb3871d78 --- /dev/null +++ b/app/javascript/flavours/glitch/reducers/pleroma.js @@ -0,0 +1,18 @@ +import { Map as ImmutableMap } from 'immutable'; +import { PANEL_FETCH_SUCCESS, PLEROMA_CONFIG_FETCH_SUCCESS } from 'mastodon/actions/pleroma'; + +const initialPanel = ImmutableMap({ + enabled: false, + panel: '' +}); + +export default function custom_panel(state = initialPanel, action) { + switch (action.type) { + case PANEL_FETCH_SUCCESS: + return state.set('panel', action.panel); break; + case PLEROMA_CONFIG_FETCH_SUCCESS: + return state.set('enabled', (action.config || {}).showInstanceSpecificPanel); + } + + return state; +}; diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 8e576fd86..c4781d812 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -886,10 +886,15 @@ color: $dark-text-color; } + &__panel { + height: min-content; + } + + &__panel, &__footer { - flex: 0 0 auto; padding: 10px; padding-top: 20px; + flex: 0 1 auto; ul { margin-bottom: 10px; @@ -902,7 +907,6 @@ p { color: $dark-text-color; font-size: 13px; - margin-bottom: 20px; a { color: $dark-text-color; diff --git a/app/javascript/mastodon/actions/pleroma.js b/app/javascript/mastodon/actions/pleroma.js new file mode 100644 index 000000000..9a2290b13 --- /dev/null +++ b/app/javascript/mastodon/actions/pleroma.js @@ -0,0 +1,72 @@ +import api from '../api'; + +export const PANEL_FETCH_REQUEST = 'PANEL_FETCH_REQUEST'; +export const PANEL_FETCH_SUCCESS = 'PANEL_FETCH_SUCCESS'; +export const PANEL_FETCH_FAIL = 'PANEL_FETCH_FAIL'; +export const PLEROMA_CONFIG_FETCH_REQUEST = 'PLEROMA_CONFIG_FETCH_REQUEST'; +export const PLEROMA_CONFIG_FETCH_SUCCESS = 'PLEROMA_CONFIG_FETCH_SUCCESS'; +export const PLEROMA_CONFIG_FETCH_FAIL = 'PLEROMA_CONFIG_FETCH_FAIL'; + +export function fetchPanel() { + return (dispatch, getState) => { + dispatch(fetchPanelRequest()); + + api(getState).get('/instance/panel.html').then(response => { + dispatch(fetchPanelSuccess(response.data)); + }).catch(error => { + dispatch(fetchPanelFail(error)); + }); + }; +}; + +export function fetchPleromaConfig() { + return (dispatch, getState) => { + dispatch(fetchPleromaConfigRequest()); + + api(getState).get('/api/pleroma/frontend_configurations').then(response => { + dispatch(fetchPleromaConfigSuccess(response.data.masto_fe)); + }).catch(error => { + dispatch(fetchPleromaConfigFail(error)); + }); + }; +}; + +export function fetchPanelRequest() { + return { + type: PANEL_FETCH_REQUEST, + }; +}; + +export function fetchPanelSuccess(panel) { + return { + type: PANEL_FETCH_SUCCESS, + panel, + }; +}; + +export function fetchPanelFail(error) { + return { + type: PANEL_FETCH_FAIL, + error, + }; +}; + +export function fetchPleromaConfigRequest() { + return { + type: PLEROMA_CONFIG_FETCH_REQUEST, + }; +}; + +export function fetchPleromaConfigSuccess(config) { + return { + type: PLEROMA_CONFIG_FETCH_SUCCESS, + config, + }; +}; + +export function fetchPleromaConfigFail(error) { + return { + type: PLEROMA_CONFIG_FETCH_FAIL, + error, + }; +}; diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index 2910eedbd..725c54c15 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -173,6 +173,7 @@ "getting_started.heading": "Getting started", "getting_started.invite": "Invite people", "getting_started.open_source_notice": "Mastodon is open source software. You can contribute or report issues on GitHub at {github}.", + "getting_started.mastofe_notice": "Mastofe is a libre distribution of the frontend from {glitchsoc}, a friendly fork of {mastodon}. You can contribute or report issues at {mastofe}.", "getting_started.security": "Account settings", "getting_started.terms": "Terms of service", "hashtag.column_header.tag_mode.all": "and {additional}", diff --git a/app/javascript/mastodon/locales/fr.json b/app/javascript/mastodon/locales/fr.json index ffb77d9f6..89e962ae3 100644 --- a/app/javascript/mastodon/locales/fr.json +++ b/app/javascript/mastodon/locales/fr.json @@ -169,6 +169,7 @@ "getting_started.heading": "Pour commencer", "getting_started.invite": "Inviter des gens", "getting_started.open_source_notice": "Mastodon est un logiciel libre. Vous pouvez contribuer ou faire des rapports de bogues via {github} sur GitHub.", + "getting_started.mastofe_notice": "Mastofe est une distribution libre du frontend {glitchsoc}, un fork amical de {mastodon}. Vous pouvez contribuer ou rapporter des bogues via {mastofe}.", "getting_started.security": "Sécurité", "getting_started.terms": "Conditions d’utilisation", "hashtag.column_header.tag_mode.all": "et {additional}", diff --git a/app/javascript/mastodon/reducers/index.js b/app/javascript/mastodon/reducers/index.js index b8d608888..f6cf558cb 100644 --- a/app/javascript/mastodon/reducers/index.js +++ b/app/javascript/mastodon/reducers/index.js @@ -32,6 +32,7 @@ import conversations from './conversations'; import suggestions from './suggestions'; import polls from './polls'; import identity_proofs from './identity_proofs'; +import custom_panel from './pleroma'; import trends from './trends'; import missed_updates from './missed_updates'; @@ -69,6 +70,7 @@ const reducers = { conversations, suggestions, polls, + custom_panel, trends, missed_updates, }; diff --git a/app/javascript/mastodon/reducers/pleroma.js b/app/javascript/mastodon/reducers/pleroma.js new file mode 100644 index 000000000..5542504ca --- /dev/null +++ b/app/javascript/mastodon/reducers/pleroma.js @@ -0,0 +1,18 @@ +import { Map as ImmutableMap } from 'immutable'; +import { PANEL_FETCH_SUCCESS, PLEROMA_CONFIG_FETCH_SUCCESS } from '../actions/pleroma'; + +const initialPanel = ImmutableMap({ + enabled: false, + panel: '', +}); + +export default function custom_panel(state = initialPanel, action) { + switch (action.type) { + case PANEL_FETCH_SUCCESS: + return state.set('panel', action.panel); break; + case PLEROMA_CONFIG_FETCH_SUCCESS: + return state.set('enabled', (action.config || {}).showInstanceSpecificPanel || false); + } + + return state; +}; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index b70e7a189..b33af2166 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2304,9 +2304,19 @@ a.account__display-name { } .getting-started__wrapper, + .getting-started__trends, .search { margin-bottom: 10px; } + + .getting-started__panel { + margin: 10px 0; + } + + .column, + .drawer { + min-width: 330px; + } } @media screen and (max-width: 600px + (285px * 1) + (10px * 1)) { @@ -2768,10 +2778,6 @@ a.account__display-name { background: $ui-base-color; } -.getting-started__wrapper { - flex: 0 0 auto; -} - .flex-spacer { flex: 1 1 auto; } @@ -2779,11 +2785,21 @@ a.account__display-name { .getting-started { color: $dark-text-color; overflow: auto; + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; + &__wrapper, + &__panel, &__footer { - flex: 0 0 auto; + height: min-content; + } + + &__panel, + &__footer + { padding: 10px; padding-top: 20px; + flex-grow: 0; ul { margin-bottom: 10px; @@ -2794,9 +2810,7 @@ a.account__display-name { } p { - color: $dark-text-color; font-size: 13px; - margin-bottom: 20px; a { color: $dark-text-color; @@ -2816,6 +2830,12 @@ a.account__display-name { } } + &__wrapper, + &__footer + { + color: $dark-text-color; + } + &__trends { flex: 0 1 auto; opacity: 1;