[WiP] collapse thingy

glitch-soc · Feb 19, 2024 · b749373 · b749373
1 parent 665fdff
commit b749373
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 75 deletions.
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/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';
@@ -763,7 +764,13 @@ 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>
       );
     }
 
@@ -801,24 +808,24 @@ class Status extends ImmutablePureComponent {
           {(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'>
-            {(!muted || !isCollapsed) ? (
-              <StatusHeader
-                status={status}
-                friend={account}
-                collapsed={isCollapsed}
-                parseClick={parseClick}
-              />
-            ) : (
-              <span />
+            {(!muted || !isCollapsed) && (
+              <>
+                <StatusHeader
+                  status={status}
+                  friend={account}
+                  collapsed={isCollapsed}
+                  parseClick={parseClick}
+                />
+                <StatusIcons
+                  status={status}
+                  mediaIcons={contentMediaIcons.concat(extraMediaIcons)}
+                  collapsible={settings.getIn(['collapsed', 'enabled'])}
+                  collapsed={isCollapsed}
+                  setCollapsed={setCollapsed}
+                  settings={settings.get('status_icons')}
+                />
+              </>
             )}
-            <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}

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>
     );
   }

diff --git a/app/javascript/flavours/glitch/components/status_prepend.jsx b/app/javascript/flavours/glitch/components/status_prepend.jsx
@@ -23,6 +23,7 @@ export default class StatusPrepend extends PureComponent {
     account: ImmutablePropTypes.map.isRequired,
     parseClick: PropTypes.func.isRequired,
     notificationId: PropTypes.number,
+    children: PropTypes.node,
   };
 
   handleClick = (e) => {
@@ -112,7 +113,7 @@ export default class StatusPrepend extends PureComponent {
 
   render () {
     const { Message } = this;
-    const { type } = this.props;
+    const { type, children } = this.props;
 
     let iconId, iconComponent;
 
@@ -146,14 +147,13 @@ export default class StatusPrepend extends PureComponent {
 
     return !type ? null : (
       <aside className={type === 'reblogged_by' || type === 'featured' ? 'status__prepend' : 'notification__message'}>
-        <div className={type === 'reblogged_by' || type === 'featured' ? 'status__prepend-icon-wrapper' : 'notification__favourite-icon-wrapper'}>
-          <Icon
-            className={`status__prepend-icon ${type === 'favourite' ? 'star-icon' : ''}`}
-            id={iconId}
-            icon={iconComponent}
-          />
-        </div>
+        <Icon
+          className={`status__prepend-icon ${type === 'favourite' ? 'star-icon' : ''}`}
+          id={iconId}
+          icon={iconComponent}
+        />
         <Message />
+        {children}
       </aside>
     );
   }

diff --git 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 {
       <HotKeys handlers={this.getHandlers()}>
         <div className={classNames('notification notification-admin-report focusable', { unread })} tabIndex={0}>
           <div className='notification__message'>
-            <div className='notification__favourite-icon-wrapper'>
-              <Icon id='flag' icon={FlagIcon} />
-            </div>
+            <Icon id='flag' icon={FlagIcon} />
 
             <span title={notification.get('created_at')}>
               <FormattedMessage id='notification.admin.report' defaultMessage='{name} reported {target}' values={{ name: link, target: targetLink }} />

diff --git 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 {
       <HotKeys handlers={this.getHandlers()}>
         <div className={classNames('notification notification-admin-sign-up focusable', { unread })} tabIndex={0}>
           <div className='notification__message'>
-            <div className='notification__favourite-icon-wrapper'>
-              <Icon id='user-plus' icon={PersonAddIcon} />
-            </div>
+            <Icon id='user-plus' icon={PersonAddIcon} />
 
             <FormattedMessage
               id='notification.admin.sign_up'

diff --git a/app/javascript/flavours/glitch/features/notifications/components/follow.jsx b/app/javascript/flavours/glitch/features/notifications/components/follow.jsx
@@ -86,9 +86,7 @@ class NotificationFollow extends ImmutablePureComponent {
       <HotKeys handlers={this.getHandlers()}>
         <div className={classNames('notification notification-follow focusable', { unread })} tabIndex={0}>
           <div className='notification__message'>
-            <div className='notification__favourite-icon-wrapper'>
-              <Icon id='user-plus' icon={PersonAddIcon} />
-            </div>
+            <Icon id='user-plus' icon={PersonAddIcon} />
 
             <FormattedMessage
               id='notification.follow'

diff --git a/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx b/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx
@@ -108,9 +108,7 @@ class FollowRequest extends ImmutablePureComponent {
       <HotKeys handlers={this.getHandlers()}>
         <div className={classNames('notification notification-follow-request focusable', { unread })} tabIndex={0}>
           <div className='notification__message'>
-            <div className='notification__favourite-icon-wrapper'>
-              <Icon id='user' icon={PersonIcon} />
-            </div>
+            <Icon id='user' icon={PersonIcon} />
 
             <FormattedMessage
               id='notification.follow_request'

diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
@@ -1214,15 +1214,23 @@ body > [data-popper-placement] {
 
     .notification__message {
       margin-bottom: 0;
+      white-space: nowrap;
     }
 
-    .status__info .notification__message > span {
-      white-space: nowrap;
+    .notification__message-collapse-button {
+      display: block;
     }
   }
+}
+
+.notification__message-collapse-button {
+  display: none;
+  text-align: end;
+  flex-grow: 2;
 
-  .notification__message {
-    margin: -10px 0 10px;
+  .status__collapse-button .icon {
+    width: 24px;
+    height: 24px;
   }
 }
 
@@ -1277,10 +1285,6 @@ body > [data-popper-placement] {
   display: flex;
   justify-content: space-between;
   gap: 10px;
-
-  .notification__message > span {
-    word-wrap: break-word;
-  }
 }
 
 .status__info__icons {
@@ -1294,10 +1298,10 @@ body > [data-popper-placement] {
     width: 16px;
     height: 16px;
   }
+}
 
-  .status__collapse-button.active > .icon {
-    transform: rotate(-180deg);
-  }
+.status__collapse-button.active > .icon {
+  transform: rotate(-180deg);
 }
 
 .no-reduce-motion .status__collapse-button {
@@ -1470,11 +1474,6 @@ body > [data-popper-placement] {
   }
 }
 
-.notification__favourite-icon-wrapper {
-  inset-inline-start: 0;
-  position: absolute;
-}
-
 .detailed-status__link {
   display: inline-flex;
   align-items: center;
@@ -1811,14 +1810,14 @@ a.account__display-name {
 }
 
 .notification__message {
-  margin-inline-start: 42px;
-  padding-top: 8px;
-  padding-inline-start: 26px;
+  display: flex;
   cursor: default;
   color: $darker-text-color;
   font-size: 15px;
   position: relative;
   align-items: center;
+  height: 20px;
+  gap: 10px;
 
   .icon {
     color: $highlight-text-color;
@@ -1837,6 +1836,14 @@ a.account__display-name {
   }
 }
 
+.status .notification__message {
+  margin-bottom: 10px;
+}
+
+.notification .notification__message {
+  padding: 8px 14px 0;
+}
+
 .icon-button.star-icon.active {
   color: $gold-star;
 }