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

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

@ -8,9 +8,18 @@ const contentColumn = {
marginLeft: BaseTheme.spacing[2]
};
const contentText = {
color: BaseTheme.palette.text04,
marginLeft: BaseTheme.spacing[6]
const notification = {
display: 'flex',
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,
marginVertical: BaseTheme.spacing[1]
},
contentTextInteractive: {
...contentText,
color: BaseTheme.palette.text04,
marginLeft: BaseTheme.spacing[6],
marginTop: BaseTheme.spacing[1]
},
contentTextTitle: {
...contentText,
color: BaseTheme.palette.text04,
marginLeft: BaseTheme.spacing[6],
fontWeight: 'bold',
marginTop: BaseTheme.spacing[1]
},
@ -63,14 +69,12 @@ export default {
},
notification: {
display: 'flex',
backgroundColor: BaseTheme.palette.ui12,
borderRadius: BaseTheme.shape.borderRadius,
flexDirection: 'row',
maxHeight: 104,
height: 'auto',
marginBottom: BaseTheme.spacing[3],
marginHorizontal: BaseTheme.spacing[2]
...notification
},
notificationWithDescription: {
...notification,
paddingBottom: BaseTheme.spacing[2]
},
/**