git ssb

1+

Daan Patchwork / manyverse



Commit 16b075ee8dc72fbf74270a8aa4520c6f819e87ee

ux: improve typography in Private messages

fix fontSize and lineHeight in message composer
David Gomez authored on 6/19/2020, 5:33:53 PM
Andre Staltz committed on 7/3/2020, 1:06:25 PM
Parent: fb690775e89d87bccc4d1a9d2850e6bb3588681f

Files changed

src/frontend/screens/conversation/view.tschanged
src/frontend/screens/conversation/view.tsView
@@ -13,12 +13,16 @@
1313 import {
1414 GiftedChat as GiftedChatWithWrongTypes,
1515 Bubble as BubbleWithWrongTypes,
1616 Day as DayWithWrongTypes,
17+ Composer as ComposerWithWrongTypes,
18+ InputToolbar as InputToolbarWithWrongTypes,
19+ IMessage as GiftedMsg,
1720 GiftedChatProps,
1821 BubbleProps,
1922 DayProps,
20- IMessage as GiftedMsg,
23+ ComposerProps,
24+ InputToolbarProps,
2125 Send,
2226 } from 'react-native-gifted-chat';
2327 import {PostContent} from 'ssb-typescript';
2428 import {MsgAndExtras} from '../../ssb/types';
@@ -39,8 +43,14 @@
3943 const Bubble = (BubbleWithWrongTypes as any) as ComponentClass<
4044 BubbleProps<GiftedMsg>
4145 >;
4246 const Day = (DayWithWrongTypes as any) as ComponentClass<DayProps<GiftedMsg>>;
47+const InputToolbar = (InputToolbarWithWrongTypes as any) as ComponentClass<
48+ InputToolbarProps
49+>;
50+const Composer = (ComposerWithWrongTypes as any) as ComponentClass<
51+ ComposerProps
52+>;
4353
4454 export const styles = StyleSheet.create({
4555 container: {
4656 flex: 1,
@@ -79,8 +89,13 @@
7989 footer: {
8090 paddingBottom: Dimensions.verticalSpaceSmall,
8191 },
8292
93+ textInputStyle: {
94+ fontSize: Typography.fontSizeNormal,
95+ lineHeight: Typography.lineHeightNormal,
96+ },
97+
8398 bubbleLeft: {
8499 backgroundColor: Palette.backgroundText,
85100 borderColor: Palette.backgroundVoidStrong,
86101 borderWidth: StyleSheet.hairlineWidth,
@@ -154,8 +169,22 @@
154169 ]),
155170 ]);
156171 }
157172
173+function renderComposer(props: any) {
174+ return h(Composer, {
175+ ...props,
176+ textInputStyle: styles.textInputStyle,
177+ });
178+}
179+
180+function renderInputToolbar(props: any) {
181+ return h(InputToolbar, {
182+ ...props,
183+ renderComposer,
184+ });
185+}
186+
158187 /**
159188 * This constant is buried deep inside react-native-gifted-chat. It would be
160189 * good to import it directly, but for now we're just hard coding it. TODO
161190 */
@@ -238,8 +267,9 @@
238267 renderAvatar,
239268 renderSend,
240269 renderTime,
241270 renderDay,
271+ renderInputToolbar,
242272 renderMessageText: (item: {currentMessage: GiftedMsg}) =>
243273 h(View, {style: styles.bubbleText}, [
244274 item.currentMessage.user._id !== state.selfFeedId
245275 ? renderMessageAuthor(item.currentMessage.user)

Built with git-ssb-web