feat: staged attachments rail stying updated
updated StyledStagedPlaceholderAttachment to be a styled functional component
This commit is contained in:
parent
d7200abfab
commit
ad38b15809
|
@ -844,8 +844,8 @@
|
|||
.module-image__close-button {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
z-index: 2;
|
||||
|
@ -876,17 +876,6 @@
|
|||
@include color-svg('../images/x-16.svg', var(--button-icon-stroke-color));
|
||||
}
|
||||
|
||||
.module-attachments__rail {
|
||||
margin-top: 12px;
|
||||
margin-inline-start: 16px;
|
||||
padding-inline-end: 16px;
|
||||
overflow-x: scroll;
|
||||
max-height: 142px;
|
||||
white-space: nowrap;
|
||||
overflow-y: hidden;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
// Module: Staged Generic Attachment
|
||||
|
||||
.module-staged-generic-attachment {
|
||||
|
@ -1032,22 +1021,6 @@
|
|||
|
||||
// Module: Staged Placeholder Attachment
|
||||
|
||||
.module-staged-placeholder-attachment {
|
||||
margin: 1px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-color);
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-secondary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.module-staged-placeholder-attachment__plus-icon {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
@ -1058,7 +1031,7 @@
|
|||
height: 36px;
|
||||
width: 36px;
|
||||
|
||||
@include color-svg('../images/plus-36.svg', var(--button-icon-stroke-color));
|
||||
@include color-svg('../images/plus-36.svg', var(--chat-buttons-icon-color));
|
||||
}
|
||||
|
||||
// Module: Left Pane
|
||||
|
|
|
@ -16,6 +16,7 @@ import {
|
|||
removeStagedAttachmentInConversation,
|
||||
} from '../../state/ducks/stagedAttachments';
|
||||
import { getSelectedConversationKey } from '../../state/selectors/conversations';
|
||||
import styled from 'styled-components';
|
||||
|
||||
type Props = {
|
||||
attachments: Array<AttachmentType>;
|
||||
|
@ -26,6 +27,17 @@ type Props = {
|
|||
const IMAGE_WIDTH = 120;
|
||||
const IMAGE_HEIGHT = 120;
|
||||
|
||||
const StyledRail = styled.div`
|
||||
margin-top: 12px;
|
||||
margin-inline-start: 16px;
|
||||
padding-inline-end: 16px;
|
||||
overflow-x: scroll;
|
||||
max-height: 142px;
|
||||
white-space: nowrap;
|
||||
overflow-y: hidden;
|
||||
margin-bottom: 6px;
|
||||
`;
|
||||
|
||||
export const StagedAttachmentList = (props: Props) => {
|
||||
const { attachments, onAddAttachment, onClickAttachment } = props;
|
||||
|
||||
|
@ -63,7 +75,7 @@ export const StagedAttachmentList = (props: Props) => {
|
|||
/>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="module-attachments__rail">
|
||||
<StyledRail>
|
||||
{(attachments || []).map((attachment, index) => {
|
||||
const { contentType } = attachment;
|
||||
if (isImageTypeSupported(contentType) || isVideoTypeSupported(contentType)) {
|
||||
|
@ -103,7 +115,7 @@ export const StagedAttachmentList = (props: Props) => {
|
|||
);
|
||||
})}
|
||||
{allVisualAttachments ? <StagedPlaceholderAttachment onClick={onAddAttachment} /> : null}
|
||||
</div>
|
||||
</StyledRail>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -1,17 +1,32 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
interface Props {
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
export class StagedPlaceholderAttachment extends React.Component<Props> {
|
||||
public render() {
|
||||
const { onClick } = this.props;
|
||||
const StyledStagedPlaceholderAttachment = styled.div`
|
||||
margin: 1px var(--margins-sm);
|
||||
border-radius: var(--border-radius-message-box);
|
||||
border: 1px solid var(--border-color);
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
return (
|
||||
<div className="module-staged-placeholder-attachment" role="button" onClick={onClick}>
|
||||
<div className="module-staged-placeholder-attachment__plus-icon" />
|
||||
</div>
|
||||
);
|
||||
&:hover {
|
||||
background-color: var(--background-secondary-color);
|
||||
}
|
||||
`;
|
||||
|
||||
export function StagedPlaceholderAttachment(props: Props) {
|
||||
const { onClick } = props;
|
||||
|
||||
return (
|
||||
<StyledStagedPlaceholderAttachment role="button" onClick={onClick}>
|
||||
<div className="module-staged-placeholder-attachment__plus-icon" />
|
||||
</StyledStagedPlaceholderAttachment>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue