From b2075b5bd198fcbe3a647349439fc8118efd880a Mon Sep 17 00:00:00 2001 From: Joao Victor Date: Mon, 13 Dec 2021 14:50:10 -0300 Subject: [PATCH] fixes alignment of the emojis and thumbnails --- .../src/components/StatusTable.jsx | 252 ++++++++++-------- 1 file changed, 140 insertions(+), 112 deletions(-) diff --git a/bbb-learning-dashboard/src/components/StatusTable.jsx b/bbb-learning-dashboard/src/components/StatusTable.jsx index c60cdbe756..b682263bfe 100644 --- a/bbb-learning-dashboard/src/components/StatusTable.jsx +++ b/bbb-learning-dashboard/src/components/StatusTable.jsx @@ -5,9 +5,8 @@ import UserAvatar from './UserAvatar'; class StatusTable extends React.Component { componentDidMount() { - // This code is needed to prevent the emoji in the first cell - // after the username from overflowing - const emojis = document.getElementsByClassName('emojiOnFirstCell'); + // This code is needed to prevent the emojis from overflowing + const emojis = document.getElementsByClassName('timeline-emoji'); for (let i = 0; i < emojis.length; i += 1) { const emojiStyle = window.getComputedStyle(emojis[i]); let offsetLeft = emojiStyle @@ -16,13 +15,28 @@ class StatusTable extends React.Component { .trim(); offsetLeft = Number(offsetLeft); if (offsetLeft < 0) { - emojis[i].style.offsetLeft = '0px'; + emojis[i].style.left = '0'; + } + } + } + + componentDidUpdate() { + // This code is needed to prevent the emojis from overflowing + const emojis = document.getElementsByClassName('timeline-emoji'); + for (let i = 0; i < emojis.length; i += 1) { + const emojiStyle = window.getComputedStyle(emojis[i]); + let offsetLeft = emojiStyle + .left + .replace(/px/g, '') + .trim(); + offsetLeft = Number(offsetLeft); + if (offsetLeft < 0) { + emojis[i].style.left = '0'; } } } render() { - const spanMinutes = 10 * 60000; // 10 minutes default const { allUsers, slides, meetingId, intl, } = this.props; @@ -40,24 +54,28 @@ class StatusTable extends React.Component { const firstRegisteredOnTime = Math.min(...usersRegisteredTimes); const lastLeftOnTime = Math.max(...usersLeftTimes); + const hasSlides = slides && Array.isArray(slides) && slides.length > 0; const periods = []; - let currPeriod = firstRegisteredOnTime; - while (currPeriod < lastLeftOnTime) { - periods.push(currPeriod); - currPeriod += spanMinutes; - } - - function getSlidesOnPeriod(start = null, end = null) { - if (start == null && end == null) return slides; - - const filteredSlides = slides.filter((slide) => { - if (slide.presentationId === '') return false; - if (start == null && slide.setOn <= end) return true; - if (end == null && slide.setOn >= start) return true; - if (slide.setOn >= start && slide.setOn < end) return true; - return false; + if (hasSlides) { + const filteredSlides = slides.filter((slide) => slide.presentationId !== ''); + if (firstRegisteredOnTime < slides[0].setOn) { + periods.push({ + start: firstRegisteredOnTime, + end: slides[0].setOn - 1, + }); + } + filteredSlides.forEach((slide, index, slidesArray) => { + periods.push({ + slide, + start: slide.setOn, + end: slidesArray[index + 1]?.setOn - 1 || lastLeftOnTime, + }); + }); + } else { + periods.push({ + start: firstRegisteredOnTime, + end: lastLeftOnTime, }); - return filteredSlides; } return ( @@ -66,42 +84,58 @@ class StatusTable extends React.Component { - - - - { periods.map((period) => { `${tsToHHmmss(period - firstRegisteredOnTime)}` }) } + + + + + - { slides && Array.isArray(slides) && slides.length > 0 ? ( - - + { hasSlides ? ( + + { periods.map((period) => { - const slidesOnPeriod = getSlidesOnPeriod(period, period + spanMinutes); - const screenshots = slidesOnPeriod.map((slide) => ( -
- Slide -
{tsToHHmmss(slide.setOn - firstRegisteredOnTime)}
-
- )); + const { slide, start, end } = period; return ( - +
- {screenshots} +
+ + Slide + +
{tsToHHmmss(slide.setOn - periods[0].start)}
+
); @@ -133,81 +167,75 @@ class StatusTable extends React.Component { { periods.map((period) => { const userEmojisInPeriod = filterUserEmojis(user, null, - period, - period + spanMinutes); + period.start, + period.end); const { registeredOn, leftOn } = user; - const boundaryLeft = period; - const boundaryRight = period + spanMinutes - 1; + const boundaryLeft = period.start; + const boundaryRight = period.end; + const interval = period.end - period.start; return ( - { - (registeredOn >= boundaryLeft && registeredOn <= boundaryRight) + { (registeredOn >= boundaryLeft && registeredOn <= boundaryRight) || (leftOn >= boundaryLeft && leftOn <= boundaryRight) || (boundaryLeft > registeredOn && boundaryRight < leftOn) - || (boundaryLeft >= registeredOn && leftOn === 0) - ? ( - (function makeLineThrough() { - let roundedLeft = registeredOn >= boundaryLeft - && registeredOn <= boundaryRight ? 'rounded-l' : ''; - let roundedRight = leftOn > boundaryLeft - && leftOn < boundaryRight ? 'rounded-r' : ''; - let offsetLeft = 0; - let offsetRight = 0; - if (registeredOn >= boundaryLeft && registeredOn <= boundaryRight) { - offsetLeft = ((registeredOn - boundaryLeft) * 100) / spanMinutes; - } - if (leftOn >= boundaryLeft && leftOn <= boundaryRight) { - offsetRight = ((boundaryRight - leftOn) * 100) / spanMinutes; - } - let width = ''; - if (offsetLeft === 0 && offsetRight >= 99) { + || (boundaryLeft >= registeredOn && leftOn === 0) ? ( + (function makeLineThrough() { + let roundedLeft = registeredOn >= boundaryLeft + && registeredOn <= boundaryRight ? 'rounded-l' : ''; + let roundedRight = leftOn > boundaryLeft + && leftOn < boundaryRight ? 'rounded-r' : ''; + let offsetLeft = 0; + let offsetRight = 0; + if (registeredOn >= boundaryLeft && registeredOn <= boundaryRight) { + offsetLeft = ((registeredOn - boundaryLeft) * 100) / (interval); + } + if (leftOn >= boundaryLeft && leftOn <= boundaryRight) { + offsetRight = ((boundaryRight - leftOn) * 100) / (interval); + } + let width = ''; + if (offsetLeft === 0 && offsetRight >= 99) { + width = 'w-1.5'; + } + if (offsetRight === 0 && offsetLeft >= 99) { + width = 'w-1.5'; + } + if (offsetLeft && offsetRight) { + const variation = offsetLeft - offsetRight; + if (variation > -1 && variation < 1) { width = 'w-1.5'; } - if (offsetRight === 0 && offsetLeft >= 99) { - width = 'w-1.5'; - } - if (offsetLeft && offsetRight) { - const variation = offsetLeft - offsetRight; - if ( - variation > -1 && variation < 1 - ) { - width = 'w-1.5'; - } - } - const isRTL = document.dir === 'rtl'; - if (isRTL) { - const aux = roundedRight; + } + const isRTL = document.dir === 'rtl'; + if (isRTL) { + const aux = roundedRight; - if (roundedLeft !== '') roundedRight = 'rounded-r'; - else roundedRight = ''; + if (roundedLeft !== '') roundedRight = 'rounded-r'; + else roundedRight = ''; - if (aux !== '') roundedLeft = 'rounded-l'; - else roundedLeft = ''; - } - // height / 2 - const redress = '(0.375rem / 2)'; - return ( -
- ); - })() - ) : null - } + if (aux !== '') roundedLeft = 'rounded-l'; + else roundedLeft = ''; + } + const redress = '(0.375rem / 2)'; + return ( +
+ ); + })() + ) : null } { userEmojisInPeriod.map((emoji) => { - const offset = ((emoji.sentOn - period) * 100) / spanMinutes; + const offset = ((emoji.sentOn - period.start) * 100) + / (period.end - period.start); const origin = document.dir === 'rtl' ? 'right' : 'left'; - const onFirstCell = period === firstRegisteredOnTime; - // font-size / 2 + padding right/left + border-width const redress = '(0.875rem / 2 + 0.25rem + 2px)'; return (
); - })} + }) } ); }) }