upstream/mattermost
1
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2026-05-28 04:35:04 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

MM-62545 Pin bottom actions and top line (#29860)

Browse source 
* pin bottom actions and top line.

* lint fixes

* lint fixes

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
This commit is contained in:
Scott Bishel 2025-01-22 13:58:11 -07:00 committed by GitHub
parent e8eb279874
commit 8ad375365e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 26 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
webapp/channels/src/components/profile_popover/profile_popover.scss
View file

@ -15,18 +15,30 @@ $profilePopoverBorderWidth: 1px;
border-radius: 4px;
background: var(--center-channel-bg);
box-shadow: var(--elevation-4);
overflow-x: hidden;
overflow-y: auto;
.user-profile-popover-title {
.user-profile-popover_container {
display: flex;
height: 100%;
flex-direction: column;
}
.user-profile-popover-title {
position: sticky;
z-index: 1;
top: 0;
display: flex;
max-width: calc($profilePopoverWidth - 40px);
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
justify-content: end;
justify-content: space-between;
padding: 12px 8px 12px 8px;
background: var(--center-channel-bg);
.user-popover__role {
max-width: calc($profilePopoverWidth - 40px);
flex-grow: 1;
background: unset;
padding-inline-start: 8px;
@ -196,7 +208,6 @@ $profilePopoverBorderWidth: 1px;
padding: 0 16px 12px 16px;
.user-popover__subtitle {
display: flex;
margin-bottom: 4px;
font-size: 11px;
font-weight: 600;
@ -239,6 +250,12 @@ $profilePopoverBorderWidth: 1px;
background: none;
}
}
}
.user-profile-popover-bottom-row {
position: sticky;
bottom: 0;
background: var(--center-channel-bg);
.user-popover__bottom-row-container {
display: flex;

6
webapp/channels/src/components/profile_popover/profile_popover.tsx
View file

@ -154,7 +154,7 @@ const ProfilePopover = ({
const fullname = overwriteName || Utils.getFullName(user);
return (
<>
<div className='user-profile-popover_container'>
<ProfilePopoverTitle
channelId={channelId}
isBot={user.is_bot}
@ -211,6 +211,8 @@ const ProfilePopover = ({
returnFocus={handleReturnFocus}
hide={hide}
/>
</div>
<div className='user-profile-popover-bottom-row'>
<hr className='user-popover__bottom-row-hr'/>
<ProfilePopoverOverrideDisclaimer
haveOverrideProp={haveOverrideProp}
@ -242,7 +244,7 @@ const ProfilePopover = ({
status={hideStatus ? null : status}
/>
</div>
</>
</div>
);
};

3
webapp/channels/src/components/profile_popover/profile_popover_controller.tsx
View file

@ -10,6 +10,7 @@ import {
useDismiss,
useInteractions,
useRole,
shift,
FloatingFocusManager,
FloatingOverlay,
FloatingPortal,
@ -82,7 +83,7 @@ export function ProfilePopoverController<TriggerComponentType = HTMLSpanElement>
open: isOpen,
onOpenChange: setOpen,
whileElementsMounted: autoUpdate,
middleware: [autoPlacement()],
middleware: [autoPlacement(), shift()],
});
const {isMounted, styles: transitionStyles} = useTransitionStyles(floatingContext, TRANSITION_STYLE_PROPS);