LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

fixed underline on NavBar and removed components

Browse source
This commit is contained in:
bill bittner 2018-01-19 17:24:21 -08:00
parent c25aa72cbc
commit 72d5c31176
7 changed files with 72 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public/assets/js/navBarFunctions.js
View file

@ -7,8 +7,8 @@ function toggleNavBarSelection (value) {
window.location.href = '/logout';
} else if (selectedOption === 'VIEW') {
// get channel info
const channelName = getCookie('channel_name');
const channelClaimId = getCookie('channel_claim_id');
const channelName = getCookie('CHANNEL_NAME');
const channelClaimId = getCookie('CHANNEL_LONG_ID');
// redirect to channel page
window.location.href = `/${channelName}:${channelClaimId}`;
}

7
react/components/ActiveStatusBar.jsx Normal file
View file

@ -0,0 +1,7 @@
import React from 'react';
function ActiveStatusBar () {
return <span className="progress-bar progress-bar--active">| </span>;
}
export default ActiveStatusBar;

7
react/components/InactiveStatusBar.jsx Normal file
View file

@ -0,0 +1,7 @@
import React from 'react';
function InactiveStatusBar () {
return <span className="progress-bar progress-bar--inactive">| </span>;
}
export default InactiveStatusBar();

28
react/components/Logo.jsx Normal file
View file

@ -0,0 +1,28 @@
import React from 'react';
function Logo () {
return (
<svg version="1.1" id="Layer_1" x="0px" y="0px" height="24px" viewBox="0 0 80 31" enableBackground="new 0 0 80 31" className="nav-bar-logo">
<a href="/">
<title>Logo</title>
<desc>Spee.ch logo</desc>
<g id="About">
<g id="Publish-Form-V2-_x28_filled_x29_" transform="translate(-42.000000, -23.000000)">
<g id="Group-17" transform="translate(42.000000, 22.000000)">
<text transform="matrix(1 0 0 1 0 20)" fontSize="25" fontFamily="Roboto">Spee&lt;h</text>
<g id="Group-16" transform="translate(0.000000, 30.000000)">
<path id="Line-8" fill="none" stroke="#09F911" strokeWidth="1" strokeLinecap="square" d="M0.5,1.5h15"/>
<path id="Line-8-Copy" fill="none" stroke="#029D74" strokeWidth="1" strokeLinecap="square" d="M16.5,1.5h15"/>
<path id="Line-8-Copy-2" fill="none" stroke="#E35BD8" strokeWidth="1" strokeLinecap="square" d="M32.5,1.5h15"/>
<path id="Line-8-Copy-3" fill="none" stroke="#4156C5" strokeWidth="1" strokeLinecap="square" d="M48.5,1.5h15"/>
<path id="Line-8-Copy-4" fill="none" stroke="#635688" strokeWidth="1" strokeLinecap="square" d="M64.5,1.5h15"/>
</g>
</g>
</g>
</g>
</a>
</svg>
);
};
export default Logo;

13
react/components/NavBarChannelDropdown.jsx Normal file
View file

@ -0,0 +1,13 @@
import React from 'react';
function Logo ({ channelName, handleSelection, VIEW, LOGOUT }) {
return (
<select type="text" id="nav-bar-channel-select" className="select select--arrow link--nav" onChange={handleSelection}>
<option id="nav-bar-channel-select-channel-option">{channelName}</option>
<option value={VIEW}>View</option>
<option value={LOGOUT}>Logout</option>
</select>
);
};
export default Logo;

12
react/components/ProgressBar.jsx
View file

@ -1,13 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
function ActiveBar () {
return <span className="progress-bar progress-bar--active">| </span>;
}
function InactiveBar () {
return <span className="progress-bar progress-bar--inactive">| </span>;
}
import ActiveStatusBar from 'components/ActiveStatusBar';
import InactiveStatusBar from 'components/InactiveStatusBar';
class ProgressBar extends React.Component {
constructor (props) {
@ -70,7 +64,7 @@ class ProgressBar extends React.Component {
render () {
return (
<div>
{this.state.bars.map((bar, index) => bar.isActive ? <ActiveBar key={index} /> : <InactiveBar key={index}/> )}
{this.state.bars.map((bar, index) => bar.isActive ? <ActiveStatusBar key={index} /> : <InactiveStatusBar key={index}/>)}
</div>
);
}

43
react/containers/NavBar/view.jsx
View file

@ -1,34 +1,11 @@
import React from 'react';
import { getUserCookies, clearUserCookies } from 'utils/cookies';
import Logo from 'components/Logo';
import NavBarChannelDropdown from 'components/NavBarChannelDropdown';
const VIEW = 'VIEW';
const LOGOUT = 'LOGOUT';
function Logo () {
return (
<svg version="1.1" id="Layer_1" x="0px" y="0px" height="24px" viewBox="0 0 80 31" enableBackground="new 0 0 80 31" className="nav-bar-logo">
<a href="/">
<title>Logo</title>
<desc>Spee.ch logo</desc>
<g id="About">
<g id="Publish-Form-V2-_x28_filled_x29_" transform="translate(-42.000000, -23.000000)">
<g id="Group-17" transform="translate(42.000000, 22.000000)">
<text transform="matrix(1 0 0 1 0 20)" fontSize="25" fontFamily="Roboto">Spee&lt;h</text>
<g id="Group-16" transform="translate(0.000000, 30.000000)">
<path id="Line-8" fill="none" stroke="#09F911" strokeWidth="1" strokeLinecap="square" d="M0.5,1.5h15"/>
<path id="Line-8-Copy" fill="none" stroke="#029D74" strokeWidth="1" strokeLinecap="square" d="M16.5,1.5h15"/>
<path id="Line-8-Copy-2" fill="none" stroke="#E35BD8" strokeWidth="1" strokeLinecap="square" d="M32.5,1.5h15"/>
<path id="Line-8-Copy-3" fill="none" stroke="#4156C5" strokeWidth="1" strokeLinecap="square" d="M48.5,1.5h15"/>
<path id="Line-8-Copy-4" fill="none" stroke="#635688" strokeWidth="1" strokeLinecap="square" d="M64.5,1.5h15"/>
</g>
</g>
</g>
</g>
</a>
</svg>
);
}
class NavBar extends React.Component {
constructor (props) {
super(props);
@ -36,6 +13,7 @@ class NavBar extends React.Component {
this.handleSelection = this.handleSelection.bind(this);
}
componentDidMount () {
// check to see if the user is already logged in
this.checkForLoggedInUser();
}
checkForLoggedInUser () {
@ -48,7 +26,9 @@ class NavBar extends React.Component {
}
}
handleSelection (event) {
console.log('handling selection', event)
const value = event.target.selectedOptions[0].value;
console.log('value', value);
switch (value) {
case LOGOUT:
// remove session cookies
@ -73,14 +53,15 @@ class NavBar extends React.Component {
<span className="nav-bar-tagline">Open-source, decentralized image and video sharing.</span>
</div>
<div className="nav-bar--right">
<a className="nav-bar-link link--nav" href="/">Publish</a>
<a className="nav-bar-link link--nav-active" href="/">Publish</a>
<a className="nav-bar-link link--nav" href="/about">About</a>
{ this.props.channelName ? (
<select type="text" id="nav-bar-channel-select" className="select select--arrow link--nav" onChange={this.handleSelection}>
<option id="nav-bar-channel-select-channel-option">{this.props.channelName}</option>
<option value={VIEW}>View</option>
<option value={LOGOUT}>Logout</option>
</select>
<NavBarChannelDropdown
channelName={this.props.channelName}
handleSelection={this.handleSelection}
VIEW={VIEW}
LOGOUT={LOGOUT}
/>
) : (
<a id="nav-bar-login-link" className="nav-bar-link link--nav" href="/login">Channel</a>
)}