Getting-Started column customisation (panel, notice)

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);
       </div>,
     ]);
 
+    const instance_panel = (customPanelEnabled ? <div className='getting-started getting-started__panel scrollable' dangerouslySetInnerHTML={{__html: customPanel}} /> : null);
+
     return (
       <Column bindToDocument={!multiColumn} name='getting-started' icon='asterisk' heading={intl.formatMessage(messages.heading)} label={intl.formatMessage(messages.menu)} hideHeadingOnMobile>
         <div className='scrollable optionally-scrollable'>
-          <div className='getting-started__wrapper'>
+          <div className='getting-started__wrapper scrollable'>
             {!multiColumn && <NavigationBar account={myAccount} />}
             {multiColumn && <ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)} />}
             {navItems}
@@ -179,6 +193,8 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2);
             <ColumnLink icon='cogs' text={intl.formatMessage(messages.settings)} onClick={openSettings} />
           </div>
 
+          {instance_panel}
+
           <LinkFooter />
         </div>
 

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 (
-      <div className='getting-started__footer'>
+      <div className='getting-started__footer scrollable'>
-        <ul>
-          {invitesEnabled && <li><a href='/invites' target='_blank'><FormattedMessage id='getting_started.invite' defaultMessage='Invite people' /></a> · </li>}
-          {!!securityLink && <li><a href='/auth/edit'><FormattedMessage id='getting_started.security' defaultMessage='Security' /></a> · </li>}
-          <li><a href='/about/more' target='_blank'><FormattedMessage id='navigation_bar.info' defaultMessage='About this server' /></a> · </li>
-          <li><a href='https://joinmastodon.org/apps' target='_blank'><FormattedMessage id='navigation_bar.apps' defaultMessage='Mobile apps' /></a> · </li>
-          <li><a href='/terms' target='_blank'><FormattedMessage id='getting_started.terms' defaultMessage='Terms of service' /></a> · </li>
-          <li><a href='/settings/applications' target='_blank'><FormattedMessage id='getting_started.developers' defaultMessage='Developers' /></a> · </li>
-          <li><a href='https://docs.joinmastodon.org' target='_blank'><FormattedMessage id='getting_started.documentation' defaultMessage='Documentation' /></a> · </li>
-          <li><a href={signOutLink} onClick={this.handleLogoutClick}><FormattedMessage id='navigation_bar.logout' defaultMessage='Logout' /></a></li>
-        </ul>
-
         <p>
           <FormattedMessage
-            id='getting_started.open_source_notice'
+            id='getting_started.mastofe_notice'
-            defaultMessage='Glitchsoc is open source software, a friendly fork of {Mastodon}. You can contribute or report issues on GitHub at {github}.'
+            defaultMessage='Mastofe is a libre distribution of the frontend from {glitchsoc}, a friendly fork of {mastodon}. You can contribute or report issues at {mastofe}.'
             values={{
-              github: <span><a href='https://github.com/glitch-soc/mastodon' rel='noopener noreferrer' target='_blank'>glitch-soc/mastodon</a> (v{version})</span>,
+              mastofe: <a href='https://git.pleroma.social/pleroma/mastofe' rel='noopener noreferrer' target='_blank'>Mastofe</a>,
-              Mastodon: <a href='https://github.com/tootsuite/mastodon' rel='noopener noreferrer' target='_blank'>Mastodon</a> }}
+              glitchsoc: <a href='https://github.com/glitch-soc/mastodon' rel='noopener noreferrer' target='_blank'>glitch-soc</a>,
+              mastodon: <a href='https://github.com/tootsuite/mastodon' rel='noopener noreferrer' target='_blank'>Mastodon</a>,
+              pleroma: <a href='https://pleroma.social' rel='noopener noreferrer' target='_blank'>Pleroma</a>
+            }}
           />
         </p>
       </div>

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,
 };
 

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;
+};

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;

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,
+  };
+};

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}",

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}",

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,
 };

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;
+};

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;