Skip to content

Commit

Permalink
Merge pull request #2822 from ClearlyClaire/glitch-soc/merge-upstream
Browse files Browse the repository at this point in the history
Merge upstream changes up to e08d227
  • Loading branch information
ClearlyClaire authored Aug 23, 2024
2 parents eae232f + 532b53e commit ae9bd63
Show file tree
Hide file tree
Showing 14 changed files with 376 additions and 149 deletions.
5 changes: 5 additions & 0 deletions app/javascript/flavours/glitch/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -144,12 +144,17 @@
"settings.wide_view": "Wide view (Desktop mode only)",
"settings.wide_view_hint": "Stretches columns to better fill the available space.",
"status.collapse": "Collapse",
"status.filtered": "Filtered",
"status.has_audio": "Features attached audio files",
"status.has_pictures": "Features attached pictures",
"status.has_preview_card": "Features an attached preview card",
"status.has_video": "Features attached videos",
"status.hide": "Hide post",
"status.in_reply_to": "This toot is a reply",
"status.is_poll": "This toot is a poll",
"status.local_only": "Only visible from your instance",
"status.show_filter_reason": "Show anyway",
"status.show_less": "Show less",
"status.show_more": "Show more",
"status.uncollapse": "Uncollapse"
}
16 changes: 8 additions & 8 deletions app/javascript/flavours/glitch/styles/widgets.scss
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
@use 'sass:math';

.directory {
background: var(--background-color);
border-radius: 4px;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);

&__tag {
box-sizing: border-box;
margin-bottom: 10px;
Expand Down Expand Up @@ -65,7 +59,8 @@
&.active h4 {
&,
.fa,
small {
small,
.trends__item__current {
color: $primary-text-color;
}
}
Expand All @@ -78,6 +73,10 @@
&.active .avatar-stack .account__avatar {
border-color: $ui-highlight-color;
}

.trends__item__current {
padding-inline-end: 0;
}
}
}

Expand Down Expand Up @@ -153,8 +152,9 @@
vertical-align: initial !important;
}

&__interrelationships {
tbody td.accounts-table__interrelationships {
width: 21px;
padding-inline-end: 16px;
}

.icon {
Expand Down
24 changes: 24 additions & 0 deletions app/javascript/images/filter-stripes.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions app/javascript/mastodon/components/content_warning.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { StatusBanner, BannerVariant } from './status_banner';

export const ContentWarning: React.FC<{
text: string;
expanded?: boolean;
onClick?: () => void;
}> = ({ text, expanded, onClick }) => (
<StatusBanner
expanded={expanded}
onClick={onClick}
variant={BannerVariant.Yellow}
>
<p dangerouslySetInnerHTML={{ __html: text }} />
</StatusBanner>
);
23 changes: 23 additions & 0 deletions app/javascript/mastodon/components/filter_warning.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { FormattedMessage } from 'react-intl';

import { StatusBanner, BannerVariant } from './status_banner';

export const FilterWarning: React.FC<{
title: string;
expanded?: boolean;
onClick?: () => void;
}> = ({ title, expanded, onClick }) => (
<StatusBanner
expanded={expanded}
onClick={onClick}
variant={BannerVariant.Blue}
>
<p>
<FormattedMessage
id='filter_warning.matches_filter'
defaultMessage='Matches filter “{title}”'
values={{ title }}
/>
</p>
</StatusBanner>
);
86 changes: 43 additions & 43 deletions app/javascript/mastodon/components/status.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?re
import PushPinIcon from '@/material-icons/400-24px/push_pin.svg?react';
import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
import { ContentWarning } from 'mastodon/components/content_warning';
import { FilterWarning } from 'mastodon/components/filter_warning';
import { Icon } from 'mastodon/components/icon';
import PictureInPicturePlaceholder from 'mastodon/components/picture_in_picture_placeholder';
import { withOptionalRouter, WithOptionalRouterPropTypes } from 'mastodon/utils/react_router';
Expand Down Expand Up @@ -140,7 +142,7 @@ class Status extends ImmutablePureComponent {

state = {
showMedia: defaultMediaVisibility(this.props.status) && !(this.context?.hideMediaByDefault),
forceFilter: undefined,
showDespiteFilter: undefined,
};

componentDidUpdate (prevProps) {
Expand All @@ -152,7 +154,7 @@ class Status extends ImmutablePureComponent {
if (this.props.status?.get('id') !== prevProps.status?.get('id')) {
this.setState({
showMedia: defaultMediaVisibility(this.props.status) && !(this.context?.hideMediaByDefault),
forceFilter: undefined,
showDespiteFilter: undefined,
});
}
}
Expand Down Expand Up @@ -325,20 +327,32 @@ class Status extends ImmutablePureComponent {
};

handleHotkeyToggleHidden = () => {
this.props.onToggleHidden(this._properStatus());
const { onToggleHidden } = this.props;
const status = this._properStatus();

if (status.get('matched_filters')) {
const expandedBecauseOfCW = !status.get('hidden') || status.get('spoiler_text').length === 0;
const expandedBecauseOfFilter = this.state.showDespiteFilter;

if (expandedBecauseOfFilter && !expandedBecauseOfCW) {
onToggleHidden(status);
} else if (expandedBecauseOfFilter && expandedBecauseOfCW) {
onToggleHidden(status);
this.handleFilterToggle();
} else {
this.handleFilterToggle();
}
} else {
onToggleHidden(status);
}
};

handleHotkeyToggleSensitive = () => {
this.handleToggleMediaVisibility();
};

handleUnfilterClick = e => {
this.setState({ forceFilter: false });
e.preventDefault();
};

handleFilterClick = () => {
this.setState({ forceFilter: true });
handleFilterToggle = () => {
this.setState(state => ({ ...state, showDespiteFilter: !state.showDespiteFilter }));
};

_properStatus () {
Expand Down Expand Up @@ -396,25 +410,6 @@ class Status extends ImmutablePureComponent {
const connectReply = nextInReplyToId && nextInReplyToId === status.get('id');
const matchedFilters = status.get('matched_filters');

if (this.state.forceFilter === undefined ? matchedFilters : this.state.forceFilter) {
const minHandlers = this.props.muted ? {} : {
moveUp: this.handleHotkeyMoveUp,
moveDown: this.handleHotkeyMoveDown,
};

return (
<HotKeys handlers={minHandlers} tabIndex={unfocusable ? null : -1}>
<div className='status__wrapper status__wrapper--filtered focusable' tabIndex={unfocusable ? null : 0} ref={this.handleRef}>
<FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {matchedFilters.join(', ')}.
{' '}
<button className='status__wrapper--filtered__button' onClick={this.handleUnfilterClick}>
<FormattedMessage id='status.show_filter_reason' defaultMessage='Show anyway' />
</button>
</div>
</HotKeys>
);
}

if (featured) {
prepend = (
<div className='status__prepend'>
Expand Down Expand Up @@ -548,7 +543,7 @@ class Status extends ImmutablePureComponent {
}

const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
const expanded = !status.get('hidden') || status.get('spoiler_text').length === 0;
const expanded = (!matchedFilters || this.state.showDespiteFilter) && (!status.get('hidden') || status.get('spoiler_text').length === 0);

return (
<HotKeys handlers={handlers} tabIndex={unfocusable ? null : -1}>
Expand All @@ -574,22 +569,27 @@ class Status extends ImmutablePureComponent {
</a>
</div>

<StatusContent
status={status}
onClick={this.handleClick}
expanded={expanded}
onExpandedToggle={this.handleExpandedToggle}
onTranslate={this.handleTranslate}
collapsible
onCollapsedToggle={this.handleCollapsedToggle}
{...statusContentProps}
/>
{matchedFilters && <FilterWarning title={matchedFilters.join(', ')} expanded={this.state.showDespiteFilter} onClick={this.handleFilterToggle} />}

{media}
{(status.get('spoiler_text').length > 0 && (!matchedFilters || this.state.showDespiteFilter)) && <ContentWarning text={status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml')} expanded={expanded} onClick={this.handleExpandedToggle} />}

{expanded && hashtagBar}
{expanded && (
<>
<StatusContent
status={status}
onClick={this.handleClick}
onTranslate={this.handleTranslate}
collapsible
onCollapsedToggle={this.handleCollapsedToggle}
{...statusContentProps}
/>

{media}
{hashtagBar}
</>
)}

<StatusActionBar scrollKey={scrollKey} status={status} account={account} onFilter={matchedFilters ? this.handleFilterClick : null} {...other} />
<StatusActionBar scrollKey={scrollKey} status={status} account={account} {...other} />
</div>
</div>
</HotKeys>
Expand Down
12 changes: 0 additions & 12 deletions app/javascript/mastodon/components/status_action_bar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
import StarBorderIcon from '@/material-icons/400-24px/star.svg?react';
import VisibilityIcon from '@/material-icons/400-24px/visibility.svg?react';
import RepeatActiveIcon from '@/svg-icons/repeat_active.svg?react';
import RepeatDisabledIcon from '@/svg-icons/repeat_disabled.svg?react';
import RepeatPrivateIcon from '@/svg-icons/repeat_private.svg?react';
Expand Down Expand Up @@ -61,7 +60,6 @@ const messages = defineMessages({
admin_status: { id: 'status.admin_status', defaultMessage: 'Open this post in the moderation interface' },
admin_domain: { id: 'status.admin_domain', defaultMessage: 'Open moderation interface for {domain}' },
copy: { id: 'status.copy', defaultMessage: 'Copy link to post' },
hide: { id: 'status.hide', defaultMessage: 'Hide post' },
blockDomain: { id: 'account.block_domain', defaultMessage: 'Block domain {domain}' },
unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unblock domain {domain}' },
unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
Expand Down Expand Up @@ -241,10 +239,6 @@ class StatusActionBar extends ImmutablePureComponent {
navigator.clipboard.writeText(url);
};

handleHideClick = () => {
this.props.onFilter();
};

render () {
const { status, relationship, intl, withDismiss, withCounters, scrollKey } = this.props;
const { signedIn, permissions } = this.props.identity;
Expand Down Expand Up @@ -377,10 +371,6 @@ class StatusActionBar extends ImmutablePureComponent {
reblogIconComponent = RepeatDisabledIcon;
}

const filterButton = this.props.onFilter && (
<IconButton className='status__action-bar__button' title={intl.formatMessage(messages.hide)} icon='eye' iconComponent={VisibilityIcon} onClick={this.handleHideClick} />
);

const isReply = status.get('in_reply_to_account_id') === status.getIn(['account', 'id']);

return (
Expand All @@ -390,8 +380,6 @@ class StatusActionBar extends ImmutablePureComponent {
<IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' iconComponent={status.get('favourited') ? StarIcon : StarBorderIcon} onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
<IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} />

{filterButton}

<DropdownMenuContainer
scrollKey={scrollKey}
status={status}
Expand Down
37 changes: 37 additions & 0 deletions app/javascript/mastodon/components/status_banner.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { FormattedMessage } from 'react-intl';

export enum BannerVariant {
Yellow = 'yellow',
Blue = 'blue',
}

export const StatusBanner: React.FC<{
children: React.ReactNode;
variant: BannerVariant;
expanded?: boolean;
onClick?: () => void;
}> = ({ children, variant, expanded, onClick }) => (
<div
className={
variant === BannerVariant.Yellow
? 'content-warning'
: 'content-warning content-warning--filter'
}
>
{children}

<button className='link-button' onClick={onClick}>
{expanded ? (
<FormattedMessage
id='content_warning.hide'
defaultMessage='Hide post'
/>
) : (
<FormattedMessage
id='content_warning.show'
defaultMessage='Show anyway'
/>
)}
</button>
</div>
);
Loading

0 comments on commit ae9bd63

Please sign in to comment.