diff --git a/bigbluebutton-html5/imports/ui/components/chat/styles.scss b/bigbluebutton-html5/imports/ui/components/chat/styles.scss
index a507c2255f92c71e941cead7d60efd1bb7126ffa..08ffa1f092e41f2272b5d6c7699e78739cc989ec 100755
--- a/bigbluebutton-html5/imports/ui/components/chat/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/chat/styles.scss
@@ -1,31 +1,24 @@
@import "/imports/ui/stylesheets/mixins/focus";
@import "/imports/ui/stylesheets/variables/_all";
+:root {
+ --toast-content-width: 98%;
+ --toast-font-size: 80%;
+ --toast-content-margin-sm: .4rem;
+ --toast-content-margin-md: 1.4rem;
+}
-
-@mixin lineClamp($lineHeight: 1em, $lineCount: 1, $bgColor: inherit) {
- display: block;
- box-orient: vertical;
+@mixin lineClamp($lineHeight: 1em, $lineCount: 1) {
position: relative;
- word-break: break-word;
-
+ white-space: nowrap;
overflow: hidden;
+ text-overflow: ellipsis;
line-height: $lineHeight;
max-height: calc(#{"$lineHeight * $lineCount"});
-
- &:after {
- content: '';
- position: absolute;
- right: 0;
- width: 1em;
- height: $lineHeight;
- margin-top: 0.2em;
- background-color: $bgColor;
- }
}
.chat {
- background-color: #fff;
+ background-color: var(--color-white);
padding: var(--md-padding-x);
display: flex;
flex-grow: 1;
@@ -50,9 +43,8 @@
flex: 1;
& > button, button:hover {
- max-width: 98%;
+ max-width: var(--toast-content-width);
}
-
}
.hideBtn {
@@ -79,16 +71,17 @@
}
.pushMessageContent {
- margin-left: 2rem;
- margin-right: 2rem;
- margin-top: 1.4rem;
- margin-bottom: .4rem;
+ margin-top: var(--toast-content-margin-md);
+ margin-bottom: var(--toast-content-margin-sm);
+ margin-left: var(--toast-content-margin-sm);
+ margin-right: var(--toast-content-margin-sm);
background-color: inherit;
+ width: var(--toast-content-width);
}
.userNameMessage {
margin: 0;
- font-size: 80%;
+ font-size: var(--toast-font-size);
color: var(--color-gray-dark);
font-weight: bold;
background-color: inherit;
@@ -96,8 +89,8 @@
}
.contentMessage {
- margin-top: .2rem;
- font-size: 80%;
+ margin-top: var(--border-radius);
+ font-size: var(--toast-font-size);
background-color: inherit;
@include lineClamp(var(--font-size-small), 10);
}
diff --git a/bigbluebutton-html5/imports/ui/components/toast/component.jsx b/bigbluebutton-html5/imports/ui/components/toast/component.jsx
index 9aeba18f4af35b82c3690955e716d4a4af690a2d..771db8d457a660e68ffd771358e85a6889a4682f 100755
--- a/bigbluebutton-html5/imports/ui/components/toast/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/toast/component.jsx
@@ -23,92 +23,33 @@ const defaultIcons = {
[toast.TYPE.DEFAULT]: 'about',
};
-const getContentStrings = (msgContent) => {
- const MIN_LENGTH = 2;
- const strings = [];
- if (typeof msgContent === 'string') strings.push(msgContent);
- if (typeof msgContent === 'object') {
- const { children } = msgContent.props;
- if (Object.keys(children).length === MIN_LENGTH) {
- return getContentStrings(children[1]);
- }
- if (Object.keys(children).length > MIN_LENGTH) {
- Object.entries(children).reduce((acc, [key]) => {
- if (typeof children[key] === 'string') {
- strings.push(children[key]);
- }
- return null;
- });
- }
- }
- return strings;
-};
-
-const formatMessageStrings = (messages) => {
- const _messages = messages;
- const MAX_MESSAGE_CHARS = 40;
-
- return _messages.map((msg) => {
- let formattedMsg = msg;
- if (msg.length > MAX_MESSAGE_CHARS) {
- formattedMsg = `${msg.substring(0, MAX_MESSAGE_CHARS)}...`;
- }
- return formattedMsg;
- });
-};
-
-const setContentStrings = (msgContent, msgStrings) => {
- const _msgContent = msgContent;
- const msgObj = _msgContent.props.children[1];
- let stringIndex = 0;
- Object.entries(msgObj.props.children).reduce((acc, [key]) => {
- if (typeof msgObj.props.children[key] === 'string') {
- msgObj.props.children[key] = msgStrings[stringIndex];
- stringIndex += 1;
- }
- return null;
- });
- _msgContent.props.children[1] = msgObj;
- return _msgContent;
-};
-
const Toast = ({
icon,
type,
message,
content,
small,
-}) => {
- if (!content) return null;
- const formattedContent = content;
- const { children } = formattedContent.props;
-
- let strings = getContentStrings(children);
- strings = formatMessageStrings(strings);
- formattedContent.props.children = setContentStrings(children, strings);
-
- return (
- <div
- className={cx(styles.toastContainer, small ? styles.smallToastContainer : null)}
- role="alert"
- >
- <div className={styles[type]}>
- <div className={cx(styles.icon, small ? styles.smallIcon : null)}>
- <Icon iconName={icon || defaultIcons[type]} />
- </div>
- <div className={cx(styles.message, small ? styles.smallMessage : null)}>
- <span>{message}</span>
- </div>
+}) => (
+ <div
+ className={cx(styles.toastContainer, small ? styles.smallToastContainer : null)}
+ role="alert"
+ >
+ <div className={styles[type]}>
+ <div className={cx(styles.icon, small ? styles.smallIcon : null)}>
+ <Icon iconName={icon || defaultIcons[type]} />
</div>
+ <div className={cx(styles.message, small ? styles.smallMessage : null)}>
+ <span>{message}</span>
+ </div>
+ </div>
+ <div className={styles.backgroundColorInherit}>
+ <div className={styles.separator} />
<div className={styles.backgroundColorInherit}>
- <div className={styles.separator} />
- <div className={styles.backgroundColorInherit}>
- {formattedContent}
- </div>
+ {content}
</div>
</div>
- );
-};
+ </div>
+);
export default Toast;
diff --git a/bigbluebutton-html5/imports/ui/components/toast/styles.scss b/bigbluebutton-html5/imports/ui/components/toast/styles.scss
index a324698dc41be12e4da208286ecff50c06b28976..9a0470c6f8bc19cf81bcc0c8b59534eddfc21b17 100755
--- a/bigbluebutton-html5/imports/ui/components/toast/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/toast/styles.scss
@@ -20,7 +20,16 @@
--background-active: #eee;
--toast-offset: 4.5rem;
+ --toast-offset-sm: .325rem;
--toast-mobile-width: 75%;
+
+ --toast-max-width: 20rem !important;
+ --toast-body-max-width: 17.75rem !important;
+ --toast-container-max-width: 23rem !important;
+ --toast-container-min-width: var(--toast-max-width);
+
+ --toast-icon-md: 2rem;
+ --toast-icon-sm: 1.2rem;
}
@mixin notification-variant($icon-color, $icon-bg) {
@@ -39,17 +48,16 @@
.smallToastContainer {
background-color: inherit;
- margin: -.35rem;
}
.icon {
align-self: flex-start;
margin-bottom: auto;
margin-right: var(--sm-padding-x);
- width: 2rem;
+ width: var(--toast-icon-md);
+ height: var(--toast-icon-md);
border-radius: 50%;
position: relative;
- height: 2rem;
flex-shrink: 0;
> i {
@@ -62,25 +70,20 @@
}
.smallIcon {
- width: 1.2rem;
- height: 1.2rem;
+ width: var(--toast-icon-sm);
+ height: var(--toast-icon-sm);
> i {
font-size: 70%;
}
}
.separator {
- height: 1px;
- width: 99%;
- position: absolute;
- margin-left: -.5em;
+ position: relative;
+ width: 100%;
+ height: var(--border-size-small);
background-color: var(--color-gray-lighter);
margin-top: calc(var(--line-height-computed) * .5);
margin-bottom: calc(var(--line-height-computed) * .5);
- @include mq($small-only) {
- position: relative;
- margin-left: auto;
- }
}
.message {
@@ -119,8 +122,8 @@
z-index: 9998;
position: fixed;
padding: var(--sm-padding-y);
- width: 15vw;
- min-width: 320px;
+ min-width: var(--toast-container-min-width);
+ max-width: var(--toast-container-max-width);
box-sizing: border-box;
right: var(--jumbo-padding-y);
top: var(--toast-offset);
@@ -137,7 +140,7 @@
margin-bottom: var(--sm-padding-x);
padding: var(--md-padding-x);
border-radius: var(--border-radius);
- box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
+ box-shadow: 0 var(--border-size-small) 10px 0 rgba(0, 0, 0, 0.1), 0 var(--border-size) 15px 0 rgba(0, 0, 0, 0.05);
display: flex;
justify-content: space-between;
cursor: pointer;
@@ -145,6 +148,7 @@
background-color: var(--background);
animation-duration: 0.75s;
animation-fill-mode: both;
+ max-width: var(--toast-max-width);
&:hover,
&:focus {
@@ -153,9 +157,10 @@
}
.body {
- margin: auto 0;
+ margin: auto auto;
flex: 1;
background-color: inherit;
+ max-width: var(--toast-body-max-width);
}
.close {
@@ -164,22 +169,19 @@
border: none;
cursor: pointer;
opacity: .5;
- font-size: .35rem;
+ font-size: var(--font-size-smallest);
color: var(--color-gray-dark);
- padding: .4rem;
line-height: 0;
- position: absolute;
- top: var(--md-padding-y);
- right: var(--md-padding-y);
+ position: relative;
font-size: 70%;
- top: var(--lg-padding-y);
+ left: var(--toast-offset-sm);
[style~="--enableAnimation:1;"] & {
transition: .3s ease;
}
&:before {
- margin-left: -.2rem;
+ margin-left: -.4rem;
}
&:hover,
@@ -189,15 +191,8 @@
@include mq($small-only) {
position: relative;
- top: auto;
- right: auto;
- align-self: flex-start;
- margin-top: auto;
- margin-bottom: auto;
- margin-left: var(--sm-padding-x);
- font-size: 1rem;
- line-height: 1;
- border: none;
+ font-size: var(--font-size-smaller);
+ left: auto;
}
}
@@ -210,7 +205,7 @@
}
}
.backgroundColorInherit {
- background-color: inherit;
+ position: relative;
}
.progress {
diff --git a/bigbluebutton-html5/imports/ui/stylesheets/variables/typography.scss b/bigbluebutton-html5/imports/ui/stylesheets/variables/typography.scss
index 965e62997fa2a6f706672062fc9e3efaf776a1f9..c67aa40b0b2168b8c0db130c44669e0c4a3a672d 100644
--- a/bigbluebutton-html5/imports/ui/stylesheets/variables/typography.scss
+++ b/bigbluebutton-html5/imports/ui/stylesheets/variables/typography.scss
@@ -8,6 +8,8 @@
--font-size-base: 1rem;
--font-size-large: 1.25rem;
--font-size-small: 0.875rem;
+ --font-size-smaller: .75rem;
+ --font-size-smallest: .35rem;
--line-height-base: 1.25; // 20/16
--line-height-computed: 1rem;