Verified Commit 6b3614ae authored by Morgan Bazalgette's avatar Morgan Bazalgette Committed by Haelwenn
Browse files

Getting-Started column customisation (panel, notice)

parent 6bf85517
......@@ -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,6 +177,8 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2);
</div>,
]);
const instance_panel = (customPanelEnabled ? <div className='getting-started getting-started__panel' 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'>
......@@ -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>
......
import { connect } from 'react-redux';
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
import { FormattedMessage, 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'>
<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'
defaultMessage='Glitchsoc is open source software, a friendly fork of {Mastodon}. You can contribute or report issues on GitHub at {github}.'
id='getting_started.mastofe_notice'
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>,
Mastodon: <a href='https://github.com/tootsuite/mastodon' rel='noopener noreferrer' target='_blank'>Mastodon</a> }}
mastofe: <a href='https://git.pleroma.social/pleroma/mastofe' rel='noopener noreferrer' target='_blank'>Mastofe</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>
......
......@@ -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';
import announcements from './announcements';
......@@ -74,6 +75,7 @@ const reducers = {
suggestions,
pinnedAccountsEditor,
polls,
custom_panel,
trends,
};
......
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;
};
......@@ -894,10 +894,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;
......@@ -910,7 +915,6 @@
p {
color: $dark-text-color;
font-size: 13px;
margin-bottom: 20px;
a {
color: $dark-text-color;
......
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,
};
};
......@@ -177,6 +177,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}",
......
......@@ -173,6 +173,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}",
......
......@@ -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';
import announcements from './announcements';
......@@ -71,6 +72,7 @@ const reducers = {
conversations,
suggestions,
polls,
custom_panel,
trends,
missed_updates,
};
......
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;
};
......@@ -2374,9 +2374,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)) {
......@@ -2839,10 +2849,6 @@ a.account__display-name {
background: $ui-base-color;
}
.getting-started__wrapper {
flex: 0 0 auto;
}
.flex-spacer {
flex: 1 1 auto;
}
......@@ -2850,11 +2856,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;
......@@ -2865,9 +2881,7 @@ a.account__display-name {
}
p {
color: $dark-text-color;
font-size: 13px;
margin-bottom: 20px;
a {
color: $dark-text-color;
......@@ -2887,6 +2901,12 @@ a.account__display-name {
}
}
&__wrapper,
&__footer
{
color: $dark-text-color;
}
&__trends {
flex: 0 1 auto;
opacity: 1;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment