+ {counter}
+
+ )}
);
};
diff --git a/app/javascript/flavours/glitch/components/check_box.tsx b/app/javascript/flavours/glitch/components/check_box.tsx
index 7da8ef0ac5..9bd137abf5 100644
--- a/app/javascript/flavours/glitch/components/check_box.tsx
+++ b/app/javascript/flavours/glitch/components/check_box.tsx
@@ -1,5 +1,6 @@
import classNames from 'classnames';
+import CheckIndeterminateSmallIcon from '@/material-icons/400-24px/check_indeterminate_small.svg?react';
import DoneIcon from '@/material-icons/400-24px/done.svg?react';
import { Icon } from './icon';
@@ -7,6 +8,7 @@ import { Icon } from './icon';
interface Props {
value: string;
checked: boolean;
+ indeterminate: boolean;
name: string;
onChange: (event: React.ChangeEvent
diff --git a/app/javascript/flavours/glitch/components/dropdown_menu.jsx b/app/javascript/flavours/glitch/components/dropdown_menu.jsx
index 26c828fd64..051ae6299a 100644
--- a/app/javascript/flavours/glitch/components/dropdown_menu.jsx
+++ b/app/javascript/flavours/glitch/components/dropdown_menu.jsx
@@ -20,7 +20,7 @@ let id = 0;
class DropdownMenu extends PureComponent {
static propTypes = {
- items: PropTypes.oneOfType([PropTypes.array, ImmutablePropTypes.list]).isRequired,
+ items: PropTypes.array.isRequired,
loading: PropTypes.bool,
scrollable: PropTypes.bool,
onClose: PropTypes.func.isRequired,
@@ -39,6 +39,7 @@ class DropdownMenu extends PureComponent {
if (this.node && !this.node.contains(e.target)) {
this.props.onClose();
e.stopPropagation();
+ e.preventDefault();
}
};
@@ -164,7 +165,7 @@ class Dropdown extends PureComponent {
children: PropTypes.node,
icon: PropTypes.string,
iconComponent: PropTypes.func,
- items: PropTypes.oneOfType([PropTypes.array, ImmutablePropTypes.list]),
+ items: PropTypes.array.isRequired,
loading: PropTypes.bool,
size: PropTypes.number,
title: PropTypes.string,
diff --git a/app/javascript/flavours/glitch/components/dropdown_selector.tsx b/app/javascript/flavours/glitch/components/dropdown_selector.tsx
new file mode 100644
index 0000000000..b86d2d0f80
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/dropdown_selector.tsx
@@ -0,0 +1,185 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import classNames from 'classnames';
+
+import { supportsPassiveEvents } from 'detect-passive-events';
+
+import InfoIcon from '@/material-icons/400-24px/info.svg?react';
+
+import type { IconProp } from './icon';
+import { Icon } from './icon';
+
+const listenerOptions = supportsPassiveEvents
+ ? { passive: true, capture: true }
+ : true;
+
+export interface SelectItem {
+ value: string;
+ icon?: string;
+ iconComponent?: IconProp;
+ text: string;
+ meta: string;
+ extra?: string;
+}
+
+interface Props {
+ value: string;
+ classNamePrefix: string;
+ style?: React.CSSProperties;
+ items: SelectItem[];
+ onChange: (value: string) => void;
+ onClose: () => void;
+}
+
+export const DropdownSelector: React.FC = ({
+ style,
+ items,
+ value,
+ classNamePrefix = 'privacy-dropdown',
+ onClose,
+ onChange,
+}) => {
+ const nodeRef = useRef(null);
+ const focusedItemRef = useRef(null);
+ const [currentValue, setCurrentValue] = useState(value);
+
+ const handleDocumentClick = useCallback(
+ (e: MouseEvent | TouchEvent) => {
+ if (
+ nodeRef.current &&
+ e.target instanceof Node &&
+ !nodeRef.current.contains(e.target)
+ ) {
+ onClose();
+ e.stopPropagation();
+ }
+ },
+ [nodeRef, onClose],
+ );
+
+ const handleClick = useCallback(
+ (
+ e: React.MouseEvent | React.KeyboardEvent,
+ ) => {
+ const value = e.currentTarget.getAttribute('data-index');
+
+ e.preventDefault();
+
+ onClose();
+ if (value) onChange(value);
+ },
+ [onClose, onChange],
+ );
+
+ const handleKeyDown = useCallback(
+ (e: React.KeyboardEvent) => {
+ const value = e.currentTarget.getAttribute('data-index');
+ const index = items.findIndex((item) => item.value === value);
+
+ let element: Element | null | undefined = null;
+
+ switch (e.key) {
+ case 'Escape':
+ onClose();
+ break;
+ case ' ':
+ case 'Enter':
+ handleClick(e);
+ break;
+ case 'ArrowDown':
+ element =
+ nodeRef.current?.children[index + 1] ??
+ nodeRef.current?.firstElementChild;
+ break;
+ case 'ArrowUp':
+ element =
+ nodeRef.current?.children[index - 1] ??
+ nodeRef.current?.lastElementChild;
+ break;
+ case 'Tab':
+ if (e.shiftKey) {
+ element =
+ nodeRef.current?.children[index + 1] ??
+ nodeRef.current?.firstElementChild;
+ } else {
+ element =
+ nodeRef.current?.children[index - 1] ??
+ nodeRef.current?.lastElementChild;
+ }
+ break;
+ case 'Home':
+ element = nodeRef.current?.firstElementChild;
+ break;
+ case 'End':
+ element = nodeRef.current?.lastElementChild;
+ break;
+ }
+
+ if (element && element instanceof HTMLElement) {
+ const selectedValue = element.getAttribute('data-index');
+ element.focus();
+ if (selectedValue) setCurrentValue(selectedValue);
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ },
+ [nodeRef, items, onClose, handleClick, setCurrentValue],
+ );
+
+ useEffect(() => {
+ document.addEventListener('click', handleDocumentClick, { capture: true });
+ document.addEventListener('touchend', handleDocumentClick, listenerOptions);
+ focusedItemRef.current?.focus({ preventScroll: true });
+
+ return () => {
+ document.removeEventListener('click', handleDocumentClick, {
+ capture: true,
+ });
+ document.removeEventListener(
+ 'touchend',
+ handleDocumentClick,
+ listenerOptions,
+ );
+ };
+ }, [handleDocumentClick]);
+
+ return (
+ @{account?.acct} }}
- />
- ),
- confirm: intl.formatMessage(messages.unfollow),
- onConfirm: () => {
- dispatch(unfollowAccount(accountId));
- },
- },
- }),
+ openModal({ modalType: 'CONFIRM_UNFOLLOW', modalProps: { account } }),
);
} else {
dispatch(followAccount(accountId));
}
- }, [dispatch, intl, accountId, relationship, account, signedIn]);
+ }, [dispatch, accountId, relationship, account, signedIn]);
let label;
diff --git a/app/javascript/flavours/glitch/components/hover_card_account.tsx b/app/javascript/flavours/glitch/components/hover_card_account.tsx
index 56f431a786..caec1a84b0 100644
--- a/app/javascript/flavours/glitch/components/hover_card_account.tsx
+++ b/app/javascript/flavours/glitch/components/hover_card_account.tsx
@@ -1,5 +1,7 @@
import { useEffect, forwardRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+
import classNames from 'classnames';
import { fetchAccount } from 'flavours/glitch/actions/accounts';
@@ -25,6 +27,11 @@ export const HoverCardAccount = forwardRef<
accountId ? state.accounts.get(accountId) : undefined,
);
+ const note = useAppSelector(
+ (state) =>
+ state.relationships.getIn([accountId, 'note']) as string | undefined,
+ );
+
useEffect(() => {
if (accountId && !account) {
dispatch(fetchAccount(accountId));
@@ -57,6 +64,17 @@ export const HoverCardAccount = forwardRef<
className='hover-card__bio'
/>
-
+ {items.map((item) => (
+
-
+ {item.icon && item.iconComponent && (
+ ++ )} + +
+ + {item.text} + {item.meta} ++ + {item.extra && ( +++ )} ++
+ ))}
+
-
+
-
+
+
+ - {note} +
diff --git a/app/javascript/flavours/glitch/components/timeline_hint.tsx b/app/javascript/flavours/glitch/components/timeline_hint.tsx
index bf2a2d8bba..9e0d3676ec 100644
--- a/app/javascript/flavours/glitch/components/timeline_hint.tsx
+++ b/app/javascript/flavours/glitch/components/timeline_hint.tsx
@@ -1,25 +1,23 @@
-import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
interface Props {
- resource: JSX.Element;
+ message: React.ReactNode;
+ label: React.ReactNode;
url: string;
+ className?: string;
}
-export const TimelineHint: React.FC = ({ resource, url }) => (
-
-
-
+export const TimelineHint: React.FC = ({
+ className,
+ message,
+ label,
+ url,
+}) => (
+ @{account.get('acct')} }} />,
- confirm: intl.formatMessage(messages.unfollowConfirm),
- onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
- },
- }));
+ dispatch(openModal({ modalType: 'CONFIRM_UNFOLLOW', modalProps: { account } }));
} else {
dispatch(followAccount(account.get('id')));
}
diff --git a/app/javascript/flavours/glitch/containers/domain_container.jsx b/app/javascript/flavours/glitch/containers/domain_container.jsx
deleted file mode 100644
index c719a5775c..0000000000
--- a/app/javascript/flavours/glitch/containers/domain_container.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-
-import { connect } from 'react-redux';
-
-import { blockDomain, unblockDomain } from '../actions/domain_blocks';
-import { openModal } from '../actions/modal';
-import { Domain } from '../components/domain';
-
-const messages = defineMessages({
- blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Block entire domain' },
-});
-
-const makeMapStateToProps = () => {
- const mapStateToProps = () => ({});
-
- return mapStateToProps;
-};
-
-const mapDispatchToProps = (dispatch, { intl }) => ({
- onBlockDomain (domain) {
- dispatch(openModal({
- modalType: 'CONFIRM',
- modalProps: {
- message: {domain} }} />,
- confirm: intl.formatMessage(messages.blockDomainConfirm),
- onConfirm: () => dispatch(blockDomain(domain)),
- },
- }));
- },
-
- onUnblockDomain (domain) {
- dispatch(unblockDomain(domain));
- },
-});
-
-export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Domain));
diff --git a/app/javascript/flavours/glitch/containers/status_container.js b/app/javascript/flavours/glitch/containers/status_container.js
index 42c5c028f8..cf01d67060 100644
--- a/app/javascript/flavours/glitch/containers/status_container.js
+++ b/app/javascript/flavours/glitch/containers/status_container.js
@@ -1,5 +1,3 @@
-import { defineMessages, injectIntl } from 'react-intl';
-
import { connect } from 'react-redux';
import { initBlockModal } from 'flavours/glitch/actions/blocks';
@@ -21,7 +19,6 @@ import {
addReaction,
removeReaction,
} from 'flavours/glitch/actions/interactions';
-import { changeLocalSetting } from 'flavours/glitch/actions/local_settings';
import { openModal } from 'flavours/glitch/actions/modal';
import { initMuteModal } from 'flavours/glitch/actions/mutes';
import { deployPictureInPicture } from 'flavours/glitch/actions/picture_in_picture';
@@ -41,21 +38,6 @@ import { makeGetStatus, makeGetPictureInPicture } from 'flavours/glitch/selector
import { showAlertForError } from '../actions/alerts';
-const messages = defineMessages({
- deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
- deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
- redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
- redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned.' },
- replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
- replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
- editConfirm: { id: 'confirmations.edit.confirm', defaultMessage: 'Edit' },
- editMessage: { id: 'confirmations.edit.message', defaultMessage: 'Editing now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
- unfilterConfirm: { id: 'confirmations.unfilter.confirm', defaultMessage: 'Show' },
- author: { id: 'confirmations.unfilter.author', defaultMessage: 'Author' },
- matchingFilters: { id: 'confirmations.unfilter.filters', defaultMessage: 'Matching {count, plural, one {filter} other {filters}}' },
- editFilter: { id: 'confirmations.unfilter.edit_filter', defaultMessage: 'Edit filter' },
-});
-
const makeMapStateToProps = () => {
const getStatus = makeGetStatus();
const getPictureInPicture = makeGetPictureInPicture();
@@ -90,22 +72,14 @@ const makeMapStateToProps = () => {
return mapStateToProps;
};
-const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
+const mapDispatchToProps = (dispatch, { contextType }) => ({
onReply (status) {
dispatch((_, getState) => {
let state = getState();
if (state.getIn(['local_settings', 'confirm_before_clearing_draft']) && state.getIn(['compose', 'text']).trim().length !== 0) {
- dispatch(openModal({
- modalType: 'CONFIRM',
- modalProps: {
- message: intl.formatMessage(messages.replyMessage),
- confirm: intl.formatMessage(messages.replyConfirm),
- onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_before_clearing_draft'], false)),
- onConfirm: () => dispatch(replyCompose(status)),
- },
- }));
+ dispatch(openModal({ modalType: 'CONFIRM_REPLY', modalProps: { status } }));
} else {
dispatch(replyCompose(status));
}
@@ -158,14 +132,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
if (!deleteModal) {
dispatch(deleteStatus(status.get('id'), withRedraft));
} else {
- dispatch(openModal({
- modalType: 'CONFIRM',
- modalProps: {
- message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
- confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
- onConfirm: () => dispatch(deleteStatus(status.get('id'), withRedraft)),
- },
- }));
+ dispatch(openModal({ modalType: 'CONFIRM_DELETE_STATUS', modalProps: { statusId: status.get('id'), withRedraft } }));
}
},
@@ -173,14 +140,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
dispatch((_, getState) => {
let state = getState();
if (state.getIn(['compose', 'text']).trim().length !== 0) {
- dispatch(openModal({
- modalType: 'CONFIRM',
- modalProps: {
- message: intl.formatMessage(messages.editMessage),
- confirm: intl.formatMessage(messages.editConfirm),
- onConfirm: () => dispatch(editStatus(status.get('id'))),
- },
- }));
+ dispatch(openModal({ modalType: 'CONFIRM_EDIT_STATUS', modalProps: { statusId: status.get('id') } }));
} else {
dispatch(editStatus(status.get('id')));
}
@@ -267,4 +227,4 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
});
-export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Status));
+export default connect(makeMapStateToProps, mapDispatchToProps)(Status);
diff --git a/app/javascript/flavours/glitch/entrypoints/common.js b/app/javascript/flavours/glitch/entrypoints/common.js
index ade52fc413..774139c35c 100644
--- a/app/javascript/flavours/glitch/entrypoints/common.js
+++ b/app/javascript/flavours/glitch/entrypoints/common.js
@@ -2,7 +2,6 @@
that is implicitly generated as the common chunk through webpack's `splitChunks` config */
import '@/entrypoints/public-path';
-import 'font-awesome/css/font-awesome.css';
// This is a hack to ensures that webpack compiles our images.
require.context('../images', true);
diff --git a/app/javascript/flavours/glitch/entrypoints/public.tsx b/app/javascript/flavours/glitch/entrypoints/public.tsx
index 649af3a880..44afc9d825 100644
--- a/app/javascript/flavours/glitch/entrypoints/public.tsx
+++ b/app/javascript/flavours/glitch/entrypoints/public.tsx
@@ -431,6 +431,42 @@ Rails.delegate(document, 'img.custom-emoji', 'mouseout', ({ target }) => {
target.src = target.dataset.static;
});
+const setInputDisabled = (
+ input: HTMLInputElement | HTMLSelectElement,
+ disabled: boolean,
+) => {
+ input.disabled = disabled;
+
+ const wrapper = input.closest('.with_label');
+ if (wrapper) {
+ wrapper.classList.toggle('disabled', input.disabled);
+
+ const hidden =
+ input.type === 'checkbox' &&
+ wrapper.querySelector('input[type=hidden][value="0"]');
+ if (hidden) {
+ hidden.disabled = input.disabled;
+ }
+ }
+};
+
+Rails.delegate(
+ document,
+ '#account_statuses_cleanup_policy_enabled',
+ 'change',
+ ({ target }) => {
+ if (!(target instanceof HTMLInputElement) || !target.form) return;
+
+ target.form
+ .querySelectorAll<
+ HTMLInputElement | HTMLSelectElement
+ >('input:not([type=hidden], #account_statuses_cleanup_policy_enabled), select')
+ .forEach((input) => {
+ setInputDisabled(input, !target.checked);
+ });
+ },
+);
+
// Empty the honeypot fields in JS in case something like an extension
// automatically filled them.
Rails.delegate(document, '#registration_new_user,#new_user', 'submit', () => {
diff --git a/app/javascript/flavours/glitch/features/account/components/account_note.jsx b/app/javascript/flavours/glitch/features/account/components/account_note.jsx
index 272a4ee312..e736e7ad64 100644
--- a/app/javascript/flavours/glitch/features/account/components/account_note.jsx
+++ b/app/javascript/flavours/glitch/features/account/components/account_note.jsx
@@ -151,7 +151,7 @@ class AccountNote extends ImmutablePureComponent {
return (
+export const TimelineHint: React.FC
+
);
diff --git a/app/javascript/flavours/glitch/containers/account_container.jsx b/app/javascript/flavours/glitch/containers/account_container.jsx
index f171fcc2fe..7fd186b657 100644
--- a/app/javascript/flavours/glitch/containers/account_container.jsx
+++ b/app/javascript/flavours/glitch/containers/account_container.jsx
@@ -1,24 +1,20 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { injectIntl } from 'react-intl';
import { connect } from 'react-redux';
+import { openModal } from 'flavours/glitch/actions/modal';
+
import {
followAccount,
- unfollowAccount,
blockAccount,
unblockAccount,
muteAccount,
unmuteAccount,
} from '../actions/accounts';
-import { openModal } from '../actions/modal';
import { initMuteModal } from '../actions/mutes';
import Account from '../components/account';
import { makeGetAccount } from '../selectors';
-const messages = defineMessages({
- unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
-});
-
const makeMapStateToProps = () => {
const getAccount = makeGetAccount();
@@ -29,18 +25,11 @@ const makeMapStateToProps = () => {
return mapStateToProps;
};
-const mapDispatchToProps = (dispatch, { intl }) => ({
+const mapDispatchToProps = (dispatch) => ({
onFollow (account) {
if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
- dispatch(openModal({
- modalType: 'CONFIRM',
- modalProps: {
- message: {message}
+ -