Skip to content

Commit 15bf185

Browse files
BilbBilb
committed
fix: right panel attachments was missing padding
1 parent 5457b29 commit 15bf185

File tree

9 files changed

+226
-283
lines changed

9 files changed

+226
-283
lines changed

‎stylesheets/_modules.scss‎

Lines changed: 0 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -298,64 +298,7 @@
298298
}
299299
}
300300

301-
// Module: Media Gallery
302301

303-
.module-media-gallery {
304-
display: flex;
305-
flex-direction: column;
306-
flex-grow: 1;
307-
width: 100%;
308-
overflow: hidden;
309-
}
310-
311-
.module-media-gallery__tab-container {
312-
display: flex;
313-
flex-grow: 0;
314-
flex-shrink: 0;
315-
cursor: pointer;
316-
width: 100%;
317-
}
318-
319-
.module-media-gallery__tab {
320-
width: 100%;
321-
padding: 20px;
322-
text-align: center;
323-
}
324-
325-
.module-media-gallery__content {
326-
display: flex;
327-
flex-grow: 1;
328-
overflow-y: auto;
329-
overflow-x: hidden;
330-
padding: 20px;
331-
}
332-
333-
.module-media-gallery__sections {
334-
display: flex;
335-
flex-grow: 1;
336-
flex-direction: column;
337-
width: 100%;
338-
}
339-
340-
// Module: Attachment Section
341-
342-
.module-attachment-section {
343-
width: 100%;
344-
}
345-
346-
.module-attachment-section__header {
347-
font-size: 14px;
348-
font-weight: normal;
349-
line-height: 28px;
350-
}
351-
352-
.module-attachment-section__items {
353-
display: flex;
354-
flex-direction: row;
355-
flex-wrap: wrap;
356-
justify-content: flex-start;
357-
align-items: flex-start;
358-
}
359302

360303
// Module: Document List Item
361304

@@ -405,65 +348,6 @@
405348
flex-shrink: 0;
406349
}
407350

408-
// Module: Media Grid Item
409-
410-
.module-media-grid-item {
411-
height: 94px;
412-
width: 94px;
413-
cursor: pointer;
414-
background-color: var(--message-link-preview-background-color);
415-
margin-inline-end: 4px;
416-
margin-bottom: 4px;
417-
position: relative;
418-
}
419-
420-
.module-media-grid-item__image {
421-
height: 94px;
422-
width: 94px;
423-
object-fit: cover;
424-
}
425-
426-
.module-media-grid-item__icon {
427-
position: absolute;
428-
top: 15px;
429-
bottom: 15px;
430-
left: 15px;
431-
right: 15px;
432-
}
433-
434-
.module-media-grid-item__image-container {
435-
object-fit: cover;
436-
position: relative;
437-
}
438-
439-
.module-media-grid-item__circle-overlay {
440-
position: absolute;
441-
left: 50%;
442-
top: 50%;
443-
444-
transform: translate(-50%, -50%);
445-
446-
width: 42px;
447-
height: 42px;
448-
background-color: var(--chat-buttons-background-color);
449-
border-radius: 21px;
450-
451-
&:hover {
452-
background-color: var(--chat-buttons-background-hover-color);
453-
}
454-
}
455-
456-
/* Module: Empty State*/
457-
458-
.module-empty-state {
459-
display: flex;
460-
justify-content: center;
461-
align-items: center;
462-
flex-grow: 1;
463-
margin-top: var(--margins-sm);
464-
font-size: 16px;
465-
}
466-
467351
// Module: Conversation List Item
468352

469353
.module-conversation-list-item {

‎ts/components/buttons/PlayButton.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export const PlayButtonCenteredAbsolute = ({ iconSize }: WithIconSize) => {
2323
iconSize={iconSize}
2424
iconColor="var(--chat-buttons-icon-color)"
2525
backgroundColor="var(--chat-buttons-background-color)"
26+
iconStyle={{ padding: '0.4em' }} // em, because we reuse that component with different font-size
2627
/>
2728
</PlayButtonCentered>
2829
);

‎ts/components/conversation/media-gallery/AttachmentSection.tsx‎

Lines changed: 37 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import styled from 'styled-components';
12
import { missingCaseError } from '../../../util/missingCaseError';
23
import { MediaItemType } from '../../lightbox/LightboxGallery';
34
import { DocumentListItem } from './DocumentListItem';
@@ -45,16 +46,45 @@ const Items = (props: Props): JSX.Element => {
4546
);
4647
};
4748

49+
const StyledAttachmentSection = styled.div`
50+
width: 100%;
51+
`;
52+
53+
const StyledAttachmentSectionItems = styled.div`
54+
display: flex;
55+
flex-direction: row;
56+
flex-wrap: wrap;
57+
justify-content: flex-start;
58+
align-items: flex-start;
59+
`;
60+
61+
const StyledAttachmentSectionItemsMedia = styled.div`
62+
display: grid;
63+
grid-template-columns: repeat(3, 1fr);
64+
width: 100%;
65+
grid-gap: var(--margins-sm);
66+
`;
67+
68+
const StyledAttachmentSectionItemsDocuments = styled.div`
69+
width: 100%;
70+
`;
71+
4872
export const AttachmentSection = (props: Props) => {
4973
const { type } = props;
5074

5175
return (
52-
<div className="module-attachment-section">
53-
<div className="module-attachment-section__items">
54-
<div className={`module-attachment-section__items-${type}`}>
55-
<Items {...props} />
56-
</div>
57-
</div>
58-
</div>
76+
<StyledAttachmentSection>
77+
<StyledAttachmentSectionItems>
78+
{type === 'media' ? (
79+
<StyledAttachmentSectionItemsMedia>
80+
<Items {...props} />
81+
</StyledAttachmentSectionItemsMedia>
82+
) : (
83+
<StyledAttachmentSectionItemsDocuments>
84+
<Items {...props} />
85+
</StyledAttachmentSectionItemsDocuments>
86+
)}
87+
</StyledAttachmentSectionItems>
88+
</StyledAttachmentSection>
5989
);
6090
};

‎ts/components/conversation/media-gallery/EmptyState.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,24 @@
22
* @prettier
33
*/
44

5+
import styled from 'styled-components';
6+
57
interface Props {
68
label: string;
79
}
810

11+
const StyledEmptyState = styled.div`
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
flex-grow: 1;
16+
margin-top: var(--margins-sm);
17+
font-size: 16px;
18+
text-align: center;
19+
`;
20+
921
export const EmptyState = (props: Props) => {
1022
const { label } = props;
1123

12-
return <div className="module-empty-state">{label}</div>;
24+
return <StyledEmptyState>{label}</StyledEmptyState>;
1325
};

‎ts/components/conversation/media-gallery/MediaGallery.tsx‎

Lines changed: 77 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { useCallback, useState } from 'react';
2-
import clsx from 'clsx';
2+
import styled from 'styled-components';
33

44
import { MediaItemType } from '../../lightbox/LightboxGallery';
55
import { AttachmentSection } from './AttachmentSection';
66
import { EmptyState } from './EmptyState';
7+
import { localize } from '../../../localization/localeTools';
78

89
type Props = {
910
documents: Array<MediaItemType>;
@@ -12,6 +13,63 @@ type Props = {
1213

1314
type TabType = 'media' | 'documents';
1415

16+
const MediaGallerySection = styled.div`
17+
display: flex;
18+
flex-grow: 1;
19+
flex-direction: column;
20+
width: 100%;
21+
`;
22+
23+
const StyledMediaGallery = styled.div`
24+
display: flex;
25+
flex-direction: column;
26+
flex-grow: 1;
27+
width: 100%;
28+
overflow: hidden;
29+
`;
30+
31+
const StyledMediaGalleryTabContainer = styled.div`
32+
display: flex;
33+
flex-grow: 0;
34+
flex-shrink: 0;
35+
cursor: pointer;
36+
width: 100%;
37+
padding-top: 1rem;
38+
`;
39+
40+
const StyledMediaGalleryTab = styled.div<{ $active: boolean }>`
41+
width: 100%;
42+
43+
text-align: center;
44+
color: var(--text-primary-color);
45+
font-weight: bold;
46+
font-size: var(--font-display-size-xl);
47+
border-bottom: none;
48+
49+
&:after {
50+
// no content by default, content is set only on active
51+
display: block;
52+
margin: 0 auto;
53+
width: 70%;
54+
padding-top: 0.5rem;
55+
border-bottom: 4px solid var(--primary-color);
56+
}
57+
58+
${props =>
59+
props.$active &&
60+
`&:after {
61+
content: ''; /* This is necessary for the pseudo element to work. */
62+
}`}
63+
`;
64+
65+
const StyledMediaGalleryContent = styled.div`
66+
display: flex;
67+
flex-grow: 1;
68+
overflow-y: auto;
69+
overflow-x: hidden;
70+
padding: 20px;
71+
`;
72+
1573
const Tab = ({
1674
isSelected,
1775
label,
@@ -22,16 +80,9 @@ const Tab = ({
2280
onSelect: () => void;
2381
}) => {
2482
return (
25-
<div
26-
className={clsx(
27-
'module-media-gallery__tab',
28-
isSelected ? 'module-media-gallery__tab--active' : null
29-
)}
30-
onClick={onSelect}
31-
role="tab"
32-
>
83+
<StyledMediaGalleryTab $active={isSelected} onClick={onSelect} role="tab">
3384
{label}
34-
</div>
85+
</StyledMediaGalleryTab>
3586
);
3687
};
3788

@@ -44,16 +95,16 @@ const Sections = (props: Props & { selectedTab: TabType }) => {
4495
if (!mediaItems || mediaItems.length === 0) {
4596
const label =
4697
type === 'media'
47-
? window.i18n('attachmentsMediaEmpty')
48-
: window.i18n('attachmentsFilesEmpty');
98+
? localize('attachmentsMediaEmpty').toString()
99+
: localize('attachmentsFilesEmpty').toString();
49100

50101
return <EmptyState data-testid="EmptyState" label={label} />;
51102
}
52103

53104
return (
54-
<div className="module-media-gallery__sections">
105+
<MediaGallerySection>
55106
<AttachmentSection key="mediaItems" type={type} mediaItems={mediaItems} />
56-
</div>
107+
</MediaGallerySection>
57108
);
58109
};
59110

@@ -72,18 +123,22 @@ export const MediaGallery = (props: Props) => {
72123
}, []);
73124

74125
return (
75-
<div className="module-media-gallery">
76-
<div className="module-media-gallery__tab-container">
77-
<Tab label={window.i18n('media')} isSelected={isMediaSelected} onSelect={setMediaTab} />
126+
<StyledMediaGallery>
127+
<StyledMediaGalleryTabContainer>
128+
<Tab
129+
label={localize('media').toString()}
130+
isSelected={isMediaSelected}
131+
onSelect={setMediaTab}
132+
/>
78133
<Tab
79-
label={window.i18n('files')}
134+
label={localize('files').toString()}
80135
isSelected={isDocumentSelected}
81136
onSelect={setDocumentsTab}
82137
/>
83-
</div>
84-
<div className="module-media-gallery__content">
138+
</StyledMediaGalleryTabContainer>
139+
<StyledMediaGalleryContent>
85140
<Sections {...props} selectedTab={selectedTab} />
86-
</div>
87-
</div>
141+
</StyledMediaGalleryContent>
142+
</StyledMediaGallery>
88143
);
89144
};

0 commit comments

Comments
 (0)