aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src/bug/Message.js
blob: a4e3eeb0e92da7636c8242113ad40f0a85db0e09 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import gql from 'graphql-tag';
import React from 'react';
import Author from '../Author';
import Date from '../Date';

const styles = theme => ({
  header: {
    ...theme.typography.body2,
    padding: '3px 3px 3px 6px',
    backgroundColor: '#f1f8ff',
    border: '1px solid #d1d5da',
    borderTopLeftRadius: 3,
    borderTopRightRadius: 3,
  },
  message: {
    borderLeft: '1px solid #d1d5da',
    borderRight: '1px solid #d1d5da',
    borderBottom: '1px solid #d1d5da',
    borderBottomLeftRadius: 3,
    borderBottomRightRadius: 3,
    backgroundColor: '#fff',
    minHeight: 50,
    padding: 5,
    whiteSpace: 'pre-wrap',
  },
});

const Message = ({ op, classes }) => (
  <div>
    <div className={classes.header}>
      <Author className={classes.author} author={op.author} bold />
      <span> commented </span>
      <Date date={op.date} />
    </div>
    <div className={classes.message}>
      <Typography>{op.message}</Typography>
    </div>
  </div>
);

Message.createFragment = gql`
  fragment Create on Operation {
    ... on CreateOperation {
      date
      author {
        name
        email
        displayName
      }
      message
    }
  }
`;

Message.commentFragment = gql`
  fragment Comment on Operation {
    ... on AddCommentOperation {
      date
      author {
        name
        email
        displayName
      }
      message
    }
  }
`;

export default withStyles(styles)(Message);