From caed0b2830fcb73dc8e0be10feee8053e5497fbe Mon Sep 17 00:00:00 2001 From: santisiri Date: Sat, 25 Jul 2020 10:49:19 +0200 Subject: [PATCH 01/15] twisted time --- i18n/en.i18n.json | 2 +- imports/ui/components/Choice/Choice.jsx | 8 +++++++- imports/ui/components/Countdown/Countdown.jsx | 2 ++ 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json index ebc1c72de..c46892c91 100644 --- a/i18n/en.i18n.json +++ b/i18n/en.i18n.json @@ -154,7 +154,7 @@ "email-username": "E-mail", "email-sample": "satoshi@nakamoto.org", "password-sample": "make it long.", - "sign-in": "Sign In", + "sign-in": "Connect Wallet", "password": "Password", "please-wait": "Please wait...", "use-social-media": "or use:", diff --git a/imports/ui/components/Choice/Choice.jsx b/imports/ui/components/Choice/Choice.jsx index b11dfd380..e75b413ed 100644 --- a/imports/ui/components/Choice/Choice.jsx +++ b/imports/ui/components/Choice/Choice.jsx @@ -37,7 +37,11 @@ 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); + console.log(now); + console.log(`(this.props.votingPeriodBegins > now): ${(this.props.votingPeriodBegins > now)}`); + console.log(`(this.props.votingPeriodEnds < now): ${(this.props.votingPeriodEnds < now)}`); + return ((this.props.votingPeriodBegins < now) && (this.props.votingPeriodEnds > now)); } canVote = async (accountAddress) => { @@ -108,6 +112,8 @@ export default class Choice extends Component { return alreadyVoted(); } + console.log(`this.pollOpen():`); + console.log(this.pollOpen()); // poll date if (!this.pollOpen()) { return pollClosed(); diff --git a/imports/ui/components/Countdown/Countdown.jsx b/imports/ui/components/Countdown/Countdown.jsx index 0049e789d..b4e009cd2 100644 --- a/imports/ui/components/Countdown/Countdown.jsx +++ b/imports/ui/components/Countdown/Countdown.jsx @@ -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'; From 8a9b5fef6208fa1a7d5e991e2c7c6c8bf1da9b0f Mon Sep 17 00:00:00 2001 From: santisiri Date: Sun, 26 Jul 2020 01:24:51 +0200 Subject: [PATCH 02/15] round avatars --- imports/ui/components/Choice/Choice.jsx | 3 --- imports/ui/components/Timeline/Timeline.jsx | 2 +- public/templates/daoverse/css/daoverse.css | 2 +- public/templates/daoverse/css/extra.css | 8 ++++---- 4 files changed, 6 insertions(+), 9 deletions(-) diff --git a/imports/ui/components/Choice/Choice.jsx b/imports/ui/components/Choice/Choice.jsx index e75b413ed..e370026e6 100644 --- a/imports/ui/components/Choice/Choice.jsx +++ b/imports/ui/components/Choice/Choice.jsx @@ -38,9 +38,6 @@ export default class Choice extends Component { pollOpen() { const now = parseInt(this.props.now / 1000, 10); - console.log(now); - console.log(`(this.props.votingPeriodBegins > now): ${(this.props.votingPeriodBegins > now)}`); - console.log(`(this.props.votingPeriodEnds < now): ${(this.props.votingPeriodEnds < now)}`); return ((this.props.votingPeriodBegins < now) && (this.props.votingPeriodEnds > now)); } diff --git a/imports/ui/components/Timeline/Timeline.jsx b/imports/ui/components/Timeline/Timeline.jsx index 9b8955cba..49ff83b80 100644 --- a/imports/ui/components/Timeline/Timeline.jsx +++ b/imports/ui/components/Timeline/Timeline.jsx @@ -63,7 +63,7 @@ const Feed = (props) => { > - + diff --git a/public/templates/daoverse/css/daoverse.css b/public/templates/daoverse/css/daoverse.css index f0f1099e6..995710c86 100755 --- a/public/templates/daoverse/css/daoverse.css +++ b/public/templates/daoverse/css/daoverse.css @@ -1452,7 +1452,7 @@ blockquote { border: 1px solid #7d849f33; border-top: 1px dotted #7d849f33; border-radius: 0px; - background-color: #f9fafb; + background-color: var(--proposal-bar-color); width: 100%; cursor: default; } diff --git a/public/templates/daoverse/css/extra.css b/public/templates/daoverse/css/extra.css index b27717bcf..60d6b756a 100644 --- a/public/templates/daoverse/css/extra.css +++ b/public/templates/daoverse/css/extra.css @@ -792,7 +792,7 @@ width: 1px; color: #5a0075; border: 1px solid #f2eff5; min-width: 140px; - background: #f9fafb; + background: var(--proposal-bar-color); float: left; height: 80px; overflow: hidden; @@ -858,7 +858,7 @@ width: 1px; margin-bottom: 10px; float: left; border: 1px solid #e8e2ef; - border-radius: 3px; + border-radius: 50px; background-color: #e8e2ef; } @@ -1179,7 +1179,7 @@ h4 { display: inline-block; padding: 0px 7px; width: 100%; - background-color: #f9fafb; + background-color: var(--proposal-bar-color); margin: -5px 0px; } @@ -1275,7 +1275,7 @@ h4 { } .vote.vote-search.vote-feed.vote-delegation.guild-block { - border: 5px solid #f9fafb; + border: 5px solid var(--proposal-bar-color); } .mobile-search { From 382f1aaf3d3d0587d7a542f6676aeb62a7884641 Mon Sep 17 00:00:00 2001 From: santisiri Date: Sun, 26 Jul 2020 02:43:59 +0200 Subject: [PATCH 03/15] query to read activity related to wallet address --- i18n/en.i18n.json | 3 +- imports/ui/components/Item/Item.jsx | 25 +++++ imports/ui/components/Menu/Menu.jsx | 117 +++++++++++++++++++++ imports/ui/components/Menu/menu.html | 5 + imports/ui/components/Menu/menu.js | 12 +++ imports/ui/templates/layout/main.html | 2 +- imports/ui/templates/layout/main.js | 1 + public/templates/daoverse/css/daoverse.css | 2 + 8 files changed, 165 insertions(+), 2 deletions(-) create mode 100644 imports/ui/components/Item/Item.jsx create mode 100644 imports/ui/components/Menu/Menu.jsx create mode 100644 imports/ui/components/Menu/menu.html create mode 100644 imports/ui/components/Menu/menu.js diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json index c46892c91..f6308770f 100644 --- a/i18n/en.i18n.json +++ b/i18n/en.i18n.json @@ -889,5 +889,6 @@ "voted-no": "{{shares}} {{label}} for No to {{proposal}}", "shares": "shares", "share": "share", - "arrow-verb": " → " + "arrow-verb": " → ", + "overview": "Overview" } diff --git a/imports/ui/components/Item/Item.jsx b/imports/ui/components/Item/Item.jsx new file mode 100644 index 000000000..a384f91fb --- /dev/null +++ b/imports/ui/components/Item/Item.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +/** +* @summary displays the contents of a poll +*/ +const Item = (props) => { + return ( +
+
+ {props.label} +
+
+ {props.score} +
+
+ ); +}; + +Item.propTypes = { + label: PropTypes.string, + score: PropTypes.number, +}; + +export default Item; diff --git a/imports/ui/components/Menu/Menu.jsx b/imports/ui/components/Menu/Menu.jsx new file mode 100644 index 000000000..0fd0786ca --- /dev/null +++ b/imports/ui/components/Menu/Menu.jsx @@ -0,0 +1,117 @@ +import { Meteor } from 'meteor/meteor'; +import React from 'react'; + +import ApolloClient, { gql, InMemoryCache } from 'apollo-boost'; +import { ApolloProvider } from 'react-apollo'; +import { useQuery } from '@apollo/react-hooks'; +import { TAPi18n } from 'meteor/tap:i18n'; +import PropTypes from 'prop-types'; + +import Item from '/imports/ui/components/Item/Item.jsx'; + +const numeral = require('numeral'); + +const client = new ApolloClient({ + uri: Meteor.settings.public.graph.molochs, + cache: new InMemoryCache(), +}); + +const GET_MENU = ` +{ + members(where: { memberAddress: "{{memberAddress}}" }) { + id + memberAddress + moloch { + id + title + } + tokenTribute + exists + shares + didRagequit + submissions { + id + } + kicked + jailed { + id + } + proposedToKick + } +} +`; + +/** + * @summary style based on type of device + * @return string with css classes + */ +const _getMenuStyle = () => { + if (Meteor.Device.isPhone()) { + return 'sidebar sidebar-desktop'; + } + return 'sidebar'; +}; + +/** +* @summary displays the contents of a poll +*/ +const MenuQuery = () => { + const user = Meteor.user().username || '0x0'; + const { loading, error, data } = useQuery(gql(GET_MENU.replace('{{memberAddress}}', user))); + + if (loading) { + return ( +
+ ); + } + if (error) return `Error! ${error}`; + + console.log(data); + + return ( +
+
+
+
+ {TAPi18n.__('overview')} +
+
+ {TAPi18n.__('memberships')} +
+ +
+ {TAPi18n.__('periods')} +
+
+ {TAPi18n.__('proposals')} +
+
+
+
+ {/* replicator */} +
+
+ ); +}; + +MenuQuery.propTypes = { + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node, + ]), +}; + +/** +* @summary renders a post in the timeline +*/ +const Menu = () => { + return ( + + + + ); +}; + +Menu.propTypes = MenuQuery.propTypes; + +export default Menu; diff --git a/imports/ui/components/Menu/menu.html b/imports/ui/components/Menu/menu.html new file mode 100644 index 000000000..3fde190a5 --- /dev/null +++ b/imports/ui/components/Menu/menu.html @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/imports/ui/components/Menu/menu.js b/imports/ui/components/Menu/menu.js new file mode 100644 index 000000000..4d6902f76 --- /dev/null +++ b/imports/ui/components/Menu/menu.js @@ -0,0 +1,12 @@ +import { Template } from 'meteor/templating'; + +import Menu from '/imports/ui/components/Menu/Menu.jsx'; + +import '/imports/ui/components/Menu/menu.html'; + +Template.menu.helpers({ + Menu() { + return Menu; + }, +}); + diff --git a/imports/ui/templates/layout/main.html b/imports/ui/templates/layout/main.html index a8f8d8140..3ffefced0 100644 --- a/imports/ui/templates/layout/main.html +++ b/imports/ui/templates/layout/main.html @@ -17,7 +17,7 @@
{{#unless landingMode}} - {{> sidebar}} + {{> menu}} {{/unless}} {{> preloader}} diff --git a/imports/ui/templates/layout/main.js b/imports/ui/templates/layout/main.js index f73c4286e..ee8c95f5d 100644 --- a/imports/ui/templates/layout/main.js +++ b/imports/ui/templates/layout/main.js @@ -34,6 +34,7 @@ import { getCSS } from '/imports/ui/templates/layout/templater'; import { resetSplit } from '/imports/ui/modules/split'; import { getLandingMode } from '/imports/ui/templates/layout/url/home/home'; +import '/imports/ui/components/Menu/menu.js'; import '/imports/ui/templates/layout/main.html'; import '/imports/ui/templates/widgets/modal/modal'; import '/imports/ui/templates/widgets/popup/popup'; diff --git a/public/templates/daoverse/css/daoverse.css b/public/templates/daoverse/css/daoverse.css index 995710c86..97555e9bd 100755 --- a/public/templates/daoverse/css/daoverse.css +++ b/public/templates/daoverse/css/daoverse.css @@ -4552,6 +4552,7 @@ blockquote { line-height: 30px; text-align: left; cursor: pointer; + display:inline-block; } .menu-item:hover { @@ -4689,6 +4690,7 @@ blockquote { line-height: 22px; font-weight: 500; text-align: left; + clear:both; text-transform: uppercase; } From 76d81b885a7bece47d697e163442692c878b876d Mon Sep 17 00:00:00 2001 From: santisiri Date: Sun, 26 Jul 2020 10:09:01 +0200 Subject: [PATCH 04/15] menu component --- imports/ui/components/Menu/Menu.jsx | 48 +++++++++++++++++++++-------- 1 file changed, 36 insertions(+), 12 deletions(-) diff --git a/imports/ui/components/Menu/Menu.jsx b/imports/ui/components/Menu/Menu.jsx index 0fd0786ca..5f33ec70f 100644 --- a/imports/ui/components/Menu/Menu.jsx +++ b/imports/ui/components/Menu/Menu.jsx @@ -1,11 +1,12 @@ import { Meteor } from 'meteor/meteor'; -import React from 'react'; +import React, { Component } from 'react'; import ApolloClient, { gql, InMemoryCache } from 'apollo-boost'; import { ApolloProvider } from 'react-apollo'; import { useQuery } from '@apollo/react-hooks'; import { TAPi18n } from 'meteor/tap:i18n'; import PropTypes from 'prop-types'; +import { setupWeb3, getWeb3Wallet } from '/imports/startup/both/modules/metamask'; import Item from '/imports/ui/components/Item/Item.jsx'; @@ -55,9 +56,9 @@ const _getMenuStyle = () => { /** * @summary displays the contents of a poll */ -const MenuQuery = () => { - const user = Meteor.user().username || '0x0'; - const { loading, error, data } = useQuery(gql(GET_MENU.replace('{{memberAddress}}', user))); +const MenuQuery = ({ account }) => { + console.log(account); + const { loading, error, data } = useQuery(gql(GET_MENU.replace('{{memberAddress}}', account))); if (loading) { return ( @@ -99,19 +100,42 @@ MenuQuery.propTypes = { PropTypes.arrayOf(PropTypes.node), PropTypes.node, ]), + account: PropTypes.string, }; /** * @summary renders a post in the timeline */ -const Menu = () => { - return ( - - - - ); -}; +export default class Menu extends Component { + constructor(props) { + super(props); + + this.state = { + accounts: ['0x0'], + }; + } + + async componentDidMount() { + await this.getAccounts(); + } + + async getAccounts() { + const web3 = getWeb3Wallet(); + const accounts = await web3.eth.getAccounts(); + + if (accounts.length > 0) { + this.setState({ accounts }); + } + } + + render() { + return ( + + + + ); + } +} Menu.propTypes = MenuQuery.propTypes; -export default Menu; From 6e2abb0c069d2046b2abfa9efe20672f9285437f Mon Sep 17 00:00:00 2001 From: santisiri Date: Sun, 26 Jul 2020 10:20:18 +0200 Subject: [PATCH 05/15] max length for account names --- i18n/en.i18n.json | 3 ++- imports/ui/components/Account/Account.jsx | 3 ++- imports/ui/components/DAO/DAO.jsx | 3 ++- imports/ui/components/Menu/Menu.jsx | 3 +-- lib/const.js | 1 + public/templates/daoverse/css/daoverse.css | 2 +- 6 files changed, 9 insertions(+), 6 deletions(-) diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json index f6308770f..87edfdd39 100644 --- a/i18n/en.i18n.json +++ b/i18n/en.i18n.json @@ -890,5 +890,6 @@ "shares": "shares", "share": "share", "arrow-verb": " → ", - "overview": "Overview" + "overview": "Overview", + "recent": "Recent" } diff --git a/imports/ui/components/Account/Account.jsx b/imports/ui/components/Account/Account.jsx index 502b3c95d..f9c33773a 100644 --- a/imports/ui/components/Account/Account.jsx +++ b/imports/ui/components/Account/Account.jsx @@ -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'; @@ -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); }; diff --git a/imports/ui/components/DAO/DAO.jsx b/imports/ui/components/DAO/DAO.jsx index 44100f52c..dfe9f9e97 100644 --- a/imports/ui/components/DAO/DAO.jsx +++ b/imports/ui/components/DAO/DAO.jsx @@ -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'; @@ -56,7 +57,7 @@ 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 ( diff --git a/imports/ui/components/Menu/Menu.jsx b/imports/ui/components/Menu/Menu.jsx index 5f33ec70f..b1599ced8 100644 --- a/imports/ui/components/Menu/Menu.jsx +++ b/imports/ui/components/Menu/Menu.jsx @@ -57,7 +57,6 @@ const _getMenuStyle = () => { * @summary displays the contents of a poll */ const MenuQuery = ({ account }) => { - console.log(account); const { loading, error, data } = useQuery(gql(GET_MENU.replace('{{memberAddress}}', account))); if (loading) { @@ -74,7 +73,7 @@ const MenuQuery = ({ account }) => {
- {TAPi18n.__('overview')} + {TAPi18n.__('recent')}
{TAPi18n.__('memberships')} diff --git a/lib/const.js b/lib/const.js index 4725e4cfc..88ab6b098 100644 --- a/lib/const.js +++ b/lib/const.js @@ -88,6 +88,7 @@ const _gui = { MOLOCH_DAPP: true, LIMIT_TRANSACTIONS_PER_LEDGER: 10, COLLECTIVE_MAX_FETCH: 25, + MAX_LENGTH_ACCOUNT_NAMES: 16, }; /** diff --git a/public/templates/daoverse/css/daoverse.css b/public/templates/daoverse/css/daoverse.css index 97555e9bd..5dbf29780 100755 --- a/public/templates/daoverse/css/daoverse.css +++ b/public/templates/daoverse/css/daoverse.css @@ -4546,7 +4546,7 @@ blockquote { margin-top: 3px; margin-bottom: 12px; padding: 2px 5px 1px 10px; - border-radius: 20px; + border-radius: 5px; color: #0d0d17; font-size: 13px; line-height: 30px; From ba61ed9f6f2f65e910bd2126cc6b42761c1b84ff Mon Sep 17 00:00:00 2001 From: santisiri Date: Mon, 27 Jul 2020 11:52:53 +0200 Subject: [PATCH 06/15] kundalini --- imports/ui/components/DAO/DAO.jsx | 28 +++++++++++----- imports/ui/components/Item/Item.jsx | 38 ++++++++++++++-------- imports/ui/components/Menu/Menu.jsx | 14 ++++++-- public/templates/daoverse/css/daoverse.css | 2 -- 4 files changed, 57 insertions(+), 25 deletions(-) diff --git a/imports/ui/components/DAO/DAO.jsx b/imports/ui/components/DAO/DAO.jsx index dfe9f9e97..2b098144a 100644 --- a/imports/ui/components/DAO/DAO.jsx +++ b/imports/ui/components/DAO/DAO.jsx @@ -30,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); @@ -60,16 +60,27 @@ const DAOQuery = ({ publicAddress, width, height }) => { label = (daoTitle.length > gui.MAX_LENGTH_ACCOUNT_NAMES) ? `${daoTitle.slice(0, gui.MAX_LENGTH_ACCOUNT_NAMES)}...` : daoTitle; } + console.log(`format: ${format}`); + return (
- ); }; @@ -78,6 +89,7 @@ DAOQuery.propTypes = { publicAddress: PropTypes.string, width: PropTypes.string, height: PropTypes.string, + format: PropTypes.string, }; @@ -87,7 +99,7 @@ DAOQuery.propTypes = { const DAO = (props) => { return ( - + ); }; diff --git a/imports/ui/components/Item/Item.jsx b/imports/ui/components/Item/Item.jsx index a384f91fb..3d07fcd45 100644 --- a/imports/ui/components/Item/Item.jsx +++ b/imports/ui/components/Item/Item.jsx @@ -1,25 +1,37 @@ -import React from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; /** * @summary displays the contents of a poll */ -const Item = (props) => { - return ( -
-
- {props.label} -
-
- {props.score} +export default class Item extends Component { + getLabel() { + if (this.props.children.type.name) { + return this.props.children; + } + return (this.props.label) + } + + render() { + return ( +
+
+ {this.getLabel()} +
+
+ {this.props.score} +
-
- ); -}; + ); + } +} Item.propTypes = { label: PropTypes.string, score: PropTypes.number, + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node, + ]), }; -export default Item; diff --git a/imports/ui/components/Menu/Menu.jsx b/imports/ui/components/Menu/Menu.jsx index b1599ced8..6704624ea 100644 --- a/imports/ui/components/Menu/Menu.jsx +++ b/imports/ui/components/Menu/Menu.jsx @@ -9,6 +9,7 @@ import PropTypes from 'prop-types'; import { setupWeb3, getWeb3Wallet } from '/imports/startup/both/modules/metamask'; import Item from '/imports/ui/components/Item/Item.jsx'; +import DAO from '/imports/ui/components/DAO/DAO.jsx'; const numeral = require('numeral'); @@ -57,7 +58,7 @@ const _getMenuStyle = () => { * @summary displays the contents of a poll */ const MenuQuery = ({ account }) => { - const { loading, error, data } = useQuery(gql(GET_MENU.replace('{{memberAddress}}', account))); + const { loading, error, data } = useQuery(gql(GET_MENU.replace('{{memberAddress}}', '0x865c2f85c9fea1c6ac7f53de07554d68cb92ed88'))); if (loading) { return ( @@ -68,6 +69,15 @@ const MenuQuery = ({ account }) => { console.log(data); + const daoList = data.members.map((item, key) => { + console.log(item); + return ( + + + + ); + }); + return (
@@ -78,7 +88,7 @@ const MenuQuery = ({ account }) => {
{TAPi18n.__('memberships')}
- + {daoList}
{TAPi18n.__('periods')}
diff --git a/public/templates/daoverse/css/daoverse.css b/public/templates/daoverse/css/daoverse.css index 5dbf29780..f33f37539 100755 --- a/public/templates/daoverse/css/daoverse.css +++ b/public/templates/daoverse/css/daoverse.css @@ -4543,8 +4543,6 @@ blockquote { .menu-item { min-width: 100%; - margin-top: 3px; - margin-bottom: 12px; padding: 2px 5px 1px 10px; border-radius: 5px; color: #0d0d17; From 11900bb1d6cb8838c7efa5ad58c8e0ce7ae048bb Mon Sep 17 00:00:00 2001 From: santisiri Date: Mon, 27 Jul 2020 12:54:39 +0200 Subject: [PATCH 07/15] new smart contextual menu --- i18n/en.i18n.json | 11 +++++++- imports/ui/components/Item/Item.jsx | 4 +-- imports/ui/components/Menu/Menu.jsx | 30 +++++++++++++--------- public/templates/daoverse/css/daoverse.css | 4 +-- 4 files changed, 32 insertions(+), 17 deletions(-) diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json index 87edfdd39..d3c3c8077 100644 --- a/i18n/en.i18n.json +++ b/i18n/en.i18n.json @@ -891,5 +891,14 @@ "share": "share", "arrow-verb": " → ", "overview": "Overview", - "recent": "Recent" + "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" } diff --git a/imports/ui/components/Item/Item.jsx b/imports/ui/components/Item/Item.jsx index 3d07fcd45..0fe6d47a2 100644 --- a/imports/ui/components/Item/Item.jsx +++ b/imports/ui/components/Item/Item.jsx @@ -6,10 +6,10 @@ import PropTypes from 'prop-types'; */ export default class Item extends Component { getLabel() { - if (this.props.children.type.name) { + if (this.props.children) { return this.props.children; } - return (this.props.label) + return (this.props.label); } render() { diff --git a/imports/ui/components/Menu/Menu.jsx b/imports/ui/components/Menu/Menu.jsx index 6704624ea..d722796d5 100644 --- a/imports/ui/components/Menu/Menu.jsx +++ b/imports/ui/components/Menu/Menu.jsx @@ -69,10 +69,24 @@ const MenuQuery = ({ account }) => { console.log(data); + const menuList = ( +
+ + + + + + + + + + +
+ ); + const daoList = data.members.map((item, key) => { - console.log(item); return ( - + ); @@ -83,23 +97,15 @@ const MenuQuery = ({ account }) => {
- {TAPi18n.__('recent')} + {TAPi18n.__('proposals')}
+ {menuList}
{TAPi18n.__('memberships')}
{daoList} -
- {TAPi18n.__('periods')} -
-
- {TAPi18n.__('proposals')} -
-
- {/* replicator */} -
); }; diff --git a/public/templates/daoverse/css/daoverse.css b/public/templates/daoverse/css/daoverse.css index f33f37539..ccde6a7d2 100755 --- a/public/templates/daoverse/css/daoverse.css +++ b/public/templates/daoverse/css/daoverse.css @@ -4543,7 +4543,7 @@ blockquote { .menu-item { min-width: 100%; - padding: 2px 5px 1px 10px; + padding: 0px 5px; border-radius: 5px; color: #0d0d17; font-size: 13px; @@ -4621,7 +4621,7 @@ blockquote { .sidebar { position: absolute; top: 60px; - bottom: 60px; + bottom: 0px; display: inline-block; overflow: scroll; width: 100%; From 930639cb2170416e43af27916b1bb12fd688b39e Mon Sep 17 00:00:00 2001 From: santisiri Date: Mon, 27 Jul 2020 13:28:23 +0200 Subject: [PATCH 08/15] sharping it --- imports/ui/components/Item/Item.jsx | 13 +++++++++++-- imports/ui/components/Menu/Menu.jsx | 20 ++++++++++---------- public/templates/daoverse/css/daoverse.css | 4 ++++ 3 files changed, 25 insertions(+), 12 deletions(-) diff --git a/imports/ui/components/Item/Item.jsx b/imports/ui/components/Item/Item.jsx index 0fe6d47a2..283f0e443 100644 --- a/imports/ui/components/Item/Item.jsx +++ b/imports/ui/components/Item/Item.jsx @@ -14,21 +14,30 @@ export default class Item extends Component { render() { return ( - + ); } } Item.propTypes = { + sharp: PropTypes.bool, label: PropTypes.string, score: PropTypes.number, + href: PropTypes.string, children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node, diff --git a/imports/ui/components/Menu/Menu.jsx b/imports/ui/components/Menu/Menu.jsx index d722796d5..4a1f47ad6 100644 --- a/imports/ui/components/Menu/Menu.jsx +++ b/imports/ui/components/Menu/Menu.jsx @@ -71,16 +71,16 @@ const MenuQuery = ({ account }) => { const menuList = (
- - - - - - - - - - + + + + + + + + + +
); diff --git a/public/templates/daoverse/css/daoverse.css b/public/templates/daoverse/css/daoverse.css index ccde6a7d2..a6f5ec708 100755 --- a/public/templates/daoverse/css/daoverse.css +++ b/public/templates/daoverse/css/daoverse.css @@ -5940,6 +5940,10 @@ blockquote { float: left; } +.sidebar-sharp { + margin: 0px 10px; +} + .post-button { margin: 2px 10px -5px; float: right; From f2b007b5e1089f1e17ff39f25abd86189dc55ddf Mon Sep 17 00:00:00 2001 From: santisiri Date: Mon, 27 Jul 2020 23:52:00 +0200 Subject: [PATCH 09/15] dynamic count for each section --- i18n/en.i18n.json | 4 +- imports/ui/components/DAO/DAO.jsx | 2 - imports/ui/components/Item/Item.jsx | 2 +- imports/ui/components/Menu/Menu.jsx | 83 ++++++++++++++++++---- public/templates/daoverse/css/daoverse.css | 7 +- 5 files changed, 80 insertions(+), 18 deletions(-) diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json index d3c3c8077..e974286ce 100644 --- a/i18n/en.i18n.json +++ b/i18n/en.i18n.json @@ -900,5 +900,7 @@ "approved": "Approved", "quits": "Quits", "jailed": "Jailed", - "kicked": "Kicked" + "kicked": "Kicked", + "sponsored": "Sponsored", + "guild-kicks": "Guild Kicks" } diff --git a/imports/ui/components/DAO/DAO.jsx b/imports/ui/components/DAO/DAO.jsx index 2b098144a..4bd98cdfa 100644 --- a/imports/ui/components/DAO/DAO.jsx +++ b/imports/ui/components/DAO/DAO.jsx @@ -60,8 +60,6 @@ const DAOQuery = ({ publicAddress, width, height, format }) => { label = (daoTitle.length > gui.MAX_LENGTH_ACCOUNT_NAMES) ? `${daoTitle.slice(0, gui.MAX_LENGTH_ACCOUNT_NAMES)}...` : daoTitle; } - console.log(`format: ${format}`); - return (
{(format === 'plainText') ? diff --git a/imports/ui/components/Item/Item.jsx b/imports/ui/components/Item/Item.jsx index 283f0e443..cab5b380b 100644 --- a/imports/ui/components/Item/Item.jsx +++ b/imports/ui/components/Item/Item.jsx @@ -17,7 +17,7 @@ export default class Item extends Component { {(this.props.sharp) ?
- # + •
: null diff --git a/imports/ui/components/Menu/Menu.jsx b/imports/ui/components/Menu/Menu.jsx index 4a1f47ad6..e5e9d21e7 100644 --- a/imports/ui/components/Menu/Menu.jsx +++ b/imports/ui/components/Menu/Menu.jsx @@ -33,6 +33,13 @@ const GET_MENU = ` didRagequit submissions { id + didPass + guildkick + gracePeriodEnds + votingPeriodStarts + votingPeriodEnds + sponsor + processed } kicked jailed { @@ -41,11 +48,12 @@ const GET_MENU = ` proposedToKick } } + `; /** * @summary style based on type of device - * @return string with css classes + * @return {string} with css classes */ const _getMenuStyle = () => { if (Meteor.Device.isPhone()) { @@ -54,6 +62,55 @@ const _getMenuStyle = () => { return 'sidebar'; }; +/** + * @summary based on a members data, count the types of proposals + * @return {number} with final count + */ +const _getProposalCount = (list, label) => { + const now = parseInt(new Date().getTime() / 1000, 10); + const counts = []; + + _.reduce(list, (memo, num) => { + if (label === 'all') { + console.log(`parseInt(num.submissions.length + memo, 10);: ${parseInt(num.submissions.length + memo, 10)}`); + counts.push(num.submissions.length); + } + counts.push( + _.reduce(num.submissions, (iterator, proposal) => { + switch (label) { + case 'in-queue': + if (proposal.votingPeriodStarts.toNumber() > now) return parseInt(iterator + 1, 10); + break; + case 'voting-now': + if ((proposal.votingPeriodStarts.toNumber() > now) && (proposal.votingPeriodEnds.toNumber() < now)) return parseInt(iterator + 1, 10); + break; + case 'grace-period': + if (proposal.votingPeriodEnds.toNumber() > now && (proposal.gracePeriodEnds.toNumber() < now)) return parseInt(iterator + 1, 10); + break; + case 'ready-to-process': + if ((proposal.gracePeriodEnds.toNumber() < now) && !proposal.processed) return parseInt(iterator + 1, 10); + break; + case 'rejected': + if (proposal.gracePeriodEnds.toNumber() < now && !proposal.didPass) return parseInt(iterator + 1, 10); + break; + case 'approved': + if (proposal.didPass) return parseInt(iterator + 1, 10); + break; + case 'sponsored': + if (proposal.sponsor) return parseInt(iterator + 1, 10); + break; + case 'kicked': + if (proposal.guildKick) return parseInt(iterator + 1, 10); + break; + default: + } + return iterator; + }, 0) + ); + }, 0); + return _.reduce(counts, (memory, numerator) => { return parseInt(memory + numerator, 10); }, 0); +}; + /** * @summary displays the contents of a poll */ @@ -71,22 +128,22 @@ const MenuQuery = ({ account }) => { const menuList = (
- - - - - - - - - - + + + + + + + +
); - const daoList = data.members.map((item, key) => { + const sorted = _.sortBy(data.members, (item) => { return (item.submissions.length * -1); }); + + const daoList = sorted.map((item, key) => { return ( - + ); diff --git a/public/templates/daoverse/css/daoverse.css b/public/templates/daoverse/css/daoverse.css index a6f5ec708..88cbe3a6f 100755 --- a/public/templates/daoverse/css/daoverse.css +++ b/public/templates/daoverse/css/daoverse.css @@ -5941,7 +5941,12 @@ blockquote { } .sidebar-sharp { - margin: 0px 10px; + font-family: Arial, Helvetica, sans-serif; + margin: 0px 5px 0px 0px; + float: left; + font-weight: 100; + color: var(--main-link-color); + font-size: 1.2em; } .post-button { From 82026dbb6d938110bdda21568c81bb154e536a71 Mon Sep 17 00:00:00 2001 From: santisiri Date: Mon, 27 Jul 2020 23:59:50 +0200 Subject: [PATCH 10/15] smart menu --- imports/ui/components/Item/Item.jsx | 4 +++- imports/ui/components/Menu/Menu.jsx | 16 ++++++++-------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/imports/ui/components/Item/Item.jsx b/imports/ui/components/Item/Item.jsx index cab5b380b..d9568e06b 100644 --- a/imports/ui/components/Item/Item.jsx +++ b/imports/ui/components/Item/Item.jsx @@ -13,11 +13,12 @@ export default class Item extends Component { } render() { + if (this.props.hideEmpty && this.props.score === 0) return null; return ( {(this.props.sharp) ?
- • + 📄
: null @@ -37,6 +38,7 @@ Item.propTypes = { sharp: PropTypes.bool, label: PropTypes.string, score: PropTypes.number, + hideEmpty: PropTypes.bool, href: PropTypes.string, children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), diff --git a/imports/ui/components/Menu/Menu.jsx b/imports/ui/components/Menu/Menu.jsx index e5e9d21e7..565b0a20c 100644 --- a/imports/ui/components/Menu/Menu.jsx +++ b/imports/ui/components/Menu/Menu.jsx @@ -128,14 +128,14 @@ const MenuQuery = ({ account }) => { const menuList = (
- - - - - - - - + + + + + + + +
); From 5212e9878eeb20d8320eac3f1a473030b0868c03 Mon Sep 17 00:00:00 2001 From: santisiri Date: Tue, 28 Jul 2020 16:25:30 +0200 Subject: [PATCH 11/15] new design for side bar --- imports/ui/components/Item/Item.jsx | 66 +++++++++++++++++-- imports/ui/components/Menu/Menu.jsx | 1 - public/templates/daoverse/css/daoverse.css | 6 ++ public/templates/daoverse/daoverse.json | 4 +- .../daoverse/images/paper-active.svg | 1 + public/templates/daoverse/images/paper.svg | 1 + 6 files changed, 73 insertions(+), 6 deletions(-) create mode 100644 public/templates/daoverse/images/paper-active.svg create mode 100644 public/templates/daoverse/images/paper.svg diff --git a/imports/ui/components/Item/Item.jsx b/imports/ui/components/Item/Item.jsx index d9568e06b..bfcf6b6cf 100644 --- a/imports/ui/components/Item/Item.jsx +++ b/imports/ui/components/Item/Item.jsx @@ -1,10 +1,56 @@ 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; @@ -12,21 +58,33 @@ export default class Item extends Component { 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; + } + render() { if (this.props.hideEmpty && this.props.score === 0) return null; return ( - + {(this.props.sharp) ?
- 📄 +
- : + : null }
{this.getLabel()}
-
+
{this.props.score}
diff --git a/imports/ui/components/Menu/Menu.jsx b/imports/ui/components/Menu/Menu.jsx index 565b0a20c..29aff7b31 100644 --- a/imports/ui/components/Menu/Menu.jsx +++ b/imports/ui/components/Menu/Menu.jsx @@ -72,7 +72,6 @@ const _getProposalCount = (list, label) => { _.reduce(list, (memo, num) => { if (label === 'all') { - console.log(`parseInt(num.submissions.length + memo, 10);: ${parseInt(num.submissions.length + memo, 10)}`); counts.push(num.submissions.length); } counts.push( diff --git a/public/templates/daoverse/css/daoverse.css b/public/templates/daoverse/css/daoverse.css index 88cbe3a6f..9b305b9e9 100755 --- a/public/templates/daoverse/css/daoverse.css +++ b/public/templates/daoverse/css/daoverse.css @@ -4557,6 +4557,12 @@ blockquote { background-color: #e6e0ee; } +.menu-item-icon { + width: 16px; + height: 16px; + padding: 2px; +} + .menu-item.cast-action { position: absolute; top: 50%; diff --git a/public/templates/daoverse/daoverse.json b/public/templates/daoverse/daoverse.json index c5fd3a357..7b9ef89db 100644 --- a/public/templates/daoverse/daoverse.json +++ b/public/templates/daoverse/daoverse.json @@ -80,6 +80,8 @@ "rejected": "/templates/daoverse/images/rejected.png", "signout": "/templates/daoverse/images/signout.png", "calendar": "/templates/daoverse/images/calendar.svg", - "blocks": "/templates/daoverse/images/blocks.gif" + "blocks": "/templates/daoverse/images/blocks.gif", + "paper": "/templates/daoverse/images/paper.svg", + "paper-active": "/templates/daoverse/images/paper-active.svg" } } diff --git a/public/templates/daoverse/images/paper-active.svg b/public/templates/daoverse/images/paper-active.svg new file mode 100644 index 000000000..786328fd0 --- /dev/null +++ b/public/templates/daoverse/images/paper-active.svg @@ -0,0 +1 @@ +Icon-54 \ No newline at end of file diff --git a/public/templates/daoverse/images/paper.svg b/public/templates/daoverse/images/paper.svg new file mode 100644 index 000000000..61bf738a3 --- /dev/null +++ b/public/templates/daoverse/images/paper.svg @@ -0,0 +1 @@ +Icon-54 \ No newline at end of file From f90ab6d47b3ebd22131dfdbe6d6d1a9cff9e2661 Mon Sep 17 00:00:00 2001 From: santisiri Date: Tue, 28 Jul 2020 16:44:17 +0200 Subject: [PATCH 12/15] contextualizing side bar --- i18n/en.i18n.json | 4 +++- imports/ui/components/Menu/Menu.jsx | 22 +++++++++++++--------- imports/ui/components/Vote/Vote.jsx | 2 +- lib/const.js | 3 ++- 4 files changed, 19 insertions(+), 12 deletions(-) diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json index e974286ce..7cbcfdd41 100644 --- a/i18n/en.i18n.json +++ b/i18n/en.i18n.json @@ -902,5 +902,7 @@ "jailed": "Jailed", "kicked": "Kicked", "sponsored": "Sponsored", - "guild-kicks": "Guild Kicks" + "guild-kicks": "Guild Kicks", + "proposals-account": "Proposals by {{account}}", + "memberships-account": "Memberships of {{account}}" } diff --git a/imports/ui/components/Menu/Menu.jsx b/imports/ui/components/Menu/Menu.jsx index 29aff7b31..1d0411b0e 100644 --- a/imports/ui/components/Menu/Menu.jsx +++ b/imports/ui/components/Menu/Menu.jsx @@ -6,7 +6,8 @@ import { ApolloProvider } from 'react-apollo'; import { useQuery } from '@apollo/react-hooks'; import { TAPi18n } from 'meteor/tap:i18n'; import PropTypes from 'prop-types'; -import { setupWeb3, getWeb3Wallet } from '/imports/startup/both/modules/metamask'; +import { shortenCryptoName, getWeb3Wallet } from '/imports/startup/both/modules/metamask'; +import { defaults } from '/lib/const.js'; import Item from '/imports/ui/components/Item/Item.jsx'; import DAO from '/imports/ui/components/DAO/DAO.jsx'; @@ -110,11 +111,18 @@ const _getProposalCount = (list, label) => { return _.reduce(counts, (memory, numerator) => { return parseInt(memory + numerator, 10); }, 0); }; +const _getHeadline = (headline, account) => { + if (account === defaults.EMPTY) { + return TAPi18n.__(headline); + } + return TAPi18n.__(`${headline}-account`).replace('{{account}}', shortenCryptoName(account)); +}; + /** * @summary displays the contents of a poll */ const MenuQuery = ({ account }) => { - const { loading, error, data } = useQuery(gql(GET_MENU.replace('{{memberAddress}}', '0x865c2f85c9fea1c6ac7f53de07554d68cb92ed88'))); + const { loading, error, data } = useQuery(gql(GET_MENU.replace('{{memberAddress}}', account))); if (loading) { return ( @@ -153,11 +161,11 @@ const MenuQuery = ({ account }) => {
- {TAPi18n.__('proposals')} + {_getHeadline('proposals', account)}
{menuList}
- {TAPi18n.__('memberships')} + {_getHeadline('memberships', account)}
{daoList}
@@ -167,10 +175,6 @@ const MenuQuery = ({ account }) => { }; MenuQuery.propTypes = { - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node, - ]), account: PropTypes.string, }; @@ -182,7 +186,7 @@ export default class Menu extends Component { super(props); this.state = { - accounts: ['0x0'], + accounts: [defaults.EMPTY], }; } diff --git a/imports/ui/components/Vote/Vote.jsx b/imports/ui/components/Vote/Vote.jsx index 6d3beb445..442634d9e 100644 --- a/imports/ui/components/Vote/Vote.jsx +++ b/imports/ui/components/Vote/Vote.jsx @@ -63,7 +63,7 @@ const VoteQuery = () => { return data.votes.map((vote) => { return ( -
+
diff --git a/lib/const.js b/lib/const.js index 88ab6b098..41a38ffec 100644 --- a/lib/const.js +++ b/lib/const.js @@ -88,7 +88,7 @@ const _gui = { MOLOCH_DAPP: true, LIMIT_TRANSACTIONS_PER_LEDGER: 10, COLLECTIVE_MAX_FETCH: 25, - MAX_LENGTH_ACCOUNT_NAMES: 16, + MAX_LENGTH_ACCOUNT_NAMES: 19, }; /** @@ -116,6 +116,7 @@ const _defaults = { START_BLOCK: 5000000, CRON_JOB_TIMER: '0 59 * * * *', ORACLE_BLOCKTIME: 25000, + EMPTY: '0x0', }; const _replicaThreshold = { From 6dbf2b338ac2882b4100fb3aed4fa436bad62ddd Mon Sep 17 00:00:00 2001 From: santisiri Date: Wed, 29 Jul 2020 16:21:25 +0200 Subject: [PATCH 13/15] display empty warning on sidebar menu --- i18n/en.i18n.json | 5 +- imports/ui/components/Menu/Menu.jsx | 144 +++++++++----- imports/ui/components/Timeline/Timeline.jsx | 196 +++++++++++--------- imports/ui/components/Timeline/queries.js | 63 ------- public/templates/daoverse/css/daoverse.css | 11 +- public/templates/daoverse/css/extra.css | 9 + 6 files changed, 224 insertions(+), 204 deletions(-) delete mode 100644 imports/ui/components/Timeline/queries.js diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json index 7cbcfdd41..b6b5ed8e9 100644 --- a/i18n/en.i18n.json +++ b/i18n/en.i18n.json @@ -904,5 +904,8 @@ "sponsored": "Sponsored", "guild-kicks": "Guild Kicks", "proposals-account": "Proposals by {{account}}", - "memberships-account": "Memberships of {{account}}" + "memberships-account": "Memberships of {{account}}", + "proposals-sidebar": "Recent Proposals", + "memberships-sidebar": "Your Memberships", + "no-memberships-found": "None found" } diff --git a/imports/ui/components/Menu/Menu.jsx b/imports/ui/components/Menu/Menu.jsx index 1d0411b0e..2f2861c0b 100644 --- a/imports/ui/components/Menu/Menu.jsx +++ b/imports/ui/components/Menu/Menu.jsx @@ -1,5 +1,6 @@ import { Meteor } from 'meteor/meteor'; import React, { Component } from 'react'; +import { Router } from 'meteor/iron:router'; import ApolloClient, { gql, InMemoryCache } from 'apollo-boost'; import { ApolloProvider } from 'react-apollo'; @@ -14,12 +15,7 @@ import DAO from '/imports/ui/components/DAO/DAO.jsx'; const numeral = require('numeral'); -const client = new ApolloClient({ - uri: Meteor.settings.public.graph.molochs, - cache: new InMemoryCache(), -}); - -const GET_MENU = ` +export const GET_MEMBERSHIPS = ` { members(where: { memberAddress: "{{memberAddress}}" }) { id @@ -49,9 +45,13 @@ const GET_MENU = ` proposedToKick } } - `; +const client = new ApolloClient({ + uri: Meteor.settings.public.graph.molochs, + cache: new InMemoryCache(), +}); + /** * @summary style based on type of device * @return {string} with css classes @@ -69,13 +69,13 @@ const _getMenuStyle = () => { */ const _getProposalCount = (list, label) => { const now = parseInt(new Date().getTime() / 1000, 10); - const counts = []; + const counter = []; _.reduce(list, (memo, num) => { if (label === 'all') { - counts.push(num.submissions.length); + counter.push(num.submissions.length); } - counts.push( + counter.push( _.reduce(num.submissions, (iterator, proposal) => { switch (label) { case 'in-queue': @@ -108,12 +108,18 @@ const _getProposalCount = (list, label) => { }, 0) ); }, 0); - return _.reduce(counts, (memory, numerator) => { return parseInt(memory + numerator, 10); }, 0); + return _.reduce(counter, (memory, numerator) => { return parseInt(memory + numerator, 10); }, 0); }; +/** +* @summary displays corresponding separator headline +* @param {string} headline from TAPi18n dictionary +* @param {string} account to parse in title +* @return {string} with headline for separator +*/ const _getHeadline = (headline, account) => { - if (account === defaults.EMPTY) { - return TAPi18n.__(headline); + if (Router.current().url.replace(window.location.origin, '') === '/') { + return TAPi18n.__(`${headline}-sidebar`); } return TAPi18n.__(`${headline}-account`).replace('{{account}}', shortenCryptoName(account)); }; @@ -122,39 +128,85 @@ const _getHeadline = (headline, account) => { * @summary displays the contents of a poll */ const MenuQuery = ({ account }) => { - const { loading, error, data } = useQuery(gql(GET_MENU.replace('{{memberAddress}}', account))); - - if (loading) { - return ( -
- ); - } - if (error) return `Error! ${error}`; - - console.log(data); + const atHome = (Router.current().url.replace(window.location.origin, '') === '/'); + const hideEmpty = !atHome; - const menuList = ( + const defaultMenu = (
- - - - - - - - + + + + + + + +
); - const sorted = _.sortBy(data.members, (item) => { return (item.submissions.length * -1); }); + console.log(`-0---Defualt maenu`); + console.log(defaultMenu); + console.log(_.where(defaultMenu.props.children)); + + console.log(`account: ${account}`); + + if (account !== defaults.EMPTY) { + const { loading, error, data } = useQuery(gql(GET_MEMBERSHIPS.replace('{{memberAddress}}', account))); + + if (loading) { + return ( +
+ ); + } + if (error) return `Error! ${error}`; + + console.log(data); + + const sorted = _.sortBy(data.members, (item) => { return (item.submissions.length * -1); }); + const daoList = sorted.map((item, key) => { + return ( + + + + ); + }); + + const menuList = ( +
+ + + + + + + + +
+ ); - const daoList = sorted.map((item, key) => { return ( - - - +
+
+
+
+ {_getHeadline('proposals', account)} +
+ {menuList} +
+ {_getHeadline('memberships', account)} +
+ {(daoList.length > 0) ? + daoList + : +
+ {TAPi18n.__('no-memberships-found')} +
+ } +
+
+
); - }); + } return (
@@ -163,11 +215,7 @@ const MenuQuery = ({ account }) => {
{_getHeadline('proposals', account)}
- {menuList} -
- {_getHeadline('memberships', account)} -
- {daoList} + {defaultMenu}
@@ -203,10 +251,18 @@ export default class Menu extends Component { } } + getContext() { + const current = Router.current().url.replace(window.location.origin, ''); + if (current === '/') { + return this.state.accounts[0]; + } + return Router.current().params.account; + } + render() { return ( - + ); } diff --git a/imports/ui/components/Timeline/Timeline.jsx b/imports/ui/components/Timeline/Timeline.jsx index 49ff83b80..4c92bff1a 100644 --- a/imports/ui/components/Timeline/Timeline.jsx +++ b/imports/ui/components/Timeline/Timeline.jsx @@ -1,9 +1,9 @@ import { Meteor } from 'meteor/meteor'; import React from 'react'; -import ApolloClient, { InMemoryCache } from 'apollo-boost'; -import { ApolloProvider, Query } from 'react-apollo'; +import ApolloClient, { InMemoryCache, gql } from 'apollo-boost'; +import { ApolloProvider } from 'react-apollo'; import { TAPi18n } from 'meteor/tap:i18n'; -import PropTypes from 'prop-types'; +import { useQuery } from '@apollo/react-hooks'; import Account from '/imports/ui/components/Account/Account.jsx'; import Post from '/imports/ui/components/Post/Post.jsx'; @@ -20,7 +20,37 @@ import Survey from '/imports/ui/components/Poll/Survey'; import Social from '/imports/ui/components/Social/Social'; import { defaults } from '/lib/const'; -import { MOLOCHS } from '/imports/ui/components/Timeline/queries'; + +export const GET_PROPOSALS = ` +{ + proposals(first: 50, orderBy:createdAt, orderDirection:desc) { + id + proposalId + createdAt + proposalIndex + startingPeriod + moloch { + id + } + memberAddress + applicant + tributeOffered + tributeToken + tributeTokenSymbol + tributeTokenDecimals + sharesRequested + yesVotes + noVotes + yesShares + noShares + details + processed + votingPeriodStarts + votingPeriodEnds + gracePeriodEnds + } +} +`; const client = new ApolloClient({ uri: Meteor.settings.public.graph.molochs, @@ -31,100 +61,90 @@ const _getPercentage = (percentageAmount, remainder) => { return parseFloat((percentageAmount * 100) / (percentageAmount + remainder), 10); }; -const Feed = (props) => { - return ( - - {({ loading, error, data }) => { - if (loading) return ; - if (error) return

Error!

; +const Feed = () => { + const { loading, error, data } = useQuery(gql(GET_PROPOSALS)); - console.log(data.proposals); + if (loading) return ; + if (error) return

Error!

; - const accountAddress = Meteor.user() ? Meteor.user().username : null; - const daoName = 'MolochDAO'; - const timestamp = new Date().getTime(); + console.log(data.proposals); - return data.proposals.map((proposal) => { - const totalVoters = parseInt(proposal.yesVotes.toNumber() + proposal.noVotes.toNumber(), 10).toString(); - const yesPercentage = _getPercentage(proposal.yesShares.toNumber(), proposal.noShares.toNumber()).toString(); - const noPercentage = _getPercentage(proposal.noShares.toNumber(), proposal.yesShares.toNumber()).toString(); - const daoAddress = proposal.moloch.id; - const status = (proposal.didPass) ? 'PASSED' : 'FAILED'; - const isPoll = (proposal.startingPeriod !== '0'); - const url = `/proposal/${proposal.id}`; + const accountAddress = Meteor.user() ? Meteor.user().username : null; + const daoName = 'MolochDAO'; + const timestamp = new Date().getTime(); - return ( - - - - - - - - - - - - - {(isPoll) ? - - - - - - - - - - - - - : - null - } - - - - - ); - }); - }} - - ); -}; + return data.proposals.map((proposal) => { + const totalVoters = parseInt(proposal.yesVotes.toNumber() + proposal.noVotes.toNumber(), 10).toString(); + const yesPercentage = _getPercentage(proposal.yesShares.toNumber(), proposal.noShares.toNumber()).toString(); + const noPercentage = _getPercentage(proposal.noShares.toNumber(), proposal.yesShares.toNumber()).toString(); + const daoAddress = proposal.moloch.id; + const status = (proposal.didPass) ? 'PASSED' : 'FAILED'; + const isPoll = (proposal.startingPeriod !== '0'); + const url = `/dao/${proposal.moloch.id}/proposal/${proposal.proposalIndex}`; -Feed.propTypes = { - query: PropTypes.instanceOf(Object), + return ( + + + + + + + + + + + + + {(isPoll) ? + + + + + + + + + + + + + : + null + } + + + + + ); + }); }; const Timeline = () => { return ( - + ); }; diff --git a/imports/ui/components/Timeline/queries.js b/imports/ui/components/Timeline/queries.js deleted file mode 100644 index 58d6d3dea..000000000 --- a/imports/ui/components/Timeline/queries.js +++ /dev/null @@ -1,63 +0,0 @@ -import { gql } from 'apollo-boost'; - -export const MOLOCH_DAO = gql` -{ - proposals(first: 25) { - id - timestamp - proposalIndex - startingPeriod - member { - id - } - memberAddress - applicant { - applicantAddress - } - tokenTribute - sharesRequested - yesVotes - noVotes - yesShares - noShares - details - processed - status - votingPeriodBegins - votingPeriodEnds - gracePeriodEnds - } -} -`; - -export const MOLOCHS = gql` -{ - proposals(first: 50, orderBy:createdAt, orderDirection:desc) { - id - proposalId - createdAt - proposalIndex - startingPeriod - moloch { - id - } - memberAddress - applicant - tributeOffered - tributeToken - tributeTokenSymbol - tributeTokenDecimals - sharesRequested - yesVotes - noVotes - yesShares - noShares - details - processed - votingPeriodStarts - votingPeriodEnds - gracePeriodEnds - } -} -`; - diff --git a/public/templates/daoverse/css/daoverse.css b/public/templates/daoverse/css/daoverse.css index 9b305b9e9..65e1a6d88 100755 --- a/public/templates/daoverse/css/daoverse.css +++ b/public/templates/daoverse/css/daoverse.css @@ -1404,7 +1404,6 @@ blockquote { background-color: #fff; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(64%, #fff), to(#ececec)); background-image: linear-gradient(180deg, #fff 64%, #ececec); - box-shadow: inset 0 0 1px 0 #dfdfdf, 0 5px 20px -10px #838383; } .vote.vote-search.vote-feed { @@ -1413,10 +1412,10 @@ blockquote { padding-bottom: 0px; border-style: solid; border-width: 1px; - border-color: rgba(0, 0, 0, .02); + border-color: rgb(224 218 226); border-radius: 8px; background-image: none; - box-shadow: 0 2px 8px 0 hsla(0, 0%, 72%, .37); + /* box-shadow: 0 2px 8px 0 hsla(0, 0%, 72%, .37); */ -webkit-transition: all 200ms ease; transition: all 200ms ease; color: #000; @@ -1424,16 +1423,13 @@ blockquote { } .vote.vote-search.vote-feed:hover { - margin-top: 0px; - margin-bottom: 25px; - box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1); color: #0d0d17; + border-color: rgb(88 1 115 / 40%); } .vote.vote-search.vote-feed:active { margin-top: 0px; margin-bottom: 21px; - box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1); } .vote.vote-search.vote-feed.vote-empty { @@ -1441,7 +1437,6 @@ blockquote { border-width: 1px; border-color: hsla(0, 0%, 90%, .72); background-color: transparent; - box-shadow: none; } .event-vote { diff --git a/public/templates/daoverse/css/extra.css b/public/templates/daoverse/css/extra.css index 60d6b756a..003a7cb9a 100644 --- a/public/templates/daoverse/css/extra.css +++ b/public/templates/daoverse/css/extra.css @@ -770,6 +770,15 @@ width: 1px; box-shadow: -1px 5px 10px 0px rgba(0, 0, 0, .2); } +.empty { + border: 1px dashed #bfb8c6; + font-size: 0.8em; + padding: 10px; + text-align: left; + border-radius: 5px; + color: #bfb8c6; +} + .token-wrap.token-wrap-multi { margin-bottom:10px; } From 429aec8eb16e5db9fe8084715308bc9c62368299 Mon Sep 17 00:00:00 2001 From: santisiri Date: Wed, 29 Jul 2020 16:49:23 +0200 Subject: [PATCH 14/15] devil is in the details --- i18n/en.i18n.json | 2 +- imports/ui/components/Item/Item.jsx | 9 ++++++++- imports/ui/components/Menu/Menu.jsx | 6 ------ public/templates/daoverse/css/extra.css | 5 +++++ 4 files changed, 14 insertions(+), 8 deletions(-) diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json index b6b5ed8e9..3b42b05a0 100644 --- a/i18n/en.i18n.json +++ b/i18n/en.i18n.json @@ -907,5 +907,5 @@ "memberships-account": "Memberships of {{account}}", "proposals-sidebar": "Recent Proposals", "memberships-sidebar": "Your Memberships", - "no-memberships-found": "None found" + "no-memberships-found": "No DAO memberships found." } diff --git a/imports/ui/components/Item/Item.jsx b/imports/ui/components/Item/Item.jsx index bfcf6b6cf..d91aea3e0 100644 --- a/imports/ui/components/Item/Item.jsx +++ b/imports/ui/components/Item/Item.jsx @@ -70,6 +70,13 @@ export default class Item extends Component { 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 ( @@ -81,7 +88,7 @@ export default class Item extends Component { : null } -
+
{this.getLabel()}
diff --git a/imports/ui/components/Menu/Menu.jsx b/imports/ui/components/Menu/Menu.jsx index 2f2861c0b..37dacb181 100644 --- a/imports/ui/components/Menu/Menu.jsx +++ b/imports/ui/components/Menu/Menu.jsx @@ -144,12 +144,6 @@ const MenuQuery = ({ account }) => {
); - console.log(`-0---Defualt maenu`); - console.log(defaultMenu); - console.log(_.where(defaultMenu.props.children)); - - console.log(`account: ${account}`); - if (account !== defaults.EMPTY) { const { loading, error, data } = useQuery(gql(GET_MEMBERSHIPS.replace('{{memberAddress}}', account))); diff --git a/public/templates/daoverse/css/extra.css b/public/templates/daoverse/css/extra.css index 003a7cb9a..42f92362b 100644 --- a/public/templates/daoverse/css/extra.css +++ b/public/templates/daoverse/css/extra.css @@ -779,6 +779,11 @@ width: 1px; color: #bfb8c6; } +.sidebar-label.sidebar-label-dao { + max-height: 33px; + margin-top: -3px; +} + .token-wrap.token-wrap-multi { margin-bottom:10px; } From ea6013a93b97f8f24820928ec55c4b96d240517f Mon Sep 17 00:00:00 2001 From: santisiri Date: Wed, 29 Jul 2020 17:31:31 +0200 Subject: [PATCH 15/15] new sidebar menu done --- imports/ui/components/Menu/Menu.jsx | 47 ++++++++++++++++------------- 1 file changed, 26 insertions(+), 21 deletions(-) diff --git a/imports/ui/components/Menu/Menu.jsx b/imports/ui/components/Menu/Menu.jsx index 37dacb181..1ce0f0385 100644 --- a/imports/ui/components/Menu/Menu.jsx +++ b/imports/ui/components/Menu/Menu.jsx @@ -130,17 +130,18 @@ const _getHeadline = (headline, account) => { const MenuQuery = ({ account }) => { const atHome = (Router.current().url.replace(window.location.origin, '') === '/'); const hideEmpty = !atHome; + const defaultLabels = ['all', 'in-queue', 'voting-now', 'grace-period', 'ready-to-process', 'guild-kicks', 'rejected', 'approved']; const defaultMenu = (
- - - - - - - - + + + + + + + +
); @@ -149,7 +150,17 @@ const MenuQuery = ({ account }) => { if (loading) { return ( -
+
+
+
+
+ {_getHeadline('proposals', account)} +
+ {
} +
+
+
+ ); } if (error) return `Error! ${error}`; @@ -165,18 +176,12 @@ const MenuQuery = ({ account }) => { ); }); - const menuList = ( -
- - - - - - - - -
- ); + let i = 0; + for (const defaultItem of defaultMenu.props.children) { + defaultItem.props.score = (atHome) ? null : _getProposalCount(data.members, defaultLabels[i]); + i += 1; + } + const menuList = defaultMenu; return (