Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Add tabs to the right panel#12672

Merged
MidhunSureshR merged 12 commits intodevelopfrom
midhun/add-tabs-to-rightpanel
Jul 9, 2024
Merged

Add tabs to the right panel#12672
MidhunSureshR merged 12 commits intodevelopfrom
midhun/add-tabs-to-rightpanel

Conversation

@MidhunSureshR
Copy link
Copy Markdown
Member

@MidhunSureshR MidhunSureshR commented Jun 24, 2024

For element-hq/element-web#26597

Design in https://www.figma.com/design/gpxHFDTNK796n84r1ZxYG2/Room-Header-%26-Details-(2024)?node-id=1-8700&t=SuUdpAsiC4vj94ea-0

Changes:

  • Introduces a new RightPanelTabs component with the following tabs:

    1. Info -> RoomSummaryCard
    2. People -> MemberList
    3. Threads -> ThreadPanel
  • Clicking on an item in the TAC will focus the Threads tab instead of focusing the close button in the thread panel.

  • The previous RightPanelStore.showOrHidePanel is now renamed to RightPanelStore.showOrHidePhase.
    showOrHidePanel introduces the following new behavior:

    clicking on any icon will open to the correct section, OR CLOSE the side panel if it's currently being shown.

  • Adds an info icon that opens the room summary panel.

  • Some changes to BaseCard:

    • New props (id, ariaLabelledBy, role) for accessibility.
    • Pass hideHeaderButtons prop to not show the back/close buttons.
  • Cleanup the code for optional rendering of space headers by extracting the code into createSpaceScopeHeader()

@MidhunSureshR MidhunSureshR added the T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements label Jul 2, 2024
- Adds id, ariaLabelledBy and role props to implement tab accessibility.
- Adds hideHeaderButtons prop to hide header buttons (think back and
  close buttons).
- Change confusing header rendering code:
  header is not rendered ONLY when no header is passed AND
  hideHeaderButtons is true.
Created a new function createSpaceScopeHeader which returns the
component if the room is a space room. Previously this code was
duplicated in every component that uses SpaceScopeHeader component.
Actually using the code from the last two commits
@MidhunSureshR MidhunSureshR force-pushed the midhun/add-tabs-to-rightpanel branch from 129a145 to a8ead86 Compare July 8, 2024 13:37
@MidhunSureshR
Copy link
Copy Markdown
Member Author

@richvdh : Hopefully it's a bit easier to review commit by commit now

@t3chguy
Copy link
Copy Markdown
Member

t3chguy commented Jul 8, 2024

@MidhunSureshR could you link to the designs please

@MidhunSureshR
Copy link
Copy Markdown
Member Author

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Colour of Info should be darker here, and the weight of all the tab titles should be higher

image

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed (see d94f70e)

Comment thread src/components/views/rooms/SpaceScopeHeader.tsx
@americanrefugee
Copy link
Copy Markdown

Feedback:

  • Selected/active tab text should be 'Medium', not regular.

@americanrefugee
Copy link
Copy Markdown

Feedback:

  • Selected/active tab text should be 'Medium', not regular.

Ignore this comment, everything LGTM

@MidhunSureshR MidhunSureshR added this pull request to the merge queue Jul 9, 2024
@t3chguy t3chguy added the X-Release-Blocker This affects the current release cycle and must be solved for a release to happen label Jul 9, 2024
Merged via the queue into develop with commit cf8b87f Jul 9, 2024
@MidhunSureshR MidhunSureshR deleted the midhun/add-tabs-to-rightpanel branch July 9, 2024 11:54
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements X-Release-Blocker This affects the current release cycle and must be solved for a release to happen

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants