Commit be32e898 authored by Maxime Chaillet's avatar Maxime Chaillet

handle event collapsing or expension. The header content in the collpased view...

handle event collapsing or expension. The header content in the collpased view can be different from the header content in the expanded view
parent c93b4f17
import React from 'react'
import { eventCategoryIcon, eventDate } from './helper.js'
import { Row, Col, Panel } from 'react-bootstrap';
/**
* Represents a collapsed event
*/
class CollapsedEvent extends React.Component {
render() {
return (<Panel bsClass='collapsedEventPanel'>
<Panel.Heading bsClass='collapsedEventPanel'>
<Row>
<Col xs={1}>
{eventDate(this.props.event.creationDate)}
</Col>
<Col xs={1}>
{eventCategoryIcon(this.props.event.category)}
</Col>
<Col xs={8}>
{this.props.event.title || "User comment"}
</Col>
<Col xs={2}>
{this.props.event.tag[0]}
</Col>
</Row>
</Panel.Heading>
</Panel>)
}
}
export default CollapsedEvent
\ No newline at end of file
import React from 'react'
import { eventCategoryIcon, eventDate } from './helper.js'
import { Row, Col, Panel } from 'react-bootstrap';
import _ from 'lodash';
import MyEditor from './Editor/MyEditor';
/**
* Represents a collapsed event
*/
class ExpandedEvent extends React.Component {
/** Choose the proper viewer and display the event using it.
* @param {Array} content the content of the event to be displayed
*/
displayContent(content) {
let draftjsContent = _.find(content, function (item) {
return item.format === 'draftjs'
})
if (draftjsContent != undefined) {
return (<div> <MyEditor text={draftjsContent.text} /> </div >)
}
let plainContent = _.find(content, function (item) {
return item.format === 'plain'
})
if (plainContent) {
return (<div> {plainContent.text} </div >)
}
}
render() {
return (<Panel bsClass='expandedEventPanel'>
<Panel.Heading bsClass='expandedEventPanel'>
<Row>
<Col xs={1}>
{eventDate(this.props.event.creationDate)}
</Col>
<Col xs={1}>
{eventCategoryIcon(this.props.event.category)}
</Col>
<Col xs={8}>
{this.props.event.title || "User comment"}
</Col>
<Col xs={2}>
{this.props.event.tag[0]}
</Col>
</Row>
</Panel.Heading>
<Panel.Body bsClass='eventPanel'>
<Row>
<Col xs={12}>
{this.displayContent(this.props.event.content)}
</Col>
</Row>
</Panel.Body>
<Panel.Footer>
Updated by Jamie Roquai
</Panel.Footer>
</Panel>)
}
}
export default ExpandedEvent
\ No newline at end of file
import React from 'react';
import { Grid, Row, Col } from 'react-bootstrap';
import { Grid, Row, Col, Glyphicon, Panel } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import Event from './Event.jsx';
......@@ -11,13 +11,17 @@ import ListMenu from './ListMenu';
import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
//import 'react-vertical-timeline-component/style.min.css';
import '../../event.css';
import TimeLineEvent from './TimeLineEvent'
import CollapsedEvent from './CollapsedEvent'
import ExpandedEvent from './ExpandedEvent'
/**
* The list of the all events
*/
class List extends React.Component {
render() {
const { eventList, investigationId } = this.props;
const sessionId = this.props.sessionId;
......@@ -26,7 +30,14 @@ class List extends React.Component {
return -1 * Moment(o.creationDate).format("x");
}]);
let events = sortedEvents.map((event) => <Event event={event}> </Event>);
//let events = sortedEvents.map((event) => <Event event={event}> </Event>);
let events = sortedEvents.map((event) => {
let collapsedEvent = <CollapsedEvent event={event}> </CollapsedEvent>
let expandedEvent = <ExpandedEvent event={event}> </ExpandedEvent>
return <TimeLineEvent collapsedEvent={collapsedEvent} expandedEvent={expandedEvent} />
});
return (
<div>
......@@ -39,108 +50,6 @@ class List extends React.Component {
</Row>
</Grid>
<div style={{ backgroundColor: 'gray' }}>
<VerticalTimeline>
<VerticalTimelineElement
className="vertical-timeline-element--work"
date="2011 - present"
iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
icon={"./pdfLogo.png"}
position='right'
>
<h3 className="vertical-timeline-element-title">Creative Director</h3>
<h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
<p>
Creative Direction, User Experience, Visual Design, Project Management, Team Leading
</p>
</VerticalTimelineElement>
<VerticalTimelineElement
className="vertical-timeline-element--work"
date="2010 - 2011"
iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
icon={"favicon.ico"}
position='right'
>
<h3 className="vertical-timeline-element-title">Art Director</h3>
<h4 className="vertical-timeline-element-subtitle">San Francisco, CA</h4>
<p>
Creative Direction, User Experience, Visual Design, SEO, Online Marketing
</p>
</VerticalTimelineElement>
<VerticalTimelineElement
className="vertical-timeline-element--work"
date="2008 - 2010"
iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
icon={"favicon.ico"}
position='right'
>
<h3 className="vertical-timeline-element-title">Web Designer</h3>
<h4 className="vertical-timeline-element-subtitle">Los Angeles, CA</h4>
<p>
User Experience, Visual Design
</p>
</VerticalTimelineElement>
<VerticalTimelineElement
className="vertical-timeline-element--work"
date="2006 - 2008"
iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
icon={"favicon.ico"}
position='right'
>
<h3 className="vertical-timeline-element-title">Web Designer</h3>
<h4 className="vertical-timeline-element-subtitle">San Francisco, CA</h4>
<p>
User Experience, Visual Design
</p>
</VerticalTimelineElement>
<VerticalTimelineElement
className="vertical-timeline-element--education"
date="April 2013"
iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
icon={"favicon.ico"}
position='right'
>
<h3 className="vertical-timeline-element-title">Content Marketing for Web, Mobile and Social Media</h3>
<h4 className="vertical-timeline-element-subtitle">Online Course</h4>
<p>
Strategy, Social Media
</p>
</VerticalTimelineElement>
<VerticalTimelineElement
className="vertical-timeline-element--education"
date="November 2012"
iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
icon={"favicon.ico"}
position='right'
>
<h3 className="vertical-timeline-element-title">Agile Development Scrum Master</h3>
<h4 className="vertical-timeline-element-subtitle">Certification</h4>
<p>
Creative Direction, User Experience, Visual Design
</p>
</VerticalTimelineElement>
<VerticalTimelineElement
className="vertical-timeline-element--education"
date="2002 - 2006"
iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
icon={"favicon.ico"}
position='right'
>
<h3 className="vertical-timeline-element-title">Bachelor of Science in Interactive Digital Media Visual Imaging</h3>
<h4 className="vertical-timeline-element-subtitle">Bachelor Degree</h4>
<p>
Creative Direction, Visual Design
</p>
</VerticalTimelineElement>
<VerticalTimelineElement
iconStyle={{ background: 'rgb(16, 204, 82)', color: '#fff' }}
icon={"favicon.ico"}
position='right'
/>
</VerticalTimeline>
</div>
</div>
);
}
......
import React from 'react'
import { Panel } from 'react-bootstrap';
import PropTypes from 'prop-types';
/**
* This class handles an event displayed on a vertical timeline axis. Such an event can be in a collapsed state or expanded state. The visuals in each state is independant.
*/
class TimeLineEvent extends React.Component {
constructor(props) {
super(props)
this.state = {
expanded: true
}
}
render() {
return (
<div>
<Panel id="collapseView" bsClass='timeLineEventCollapsePanel' expanded={!this.state.expanded} onToggle={() => { this.setState({ expanded: true }) }} style={{ marginBottom: '0px', border: '0px' }} >
<Panel.Collapse bsClass='timeLineEventCollapsePanel'>
<Panel.Toggle >
<Panel.Body>
{this.props.collapsedEvent}
</Panel.Body>
</Panel.Toggle>
</Panel.Collapse>
</Panel>
<Panel id="expandedView" expanded={this.state.expanded} onToggle={() => { this.setState({ expanded: false }) }} style={{ marginBottom: '0px', border: '0px' }} >
<Panel.Collapse>
<Panel.Toggle>
<Panel.Body>
{this.props.expandedEvent}
</Panel.Body>
</Panel.Toggle>
</Panel.Collapse>
</Panel>
</div >
)
}
}
TimeLineEvent.propTypes = {
/** the collpased react component which will be displayed in the collapsed view */
collapsedEvent: PropTypes.object.isRequired,
/** the expanded react component which will be displayed in the expanded view */
expandedEvent: PropTypes.object.isRequired,
}
export default TimeLineEvent;
\ No newline at end of file
import React from 'react'
import Moment from 'moment'
/**
* A helper function which return the html element which represents the event category.
* @param {*} category the event category
*/
export function eventCategoryIcon(category) {
if (category === 'comment') {
return (<img src='/comment.png' width='25px' />)
} else if (category === 'commandLine') {
return (<div className=' glyphicon glyphicon-expand padding-top-10' style={{ fontSize: '40px' }}> </div>)
} else if (category === 'error') {
return (<div className=' glyphicon glyphicon-alert padding-top-10' style={{ fontSize: '40px' }}> </div>)
} else if (category === 'file') {
return (<div className=' glyphicon glyphicon-file padding-top-10' style={{ fontSize: '40px' }}> </div>)
}
}
/**
* A helper function which returns the formatted date the event was created
* @param {*} creationDate the event date as provided by the server
*/
export function eventDate(creationDate) {
return (Moment(creationDate).format("HH:mm"))
}
\ No newline at end of file
This diff is collapsed.
......@@ -26,7 +26,7 @@ body {
* overflow: hidden;
* }
* */
.collapse[aria-expanded="false"] {
/* .collapse[aria-expanded="false"] {
display: block;
height: 55px !important;
overflow: hidden;
......@@ -34,7 +34,7 @@ body {
.collapsing[aria-expanded="false"] {
height: 55px !important;
}
} */
.noBorder {
border:0px;
......@@ -134,4 +134,103 @@ border-radius: 2px !important;
/* height: 275px !important; */
padding: 5px !important;
border-radius: 2px !important;
}
\ No newline at end of file
}
.collapsedEventPanel-heading {
padding: 4px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background-image:none;
color: #000000;
background-color: #FFFFFF;
border-color: #ddd;
}
div.collapsedEventPanel-heading:hover {
padding: 4px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background-image:none;
color: #000000;
background-color: #BFC2FF;
border-color: #ddd;
}
.collapsedEventPanel {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
}
.collapsedEventPanel-default {
border-color: #ddd;
}
/* .panel-collapse.in{
-webkit-transition: none;
transition: none;
/*display: none;
} */
.expandedEventPanel-heading {
padding: 4px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background-image:none;
color: #000000;
background-color: #BFC2FF;
border-color: #ddd;
}
.expandedEventPanel {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
}
.expandedEventPanel-default {
border-color: #ddd;
}
.expandedEventPanel-body{
padding: 15px;
color: #000000;
}
.expandedEventPanel-footer {
padding: 4px 15px;
background-color: #BFC2FF;
color:#000000;
border-top: 1px solid #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.timeLineEventCollapsePanel-collapse.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-property: height, visibility;
transition-property: height, visibility;
-webkit-transition-duration: 1.35s;
transition-duration: 0s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.timeLineEventCollapsePanel-body{
padding: 15px;
color: #000000;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment