wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-28 11:27:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

[CORL 581] toggleable timestamp (#2561)

Browse Source 
* toggle between relative and absolute timestamps

* make one common timestamp component

* remove unused timestamp component from /admin
This commit is contained in:
Tessa Thornton
2019-09-17 17:11:52 -04:00
committed by GitHub
parent 24a27ca958
commit 867f0993cc
43 changed files with 1175 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/admin/components/ModerateCard/ModerateCard.css
+4
View File
@@ -156,3 +156,7 @@
.deleted {
background: var(--palette-grey-lightest);
}
.timestamp {
color: var(--palette-grey-lighter);
}
src/core/client/admin/components/ModerateCard/ModerateCard.tsx
+2 -2
View File
@@ -9,6 +9,7 @@ import {
Flex,
HorizontalGutter,
TextLink,
Timestamp,
Typography,
} from "coral-ui/components";
@@ -18,7 +19,6 @@ import FeatureButton from "./FeatureButton";
import InReplyTo from "./InReplyTo";
import MarkersContainer from "./MarkersContainer";
import RejectButton from "./RejectButton";
import Timestamp from "./Timestamp";
import Username from "./Username";
import styles from "./ModerateCard.css";
@@ -130,7 +130,7 @@ const ModerateCard: FunctionComponent<Props> = ({
<Username>{username}</Username>
</BaseButton>
)}
<Timestamp>{createdAt}</Timestamp>
<Timestamp className={styles.timestamp}>{createdAt}</Timestamp>
<FeatureButton
featured={featured}
onClick={onFeature}
src/core/client/admin/components/ModerateCard/Timestamp.css
-4
View File
@@ -1,4 +0,0 @@
.root {
composes: timestamp from "coral-ui/shared/typography.css";
color: var(--palette-grey-lighter);
}
src/core/client/admin/components/ModerateCard/Timestamp.spec.tsx
-15
View File
@@ -1,15 +0,0 @@
import React from "react";
import { createRenderer } from "react-test-renderer/shallow";
import { PropTypesOf } from "coral-framework/types";
import Timestamp from "./Timestamp";
it("renders correctly", () => {
const props: PropTypesOf<typeof Timestamp> = {
children: "1995-12-17T03:24:00.000Z",
};
const renderer = createRenderer();
renderer.render(<Timestamp {...props} />);
expect(renderer.getRenderOutput()).toMatchSnapshot();
});
src/core/client/admin/components/ModerateCard/Timestamp.tsx
-15
View File
@@ -1,15 +0,0 @@
import React, { FunctionComponent } from "react";
import { RelativeTime } from "coral-ui/components";
import styles from "./Timestamp.css";
export interface TimestampProps {
children: string;
}
const Timestamp: FunctionComponent<TimestampProps> = props => (
<RelativeTime className={styles.root} date={props.children} />
);
export default Timestamp;
src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap
+28 -7
View File
@@ -23,7 +23,10 @@ exports[`renders approved correctly 1`] = `
Theon
</Username>
</ForwardRef(forwardRef)>
<Timestamp>
<Timestamp
className="ModerateCard-timestamp"
toggleAbsolute={true}
>
2018-11-29T16:01:51.897Z
</Timestamp>
<FeatureButton
@@ -135,7 +138,10 @@ exports[`renders correctly 1`] = `
Theon
</Username>
</ForwardRef(forwardRef)>
<Timestamp>
<Timestamp
className="ModerateCard-timestamp"
toggleAbsolute={true}
>
2018-11-29T16:01:51.897Z
</Timestamp>
<FeatureButton
@@ -247,7 +253,10 @@ exports[`renders dangling correctly 1`] = `
Theon
</Username>
</ForwardRef(forwardRef)>
<Timestamp>
<Timestamp
className="ModerateCard-timestamp"
toggleAbsolute={true}
>
2018-11-29T16:01:51.897Z
</Timestamp>
<FeatureButton
@@ -359,7 +368,10 @@ exports[`renders rejected correctly 1`] = `
Theon
</Username>
</ForwardRef(forwardRef)>
<Timestamp>
<Timestamp
className="ModerateCard-timestamp"
toggleAbsolute={true}
>
2018-11-29T16:01:51.897Z
</Timestamp>
<FeatureButton
@@ -471,7 +483,10 @@ exports[`renders reply correctly 1`] = `
Theon
</Username>
</ForwardRef(forwardRef)>
<Timestamp>
<Timestamp
className="ModerateCard-timestamp"
toggleAbsolute={true}
>
2018-11-29T16:01:51.897Z
</Timestamp>
<FeatureButton
@@ -593,7 +608,10 @@ exports[`renders story info 1`] = `
Theon
</Username>
</ForwardRef(forwardRef)>
<Timestamp>
<Timestamp
className="ModerateCard-timestamp"
toggleAbsolute={true}
>
2018-11-29T16:01:51.897Z
</Timestamp>
<FeatureButton
@@ -734,7 +752,10 @@ exports[`renders tombstoned when comment is deleted 1`] = `
Theon
</Username>
</ForwardRef(forwardRef)>
<Timestamp>
<Timestamp
className="ModerateCard-timestamp"
toggleAbsolute={true}
>
2018-11-29T16:01:51.897Z
</Timestamp>
<FeatureButton
src/core/client/admin/components/ModerateCard/__snapshots__/Timestamp.spec.tsx.snap
-8
View File
@@ -1,8 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<ForwardRef(forwardRef)
className="Timestamp-root"
date="1995-12-17T03:24:00.000Z"
/>
`;
src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap
+119 -42
View File
@@ -46,13 +46,24 @@ exports[`approves comment in reported queue: dangling 1`] = `
Isabelle
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -274,13 +285,24 @@ exports[`rejects comment in reported queue: dangling 1`] = `
Isabelle
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -499,13 +521,24 @@ exports[`renders reported queue with comments 1`] = `
Isabelle
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -711,13 +744,24 @@ exports[`renders reported queue with comments 1`] = `
Ngoc
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -939,13 +983,24 @@ exports[`renders reported queue with comments 2`] = `
Isabelle
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -1151,13 +1206,24 @@ exports[`renders reported queue with comments 2`] = `
Ngoc
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -1369,13 +1435,24 @@ exports[`renders reported queue with comments and load more 1`] = `
Max
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap
+68 -24
View File
@@ -46,13 +46,24 @@ exports[`approves comment in rejected queue: dangling 1`] = `
Isabelle
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -271,13 +282,24 @@ exports[`renders rejected queue with comments 1`] = `
Isabelle
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -483,13 +505,24 @@ exports[`renders rejected queue with comments 1`] = `
Ngoc
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -701,13 +734,24 @@ exports[`renders rejected queue with comments and load more 1`] = `
Max
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
src/core/client/admin/test/moderate/__snapshots__/singleComment.spec.tsx.snap
+51 -18
View File
@@ -33,13 +33,24 @@ exports[`approves single comment 1`] = `
Isabelle
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -227,13 +238,24 @@ exports[`rejects single comment 1`] = `
Isabelle
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}
@@ -456,13 +478,24 @@ exports[`renders single comment view 1`] = `
Isabelle
</span>
</button>
<time
className="RelativeTime-root Timestamp-root"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
<button
className="BaseButton-root Timestamp-root"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
type="button"
>
2018-07-06T18:24:00.000Z
</time>
<time
className="RelativeTime-root Timestamp-text ModerateCard-timestamp"
dateTime="2018-07-06T18:24:00.000Z"
title="2018-07-06T18:24:00.000Z"
>
2018-07-06T18:24:00.000Z
</time>
</button>
<button
className="BaseButton-root FeatureButton-root"
disabled={false}