From a53392853fb779118270b3b83d0e913683073ba2 Mon Sep 17 00:00:00 2001 From: audric Date: Mon, 30 Aug 2021 15:11:26 +1000 Subject: [PATCH] make the CompositionBox closer to the mobile UI --- stylesheets/_session.scss | 15 +-- .../conversation/message/MessageContent.tsx | 2 +- .../conversation/SessionCompositionBox.tsx | 93 +++++++++++++------ ts/components/session/icon/Icons.tsx | 7 ++ ts/components/session/icon/SessionIcon.tsx | 18 +++- 5 files changed, 96 insertions(+), 39 deletions(-) diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 68e09677b..6d37c96ff 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -354,16 +354,19 @@ label { // Entirely to ensure that images are centered if they aren't full width of bubble text-align: center; position: relative; - - border-radius: $session_message-container-border-radius; overflow: hidden; - // no background by default for the attachment container -} -.module-message__attachment-container { border-top-left-radius: $session_message-container-border-radius; - border-top-right-radius: $session_message-container-border-radius; border-bottom-left-radius: $session_message-container-border-radius; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +} + +.module-message__container--outgoing--first-of-series { + border-top-right-radius: $session_message-container-border-radius; +} + +.module-message__container--outgoing--last-of-series { border-bottom-right-radius: $session_message-container-border-radius; } diff --git a/ts/components/conversation/message/MessageContent.tsx b/ts/components/conversation/message/MessageContent.tsx index ad4e82480..bddd72224 100644 --- a/ts/components/conversation/message/MessageContent.tsx +++ b/ts/components/conversation/message/MessageContent.tsx @@ -177,7 +177,7 @@ export const MessageContent = (props: Props) => { handleImageError={handleImageError} /> {hasContentAfterAttachmentAndQuote ? ( - + diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx index 3c5ce3ab6..1c67fbee2 100644 --- a/ts/components/session/conversation/SessionCompositionBox.tsx +++ b/ts/components/session/conversation/SessionCompositionBox.tsx @@ -88,6 +88,66 @@ export type SendMessageType = { groupInvitation: { url: string | undefined; name: string } | undefined; }; +const AddStagedAttachmentButton = (props: { onClick: () => void }) => { + const theme = useTheme(); + return ( + + ); +}; + +const StartRecordingButton = (props: { onClick: () => void }) => { + const theme = useTheme(); + + return ( + + ); +}; + +const ToggleEmojiButton = (props: { onClick: () => void }) => { + const theme = useTheme(); + return ( + + ); +}; + +const SendMessageButton = (props: { onClick: () => void }) => { + const theme = useTheme(); + return ( +
+ +
+ ); +}; + interface Props { sendMessage: (msg: SendMessageType) => void; draft: string; @@ -339,13 +399,7 @@ class SessionCompositionBoxInner extends React.Component { return ( <> - {typingEnabled && ( - - )} + {typingEnabled && } { onChange={this.onChoseAttachment} /> - {typingEnabled && ( - - )} + {typingEnabled && }
{ {this.renderTextArea()}
- {typingEnabled && ( - - )} -
- -
+ {typingEnabled && } + {typingEnabled && (
(this.emojiPanel = ref)} onKeyDown={this.onKeyDown} role="button"> diff --git a/ts/components/session/icon/Icons.tsx b/ts/components/session/icon/Icons.tsx index d97f37747..501f8f423 100644 --- a/ts/components/session/icon/Icons.tsx +++ b/ts/components/session/icon/Icons.tsx @@ -33,6 +33,7 @@ export enum SessionIconType { Pin = 'pin', Play = 'play', Plus = 'plus', + PlusThin = 'plusThin', Reply = 'reply', Search = 'search', Send = 'send', @@ -271,6 +272,12 @@ export const icons = { viewBox: '0 0 427 427', ratio: 1, }, + [SessionIconType.PlusThin]: { + path: + 'M97.4,21.9H78.2V2.7c0-1.3-1.1-2.4-2.4-2.4c-1.3,0-2.4,1.1-2.4,2.4v19.2H54.2c-1.3,0-2.4,1.1-2.4,2.4c0,1.3,1.1,2.4,2.4,2.4h19.2v19.2c0,1.3,1.1,2.4,2.4,2.4c1.3,0,2.4-1.1,2.4-2.4V26.7h19.2c1.3,0,2.4-1.1,2.4-2.4C99.8,23,98.7,21.9,97.4,21.9zM46.3,22.5H25.5V1.7c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v20.8H1.7c-0.8,0-1.5,0.7-1.5,1.5s0.7,1.5,1.5,1.5h20.8v20.8c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5V25.5h20.8c0.8,0,1.5-0.7,1.5-1.5S47.1,22.5,46.3,22.5z', + viewBox: '0 0 48 48', + ratio: 1, + }, [SessionIconType.Reply]: { path: 'M4,3 C4.55228475,3 5,3.44771525 5,4 L5,4 L5,11 C5,12.6568542 6.34314575,14 8,14 L8,14 L17.585,14 L14.2928932,10.7071068 C13.9324093,10.3466228 13.9046797,9.77939176 14.2097046,9.38710056 L14.2928932,9.29289322 C14.6834175,8.90236893 15.3165825,8.90236893 15.7071068,9.29289322 L15.7071068,9.29289322 L20.7071068,14.2928932 C20.7355731,14.3213595 20.7623312,14.3515341 20.787214,14.3832499 C20.788658,14.3849951 20.7902348,14.3870172 20.7918027,14.389044 C20.8140715,14.4179625 20.8348358,14.4480862 20.8539326,14.4793398 C20.8613931,14.4913869 20.8685012,14.5036056 20.8753288,14.5159379 C20.8862061,14.5357061 20.8966234,14.5561086 20.9063462,14.5769009 C20.914321,14.5939015 20.9218036,14.6112044 20.9287745,14.628664 C20.9366843,14.6484208 20.9438775,14.6682023 20.9504533,14.6882636 C20.9552713,14.7031487 20.9599023,14.7185367 20.9641549,14.734007 C20.9701664,14.7555635 20.9753602,14.7772539 20.9798348,14.7992059 C20.9832978,14.8166247 20.9863719,14.834051 20.9889822,14.8515331 C20.9962388,14.8996379 21,14.9493797 21,15 L20.9962979,14.9137692 C20.9978436,14.9317345 20.9989053,14.9497336 20.9994829,14.9677454 L21,15 C21,15.0112225 20.9998151,15.0224019 20.9994483,15.0335352 C20.9988772,15.050591 20.997855,15.0679231 20.996384,15.0852242 C20.994564,15.1070574 20.9920941,15.1281144 20.9889807,15.1489612 C20.9863719,15.165949 20.9832978,15.1833753 20.9797599,15.2007258 C20.9753602,15.2227461 20.9701664,15.2444365 20.964279,15.2658396 C20.9599023,15.2814633 20.9552713,15.2968513 20.9502619,15.3121425 C20.9438775,15.3317977 20.9366843,15.3515792 20.928896,15.3710585 C20.9218036,15.3887956 20.914321,15.4060985 20.9063266,15.4232215 C20.8974314,15.4421635 20.8879327,15.4609002 20.8778732,15.4792864 C20.8703855,15.4931447 20.862375,15.5070057 20.8540045,15.5207088 C20.8382813,15.546275 20.8215099,15.5711307 20.8036865,15.5951593 C20.774687,15.6343256 20.7425008,15.6717127 20.7071068,15.7071068 L20.787214,15.6167501 C20.7849289,15.6196628 20.7826279,15.6225624 20.7803112,15.625449 L20.7071068,15.7071068 L15.7071068,20.7071068 C15.3165825,21.0976311 14.6834175,21.0976311 14.2928932,20.7071068 C13.9023689,20.3165825 13.9023689,19.6834175 14.2928932,19.2928932 L14.2928932,19.2928932 L17.585,16 L8,16 C5.3112453,16 3.11818189,13.8776933 3.00461951,11.2168896 L3,11 L3,4 C3,3.44771525 3.44771525,3 4,3', diff --git a/ts/components/session/icon/SessionIcon.tsx b/ts/components/session/icon/SessionIcon.tsx index c4055a384..c33956081 100644 --- a/ts/components/session/icon/SessionIcon.tsx +++ b/ts/components/session/icon/SessionIcon.tsx @@ -8,12 +8,14 @@ export type SessionIconProps = { iconSize: SessionIconSize | number; iconColor?: string; iconRotation?: number; + iconPadding?: string; rotateDuration?: number; glowDuration?: number; - borderRadius?: number; + borderRadius?: string; glowStartDelay?: number; noScale?: boolean; theme?: DefaultTheme; + backgroundColor?: string; }; const getIconDimensionFromIconSize = (iconSize: SessionIconSize | number) => { @@ -46,11 +48,13 @@ type StyledSvgProps = { height: string | number; iconRotation: number; rotateDuration?: number; - borderRadius?: number; + borderRadius?: string; + iconPadding?: string; glowDuration?: number; glowStartDelay?: number; noScale?: boolean; iconColor?: string; + backgroundColor?: string; }; const rotate = keyframes` @@ -125,7 +129,10 @@ const Svg = React.memo(styled.svg` transform: ${props => `rotate(${props.iconRotation}deg)`}; animation: ${props => animation(props)}; border-radius: ${props => props.borderRadius}; + background-color: ${props => (props.backgroundColor ? props.backgroundColor : '')}; + border-radius: ${props => (props.borderRadius ? props.borderRadius : '')}; filter: ${props => (props.noScale ? `drop-shadow(0px 0px 4px ${props.iconColor})` : '')}; + padding: ${props => (props.iconPadding ? props.iconPadding : '')}; `); //tslint:enable no-unnecessary-callback-wrapper @@ -140,7 +147,9 @@ const SessionSvg = (props: { glowDuration?: number; glowStartDelay?: number; noScale?: boolean; - borderRadius?: number; + borderRadius?: string; + backgroundColor?: string; + iconPadding?: string; theme: DefaultTheme; }) => { const colorSvg = props.iconColor || props?.theme?.colors.textColor; @@ -155,6 +164,9 @@ const SessionSvg = (props: { glowStartDelay: props.glowStartDelay, iconColor: props.iconColor, noScale: props.noScale, + backgroundColor: props.backgroundColor, + borderRadius: props.borderRadius, + iconPadding: props.iconPadding, }; return (