Merge branch 'main' of https://github.com/glitch-soc/mastodon
This commit is contained in:
Essem
commit
8f2327095e
62 changed files with 1614 additions and 1242 deletions
|
|
@ -176,7 +176,10 @@ class ApplicationController < ActionController::Base
|
|||
return unless self_destruct?
|
||||
|
||||
respond_to do |format|
|
||||
format.any { render 'errors/self_destruct', layout: 'auth', status: 410, formats: [:html] }
|
||||
format.any do
|
||||
use_pack 'error'
|
||||
render 'errors/self_destruct', layout: 'auth', status: 410, formats: [:html]
|
||||
end
|
||||
format.json { render json: { error: Rack::Utils::HTTP_STATUS_CODES[410] }, status: code }
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -1,69 +0,0 @@
|
|||
import api from '../api';
|
||||
|
||||
export const ACCOUNT_NOTE_SUBMIT_REQUEST = 'ACCOUNT_NOTE_SUBMIT_REQUEST';
|
||||
export const ACCOUNT_NOTE_SUBMIT_SUCCESS = 'ACCOUNT_NOTE_SUBMIT_SUCCESS';
|
||||
export const ACCOUNT_NOTE_SUBMIT_FAIL = 'ACCOUNT_NOTE_SUBMIT_FAIL';
|
||||
|
||||
export const ACCOUNT_NOTE_INIT_EDIT = 'ACCOUNT_NOTE_INIT_EDIT';
|
||||
export const ACCOUNT_NOTE_CANCEL = 'ACCOUNT_NOTE_CANCEL';
|
||||
|
||||
export const ACCOUNT_NOTE_CHANGE_COMMENT = 'ACCOUNT_NOTE_CHANGE_COMMENT';
|
||||
|
||||
export function submitAccountNote() {
|
||||
return (dispatch, getState) => {
|
||||
dispatch(submitAccountNoteRequest());
|
||||
|
||||
const id = getState().getIn(['account_notes', 'edit', 'account_id']);
|
||||
|
||||
api(getState).post(`/api/v1/accounts/${id}/note`, {
|
||||
comment: getState().getIn(['account_notes', 'edit', 'comment']),
|
||||
}).then(response => {
|
||||
dispatch(submitAccountNoteSuccess(response.data));
|
||||
}).catch(error => dispatch(submitAccountNoteFail(error)));
|
||||
};
|
||||
}
|
||||
|
||||
export function submitAccountNoteRequest() {
|
||||
return {
|
||||
type: ACCOUNT_NOTE_SUBMIT_REQUEST,
|
||||
};
|
||||
}
|
||||
|
||||
export function submitAccountNoteSuccess(relationship) {
|
||||
return {
|
||||
type: ACCOUNT_NOTE_SUBMIT_SUCCESS,
|
||||
relationship,
|
||||
};
|
||||
}
|
||||
|
||||
export function submitAccountNoteFail(error) {
|
||||
return {
|
||||
type: ACCOUNT_NOTE_SUBMIT_FAIL,
|
||||
error,
|
||||
};
|
||||
}
|
||||
|
||||
export function initEditAccountNote(account) {
|
||||
return (dispatch, getState) => {
|
||||
const comment = getState().getIn(['relationships', account.get('id'), 'note']);
|
||||
|
||||
dispatch({
|
||||
type: ACCOUNT_NOTE_INIT_EDIT,
|
||||
account,
|
||||
comment,
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export function cancelAccountNote() {
|
||||
return {
|
||||
type: ACCOUNT_NOTE_CANCEL,
|
||||
};
|
||||
}
|
||||
|
||||
export function changeAccountNoteComment(comment) {
|
||||
return {
|
||||
type: ACCOUNT_NOTE_CHANGE_COMMENT,
|
||||
comment,
|
||||
};
|
||||
}
|
||||
18
app/javascript/flavours/glitch/actions/account_notes.ts
Normal file
18
app/javascript/flavours/glitch/actions/account_notes.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { createAppAsyncThunk } from 'flavours/glitch/store/typed_functions';
|
||||
|
||||
import api from '../api';
|
||||
|
||||
export const submitAccountNote = createAppAsyncThunk(
|
||||
'account_note/submit',
|
||||
async (args: { id: string; value: string }, { getState }) => {
|
||||
// TODO: replace `unknown` with `ApiRelationshipJSON` when it is merged
|
||||
const response = await api(getState).post<unknown>(
|
||||
`/api/v1/accounts/${args.id}/note`,
|
||||
{
|
||||
comment: args.value,
|
||||
},
|
||||
);
|
||||
|
||||
return { relationship: response.data };
|
||||
},
|
||||
);
|
||||
|
|
@ -12,52 +12,48 @@ export const ALERT_DISMISS = 'ALERT_DISMISS';
|
|||
export const ALERT_CLEAR = 'ALERT_CLEAR';
|
||||
export const ALERT_NOOP = 'ALERT_NOOP';
|
||||
|
||||
export function dismissAlert(alert) {
|
||||
return {
|
||||
type: ALERT_DISMISS,
|
||||
alert,
|
||||
};
|
||||
}
|
||||
export const dismissAlert = alert => ({
|
||||
type: ALERT_DISMISS,
|
||||
alert,
|
||||
});
|
||||
|
||||
export function clearAlert() {
|
||||
return {
|
||||
type: ALERT_CLEAR,
|
||||
};
|
||||
}
|
||||
export const clearAlert = () => ({
|
||||
type: ALERT_CLEAR,
|
||||
});
|
||||
|
||||
export function showAlert(title = messages.unexpectedTitle, message = messages.unexpectedMessage, message_values = undefined) {
|
||||
return {
|
||||
type: ALERT_SHOW,
|
||||
title,
|
||||
message,
|
||||
message_values,
|
||||
};
|
||||
}
|
||||
export const showAlert = alert => ({
|
||||
type: ALERT_SHOW,
|
||||
alert,
|
||||
});
|
||||
|
||||
export function showAlertForError(error, skipNotFound = false) {
|
||||
export const showAlertForError = (error, skipNotFound = false) => {
|
||||
if (error.response) {
|
||||
const { data, status, statusText, headers } = error.response;
|
||||
|
||||
// Skip these errors as they are reflected in the UI
|
||||
if (skipNotFound && (status === 404 || status === 410)) {
|
||||
// Skip these errors as they are reflected in the UI
|
||||
return { type: ALERT_NOOP };
|
||||
}
|
||||
|
||||
// Rate limit errors
|
||||
if (status === 429 && headers['x-ratelimit-reset']) {
|
||||
const reset_date = new Date(headers['x-ratelimit-reset']);
|
||||
return showAlert(messages.rateLimitedTitle, messages.rateLimitedMessage, { 'retry_time': reset_date });
|
||||
return showAlert({
|
||||
title: messages.rateLimitedTitle,
|
||||
message: messages.rateLimitedMessage,
|
||||
values: { 'retry_time': new Date(headers['x-ratelimit-reset']) },
|
||||
});
|
||||
}
|
||||
|
||||
let message = statusText;
|
||||
let title = `${status}`;
|
||||
|
||||
if (data.error) {
|
||||
message = data.error;
|
||||
}
|
||||
|
||||
return showAlert(title, message);
|
||||
} else {
|
||||
console.error(error);
|
||||
return showAlert();
|
||||
return showAlert({
|
||||
title: `${status}`,
|
||||
message: data.error || statusText,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
console.error(error);
|
||||
|
||||
return showAlert({
|
||||
title: messages.unexpectedTitle,
|
||||
message: messages.unexpectedMessage,
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -85,9 +85,13 @@ export const COMPOSE_CHANGE_MEDIA_DESCRIPTION = 'COMPOSE_CHANGE_MEDIA_DESCRIPTIO
|
|||
export const COMPOSE_CHANGE_MEDIA_FOCUS = 'COMPOSE_CHANGE_MEDIA_FOCUS';
|
||||
|
||||
export const COMPOSE_SET_STATUS = 'COMPOSE_SET_STATUS';
|
||||
export const COMPOSE_FOCUS = 'COMPOSE_FOCUS';
|
||||
|
||||
const messages = defineMessages({
|
||||
uploadErrorLimit: { id: 'upload_error.limit', defaultMessage: 'File upload limit exceeded.' },
|
||||
open: { id: 'compose.published.open', defaultMessage: 'Open' },
|
||||
published: { id: 'compose.published.body', defaultMessage: 'Post published.' },
|
||||
saved: { id: 'compose.saved.body', defaultMessage: 'Post saved.' },
|
||||
});
|
||||
|
||||
export const ensureComposeIsVisible = (getState, routerHistory) => {
|
||||
|
|
@ -144,6 +148,15 @@ export function resetCompose() {
|
|||
};
|
||||
}
|
||||
|
||||
export const focusCompose = (routerHistory, defaultText) => dispatch => {
|
||||
dispatch({
|
||||
type: COMPOSE_FOCUS,
|
||||
defaultText,
|
||||
});
|
||||
|
||||
ensureComposeIsVisible(routerHistory);
|
||||
};
|
||||
|
||||
export function mentionCompose(account, routerHistory) {
|
||||
return (dispatch, getState) => {
|
||||
dispatch({
|
||||
|
|
@ -264,6 +277,13 @@ export function submitCompose(routerHistory) {
|
|||
} else if (statusId === null && response.data.visibility === 'direct') {
|
||||
insertIfOnline('direct');
|
||||
}
|
||||
|
||||
dispatch(showAlert({
|
||||
message: statusId === null ? messages.published : messages.saved,
|
||||
action: messages.open,
|
||||
dismissAfter: 10000,
|
||||
onClick: () => routerHistory.push(`/@${response.data.account.username}/${response.data.id}`),
|
||||
}));
|
||||
}).catch(function (error) {
|
||||
dispatch(submitComposeFail(error));
|
||||
});
|
||||
|
|
@ -307,13 +327,14 @@ export function tenorSet(options) {
|
|||
export function uploadCompose(files, alt = '') {
|
||||
return function (dispatch, getState) {
|
||||
const uploadLimit = 4;
|
||||
const media = getState().getIn(['compose', 'media_attachments']);
|
||||
const pending = getState().getIn(['compose', 'pending_media_attachments']);
|
||||
const media = getState().getIn(['compose', 'media_attachments']);
|
||||
const pending = getState().getIn(['compose', 'pending_media_attachments']);
|
||||
const progress = new Array(files.length).fill(0);
|
||||
|
||||
let total = Array.from(files).reduce((a, v) => a + v.size, 0);
|
||||
|
||||
if (files.length + media.size + pending > uploadLimit) {
|
||||
dispatch(showAlert(undefined, messages.uploadErrorLimit));
|
||||
dispatch(showAlert({ message: messages.uploadErrorLimit }));
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,8 @@
|
|||
import { openModal } from './modal';
|
||||
import { changeSetting, saveSettings } from './settings';
|
||||
|
||||
export function showOnboardingOnce() {
|
||||
return (dispatch, getState) => {
|
||||
const alreadySeen = getState().getIn(['settings', 'onboarded']);
|
||||
export const INTRODUCTION_VERSION = 20181216044202;
|
||||
|
||||
if (!alreadySeen) {
|
||||
dispatch(openModal({
|
||||
modalType: 'ONBOARDING',
|
||||
}));
|
||||
dispatch(changeSetting(['onboarded'], true));
|
||||
dispatch(saveSettings());
|
||||
}
|
||||
};
|
||||
}
|
||||
export const closeOnboarding = () => dispatch => {
|
||||
dispatch(changeSetting(['introductionVersion'], INTRODUCTION_VERSION));
|
||||
dispatch(saveSettings());
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,75 +0,0 @@
|
|||
// @ts-check
|
||||
|
||||
import axios from 'axios';
|
||||
import LinkHeader from 'http-link-header';
|
||||
|
||||
import ready from './ready';
|
||||
/**
|
||||
* @param {import('axios').AxiosResponse} response
|
||||
* @returns {LinkHeader}
|
||||
*/
|
||||
export const getLinks = response => {
|
||||
const value = response.headers.link;
|
||||
|
||||
if (!value) {
|
||||
return new LinkHeader();
|
||||
}
|
||||
|
||||
return LinkHeader.parse(value);
|
||||
};
|
||||
|
||||
/** @type {import('axios').RawAxiosRequestHeaders} */
|
||||
const csrfHeader = {};
|
||||
|
||||
/**
|
||||
* @returns {void}
|
||||
*/
|
||||
const setCSRFHeader = () => {
|
||||
/** @type {HTMLMetaElement | null} */
|
||||
const csrfToken = document.querySelector('meta[name=csrf-token]');
|
||||
|
||||
if (csrfToken) {
|
||||
csrfHeader['X-CSRF-Token'] = csrfToken.content;
|
||||
}
|
||||
};
|
||||
|
||||
ready(setCSRFHeader);
|
||||
|
||||
/**
|
||||
* @param {() => import('immutable').Map<string,any>} getState
|
||||
* @returns {import('axios').RawAxiosRequestHeaders}
|
||||
*/
|
||||
const authorizationHeaderFromState = getState => {
|
||||
const accessToken = getState && getState().getIn(['meta', 'access_token'], '');
|
||||
|
||||
if (!accessToken) {
|
||||
return {};
|
||||
}
|
||||
|
||||
return {
|
||||
'Authorization': `Bearer ${accessToken}`,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {() => import('immutable').Map<string,any>} getState
|
||||
* @returns {import('axios').AxiosInstance}
|
||||
*/
|
||||
export default function api(getState) {
|
||||
return axios.create({
|
||||
headers: {
|
||||
...csrfHeader,
|
||||
...authorizationHeaderFromState(getState),
|
||||
},
|
||||
|
||||
transformResponse: [
|
||||
function (data) {
|
||||
try {
|
||||
return JSON.parse(data);
|
||||
} catch {
|
||||
return data;
|
||||
}
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
63
app/javascript/flavours/glitch/api.ts
Normal file
63
app/javascript/flavours/glitch/api.ts
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
import type { AxiosResponse, RawAxiosRequestHeaders } from 'axios';
|
||||
import axios from 'axios';
|
||||
import LinkHeader from 'http-link-header';
|
||||
|
||||
import ready from './ready';
|
||||
import type { GetState } from './store';
|
||||
|
||||
export const getLinks = (response: AxiosResponse) => {
|
||||
const value = response.headers.link as string | undefined;
|
||||
|
||||
if (!value) {
|
||||
return new LinkHeader();
|
||||
}
|
||||
|
||||
return LinkHeader.parse(value);
|
||||
};
|
||||
|
||||
const csrfHeader: RawAxiosRequestHeaders = {};
|
||||
|
||||
const setCSRFHeader = () => {
|
||||
const csrfToken = document.querySelector<HTMLMetaElement>(
|
||||
'meta[name=csrf-token]',
|
||||
);
|
||||
|
||||
if (csrfToken) {
|
||||
csrfHeader['X-CSRF-Token'] = csrfToken.content;
|
||||
}
|
||||
};
|
||||
|
||||
void ready(setCSRFHeader);
|
||||
|
||||
const authorizationHeaderFromState = (getState?: GetState) => {
|
||||
const accessToken =
|
||||
getState && (getState().meta.get('access_token', '') as string);
|
||||
|
||||
if (!accessToken) {
|
||||
return {};
|
||||
}
|
||||
|
||||
return {
|
||||
Authorization: `Bearer ${accessToken}`,
|
||||
} as RawAxiosRequestHeaders;
|
||||
};
|
||||
|
||||
// eslint-disable-next-line import/no-default-export
|
||||
export default function api(getState: GetState) {
|
||||
return axios.create({
|
||||
headers: {
|
||||
...csrfHeader,
|
||||
...authorizationHeaderFromState(getState),
|
||||
},
|
||||
|
||||
transformResponse: [
|
||||
function (data: unknown) {
|
||||
try {
|
||||
return JSON.parse(data as string) as unknown;
|
||||
} catch {
|
||||
return data;
|
||||
}
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
|
@ -1,15 +1,21 @@
|
|||
import PropTypes from 'prop-types';
|
||||
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
import { Skeleton } from 'flavours/glitch/components/skeleton';
|
||||
import { EmptyAccount } from 'flavours/glitch/components/empty_account';
|
||||
import { ShortNumber } from 'flavours/glitch/components/short_number';
|
||||
import { VerifiedBadge } from 'flavours/glitch/components/verified_badge';
|
||||
|
||||
import { me } from '../initial_state';
|
||||
|
||||
import { Avatar } from './avatar';
|
||||
import { Button } from './button';
|
||||
import { FollowersCounter } from './counters';
|
||||
import { DisplayName } from './display_name';
|
||||
import { IconButton } from './icon_button';
|
||||
import Permalink from './permalink';
|
||||
|
|
@ -18,13 +24,13 @@ import { RelativeTimestamp } from './relative_timestamp';
|
|||
const messages = defineMessages({
|
||||
follow: { id: 'account.follow', defaultMessage: 'Follow' },
|
||||
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
|
||||
requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' },
|
||||
unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
|
||||
unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
|
||||
mute_notifications: { id: 'account.mute_notifications', defaultMessage: 'Mute notifications from @{name}' },
|
||||
unmute_notifications: { id: 'account.unmute_notifications', defaultMessage: 'Unmute notifications from @{name}' },
|
||||
mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
|
||||
block: { id: 'account.block', defaultMessage: 'Block @{name}' },
|
||||
cancel_follow_request: { id: 'account.cancel_follow_request', defaultMessage: 'Withdraw follow request' },
|
||||
unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' },
|
||||
unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' },
|
||||
mute_notifications: { id: 'account.mute_notifications_short', defaultMessage: 'Mute notifications' },
|
||||
unmute_notifications: { id: 'account.unmute_notifications_short', defaultMessage: 'Unmute notifications' },
|
||||
mute: { id: 'account.mute_short', defaultMessage: 'Mute' },
|
||||
block: { id: 'account.block_short', defaultMessage: 'Block' },
|
||||
});
|
||||
|
||||
class Account extends ImmutablePureComponent {
|
||||
|
|
@ -38,14 +44,16 @@ class Account extends ImmutablePureComponent {
|
|||
onMuteNotifications: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
hidden: PropTypes.bool,
|
||||
minimal: PropTypes.bool,
|
||||
actionIcon: PropTypes.string,
|
||||
actionTitle: PropTypes.string,
|
||||
defaultAction: PropTypes.string,
|
||||
onActionClick: PropTypes.func,
|
||||
withBio: PropTypes.bool,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
size: 36,
|
||||
size: 46,
|
||||
};
|
||||
|
||||
handleFollow = () => {
|
||||
|
|
@ -73,19 +81,10 @@ class Account extends ImmutablePureComponent {
|
|||
};
|
||||
|
||||
render () {
|
||||
const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size } = this.props;
|
||||
const { account, intl, hidden, withBio, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props;
|
||||
|
||||
if (!account) {
|
||||
return (
|
||||
<div className='account'>
|
||||
<div className='account__wrapper'>
|
||||
<div className='account__display-name'>
|
||||
<div className='account__avatar-wrapper'><Skeleton width={36} height={36} /></div>
|
||||
<DisplayName />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return <EmptyAccount size={size} minimal={minimal} />;
|
||||
}
|
||||
|
||||
if (hidden) {
|
||||
|
|
@ -99,61 +98,91 @@ class Account extends ImmutablePureComponent {
|
|||
|
||||
let buttons;
|
||||
|
||||
if (onActionClick) {
|
||||
if (actionIcon) {
|
||||
buttons = <IconButton icon={actionIcon} title={actionTitle} onClick={this.handleAction} />;
|
||||
}
|
||||
} else if (account.get('id') !== me && account.get('relationship', null) !== null) {
|
||||
if (actionIcon && onActionClick) {
|
||||
buttons = <IconButton icon={actionIcon} title={actionTitle} onClick={this.handleAction} />;
|
||||
} else if (!actionIcon && account.get('id') !== me && account.get('relationship', null) !== null) {
|
||||
const following = account.getIn(['relationship', 'following']);
|
||||
const requested = account.getIn(['relationship', 'requested']);
|
||||
const blocking = account.getIn(['relationship', 'blocking']);
|
||||
const muting = account.getIn(['relationship', 'muting']);
|
||||
|
||||
if (requested) {
|
||||
buttons = <IconButton disabled icon='hourglass' title={intl.formatMessage(messages.requested)} />;
|
||||
buttons = <Button text={intl.formatMessage(messages.cancel_follow_request)} onClick={this.handleFollow} />;
|
||||
} else if (blocking) {
|
||||
buttons = <IconButton active icon='unlock' title={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.handleBlock} />;
|
||||
buttons = <Button text={intl.formatMessage(messages.unblock)} onClick={this.handleBlock} />;
|
||||
} else if (muting) {
|
||||
let hidingNotificationsButton;
|
||||
|
||||
if (account.getIn(['relationship', 'muting_notifications'])) {
|
||||
hidingNotificationsButton = <IconButton active icon='bell' title={intl.formatMessage(messages.unmute_notifications, { name: account.get('username') })} onClick={this.handleUnmuteNotifications} />;
|
||||
hidingNotificationsButton = <Button text={intl.formatMessage(messages.unmute_notifications)} onClick={this.handleUnmuteNotifications} />;
|
||||
} else {
|
||||
hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username') })} onClick={this.handleMuteNotifications} />;
|
||||
hidingNotificationsButton = <Button text={intl.formatMessage(messages.mute_notifications)} onClick={this.handleMuteNotifications} />;
|
||||
}
|
||||
|
||||
buttons = (
|
||||
<>
|
||||
<IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />
|
||||
<Button text={intl.formatMessage(messages.unmute)} onClick={this.handleMute} />
|
||||
{hidingNotificationsButton}
|
||||
</>
|
||||
);
|
||||
} else if (defaultAction === 'mute') {
|
||||
buttons = <IconButton icon='volume-off' title={intl.formatMessage(messages.mute, { name: account.get('username') })} onClick={this.handleMute} />;
|
||||
buttons = <Button title={intl.formatMessage(messages.mute)} onClick={this.handleMute} />;
|
||||
} else if (defaultAction === 'block') {
|
||||
buttons = <IconButton icon='lock' title={intl.formatMessage(messages.block, { name: account.get('username') })} onClick={this.handleBlock} />;
|
||||
buttons = <Button text={intl.formatMessage(messages.block)} onClick={this.handleBlock} />;
|
||||
} else if (!account.get('moved') || following) {
|
||||
buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />;
|
||||
buttons = <Button text={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} />;
|
||||
}
|
||||
}
|
||||
|
||||
let mute_expires_at;
|
||||
let muteTimeRemaining;
|
||||
|
||||
if (account.get('mute_expires_at')) {
|
||||
mute_expires_at = <div><RelativeTimestamp timestamp={account.get('mute_expires_at')} futureDate /></div>;
|
||||
muteTimeRemaining = <>· <RelativeTimestamp timestamp={account.get('mute_expires_at')} futureDate /></>;
|
||||
}
|
||||
|
||||
let verification;
|
||||
|
||||
const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at'));
|
||||
|
||||
if (firstVerifiedField) {
|
||||
verification = <VerifiedBadge link={firstVerifiedField.get('value')} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='account'>
|
||||
<div className={classNames('account', { 'account--minimal': minimal })}>
|
||||
<div className='account__wrapper'>
|
||||
<Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
|
||||
<div className='account__avatar-wrapper'><Avatar account={account} size={size} /></div>
|
||||
{mute_expires_at}
|
||||
<DisplayName account={account} />
|
||||
<div className='account__avatar-wrapper'>
|
||||
<Avatar account={account} size={size} />
|
||||
</div>
|
||||
|
||||
<div className='account__contents'>
|
||||
<DisplayName account={account} inline />
|
||||
{!minimal && (
|
||||
<div className='account__details'>
|
||||
{account.get('followers_count') !== -1 && (
|
||||
<ShortNumber value={account.get('followers_count')} renderer={FollowersCounter} />
|
||||
)} {verification} {muteTimeRemaining}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Permalink>
|
||||
{buttons ?
|
||||
|
||||
{!minimal && (
|
||||
<div className='account__relationship'>
|
||||
{buttons}
|
||||
</div>
|
||||
: null}
|
||||
)}
|
||||
</div>
|
||||
|
||||
{withBio && (account.get('note').length > 0 ? (
|
||||
<div
|
||||
className='account__note translate'
|
||||
dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
|
||||
/>
|
||||
) : (
|
||||
<div className='account__note account__note--missing'><FormattedMessage id='account.no_bio' defaultMessage='No description provided.' /></div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
const Check = () => (
|
||||
<svg width='14' height='11' viewBox='0 0 14 11'>
|
||||
<path d='M11.264 0L5.26 6.004 2.103 2.847 0 4.95l5.26 5.26 8.108-8.107L11.264 0' fill='currentColor' fillRule='evenodd' />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default Check;
|
||||
13
app/javascript/flavours/glitch/components/check.tsx
Normal file
13
app/javascript/flavours/glitch/components/check.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
export const Check: React.FC = () => (
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
viewBox='0 0 20 20'
|
||||
fill='currentColor'
|
||||
>
|
||||
<path
|
||||
fillRule='evenodd'
|
||||
d='M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z'
|
||||
clipRule='evenodd'
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -13,13 +13,16 @@ export class ColumnBackButton extends PureComponent {
|
|||
|
||||
static propTypes = {
|
||||
multiColumn: PropTypes.bool,
|
||||
onClick: PropTypes.func,
|
||||
...WithRouterPropTypes,
|
||||
};
|
||||
|
||||
handleClick = () => {
|
||||
const { history } = this.props;
|
||||
const { onClick, history } = this.props;
|
||||
|
||||
if (history.location?.state?.fromMastodon) {
|
||||
if (onClick) {
|
||||
onClick();
|
||||
} else if (history.location?.state?.fromMastodon) {
|
||||
history.goBack();
|
||||
} else {
|
||||
history.push('/');
|
||||
|
|
|
|||
33
app/javascript/flavours/glitch/components/empty_account.tsx
Normal file
33
app/javascript/flavours/glitch/components/empty_account.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import React from 'react';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { DisplayName } from 'flavours/glitch/components/display_name';
|
||||
import { Skeleton } from 'flavours/glitch/components/skeleton';
|
||||
|
||||
interface Props {
|
||||
size?: number;
|
||||
minimal?: boolean;
|
||||
}
|
||||
|
||||
export const EmptyAccount: React.FC<Props> = ({
|
||||
size = 46,
|
||||
minimal = false,
|
||||
}) => {
|
||||
return (
|
||||
<div className={classNames('account', { 'account--minimal': minimal })}>
|
||||
<div className='account__wrapper'>
|
||||
<div className='account__display-name'>
|
||||
<div className='account__avatar-wrapper'>
|
||||
<Skeleton width={size} height={size} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<DisplayName />
|
||||
<Skeleton width='7ch' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -63,7 +63,7 @@ class ServerBanner extends PureComponent {
|
|||
<div className='server-banner__meta__column'>
|
||||
<h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4>
|
||||
|
||||
<Account id={server.getIn(['contact', 'account', 'id'])} size={36} />
|
||||
<Account id={server.getIn(['contact', 'account', 'id'])} size={36} minimal />
|
||||
</div>
|
||||
|
||||
<div className='server-banner__meta__column'>
|
||||
|
|
|
|||
27
app/javascript/flavours/glitch/components/verified_badge.tsx
Normal file
27
app/javascript/flavours/glitch/components/verified_badge.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import { Icon } from './icon';
|
||||
|
||||
const domParser = new DOMParser();
|
||||
|
||||
const stripRelMe = (html: string) => {
|
||||
const document = domParser.parseFromString(html, 'text/html').documentElement;
|
||||
|
||||
document.querySelectorAll<HTMLAnchorElement>('a[rel]').forEach((link) => {
|
||||
link.rel = link.rel
|
||||
.split(' ')
|
||||
.filter((x: string) => x !== 'me')
|
||||
.join(' ');
|
||||
});
|
||||
|
||||
const body = document.querySelector('body');
|
||||
return body ? { __html: body.innerHTML } : undefined;
|
||||
};
|
||||
|
||||
interface Props {
|
||||
link: string;
|
||||
}
|
||||
export const VerifiedBadge: React.FC<Props> = ({ link }) => (
|
||||
<span className='verified-badge'>
|
||||
<Icon id='check' className='verified-badge__mark' />
|
||||
<span dangerouslySetInnerHTML={stripRelMe(link)} />
|
||||
</span>
|
||||
);
|
||||
|
|
@ -128,7 +128,7 @@ class About extends PureComponent {
|
|||
<div className='about__meta__column'>
|
||||
<h4><FormattedMessage id='server_banner.administered_by' defaultMessage='Administered by:' /></h4>
|
||||
|
||||
<Account id={server.getIn(['contact', 'account', 'id'])} size={36} />
|
||||
<Account id={server.getIn(['contact', 'account', 'id'])} size={36} minimal />
|
||||
</div>
|
||||
|
||||
<hr className='about__meta__divider' />
|
||||
|
|
|
|||
|
|
@ -1,108 +1,174 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import { PureComponent } from 'react';
|
||||
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
|
||||
import { is } from 'immutable';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
import Textarea from 'react-textarea-autosize';
|
||||
|
||||
import { Icon } from 'flavours/glitch/components/icon';
|
||||
|
||||
const messages = defineMessages({
|
||||
placeholder: { id: 'account_note.glitch_placeholder', defaultMessage: 'No comment provided' },
|
||||
placeholder: { id: 'account_note.placeholder', defaultMessage: 'Click to add a note' },
|
||||
});
|
||||
|
||||
class Header extends ImmutablePureComponent {
|
||||
class InlineAlert extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.map.isRequired,
|
||||
isEditing: PropTypes.bool,
|
||||
isSubmitting: PropTypes.bool,
|
||||
accountNote: PropTypes.string,
|
||||
onEditAccountNote: PropTypes.func.isRequired,
|
||||
onCancelAccountNote: PropTypes.func.isRequired,
|
||||
onSaveAccountNote: PropTypes.func.isRequired,
|
||||
onChangeAccountNote: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
show: PropTypes.bool,
|
||||
};
|
||||
|
||||
handleChangeAccountNote = (e) => {
|
||||
this.props.onChangeAccountNote(e.target.value);
|
||||
state = {
|
||||
mountMessage: false,
|
||||
};
|
||||
|
||||
componentWillUnmount () {
|
||||
if (this.props.isEditing) {
|
||||
this.props.onCancelAccountNote();
|
||||
static TRANSITION_DELAY = 200;
|
||||
|
||||
UNSAFE_componentWillReceiveProps (nextProps) {
|
||||
if (!this.props.show && nextProps.show) {
|
||||
this.setState({ mountMessage: true });
|
||||
} else if (this.props.show && !nextProps.show) {
|
||||
setTimeout(() => this.setState({ mountMessage: false }), InlineAlert.TRANSITION_DELAY);
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const { show } = this.props;
|
||||
const { mountMessage } = this.state;
|
||||
|
||||
return (
|
||||
<span aria-live='polite' role='status' className='inline-alert' style={{ opacity: show ? 1 : 0 }}>
|
||||
{mountMessage && <FormattedMessage id='generic.saved' defaultMessage='Saved' />}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class AccountNote extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.map.isRequired,
|
||||
value: PropTypes.string,
|
||||
onSave: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
state = {
|
||||
value: null,
|
||||
saving: false,
|
||||
saved: false,
|
||||
};
|
||||
|
||||
UNSAFE_componentWillMount () {
|
||||
this._reset();
|
||||
}
|
||||
|
||||
UNSAFE_componentWillReceiveProps (nextProps) {
|
||||
const accountWillChange = !is(this.props.account, nextProps.account);
|
||||
const newState = {};
|
||||
|
||||
if (accountWillChange && this._isDirty()) {
|
||||
this._save(false);
|
||||
}
|
||||
|
||||
if (accountWillChange || nextProps.value === this.state.value) {
|
||||
newState.saving = false;
|
||||
}
|
||||
|
||||
if (this.props.value !== nextProps.value) {
|
||||
newState.value = nextProps.value;
|
||||
}
|
||||
|
||||
this.setState(newState);
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
if (this._isDirty()) {
|
||||
this._save(false);
|
||||
}
|
||||
}
|
||||
|
||||
setTextareaRef = c => {
|
||||
this.textarea = c;
|
||||
};
|
||||
|
||||
handleChange = e => {
|
||||
this.setState({ value: e.target.value, saving: false });
|
||||
};
|
||||
|
||||
handleKeyDown = e => {
|
||||
if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
|
||||
this.props.onSaveAccountNote();
|
||||
e.preventDefault();
|
||||
|
||||
this._save();
|
||||
|
||||
if (this.textarea) {
|
||||
this.textarea.blur();
|
||||
}
|
||||
} else if (e.keyCode === 27) {
|
||||
this.props.onCancelAccountNote();
|
||||
e.preventDefault();
|
||||
|
||||
this._reset(() => {
|
||||
if (this.textarea) {
|
||||
this.textarea.blur();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
handleBlur = () => {
|
||||
if (this._isDirty()) {
|
||||
this._save();
|
||||
}
|
||||
};
|
||||
|
||||
_save (showMessage = true) {
|
||||
this.setState({ saving: true }, () => this.props.onSave(this.state.value));
|
||||
|
||||
if (showMessage) {
|
||||
this.setState({ saved: true }, () => setTimeout(() => this.setState({ saved: false }), 2000));
|
||||
}
|
||||
}
|
||||
|
||||
_reset (callback) {
|
||||
this.setState({ value: this.props.value }, callback);
|
||||
}
|
||||
|
||||
_isDirty () {
|
||||
return !this.state.saving && this.props.value !== null && this.state.value !== null && this.state.value !== this.props.value;
|
||||
}
|
||||
|
||||
render () {
|
||||
const { account, accountNote, isEditing, isSubmitting, intl } = this.props;
|
||||
const { account, intl } = this.props;
|
||||
const { value, saved } = this.state;
|
||||
|
||||
if (!account || (!accountNote && !isEditing)) {
|
||||
if (!account) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let action_buttons = null;
|
||||
if (isEditing) {
|
||||
action_buttons = (
|
||||
<div className='account__header__account-note__buttons'>
|
||||
<button className='icon-button' tabIndex={0} onClick={this.props.onCancelAccountNote} disabled={isSubmitting}>
|
||||
<Icon id='times' size={15} /> <FormattedMessage id='account_note.cancel' defaultMessage='Cancel' />
|
||||
</button>
|
||||
<div className='flex-spacer' />
|
||||
<button className='icon-button' tabIndex={0} onClick={this.props.onSaveAccountNote} disabled={isSubmitting}>
|
||||
<Icon id='check' size={15} /> <FormattedMessage id='account_note.save' defaultMessage='Save' />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
action_buttons = (
|
||||
<div className='account__header__account-note__buttons'>
|
||||
<button className='icon-button' tabIndex={0} onClick={this.props.onEditAccountNote} disabled={isSubmitting}>
|
||||
<Icon id='pencil' size={15} /> <FormattedMessage id='account_note.edit' defaultMessage='Edit' />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
let note_container = null;
|
||||
if (isEditing) {
|
||||
note_container = (
|
||||
<Textarea
|
||||
className='account__header__account-note__content'
|
||||
disabled={isSubmitting}
|
||||
placeholder={intl.formatMessage(messages.placeholder)}
|
||||
value={accountNote}
|
||||
onChange={this.handleChangeAccountNote}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
autoFocus
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
note_container = (<div className='account__header__account-note__content'>{accountNote}</div>);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='account__header__account-note'>
|
||||
<div className='account__header__account-note__header'>
|
||||
<strong><FormattedMessage id='account.account_note_header' defaultMessage='Note' /></strong>
|
||||
{action_buttons}
|
||||
</div>
|
||||
{note_container}
|
||||
<label htmlFor={`account-note-${account.get('id')}`}>
|
||||
<FormattedMessage id='account.account_note_header' defaultMessage='Note' /> <InlineAlert show={saved} />
|
||||
</label>
|
||||
|
||||
<Textarea
|
||||
id={`account-note-${account.get('id')}`}
|
||||
className='account__header__account-note__content'
|
||||
disabled={this.props.value === null || value === null}
|
||||
placeholder={intl.formatMessage(messages.placeholder)}
|
||||
value={value || ''}
|
||||
onChange={this.handleChange}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
onBlur={this.handleBlur}
|
||||
ref={this.setTextareaRef}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default injectIntl(Header);
|
||||
export default injectIntl(AccountNote);
|
||||
|
|
|
|||
|
|
@ -59,7 +59,6 @@ const messages = defineMessages({
|
|||
add_or_remove_from_list: { id: 'account.add_or_remove_from_list', defaultMessage: 'Add or Remove from lists' },
|
||||
admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
|
||||
admin_domain: { id: 'status.admin_domain', defaultMessage: 'Open moderation interface for {domain}' },
|
||||
add_account_note: { id: 'account.add_account_note', defaultMessage: 'Add note for @{name}' },
|
||||
languages: { id: 'account.languages', defaultMessage: 'Change subscribed languages' },
|
||||
openOriginalPage: { id: 'account.open_original_page', defaultMessage: 'Open original page' },
|
||||
});
|
||||
|
|
@ -98,7 +97,6 @@ class Header extends ImmutablePureComponent {
|
|||
onUnblockDomain: PropTypes.func.isRequired,
|
||||
onEndorseToggle: PropTypes.func.isRequired,
|
||||
onAddToList: PropTypes.func.isRequired,
|
||||
onEditAccountNote: PropTypes.func.isRequired,
|
||||
onChangeLanguages: PropTypes.func.isRequired,
|
||||
onInteractionModal: PropTypes.func.isRequired,
|
||||
onOpenAvatar: PropTypes.func.isRequired,
|
||||
|
|
@ -167,8 +165,6 @@ class Header extends ImmutablePureComponent {
|
|||
return null;
|
||||
}
|
||||
|
||||
const accountNote = account.getIn(['relationship', 'note']);
|
||||
|
||||
const suspended = account.get('suspended');
|
||||
const isRemote = account.get('acct') !== account.get('username');
|
||||
const remoteDomain = isRemote ? account.get('acct').split('@')[1] : null;
|
||||
|
|
@ -237,10 +233,6 @@ class Header extends ImmutablePureComponent {
|
|||
menu.push(null);
|
||||
}
|
||||
|
||||
if (accountNote === null || accountNote === '') {
|
||||
menu.push({ text: intl.formatMessage(messages.add_account_note, { name: account.get('username') }), action: this.props.onEditAccountNote });
|
||||
}
|
||||
|
||||
if (account.get('id') === me) {
|
||||
if (profileLink) menu.push({ text: intl.formatMessage(messages.edit_profile), href: profileLink });
|
||||
if (preferencesLink) menu.push({ text: intl.formatMessage(messages.preferences), href: preferencesLink });
|
||||
|
|
|
|||
|
|
@ -1,36 +1,19 @@
|
|||
import { connect } from 'react-redux';
|
||||
|
||||
import { changeAccountNoteComment, submitAccountNote, initEditAccountNote, cancelAccountNote } from 'flavours/glitch/actions/account_notes';
|
||||
import { submitAccountNote } from 'flavours/glitch/actions/account_notes';
|
||||
|
||||
import AccountNote from '../components/account_note';
|
||||
|
||||
const mapStateToProps = (state, { account }) => {
|
||||
const isEditing = state.getIn(['account_notes', 'edit', 'account_id']) === account.get('id');
|
||||
|
||||
return {
|
||||
isSubmitting: state.getIn(['account_notes', 'edit', 'isSubmitting']),
|
||||
accountNote: isEditing ? state.getIn(['account_notes', 'edit', 'comment']) : account.getIn(['relationship', 'note']),
|
||||
isEditing,
|
||||
};
|
||||
};
|
||||
const mapStateToProps = (state, { account }) => ({
|
||||
value: account.getIn(['relationship', 'note']),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch, { account }) => ({
|
||||
|
||||
onEditAccountNote() {
|
||||
dispatch(initEditAccountNote(account));
|
||||
onSave (value) {
|
||||
dispatch(submitAccountNote({ id: account.get('id'), value}));
|
||||
},
|
||||
|
||||
onSaveAccountNote() {
|
||||
dispatch(submitAccountNote());
|
||||
},
|
||||
|
||||
onCancelAccountNote() {
|
||||
dispatch(cancelAccountNote());
|
||||
},
|
||||
|
||||
onChangeAccountNote(comment) {
|
||||
dispatch(changeAccountNoteComment(comment));
|
||||
},
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(AccountNote);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
|||
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { initEditAccountNote } from '../../../actions/account_notes';
|
||||
import {
|
||||
followAccount,
|
||||
unfollowAccount,
|
||||
|
|
@ -139,10 +138,6 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
|
|||
}
|
||||
},
|
||||
|
||||
onEditAccountNote (account) {
|
||||
dispatch(initEditAccountNote(account));
|
||||
},
|
||||
|
||||
onBlockDomain (domain) {
|
||||
dispatch(openModal({
|
||||
modalType: 'CONFIRM',
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
|
|||
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
|
|
@ -84,6 +86,10 @@ class ComposeForm extends ImmutablePureComponent {
|
|||
showSearch: false,
|
||||
};
|
||||
|
||||
state = {
|
||||
highlighted: false,
|
||||
};
|
||||
|
||||
handleChange = (e) => {
|
||||
this.props.onChange(e.target.value);
|
||||
};
|
||||
|
|
@ -209,6 +215,10 @@ class ComposeForm extends ImmutablePureComponent {
|
|||
this._updateFocusAndSelection({ });
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
if (this.timeout) clearTimeout(this.timeout);
|
||||
}
|
||||
|
||||
componentDidUpdate (prevProps) {
|
||||
this._updateFocusAndSelection(prevProps);
|
||||
}
|
||||
|
|
@ -257,6 +267,8 @@ class ComposeForm extends ImmutablePureComponent {
|
|||
textarea.setSelectionRange(selectionStart, selectionEnd);
|
||||
textarea.focus();
|
||||
if (!singleColumn) textarea.scrollIntoView();
|
||||
this.setState({ highlighted: true });
|
||||
this.timeout = setTimeout(() => this.setState({ highlighted: false }), 700);
|
||||
}).catch(console.error);
|
||||
}
|
||||
|
||||
|
|
@ -302,6 +314,7 @@ class ComposeForm extends ImmutablePureComponent {
|
|||
spoilersAlwaysOn,
|
||||
isEditing,
|
||||
} = this.props;
|
||||
const { highlighted } = this.state;
|
||||
|
||||
const countText = this.getFulltextForCharacterCounting();
|
||||
|
||||
|
|
@ -332,42 +345,44 @@ class ComposeForm extends ImmutablePureComponent {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<AutosuggestTextarea
|
||||
ref={this.setAutosuggestTextarea}
|
||||
placeholder={intl.formatMessage(messages.placeholder)}
|
||||
disabled={isSubmitting}
|
||||
value={this.props.text}
|
||||
onChange={this.handleChange}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
suggestions={suggestions}
|
||||
onFocus={this.handleFocus}
|
||||
onSuggestionsFetchRequested={onFetchSuggestions}
|
||||
onSuggestionsClearRequested={onClearSuggestions}
|
||||
onSuggestionSelected={this.handleSuggestionSelected}
|
||||
onPaste={onPaste}
|
||||
autoFocus={!showSearch && !isMobile(window.innerWidth, layout)}
|
||||
lang={this.props.lang}
|
||||
>
|
||||
<EmojiPickerDropdown onPickEmoji={handleEmojiPick} />
|
||||
<TextareaIcons advancedOptions={advancedOptions} />
|
||||
<div className='compose-form__modifiers'>
|
||||
<UploadFormContainer />
|
||||
<PollFormContainer />
|
||||
</div>
|
||||
</AutosuggestTextarea>
|
||||
|
||||
<div className='compose-form__buttons-wrapper'>
|
||||
<OptionsContainer
|
||||
advancedOptions={advancedOptions}
|
||||
<div className={classNames('compose-form__highlightable', { active: highlighted })}>
|
||||
<AutosuggestTextarea
|
||||
ref={this.setAutosuggestTextarea}
|
||||
placeholder={intl.formatMessage(messages.placeholder)}
|
||||
disabled={isSubmitting}
|
||||
onToggleSpoiler={spoilersAlwaysOn ? null : onChangeSpoilerness}
|
||||
onUpload={onPaste}
|
||||
isEditing={isEditing}
|
||||
sensitive={sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0)}
|
||||
spoiler={spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler}
|
||||
/>
|
||||
<div className='character-counter__wrapper'>
|
||||
<CharacterCounter text={countText} max={maxChars} />
|
||||
value={this.props.text}
|
||||
onChange={this.handleChange}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
suggestions={suggestions}
|
||||
onFocus={this.handleFocus}
|
||||
onSuggestionsFetchRequested={onFetchSuggestions}
|
||||
onSuggestionsClearRequested={onClearSuggestions}
|
||||
onSuggestionSelected={this.handleSuggestionSelected}
|
||||
onPaste={onPaste}
|
||||
autoFocus={!showSearch && !isMobile(window.innerWidth, layout)}
|
||||
lang={this.props.lang}
|
||||
>
|
||||
<EmojiPickerDropdown onPickEmoji={handleEmojiPick} />
|
||||
<TextareaIcons advancedOptions={advancedOptions} />
|
||||
<div className='compose-form__modifiers'>
|
||||
<UploadFormContainer />
|
||||
<PollFormContainer />
|
||||
</div>
|
||||
</AutosuggestTextarea>
|
||||
|
||||
<div className='compose-form__buttons-wrapper'>
|
||||
<OptionsContainer
|
||||
advancedOptions={advancedOptions}
|
||||
disabled={isSubmitting}
|
||||
onToggleSpoiler={spoilersAlwaysOn ? null : onChangeSpoilerness}
|
||||
onUpload={onPaste}
|
||||
isEditing={isEditing}
|
||||
sensitive={sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0)}
|
||||
spoiler={spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler}
|
||||
/>
|
||||
<div className='character-counter__wrapper'>
|
||||
<CharacterCounter text={countText} max={maxChars} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,87 +0,0 @@
|
|||
import PropTypes from 'prop-types';
|
||||
|
||||
import { injectIntl, defineMessages } from 'react-intl';
|
||||
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { followAccount, unfollowAccount } from 'flavours/glitch/actions/accounts';
|
||||
import { Avatar } from 'flavours/glitch/components/avatar';
|
||||
import { DisplayName } from 'flavours/glitch/components/display_name';
|
||||
import { IconButton } from 'flavours/glitch/components/icon_button';
|
||||
import Permalink from 'flavours/glitch/components/permalink';
|
||||
import { makeGetAccount } from 'flavours/glitch/selectors';
|
||||
|
||||
const messages = defineMessages({
|
||||
follow: { id: 'account.follow', defaultMessage: 'Follow' },
|
||||
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
|
||||
});
|
||||
|
||||
const makeMapStateToProps = () => {
|
||||
const getAccount = makeGetAccount();
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
account: getAccount(state, props.id),
|
||||
});
|
||||
|
||||
return mapStateToProps;
|
||||
};
|
||||
|
||||
const getFirstSentence = str => {
|
||||
const arr = str.split(/(([.?!]+\s)|[．。？！\n•])/);
|
||||
|
||||
return arr[0];
|
||||
};
|
||||
|
||||
class Account extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.map.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
handleFollow = () => {
|
||||
const { account, dispatch } = this.props;
|
||||
|
||||
if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
|
||||
dispatch(unfollowAccount(account.get('id')));
|
||||
} else {
|
||||
dispatch(followAccount(account.get('id')));
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
const { account, intl } = this.props;
|
||||
|
||||
let button;
|
||||
|
||||
if (account.getIn(['relationship', 'following'])) {
|
||||
button = <IconButton icon='check' title={intl.formatMessage(messages.unfollow)} active onClick={this.handleFollow} />;
|
||||
} else {
|
||||
button = <IconButton icon='plus' title={intl.formatMessage(messages.follow)} onClick={this.handleFollow} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='account follow-recommendations-account'>
|
||||
<div className='account__wrapper'>
|
||||
<Permalink className='account__display-name account__display-name--with-note' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
|
||||
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
|
||||
|
||||
<DisplayName account={account} />
|
||||
|
||||
<div className='account__note'>{getFirstSentence(account.get('note_plain'))}</div>
|
||||
</Permalink>
|
||||
|
||||
<div className='account__relationship'>
|
||||
{button}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default connect(makeMapStateToProps)(injectIntl(Account));
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
import PropTypes from 'prop-types';
|
||||
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { requestBrowserPermission } from 'flavours/glitch/actions/notifications';
|
||||
import { changeSetting, saveSettings } from 'flavours/glitch/actions/settings';
|
||||
import { fetchSuggestions } from 'flavours/glitch/actions/suggestions';
|
||||
import { markAsPartial } from 'flavours/glitch/actions/timelines';
|
||||
import { Button } from 'flavours/glitch/components/button';
|
||||
import Column from 'flavours/glitch/features/ui/components/column';
|
||||
import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
|
||||
import imageGreeting from 'mastodon/../images/elephant_ui_greeting.svg';
|
||||
|
||||
import Account from './components/account';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
suggestions: state.getIn(['suggestions', 'items']),
|
||||
isLoading: state.getIn(['suggestions', 'isLoading']),
|
||||
});
|
||||
|
||||
class FollowRecommendations extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
suggestions: ImmutablePropTypes.list,
|
||||
isLoading: PropTypes.bool,
|
||||
...WithRouterPropTypes,
|
||||
};
|
||||
|
||||
componentDidMount () {
|
||||
const { dispatch, suggestions } = this.props;
|
||||
|
||||
// Don't re-fetch if we're e.g. navigating backwards to this page,
|
||||
// since we don't want followed accounts to disappear from the list
|
||||
|
||||
if (suggestions.size === 0) {
|
||||
dispatch(fetchSuggestions(true));
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
const { dispatch } = this.props;
|
||||
|
||||
// Force the home timeline to be reloaded when the user navigates
|
||||
// to it; if the user is new, it would've been empty before
|
||||
|
||||
dispatch(markAsPartial('home'));
|
||||
}
|
||||
|
||||
handleDone = () => {
|
||||
const { history, dispatch } = this.props;
|
||||
|
||||
dispatch(requestBrowserPermission((permission) => {
|
||||
if (permission === 'granted') {
|
||||
dispatch(changeSetting(['notifications', 'alerts', 'follow'], true));
|
||||
dispatch(changeSetting(['notifications', 'alerts', 'favourite'], true));
|
||||
dispatch(changeSetting(['notifications', 'alerts', 'reblog'], true));
|
||||
dispatch(changeSetting(['notifications', 'alerts', 'mention'], true));
|
||||
dispatch(changeSetting(['notifications', 'alerts', 'poll'], true));
|
||||
dispatch(changeSetting(['notifications', 'alerts', 'status'], true));
|
||||
dispatch(saveSettings());
|
||||
}
|
||||
}));
|
||||
|
||||
history.push('/home');
|
||||
};
|
||||
|
||||
render () {
|
||||
const { suggestions, isLoading } = this.props;
|
||||
|
||||
return (
|
||||
<Column>
|
||||
<div className='scrollable follow-recommendations-container'>
|
||||
<div className='column-title'>
|
||||
<svg viewBox='0 0 79 79' className='logo'>
|
||||
<use xlinkHref='#logo-symbol-icon' />
|
||||
</svg>
|
||||
|
||||
<h3><FormattedMessage id='follow_recommendations.heading' defaultMessage="Follow people you'd like to see posts from! Here are some suggestions." /></h3>
|
||||
<p><FormattedMessage id='follow_recommendations.lead' defaultMessage="Posts from people you follow will show up in chronological order on your home feed. Don't be afraid to make mistakes, you can unfollow people just as easily any time!" /></p>
|
||||
</div>
|
||||
|
||||
{!isLoading && (
|
||||
<>
|
||||
<div className='column-list'>
|
||||
{suggestions.size > 0 ? suggestions.map(suggestion => (
|
||||
<Account key={suggestion.get('account')} id={suggestion.get('account')} />
|
||||
)) : (
|
||||
<div className='column-list__empty-message'>
|
||||
<FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='column-actions'>
|
||||
<img src={imageGreeting} alt='' className='column-actions__background' />
|
||||
<Button onClick={this.handleDone}><FormattedMessage id='follow_recommendations.done' defaultMessage='Done' /></Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Helmet>
|
||||
<meta name='robots' content='noindex' />
|
||||
</Helmet>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default withRouter(connect(mapStateToProps)(FollowRecommendations));
|
||||
|
|
@ -19,7 +19,6 @@ const messages = defineMessages({
|
|||
blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
|
||||
domain_blocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Blocked domains' },
|
||||
mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
|
||||
show_me_around: { id: 'getting_started.onboarding', defaultMessage: 'Show me around' },
|
||||
pins: { id: 'navigation_bar.pins', defaultMessage: 'Pinned posts' },
|
||||
keyboard_shortcuts: { id: 'navigation_bar.keyboard_shortcuts', defaultMessage: 'Keyboard shortcuts' },
|
||||
featured_users: { id: 'navigation_bar.featured_users', defaultMessage: 'Featured users' },
|
||||
|
|
@ -36,12 +35,6 @@ class GettingStartedMisc extends ImmutablePureComponent {
|
|||
dispatch: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
openOnboardingModal = () => {
|
||||
this.props.dispatch(openModal({
|
||||
modalType: 'ONBOARDING',
|
||||
}));
|
||||
};
|
||||
|
||||
openFeaturedAccountsModal = () => {
|
||||
this.props.dispatch(openModal({
|
||||
modalType: 'PINNED_ACCOUNTS_EDITOR',
|
||||
|
|
@ -65,7 +58,6 @@ class GettingStartedMisc extends ImmutablePureComponent {
|
|||
{signedIn && (<ColumnLink key='blocks' icon='ban' text={intl.formatMessage(messages.blocks)} to='/blocks' />)}
|
||||
{signedIn && (<ColumnLink key='domain_blocks' icon='minus-circle' text={intl.formatMessage(messages.domain_blocks)} to='/domain_blocks' />)}
|
||||
<ColumnLink key='shortcuts' icon='question' text={intl.formatMessage(messages.keyboard_shortcuts)} to='/keyboard-shortcuts' />
|
||||
{signedIn && (<ColumnLink key='onboarding' icon='hand-o-right' text={intl.formatMessage(messages.show_me_around)} onClick={this.openOnboardingModal} />)}
|
||||
</div>
|
||||
</Column>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
|
|||
if (permission === 'granted') {
|
||||
dispatch(changePushNotifications(path.slice(1), checked));
|
||||
} else {
|
||||
dispatch(showAlert(undefined, messages.permissionDenied));
|
||||
dispatch(showAlert({ message: messages.permissionDenied }));
|
||||
}
|
||||
}));
|
||||
} else {
|
||||
|
|
@ -47,7 +47,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
|
|||
if (permission === 'granted') {
|
||||
dispatch(changeSetting(['notifications', ...path], checked));
|
||||
} else {
|
||||
dispatch(showAlert(undefined, messages.permissionDenied));
|
||||
dispatch(showAlert({ message: messages.permissionDenied }));
|
||||
}
|
||||
}));
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
const ArrowSmallRight = () => (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'>
|
||||
<path fillRule='evenodd' d='M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z' clipRule='evenodd' />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default ArrowSmallRight;
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import { Fragment } from 'react';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { Check } from 'flavours/glitch/components/check';
|
||||
|
||||
|
||||
const ProgressIndicator = ({ steps, completed }) => (
|
||||
<div className='onboarding__progress-indicator'>
|
||||
{(new Array(steps)).fill().map((_, i) => (
|
||||
<Fragment key={i}>
|
||||
{i > 0 && <div className={classNames('onboarding__progress-indicator__line', { active: completed > i })} />}
|
||||
|
||||
<div className={classNames('onboarding__progress-indicator__step', { active: completed > i })}>
|
||||
{completed > i && <Check />}
|
||||
</div>
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
ProgressIndicator.propTypes = {
|
||||
steps: PropTypes.number.isRequired,
|
||||
completed: PropTypes.number,
|
||||
};
|
||||
|
||||
export default ProgressIndicator;
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Check } from 'flavours/glitch/components/check';
|
||||
import { Icon } from 'flavours/glitch/components/icon';
|
||||
|
||||
import ArrowSmallRight from './arrow_small_right';
|
||||
|
||||
const Step = ({ label, description, icon, completed, onClick, href }) => {
|
||||
const content = (
|
||||
<>
|
||||
<div className='onboarding__steps__item__icon'>
|
||||
<Icon id={icon} />
|
||||
</div>
|
||||
|
||||
<div className='onboarding__steps__item__description'>
|
||||
<h6>{label}</h6>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
|
||||
<div className={completed ? 'onboarding__steps__item__progress' : 'onboarding__steps__item__go'}>
|
||||
{completed ? <Check /> : <ArrowSmallRight />}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
if (href) {
|
||||
return (
|
||||
<a href={href} onClick={onClick} target='_blank' rel='noopener' className='onboarding__steps__item'>
|
||||
{content}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button onClick={onClick} className='onboarding__steps__item'>
|
||||
{content}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
Step.propTypes = {
|
||||
label: PropTypes.node,
|
||||
description: PropTypes.node,
|
||||
icon: PropTypes.string,
|
||||
completed: PropTypes.bool,
|
||||
href: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
};
|
||||
|
||||
export default Step;
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import { PureComponent } from 'react';
|
||||
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { fetchSuggestions } from 'flavours/glitch/actions/suggestions';
|
||||
import { markAsPartial } from 'flavours/glitch/actions/timelines';
|
||||
import Column from 'flavours/glitch/components/column';
|
||||
import ColumnBackButton from 'flavours/glitch/components/column_back_button';
|
||||
import { EmptyAccount } from 'flavours/glitch/components/empty_account';
|
||||
import Account from 'flavours/glitch/containers/account_container';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
suggestions: state.getIn(['suggestions', 'items']),
|
||||
isLoading: state.getIn(['suggestions', 'isLoading']),
|
||||
});
|
||||
|
||||
class Follows extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
onBack: PropTypes.func,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
suggestions: ImmutablePropTypes.list,
|
||||
isLoading: PropTypes.bool,
|
||||
multiColumn: PropTypes.bool,
|
||||
};
|
||||
|
||||
componentDidMount () {
|
||||
const { dispatch } = this.props;
|
||||
dispatch(fetchSuggestions(true));
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
const { dispatch } = this.props;
|
||||
dispatch(markAsPartial('home'));
|
||||
}
|
||||
|
||||
render () {
|
||||
const { onBack, isLoading, suggestions, multiColumn } = this.props;
|
||||
|
||||
let loadedContent;
|
||||
|
||||
if (isLoading) {
|
||||
loadedContent = (new Array(8)).fill().map((_, i) => <EmptyAccount key={i} />);
|
||||
} else if (suggestions.isEmpty()) {
|
||||
loadedContent = <div className='follow-recommendations__empty'><FormattedMessage id='onboarding.follows.empty' defaultMessage='Unfortunately, no results can be shown right now. You can try using search or browsing the explore page to find people to follow, or try again later.' /></div>;
|
||||
} else {
|
||||
loadedContent = suggestions.map(suggestion => <Account id={suggestion.get('account')} key={suggestion.get('account')} withBio />);
|
||||
}
|
||||
|
||||
return (
|
||||
<Column>
|
||||
<ColumnBackButton multiColumn={multiColumn} onClick={onBack} />
|
||||
|
||||
<div className='scrollable privacy-policy'>
|
||||
<div className='column-title'>
|
||||
<h3><FormattedMessage id='onboarding.follows.title' defaultMessage='Popular on Mastodon' /></h3>
|
||||
<p><FormattedMessage id='onboarding.follows.lead' defaultMessage='You curate your own home feed. The more people you follow, the more active and interesting it will be. These profiles may be a good starting point—you can always unfollow them later!' /></p>
|
||||
</div>
|
||||
|
||||
<div className='follow-recommendations'>
|
||||
{loadedContent}
|
||||
</div>
|
||||
|
||||
<p className='onboarding__lead'><FormattedMessage id='onboarding.tips.accounts_from_other_servers' defaultMessage='<strong>Did you know?</strong> Since Mastodon is decentralized, some profiles you come across will be hosted on servers other than yours. And yet you can interact with them seamlessly! Their server is in the second half of their username!' values={{ strong: chunks => <strong>{chunks}</strong> }} /></p>
|
||||
|
||||
<div className='onboarding__footer'>
|
||||
<button className='link-button' onClick={onBack}><FormattedMessage id='onboarding.actions.back' defaultMessage='Take me back' /></button>
|
||||
</div>
|
||||
</div>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(Follows);
|
||||
149
app/javascript/flavours/glitch/features/onboarding/index.jsx
Normal file
149
app/javascript/flavours/glitch/features/onboarding/index.jsx
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
|
||||
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { Link, withRouter } from 'react-router-dom';
|
||||
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { debounce } from 'lodash';
|
||||
|
||||
import { fetchAccount } from 'flavours/glitch/actions/accounts';
|
||||
import { focusCompose } from 'flavours/glitch/actions/compose';
|
||||
import { closeOnboarding } from 'flavours/glitch/actions/onboarding';
|
||||
import Column from 'flavours/glitch/features/ui/components/column';
|
||||
import { me } from 'flavours/glitch/initial_state';
|
||||
import { makeGetAccount } from 'flavours/glitch/selectors';
|
||||
import { assetHost } from 'flavours/glitch/utils/config';
|
||||
import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
|
||||
import illustration from 'mastodon/../images/elephant_ui_conversation.svg';
|
||||
|
||||
import ArrowSmallRight from './components/arrow_small_right';
|
||||
import Step from './components/step';
|
||||
import Follows from './follows';
|
||||
import Share from './share';
|
||||
|
||||
const messages = defineMessages({
|
||||
template: { id: 'onboarding.compose.template', defaultMessage: 'Hello #Mastodon!' },
|
||||
});
|
||||
|
||||
const mapStateToProps = () => {
|
||||
const getAccount = makeGetAccount();
|
||||
|
||||
return state => ({
|
||||
account: getAccount(state, me),
|
||||
});
|
||||
};
|
||||
|
||||
class Onboarding extends ImmutablePureComponent {
|
||||
static propTypes = {
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
account: ImmutablePropTypes.map,
|
||||
multiColumn: PropTypes.bool,
|
||||
...WithRouterPropTypes,
|
||||
};
|
||||
|
||||
state = {
|
||||
step: null,
|
||||
profileClicked: false,
|
||||
shareClicked: false,
|
||||
};
|
||||
|
||||
handleClose = () => {
|
||||
const { dispatch, history } = this.props;
|
||||
|
||||
dispatch(closeOnboarding());
|
||||
history.push('/home');
|
||||
};
|
||||
|
||||
handleProfileClick = () => {
|
||||
this.setState({ profileClicked: true });
|
||||
};
|
||||
|
||||
handleFollowClick = () => {
|
||||
this.setState({ step: 'follows' });
|
||||
};
|
||||
|
||||
handleComposeClick = () => {
|
||||
const { dispatch, intl, history } = this.props;
|
||||
|
||||
dispatch(focusCompose(history, intl.formatMessage(messages.template)));
|
||||
};
|
||||
|
||||
handleShareClick = () => {
|
||||
this.setState({ step: 'share', shareClicked: true });
|
||||
};
|
||||
|
||||
handleBackClick = () => {
|
||||
this.setState({ step: null });
|
||||
};
|
||||
|
||||
handleWindowFocus = debounce(() => {
|
||||
const { dispatch, account } = this.props;
|
||||
dispatch(fetchAccount(account.get('id')));
|
||||
}, 1000, { trailing: true });
|
||||
|
||||
componentDidMount () {
|
||||
window.addEventListener('focus', this.handleWindowFocus, false);
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
window.removeEventListener('focus', this.handleWindowFocus);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { account, multiColumn } = this.props;
|
||||
const { step, shareClicked } = this.state;
|
||||
|
||||
switch(step) {
|
||||
case 'follows':
|
||||
return <Follows onBack={this.handleBackClick} multiColumn={multiColumn} />;
|
||||
case 'share':
|
||||
return <Share onBack={this.handleBackClick} multiColumn={multiColumn} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Column>
|
||||
<div className='scrollable privacy-policy'>
|
||||
<div className='column-title'>
|
||||
<img src={illustration} alt='' className='onboarding__illustration' />
|
||||
<h3><FormattedMessage id='onboarding.start.title' defaultMessage="You've made it!" /></h3>
|
||||
<p><FormattedMessage id='onboarding.start.lead' defaultMessage="Your new Mastodon account is ready to go. Here's how you can make the most of it:" /></p>
|
||||
</div>
|
||||
|
||||
<div className='onboarding__steps'>
|
||||
<Step onClick={this.handleProfileClick} href='/settings/profile' completed={(!account.get('avatar').endsWith('missing.png')) || (account.get('display_name').length > 0 && account.get('note').length > 0)} icon='address-book-o' label={<FormattedMessage id='onboarding.steps.setup_profile.title' defaultMessage='Customize your profile' />} description={<FormattedMessage id='onboarding.steps.setup_profile.body' defaultMessage='Others are more likely to interact with you with a filled out profile.' />} />
|
||||
<Step onClick={this.handleFollowClick} completed={(account.get('following_count') * 1) >= 7} icon='user-plus' label={<FormattedMessage id='onboarding.steps.follow_people.title' defaultMessage='Find at least {count, plural, one {one person} other {# people}} to follow' values={{ count: 7 }} />} description={<FormattedMessage id='onboarding.steps.follow_people.body' defaultMessage="You curate your own home feed. Let's fill it with interesting people." />} />
|
||||
<Step onClick={this.handleComposeClick} completed={(account.get('statuses_count') * 1) >= 1} icon='pencil-square-o' label={<FormattedMessage id='onboarding.steps.publish_status.title' defaultMessage='Make your first post' />} description={<FormattedMessage id='onboarding.steps.publish_status.body' defaultMessage='Say hello to the world.' values={{ emoji: <img className='emojione' alt='🐘' src={`${assetHost}/emoji/1f418.svg`} /> }} />} />
|
||||
<Step onClick={this.handleShareClick} completed={shareClicked} icon='copy' label={<FormattedMessage id='onboarding.steps.share_profile.title' defaultMessage='Share your profile' />} description={<FormattedMessage id='onboarding.steps.share_profile.body' defaultMessage='Let your friends know how to find you on Mastodon!' />} />
|
||||
</div>
|
||||
|
||||
<p className='onboarding__lead'><FormattedMessage id='onboarding.start.skip' defaultMessage="Don't need help getting started?" /></p>
|
||||
|
||||
<div className='onboarding__links'>
|
||||
<Link to='/explore' className='onboarding__link'>
|
||||
<FormattedMessage id='onboarding.actions.go_to_explore' defaultMessage='Take me to trending' />
|
||||
<ArrowSmallRight />
|
||||
</Link>
|
||||
|
||||
<Link to='/home' className='onboarding__link'>
|
||||
<FormattedMessage id='onboarding.actions.go_to_home' defaultMessage='Take me to my home feed' />
|
||||
<ArrowSmallRight />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Helmet>
|
||||
<meta name='robots' content='noindex' />
|
||||
</Helmet>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default withRouter(connect(mapStateToProps)(injectIntl(Onboarding)));
|
||||
200
app/javascript/flavours/glitch/features/onboarding/share.jsx
Normal file
200
app/javascript/flavours/glitch/features/onboarding/share.jsx
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import { PureComponent } from 'react';
|
||||
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
|
||||
import classNames from 'classnames';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import SwipeableViews from 'react-swipeable-views';
|
||||
|
||||
import Column from 'flavours/glitch/components/column';
|
||||
import ColumnBackButton from 'flavours/glitch/components/column_back_button';
|
||||
import { Icon } from 'flavours/glitch/components/icon';
|
||||
import { me, domain } from 'flavours/glitch/initial_state';
|
||||
|
||||
import ArrowSmallRight from './components/arrow_small_right';
|
||||
|
||||
const messages = defineMessages({
|
||||
shareableMessage: { id: 'onboarding.share.message', defaultMessage: 'I\'m {username} on #Mastodon! Come follow me at {url}' },
|
||||
});
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
account: state.getIn(['accounts', me]),
|
||||
});
|
||||
|
||||
class CopyPasteText extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
value: PropTypes.string,
|
||||
};
|
||||
|
||||
state = {
|
||||
copied: false,
|
||||
focused: false,
|
||||
};
|
||||
|
||||
setRef = c => {
|
||||
this.input = c;
|
||||
};
|
||||
|
||||
handleInputClick = () => {
|
||||
this.setState({ copied: false });
|
||||
this.input.focus();
|
||||
this.input.select();
|
||||
this.input.setSelectionRange(0, this.props.value.length);
|
||||
};
|
||||
|
||||
handleButtonClick = e => {
|
||||
e.stopPropagation();
|
||||
|
||||
const { value } = this.props;
|
||||
navigator.clipboard.writeText(value);
|
||||
this.input.blur();
|
||||
this.setState({ copied: true });
|
||||
this.timeout = setTimeout(() => this.setState({ copied: false }), 700);
|
||||
};
|
||||
|
||||
handleFocus = () => {
|
||||
this.setState({ focused: true });
|
||||
};
|
||||
|
||||
handleBlur = () => {
|
||||
this.setState({ focused: false });
|
||||
};
|
||||
|
||||
componentWillUnmount () {
|
||||
if (this.timeout) clearTimeout(this.timeout);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { value } = this.props;
|
||||
const { copied, focused } = this.state;
|
||||
|
||||
return (
|
||||
<div className={classNames('copy-paste-text', { copied, focused })} tabIndex='0' role='button' onClick={this.handleInputClick}>
|
||||
<textarea readOnly value={value} ref={this.setRef} onClick={this.handleInputClick} onFocus={this.handleFocus} onBlur={this.handleBlur} />
|
||||
|
||||
<button className='button' onClick={this.handleButtonClick}>
|
||||
<Icon id='copy' /> {copied ? <FormattedMessage id='copypaste.copied' defaultMessage='Copied' /> : <FormattedMessage id='copypaste.copy_to_clipboard' defaultMessage='Copy to clipboard' />}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class TipCarousel extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
state = {
|
||||
index: 0,
|
||||
};
|
||||
|
||||
handleSwipe = index => {
|
||||
this.setState({ index });
|
||||
};
|
||||
|
||||
handleChangeIndex = e => {
|
||||
this.setState({ index: Number(e.currentTarget.getAttribute('data-index')) });
|
||||
};
|
||||
|
||||
handleKeyDown = e => {
|
||||
switch(e.key) {
|
||||
case 'ArrowLeft':
|
||||
e.preventDefault();
|
||||
this.setState(({ index }, { children }) => ({ index: Math.abs(index - 1) % children.length }));
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
e.preventDefault();
|
||||
this.setState(({ index }, { children }) => ({ index: (index + 1) % children.length }));
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
const { children } = this.props;
|
||||
const { index } = this.state;
|
||||
|
||||
return (
|
||||
<div className='tip-carousel' tabIndex='0' onKeyDown={this.handleKeyDown}>
|
||||
<SwipeableViews onChangeIndex={this.handleSwipe} index={index} enableMouseEvents tabIndex='-1'>
|
||||
{children}
|
||||
</SwipeableViews>
|
||||
|
||||
<div className='media-modal__pagination'>
|
||||
{children.map((_, i) => (
|
||||
<button key={i} className={classNames('media-modal__page-dot', { active: i === index })} data-index={i} onClick={this.handleChangeIndex}>
|
||||
{i + 1}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class Share extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
onBack: PropTypes.func,
|
||||
account: ImmutablePropTypes.map,
|
||||
multiColumn: PropTypes.bool,
|
||||
intl: PropTypes.object,
|
||||
};
|
||||
|
||||
render () {
|
||||
const { onBack, account, multiColumn, intl } = this.props;
|
||||
|
||||
const url = (new URL(`/@${account.get('username')}`, document.baseURI)).href;
|
||||
|
||||
return (
|
||||
<Column>
|
||||
<ColumnBackButton multiColumn={multiColumn} onClick={onBack} />
|
||||
|
||||
<div className='scrollable privacy-policy'>
|
||||
<div className='column-title'>
|
||||
<h3><FormattedMessage id='onboarding.share.title' defaultMessage='Share your profile' /></h3>
|
||||
<p><FormattedMessage id='onboarding.share.lead' defaultMessage='Let people know how they can find you on Mastodon!' /></p>
|
||||
</div>
|
||||
|
||||
<CopyPasteText value={intl.formatMessage(messages.shareableMessage, { username: `@${account.get('username')}@${domain}`, url })} />
|
||||
|
||||
<TipCarousel>
|
||||
<div><p className='onboarding__lead'><FormattedMessage id='onboarding.tips.verification' defaultMessage='<strong>Did you know?</strong> You can verify your account by putting a link to your Mastodon profile on your own website and adding the website to your profile. No fees or documents necessary!' values={{ strong: chunks => <strong>{chunks}</strong> }} /></p></div>
|
||||
<div><p className='onboarding__lead'><FormattedMessage id='onboarding.tips.migration' defaultMessage='<strong>Did you know?</strong> If you feel like {domain} is not a great server choice for you in the future, you can move to another Mastodon server without losing your followers. You can even host your own server!' values={{ domain, strong: chunks => <strong>{chunks}</strong> }} /></p></div>
|
||||
<div><p className='onboarding__lead'><FormattedMessage id='onboarding.tips.2fa' defaultMessage='<strong>Did you know?</strong> You can secure your account by setting up two-factor authentication in your account settings. It works with any TOTP app of your choice, no phone number necessary!' values={{ strong: chunks => <strong>{chunks}</strong> }} /></p></div>
|
||||
</TipCarousel>
|
||||
|
||||
<p className='onboarding__lead'><FormattedMessage id='onboarding.share.next_steps' defaultMessage='Possible next steps:' /></p>
|
||||
|
||||
<div className='onboarding__links'>
|
||||
<Link to='/home' className='onboarding__link'>
|
||||
<FormattedMessage id='onboarding.actions.go_to_home' defaultMessage='Take me to my home feed' />
|
||||
<ArrowSmallRight />
|
||||
</Link>
|
||||
|
||||
<Link to='/explore' className='onboarding__link'>
|
||||
<FormattedMessage id='onboarding.actions.go_to_explore' defaultMessage='Take me to trending' />
|
||||
<ArrowSmallRight />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className='onboarding__footer'>
|
||||
<button className='link-button' onClick={onBack}><FormattedMessage id='onboarding.action.back' defaultMessage='Take me back' /></button>
|
||||
</div>
|
||||
</div>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(injectIntl(Share));
|
||||
|
|
@ -3,7 +3,7 @@ import { PureComponent } from 'react';
|
|||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import Check from 'flavours/glitch/components/check';
|
||||
import { Check } from 'flavours/glitch/components/check';
|
||||
|
||||
export default class Option extends PureComponent {
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ import VisibilityIcon from 'flavours/glitch/components/status_visibility_icon';
|
|||
import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
|
||||
|
||||
const messages = defineMessages({
|
||||
favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
|
||||
favourite: { id: 'status.favourite', defaultMessage: 'Favorite' },
|
||||
});
|
||||
|
||||
class FavouriteModal extends ImmutablePureComponent {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { Helmet } from 'react-helmet';
|
|||
|
||||
import Base from 'flavours/glitch/components/modal_root';
|
||||
import {
|
||||
OnboardingModal,
|
||||
MuteModal,
|
||||
BlockModal,
|
||||
ReportModal,
|
||||
|
|
@ -41,7 +40,6 @@ import VideoModal from './video_modal';
|
|||
|
||||
export const MODAL_COMPONENTS = {
|
||||
'MEDIA': () => Promise.resolve({ default: MediaModal }),
|
||||
'ONBOARDING': OnboardingModal,
|
||||
'VIDEO': () => Promise.resolve({ default: VideoModal }),
|
||||
'AUDIO': () => Promise.resolve({ default: AudioModal }),
|
||||
'IMAGE': () => Promise.resolve({ default: ImageModal }),
|
||||
|
|
|
|||
|
|
@ -1,330 +0,0 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import { PureComponent } from 'react';
|
||||
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import ReactSwipeableViews from 'react-swipeable-views';
|
||||
|
||||
import Permalink from 'flavours/glitch/components/permalink';
|
||||
import ComposeForm from 'flavours/glitch/features/compose/components/compose_form';
|
||||
import DrawerAccount from 'flavours/glitch/features/compose/components/navigation_bar';
|
||||
import Search from 'flavours/glitch/features/compose/components/search';
|
||||
import { me, source_url } from 'flavours/glitch/initial_state';
|
||||
|
||||
import ColumnHeader from './column_header';
|
||||
|
||||
const noop = () => { };
|
||||
|
||||
const messages = defineMessages({
|
||||
home_title: { id: 'column.home', defaultMessage: 'Home' },
|
||||
notifications_title: { id: 'column.notifications', defaultMessage: 'Notifications' },
|
||||
local_title: { id: 'column.community', defaultMessage: 'Local timeline' },
|
||||
federated_title: { id: 'column.public', defaultMessage: 'Federated timeline' },
|
||||
});
|
||||
|
||||
const PageOne = ({ acct, domain }) => (
|
||||
<div className='onboarding-modal__page onboarding-modal__page-one'>
|
||||
<div style={{ flex: '0 0 auto' }}>
|
||||
<div className='onboarding-modal__page-one__elephant-friend' />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1><FormattedMessage id='onboarding.page_one.welcome' defaultMessage='Welcome to {domain}!' values={{ domain }} /></h1>
|
||||
<p><FormattedMessage id='onboarding.page_one.federation' defaultMessage='{domain} is an "instance" of Mastodon. Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.' values={{ domain }} /></p>
|
||||
<p><FormattedMessage id='onboarding.page_one.handle' defaultMessage='You are on {domain}, so your full handle is {handle}' values={{ domain, handle: <strong>@{acct}@{domain}</strong> }} /></p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
PageOne.propTypes = {
|
||||
acct: PropTypes.string.isRequired,
|
||||
domain: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
const PageTwo = ({ myAccount }) => (
|
||||
<div className='onboarding-modal__page onboarding-modal__page-two'>
|
||||
<div className='figure non-interactive'>
|
||||
<div className='pseudo-drawer'>
|
||||
<DrawerAccount account={myAccount} />
|
||||
<ComposeForm
|
||||
privacy='public'
|
||||
text='Awoo! #introductions'
|
||||
spoilerText=''
|
||||
suggestions={[]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p><FormattedMessage id='onboarding.page_two.compose' defaultMessage='Write posts from the compose column. You can upload images, change privacy settings, and add content warnings with the icons below.' /></p>
|
||||
</div>
|
||||
);
|
||||
|
||||
PageTwo.propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
myAccount: ImmutablePropTypes.map.isRequired,
|
||||
};
|
||||
|
||||
const PageThree = ({ myAccount }) => (
|
||||
<div className='onboarding-modal__page onboarding-modal__page-three'>
|
||||
<div className='figure non-interactive'>
|
||||
<Search
|
||||
value=''
|
||||
onChange={noop}
|
||||
onSubmit={noop}
|
||||
onClear={noop}
|
||||
onShow={noop}
|
||||
recent={{}}
|
||||
/>
|
||||
|
||||
<div className='pseudo-drawer'>
|
||||
<DrawerAccount account={myAccount} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p><FormattedMessage id='onboarding.page_three.search' defaultMessage='Use the search bar to find people and look at hashtags, such as {illustration} and {introductions}. To look for a person who is not on this instance, use their full handle.' values={{ illustration: <Permalink to='/tag/illustration' href='/tags/illustration'>#illustration</Permalink>, introductions: <Permalink to='/tag/introductions' href='/tags/introductions'>#introductions</Permalink> }} /></p>
|
||||
<p><FormattedMessage id='onboarding.page_three.profile' defaultMessage='Edit your profile to change your avatar, bio, and display name. There, you will also find other preferences.' /></p>
|
||||
</div>
|
||||
);
|
||||
|
||||
PageThree.propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
myAccount: ImmutablePropTypes.map.isRequired,
|
||||
};
|
||||
|
||||
const PageFour = ({ domain, intl }) => (
|
||||
<div className='onboarding-modal__page onboarding-modal__page-four'>
|
||||
<div className='onboarding-modal__page-four__columns'>
|
||||
<div className='row'>
|
||||
<div>
|
||||
<div className='figure non-interactive'><ColumnHeader icon='home' type={intl.formatMessage(messages.home_title)} /></div>
|
||||
<p><FormattedMessage id='onboarding.page_four.home' defaultMessage='The home timeline shows posts from people you follow.' /></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className='figure non-interactive'><ColumnHeader icon='bell' type={intl.formatMessage(messages.notifications_title)} /></div>
|
||||
<p><FormattedMessage id='onboarding.page_four.notifications' defaultMessage='The notifications column shows when someone interacts with you.' /></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='row'>
|
||||
<div>
|
||||
<div className='figure non-interactive' style={{ marginBottom: 0 }}><ColumnHeader icon='users' type={intl.formatMessage(messages.local_title)} /></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className='figure non-interactive' style={{ marginBottom: 0 }}><ColumnHeader icon='globe' type={intl.formatMessage(messages.federated_title)} /></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p><FormattedMessage id='onboarding.page_five.public_timelines' defaultMessage='The local timeline shows public posts from everyone on {domain}. The federated timeline shows public posts from everyone who people on {domain} follow. These are the Public Timelines, a great way to discover new people.' values={{ domain }} /></p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
PageFour.propTypes = {
|
||||
domain: PropTypes.string.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
const PageSix = ({ admin, domain }) => {
|
||||
let adminSection = '';
|
||||
|
||||
if (admin) {
|
||||
adminSection = (
|
||||
<p>
|
||||
<FormattedMessage id='onboarding.page_six.admin' defaultMessage="Your instance's admin is {admin}." values={{ admin: <Permalink href={admin.get('url')} to={`/@${admin.get('acct')}`}>@{admin.get('acct')}</Permalink> }} />
|
||||
<br />
|
||||
<FormattedMessage id='onboarding.page_six.read_guidelines' defaultMessage="Please read {domain}'s {guidelines}!" values={{ domain, guidelines: <a href='/about/more' target='_blank'><FormattedMessage id='onboarding.page_six.guidelines' defaultMessage='community guidelines' /></a> }} />
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='onboarding-modal__page onboarding-modal__page-six'>
|
||||
<h1><FormattedMessage id='onboarding.page_six.almost_done' defaultMessage='Almost done...' /></h1>
|
||||
{adminSection}
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id='onboarding.page_six.github'
|
||||
defaultMessage='{domain} runs on Glitchsoc. Glitchsoc is a friendly {fork} of {Mastodon}. Glitchsoc is fully compatible with all Mastodon apps and instances. Glitchsoc is free open-source software. You can report bugs, request features, or contribute to the code on {github}.'
|
||||
values={{
|
||||
domain,
|
||||
fork: <a href='https://en.wikipedia.org/wiki/Fork_(software_development)' target='_blank' rel='noopener'>fork</a>,
|
||||
Mastodon: <a href='https://github.com/mastodon/mastodon' target='_blank' rel='noopener'>Mastodon</a>,
|
||||
github: <a href={source_url} target='_blank' rel='noopener'>GitHub</a>,
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<p><FormattedMessage id='onboarding.page_six.apps_available' defaultMessage='There are {apps} available for iOS, Android and other platforms.' values={{ domain, apps: <a href='https://joinmastodon.org/apps' target='_blank' rel='noopener'><FormattedMessage id='onboarding.page_six.various_app' defaultMessage='mobile apps' /></a> }} /></p>
|
||||
<p><em><FormattedMessage id='onboarding.page_six.appetoot' defaultMessage='Bon Appetoot!' /></em></p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
PageSix.propTypes = {
|
||||
admin: ImmutablePropTypes.map,
|
||||
domain: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
myAccount: state.getIn(['accounts', me]),
|
||||
admin: state.getIn(['accounts', state.getIn(['meta', 'admin'])]),
|
||||
domain: state.getIn(['meta', 'domain']),
|
||||
});
|
||||
|
||||
class OnboardingModal extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
onClose: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
myAccount: ImmutablePropTypes.map.isRequired,
|
||||
domain: PropTypes.string.isRequired,
|
||||
admin: ImmutablePropTypes.map,
|
||||
};
|
||||
|
||||
state = {
|
||||
currentIndex: 0,
|
||||
};
|
||||
|
||||
UNSAFE_componentWillMount() {
|
||||
const { myAccount, admin, domain, intl } = this.props;
|
||||
this.pages = [
|
||||
<PageOne key='1' acct={myAccount.get('acct')} domain={domain} />,
|
||||
<PageTwo key='2' myAccount={myAccount} intl={intl} />,
|
||||
<PageThree key='3' myAccount={myAccount} intl={intl} />,
|
||||
<PageFour key='4' domain={domain} intl={intl} />,
|
||||
<PageSix key='6' admin={admin} domain={domain} />,
|
||||
];
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
window.addEventListener('keyup', this.handleKeyUp);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.addEventListener('keyup', this.handleKeyUp);
|
||||
}
|
||||
|
||||
handleSkip = (e) => {
|
||||
e.preventDefault();
|
||||
this.props.onClose();
|
||||
};
|
||||
|
||||
handleDot = (e) => {
|
||||
const i = Number(e.currentTarget.getAttribute('data-index'));
|
||||
e.preventDefault();
|
||||
this.setState({ currentIndex: i });
|
||||
};
|
||||
|
||||
handlePrev = () => {
|
||||
this.setState(({ currentIndex }) => ({
|
||||
currentIndex: Math.max(0, currentIndex - 1),
|
||||
}));
|
||||
};
|
||||
|
||||
handleNext = () => {
|
||||
const { pages } = this;
|
||||
this.setState(({ currentIndex }) => ({
|
||||
currentIndex: Math.min(currentIndex + 1, pages.length - 1),
|
||||
}));
|
||||
};
|
||||
|
||||
handleSwipe = (index, lastIndex, meta) => {
|
||||
if (meta.reason !== 'swipe') return;
|
||||
|
||||
this.setState({ currentIndex: index });
|
||||
};
|
||||
|
||||
handleKeyUp = ({ key }) => {
|
||||
switch (key) {
|
||||
case 'ArrowLeft':
|
||||
this.handlePrev();
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
this.handleNext();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
handleClose = () => {
|
||||
this.props.onClose();
|
||||
};
|
||||
|
||||
render () {
|
||||
const { pages } = this;
|
||||
const { currentIndex } = this.state;
|
||||
const hasMore = currentIndex < pages.length - 1;
|
||||
|
||||
const nextOrDoneBtn = hasMore ? (
|
||||
<button
|
||||
onClick={this.handleNext}
|
||||
className='onboarding-modal__nav onboarding-modal__next'
|
||||
>
|
||||
<FormattedMessage id='onboarding.next' defaultMessage='Next' />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={this.handleClose}
|
||||
className='onboarding-modal__nav onboarding-modal__done'
|
||||
>
|
||||
<FormattedMessage id='onboarding.done' defaultMessage='Done' />
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='modal-root__modal onboarding-modal'>
|
||||
<ReactSwipeableViews index={currentIndex} onChangeIndex={this.handleSwipe} className='onboarding-modal__pager'>
|
||||
{pages.map((page, i) => {
|
||||
const className = classNames('onboarding-modal__page__wrapper', {
|
||||
'onboarding-modal__page__wrapper--active': i === currentIndex,
|
||||
});
|
||||
return (
|
||||
<div key={i} className={className}>{page}</div>
|
||||
);
|
||||
})}
|
||||
</ReactSwipeableViews>
|
||||
|
||||
<div className='onboarding-modal__paginator'>
|
||||
<div>
|
||||
<button
|
||||
onClick={this.handleSkip}
|
||||
className='onboarding-modal__nav onboarding-modal__skip'
|
||||
>
|
||||
<FormattedMessage id='onboarding.skip' defaultMessage='Skip' />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className='onboarding-modal__dots'>
|
||||
{pages.map((_, i) => {
|
||||
const className = classNames('onboarding-modal__dot', {
|
||||
active: i === currentIndex,
|
||||
});
|
||||
return (
|
||||
<div
|
||||
key={`dot-${i}`}
|
||||
role='button'
|
||||
tabIndex={0}
|
||||
data-index={i}
|
||||
onClick={this.handleDot}
|
||||
className={className}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{nextOrDoneBtn}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(injectIntl(OnboardingModal));
|
||||
|
|
@ -7,26 +7,27 @@ import { NotificationStack } from 'react-notification';
|
|||
import { dismissAlert } from '../../../actions/alerts';
|
||||
import { getAlerts } from '../../../selectors';
|
||||
|
||||
const mapStateToProps = (state, { intl }) => {
|
||||
const notifications = getAlerts(state);
|
||||
const formatIfNeeded = (intl, message, values) => {
|
||||
if (typeof message === 'object') {
|
||||
return intl.formatMessage(message, values);
|
||||
}
|
||||
|
||||
notifications.forEach(notification => ['title', 'message'].forEach(key => {
|
||||
const value = notification[key];
|
||||
|
||||
if (typeof value === 'object') {
|
||||
notification[key] = intl.formatMessage(value, notification[`${key}_values`]);
|
||||
}
|
||||
}));
|
||||
|
||||
return { notifications };
|
||||
return message;
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
onDismiss: alert => {
|
||||
dispatch(dismissAlert(alert));
|
||||
},
|
||||
};
|
||||
};
|
||||
const mapStateToProps = (state, { intl }) => ({
|
||||
notifications: getAlerts(state).map(alert => ({
|
||||
...alert,
|
||||
action: formatIfNeeded(intl, alert.action, alert.values),
|
||||
title: formatIfNeeded(intl, alert.title, alert.values),
|
||||
message: formatIfNeeded(intl, alert.message, alert.values),
|
||||
})),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
onDismiss (alert) {
|
||||
dispatch(dismissAlert(alert));
|
||||
},
|
||||
});
|
||||
|
||||
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(NotificationStack));
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import { HotKeys } from 'react-hotkeys';
|
|||
|
||||
import { changeLayout } from 'flavours/glitch/actions/app';
|
||||
import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'flavours/glitch/actions/markers';
|
||||
import { INTRODUCTION_VERSION } from 'flavours/glitch/actions/onboarding';
|
||||
import PermaLink from 'flavours/glitch/components/permalink';
|
||||
import PictureInPicture from 'flavours/glitch/features/picture_in_picture';
|
||||
import { layoutFromWindow } from 'flavours/glitch/is_mobile';
|
||||
|
|
@ -62,7 +63,7 @@ import {
|
|||
GettingStartedMisc,
|
||||
Directory,
|
||||
Explore,
|
||||
FollowRecommendations,
|
||||
Onboarding,
|
||||
About,
|
||||
PrivacyPolicy,
|
||||
} from './util/async-components';
|
||||
|
|
@ -86,7 +87,7 @@ const mapStateToProps = state => ({
|
|||
showFaviconBadge: state.getIn(['local_settings', 'notifications', 'favicon_badge']),
|
||||
hicolorPrivacyIcons: state.getIn(['local_settings', 'hicolor_privacy_icons']),
|
||||
moved: state.getIn(['accounts', me, 'moved']) && state.getIn(['accounts', state.getIn(['accounts', me, 'moved'])]),
|
||||
firstLaunch: false, // TODO: state.getIn(['settings', 'introductionVersion'], 0) < INTRODUCTION_VERSION,
|
||||
firstLaunch: state.getIn(['settings', 'introductionVersion'], 0) < INTRODUCTION_VERSION,
|
||||
username: state.getIn(['accounts', me, 'username']),
|
||||
});
|
||||
|
||||
|
|
@ -216,7 +217,7 @@ class SwitchingColumnsArea extends PureComponent {
|
|||
<WrappedRoute path='/bookmarks' component={BookmarkedStatuses} content={children} />
|
||||
<WrappedRoute path='/pinned' component={PinnedStatuses} content={children} />
|
||||
|
||||
<WrappedRoute path='/start' component={FollowRecommendations} content={children} />
|
||||
<WrappedRoute path='/start' exact component={Onboarding} content={children} />
|
||||
<WrappedRoute path='/directory' component={Directory} content={children} />
|
||||
<WrappedRoute path={['/explore', '/search']} component={Explore} content={children} />
|
||||
<WrappedRoute path={['/publish', '/statuses/new']} component={Compose} content={children} />
|
||||
|
|
@ -417,7 +418,6 @@ class UI extends Component {
|
|||
// On first launch, redirect to the follow recommendations page
|
||||
if (signedIn && this.props.firstLaunch) {
|
||||
this.props.history.replace('/start');
|
||||
// TODO: this.props.dispatch(closeOnboarding());
|
||||
}
|
||||
|
||||
if (signedIn) {
|
||||
|
|
|
|||
|
|
@ -118,10 +118,6 @@ export function Mutes () {
|
|||
return import(/* webpackChunkName: "flavours/glitch/async/mutes" */'flavours/glitch/features/mutes');
|
||||
}
|
||||
|
||||
export function OnboardingModal () {
|
||||
return import(/* webpackChunkName: "flavours/glitch/async/onboarding_modal" */'flavours/glitch/features/ui/components/onboarding_modal');
|
||||
}
|
||||
|
||||
export function MuteModal () {
|
||||
return import(/* webpackChunkName: "flavours/glitch/async/mute_modal" */'flavours/glitch/features/ui/components/mute_modal');
|
||||
}
|
||||
|
|
@ -170,8 +166,8 @@ export function Directory () {
|
|||
return import(/* webpackChunkName: "features/glitch/async/directory" */'flavours/glitch/features/directory');
|
||||
}
|
||||
|
||||
export function FollowRecommendations () {
|
||||
return import(/* webpackChunkName: "features/glitch/async/follow_recommendations" */'flavours/glitch/features/follow_recommendations');
|
||||
export function Onboarding () {
|
||||
return import(/* webpackChunkName: "features/glitch/async/onboarding" */'flavours/glitch/features/onboarding');
|
||||
}
|
||||
|
||||
export function CompareHistoryModal () {
|
||||
|
|
|
|||
|
|
@ -1,17 +1,10 @@
|
|||
{
|
||||
"about.fork_disclaimer": "Glitch-soc is free open source software forked from Mastodon.",
|
||||
"account.add_account_note": "Add note for @{name}",
|
||||
"account.disclaimer_full": "Information below may reflect the user's profile incompletely.",
|
||||
"account.follows": "Follows",
|
||||
"account.joined": "Joined {date}",
|
||||
"account.mute_notifications": "Mute notifications from @{name}",
|
||||
"account.suspended_disclaimer_full": "This user has been suspended by a moderator.",
|
||||
"account.unmute_notifications": "Unmute notifications from @{name}",
|
||||
"account.view_full_profile": "View full profile",
|
||||
"account_note.cancel": "Cancel",
|
||||
"account_note.edit": "Edit",
|
||||
"account_note.glitch_placeholder": "No comment provided",
|
||||
"account_note.save": "Save",
|
||||
"advanced_options.icon_title": "Advanced options",
|
||||
"advanced_options.local-only.long": "Do not post to other instances",
|
||||
"advanced_options.local-only.short": "Local-only",
|
||||
|
|
@ -49,14 +42,9 @@
|
|||
"confirmations.unfilter.filters": "Matching {count, plural, one {filter} other {filters}}",
|
||||
"content-type.change": "Content type",
|
||||
"direct.group_by_conversations": "Group by conversation",
|
||||
"empty_column.follow_recommendations": "Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.",
|
||||
"endorsed_accounts_editor.endorsed_accounts": "Featured accounts",
|
||||
"favourite_modal.combo": "You can press {combo} to skip this next time",
|
||||
"firehose.column_settings.allow_local_only": "Show local-only posts in \"All\"",
|
||||
"follow_recommendations.done": "Done",
|
||||
"follow_recommendations.heading": "Follow people you'd like to see posts from! Here are some suggestions.",
|
||||
"follow_recommendations.lead": "Posts from people you follow will show up in chronological order on your home feed. Don't be afraid to make mistakes, you can unfollow people just as easily any time!",
|
||||
"getting_started.onboarding": "Show me around",
|
||||
"home.column_settings.advanced": "Advanced",
|
||||
"home.column_settings.filter_regex": "Filter out by regular expressions",
|
||||
"home.column_settings.show_direct": "Show private mentions",
|
||||
|
|
@ -82,26 +70,6 @@
|
|||
"notifications.filter.reactions": "Reactions",
|
||||
"notifications.marked_clear": "Clear selected notifications",
|
||||
"notifications.marked_clear_confirmation": "Are you sure you want to permanently clear all selected notifications?",
|
||||
"onboarding.done": "Done",
|
||||
"onboarding.next": "Next",
|
||||
"onboarding.page_five.public_timelines": "The local timeline shows public posts from everyone on {domain}. The federated timeline shows public posts from everyone who people on {domain} follow. These are the Public Timelines, a great way to discover new people.",
|
||||
"onboarding.page_four.home": "The home timeline shows posts from people you follow.",
|
||||
"onboarding.page_four.notifications": "The notifications column shows when someone interacts with you.",
|
||||
"onboarding.page_one.federation": "{domain} is an 'instance' of Mastodon. Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.",
|
||||
"onboarding.page_one.handle": "You are on {domain}, so your full handle is {handle}",
|
||||
"onboarding.page_one.welcome": "Welcome to {domain}!",
|
||||
"onboarding.page_six.admin": "Your instance's admin is {admin}.",
|
||||
"onboarding.page_six.almost_done": "Almost done...",
|
||||
"onboarding.page_six.appetoot": "Bon Appetoot!",
|
||||
"onboarding.page_six.apps_available": "There are {apps} available for iOS, Android and other platforms.",
|
||||
"onboarding.page_six.github": "{domain} runs on Glitchsoc. Glitchsoc is a friendly {fork} of {Mastodon}, and is compatible with any Mastodon instance or app. Glitchsoc is entirely free and open-source. You can report bugs, request features, or contribute to the code on {github}.",
|
||||
"onboarding.page_six.guidelines": "community guidelines",
|
||||
"onboarding.page_six.read_guidelines": "Please read {domain}'s {guidelines}!",
|
||||
"onboarding.page_six.various_app": "mobile apps",
|
||||
"onboarding.page_three.profile": "Edit your profile to change your avatar, bio, and display name. There, you will also find other preferences.",
|
||||
"onboarding.page_three.search": "Use the search bar to find people and look at hashtags, such as {illustration} and {introductions}. To look for a person who is not on this instance, use their full handle.",
|
||||
"onboarding.page_two.compose": "Write posts from the compose column. You can upload images, change privacy settings, and add content warnings with the icons below.",
|
||||
"onboarding.skip": "Skip",
|
||||
"settings.always_show_spoilers_field": "Always enable the Content Warning field",
|
||||
"settings.auto_collapse": "Automatic collapsing",
|
||||
"settings.auto_collapse_all": "Everything",
|
||||
|
|
@ -195,14 +163,5 @@
|
|||
"status.react": "React",
|
||||
"status.sensitive_toggle": "Click to view",
|
||||
"status.uncollapse": "Uncollapse",
|
||||
"web_app_crash.change_your_settings": "Change your {settings}",
|
||||
"web_app_crash.content": "You could try any of the following:",
|
||||
"web_app_crash.debug_info": "Debug information",
|
||||
"web_app_crash.disable_addons": "Disable browser add-ons or built-in translation tools",
|
||||
"web_app_crash.issue_tracker": "issue tracker",
|
||||
"web_app_crash.reload": "Reload",
|
||||
"web_app_crash.reload_page": "{reload} the current page",
|
||||
"web_app_crash.report_issue": "Report a bug in the {issuetracker}",
|
||||
"web_app_crash.settings": "settings",
|
||||
"web_app_crash.title": "We're sorry, but something went wrong with the Mastodon app."
|
||||
"suggestions.dismiss": "Dismiss suggestion"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,44 +0,0 @@
|
|||
import { Map as ImmutableMap } from 'immutable';
|
||||
|
||||
import {
|
||||
ACCOUNT_NOTE_INIT_EDIT,
|
||||
ACCOUNT_NOTE_CANCEL,
|
||||
ACCOUNT_NOTE_CHANGE_COMMENT,
|
||||
ACCOUNT_NOTE_SUBMIT_REQUEST,
|
||||
ACCOUNT_NOTE_SUBMIT_FAIL,
|
||||
ACCOUNT_NOTE_SUBMIT_SUCCESS,
|
||||
} from '../actions/account_notes';
|
||||
|
||||
const initialState = ImmutableMap({
|
||||
edit: ImmutableMap({
|
||||
isSubmitting: false,
|
||||
account_id: null,
|
||||
comment: null,
|
||||
}),
|
||||
});
|
||||
|
||||
export default function account_notes(state = initialState, action) {
|
||||
switch (action.type) {
|
||||
case ACCOUNT_NOTE_INIT_EDIT:
|
||||
return state.withMutations((state) => {
|
||||
state.setIn(['edit', 'isSubmitting'], false);
|
||||
state.setIn(['edit', 'account_id'], action.account.get('id'));
|
||||
state.setIn(['edit', 'comment'], action.comment);
|
||||
});
|
||||
case ACCOUNT_NOTE_CHANGE_COMMENT:
|
||||
return state.setIn(['edit', 'comment'], action.comment);
|
||||
case ACCOUNT_NOTE_SUBMIT_REQUEST:
|
||||
return state.setIn(['edit', 'isSubmitting'], true);
|
||||
case ACCOUNT_NOTE_SUBMIT_FAIL:
|
||||
return state.setIn(['edit', 'isSubmitting'], false);
|
||||
case ACCOUNT_NOTE_SUBMIT_SUCCESS:
|
||||
case ACCOUNT_NOTE_CANCEL:
|
||||
return state.withMutations((state) => {
|
||||
state.setIn(['edit', 'isSubmitting'], false);
|
||||
state.setIn(['edit', 'account_id'], null);
|
||||
state.setIn(['edit', 'comment'], null);
|
||||
});
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
import { Map as ImmutableMap, fromJS } from 'immutable';
|
||||
|
||||
import { me } from 'flavours/glitch/initial_state';
|
||||
|
||||
import {
|
||||
ACCOUNT_FOLLOW_SUCCESS,
|
||||
ACCOUNT_UNFOLLOW_SUCCESS,
|
||||
|
|
@ -20,6 +22,14 @@ const normalizeAccounts = (state, accounts) => {
|
|||
return state;
|
||||
};
|
||||
|
||||
const incrementFollowers = (state, accountId) =>
|
||||
state.updateIn([accountId, 'followers_count'], num => num + 1)
|
||||
.updateIn([me, 'following_count'], num => num + 1);
|
||||
|
||||
const decrementFollowers = (state, accountId) =>
|
||||
state.updateIn([accountId, 'followers_count'], num => Math.max(0, num - 1))
|
||||
.updateIn([me, 'following_count'], num => Math.max(0, num - 1));
|
||||
|
||||
const initialState = ImmutableMap();
|
||||
|
||||
export default function accountsCounters(state = initialState, action) {
|
||||
|
|
@ -30,9 +40,9 @@ export default function accountsCounters(state = initialState, action) {
|
|||
return normalizeAccounts(state, action.accounts);
|
||||
case ACCOUNT_FOLLOW_SUCCESS:
|
||||
return action.alreadyFollowing ? state :
|
||||
state.updateIn([action.relationship.id, 'followers_count'], num => num + 1);
|
||||
incrementFollowers(state, action.relationship.id);
|
||||
case ACCOUNT_UNFOLLOW_SUCCESS:
|
||||
return state.updateIn([action.relationship.id, 'followers_count'], num => Math.max(0, num - 1));
|
||||
return decrementFollowers(state, action.relationship.id);
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
||||
import { List as ImmutableList } from 'immutable';
|
||||
|
||||
import {
|
||||
ALERT_SHOW,
|
||||
|
|
@ -8,17 +8,20 @@ import {
|
|||
|
||||
const initialState = ImmutableList([]);
|
||||
|
||||
let id = 0;
|
||||
|
||||
const addAlert = (state, alert) =>
|
||||
state.push({
|
||||
key: id++,
|
||||
...alert,
|
||||
});
|
||||
|
||||
export default function alerts(state = initialState, action) {
|
||||
switch(action.type) {
|
||||
case ALERT_SHOW:
|
||||
return state.push(ImmutableMap({
|
||||
key: state.size > 0 ? state.last().get('key') + 1 : 0,
|
||||
title: action.title,
|
||||
message: action.message,
|
||||
message_values: action.message_values,
|
||||
}));
|
||||
return addAlert(state, action.alert);
|
||||
case ALERT_DISMISS:
|
||||
return state.filterNot(item => item.get('key') === action.alert.key);
|
||||
return state.filterNot(item => item.key === action.alert.key);
|
||||
case ALERT_CLEAR:
|
||||
return state.clear();
|
||||
default:
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ import {
|
|||
COMPOSE_CHANGE_MEDIA_DESCRIPTION,
|
||||
COMPOSE_CHANGE_MEDIA_FOCUS,
|
||||
COMPOSE_SET_STATUS,
|
||||
COMPOSE_FOCUS,
|
||||
} from '../actions/compose';
|
||||
import { REDRAFT } from '../actions/statuses';
|
||||
import { STORE_HYDRATE } from '../actions/store';
|
||||
|
|
@ -655,6 +656,8 @@ export default function compose(state = initialState, action) {
|
|||
return state.update('poll', poll => poll.set('expires_in', action.expiresIn).set('multiple', action.isMultiple));
|
||||
case COMPOSE_LANGUAGE_CHANGE:
|
||||
return state.set('language', action.language);
|
||||
case COMPOSE_FOCUS:
|
||||
return state.set('focusDate', new Date()).update('text', text => text.length > 0 ? text : action.defaultText);
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { Record as ImmutableRecord } from 'immutable';
|
|||
import { loadingBarReducer } from 'react-redux-loading-bar';
|
||||
import { combineReducers } from 'redux-immutable';
|
||||
|
||||
import account_notes from './account_notes';
|
||||
import accounts from './accounts';
|
||||
import accounts_counters from './accounts_counters';
|
||||
import accounts_map from './accounts_map';
|
||||
|
|
@ -87,7 +86,6 @@ const reducers = {
|
|||
polls,
|
||||
trends,
|
||||
markers,
|
||||
account_notes,
|
||||
picture_in_picture,
|
||||
history,
|
||||
tags,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Map as ImmutableMap, fromJS } from 'immutable';
|
||||
|
||||
import {
|
||||
ACCOUNT_NOTE_SUBMIT_SUCCESS,
|
||||
submitAccountNote,
|
||||
} from '../actions/account_notes';
|
||||
import {
|
||||
ACCOUNT_FOLLOW_SUCCESS,
|
||||
|
|
@ -73,10 +73,11 @@ export default function relationships(state = initialState, action) {
|
|||
case ACCOUNT_UNMUTE_SUCCESS:
|
||||
case ACCOUNT_PIN_SUCCESS:
|
||||
case ACCOUNT_UNPIN_SUCCESS:
|
||||
case ACCOUNT_NOTE_SUBMIT_SUCCESS:
|
||||
return normalizeRelationship(state, action.relationship);
|
||||
case RELATIONSHIPS_FETCH_SUCCESS:
|
||||
return normalizeRelationships(state, action.relationships);
|
||||
case submitAccountNote.fulfilled:
|
||||
return normalizeRelationship(state, action.payload.relationship);
|
||||
case DOMAIN_BLOCK_SUCCESS:
|
||||
return setDomainBlocking(state, action.accounts, true);
|
||||
case DOMAIN_UNBLOCK_SUCCESS:
|
||||
|
|
|
|||
|
|
@ -85,26 +85,16 @@ export const makeGetPictureInPicture = () => {
|
|||
}));
|
||||
};
|
||||
|
||||
const getAlertsBase = state => state.get('alerts');
|
||||
const ALERT_DEFAULTS = {
|
||||
dismissAfter: 5000,
|
||||
style: false,
|
||||
};
|
||||
|
||||
export const getAlerts = createSelector([getAlertsBase], (base) => {
|
||||
let arr = [];
|
||||
|
||||
base.forEach(item => {
|
||||
arr.push({
|
||||
message: item.get('message'),
|
||||
message_values: item.get('message_values'),
|
||||
title: item.get('title'),
|
||||
key: item.get('key'),
|
||||
dismissAfter: 5000,
|
||||
barStyle: {
|
||||
zIndex: 200,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
return arr;
|
||||
});
|
||||
export const getAlerts = createSelector(state => state.get('alerts'), alerts =>
|
||||
alerts.map(item => ({
|
||||
...ALERT_DEFAULTS,
|
||||
...item,
|
||||
})).toArray());
|
||||
|
||||
export const makeGetNotification = () => createSelector([
|
||||
(_, base) => base,
|
||||
|
|
|
|||
|
|
@ -1,45 +1,8 @@
|
|||
import type { TypedUseSelectorHook } from 'react-redux';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
export { store } from './store';
|
||||
export type { GetState, AppDispatch, RootState } from './store';
|
||||
|
||||
import { configureStore } from '@reduxjs/toolkit';
|
||||
|
||||
import { rootReducer } from '../reducers';
|
||||
|
||||
import { errorsMiddleware } from './middlewares/errors';
|
||||
import { loadingBarMiddleware } from './middlewares/loading_bar';
|
||||
import { soundsMiddleware } from './middlewares/sounds';
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: rootReducer,
|
||||
middleware: (getDefaultMiddleware) =>
|
||||
getDefaultMiddleware({
|
||||
// In development, Redux Toolkit enables 2 default middlewares to detect
|
||||
// common issues with states. Unfortunately, our use of ImmutableJS for state
|
||||
// triggers both, so lets disable them until our state is fully refactored
|
||||
|
||||
// https://redux-toolkit.js.org/api/serializabilityMiddleware
|
||||
// This checks recursively that every values in the state are serializable in JSON
|
||||
// Which is not the case, as we use ImmutableJS structures, but also File objects
|
||||
serializableCheck: false,
|
||||
|
||||
// https://redux-toolkit.js.org/api/immutabilityMiddleware
|
||||
// This checks recursively if every value in the state is immutable (ie, a JS primitive type)
|
||||
// But this is not the case, as our Root State is an ImmutableJS map, which is an object
|
||||
immutableCheck: false,
|
||||
})
|
||||
.concat(
|
||||
loadingBarMiddleware({
|
||||
promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAIL'],
|
||||
}),
|
||||
)
|
||||
.concat(errorsMiddleware)
|
||||
.concat(soundsMiddleware()),
|
||||
});
|
||||
|
||||
// Infer the `RootState` and `AppDispatch` types from the store itself
|
||||
export type RootState = ReturnType<typeof rootReducer>;
|
||||
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
|
||||
export type AppDispatch = typeof store.dispatch;
|
||||
|
||||
export const useAppDispatch: () => AppDispatch = useDispatch;
|
||||
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
|
||||
export {
|
||||
createAppAsyncThunk,
|
||||
useAppDispatch,
|
||||
useAppSelector,
|
||||
} from './typed_functions';
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { showAlertForError } from '../../actions/alerts';
|
|||
|
||||
const defaultFailSuffix = 'FAIL';
|
||||
|
||||
export const errorsMiddleware: Middleware<Record<string, never>, RootState> =
|
||||
export const errorsMiddleware: Middleware<unknown, RootState> =
|
||||
({ dispatch }) =>
|
||||
(next) =>
|
||||
(action: AnyAction & { skipAlert?: boolean; skipNotFound?: boolean }) => {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ const defaultTypeSuffixes: Config['promiseTypeSuffixes'] = [
|
|||
|
||||
export const loadingBarMiddleware = (
|
||||
config: Config = {},
|
||||
): Middleware<Record<string, never>, RootState> => {
|
||||
): Middleware<unknown, RootState> => {
|
||||
const promiseTypeSuffixes = config.promiseTypeSuffixes ?? defaultTypeSuffixes;
|
||||
|
||||
return ({ dispatch }) =>
|
||||
|
|
|
|||
|
|
@ -34,10 +34,7 @@ const play = (audio: HTMLAudioElement) => {
|
|||
void audio.play();
|
||||
};
|
||||
|
||||
export const soundsMiddleware = (): Middleware<
|
||||
Record<string, never>,
|
||||
RootState
|
||||
> => {
|
||||
export const soundsMiddleware = (): Middleware<unknown, RootState> => {
|
||||
const soundCache: Record<string, HTMLAudioElement> = {};
|
||||
|
||||
void ready(() => {
|
||||
|
|
|
|||
40
app/javascript/flavours/glitch/store/store.ts
Normal file
40
app/javascript/flavours/glitch/store/store.ts
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import { configureStore } from '@reduxjs/toolkit';
|
||||
|
||||
import { rootReducer } from '../reducers';
|
||||
|
||||
import { errorsMiddleware } from './middlewares/errors';
|
||||
import { loadingBarMiddleware } from './middlewares/loading_bar';
|
||||
import { soundsMiddleware } from './middlewares/sounds';
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: rootReducer,
|
||||
middleware: (getDefaultMiddleware) =>
|
||||
getDefaultMiddleware({
|
||||
// In development, Redux Toolkit enables 2 default middlewares to detect
|
||||
// common issues with states. Unfortunately, our use of ImmutableJS for state
|
||||
// triggers both, so lets disable them until our state is fully refactored
|
||||
|
||||
// https://redux-toolkit.js.org/api/serializabilityMiddleware
|
||||
// This checks recursively that every values in the state are serializable in JSON
|
||||
// Which is not the case, as we use ImmutableJS structures, but also File objects
|
||||
serializableCheck: false,
|
||||
|
||||
// https://redux-toolkit.js.org/api/immutabilityMiddleware
|
||||
// This checks recursively if every value in the state is immutable (ie, a JS primitive type)
|
||||
// But this is not the case, as our Root State is an ImmutableJS map, which is an object
|
||||
immutableCheck: false,
|
||||
})
|
||||
.concat(
|
||||
loadingBarMiddleware({
|
||||
promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAIL'],
|
||||
}),
|
||||
)
|
||||
.concat(errorsMiddleware)
|
||||
.concat(soundsMiddleware()),
|
||||
});
|
||||
|
||||
// Infer the `RootState` and `AppDispatch` types from the store itself
|
||||
export type RootState = ReturnType<typeof rootReducer>;
|
||||
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
|
||||
export type AppDispatch = typeof store.dispatch;
|
||||
export type GetState = typeof store.getState;
|
||||
15
app/javascript/flavours/glitch/store/typed_functions.ts
Normal file
15
app/javascript/flavours/glitch/store/typed_functions.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import type { TypedUseSelectorHook } from 'react-redux';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
import { createAsyncThunk } from '@reduxjs/toolkit';
|
||||
|
||||
import type { AppDispatch, RootState } from './store';
|
||||
|
||||
export const useAppDispatch: () => AppDispatch = useDispatch;
|
||||
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
|
||||
|
||||
export const createAppAsyncThunk = createAsyncThunk.withTypes<{
|
||||
state: RootState;
|
||||
dispatch: AppDispatch;
|
||||
rejectValue: string;
|
||||
}>();
|
||||
|
|
@ -6,47 +6,78 @@
|
|||
|
||||
.account__display-name {
|
||||
flex: 1 1 auto;
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: $darker-text-color;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
|
||||
&--with-note {
|
||||
strong {
|
||||
display: inline;
|
||||
.display-name {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.display-name strong {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
&--minimal {
|
||||
.account__display-name {
|
||||
.display-name {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.display-name strong {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__note {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
color: $ui-secondary-color;
|
||||
}
|
||||
}
|
||||
margin-top: 10px;
|
||||
color: $darker-text-color;
|
||||
|
||||
.follow-recommendations-account {
|
||||
.icon-button {
|
||||
color: $ui-primary-color;
|
||||
&--missing {
|
||||
color: $dark-text-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $valid-value-color;
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account__wrapper {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.account__avatar-wrapper {
|
||||
float: left;
|
||||
margin-inline-start: 12px;
|
||||
margin-inline-end: 12px;
|
||||
}
|
||||
|
||||
.account__avatar {
|
||||
|
|
@ -129,9 +160,10 @@
|
|||
}
|
||||
|
||||
.account__relationship {
|
||||
height: 18px;
|
||||
padding: 10px;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.account__header__wrapper {
|
||||
|
|
@ -676,12 +708,13 @@
|
|||
border-top: 1px solid lighten($ui-base-color, 12%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 5px;
|
||||
label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: $darker-text-color;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
|
|
@ -689,41 +722,6 @@
|
|||
padding: 10px 0;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
flex: 1 0;
|
||||
|
||||
.icon-button {
|
||||
font-size: 14px;
|
||||
padding: 2px 6px;
|
||||
color: $darker-text-color;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: lighten($darker-text-color, 7%);
|
||||
background-color: rgba($darker-text-color, 0.15);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: rgba($darker-text-color, 0.3);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: darken($darker-text-color, 13%);
|
||||
background-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-spacer {
|
||||
flex: 0 0 5px;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
|
|
@ -753,6 +751,36 @@
|
|||
}
|
||||
}
|
||||
|
||||
.account__contents {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.account__details {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 1em;
|
||||
}
|
||||
|
||||
.verified-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: $valid-value-color;
|
||||
gap: 4px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
> span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.moved-account-banner,
|
||||
.follow-request-banner,
|
||||
.account-memorial-banner {
|
||||
|
|
|
|||
|
|
@ -914,13 +914,7 @@ $ui-header-height: 55px;
|
|||
|
||||
.column-title {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
|
||||
.logo {
|
||||
width: 50px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
padding-bottom: 40px;
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
|
|
@ -935,45 +929,321 @@ $ui-header-height: 55px;
|
|||
font-weight: 400;
|
||||
color: $darker-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.follow-recommendations-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.column-actions {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 200px;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
bottom: 0;
|
||||
height: 220px;
|
||||
width: auto;
|
||||
@media screen and (width >= 600px) {
|
||||
padding: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.column-list {
|
||||
margin: 0 20px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
background: darken($ui-base-color, 2%);
|
||||
border-radius: 4px;
|
||||
.onboarding__footer {
|
||||
margin-top: 30px;
|
||||
color: $dark-text-color;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
|
||||
&__empty-message {
|
||||
padding: 40px;
|
||||
.link-button {
|
||||
display: inline-block;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
color: $highlight-text-color;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border-radius: 8px;
|
||||
padding: 10px 15px;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
height: 56px;
|
||||
text-decoration: none;
|
||||
|
||||
svg {
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding__illustration {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
max-height: 200px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.onboarding__lead {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
color: $darker-text-color;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding__links {
|
||||
margin-bottom: 30px;
|
||||
|
||||
& > * {
|
||||
margin-bottom: 2px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding__steps {
|
||||
margin-bottom: 30px;
|
||||
|
||||
&__item {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
padding-inline-end: 15px;
|
||||
margin-bottom: 2px;
|
||||
text-decoration: none;
|
||||
text-align: start;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex: 0 0 auto;
|
||||
border-radius: 50%;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: $highlight-text-color;
|
||||
font-size: 1.2rem;
|
||||
|
||||
@media screen and (width >= 600px) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&__progress {
|
||||
flex: 0 0 auto;
|
||||
background: $valid-value-color;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
color: $primary-text-color;
|
||||
|
||||
svg {
|
||||
height: 14px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__go {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
color: $highlight-text-color;
|
||||
font-size: 17px;
|
||||
|
||||
svg {
|
||||
height: 1.5em;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
flex: 1 1 auto;
|
||||
line-height: 20px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
h6 {
|
||||
color: $highlight-text-color;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $darker-text-color;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onboarding__progress-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
position: sticky;
|
||||
background: $ui-base-color;
|
||||
|
||||
@media screen and (width >= 600) {
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
&__line {
|
||||
height: 4px;
|
||||
flex: 1 1 auto;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
&__step {
|
||||
flex: 0 0 auto;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border-radius: 50%;
|
||||
color: $primary-text-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
width: 15px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $valid-value-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__step.active,
|
||||
&__line.active {
|
||||
background: $valid-value-color;
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
$valid-value-color,
|
||||
lighten($valid-value-color, 8%),
|
||||
$valid-value-color
|
||||
);
|
||||
background-size: 200px 100%;
|
||||
animation: skeleton 1.2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.follow-recommendations {
|
||||
background: darken($ui-base-color, 4%);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.account:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&__empty {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
color: $darker-text-color;
|
||||
font-weight: 500;
|
||||
padding: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.tip-carousel {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
border-color: $highlight-text-color;
|
||||
}
|
||||
|
||||
.media-modal__pagination {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-paste-text {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border-radius: 8px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
padding: 16px;
|
||||
color: $primary-text-color;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
transition: border-color 300ms linear;
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:focus,
|
||||
&.focused {
|
||||
transition: none;
|
||||
outline: 0;
|
||||
border-color: $highlight-text-color;
|
||||
}
|
||||
|
||||
&.copied {
|
||||
border-color: $valid-value-color;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin-bottom: 30px;
|
||||
resize: none;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form__highlightable {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 1 auto;
|
||||
border-radius: 4px;
|
||||
transition: box-shadow 300ms linear;
|
||||
min-height: 0;
|
||||
|
||||
&.active {
|
||||
transition: none;
|
||||
box-shadow: 0 0 0 6px rgba(lighten($highlight-text-color, 8%), 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1096,4 +1366,9 @@ $ui-header-height: 55px;
|
|||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
background-color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,15 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.inline-alert {
|
||||
color: $valid-value-color;
|
||||
font-weight: 400;
|
||||
|
||||
.no-reduce-motion & {
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
.link-button {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
|
|
@ -397,6 +406,11 @@ body > [data-popper-placement] {
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&__account {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
|
|
@ -1661,3 +1675,66 @@ noscript {
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-list {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
inset-inline-start: 0;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.notification-bar {
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
inset-inline-start: -100%;
|
||||
width: auto;
|
||||
padding: 15px;
|
||||
margin: 0;
|
||||
color: $white;
|
||||
background: rgba($black, 0.85);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(lighten($classic-base-color, 4%), 0.85);
|
||||
border-radius: 8px;
|
||||
box-shadow:
|
||||
0 10px 15px -3px rgba($base-shadow-color, 0.25),
|
||||
0 4px 6px -4px rgba($base-shadow-color, 0.25);
|
||||
cursor: default;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
|
||||
&.notification-bar-active {
|
||||
inset-inline-start: 1rem;
|
||||
}
|
||||
|
||||
.no-reduce-motion & {
|
||||
transition: 0.5s cubic-bezier(0.89, 0.01, 0.5, 1.1);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
.notification-bar-title {
|
||||
margin-inline-end: 5px;
|
||||
}
|
||||
|
||||
.notification-bar-title,
|
||||
.notification-bar-action {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.notification-bar-action {
|
||||
text-transform: uppercase;
|
||||
margin-inline-start: 10px;
|
||||
cursor: pointer;
|
||||
color: $blurple-300;
|
||||
border-radius: 4px;
|
||||
padding: 0 4px;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: rgba($ui-base-color, 0.85);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@
|
|||
|
||||
.compose-form {
|
||||
flex: 1;
|
||||
overflow-y: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 310px;
|
||||
|
|
|
|||
|
|
@ -642,7 +642,7 @@
|
|||
|
||||
.status__display-name,
|
||||
.account__display-name {
|
||||
strong {
|
||||
.display-name strong {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -657,12 +657,12 @@ a.status__display-name,
|
|||
.reply-indicator__display-name,
|
||||
.detailed-status__display-name,
|
||||
.account__display-name {
|
||||
&:hover strong {
|
||||
&:hover .display-name strong {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.account__display-name strong {
|
||||
.account__display-name .display-name strong {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ pack:
|
|||
filename: packs/home.js
|
||||
preload:
|
||||
- flavours/glitch/async/compose
|
||||
- flavours/glitch/async/getting_started
|
||||
- flavours/glitch/async/home_timeline
|
||||
- flavours/glitch/async/notifications
|
||||
mailer:
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ pack:
|
|||
home:
|
||||
filename: application.js
|
||||
preload:
|
||||
- features/getting_started
|
||||
- features/compose
|
||||
- features/home_timeline
|
||||
- features/notifications
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
- content_for :header_tags do
|
||||
- if user_signed_in?
|
||||
= preload_pack_asset 'features/compose.js'
|
||||
= preload_pack_asset 'features/home_timeline.js'
|
||||
= preload_pack_asset 'features/notifications.js'
|
||||
%meta{ name: 'initialPath', content: request.path }
|
||||
|
||||
%meta{ name: 'applicationServerKey', content: Rails.configuration.x.vapid_public_key }
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
no:
|
||||
'no':
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
no:
|
||||
'no':
|
||||
|
|
|
|||
Loading…
Reference in a new issue