})
-
+
+
@@ -32,8 +32,8 @@ class LoadingContainer extends Component {
{
return(
-
⚠
This browser has no connection to the Ethereum network. Please use the Chrome/FireFox extension MetaMask, or dedicated Ethereum browsers Mist or Parity.
-
+
+
@@ -46,8 +46,8 @@ class LoadingContainer extends Component {
{
return(
-
🦊
We can't find any Ethereum accounts! Please check and make sure Metamask or you browser are pointed at the correct network and your account is unlocked.
-
+
+
@@ -65,8 +65,8 @@ class LoadingContainer extends Component {
return(
-
Initializing IPFS...
-
+
+
diff --git a/src/containers/ProfileContainer.js b/src/containers/ProfileContainer.js
index 0b37ad1..2a5a62f 100644
--- a/src/containers/ProfileContainer.js
+++ b/src/containers/ProfileContainer.js
@@ -1,5 +1,6 @@
import { drizzleConnect } from 'drizzle-react';
import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import WithBlockchainData from '../components/WithBlockchainData';
@@ -8,6 +9,8 @@ import TopicList from '../components/TopicList';
import PostList from '../components/PostList';
import LoadingSpinner from '../components/LoadingSpinner';
+import '../assets/css/materialTabs.css';
+
class Profile extends Component {
constructor(props, context) {
super(props);
@@ -16,36 +19,38 @@ class Profile extends Component {
this.propsToView = this.propsToView.bind(this);
this.drizzle = context.drizzle;
+ this.underlineBarRef = React.createRef();
+ this.infoSelectorRef = React.createRef();
+ this.topicsSelectorRef = React.createRef();
+ this.postsSelectorRef = React.createRef();
this.state = {
- viewSelected: "topics",
+ viewSelected: "profile-info-tab",
userAddress: this.props.params.address ? this.props.params.address : this.props.user.address
};
}
- handleTabClick(id) {
- this.setState({viewSelected: id});
+ handleTabClick(event) {
+ this.setState({viewSelected: event.target.id});
+ if (event.target.id === "profile-info-tab"){
+ this.underlineBarRef.current.style.left = this.infoSelectorRef.current.offsetLeft + 'px';
+ this.underlineBarRef.current.style.width = ReactDOM.
+ findDOMNode(this.infoSelectorRef.current).getBoundingClientRect().width + 'px';
+ } else if (event.target.id === "profile-topics-tab"){
+ this.underlineBarRef.current.style.left = this.topicsSelectorRef.current.offsetLeft + 'px';
+ this.underlineBarRef.current.style.width = ReactDOM.
+ findDOMNode(this.topicsSelectorRef.current).getBoundingClientRect().width + 'px';
+ } else if (event.target.id === "profile-posts-tab"){
+ this.underlineBarRef.current.style.left = this.postsSelectorRef.current.offsetLeft + 'px';
+ this.underlineBarRef.current.style.width = ReactDOM.
+ findDOMNode(this.postsSelectorRef.current).getBoundingClientRect().width + 'px';
+ }
}
render() {
this.propsToView();
- var selectedTab = this.state.viewSelected === "topics"
- ?(
⚙
Loading dapp...
- {this.topicIDs
- ?
)
- :(
- {this.postIDs
- ?
);
-
- return (
-
-
-
(this.handleTabClick("topics"))} - className={this.state.viewSelected === "topics" ? "profile-tab-selected" : ""}> - Topics -
-(this.handleTabClick("posts"))} - className={this.state.viewSelected === "posts" ? "profile-tab-selected" : ""}> - Posts -
+ />); + var topicsTab = + (
+ {this.topicIDs
+ ?
);
+ var postsTab =
+ (
+ {this.postIDs
+ ?
);
+
+ return (
+
+
+
+
+
);
}
@@ -97,6 +145,10 @@ class Profile extends Component {
}
}
}
+
+ componentDidMount() {
+ this.infoSelectorRef.current.click();
+ }
}
Profile.contextTypes = {
diff --git a/src/containers/SignUpContainer.js b/src/containers/SignUpContainer.js
index 2b9db93..e0ac249 100644
--- a/src/containers/SignUpContainer.js
+++ b/src/containers/SignUpContainer.js
@@ -5,12 +5,12 @@ import UsernameFormContainer from './UsernameFormContainer';
class SignUp extends Component {
render() {
return (
-
+
- {selectedTab}
+ {infoTab}
+
+
+ {topicsTab}
+
+
+ {postsTab}
+
-
+
+
diff --git a/src/containers/StartTopicContainer.js b/src/containers/StartTopicContainer.js
index f8c5687..62f32a5 100644
--- a/src/containers/StartTopicContainer.js
+++ b/src/containers/StartTopicContainer.js
@@ -86,6 +86,7 @@ class StartTopic extends Component {
}
render() {
+ var previewEditText = this.state.previewEnabled ? "Edit" : "Preview";
return (
Sign Up
-Username: {this.props.user.username}
-Account: {this.props.user.address}
-OrbitDB: {this.props.orbitDB.id}
+Username: {this.props.user.username}
+Account: {this.props.user.address}
+OrbitDB: {this.props.orbitDB.id}
{this.state.creatingTopic &&
@@ -104,11 +105,12 @@ class StartTopic extends Component {
date: this.state.previewDate,
postContent: this.state.topicMessageInput
}}
- id={0}/>}
+ id={0}
+ />
+ }
diff --git a/src/containers/TopicContainer.js b/src/containers/TopicContainer.js
index eeae87a..59d910e 100644
--- a/src/containers/TopicContainer.js
+++ b/src/containers/TopicContainer.js
@@ -66,14 +66,15 @@ class Topic extends Component {
} else {
topicContents = (
(
+ {this.postList}
{this.state.posting &&
{this.handleClick()}}
onPostCreated={() => {this.postCreated()}}
/>
}
- {this.postList}
{!this.state.posting &&
}
diff --git a/src/containers/UsernameFormContainer.js b/src/containers/UsernameFormContainer.js
index 8a4b7ec..5a5ff89 100644
--- a/src/containers/UsernameFormContainer.js
+++ b/src/containers/UsernameFormContainer.js
@@ -45,9 +45,14 @@ class UsernameFormContainer extends Component {
const placeholderText = hasSignedUp ? this.props.user.username : "Username";
return(
-
);
}
diff --git a/src/layouts/CoreLayout/CoreLayout.js b/src/layouts/CoreLayout/CoreLayout.js
index 3cf8609..2977728 100644
--- a/src/layouts/CoreLayout/CoreLayout.js
+++ b/src/layouts/CoreLayout/CoreLayout.js
@@ -4,9 +4,6 @@ import NavBar from '../../components/NavBar';
// Styles
import '../../assets/fonts/fontawesome-free-5.0.13/fontawesome-all.js';
-import '../../assets/css/oswald.css';
-import '../../assets/css/open-sans.css';
-import '../../assets/css/pure-min.css';
import '../../assets/css/App.css';
class CoreLayout extends Component {