diff --git a/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx b/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx new file mode 100644 index 000000000..203b72089 --- /dev/null +++ b/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx @@ -0,0 +1,42 @@ +import React, { useState, useEffect } from 'react' +import { + Link, + Icon, + } from 'UI'; +import { session as sessionRoute, liveSession as liveSessionRoute } from 'App/routes'; + +const PLAY_ICON_NAMES = { + notPlayed: 'play-fill', + played: 'play-circle-light', + hovered: 'play-hover' +} + +const getDefaultIconName = (isViewed) => !isViewed ? PLAY_ICON_NAMES.notPlayed : PLAY_ICON_NAMES.played + +interface Props { + isAssist: boolean; + viewed: boolean; + sessionId: string; +} +export default function PlayLink(props: Props) { + const { isAssist, viewed, sessionId } = props + const defaultIconName = getDefaultIconName(viewed) + + const [isHovered, toggleHover] = useState(false) + const [iconName, setIconName] = useState(defaultIconName) + + useEffect(() => { + if (isHovered) setIconName(PLAY_ICON_NAMES.hovered) + else setIconName(getDefaultIconName(viewed)) + }, [isHovered, viewed]) + + return ( + toggleHover(true)} + onMouseLeave={() => toggleHover(false)} + > + + + ) +} \ No newline at end of file diff --git a/frontend/app/components/shared/SessionItem/PlayLink/index.ts b/frontend/app/components/shared/SessionItem/PlayLink/index.ts new file mode 100644 index 000000000..7ff31c16c --- /dev/null +++ b/frontend/app/components/shared/SessionItem/PlayLink/index.ts @@ -0,0 +1 @@ +export { default } from './PlayLink' \ No newline at end of file diff --git a/frontend/app/components/shared/SessionItem/SessionItem.js b/frontend/app/components/shared/SessionItem/SessionItem.js index af00fa2a2..2c24243ae 100644 --- a/frontend/app/components/shared/SessionItem/SessionItem.js +++ b/frontend/app/components/shared/SessionItem/SessionItem.js @@ -15,6 +15,7 @@ import stl from './sessionItem.css'; import Counter from './Counter' import { withRouter } from 'react-router-dom'; import SessionMetaList from './SessionMetaList'; +import PlayLink from './PlayLink'; import ErrorBars from './ErrorBars'; import { assist as assistRoute, liveSession, sessions as sessionsRoute, isRoute } from "App/routes"; import { capitalize } from 'App/utils'; @@ -76,7 +77,7 @@ export default class SessionItem extends React.PureComponent { }); return ( -
+
@@ -144,9 +145,11 @@ export default class SessionItem extends React.PureComponent { )}
)} - - - +
diff --git a/frontend/app/components/shared/SessionItem/sessionItem.css b/frontend/app/components/shared/SessionItem/sessionItem.css index 4b042b160..9f7e03d37 100644 --- a/frontend/app/components/shared/SessionItem/sessionItem.css +++ b/frontend/app/components/shared/SessionItem/sessionItem.css @@ -1,5 +1,8 @@ +@import 'mixins.css'; .sessionItem { + background-color: #fff; + @mixin defaultHover; user-select: none; border-radius: 3px; border: solid thin #EEEEEE; diff --git a/frontend/app/components/ui/TextEllipsis/TextEllipsis.js b/frontend/app/components/ui/TextEllipsis/TextEllipsis.js index a6d3e6abc..0161eef6f 100644 --- a/frontend/app/components/ui/TextEllipsis/TextEllipsis.js +++ b/frontend/app/components/ui/TextEllipsis/TextEllipsis.js @@ -1,7 +1,42 @@ +import { useState, useRef, useEffect, forwardRef } from 'react'; import cn from 'classnames'; import { Popup } from 'UI'; import styles from './textEllipsis.css'; +/** calculates text width in pixels ++ * by creating a hidden element with t ++ * ext and counting its width ++ * @param text String - text string ++ * @param fontProp String - font properties ++ * @returns width number ++ */ +function findTextWidth(text, fontProp) { + const tag = document.createElement('div') + + tag.style.position = 'absolute' + tag.style.left = '-99in' + tag.style.whiteSpace = 'nowrap' + tag.style.font = fontProp + tag.innerHTML = text + + document.body.appendChild(tag) + const result = tag.clientWidth + document.body.removeChild(tag) + + return result; +} + +const Trigger = forwardRef(({ textOrChildren, maxWidth, style, className, ...rest }, ref) => ( +
+ { textOrChildren } +
+)) + const TextEllipsis = ({ text, hintText = text, @@ -14,23 +49,51 @@ const TextEllipsis = ({ hintProps={}, ...props }) => { + const [showPopup, setShowPopup] = useState(false) + const textRef = useRef(null); + const textOrChildren = text || children; - const trigger = ( -
- { textOrChildren } -
- ); - if (noHint) return trigger; + + const popupId = (Math.random() + 1).toString(36).substring(7); + + useEffect(() => { + const element = textRef.current; + + const fontSize = window.getComputedStyle(element, null).getPropertyValue('font-size'); + + const textWidth = findTextWidth(element.innerText, fontSize) + console.log(textWidth, element.clientWidth) + if (textWidth > element.clientWidth) setShowPopup(true) + else setShowPopup(false) + }, [textRef.current]) + + if (noHint || !showPopup) return ( + + ) + return ( { hintText || textOrChildren }
} - { ...popupProps } - /> + trigger={ + + } + content={
{ hintText || textOrChildren }
} + { ...popupProps } + /> ); }; diff --git a/frontend/app/components/ui/TimezoneDropdown/TimezoneDropdown.js b/frontend/app/components/ui/TimezoneDropdown/TimezoneDropdown.js index bafebfa76..2b7b8834e 100644 --- a/frontend/app/components/ui/TimezoneDropdown/TimezoneDropdown.js +++ b/frontend/app/components/ui/TimezoneDropdown/TimezoneDropdown.js @@ -5,8 +5,13 @@ import stl from './timezoneDropdown.css'; import { connect } from 'react-redux'; import { setTimezone } from 'Duck/sessions'; +const localMachineFormat = new Date().toString().match(/([A-Z]+[\+-][0-9]+)/)[1] +const middlePoint = localMachineFormat.length - 2 +const readableLocalTimezone = + `${localMachineFormat.substring(0, 3)} ${localMachineFormat.substring(3, middlePoint)}:${localMachineFormat.substring(middlePoint)}` + const timezoneOptions = { - 'local': new Date().toString().match(/([A-Z]+[\+-][0-9]+)/)[1], + 'local': readableLocalTimezone, 'UTC': 'UTC' }; diff --git a/frontend/app/svg/icons/play-hover.svg b/frontend/app/svg/icons/play-hover.svg new file mode 100644 index 000000000..4939d51d9 --- /dev/null +++ b/frontend/app/svg/icons/play-hover.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + +