Skip to content

Commit b137d6a

Browse files
BilbBilb
authored
Merge pull request #1497 from Bilb/fix-kees-changes-modals
fix: address modal styling issues
2 parents 334da8f + 568fc54 commit b137d6a

36 files changed

+416
-472
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/SessionPasswordPrompt.tsx‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { ShowHideSessionInput } from './inputs/SessionInput';
2424
import { sleepFor } from '../session/utils/Promise';
2525
import { ModalDescription } from './dialog/shared/ModalDescriptionContainer';
2626
import { SpacerMD } from './basic/Text';
27+
import { ModalFlexContainer } from './dialog/shared/ModalFlexContainer';
2728

2829
const MAX_LOGIN_TRIES = 3;
2930

@@ -215,26 +216,28 @@ const SessionPasswordPromptInner = () => {
215216
)
216217
}
217218
>
218-
{loading ? (
219-
<>
220-
<SessionSpinner loading={true} />
221-
<TextPleaseWait isLoading={loading} />
222-
<SpacerMD />
223-
</>
224-
) : clearDataView ? (
225-
<ModalDescription
226-
dataTestId="modal-description"
227-
localizerProps={{
228-
token: 'clearDeviceDescription',
229-
}}
230-
/>
231-
) : (
232-
<PasswordPrompt
233-
onEnterPressed={initLogin}
234-
onPasswordChange={setPassword}
235-
password={password}
236-
/>
237-
)}
219+
<ModalFlexContainer>
220+
{loading ? (
221+
<>
222+
<SessionSpinner loading={true} />
223+
<TextPleaseWait isLoading={loading} />
224+
<SpacerMD />
225+
</>
226+
) : clearDataView ? (
227+
<ModalDescription
228+
dataTestId="modal-description"
229+
localizerProps={{
230+
token: 'clearDeviceDescription',
231+
}}
232+
/>
233+
) : (
234+
<PasswordPrompt
235+
onEnterPressed={initLogin}
236+
onPasswordChange={setPassword}
237+
password={password}
238+
/>
239+
)}
240+
</ModalFlexContainer>
238241
</SessionWrapperModal>
239242
);
240243
};

‎ts/components/SessionWrapperModal.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,10 +127,15 @@ export const ModalActionsContainer = ({
127127
children,
128128
maxWidth,
129129
style = {},
130+
extraBottomMargin,
130131
}: {
131132
children: ReactNode;
132133
style?: CSSProperties;
133134
maxWidth?: string;
135+
/**
136+
* some buttons have border/background and need some extra margin to not appear to close to the edge
137+
*/
138+
extraBottomMargin?: boolean;
134139
}) => {
135140
return (
136141
<Flex
@@ -141,7 +146,11 @@ export const ModalActionsContainer = ({
141146
$alignItems="center"
142147
$flexGap="var(--margins-md)"
143148
height="50px"
144-
style={{ justifySelf: 'center', ...style }}
149+
style={{
150+
justifySelf: 'center',
151+
marginBottom: extraBottomMargin ? 'var(--margins-sm)' : '',
152+
...style,
153+
}}
145154
data-testid="modal-actions-container"
146155
>
147156
{children}

‎ts/components/basic/Flex.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,8 @@ export const Flex = styled.div<FlexProps>`
6161
flex-wrap: ${props => (props.$flexWrap !== undefined ? props.$flexWrap : 'nowrap')};
6262
gap: ${props => props.$flexGap || undefined};
6363
align-items: ${props => props.$alignItems || 'stretch'};
64-
margin: ${props => props.margin || '0'};
65-
padding: ${props => props.padding || '0'};
64+
margin: ${props => props.margin || ''};
65+
padding: ${props => props.padding || ''};
6666
width: ${props => props.width || 'auto'};
6767
max-width: ${props => props.maxWidth || 'none'};
6868
min-width: ${props => props.minWidth || 'none'};

‎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
};

0 commit comments

Comments
 (0)