Further reduce CSS and markup differences with upstream (#2635)

* Further reduce CSS differences with upstream * Reduce differences in markup and CSS with upstream * Redo collapsible post notifications * Reduce CSS differences further * Reduce differences with upstream regarding `.status` and `.status__wrapper` * Further reduce differences with upstream * Reduce differences with upstream in DisplayName
glitch-soc · Feb 20, 2024 · 5f50b63 · 5f50b63
1 parent 0a2b95c
commit 5f50b63
Show file tree

Hide file tree

Showing 14 changed files with 390 additions and 360 deletions.
diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx
@@ -147,7 +147,7 @@ class Account extends ImmutablePureComponent {
             </div>
 
             <div className='account__contents'>
-              <DisplayName account={account} inline />
+              <DisplayName account={account} />
               {!minimal && (
                 <div className='account__details'>
                   {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
@@ -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 (
+    <IconButton
+      className='status__collapse-button'
+      animate
+      active={collapsed}
+      title={
+        collapsed ?
+          intl.formatMessage(messages.uncollapse) :
+          intl.formatMessage(messages.collapse)
+      }
+      icon='angle-double-up'
+      iconComponent={ExpandLessIcon}
+      onClick={handleCollapsedClick}
+    />
+  );
+};
+
+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
@@ -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<Account>;
   localDomain?: string;
-  inline?: boolean;
 }
 
 export class DisplayName extends React.PureComponent<Props> {
@@ -51,7 +48,7 @@ export class DisplayName extends React.PureComponent<Props> {
   };
 
   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<Props> {
 
     return (
       <span
-        className={classNames('display-name', { inline })}
+        className='display-name'
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
       >
-        {displayName}
-        {inline ? ' ' : null}
-        {suffix}
+        {displayName} {suffix}
       </span>
     );
   }

diff --git 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 } 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';
@@ -510,7 +511,6 @@ class Status extends ImmutablePureComponent {
 
   render () {
     const {
-      handleRef,
       parseClick,
       setCollapsed,
     } = this;
@@ -763,93 +763,91 @@ class Status extends ImmutablePureComponent {
           account={account}
           parseClick={parseClick}
           notificationId={this.props.notificationId}
-        />
+        >
+          {muted && settings.getIn(['collapsed', 'enabled']) && (
+            <div className='notification__message-collapse-button'>
+              <CollapseButton collapsed={isCollapsed} setCollapsed={setCollapsed} />
+            </div>
+          )}
+        </StatusPrepend>
       );
     }
 
     if (this.props.prepend === 'reblog') {
       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 (
       <HotKeys handlers={handlers}>
         <div
-          className={computedClass}
-          style={isCollapsed && background ? { backgroundImage: `url(${background})` } : null}
+          className={classNames('status__wrapper', 'focusable', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), unread, collapsed: isCollapsed })}
           {...selectorAttribs}
-          ref={handleRef}
           tabIndex={0}
           data-featured={featured ? 'true' : null}
           aria-label={textForScreenReader(intl, status, rebloggedByText, !status.get('hidden'))}
+          ref={this.handleRef}
           data-nosnippet={status.getIn(['account', 'noindex'], true) || undefined}
         >
-          {!muted && prepend}
+          {prepend}
 
-          {(connectReply || connectUp || connectToRoot) && <div className={classNames('status__line', { 'status__line--full': connectReply, 'status__line--first': !status.get('in_reply_to_id') && !connectToRoot })} />}
+          <div
+            className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), 'status--in-thread': !!rootId, 'status--first-in-thread': previousId && (!connectUp || connectToRoot), muted: this.props.muted, 'has-background': isCollapsed && background, collapsed: isCollapsed })}
+            data-id={status.get('id')}
+            style={isCollapsed && background ? { backgroundImage: `url(${background})` } : null}
+          >
+            {(connectReply || connectUp || connectToRoot) && <div className={classNames('status__line', { 'status__line--full': connectReply, 'status__line--first': !status.get('in_reply_to_id') && !connectToRoot })} />}
 
-          <header className='status__info'>
-            <span>
-              {muted && prepend}
-              {!muted || !isCollapsed ? (
+            {(!muted || !isCollapsed) && (
+              <header className='status__info'>
                 <StatusHeader
                   status={status}
                   friend={account}
                   collapsed={isCollapsed}
                   parseClick={parseClick}
                 />
-              ) : null}
-            </span>
-            <StatusIcons
-              status={status}
-              mediaIcons={contentMediaIcons.concat(extraMediaIcons)}
-              collapsible={settings.getIn(['collapsed', 'enabled'])}
-              collapsed={isCollapsed}
-              setCollapsed={setCollapsed}
-              settings={settings.get('status_icons')}
-            />
-          </header>
-          <StatusContent
-            status={status}
-            media={contentMedia}
-            extraMedia={extraMedia}
-            mediaIcons={contentMediaIcons}
-            expanded={isExpanded}
-            onExpandedToggle={this.handleExpandedToggle}
-            onTranslate={this.handleTranslate}
-            parseClick={parseClick}
-            disabled={!history}
-            tagLinks={settings.get('tag_misleading_links')}
-            rewriteMentions={settings.get('rewrite_mentions')}
-            {...statusContentProps}
-          />
-
-          {!isCollapsed || !(muted || !settings.getIn(['collapsed', 'show_action_bar'])) ? (
-            <StatusActionBar
+                <StatusIcons
+                  status={status}
+                  mediaIcons={contentMediaIcons.concat(extraMediaIcons)}
+                  collapsible={!muted && settings.getIn(['collapsed', 'enabled'])}
+                  collapsed={isCollapsed}
+                  setCollapsed={setCollapsed}
+                  settings={settings.get('status_icons')}
+                />
+              </header>
+            )}
+            <StatusContent
               status={status}
-              account={status.get('account')}
-              showReplyCount={settings.get('show_reply_count')}
-              onFilter={matchedFilters ? this.handleFilterClick : null}
-              {...other}
-            />
-          ) : null}
-          {notification ? (
-            <NotificationOverlayContainer
-              notification={notification}
+              media={contentMedia}
+              extraMedia={extraMedia}
+              mediaIcons={contentMediaIcons}
+              expanded={isExpanded}
+              onExpandedToggle={this.handleExpandedToggle}
+              onTranslate={this.handleTranslate}
+              parseClick={parseClick}
+              disabled={!history}
+              tagLinks={settings.get('tag_misleading_links')}
+              rewriteMentions={settings.get('rewrite_mentions')}
+              {...statusContentProps}
             />
-          ) : null}
+
+            {(!isCollapsed || !(muted || !settings.getIn(['collapsed', 'show_action_bar']))) && (
+              <StatusActionBar
+                status={status}
+                account={status.get('account')}
+                showReplyCount={settings.get('show_reply_count')}
+                onFilter={matchedFilters ? this.handleFilterClick : null}
+                {...other}
+              />
+            )}
+            {notification && (
+              <NotificationOverlayContainer
+                notification={notification}
+              />
+            )}
+          </div>
         </div>
       </HotKeys>
     );

diff --git 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 (
-      <div className='status__info__account'>
-        <a
-          href={account.get('url')}
-          target='_blank'
-          className='status__avatar'
-          onClick={this.handleAccountClick}
-          rel='noopener noreferrer'
-        >
+      <a
+        href={account.get('url')}
+        className='status__display-name'
+        target='_blank'
+        onClick={this.handleAccountClick}
+        rel='noopener noreferrer'
+      >
+        <div className='status__avatar'>
           {statusAvatar}
-        </a>
-        <a
-          href={account.get('url')}
-          target='_blank'
-          className='status__display-name'
-          onClick={this.handleAccountClick}
-          rel='noopener noreferrer'
-        >
-          <DisplayName account={account} />
-        </a>
-      </div>
+        </div>
+
+        <DisplayName account={account} />
+      </a>
     );
   }
 

diff --git 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') && <VisibilityIcon visibility={status.get('visibility')} />}
-        {collapsible && (
-          <IconButton
-            className='status__collapse-button'
-            animate
-            active={collapsed}
-            title={
-              collapsed ?
-                intl.formatMessage(messages.uncollapse) :
-                intl.formatMessage(messages.collapse)
-            }
-            icon='angle-double-up'
-            iconComponent={ExpandLessIcon}
-            onClick={this.handleCollapsedClick}
-          />
-        )}
+        {collapsible && <CollapseButton collapsed={collapsed} setCollapsed={setCollapsed} />}
       </div>
     );
   }