From d4a7ebd19ad2718bb2237e5c0aa3a822025c89ce Mon Sep 17 00:00:00 2001
From: bartosz-lipinski <264380+bartosz-lipinski@users.noreply.github.com>
Date: Sun, 21 Mar 2021 15:14:00 -0500
Subject: [PATCH] feat: mobile layout
---
.../proposals/src/components/Layout/index.tsx | 38 ++++---
packages/proposals/src/routes.tsx | 2 +-
packages/proposals/src/views/home/index.tsx | 102 ++++++++++++------
packages/proposals/src/views/home/style.less | 49 +++++++--
.../proposals/src/views/proposals/index.tsx | 38 +++----
.../proposals/src/views/proposals/style.less | 12 ++-
6 files changed, 162 insertions(+), 79 deletions(-)
diff --git a/packages/proposals/src/components/Layout/index.tsx b/packages/proposals/src/components/Layout/index.tsx
index 2f746cf..84ffb3f 100644
--- a/packages/proposals/src/components/Layout/index.tsx
+++ b/packages/proposals/src/components/Layout/index.tsx
@@ -1,13 +1,10 @@
import React from 'react';
import './../../App.less';
-import { Divider, Layout, Menu } from 'antd';
+import { Breadcrumb, Layout } from 'antd';
import { Link, useLocation } from 'react-router-dom';
import { LABELS } from '../../constants';
-import config from './../../../package.json';
import { contexts, components } from '@oyster/common';
-import { NewProposalMenuItem } from '../../views/proposal/new';
-import { RegisterGovernanceMenuItem } from '../../views/governance/register';
import { Content, Header } from 'antd/lib/layout/layout';
import Logo from './dark-horizontal-combined-rainbow.inline.svg';
@@ -18,16 +15,30 @@ export const AppLayout = React.memo((props: any) => {
const { env } = useConnectionConfig();
const location = useLocation();
- const paths: { [key: string]: string } = {
- '/': '1',
- '/dashboard': '2',
+ const breadcrumbNameMap: any = {
+ '/governance': 'Governance',
+ '/apps/1': 'Application1',
+ '/apps/2': 'Application2',
+ '/apps/1/detail': 'Detail',
+ '/apps/2/detail': 'Detail',
};
- const current =
- [...Object.keys(paths)].find(key => location.pathname.startsWith(key)) ||
- '';
- const defaultKey = paths[current] || '1';
- const theme = 'dark';
+ const pathSnippets = location.pathname.split('/').filter(i => i);
+ const extraBreadcrumbItems = pathSnippets.map((_, index) => {
+ const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
+ return (
+
+ {breadcrumbNameMap[url]}
+
+ );
+ });
+ const breadcrumbItems = [
+
+ Home
+ ,
+ ].concat(extraBreadcrumbItems);
+
+ // TODO: add breadcrumb
return (
@@ -46,7 +57,8 @@ export const AppLayout = React.memo((props: any) => {
useWalletBadge={true}
/>
-
+
+ {/* {breadcrumbItems} */}
{props.children}
diff --git a/packages/proposals/src/routes.tsx b/packages/proposals/src/routes.tsx
index fe870a2..430fb48 100644
--- a/packages/proposals/src/routes.tsx
+++ b/packages/proposals/src/routes.tsx
@@ -23,7 +23,7 @@ export function Routes() {
} />
} />
- } />
+ } />
{
const history = useHistory();
- const { configs } = useProposals();
- const [page, setPage] = useState(0);
+ const { configs, proposals } = useProposals();
+ const { connected } = useWallet();
const listData = useMemo(() => {
const newListData: any[] = [];
- Object.keys(configs).forEach(key => {
- const config = configs[key];
+ Object.keys(configs).forEach(configKey => {
+ const config = configs[configKey];
+ const mint = config.info.governanceMint.toBase58();
+
+ const proposalCount = Object.keys(proposals).reduce((acc, proposalKey) => {
+ let proposal = proposals[proposalKey];
+ if(proposal.info.config.toBase58() == configKey) {
+ acc.active = acc.active + (
+ proposal.info.state.status === TimelockStateStatus.Voting ||
+ proposal.info.state.status === TimelockStateStatus.Draft ? 1 : 0);
+
+ acc.total = acc.total +1;
+ }
+
+ return acc;
+ }, {
+ active: 0,
+ total: 0,
+ });
+
newListData.push({
- href: '/proposals/' + key,
+ href: '/governance/' + configKey,
title: config.info.name,
- badge: ,
+ badge:
+
+ ,
+ proposalCount,
+ configKey,
config,
});
});
return newListData;
- }, [configs]);
+ }, [configs, proposals]);
return (
-
-
-
-
-
Governance
-
-
- (
- history.push(item.href)}>
-
-
- )}
- />
-
-
+ <>
+
+
+
+
+
Governance
+
+
+ (
+ history.push(item.href)}
+ extra={
+ <>
+
+ >
+ }>
+
+
+
+
+
+ )}
+ />
+
+
+ >
);
};
diff --git a/packages/proposals/src/views/home/style.less b/packages/proposals/src/views/home/style.less
index 6bff20e..9f30eb0 100644
--- a/packages/proposals/src/views/home/style.less
+++ b/packages/proposals/src/views/home/style.less
@@ -1,17 +1,23 @@
@import '~antd/dist/antd.dark.less';
+.governance-container {
+ margin-left: auto;
+ margin-right: auto;
+ position: relative;
+}
+
.governance-title {
font-family: "FF Oxide Solid";
font-style: normal;
font-weight: 300;
letter-spacing: 0px;
position: absolute;
- top: 240px;
- left: calc(20% + 10px);
+ top: -40px;
z-index: 2;
display: flex;
align-items: center;
- right: calc(20% + 10px);
+ width: 100%;
+ padding: 0px 10px;
h1 {
font-size: 28px;
@@ -24,13 +30,32 @@
background-color: #202020;
padding: 0px !important;
border-radius: 15px;
- margin-left: 20%;
- margin-right: 20%;
- :hover {
- cursor: pointer;
- background-color: #252425;
- border-radius: 15px;
+ .ant-badge-count {
+ top: 8px !important;
+ right: 12px !important;
+ }
+
+ .ant-list-item-extra {
+ user-select: none;
+ pointer-events: none;
+ display: flex;
+ margin-left: 0px !important;
+ margin-right: auto;
+
+ .ant-statistic {
+ margin-top: 5px;
+ padding: 0px 20px;
+
+ .ant-statistic-content {
+ font-size: 20px;
+ }
+ }
+ }
+
+ .ant-list-item-main {
+ flex: 0 !important;
+ min-width: 250px;
}
.ant-list-item-meta {
@@ -46,3 +71,9 @@
}
}
}
+
+.governance-item:hover {
+ cursor: pointer;
+ background-color: #252425;
+ border-radius: 15px;
+}
diff --git a/packages/proposals/src/views/proposals/index.tsx b/packages/proposals/src/views/proposals/index.tsx
index c033d4f..cccb89f 100644
--- a/packages/proposals/src/views/proposals/index.tsx
+++ b/packages/proposals/src/views/proposals/index.tsx
@@ -2,10 +2,9 @@ import { Col, List, Row } from 'antd';
import React, { useMemo, useState } from 'react';
import { useConfig, useProposals } from '../../contexts/proposals';
import './style.less'; // Don't remove this line, it will break dark mode if you do due to weird transpiling conditions
-import { StateBadge, StateBadgeRibbon } from '../../components/Proposal/StateBadge';
-import { urlRegex } from '../proposal';
+import { StateBadge } from '../../components/Proposal/StateBadge';
import { useHistory, useParams } from 'react-router-dom';
-import { TokenIcon } from '@oyster/common';
+import { TokenIcon, useConnectionConfig, useWallet } from '@oyster/common';
import { NewProposalMenuItem } from '../proposal/new';
const PAGE_SIZE = 10;
@@ -15,6 +14,13 @@ export const ProposalsView = () => {
const { proposals } = useProposals();
const config = useConfig(id);
const [page, setPage] = useState(0);
+ const { tokenMap } = useConnectionConfig();
+ const { connected } = useWallet();
+ const token = tokenMap.get(config?.info.governanceMint.toBase58() || '') as any;
+ const tokenBackground = token?.extensions?.background || 'https://solana.com/static/8c151e179d2d7e80255bdae6563209f2/6833b/validators.webp';
+
+ const mint = config?.info.governanceMint.toBase58() || '';
+
const listData = useMemo(() => {
const newListData: any[] = [];
@@ -24,21 +30,12 @@ export const ProposalsView = () => {
return;
}
-
-
newListData.push({
href: '/proposal/' + key,
title: proposal.info.state.name,
- badge: ,
+ badge: ,
status: proposal.info.state.status,
proposal,
- description: proposal.info.state.descLink.match(urlRegex) ? (
-
- Link to markdown
-
- ) : (
- proposal.info.state.descLink
- ),
});
});
return newListData;
@@ -46,13 +43,18 @@ export const ProposalsView = () => {
return (
-
-
+
+
-
-
{config?.info.name}
+
+
-
+