diff --git a/app/javascript/flavours/glitch/api_types/accounts.ts b/app/javascript/flavours/glitch/api_types/accounts.ts index 3347a970fb..5bf3e64288 100644 --- a/app/javascript/flavours/glitch/api_types/accounts.ts +++ b/app/javascript/flavours/glitch/api_types/accounts.ts @@ -43,4 +43,5 @@ export interface ApiAccountJSON { suspended?: boolean; limited?: boolean; memorial?: boolean; + hide_collections: boolean; } diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx index 266a3ca995..fd7caea6df 100644 --- a/app/javascript/flavours/glitch/components/account.jsx +++ b/app/javascript/flavours/glitch/components/account.jsx @@ -147,7 +147,7 @@ class Account extends ImmutablePureComponent {
- + {!minimal && (
{account.get('followers_count') !== -1 && ( diff --git a/app/javascript/flavours/glitch/components/collapse_button.jsx b/app/javascript/flavours/glitch/components/collapse_button.jsx new file mode 100644 index 0000000000..36cda45361 --- /dev/null +++ b/app/javascript/flavours/glitch/components/collapse_button.jsx @@ -0,0 +1,45 @@ +import PropTypes from 'prop-types'; +import { useCallback } from 'react'; + +import { defineMessages, useIntl } from 'react-intl'; + +import ExpandLessIcon from '@/material-icons/400-24px/expand_less.svg?react'; + +import { IconButton } from './icon_button'; + +const messages = defineMessages({ + collapse: { id: 'status.collapse', defaultMessage: 'Collapse' }, + uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' }, +}); + +export const CollapseButton = ({ collapsed, setCollapsed }) => { + const intl = useIntl(); + + const handleCollapsedClick = useCallback((e) => { + if (e.button === 0) { + setCollapsed(!collapsed); + e.preventDefault(); + } + }, [collapsed, setCollapsed]); + + return ( + + ); +}; + +CollapseButton.propTypes = { + collapsed: PropTypes.bool, + setCollapsed: PropTypes.func.isRequired, +}; diff --git a/app/javascript/flavours/glitch/components/display_name.tsx b/app/javascript/flavours/glitch/components/display_name.tsx index 82b66b5748..dd7d12f70a 100644 --- a/app/javascript/flavours/glitch/components/display_name.tsx +++ b/app/javascript/flavours/glitch/components/display_name.tsx @@ -1,7 +1,5 @@ import React from 'react'; -import classNames from 'classnames'; - import type { List } from 'immutable'; import type { Account } from 'flavours/glitch/models/account'; @@ -14,7 +12,6 @@ interface Props { account?: Account; others?: List; localDomain?: string; - inline?: boolean; } export class DisplayName extends React.PureComponent { @@ -51,7 +48,7 @@ export class DisplayName extends React.PureComponent { }; render() { - const { others, localDomain, inline } = this.props; + const { others, localDomain } = this.props; let displayName: React.ReactNode, suffix: React.ReactNode, @@ -114,13 +111,11 @@ export class DisplayName extends React.PureComponent { return ( - {displayName} - {inline ? ' ' : null} - {suffix} + {displayName} {suffix} ); } diff --git a/app/javascript/flavours/glitch/components/media_gallery.jsx b/app/javascript/flavours/glitch/components/media_gallery.jsx index 9db2a43009..ec18f882b6 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.jsx +++ b/app/javascript/flavours/glitch/components/media_gallery.jsx @@ -18,26 +18,7 @@ import { autoPlayGif, displayMedia, useBlurhash } from '../initial_state'; import { IconButton } from './icon_button'; const messages = defineMessages({ - hidden: { - defaultMessage: 'Media hidden', - id: 'status.media_hidden', - }, - sensitive: { - defaultMessage: 'Sensitive', - id: 'media_gallery.sensitive', - }, - toggle: { - defaultMessage: 'Click to view', - id: 'status.sensitive_toggle', - }, - toggle_visible: { - defaultMessage: '{number, plural, one {Hide image} other {Hide images}}', - id: 'media_gallery.toggle_visible', - }, - warning: { - defaultMessage: 'Sensitive content', - id: 'status.sensitive_warning', - }, + toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: '{number, plural, one {Hide image} other {Hide images}}' }, }); class Item extends PureComponent { @@ -299,8 +280,8 @@ class MediaGallery extends PureComponent { this.props.onOpenMedia(this.props.media, index, this.props.lang); }; - handleRef = (node) => { - this.node = node; + handleRef = c => { + this.node = c; if (this.node) { this._setDimensions(); @@ -379,11 +360,6 @@ class MediaGallery extends PureComponent {
{spoilerButton} - {visible && sensitive && ( - - - - )}
{children} diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx index 141483dd01..81cc5a9d12 100644 --- a/app/javascript/flavours/glitch/components/status.jsx +++ b/app/javascript/flavours/glitch/components/status.jsx @@ -23,6 +23,7 @@ import { MediaGallery, Video, Audio } from '../features/ui/util/async-components import { displayMedia, visibleReactions } from '../initial_state'; import AttachmentList from './attachment_list'; +import { CollapseButton } from './collapse_button'; import { getHashtagBarForStatus } from './hashtag_bar'; import StatusActionBar from './status_action_bar'; import StatusContent from './status_content'; @@ -517,7 +518,6 @@ class Status extends ImmutablePureComponent { render () { const { - handleRef, parseClick, setCollapsed, } = this; @@ -736,7 +736,6 @@ class Status extends ImmutablePureComponent { , ); @@ -772,7 +771,13 @@ class Status extends ImmutablePureComponent { account={account} parseClick={parseClick} notificationId={this.props.notificationId} - /> + > + {muted && settings.getIn(['collapsed', 'enabled']) && ( +
+ +
+ )} + ); } @@ -780,94 +785,86 @@ class Status extends ImmutablePureComponent { rebloggedByText = intl.formatMessage({ id: 'status.reblogged_by', defaultMessage: '{name} boosted' }, { name: account.get('acct') }); } - const computedClass = classNames('status', `status-${status.get('visibility')}`, { - collapsed: isCollapsed, - 'has-background': isCollapsed && background, - 'status__wrapper-reply': !!status.get('in_reply_to_id'), - 'status--in-thread': !!rootId, - 'status--first-in-thread': previousId && (!connectUp || connectToRoot), - unread, - muted, - }, 'focusable'); - const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status); contentMedia.push(hashtagBar); return (
- {!muted && prepend} + {prepend} - {(connectReply || connectUp || connectToRoot) &&
} +
+ {(connectReply || connectUp || connectToRoot) &&
} -
- - {muted && prepend} - {!muted || !isCollapsed ? ( + {(!muted || !isCollapsed) && ( +
- ) : null} - - +
+ )} + -
- - + - {!isCollapsed || !(muted || !settings.getIn(['collapsed', 'show_action_bar'])) ? ( - - ) : null} - {notification ? ( - - ) : null} + {(!isCollapsed || !(muted || !settings.getIn(['collapsed', 'show_action_bar']))) && ( + + )} + {notification && ( + + )} +
); diff --git a/app/javascript/flavours/glitch/components/status_header.jsx b/app/javascript/flavours/glitch/components/status_header.jsx index 1c51707cef..692dca5c7b 100644 --- a/app/javascript/flavours/glitch/components/status_header.jsx +++ b/app/javascript/flavours/glitch/components/status_header.jsx @@ -45,26 +45,19 @@ export default class StatusHeader extends PureComponent { } return ( - + + + ); } diff --git a/app/javascript/flavours/glitch/components/status_icons.jsx b/app/javascript/flavours/glitch/components/status_icons.jsx index 2727d3410a..8ee84fe269 100644 --- a/app/javascript/flavours/glitch/components/status_icons.jsx +++ b/app/javascript/flavours/glitch/components/status_icons.jsx @@ -6,7 +6,6 @@ import { defineMessages, injectIntl } from 'react-intl'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import ExpandLessIcon from '@/material-icons/400-24px/expand_less.svg?react'; import ForumIcon from '@/material-icons/400-24px/forum.svg?react'; import HomeIcon from '@/material-icons/400-24px/home.svg?react'; import ImageIcon from '@/material-icons/400-24px/image.svg?react'; @@ -17,8 +16,7 @@ import MusicNoteIcon from '@/material-icons/400-24px/music_note.svg?react'; import { Icon } from 'flavours/glitch/components/icon'; import { languages } from 'flavours/glitch/initial_state'; - -import { IconButton } from './icon_button'; +import { CollapseButton } from './collapse_button'; import { VisibilityIcon } from './visibility_icon'; const messages = defineMessages({ @@ -118,6 +116,7 @@ class StatusIcons extends PureComponent { mediaIcons, collapsible, collapsed, + setCollapsed, settings, intl, } = this.props; @@ -143,21 +142,7 @@ class StatusIcons extends PureComponent { />} {settings.get('media') && !!mediaIcons && mediaIcons.map(icon => this.renderIcon(icon))} {settings.get('visibility') && } - {collapsible && ( - - )} + {collapsible && }
); } diff --git a/app/javascript/flavours/glitch/components/status_prepend.jsx b/app/javascript/flavours/glitch/components/status_prepend.jsx index 7cb1599ac2..f189f7be9e 100644 --- a/app/javascript/flavours/glitch/components/status_prepend.jsx +++ b/app/javascript/flavours/glitch/components/status_prepend.jsx @@ -24,6 +24,7 @@ export default class StatusPrepend extends PureComponent { account: ImmutablePropTypes.map.isRequired, parseClick: PropTypes.func.isRequired, notificationId: PropTypes.number, + children: PropTypes.node, }; handleClick = (e) => { @@ -39,11 +40,13 @@ export default class StatusPrepend extends PureComponent { href={account.get('url')} className='status__display-name' > - + + + ); switch (type) { @@ -121,7 +124,7 @@ export default class StatusPrepend extends PureComponent { render () { const { Message } = this; - const { type } = this.props; + const { type, children } = this.props; let iconId, iconComponent; @@ -159,14 +162,13 @@ export default class StatusPrepend extends PureComponent { return !type ? null : ( ); } diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx b/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx index 9ccf5bd17a..cb8836ef7c 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx +++ b/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx @@ -1,54 +1,38 @@ import { FormattedMessage } from 'react-intl'; -import { withRouter } from 'react-router-dom'; - import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; - -import TripIcon from '@/material-icons/400-24px/trip.svg?react'; -import { Icon } from 'flavours/glitch/components/icon'; -import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router'; - import { AvatarOverlay } from '../../../components/avatar_overlay'; import { DisplayName } from '../../../components/display_name'; +import { Permalink } from '../../../components/permalink'; -class MovedNote extends ImmutablePureComponent { +export default class MovedNote extends ImmutablePureComponent { static propTypes = { from: ImmutablePropTypes.map.isRequired, to: ImmutablePropTypes.map.isRequired, - ...WithRouterPropTypes, - }; - - handleAccountClick = e => { - if (e.button === 0) { - e.preventDefault(); - this.props.history.push(`/@${this.props.to.get('acct')}`); - } - - e.stopPropagation(); }; render () { const { from, to } = this.props; - const displayNameHtml = { __html: from.get('display_name_html') }; return ( -
-
-
- }} /> +
+
+ }} />
- -
- - +
+ +
+ + + + +
); } } - -export default withRouter(MovedNote); diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx index 33f28e46f4..e5f24b51f9 100644 --- a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx @@ -156,7 +156,11 @@ export default class ComposerOptionsDropdownContent extends PureComponent { if (!contents) { contents = ( <> - {icon && } + {icon && ( +
+ +
+ )}
{text} diff --git a/app/javascript/flavours/glitch/features/compose/components/options.jsx b/app/javascript/flavours/glitch/features/compose/components/options.jsx index 314b6e638f..5460960364 100644 --- a/app/javascript/flavours/glitch/features/compose/components/options.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/options.jsx @@ -110,7 +110,9 @@ class ToggleOptionImpl extends ImmutablePureComponent { return ( <> - +
+ +
{text} diff --git a/app/javascript/flavours/glitch/features/followers/index.jsx b/app/javascript/flavours/glitch/features/followers/index.jsx index 6226c96f21..2ea3574a90 100644 --- a/app/javascript/flavours/glitch/features/followers/index.jsx +++ b/app/javascript/flavours/glitch/features/followers/index.jsx @@ -45,6 +45,7 @@ const mapStateToProps = (state, { params: { acct, id } }) => { hasMore: !!state.getIn(['user_lists', 'followers', accountId, 'next']), isLoading: state.getIn(['user_lists', 'followers', accountId, 'isLoading'], true), suspended: state.getIn(['accounts', accountId, 'suspended'], false), + hideCollections: state.getIn(['accounts', accountId, 'hide_collections'], false), hidden: getAccountHidden(state, accountId), }; }; @@ -117,7 +118,7 @@ class Followers extends ImmutablePureComponent { }; render () { - const { accountId, accountIds, hasMore, isAccount, multiColumn, isLoading, suspended, hidden, remote, remoteUrl } = this.props; + const { accountId, accountIds, hasMore, isAccount, multiColumn, isLoading, suspended, hidden, remote, remoteUrl, hideCollections } = this.props; if (!isAccount) { return ( @@ -141,6 +142,8 @@ class Followers extends ImmutablePureComponent { emptyMessage = ; } else if (hidden) { emptyMessage = ; + } else if (hideCollections && accountIds.isEmpty()) { + emptyMessage = ; } else if (remote && accountIds.isEmpty()) { emptyMessage = ; } else { diff --git a/app/javascript/flavours/glitch/features/following/index.jsx b/app/javascript/flavours/glitch/features/following/index.jsx index 6993634302..0d18e76ec4 100644 --- a/app/javascript/flavours/glitch/features/following/index.jsx +++ b/app/javascript/flavours/glitch/features/following/index.jsx @@ -45,6 +45,7 @@ const mapStateToProps = (state, { params: { acct, id } }) => { hasMore: !!state.getIn(['user_lists', 'following', accountId, 'next']), isLoading: state.getIn(['user_lists', 'following', accountId, 'isLoading'], true), suspended: state.getIn(['accounts', accountId, 'suspended'], false), + hideCollections: state.getIn(['accounts', accountId, 'hide_collections'], false), hidden: getAccountHidden(state, accountId), }; }; @@ -117,7 +118,7 @@ class Following extends ImmutablePureComponent { }; render () { - const { accountId, accountIds, hasMore, isAccount, multiColumn, isLoading, suspended, hidden, remote, remoteUrl } = this.props; + const { accountId, accountIds, hasMore, isAccount, multiColumn, isLoading, suspended, hidden, remote, remoteUrl, hideCollections } = this.props; if (!isAccount) { return ( @@ -141,6 +142,8 @@ class Following extends ImmutablePureComponent { emptyMessage = ; } else if (hidden) { emptyMessage = ; + } else if (hideCollections && accountIds.isEmpty()) { + emptyMessage = ; } else if (remote && accountIds.isEmpty()) { emptyMessage = ; } else { diff --git a/app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx b/app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx index d16a775ea5..5ca8b59a5e 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx @@ -95,9 +95,7 @@ class AdminReport extends ImmutablePureComponent {
-
- -
+ diff --git a/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx b/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx index 60affd444b..4c815099b1 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx @@ -86,9 +86,7 @@ class NotificationAdminSignup extends ImmutablePureComponent {
-
- -
+
-
- -
+
-
- -
+ - {meta && {meta}}
); } diff --git a/app/javascript/flavours/glitch/features/status/components/card.jsx b/app/javascript/flavours/glitch/features/status/components/card.jsx index 3d5522ab61..c4461f4378 100644 --- a/app/javascript/flavours/glitch/features/status/components/card.jsx +++ b/app/javascript/flavours/glitch/features/status/components/card.jsx @@ -8,12 +8,12 @@ import classNames from 'classnames'; import Immutable from 'immutable'; import ImmutablePropTypes from 'react-immutable-proptypes'; - import DescriptionIcon from '@/material-icons/400-24px/description-fill.svg?react'; import OpenInNewIcon from '@/material-icons/400-24px/open_in_new.svg?react'; import PlayArrowIcon from '@/material-icons/400-24px/play_arrow-fill.svg?react'; import { Blurhash } from 'flavours/glitch/components/blurhash'; import { Icon } from 'flavours/glitch/components/icon'; +import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp'; import { useBlurhash } from 'flavours/glitch/initial_state'; import { decode as decodeIDNA } from 'flavours/glitch/utils/idna'; @@ -51,14 +51,9 @@ export default class Card extends PureComponent { static propTypes = { card: ImmutablePropTypes.map, onOpenMedia: PropTypes.func.isRequired, - compact: PropTypes.bool, sensitive: PropTypes.bool, }; - static defaultProps = { - compact: false, - }; - state = { previewLoaded: false, embedded: false, @@ -69,6 +64,7 @@ export default class Card extends PureComponent { if (!Immutable.is(this.props.card, nextProps.card)) { this.setState({ embedded: false, previewLoaded: false }); } + if (this.props.sensitive !== nextProps.sensitive) { this.setState({ revealed: !nextProps.sensitive }); } @@ -82,35 +78,8 @@ export default class Card extends PureComponent { window.removeEventListener('resize', this.handleResize); } - handlePhotoClick = () => { - const { card, onOpenMedia } = this.props; - - onOpenMedia( - Immutable.fromJS([ - { - type: 'image', - url: card.get('embed_url'), - description: card.get('title'), - meta: { - original: { - width: card.get('width'), - height: card.get('height'), - }, - }, - }, - ]), - 0, - ); - }; - handleEmbedClick = () => { - const { card } = this.props; - - if (card.get('type') === 'photo') { - this.handlePhotoClick(); - } else { - this.setState({ embedded: true }); - } + this.setState({ embedded: true }); }; setRef = c => { @@ -128,21 +97,21 @@ export default class Card extends PureComponent { }; renderVideo () { - const { card } = this.props; - const content = { __html: addAutoPlay(card.get('html')) }; + const { card } = this.props; + const content = { __html: addAutoPlay(card.get('html')) }; return (
); } render () { - const { card, compact } = this.props; + const { card } = this.props; const { embedded, revealed } = this.state; if (card === null) { @@ -150,29 +119,37 @@ export default class Card extends PureComponent { } const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name'); - const horizontal = (!compact && card.get('width') > card.get('height')) || card.get('type') !== 'link' || embedded; - const interactive = card.get('type') !== 'link'; - const className = classNames('status-card', { horizontal, compact, interactive }); - const title = interactive ? {card.get('title')} : {card.get('title')}; + const interactive = card.get('type') === 'video'; const language = card.get('language') || ''; + const largeImage = (card.get('image')?.length > 0 && card.get('width') > card.get('height')) || interactive; const description = ( -
- {title} - {!(horizontal || compact) &&

{card.get('description')}

} - {provider} +
+ + {provider} + {card.get('published_at') && <> · } + + + {card.get('title')} + + {card.get('author_name').length > 0 ? {card.get('author_name')} }} /> : {card.get('description')}}
); const thumbnailStyle = { - visibility: revealed? null : 'hidden', + visibility: revealed ? null : 'hidden', }; - if (horizontal) { - thumbnailStyle.aspectRatio = (compact && !embedded) ? '16 / 9' : `${card.get('width')} / ${card.get('height')}`; + if (largeImage && card.get('type') === 'video') { + thumbnailStyle.aspectRatio = `16 / 9`; + } else if (largeImage) { + thumbnailStyle.aspectRatio = '1.91 / 1'; + } else { + thumbnailStyle.aspectRatio = 1; } - let embed = ''; + let embed; + let canvas = ( {canvas} {thumbnail} {revealed ? ( -
+
- - {horizontal && } + +
) : spoilerButton} @@ -229,9 +200,9 @@ export default class Card extends PureComponent { } return ( -
+
{embed} - {!compact && description} + {description}
); } else if (card.get('image')) { @@ -250,7 +221,7 @@ export default class Card extends PureComponent { } return ( - + {embed} {description} diff --git a/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx index 7f2027eb01..82ccc88475 100644 --- a/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx @@ -5,11 +5,6 @@ import classNames from 'classnames'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { Avatar } from 'flavours/glitch/components/avatar'; -import { DisplayName } from 'flavours/glitch/components/display_name'; -import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp'; -import StatusContent from 'flavours/glitch/components/status_content'; - import { IconButton } from '../../../components/icon_button'; export default class ActionsModal extends ImmutablePureComponent { @@ -58,33 +53,9 @@ export default class ActionsModal extends ImmutablePureComponent { }; render () { - const status = this.props.status && ( -
- - - -
- ); - return (
- {status} - -
    +
      {this.props.actions.map(this.renderAction)}
diff --git a/app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx index f44fd5ebf4..c16ed71cb8 100644 --- a/app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx @@ -9,7 +9,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; - import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react'; import { changeBoostPrivacy } from 'flavours/glitch/actions/boosts'; import AttachmentList from 'flavours/glitch/components/attachment_list'; @@ -78,12 +77,11 @@ class BoostModal extends ImmutablePureComponent {
-
-
- - - -
+
+ + + +
diff --git a/app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx index 388bc5762c..138f44f21c 100644 --- a/app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx @@ -8,7 +8,6 @@ import { withRouter } from 'react-router-dom'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; - import StarIcon from '@/material-icons/400-24px/star-fill.svg?react'; import AttachmentList from 'flavours/glitch/components/attachment_list'; import { Avatar } from 'flavours/glitch/components/avatar'; @@ -54,13 +53,11 @@ class FavouriteModal extends ImmutablePureComponent {
-
- + diff --git a/app/javascript/flavours/glitch/locales/en.json b/app/javascript/flavours/glitch/locales/en.json index 64d432b064..8ea84f27a7 100644 --- a/app/javascript/flavours/glitch/locales/en.json +++ b/app/javascript/flavours/glitch/locales/en.json @@ -52,7 +52,6 @@ "keyboard_shortcuts.bookmark": "to bookmark", "keyboard_shortcuts.secondary_toot": "to send toot using secondary privacy setting", "keyboard_shortcuts.toggle_collapse": "to collapse/uncollapse toots", - "media_gallery.sensitive": "Sensitive", "moved_to_warning": "This account is marked as moved to {moved_to_link}, and may thus not accept new follows.", "navigation_bar.app_settings": "App settings", "navigation_bar.featured_users": "Featured users", @@ -157,7 +156,6 @@ "status.is_poll": "This toot is a poll", "status.local_only": "Only visible from your instance", "status.react": "React", - "status.sensitive_toggle": "Click to view", "status.uncollapse": "Uncollapse", "suggestions.dismiss": "Dismiss suggestion" } diff --git a/app/javascript/flavours/glitch/models/account.ts b/app/javascript/flavours/glitch/models/account.ts index 8500009e0f..0b698ead3d 100644 --- a/app/javascript/flavours/glitch/models/account.ts +++ b/app/javascript/flavours/glitch/models/account.ts @@ -94,6 +94,7 @@ export const accountDefaultValues: AccountShape = { memorial: false, limited: false, moved: null, + hide_collections: false, }; const AccountFactory = ImmutableRecord(accountDefaultValues); diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 75bc901958..64f606ac21 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -374,7 +374,7 @@ body > [data-popper-placement] { } .compose-form { - padding: 10px; + padding: 10px; // glitch: reduced padding &__sensitive-button { padding: 10px; @@ -412,7 +412,7 @@ body > [data-popper-placement] { .compose-form__warning { color: $inverted-text-color; - margin-bottom: 15px; + margin-bottom: 10px; background: $ui-primary-color; box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3); padding: 8px 10px; @@ -602,7 +602,7 @@ body > [data-popper-placement] { height: 16px; } - .autosuggest-account .display-name > span { + .autosuggest-account .display-name__account { color: $lighter-text-color; } @@ -698,6 +698,22 @@ body > [data-popper-placement] { .icon-button { height: 100%; } + + .compose-form__upload-button-icon { + line-height: 27px; + } + + .compose-form__sensitive-button { + display: none; + + &.compose-form__sensitive-button--visible { + display: block; + } + + .compose-form__sensitive-button__icon { + line-height: 27px; + } + } } .icon-button, @@ -821,11 +837,6 @@ body > [data-popper-placement] { line-height: 24px; overflow: hidden; text-decoration: none; - - & > .display-name { - line-height: unset; - height: unset; - } } .reply-indicator__display-avatar { @@ -1021,18 +1032,11 @@ body > [data-popper-placement] { } .status { - padding: 10px 14px; - position: relative; - height: auto; + padding: 10px 14px; // glitch: reduced padding + min-height: 54px; border-bottom: 1px solid lighten($ui-base-color, 8%); cursor: auto; - @supports (-ms-overflow-style: -ms-autohiding-scrollbar) { - // Add margin to avoid Edge auto-hiding scrollbar appearing over content. - // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px. - padding-inline-end: 28px; // 12px + 16px - } - @keyframes fade { 0% { opacity: 0; @@ -1046,9 +1050,11 @@ body > [data-popper-placement] { opacity: 1; animation: fade 150ms linear; + .media-gallery, .video-player, - .audio-player { - margin-top: 8px; + .audio-player, + .attachment-list { + margin-top: 8px; // glitch: reduced margins } &.status-direct { @@ -1057,8 +1063,9 @@ body > [data-popper-placement] { } &.light { - .status__relative-time { - color: $lighter-text-color; + .status__relative-time, + .status__visibility-icon { + color: $light-text-color; } .status__display-name { @@ -1080,21 +1087,74 @@ body > [data-popper-placement] { color: $highlight-text-color; } - a.status__content__spoiler-link { + &__spoiler-link { color: $primary-text-color; background: $ui-primary-color; - &:hover { + &:hover, + &:focus { background: lighten($ui-primary-color, 8%); } } } } + &--in-thread { + $thread-margin: 46px + 10px; + + border-bottom: 0; + + .status__content, + .status__action-bar, + .reactions-bar { + margin-inline-start: $thread-margin; + width: calc(100% - ($thread-margin)); + } + } + + &--first-in-thread { + border-top: 1px solid lighten($ui-base-color, 8%); + } + + &__line { + height: 10px - 4px; + border-inline-start: 2px solid lighten($ui-base-color, 8%); + width: 0; + position: absolute; + top: 0; + inset-inline-start: 14px + ((46px - 2px) * 0.5); + + &--full { + top: 0; + height: 100%; + + &::before { + content: ''; + display: block; + position: absolute; + top: 10px - 4px; + height: 46px + 4px + 4px; + width: 2px; + background: $ui-base-color; + inset-inline-start: -2px; + } + } + + &--first { + top: 10px + 46px + 4px; + height: calc(100% - (10px + 46px + 4px)); + + &::before { + display: none; + } + } + } + &.collapsed { background-position: center; background-size: cover; user-select: none; + min-height: 0; &.has-background::before { display: block; @@ -1155,18 +1215,23 @@ body > [data-popper-placement] { rgba(mix($ui-base-color, $ui-highlight-color, 95%), 1) ); } - - .notification__message { - margin-bottom: 0; - } - - .status__info .notification__message > span { - white-space: nowrap; - } } +} +.status__wrapper.collapsed { .notification__message { - margin: -10px 0 10px; + margin-bottom: 0; + white-space: nowrap; + } +} + +.notification__message-collapse-button { + text-align: end; + flex-grow: 2; + + .status__collapse-button .icon { + width: 24px; + height: 24px; } .reactions-bar--empty { @@ -1175,15 +1240,235 @@ body > [data-popper-placement] { } .status__relative-time { - display: inline-block; - color: $dark-text-color; + display: block; font-size: 14px; + color: $dark-text-color; text-align: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.notification__relative_time { + color: $dark-text-color; + float: right; + font-size: 14px; + padding-bottom: 1px; +} + +.status__display-name { + color: $dark-text-color; +} + +.status__info .status__display-name { + max-width: 100%; + display: flex; + font-size: 15px; + line-height: 22px; + align-items: center; + gap: 10px; + overflow: hidden; + + .display-name { + bdi { + overflow: hidden; + text-overflow: ellipsis; + } + + &__account { + white-space: nowrap; + display: block; + overflow: hidden; + text-overflow: ellipsis; + } + } +} + +.status__info { + font-size: 15px; + padding-bottom: 10px; + display: flex; + justify-content: space-between; + gap: 10px; + cursor: pointer; +} + +.status__info__icons { + display: flex; + align-items: center; + height: 1em; + color: $action-button-color; + gap: 4px; + + & > .icon { + width: 16px; + height: 16px; + } +} + +.status__collapse-button { + // compensate for large padding built into the icon + margin: -4px; +} + +.status__collapse-button.active > .icon { + transform: rotate(-180deg); +} + +.no-reduce-motion .status__collapse-button { + &.activate { + & > .icon { + animation: spring-flip-in 1s linear; + } + } + + &.deactivate { + & > .icon { + animation: spring-flip-out 1s linear; + } + } +} + +.status-check-box__status { + display: block; + box-sizing: border-box; + width: 100%; + padding: 0 10px; + + .detailed-status__display-name { + color: lighten($inverted-text-color, 16%); + + span { + display: inline; + } + + &:hover strong { + text-decoration: none; + } + } + + .media-gallery, + .audio-player, + .video-player { + margin-top: 15px; + max-width: 250px; + } + + .status__content { + padding: 0; + white-space: normal; + } + + .media-gallery__item-thumbnail { + cursor: default; + } +} + +.status__prepend { + padding: 8px 14px; // glitch: reduced padding + padding-bottom: 0; + display: inline-flex; + gap: 10px; + font-size: 14px; + line-height: 22px; + font-weight: 500; + color: $dark-text-color; + + .status__display-name strong { + color: $dark-text-color; + } + + > span { + display: block; + overflow: hidden; + text-overflow: ellipsis; + } +} + +.status__action-bar { + display: flex; + align-items: center; + gap: 18px; + margin-top: 8px; + + &-spacer { + flex-grow: 1; + } + + & > .emoji-picker-dropdown > .emoji-button { + padding: 0; + } +} + +.detailed-status__action-bar-dropdown { + flex: 1 1 auto; + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.detailed-status { + background: lighten($ui-base-color, 4%); + padding: 14px 10px; // glitch: reduced padding + border-top: 1px solid lighten($ui-base-color, 8%); + + &--flex { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: flex-start; + + .status__content, + .detailed-status__meta { + flex: 100%; + } + } + + .status__content { + font-size: 19px; + line-height: 24px; + + .emojione { + width: 24px; + height: 24px; + margin: -1px 0 0; + } + } + + .media-gallery, + .video-player, + .audio-player { + margin-top: 8px; + } +} + +.scrollable > div:first-child .detailed-status { + border-top: 0; +} + +.detailed-status__meta { + margin-top: 16px; + color: $dark-text-color; + font-size: 14px; + line-height: 18px; + + .icon { + width: 15px; + height: 15px; + vertical-align: middle; + } +} + +.detailed-status__action-bar { + background: lighten($ui-base-color, 4%); + border-top: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid lighten($ui-base-color, 8%); + display: flex; + flex-direction: row; + padding: 8px 0; // glitch: reduced padding +} + .compose-form__textarea-icons { display: block; position: absolute; @@ -1206,11 +1491,6 @@ body > [data-popper-placement] { } } -.notification__favourite-icon-wrapper { - inset-inline-start: 0; - position: absolute; -} - .detailed-status__link { display: inline-flex; align-items: center; @@ -1257,10 +1537,8 @@ body > [data-popper-placement] { } .account { - padding: 10px; + padding: 10px; // glitch: reduced padding border-bottom: 1px solid lighten($ui-base-color, 8%); - color: inherit; - text-decoration: none; .account__display-name { flex: 1 1 auto; @@ -1334,10 +1612,6 @@ body > [data-popper-placement] { align-items: center; } -.account__avatar-wrapper { - float: left; -} - .account__avatar { @include avatar-radius; @@ -1450,10 +1724,10 @@ a .account__avatar { } } -a.status__display-name, +.status__display-name, .reply-indicator__display-name, .detailed-status__display-name, -.account__display-name { +a.account__display-name { &:hover .display-name strong { text-decoration: underline; } @@ -1471,10 +1745,13 @@ a.status__display-name, } .detailed-status__display-name { - color: $secondary-text-color; - display: block; - line-height: 24px; - margin-bottom: 15px; + color: $darker-text-color; + display: flex; + align-items: center; + gap: 10px; + font-size: 15px; + line-height: 22px; + margin-bottom: 16px; overflow: hidden; strong, @@ -1485,25 +1762,13 @@ a.status__display-name, } strong { - font-size: 16px; color: $primary-text-color; } } -.detailed-status__display-avatar { - float: left; - margin-inline-end: 10px; -} - -.status__relative-time, -.detailed-status__datetime { - &:hover { - text-decoration: underline; - } -} - .status__avatar { - margin-inline-end: 10px; + width: 46px; + height: 46px; } .muted { @@ -1535,41 +1800,53 @@ a.status__display-name, } .notification__report { - padding: 8px 10px; - padding-inline-start: 68px; - position: relative; + padding: 10px; // glitch: reduced padding border-bottom: 1px solid lighten($ui-base-color, 8%); - min-height: 54px; + display: flex; + gap: 10px; &__avatar { - position: absolute; - inset-inline-start: 10px; - top: 10px; + flex: 0 0 auto; } &__details { + flex: 1 1 auto; display: flex; justify-content: space-between; align-items: center; color: $darker-text-color; + gap: 10px; font-size: 15px; line-height: 22px; + white-space: nowrap; + overflow: hidden; + + & > div { + overflow: hidden; + text-overflow: ellipsis; + } strong { font-weight: 500; } } + + &__actions { + flex: 0 0 auto; + } } .notification__message { - margin-inline-start: 42px; - padding-top: 8px; - padding-inline-start: 26px; + padding: 8px 14px; // glitch: reduced padding + padding-bottom: 0; cursor: default; color: $darker-text-color; font-size: 15px; - position: relative; + line-height: 22px; + font-weight: 500; + display: flex; align-items: center; + gap: 10px; .icon { color: $highlight-text-color; @@ -1582,7 +1859,7 @@ a.status__display-name, } > span { - display: block; + display: inline; overflow: hidden; text-overflow: ellipsis; } @@ -1618,7 +1895,6 @@ a.status__display-name, text-decoration: none; &:hover { - color: $primary-text-color; text-decoration: underline; } } @@ -1634,53 +1910,17 @@ a.status__display-name, text-overflow: ellipsis; overflow: hidden; } - - a { - color: inherit; - text-decoration: inherit; - } - - strong { - display: block; - } - - > a:hover { - strong { - text-decoration: underline; - } - } - - &.inline { - padding: 0; - height: 18px; - font-size: 15px; - line-height: 18px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - - strong { - display: inline; - height: auto; - font-size: inherit; - line-height: inherit; - } - - span { - display: inline; - height: auto; - font-size: inherit; - line-height: inherit; - } - } } .display-name__html { font-weight: 500; } -.display-name__account { - font-size: 14px; +.status__relative-time, +.detailed-status__datetime { + &:hover { + text-decoration: underline; + } } .image-loader { @@ -1744,7 +1984,7 @@ a.status__display-name, } .navigation-bar { - padding: 10px; + padding: 10px; // glitch: reduced padding display: flex; align-items: center; flex-shrink: 0; @@ -1781,6 +2021,7 @@ a.status__display-name, display: flex; flex-direction: column; flex: 1 1 auto; + line-height: 20px; } .navigation-bar__profile-account { @@ -1825,14 +2066,14 @@ a.status__display-name, .dropdown-menu__separator { border-bottom: 1px solid var(--dropdown-border-color); - margin: 2px 0; + margin: 2px 0; // glitch: reduced margins height: 0; } .dropdown-menu { background: var(--dropdown-background-color); border: 1px solid var(--dropdown-border-color); - padding: 2px; + padding: 2px; // glitch: reduced padding border-radius: 4px; box-shadow: var(--dropdown-shadow); z-index: 9999; @@ -1862,8 +2103,8 @@ a.status__display-name, &__container { &__header { border-bottom: 1px solid var(--dropdown-border-color); - padding: 6px 14px; - padding-bottom: 12px; + padding: 6px 14px; // glitch: reduced padding + padding-bottom: 12px; // glitch: reduced padding margin-bottom: 4px; font-size: 13px; line-height: 18px; @@ -1919,7 +2160,7 @@ a.status__display-name, font: inherit; display: block; width: 100%; - padding: 6px 14px; + padding: 6px 14px; // glitch: reduced padding border: 0; margin: 0; background: transparent; @@ -2174,6 +2415,7 @@ $ui-header-height: 55px; .columns-area--mobile { flex-direction: column; width: 100%; + height: 100%; margin: 0 auto; .column, @@ -2699,6 +2941,8 @@ $ui-header-height: 55px; display: flex; flex-direction: column; min-height: 310px; + padding-bottom: 71px; + margin-bottom: -71px; } .compose-form__autosuggest-wrapper { @@ -3282,15 +3526,16 @@ input.glitch-setting-text { } .status-card { - position: relative; display: flex; + align-items: center; + position: relative; font-size: 14px; - border: 1px solid lighten($ui-base-color, 8%); - border-radius: 4px; - color: $dark-text-color; + color: $darker-text-color; margin-top: 14px; text-decoration: none; overflow: hidden; + border: 1px solid lighten($ui-base-color, 8%); + border-radius: 8px; &__actions { bottom: 0; @@ -3301,11 +3546,13 @@ input.glitch-setting-text { display: flex; justify-content: center; align-items: center; + cursor: pointer; & > div { background: rgba($base-shadow-color, 0.6); border-radius: 8px; padding: 12px 9px; + backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%); flex: 0 0 auto; display: flex; justify-content: center; @@ -3335,19 +3582,37 @@ input.glitch-setting-text { position: relative; bottom: -1px; } - - a .fa, - a:hover .fa { - color: inherit; - } } } a.status-card { cursor: pointer; - &:hover { - background: lighten($ui-base-color, 8%); + &:hover, + &:focus, + &:active { + .status-card__title, + .status-card__host, + .status-card__author, + .status-card__description { + color: $highlight-text-color; + } + } +} + +.status-card a { + color: inherit; + text-decoration: none; + + &:hover, + &:focus, + &:active { + .status-card__title, + .status-card__host, + .status-card__author, + .status-card__description { + color: $highlight-text-color; + } } } @@ -3373,41 +3638,66 @@ a.status-card { .status-card__title { display: block; - font-weight: 500; - margin-bottom: 5px; - color: $darker-text-color; + font-weight: 700; + font-size: 19px; + line-height: 24px; + color: $primary-text-color; overflow: hidden; - text-overflow: ellipsis; white-space: nowrap; - text-decoration: none; + text-overflow: ellipsis; +} + +.status-card.expanded .status-card__title { + white-space: normal; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; } .status-card__content { flex: 1 1 auto; overflow: hidden; - padding: 14px; - padding-inline-start: 8px; -} - -.status-card__description { - color: $darker-text-color; - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; + padding: 8px 10px; // glitch: reduced padding + box-sizing: border-box; + max-width: 100%; } .status-card__host { display: block; - margin-top: 5px; - font-size: 13px; + font-size: 14px; + margin-bottom: 8px; + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; +} + +.status-card__author { + display: block; + margin-top: 8px; + font-size: 14px; + color: $primary-text-color; white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + strong { + font-weight: 500; + } +} + +.status-card__description { + display: block; + margin-top: 8px; + font-size: 14px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .status-card__image { - flex: 0 0 100px; + flex: 0 0 auto; + width: 96px; // glitch: intentional change to better use space + aspect-ratio: 1; background: lighten($ui-base-color, 8%); position: relative; @@ -3422,50 +3712,7 @@ a.status-card { } } -.status-card.horizontal { - display: block; - - .status-card__image { - width: 100%; - } - - .status-card__image-image, - .status-card__image-preview { - border-radius: 4px 4px 0 0; - } - - .status-card__title { - white-space: inherit; - } -} - -.status-card.compact { - border-color: lighten($ui-base-color, 4%); - - &.interactive { - border: 0; - } - - .status-card__content { - padding: 8px; - padding-top: 10px; - } - - .status-card__title { - white-space: nowrap; - } - - .status-card__image { - flex: 0 0 60px; - } -} - -a.status-card.compact:hover { - background-color: lighten($ui-base-color, 4%); -} - .status-card__image-image { - border-radius: 4px 0 0 4px; display: block; margin: 0; width: 100%; @@ -3476,7 +3723,6 @@ a.status-card.compact:hover { } .status-card__image-preview { - border-radius: 4px 0 0 4px; display: block; margin: 0; width: 100%; @@ -3493,58 +3739,35 @@ a.status-card.compact:hover { } } -.notification, -.status { - position: relative; +.status-card.expanded { + flex-direction: column; + align-items: flex-start; +} - &--in-thread { - border-bottom: 0; +.status-card.expanded .status-card__image { + width: 100%; + aspect-ratio: auto; +} - .status__content, - .status__action-bar, - .reactions-bar { - margin-inline-start: 46px + 10px; - width: calc(100% - (46px + 10px)); - } - } +.status-card__image, +.status-card__image-image, +.status-card__image-preview { + border-start-start-radius: 8px; + border-start-end-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: 8px; +} - &--first-in-thread { - border-top: 1px solid lighten($ui-base-color, 8%); - } +.status-card.expanded .status-card__image, +.status-card.expanded .status-card__image-image, +.status-card.expanded .status-card__image-preview { + border-start-end-radius: 8px; + border-end-end-radius: 0; + border-end-start-radius: 0; +} - &__line { - height: 10px - 4px; - border-inline-start: 2px solid lighten($ui-base-color, 8%); - width: 0; - position: absolute; - top: 0; - inset-inline-start: 14px + ((46px - 2px) * 0.5); - - &--full { - top: 0; - height: 100%; - - &::before { - content: ''; - display: block; - position: absolute; - top: 10px - 4px; - height: 46px + 4px + 4px; - width: 2px; - background: $ui-base-color; - inset-inline-start: -2px; - } - } - - &--first { - top: 10px + 46px + 4px; - height: calc(100% - (10px + 46px + 4px)); - - &::before { - display: none; - } - } - } +.status-card.expanded > a { + width: 100%; } .load-more { @@ -3693,6 +3916,7 @@ a.status-card.compact:hover { margin: 0; border: 0; padding: 13px; + padding-inline-end: 0; color: inherit; background: transparent; font: inherit; @@ -3727,7 +3951,6 @@ a.status-card.compact:hover { .column-header__buttons { height: 48px; display: flex; - margin-inline-start: 0; } .column-header__links { @@ -4147,19 +4370,18 @@ a.status-card.compact:hover { background: $base-overlay-background; color: $darker-text-color; border: 0; + padding: 0; width: 100%; height: 100%; + border-radius: 4px; + appearance: none; &:hover, &:active, &:focus { + padding: 0; color: lighten($darker-text-color, 8%); } - - .status__content > & { - margin-top: 15px; // Add margin when used bare for NSFW video player - } - @include fullwidth-gallery; } .media-spoiler__warning { @@ -4170,7 +4392,7 @@ a.status-card.compact:hover { .media-spoiler__trigger { display: block; font-size: 11px; - font-weight: 500; + font-weight: 700; } .spoiler-button { @@ -4182,12 +4404,12 @@ a.status-card.compact:hover { z-index: 100; &--minified { - display: flex; + display: flex; // glitch: media icon in spoiler button inset-inline-start: 4px; top: 4px; width: auto; height: auto; - align-items: center; + align-items: center; // glitch: media icon in spoiler button } &--click-thru { @@ -4410,8 +4632,7 @@ a.status-card.compact:hover { line-height: 24px; } -.setting-toggle__label, -.setting-meta__label { +.setting-toggle__label { color: $darker-text-color; display: inline-block; margin-bottom: 14px; @@ -4419,10 +4640,6 @@ a.status-card.compact:hover { vertical-align: middle; } -.setting-meta__label { - float: right; -} - .limited-account-hint { p { color: $secondary-text-color; @@ -4838,14 +5055,16 @@ a.status-card.compact:hover { flex: 1 1 auto; color: $lighter-text-color; - &:not(:first-child) { - margin-inline-start: 10px; - } - strong { font-weight: 500; display: block; color: $inverted-text-color; + + @each $lang in $cjk-langs { + &:lang(#{$lang}) { + font-weight: 700; + } + } } } @@ -4873,11 +5092,6 @@ a.status-card.compact:hover { min-width: 75%; } -.account__header__wrapper { - flex: 0 0 auto; - background: lighten($ui-base-color, 4%); -} - .account__disclaimer { display: flex; padding: 10px; @@ -4887,12 +5101,6 @@ a.status-card.compact:hover { strong { font-weight: 500; - - @each $lang in $cjk-langs { - &:lang(#{$lang}) { - font-weight: 700; - } - } } a { @@ -4965,43 +5173,6 @@ a.status-card.compact:hover { } } -.account__moved-note { - padding: 14px 10px; - padding-bottom: 16px; - background: lighten($ui-base-color, 4%); - border-top: 1px solid lighten($ui-base-color, 8%); - border-bottom: 1px solid lighten($ui-base-color, 8%); - - &__message { - position: relative; - margin-inline-start: 58px; - color: $dark-text-color; - padding: 8px 0; - padding-top: 0; - padding-bottom: 4px; - font-size: 14px; - - > span { - display: block; - overflow: hidden; - text-overflow: ellipsis; - } - } - - &__icon-wrapper { - inset-inline-start: -26px; - position: absolute; - } - - .detailed-status__display-avatar { - position: relative; - } - - .detailed-status__display-name { - margin-bottom: 0; - } -} - @keyframes spring-flip-in { 0% { transform: rotate(0deg); @@ -5048,7 +5219,6 @@ a.status-card.compact:hover { .status__content { position: relative; - margin: 10px 0; font-size: 15px; line-height: 20px; word-wrap: break-word; @@ -5132,11 +5302,6 @@ a.status-card.compact:hover { } } -.status__prepend-icon-wrapper { - inset-inline-start: -26px; - position: absolute; -} - .notification-follow, .notification-follow-request { position: relative; @@ -5149,230 +5314,6 @@ a.status-card.compact:hover { } } -.notification-favourite { - .status.status-direct { - background: transparent; - - .icon-button.disabled { - color: lighten($action-button-color, 13%); - } - } -} - -.status__display-name { - color: $dark-text-color; - overflow: hidden; -} - -.status__info__account .status__display-name { - display: block; - max-width: 100%; -} - -.status__info { - display: flex; - justify-content: space-between; - font-size: 15px; - - > span { - text-overflow: ellipsis; - overflow: hidden; - } - - .notification__message > span { - word-wrap: break-word; - } -} - -.status__info__icons { - display: flex; - align-items: center; - height: 1em; - color: $action-button-color; - - .status__media-icon, - .status__visibility-icon, - .status__reply-icon, - .text-icon { - padding-inline-start: 2px; - padding-inline-end: 2px; - } - - & > .icon { - width: 16px; - height: 16px; - } - - .status__collapse-button.active > .icon { - transform: rotate(-180deg); - } -} - -.no-reduce-motion .status__collapse-button { - &.activate { - & > .icon { - animation: spring-flip-in 1s linear; - } - } - - &.deactivate { - & > .icon { - animation: spring-flip-out 1s linear; - } - } -} - -.status__info__account { - display: flex; - align-items: center; - justify-content: flex-start; -} - -.status-check-box__status { - display: block; - box-sizing: border-box; - width: 100%; - padding: 0 10px; - - .detailed-status__display-name { - color: lighten($inverted-text-color, 16%); - - span { - display: inline; - } - - &:hover strong { - text-decoration: none; - } - } - - .media-gallery, - .audio-player, - .video-player { - margin-top: 15px; - max-width: 250px; - } - - .status__content { - padding: 0; - white-space: normal; - } - - .media-gallery__item-thumbnail { - cursor: default; - } -} - -.status__prepend { - margin-top: -2px; - margin-bottom: 8px; - margin-inline-start: 58px; - color: $dark-text-color; - font-size: 14px; - position: relative; - - .status__display-name strong { - color: $dark-text-color; - } - - > span { - display: block; - overflow: hidden; - text-overflow: ellipsis; - } -} - -.status__action-bar { - align-items: center; - display: flex; - margin-top: 8px; - - & > .emoji-picker-dropdown > .emoji-button { - padding: 0; - } -} - -.status__action-bar-button { - margin-inline-end: 18px; - - &.icon-button--with-counter { - margin-inline-end: 14px; - } -} - -.status__action-bar-dropdown { - height: 23.15px; - width: 23.15px; -} - -.status__action-bar-spacer { - flex-grow: 1; -} - -.detailed-status__action-bar-dropdown { - flex: 1 1 auto; - display: flex; - align-items: center; - justify-content: center; - position: relative; -} - -.detailed-status { - background: lighten($ui-base-color, 4%); - padding: 14px 10px; - border-top: 1px solid lighten($ui-base-color, 8%); - - &--flex { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: flex-start; - - .status__content, - .detailed-status__meta { - flex: 100%; - } - } - - .status__content { - font-size: 19px; - line-height: 24px; - - .emojione { - width: 24px; - height: 24px; - margin: -1px 0 0; - } - } - - .video-player, - .audio-player { - margin-top: 8px; - } -} - -.detailed-status__meta { - margin-top: 15px; - color: $dark-text-color; - font-size: 14px; - line-height: 18px; - - .icon { - width: 15px; - height: 15px; - vertical-align: middle; - } -} - -.detailed-status__action-bar { - background: lighten($ui-base-color, 4%); - border-top: 1px solid lighten($ui-base-color, 8%); - border-bottom: 1px solid lighten($ui-base-color, 8%); - display: flex; - flex-direction: row; - padding: 8px 0; -} - .language-dropdown { &__dropdown { background: $simple-background-color; @@ -5742,9 +5683,9 @@ a.status-card.compact:hover { display: flex; } -.video-modal__container { +.video-modal .video-player { + max-height: 80vh; max-width: 100vw; - max-height: 100vh; } .audio-modal__container { @@ -6089,27 +6030,7 @@ a.status-card.compact:hover { flex-direction: column; .status__relative-time { - color: $dark-text-color; - float: right; - font-size: 14px; - width: auto; - margin: initial; - padding: initial; - } - - .status__visibility-icon { - color: $dark-text-color; - font-size: 14px; - padding: 0 4px; - } - - .status__display-name { - display: flex; - } - - .status__avatar { - height: 48px; - width: 48px; + order: 2; } .status__content__spoiler-link { @@ -6140,8 +6061,7 @@ a.status-card.compact:hover { justify-content: space-between; align-items: center; background: $ui-secondary-color; - padding: 10px; - line-height: 36px; + padding: 10px; // purposefully reduce padding in glitch-soc & > div { flex: 1 1 auto; @@ -6159,15 +6079,6 @@ a.status-card.compact:hover { } } -.boost-modal__status-header { - font-size: 15px; -} - -.boost-modal__status-time { - float: right; - font-size: 14px; -} - .mute-modal, .block-modal { line-height: 24px; @@ -6719,6 +6630,7 @@ a.status-card.compact:hover { z-index: 9999; } +// glitch: deprecated settings modal img.modal-warning { display: block; margin: auto; @@ -6726,65 +6638,19 @@ img.modal-warning { width: 60px; } -.column { - overflow: hidden; - - .wide .columns-area:not(.columns-area--mobile) & { +// glitch: optional wide mode +.wide .columns-area:not(.columns-area--mobile) { + .column { flex: auto; min-width: 330px; max-width: 400px; } - > .scrollable { - background: $ui-base-color; - border-radius: 0 0 4px 4px; - } -} - -.drawer { - padding: 10px 5px; - flex: none; - - &:first-child { - padding-inline-start: 10px; - } - - &:last-child { - padding-inline-end: 10px; - } - - @media screen and (width <= 630px) { - flex: auto; - } - - @media screen and (width <= 630px) { - &, - &:first-child, - &:last-child { - padding: 0; - } - } - - .wide & { + .drawer { min-width: 300px; max-width: 400px; flex: 1 1 200px; } - - @media screen and (width <= 630px) { - :root & { - // Overrides `.wide` for single-column view - flex: auto; - width: 100%; - min-width: 0; - max-width: none; - padding: 0; - } - } - - .react-swipeable-view-container & { - height: 100%; - } } .media-gallery__item__badges { @@ -6822,7 +6688,7 @@ img.modal-warning { font-size: 14px; border: 1px solid lighten($ui-base-color, 8%); border-radius: 4px; - margin-top: 14px; // glitch-soc change to reduce margins + margin-top: 14px; // glitch: reduced margins overflow: hidden; &__icon { @@ -6864,7 +6730,7 @@ img.modal-warning { &.compact { border: 0; - margin-top: 4px; // glitch-soc addition to reduce margins + margin-top: 4px; // glitch: reduced margins .attachment-list__list { padding: 0; @@ -6961,8 +6827,6 @@ img.modal-warning { overflow: hidden; position: relative; width: 100%; - display: flex; - justify-content: center; } .media-gallery__item-gifv-thumbnail { @@ -7600,21 +7464,87 @@ noscript { } } -// glitch-specific “sensitive” label on displayed images; TODO: remove it? -.sensitive-marker { - margin: 0 3px; - border-radius: 2px; - padding: 2px 6px; - color: rgba($primary-text-color, 0.8); - background: rgba($base-overlay-background, 0.5); - font-size: 12px; - line-height: 18px; - text-transform: uppercase; - opacity: 0.9; - transition: opacity 0.1s ease; +@media screen and (width <= 630px) and (height <= 400px) { + $duration: 400ms; + $delay: 100ms; - .media-gallery:hover & { - opacity: 1; + .search { + will-change: margin-top; + transition: margin-top $duration $delay; + } + + .navigation-bar { + will-change: padding-bottom; + transition: padding-bottom $duration $delay; + } + + .navigation-bar { + & > a:first-child { + will-change: margin-top, margin-inline-start, margin-inline-end, width; + transition: + margin-top $duration $delay, + margin-inline-start $duration ($duration + $delay), + margin-inline-end $duration ($duration + $delay); + } + + & > .navigation-bar__profile-edit { + will-change: margin-top; + transition: margin-top $duration $delay; + } + + .navigation-bar__actions { + & > .icon-button.close { + will-change: opacity transform; + transition: + opacity $duration * 0.5 $delay, + transform $duration $delay; + } + + & > .compose__action-bar .icon-button { + will-change: opacity transform; + transition: + opacity $duration * 0.5 $delay + $duration * 0.5, + transform $duration $delay; + } + } + } + + .is-composing { + .search { + margin-top: -50px; + } + + .navigation-bar { + padding-bottom: 0; + + & > a:first-child { + margin: -100px 10px 0 -50px; + } + + .navigation-bar__profile { + padding-top: 2px; + } + + .navigation-bar__profile-edit { + position: absolute; + margin-top: -60px; + } + + .navigation-bar__actions { + .icon-button.close { + pointer-events: auto; + opacity: 1; + transform: scale(1, 1) translate(0, 0); + bottom: 5px; + } + + .compose__action-bar .icon-button { + pointer-events: none; + opacity: 0; + transform: scale(0, 1) translate(100%, 0); + } + } + } } } @@ -8409,7 +8339,6 @@ noscript { &--compact &__item { padding: 10px; - padding-inline-end: 28px; } } @@ -8474,11 +8403,6 @@ noscript { color: $primary-text-color; text-decoration: none; - .icon { - width: 15px; - height: 15px; - } - &:hover, &:focus, &:active { @@ -8701,7 +8625,7 @@ noscript { } .notification, -.status { +.status__wrapper { position: relative; &.unread { diff --git a/streaming/index.js b/streaming/index.js index 0d7bf2fc81..b9bdb44f24 100644 --- a/streaming/index.js +++ b/streaming/index.js @@ -767,7 +767,7 @@ const startServer = async () => { // Only send local-only statuses to logged-in users if ((event === 'update' || event === 'status.update') && payload.local_only && !(req.accountId && allowLocalOnly)) { - log.silly(req.requestId, `Message ${payload.id} filtered because it was local-only`); + log.debug(`Message ${payload.id} filtered because it was local-only`); return; }