diff --git a/package.json b/package.json index 76c16c65..239a6a6c 100644 --- a/package.json +++ b/package.json @@ -107,7 +107,7 @@ "concurrently": "^7.0.0", "cross-env": "^7.0.0", "css-loader": "^3.4.2", - "electron": "8.0.1", + "electron": "8.5.5", "electron-builder": "22.3", "electron-react-devtools": "^0.5.3", "electron-reloader": "^1.2.1", @@ -158,10 +158,10 @@ "ensure-error": "^2.0.0", "formik": "^2.1.4", "got": "^11.8.2", + "javascript-time-ago": "^2.3.13", "lodash": "^4.17.15", "mdi-react": "^6.7.0", "moment": "^2.24.0", - "moment-duration-format": "^2.3.2", "overmind": "^28.0.1", "overmind-react": "^29.0.1", "prop-types": "^15.7.2", @@ -176,6 +176,7 @@ "react-select": "^2.4.1", "react-simple-timefield": "^3.2.5", "react-tabs": "^3.1.0", + "react-time-ago": "^7.1.9", "react-toastify": "^5.5.0", "redux": "^4.0.5", "redux-thunk": "^2.3.0", diff --git a/render/components/ButtonGroup.tsx b/render/components/ButtonGroup.tsx new file mode 100644 index 00000000..4bc596c2 --- /dev/null +++ b/render/components/ButtonGroup.tsx @@ -0,0 +1,44 @@ +import React, { ReactNode } from 'react'; +import { css } from '@emotion/react'; +import { useTheme } from 'styled-components'; +import { theme as Theme } from '../theme'; +import { Flex } from './Flex'; + +const styles = { + buttonContainer: css` + & > button:first-child { + border-radius: 3px 0px 0px 3px; + border-right: none; + } + & > button:not(:first-child) { + border-radius: 0px; + border-right: none; + border-left: none; + } + `, + label: (theme: typeof Theme) => css` + display: flex; + align-items: center; + margin: 0; + border-radius: 0px 3px 3px 0px; + border: 2px solid ${theme.main}; + border-left: 2px solid ${theme.mainLight}; + padding: 0.4rem 0.6rem; + ` +}; + +type ButtonGroupProps = { + children: ReactNode; + text?: string; +} + +export const ButtonGroup = ({ children, text }: ButtonGroupProps) => { + const theme = useTheme() as typeof Theme; + + return ( + + {children} + {text && (

{text}

)} + + ); +}; diff --git a/render/components/Date.tsx b/render/components/Date.tsx deleted file mode 100644 index 8f3df6c3..00000000 --- a/render/components/Date.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import React from 'react'; -import { css, keyframes } from '@emotion/react'; -import moment from 'moment'; - -const verticalSlideFadeOut = keyframes` - 0%: { - transform: translateY(0px); - opacity: 1; - } - - 100% { - transform: translateY(-30px); - opacity: 0; - } -`; - -const fadeIn = keyframes` - 0%: { - opacity: 0; - } - - 100% { - opacity: 1; - } -`; - -const styles = { - wrapper: css` - position: relative; - display: inline-grid; - grid-template-rows: 1fr; - `, - wrapperAnimated: css` - &:focus > span:first-child, - &:hover > span:first-child { - animation: ${verticalSlideFadeOut} 0.5s ease forwards; - } - - &:focus > span:first-child, - &:hover > span:last-child { - animation: ${fadeIn} 0.5s ease forwards; - } - `, - span: css` - float: left; - grid-row: 1; - grid-column: 1; - `, - formattedDate: css` - opacity: 0; - display: none; - `, - formattedDateAnimated: css` - display: 'inherit'; - ` -}; - -type DateComponentProps = { - date?: string; - className?: string; -}; - -const DateComponent = ({ date, className }: DateComponentProps) => { - if (!date) { - return null; - } - - const daysAgo = moment() - .endOf('day') - .diff(moment(date).endOf('day'), 'days'); - // eslint-disable-next-line - const precision = daysAgo === 0 ? 'today' : daysAgo > 1 ? `${daysAgo} days ago` : 'yesterday'; - const shouldBeAnimated = daysAgo >= 0 && daysAgo <= 30; - const displayedValue = shouldBeAnimated ? precision : moment(date).format('MMM DD YYYY'); - return ( - - - {displayedValue} - - - {moment(date).format('MMM DD YYYY')} - - - ); -}; - -export { DateComponent }; diff --git a/render/components/Dropdown.tsx b/render/components/Dropdown.tsx index 86fc9e4b..e1633bfb 100644 --- a/render/components/Dropdown.tsx +++ b/render/components/Dropdown.tsx @@ -13,6 +13,7 @@ import React, { } from 'react'; import { css } from '@emotion/react'; import { useTheme } from 'styled-components'; +import ReactFocusLock from 'react-focus-lock'; import { theme as Theme } from '../theme'; type DropdownProps = { @@ -71,42 +72,46 @@ const Dropdown = ({ className, children, getDropdownToggleElement }: DropdownPro >
{Toggle}
- + ); diff --git a/render/components/IssueDetailsPage/CommentsSection.tsx b/render/components/IssueDetailsPage/CommentsSection.tsx index 48968d18..54cc25cb 100644 --- a/render/components/IssueDetailsPage/CommentsSection.tsx +++ b/render/components/IssueDetailsPage/CommentsSection.tsx @@ -4,9 +4,9 @@ import { css } from '@emotion/react'; import { remote } from 'electron'; import { useTheme } from 'styled-components'; +import ReactTimeAgo from 'react-time-ago'; import { MarkdownEditor, MarkdownText } from '../MarkdownEditor'; import { Link } from '../Link'; -import { DateComponent } from '../Date'; import { useOvermindActions, useOvermindState } from '../../store'; import { theme as Theme } from '../../theme'; import type { Issue } from '../../../types'; @@ -109,7 +109,7 @@ const CommentsSection = ({ issueId }: CommentsSectionProps) => {

{entry.user.name}

- + diff --git a/render/components/Navbar.tsx b/render/components/Navbar.tsx index e06a9077..99e920a2 100644 --- a/render/components/Navbar.tsx +++ b/render/components/Navbar.tsx @@ -30,6 +30,14 @@ const styles = { `, icon: css` vertical-align: middle; + `, + title: css` + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + `, + titleContainer: css` + overflow: hidden; ` }; @@ -74,11 +82,11 @@ const Navbar = () => { return (