haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(notifications): small ui updates (#12943) 

* feat(notifications): small ui updates
This commit is contained in:
Calinteodor 2023-02-23 11:49:26 +02:00 committed by GitHub
parent b4bf363237
commit 19e61747b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
react/features/notifications/components/native/Notification.tsx
View File

@ -43,7 +43,7 @@ const ICON_COLOR = {
}; };
type Props = AbstractNotificationProps & WithTranslation & { export type Props = AbstractNotificationProps & WithTranslation & {
_participants: ArrayLike<any>; _participants: ArrayLike<any>;
}; };
@ -188,12 +188,17 @@ class Notification extends AbstractNotification<Props> {
const { icon } = this.props; const { icon } = this.props;
const contentColumnStyles = icon === NOTIFICATION_ICON.PARTICIPANTS const contentColumnStyles = icon === NOTIFICATION_ICON.PARTICIPANTS
? styles.contentColumn : styles.interactiveContentColumn; ? styles.contentColumn : styles.interactiveContentColumn;
const description = this._getDescription();
const notificationStyles = description?.length
? styles.notificationWithDescription
: styles.notification;
return ( return (
<Animated.View <Animated.View
pointerEvents = 'box-none' pointerEvents = 'box-none'
style = { [ style = { [
styles.notification, notificationStyles,
{ {
// @ts-ignore // @ts-ignore
opacity: this.state.notificationContainerAnimation opacity: this.state.notificationContainerAnimation
@ -228,11 +233,9 @@ class Notification extends AbstractNotification<Props> {
*/ */
_renderContent() { _renderContent() {
// @ts-ignore // @ts-ignore
const { icon, t, title, titleArguments, titleKey } = this.props; const { t, title, titleArguments, titleKey } = this.props;
const titleText = title || (titleKey && t(titleKey, titleArguments)); const titleText = title || (titleKey && t(titleKey, titleArguments));
const description = this._getDescription(); const description = this._getDescription();
const descriptionStyles = icon === NOTIFICATION_ICON.PARTICIPANTS
? styles.contentTextInteractive : styles.contentText;
if (description?.length) { if (description?.length) {
return ( return (
@ -244,7 +247,7 @@ class Notification extends AbstractNotification<Props> {
description.map((line, index) => ( description.map((line, index) => (
<Text <Text
key = { index } key = { index }
style = { descriptionStyles }> style = { styles.contentText }>
{ replaceNonUnicodeEmojis(line) } { replaceNonUnicodeEmojis(line) }
</Text> </Text>
)) ))

40
react/features/notifications/components/native/styles.js
View File

@ -8,9 +8,18 @@ const contentColumn = {
marginLeft: BaseTheme.spacing[2] marginLeft: BaseTheme.spacing[2]
}; };
const contentText = { const notification = {
color: BaseTheme.palette.text04, display: 'flex',
marginLeft: BaseTheme.spacing[6] backgroundColor: BaseTheme.palette.ui12,
borderRadius: BaseTheme.shape.borderRadius,
borderLeftColor: BaseTheme.palette.link01Active,
borderLeftWidth: 4,
flexDirection: 'row',
maxHeight: 104,
height: 'auto',
marginBottom: BaseTheme.spacing[3],
marginHorizontal: BaseTheme.spacing[2],
width: 400
}; };
/** /**
@ -39,17 +48,14 @@ export default {
}, },
contentText: { contentText: {
...contentText, color: BaseTheme.palette.text04,
marginVertical: BaseTheme.spacing[1] marginLeft: BaseTheme.spacing[6],
},
contentTextInteractive: {
...contentText,
marginTop: BaseTheme.spacing[1] marginTop: BaseTheme.spacing[1]
}, },
contentTextTitle: { contentTextTitle: {
...contentText, color: BaseTheme.palette.text04,
marginLeft: BaseTheme.spacing[6],
fontWeight: 'bold', fontWeight: 'bold',
marginTop: BaseTheme.spacing[1] marginTop: BaseTheme.spacing[1]
}, },
@ -63,14 +69,12 @@ export default {
}, },
notification: { notification: {
display: 'flex', ...notification
backgroundColor: BaseTheme.palette.ui12, },
borderRadius: BaseTheme.shape.borderRadius,
flexDirection: 'row', notificationWithDescription: {
maxHeight: 104, ...notification,
height: 'auto', paddingBottom: BaseTheme.spacing[2]
marginBottom: BaseTheme.spacing[3],
marginHorizontal: BaseTheme.spacing[2]
}, },
/** /**