Skip to content

Commit

Permalink
Merge pull request #26 from intern0t/parse-links-in-messages
Browse files Browse the repository at this point in the history 
Parse links in messages .. #25
  • Loading branch information
@intern0t
intern0t committed Jan 13, 2019
2 parents e3d325c + 153bf38 commit a408847
Show file tree
Hide file tree
Showing 15 changed files with 111 additions and 91 deletions.
16 changes: 16 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"private": true,
"dependencies": {
"crypto-js": "^3.1.9-1",
"linkifyjs": "^2.1.7",
"moment": "^2.23.0",
"react": "^16.7.0",
"react-clipboard.js": "^2.0.2",
Expand Down
12 changes: 10 additions & 2 deletions src/components/Brightbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,9 @@ class Brightbar extends Component {
mailTabDisplayed &&
mailTabDisplayed === true
? "block"
: "none"
: "none",
boxShadow:
"box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.75)"
}}
>
<ConversationSearch
Expand Down Expand Up @@ -206,9 +208,10 @@ const ConversationSearch = ({ toggle, onChange, clearFilter, filterBy }) => {
onKeyDown={e => clearFilter(e)}
/>
<Icon
icon={"fas fa-plus-square"}
icon={"far fa-plus-square"}
color={"#99a8b4"}
title={"Add or join a secure room."}
style={{ cursor: "pointer", marginLeft: "10px" }}
onClick={toggle}
/>
</div>
Expand Down Expand Up @@ -236,6 +239,11 @@ const ConversationEntry = ({ room, messages, activeRoomID, nickname }) => {
? "brightbar-conversations-entry active-conversation-entry"
: "brightbar-conversations-entry"
}
style={{
boxShadow: currentlyActive
? "#303841 0px 0px 5px 1px inset"
: ""
}}
>
<div className="brightbar-conversations-entry-wrapper">
<Icon
Expand Down
13 changes: 12 additions & 1 deletion src/components/Message.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react";
import moment from "moment";
import UserAvatar from "./UserAvatar";
import Linkify from "linkifyjs/react";

const Message = ({ me, timestamp, message, from }) => {
const yourMessages = me === from;
Expand All @@ -22,7 +23,17 @@ const Message = ({ me, timestamp, message, from }) => {
yourMessages ? "message-you" : "message-from"
}`}
>
{message}
<Linkify
options={{
attributes: {
target: {
url: "_blank"
}
}
}}
>
{message}
</Linkify>
</span>
<span
className="timestamp"
Expand Down
48 changes: 8 additions & 40 deletions src/components/Sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,6 @@ class Sidebar extends Component {
{({ currentPage, toggleMailTab }) => (
<div className="sidebar">
<ul className="sidebar-section">
<li>
<Link
to="/conversation"
title="Conversation"
className={
(currentPage && currentPage === "/") ||
currentPage === "/conversation" ||
currentPage.includes("/veiled/")
? "sidebar-section-active"
: ""
}
>
<Icon icon="fas fa-home" />
</Link>
</li>
<li>
<Link
to="#"
Expand All @@ -39,7 +24,7 @@ class Sidebar extends Component {
}
>
<Tip updated={true} color={"#FF4E00"} />
<Icon icon="fas fa-comments" />
<Icon icon="far fa-comments" />
</Link>
</li>
<li>
Expand All @@ -53,7 +38,7 @@ class Sidebar extends Component {
: ""
}
>
<Icon icon="fas fa-cogs" />
<Icon icon="far fa-save" />
</Link>
</li>
<li>
Expand All @@ -68,7 +53,7 @@ class Sidebar extends Component {
}
>
<Icon
icon={`fas fa-envelope${
icon={`far fa-envelope${
currentPage &&
currentPage === "/contact"
? "-open"
Expand All @@ -79,29 +64,12 @@ class Sidebar extends Component {
</li>
<li>
<Link
to="/bugs"
title="Report bugs"
className={
currentPage && currentPage === "/bugs"
? "sidebar-section-active"
: ""
}
>
<Icon icon="fas fa-bug" />
</Link>
</li>
<li>
<Link
to="/contribute"
title="Contribute"
className={
currentPage &&
currentPage === "/contribute"
? "sidebar-section-active"
: ""
}
to="#"
title="Toggle modes"
>
<Icon icon={`fas fa-code-branch`} />
<Icon
icon={`far fa-lightbulb`}
/>
</Link>
</li>
</ul>
Expand Down
9 changes: 0 additions & 9 deletions src/components/pages/Archive.js
View file

This file was deleted.

9 changes: 0 additions & 9 deletions src/components/pages/Bugs.js
View file

This file was deleted.

24 changes: 24 additions & 0 deletions src/components/pages/Contact.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React, { Component } from "react";

class Contact extends Component {
render() {
return (
<div className="frightbar">
<iframe
src="https://docs.google.com/forms/d/e/1FAIpQLScT0dWjUGYBOoSWU1OovHAXTJ0lQFVdevqGjpLNGiZ7SnJOTw/viewform?embedded=true"
width="auto"
height="100%"
frameBorder="0"
marginHeight="0"
marginWidth="0"
style={{ margin: "20px 0"}}
title={"Project Veiled Contact Form"}
>
Loading...
</iframe>
</div>
);
}
}

export default Contact;
18 changes: 17 additions & 1 deletion src/components/pages/Conversation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Clipboard from "react-clipboard.js";
import { ConversationConsumer } from "../../contexts/ConversationProvider";
import { Link } from "react-router-dom";
import aes from "crypto-js/aes";
import Linkify from 'linkifyjs/react'

class Conversation extends Component {
state = {
Expand Down Expand Up @@ -565,7 +566,22 @@ const Notification = ({ rooms, messages, nickname }) => {
<div>
{
<span>
{<i>{`"${latestMessage[0].message}"`}</i>}
<Linkify
options={{
attributes: {
className: 'linkified',
target: {
url: "_blank"
}
}
}}
>
{
<i>{`"${
latestMessage[0].message
}"`}</i>
}
</Linkify>
{` - by `}
<b>{latestMessage[0].nickname}</b>
{` in room `}
Expand Down
25 changes: 3 additions & 22 deletions src/contexts/Routes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,13 @@ import Brightbar from "../components/Brightbar";
import MainPage from "../components/pages/MainPage";
import Conversation from "../components/pages/Conversation";
import Settings from "../components/pages/Settings";
import Bugs from "../components/pages/Bugs";
import Archive from "../components/pages/Archive";
import { AppProvider } from "../contexts/AppProvider";
import { ConversationProvider } from "../contexts/ConversationProvider";
import { Switch, Route } from "react-router-dom";
import Footer from "../components/Footer";
import PageWrapper from "../components/pages/PageWrapper";
import SocketWrapper from "../containers/SocketWrapper";
import Contact from "../components/pages/Contact";

const ApplicationRouter = () => {
return (
Expand All @@ -29,24 +28,6 @@ const ApplicationRouter = () => {
return <Conversation {...props} />;
}}
/>
<Route
exact
path="/conversation"
component={props => (
<PageWrapper {...props}>
<MainPage />
</PageWrapper>
)}
/>
<Route
exact
path="/archive"
component={props => (
<PageWrapper {...props}>
<Archive {...props} />
</PageWrapper>
)}
/>
<Route
exact
path="/settings"
Expand All @@ -58,10 +39,10 @@ const ApplicationRouter = () => {
/>
<Route
exact
path="/bugs"
path="/contact"
component={props => (
<PageWrapper {...props}>
<Bugs {...props} />
<Contact {...props} />
</PageWrapper>
)}
/>
Expand Down
1 change: 1 addition & 0 deletions src/styles/_includes/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

$TwilightBlue: #fcffff;
$AquaHaze: #f2f7f7;
$LinkWater: #F0F5FB;
$GullGray: #99a8b4;
$BrightGray: #363e47;
$OuterSpace: #303841;
Expand Down
11 changes: 10 additions & 1 deletion src/styles/_includes/_components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,8 +127,9 @@
max-width: 400px;
min-height: auto;
background: $TwilightBlue;
@include BorderRadius(3px, all);
padding: 30px;
@include BorderRadius(3px, all);
@include Box-Shadow(2px 1px 5px 0px rgba($Black, 0.75));

div {
span {
Expand Down Expand Up @@ -198,3 +199,11 @@
}
}
}

.linkified {
color: $Shakespeare;

&:visited{
color: $BrightGray;
}
}
2 changes: 1 addition & 1 deletion src/styles/veiled.min.css
View file

Large diffs are not rendered by default.

0 comments on commit a408847

Please sign in to comment.