bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make chat panes REALLY BIG

Browse source
This commit is contained in:
Alex Gleason 2022-07-20 20:58:45 -05:00 committed by Justin
parent 0b4fc43172
commit 58322862e4
3 changed files with 8 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/features/chats/components/chat-panes.tsx
View file

@ -27,7 +27,7 @@ const getChatsUnreadCount = (state: RootState) => {
};
// Filter out invalid chats
const normalizePanes = (chats: Immutable.Map<string, Chat>, panes = ImmutableList<ImmutableMap<string, any>>()) => (
const normalizePanes = (chats: ImmutableMap<string, Chat>, panes = ImmutableList<ImmutableMap<string, any>>()) => (
panes.filter(pane => chats.get(pane.get('chat_id')))
);

7
app/soapbox/features/chats/components/ui/pane.tsx
View file

@ -17,11 +17,14 @@ interface IPane {
/** Chat pane UI component for desktop. */
const Pane: React.FC<IPane> = ({ windowState, index, children, main = false }) => {
const right = (285 * index) + 20;
const right = (404 * index) + 20;
return (
<div
className={classNames(`pane pane--${windowState}`, { 'pane--main': main })}
className={classNames('pane', {
'pane--main': main,
'h-14': windowState === 'minimized',
})}
style={{ right: `${right}px` }}
>
{children}

9
app/styles/chats.scss
View file

@ -1,5 +1,5 @@
.pane {
@apply flex flex-col shadow-md rounded-t-md fixed bottom-0 right-5 w-[256px] h-[350px] z-[1000];
@apply flex flex-col shadow-md rounded-t-md fixed bottom-0 right-5 w-96 h-[350px] z-[1000];
max-height: calc(100vh - 70px);
transition: 0.05s;
@ -11,10 +11,6 @@
}
}
&--minimized {
height: 31px;
}
.search--account {
border-top: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
padding: 5px;
@ -25,8 +21,7 @@
}
&__header {
@apply flex items-center py-0 px-2.5 box-border rounded-t-md font-bold bg-primary-600 text-white;
height: 31px;
@apply flex items-center py-0 px-2.5 h-14 box-border rounded-t-md font-bold bg-primary-600 text-white;
.account__avatar {
margin-right: 7px;