Skip to content

Commit bb9b53e

Browse files
ram-g-athreyaram-g-athreya
committed
About Section
1 parent 66e9b1b commit bb9b53e

File tree

7 files changed

+145
-4
lines changed

7 files changed

+145
-4
lines changed

‎app/src/js/components/chat/About.jsx

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import React from 'react';
2+
import Modal from 'react-modal';
3+
4+
class About extends React.Component {
5+
getUrlParam(name) {
6+
return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(name).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
7+
}
8+
9+
constructor(props) {
10+
super(props);
11+
12+
this.onCloseClick = this.onCloseClick.bind(this);
13+
}
14+
15+
onCloseClick(event) {
16+
event.preventDefault();
17+
if(this.props.hide) {
18+
this.props.hide();
19+
}
20+
}
21+
22+
render() {
23+
return (
24+
<div>
25+
<Modal
26+
isOpen={this.props.isOpen}
27+
contentLabel="About Modal"
28+
style={{content: {border: 'none', background: 'none', top: 20, left: 20, right: 20, bottom: 20, zIndex: 10}}}>
29+
30+
<div className="card feedback-container slideDown">
31+
<form>
32+
<fieldset>
33+
<legend>About</legend>
34+
35+
<h5>DBpedia Projects</h5>
36+
<ol>
37+
<li>AKSW Genesis</li>
38+
<li>QANARY (WD Aqua)</li>
39+
<li>DBpedia Lookup</li>
40+
<li>DBpedia Spotlight</li>
41+
</ol>
42+
43+
<h5>Chat Libraries</h5>
44+
<ol>
45+
<li>RiveScript</li>
46+
<li>Eliza</li>
47+
</ol>
48+
49+
<h5>Platform Libraries</h5>
50+
<ol>
51+
<li>Messenger4j</li>
52+
<li>JSlack</li>
53+
</ol>
54+
55+
<h5>External APIs</h5>
56+
<ol>
57+
<li>Wolfram Alpha</li>
58+
<li>Nominatim API</li>
59+
<li>TMDB API</li>
60+
</ol>
61+
62+
<h5>General Libraries</h5>
63+
<ol>
64+
<li>Apache Jena</li>
65+
<li>JLanguage Tool</li>
66+
<li>Jackson</li>
67+
<li>GSON</li>
68+
<li>jUnit</li>
69+
<li>Google jUnit Toolbox</li>
70+
</ol>
71+
72+
<h5>Front Libraries/Frameworks</h5>
73+
<ol>
74+
<li>React.js</li>
75+
<li>Twitter Bootstrap</li>
76+
<li>Bootstrap Material Design</li>
77+
<li>LESS</li>
78+
</ol>
79+
<h5>Backend Libraries/Frameworks</h5>
80+
<ol>
81+
<li>Spring</li>
82+
<li>Cloudant</li>
83+
</ol>
84+
85+
<div className="form-group">
86+
<button onClick={this.onCloseClick} className="btn btn-raised btn-primary">Close</button>
87+
</div>
88+
</fieldset>
89+
90+
</form>
91+
</div>
92+
</Modal>
93+
</div>
94+
)
95+
}
96+
}
97+
98+
About.defaultProps = {
99+
100+
};
101+
export default About;

‎app/src/js/components/chat/ChatApp.jsx

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,23 @@ import Messages from './Messages.jsx';
44
import ChatInput from './ChatInput.jsx';
55
import * as Constants from '../Constants.jsx';
66
import Feedback from './Feedback.jsx';
7+
import About from './About.jsx';
78

89
class ChatApp extends React.Component {
910

1011
constructor(props) {
1112
super();
12-
this.state = {messages: [], loading: false, showFeedback: false, overlay: false};
13+
this.state = {messages: [], loading: false, showFeedback: false, overlay: false, showAbout: false};
1314
this.uuid = this.getUuid();
1415

1516
this.sendHandler = this.sendHandler.bind(this);
1617
this.showStart = this.showStart.bind(this);
18+
1719
this.showFeedbackModal = this.showFeedbackModal.bind(this);
1820
this.hideFeedbackModal = this.hideFeedbackModal.bind(this);
21+
this.showAboutModal = this.showAboutModal.bind(this);
22+
this.hideAboutModal = this.hideAboutModal.bind(this);
23+
1924
this.showOverlay = this.showOverlay.bind(this);
2025
this.hideOverlay = this.hideOverlay.bind(this);
2126
}
@@ -130,6 +135,14 @@ class ChatApp extends React.Component {
130135
this.setState({showFeedback: false});
131136
}
132137

138+
showAboutModal() {
139+
this.setState({showAbout: true});
140+
}
141+
142+
hideAboutModal() {
143+
this.setState({showAbout: false});
144+
}
145+
133146
showOverlay() {
134147
this.setState({overlay: true});
135148
}
@@ -166,12 +179,17 @@ class ChatApp extends React.Component {
166179
onSend={this.sendHandler}
167180
showStart={this.showStart}
168181
showFeedback={this.showFeedbackModal}
182+
showAbout={this.showAboutModal}
169183
showOverlay={this.showOverlay}
170184
hideOverlay={this.hideOverlay} />
171185
<Feedback
172186
isOpen={this.state.showFeedback}
173187
hide={this.hideFeedbackModal}
174188
userId={this.getUuid()} />
189+
<About
190+
isOpen={this.state.showAbout}
191+
hide={this.hideAboutModal} />
192+
175193
{this.state.overlay && (
176194
<div className="overlay"></div>
177195
)}

‎app/src/js/components/chat/ChatInput.jsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,13 @@ class ChatInput extends React.Component {
7070
switch(type) {
7171
case 'feedback':
7272
this.props.showFeedback();
73-
break;
73+
break;
74+
case 'about':
75+
this.props.showAbout();
76+
break;
7477
case 'start':
7578
this.props.showStart(true);
76-
break;
79+
break;
7780
}
7881
this.toggleOverlay(false);
7982
}
@@ -105,6 +108,12 @@ class ChatInput extends React.Component {
105108
</div>
106109
<span>Feedback</span>
107110
</a>
111+
<a onClick={(event) => this.onFlyoutOptionClick(event, 'about')} className="button">
112+
<div className={`${moreButtonOptionClass} btn-success`}>
113+
<img src="/images/icon-about-32.png" />
114+
</div>
115+
<span>About</span>
116+
</a>
108117
<a className={moreButtonClass} onClick={this.toggleFlyout}>
109118
<img src="/images/icon-plus-32.png" />
110119
</a>

‎app/src/js/components/chat/Messages.jsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ class Messages extends React.Component {
1717
}
1818
}
1919

20+
scrollToMessage() {
21+
22+
}
23+
2024
render() {
2125
const messages = this.props.messages.map((message, i) => {
2226
return (

‎app/src/less/config/base.less

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,3 +55,7 @@ form {
5555
.vertical-align-middle {
5656
vertical-align: middle !important;
5757
}
58+
59+
h1,h2,h3,h4,h5,h6 {
60+
color: @brand-primary;
61+
}

‎app/src/less/modules/chat-input.less

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
input {
1212
margin-right: 10px;
13-
z-index: 1; // Added so that input would be above the more button container. This is required since the container is absolute positioned
13+
//z-index: 1; // Added so that input would be above the more button container. This is required since the container is absolute positioned
1414
transition: 0.25s;
1515
-webkit-transition: 0.25s;
1616
}
@@ -71,6 +71,11 @@
7171
}
7272

7373
&:nth-last-of-type(3) {
74+
transition-delay: 150ms;
75+
-webkit-transition-delay: 150ms;
76+
}
77+
78+
&:nth-last-of-type(4) {
7479
transition-delay: 200ms;
7580
-webkit-transition-delay: 200ms;
7681
}

‎src/main/resources/static/images/icon-about-32.png

724 Bytes
Loading

0 commit comments

Comments
 (0)