fixup! [Glitch] Add notification policies and notification requests i…

…n web UI
ClearlyClaire · Mar 13, 2024 · ce0460c · ce0460c
1 parent 547eb70
commit ce0460c
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 17 deletions.
diff --git a/app/javascript/flavours/glitch/components/column_header.jsx b/app/javascript/flavours/glitch/components/column_header.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent, useCallback } from 'react';
 
-import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
+import { FormattedMessage, injectIntl, defineMessages, useIntl } from 'react-intl';
 
 import classNames from 'classnames';
 import { withRouter } from 'react-router-dom';
@@ -23,10 +23,12 @@ const messages = defineMessages({
   hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
   moveLeft: { id: 'column_header.moveLeft_settings', defaultMessage: 'Move column to the left' },
   moveRight: { id: 'column_header.moveRight_settings', defaultMessage: 'Move column to the right' },
+  back: { id: 'column_back_button.label', defaultMessage: 'Back' },
 });
 
-const BackButton = ({ pinned, show }) => {
+const BackButton = ({ pinned, show, onlyIcon }) => {
   const history = useAppHistory();
+  const intl = useIntl();
   const { multiColumn } = useColumnsContext();
 
   const handleBackClick = useCallback(() => {
@@ -39,19 +41,20 @@ const BackButton = ({ pinned, show }) => {
 
   const showButton = history && !pinned && ((multiColumn && history.location?.state?.fromMastodon) || show);
 
-  if(!showButton) return null;
+  if (!showButton) return null;
 
   return (
-    <button onClick={handleBackClick} className='column-header__back-button'>
+    <button onClick={handleBackClick} className={classNames('column-header__back-button', { 'compact': onlyIcon })} aria-label={intl.formatMessage(messages.back)}>
       <Icon id='chevron-left' icon={ArrowBackIcon} className='column-back-button__icon' />
-      <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
+      {!onlyIcon && <FormattedMessage id='column_back_button.label' defaultMessage='Back' />}
     </button>
   );
 };
 
 BackButton.propTypes = {
   pinned: PropTypes.bool,
   show: PropTypes.bool,
+  onlyIcon: PropTypes.bool,
 };
 
 class ColumnHeader extends PureComponent {
@@ -146,16 +149,16 @@ class ColumnHeader extends PureComponent {
     }
 
     if (multiColumn && pinned) {
-      pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='times' icon={CloseIcon} /> <FormattedMessage id='column_header.unpin' defaultMessage='Unpin' /></button>;
+      pinButton = <button className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='times' icon={CloseIcon} /> <FormattedMessage id='column_header.unpin' defaultMessage='Unpin' /></button>;
 
       moveButtons = (
-        <div key='move-buttons' className='column-header__setting-arrows'>
+        <div className='column-header__setting-arrows'>
           <button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='icon-button column-header__setting-btn' onClick={this.handleMoveLeft}><Icon id='chevron-left' icon={ChevronLeftIcon} /></button>
           <button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='icon-button column-header__setting-btn' onClick={this.handleMoveRight}><Icon id='chevron-right' icon={ChevronRightIcon} /></button>
         </div>
       );
     } else if (multiColumn && this.props.onPin) {
-      pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='plus' icon={AddIcon} /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>;
+      pinButton = <button className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='plus' icon={AddIcon} /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>;
     }
 
     backButton = <BackButton pinned={pinned} show={showBackButton} onlyIcon={!!title} />;
@@ -165,8 +168,12 @@ class ColumnHeader extends PureComponent {
     ];
 
     if (multiColumn) {
-      collapsedContent.push(pinButton);
-      collapsedContent.push(moveButtons);
+      collapsedContent.push(
+        <div key='buttons' className='column-header__advanced-buttons'>
+          {pinButton}
+          {moveButtons}
+        </div>
+      );
     }
 
     if (this.context.identity.signedIn && (children || (multiColumn && this.props.onPin))) {
@@ -191,16 +198,19 @@ class ColumnHeader extends PureComponent {
       <div className={wrapperClassName}>
         <h1 className={buttonClassName}>
           {hasTitle && (
-            <button onClick={this.handleTitleClick}>
-              <Icon id={icon} icon={iconComponent} className='column-header__icon' />
-              {title}
-            </button>
+            <>
+              {backButton}
+
+              <button onClick={this.handleTitleClick} className='column-header__title'>
+                {!showBackButton && <Icon id={icon} icon={iconComponent} className='column-header__icon' />}
+                {title}
+              </button>
+            </>
           )}
 
           {!hasTitle && backButton}
 
           <div className='column-header__buttons'>
-            {hasTitle && backButton}
             {extraButton}
             {collapseButton}
           </div>

diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
@@ -4257,7 +4257,7 @@ a.status-card {
   z-index: 2;
   outline: 0;
 
-  & > button {
+  &__title {
     display: flex;
     align-items: center;
     gap: 5px;
@@ -4279,8 +4279,18 @@ a.status-card {
     }
   }
 
-  & > .column-header__back-button {
+  .column-header__back-button + &__title {
+    padding-inline-start: 0;
+  }
+
+  .column-header__back-button {
+    flex: 1;
     color: $highlight-text-color;
+
+    &.compact {
+      flex: 0 0 auto;
+      color: $primary-text-color;
+    }
   }
 
   &.active {
@@ -4294,6 +4304,18 @@ a.status-card {
   &:active {
     outline: 0;
   }
+
+  &__advanced-buttons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    padding-top: 0;
+
+    &:first-child {
+      padding-top: 16px;
+    }
+  }
 }
 
 .column-header__buttons {