Skip to content

Commit

Permalink
Merge pull request #520 from DemocracyEarth/dapp
Browse files Browse the repository at this point in the history
Dynamic Sidebar Menu
  • Loading branch information
santisiri authored Jul 29, 2020
2 parents 647e260 + ea6013a commit 9042394
Show file tree
Hide file tree
Showing 20 changed files with 609 additions and 185 deletions.
22 changes: 20 additions & 2 deletions i18n/en.i18n.json
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@
"email-username": "E-mail",
"email-sample": "[email protected]",
"password-sample": "make it long.",
"sign-in": "Sign In",
"sign-in": "Connect Wallet",
"password": "Password",
"please-wait": "Please wait...",
"use-social-media": "or use:",
Expand Down Expand Up @@ -889,5 +889,23 @@
"voted-no": "{{shares}} {{label}} for <strong>No</strong> to {{proposal}}",
"shares": "shares",
"share": "share",
"arrow-verb": ""
"arrow-verb": "",
"overview": "Overview",
"recent": "Recent",
"in-queue": "In Queue",
"voting-now": "Voting Now",
"grace-period": "Grace Period",
"ready-to-process": "Ready to process",
"rejected": "Rejected",
"approved": "Approved",
"quits": "Quits",
"jailed": "Jailed",
"kicked": "Kicked",
"sponsored": "Sponsored",
"guild-kicks": "Guild Kicks",
"proposals-account": "Proposals by {{account}}",
"memberships-account": "Memberships of {{account}}",
"proposals-sidebar": "Recent Proposals",
"memberships-sidebar": "Your Memberships",
"no-memberships-found": "No DAO memberships found."
}
3 changes: 2 additions & 1 deletion imports/ui/components/Account/Account.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
import ApolloClient, { gql, InMemoryCache } from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';
import { useQuery } from '@apollo/react-hooks';
import { gui } from '/lib/const';

import { shortenCryptoName } from '/imports/startup/both/modules/metamask';

Expand Down Expand Up @@ -38,7 +39,7 @@ const ENS_ACCOUNT = `
*/
const getENSName = (data, publicAddress) => {
if (data.domains.length > 0) {
return data.domains[0].name;
return (data.domains[0].name.length > gui.MAX_LENGTH_ACCOUNT_NAMES) ? `${data.domains[0].name.slice(0, gui.MAX_LENGTH_ACCOUNT_NAMES)}...` : data.domains[0].name;
}
return shortenCryptoName(publicAddress);
};
Expand Down
5 changes: 4 additions & 1 deletion imports/ui/components/Choice/Choice.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@ export default class Choice extends Component {
}

pollOpen() {
return (this.props.votingPeriodBegins > this.props.now && this.props.votingPeriodEnds < this.props.now);
const now = parseInt(this.props.now / 1000, 10);
return ((this.props.votingPeriodBegins < now) && (this.props.votingPeriodEnds > now));
}

canVote = async (accountAddress) => {
Expand Down Expand Up @@ -108,6 +109,8 @@ export default class Choice extends Component {
return alreadyVoted();
}

console.log(`this.pollOpen():`);
console.log(this.pollOpen());
// poll date
if (!this.pollOpen()) {
return pollClosed();
Expand Down
2 changes: 2 additions & 0 deletions imports/ui/components/Countdown/Countdown.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@ export default class Countdown extends Component {
getPollLabel() {
let delta;
let label;
const now = parseInt(this.props.now / 1000, 10);

if (this.props.now > this.state.graceEnd) {
delta = parseInt(this.props.now - this.state.end, 10);
label = 'poll-ended-days-ago';
Expand Down
29 changes: 20 additions & 9 deletions imports/ui/components/DAO/DAO.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
import ApolloClient, { gql, InMemoryCache } from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';
import { useQuery } from '@apollo/react-hooks';
import { gui } from '/lib/const';

import { shortenCryptoName } from '/imports/startup/both/modules/metamask';

Expand All @@ -29,7 +30,7 @@ const makeBlockie = require('ethereum-blockies-base64');
/**
* @summary renders a post in the timeline
*/
const DAOQuery = ({ publicAddress, width, height }) => {
const DAOQuery = ({ publicAddress, width, height, format }) => {
const { loading, error, data } = useQuery(gql(GET_DAO.replace('{{molochAddress}}', publicAddress)));

const image = makeBlockie(publicAddress);
Expand All @@ -56,19 +57,28 @@ const DAOQuery = ({ publicAddress, width, height }) => {
if (!daoTitle) {
label = shortenCryptoName(publicAddress);
} else {
label = (daoTitle.length > 20) ? `${daoTitle.slice(0, 19)}...` : daoTitle;
label = (daoTitle.length > gui.MAX_LENGTH_ACCOUNT_NAMES) ? `${daoTitle.slice(0, gui.MAX_LENGTH_ACCOUNT_NAMES)}...` : daoTitle;
}

return (
<div className="dao">
<div className="avatar-editor">
<img src={image} className="symbol dao-pic" role="presentation" style={{ width: finalWidth, height: finalHeight }} />
<div className="identity-peer">
<a href={url} title={publicAddress} className="identity-label identity-label-micro">
{(format === 'plainText') ?
<div>
<img src={image} className="symbol dao-pic" role="presentation" style={{ width: finalWidth, height: finalHeight }} />
<div className="identity-peer">
{label}
</a>
</div>
</div>
</div>
:
<div className="avatar-editor">
<img src={image} className="symbol dao-pic" role="presentation" style={{ width: finalWidth, height: finalHeight }} />
<div className="identity-peer">
<a href={url} title={publicAddress} className="identity-label identity-label-micro">
{label}
</a>
</div>
</div>
}
</div>
);
};
Expand All @@ -77,6 +87,7 @@ DAOQuery.propTypes = {
publicAddress: PropTypes.string,
width: PropTypes.string,
height: PropTypes.string,
format: PropTypes.string,
};


Expand All @@ -86,7 +97,7 @@ DAOQuery.propTypes = {
const DAO = (props) => {
return (
<ApolloProvider client={client}>
<DAOQuery publicAddress={props.publicAddress} width={props.width} height={props.height} />
<DAOQuery publicAddress={props.publicAddress} width={props.width} height={props.height} format={props.format} />
</ApolloProvider>
);
};
Expand Down
113 changes: 113 additions & 0 deletions imports/ui/components/Item/Item.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Router } from 'meteor/iron:router';

import { getTemplateImage } from '/imports/ui/templates/layout/templater.js';

/**
* @summary checks if href matches to current url
* @param {string} url with href to match
* @return {boolean}
*/
const _matchingContext = (url) => {
if (url) {
const current = Router.current().url.replace(window.location.origin, '');
if ((Router.current().params.username === url.substring(6))
|| (current === url)
) {
return true;
}
}
return false;
};


/**
* @summary displays the contents of a poll
*/
export default class Item extends Component {
constructor(props) {
super(props);

this.state = {
inContext: _matchingContext(this.props.href),
icon: {
paper: '',
paperActive: '',
},
};
}

async componentDidMount() {
await this.setIcons();
}

async setIcons() {
this.setState({
icon: {
paper: await getTemplateImage('paper'),
paperActive: await getTemplateImage('paper-active'),
},
});
}

getLabel() {
if (this.props.children) {
return this.props.children;
}
return (this.props.label);
}

getStyle() {
return `menu-item ${this.state.inContext ? 'menu-item-selected' : null}`;
}

getTagStyle() {
return `sidebar-tag ${this.state.inContext ? 'sidebar-tag-selected' : null}`;
}

getIcon() {
return (this.state.inContext) ? this.state.icon.paperActive : this.state.icon.paper;
}

getLabelStyle() {
if (this.props.children) {
return `sidebar-label sidebar-label-${this.props.children.type.name.toLowerCase()}`;
}
return 'sidebar-label';
}

render() {
if (this.props.hideEmpty && this.props.score === 0) return null;
return (
<a className={this.getStyle()} href={this.props.href}>
{(this.props.sharp) ?
<div className="sidebar-sharp">
<img src={this.getIcon()} role="presentation" className="menu-item-icon" />
</div>
:
null
}
<div className={this.getLabelStyle()}>
{this.getLabel()}
</div>
<div className={this.getTagStyle()}>
{this.props.score}
</div>
</a>
);
}
}

Item.propTypes = {
sharp: PropTypes.bool,
label: PropTypes.string,
score: PropTypes.number,
hideEmpty: PropTypes.bool,
href: PropTypes.string,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]),
};

Loading

0 comments on commit 9042394

Please sign in to comment.