Moves panel header into the panel component

2023-07-10 18:44:32 -04:00 · 2023-07-10 18:44:32 -04:00 · 7d0f94c654
commit 7d0f94c654
parent 0b885d5feb
8 changed files with 158 additions and 87 deletions
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@ -36,24 +36,6 @@
    background-color: $color-gray-95;
  }

-  .panel {
-    height: calc(100% - #{$header-height} - var(--title-bar-drag-area-height));
-    inset-inline-start: 0;
-    overflow-y: overlay;
-    position: absolute;
-    top: calc(#{$header-height} + var(--title-bar-drag-area-height));
-    width: 100%;
-    z-index: $z-index-base;
-
-    @include light-theme() {
-      background-color: $color-white;
-    }
-
-    @include dark-theme() {
-      background-color: $color-gray-95;
-    }
-  }
-
  .panel {
    &:not(.main) {
      &:dir(ltr) {
--- a/stylesheets/components/ConversationHeader.scss
+++ b/stylesheets/components/ConversationHeader.scss
@ -197,7 +197,6 @@
    height: $icon-size;
    margin-inline-end: var(--button-spacing);
    min-width: $icon-size;
-    opacity: 0;
    padding: 2px;
    transition: margin-inline-end 200ms ease-out, opacity 200ms ease-out,
      background 100ms ease-out;
@ -207,10 +206,6 @@
      cursor: default;
    }

-    &--show {
-      opacity: 1;
-    }
-
    &--show-disabled {
      opacity: 0.5;
    }
--- a/stylesheets/components/ConversationPanel.scss
+++ b/stylesheets/components/ConversationPanel.scss
@ -0,0 +1,99 @@
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+.ConversationPanel {
+  height: 100%;
+  inset-inline-start: 0;
+  overflow-y: overlay;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: $z-index-base;
+
+  @include light-theme() {
+    background-color: $color-white;
+  }
+
+  @include dark-theme() {
+    background-color: $color-gray-95;
+  }
+
+  &__header {
+    padding-top: var(--title-bar-drag-area-height);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: calc(#{$header-height} + var(--title-bar-drag-area-height));
+
+    @include light-theme {
+      color: $color-gray-90;
+      background-color: $color-white;
+    }
+    @include dark-theme {
+      color: $color-gray-02;
+      background-color: $color-gray-95;
+    }
+
+    &__info {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+
+      &__title {
+        @include font-body-1-bold;
+        display: flex;
+        align-items: center;
+
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        user-select: none;
+
+        &__in-contacts-icon {
+          margin-inline-start: 4px;
+        }
+      }
+    }
+
+    &__back-button {
+      border: none;
+      display: inline-block;
+      height: 20px;
+      margin-inline: 24px 6px;
+      min-width: 20px;
+      opacity: 0;
+      opacity: 1;
+      vertical-align: text-bottom;
+      -webkit-app-region: no-drag;
+      width: 20px;
+
+      &:disabled {
+        cursor: default;
+      }
+
+      @include light-theme {
+        @include color-svg(
+          '../images/icons/v3/chevron/chevron-left.svg',
+          $color-gray-90
+        );
+      }
+      @include dark-theme {
+        @include color-svg(
+          '../images/icons/v3/chevron/chevron-left.svg',
+          $color-gray-02
+        );
+      }
+
+      @include keyboard-mode {
+        &:focus {
+          background-color: $color-ultramarine;
+        }
+      }
+      @include dark-keyboard-mode {
+        &:focus {
+          background-color: $color-ultramarine-light;
+        }
+      }
+    }
+  }
+}
--- a/stylesheets/components/ConversationView.scss
+++ b/stylesheets/components/ConversationView.scss
@ -9,10 +9,21 @@
  &__pane {
    display: flex;
    flex-direction: column;
-    height: 100%;
-    overflow: initial;
+    height: calc(100% - #{$header-height} - var(--title-bar-drag-area-height));
+    inset-inline-start: 0;
+    overflow-y: overlay;
    position: absolute;
+    top: calc(#{$header-height} + var(--title-bar-drag-area-height));
    width: 100%;
+    z-index: $z-index-base;
+
+    @include light-theme() {
+      background-color: $color-white;
+    }
+
+    @include dark-theme() {
+      background-color: $color-gray-95;
+    }
  }

  &__timeline {
@ -44,4 +55,7 @@
      margin-inline: 16px;
    }
  }
+
+  &__header {
+  }
 }
--- a/stylesheets/manifest.scss
+++ b/stylesheets/manifest.scss
@ -67,6 +67,7 @@
@import './components/ConversationHeader.scss';
@import './components/ConversationHero.scss';
@import './components/ConversationMergeNotification.scss';
+@import './components/ConversationPanel.scss';
@import './components/ConversationView.scss';
@import './components/CustomColorEditor.scss';
@import './components/CustomizingPreferredReactionsModal.scss';
--- a/ts/components/conversation/ConversationHeader.tsx
+++ b/ts/components/conversation/ConversationHeader.tsx
@ -51,11 +51,10 @@ export enum OutgoingCallButtonStyle {
 export type PropsDataType = {
  badge?: BadgeType;
  cannotLeaveBecauseYouAreLastAdmin: boolean;
-  conversationTitle?: string;
+  hasPanelShowing?: boolean;
  hasStories?: HasStories;
  isMissingMandatoryProfileSharing?: boolean;
  outgoingCallButtonStyle: OutgoingCallButtonStyle;
-  showBackButton?: boolean;
  isSMSOnly?: boolean;
  isSignalConversation?: boolean;
  theme: ThemeType;
@ -161,23 +160,6 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
    }
  }

-  private renderBackButton(): ReactNode {
-    const { i18n, popPanelForConversation, showBackButton } = this.props;
-
-    return (
-      <button
-        type="button"
-        onClick={popPanelForConversation}
-        className={classNames(
-          'module-ConversationHeader__back-icon',
-          showBackButton ? 'module-ConversationHeader__back-icon--show' : null
-        )}
-        disabled={!showBackButton}
-        aria-label={i18n('icu:goBack')}
-      />
-    );
-  }
-
  private renderHeaderInfoTitle(): ReactNode {
    const { name, title, type, i18n, isMe } = this.props;

@ -304,7 +286,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
  }

  private renderMoreButton(triggerId: string): ReactNode {
-    const { i18n, showBackButton } = this.props;
+    const { i18n } = this.props;

    return (
      <ContextMenuTrigger id={triggerId} ref={this.menuTriggerRef}>
@ -313,10 +295,8 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
          onClick={this.showMenuBound}
          className={classNames(
            'module-ConversationHeader__button',
-            'module-ConversationHeader__button--more',
-            showBackButton ? null : 'module-ConversationHeader__button--show'
+            'module-ConversationHeader__button--more'
          )}
-          disabled={showBackButton}
          aria-label={i18n('icu:moreInfo')}
        />
      </ContextMenuTrigger>
@ -324,7 +304,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
  }

  private renderSearchButton(): ReactNode {
-    const { i18n, id, searchInConversation, showBackButton } = this.props;
+    const { i18n, id, searchInConversation } = this.props;

    return (
      <button
@ -332,10 +312,8 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
        onClick={() => searchInConversation(id)}
        className={classNames(
          'module-ConversationHeader__button',
-          'module-ConversationHeader__button--search',
-          showBackButton ? null : 'module-ConversationHeader__button--show'
+          'module-ConversationHeader__button--search'
        )}
-        disabled={showBackButton}
        aria-label={i18n('icu:search')}
      />
    );
@ -700,20 +678,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
  }

  private renderHeader(): ReactNode {
-    const { conversationTitle, groupVersion, pushPanelForConversation, type } =
-      this.props;
-
-    if (conversationTitle !== undefined) {
-      return (
-        <div className="module-ConversationHeader__header">
-          <div className="module-ConversationHeader__header__info">
-            <div className="module-ConversationHeader__header__info__title">
-              {conversationTitle}
-            </div>
-          </div>
-        </div>
-      );
-    }
+    const { groupVersion, pushPanelForConversation, type } = this.props;

    let onClick: undefined | (() => void);
    switch (type) {
@ -775,6 +740,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
      announcementsOnly,
      areWeAdmin,
      expireTimer,
+      hasPanelShowing,
      i18n,
      id,
      isSMSOnly,
@ -783,8 +749,12 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
      onOutgoingVideoCallInConversation,
      outgoingCallButtonStyle,
      setDisappearingMessages,
-      showBackButton,
    } = this.props;
+
+    if (hasPanelShowing) {
+      return null;
+    }
+
    const { isNarrow, modalState } = this.state;
    const triggerId = `conversation-${id}`;

@ -829,7 +799,6 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
              })}
              ref={measureRef}
            >
-              {this.renderBackButton()}
              {this.renderHeader()}
              {!isSMSOnly && !isSignalConversation && (
                <OutgoingCallButtons
@ -845,7 +814,6 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
                    onOutgoingVideoCallInConversation
                  }
                  outgoingCallButtonStyle={outgoingCallButtonStyle}
-                  showBackButton={showBackButton}
                />
              )}
              {this.renderSearchButton()}
@ -868,7 +836,6 @@ function OutgoingCallButtons({
  onOutgoingAudioCallInConversation,
  onOutgoingVideoCallInConversation,
  outgoingCallButtonStyle,
-  showBackButton,
 }: { isNarrow: boolean } & Pick<
  PropsType,
  | 'announcementsOnly'
@ -878,7 +845,6 @@ function OutgoingCallButtons({
  | 'onOutgoingAudioCallInConversation'
  | 'onOutgoingVideoCallInConversation'
  | 'outgoingCallButtonStyle'
-  | 'showBackButton'
 >): JSX.Element | null {
  const videoButton = (
    <button
@ -886,12 +852,10 @@ function OutgoingCallButtons({
      className={classNames(
        'module-ConversationHeader__button',
        'module-ConversationHeader__button--video',
-        showBackButton ? null : 'module-ConversationHeader__button--show',
-        !showBackButton && announcementsOnly && !areWeAdmin
+        announcementsOnly && !areWeAdmin
          ? 'module-ConversationHeader__button--show-disabled'
          : undefined
      )}
-      disabled={showBackButton}
      onClick={() => onOutgoingVideoCallInConversation(id)}
      type="button"
    />
@ -917,10 +881,8 @@ function OutgoingCallButtons({
            onClick={() => onOutgoingAudioCallInConversation(id)}
            className={classNames(
              'module-ConversationHeader__button',
-              'module-ConversationHeader__button--audio',
-              showBackButton ? null : 'module-ConversationHeader__button--show'
+              'module-ConversationHeader__button--audio'
            )}
-            disabled={showBackButton}
            aria-label={i18n('icu:makeOutgoingCall')}
          />
        </>
@ -932,9 +894,10 @@ function OutgoingCallButtons({
          className={classNames(
            'module-ConversationHeader__button',
            'module-ConversationHeader__button--join-call',
-            showBackButton ? null : 'module-ConversationHeader__button--show'
+            announcementsOnly && !areWeAdmin
+              ? 'module-ConversationHeader__button--show-disabled'
+              : undefined
          )}
-          disabled={showBackButton}
          onClick={() => onOutgoingVideoCallInConversation(id)}
          type="button"
        >
--- a/ts/state/smart/ConversationHeader.tsx
+++ b/ts/state/smart/ConversationHeader.tsx
@ -14,7 +14,6 @@ import { getPreferredBadgeSelector } from '../selectors/badges';
 import {
  getConversationByUuidSelector,
  getConversationSelector,
-  getConversationTitle,
  isMissingRequiredProfileSharing,
 } from '../selectors/conversations';
 import { CallMode } from '../../types/Calling';
@ -88,9 +87,8 @@ export function SmartConversationHeader({ id }: OwnProps): JSX.Element {

  const badgeSelector = useSelector(getPreferredBadgeSelector);
  const badge = badgeSelector(conversation.badges);
-  const conversationTitle = useSelector(getConversationTitle);
  const i18n = useSelector(getIntl);
-  const showBackButton = useSelector<StateType, boolean>(
+  const hasPanelShowing = useSelector<StateType, boolean>(
    state => state.conversations.targetedConversationPanels.length > 0
  );
  const outgoingCallButtonStyle = useSelector<
@ -155,8 +153,8 @@ export function SmartConversationHeader({ id }: OwnProps): JSX.Element {
      ])}
      badge={badge}
      cannotLeaveBecauseYouAreLastAdmin={cannotLeaveBecauseYouAreLastAdmin}
-      conversationTitle={conversationTitle}
      destroyMessages={destroyMessages}
+      hasPanelShowing={hasPanelShowing}
      hasStories={hasStories}
      i18n={i18n}
      id={id}
@ -178,7 +176,6 @@ export function SmartConversationHeader({ id }: OwnProps): JSX.Element {
      setDisappearingMessages={setDisappearingMessages}
      setMuteExpiration={setMuteExpiration}
      setPinned={setPinned}
-      showBackButton={showBackButton}
      theme={theme}
      toggleSelectMode={toggleSelectMode}
      viewUserStories={viewUserStories}
--- a/ts/state/smart/ConversationPanel.tsx
+++ b/ts/state/smart/ConversationPanel.tsx
@ -20,7 +20,7 @@ import { SmartMessageDetail } from './MessageDetail';
 import { SmartPendingInvites } from './PendingInvites';
 import { SmartStickerManager } from './StickerManager';
 import { getIntl } from '../selectors/user';
-import { getTopPanel } from '../selectors/conversations';
+import { getConversationTitle, getTopPanel } from '../selectors/conversations';
 import { useConversationsActions } from '../ducks/conversations';
 import { focusableSelectors } from '../../util/focusableSelectors';

@ -30,10 +30,12 @@ export function ConversationPanel({
  conversationId: string;
 }): JSX.Element | null {
  const i18n = useSelector(getIntl);
-  const { startConversation } = useConversationsActions();
+  const { popPanelForConversation, startConversation } =
+    useConversationsActions();
  const topPanel = useSelector<StateType, PanelRenderType | undefined>(
    getTopPanel
  );
+  const conversationTitle = useSelector(getConversationTitle);

  const selectors = useMemo(() => focusableSelectors.join(','), []);
  const panelRef = useRef<HTMLDivElement | null>(null);
@ -109,7 +111,25 @@ export function ConversationPanel({
  }

  return (
-    <div className={classNames('panel', panelClassName)} ref={panelRef}>
+    <div
+      className={classNames('ConversationPanel', 'panel', panelClassName)}
+      ref={panelRef}
+    >
+      <div className="ConversationPanel__header">
+        <button
+          aria-label={i18n('icu:goBack')}
+          className="ConversationPanel__header__back-button"
+          onClick={popPanelForConversation}
+          type="button"
+        />
+        {conversationTitle && (
+          <div className="ConversationPanel__header__info">
+            <div className="ConversationPanel__header__info__title">
+              {conversationTitle}
+            </div>
+          </div>
+        )}
+      </div>
      {panelChild}
    </div>
  );