From 50d3b33bc2853fdb008e659f48aeda57998d4b0a Mon Sep 17 00:00:00 2001 From: Ezerous Date: Mon, 25 Jan 2021 20:30:48 +0200 Subject: [PATCH] Homescreen improvements --- packages/concordia-app/package.json | 2 +- .../public/locales/en/translation.json | 3 +- .../src/components/LoadingScreen.jsx | 5 +- .../TopicList/TopicListRow/index.jsx | 115 +++++++++--------- .../TopicList/TopicListRow/styles.css | 56 ++++++--- .../src/components/TopicList/index.jsx | 24 +++- .../src/components/TopicList/styles.css | 8 ++ .../MainLayout/MainLayoutMenu/index.jsx | 11 -- .../MainLayout/MainLayoutMenu/styles.css | 2 +- yarn.lock | 102 ++++++++-------- 10 files changed, 183 insertions(+), 145 deletions(-) diff --git a/packages/concordia-app/package.json b/packages/concordia-app/package.json index bbe624a..0cc2aeb 100644 --- a/packages/concordia-app/package.json +++ b/packages/concordia-app/package.json @@ -47,7 +47,7 @@ "react-timeago": "~5.2.0", "redux-saga": "~1.1.3", "semantic-ui-css": "~2.4.1", - "semantic-ui-react": "~1.2.1", + "semantic-ui-react": "~2.0.3", "web3": "~1.3.3" }, "devDependencies": { diff --git a/packages/concordia-app/public/locales/en/translation.json b/packages/concordia-app/public/locales/en/translation.json index 33a1c4d..e9c42a5 100644 --- a/packages/concordia-app/public/locales/en/translation.json +++ b/packages/concordia-app/public/locales/en/translation.json @@ -72,11 +72,10 @@ "topic.create.form.post.button": "Post", "topic.create.form.subject.field.label": "Topic subject", "topic.create.form.subject.field.placeholder": "Subject", - "topic.list.row.author": "by {{author}}", "topic.list.row.number.of.replies": "{{numberOfReplies}} replies", "topic.list.row.topic.id": "#{{id}}", "username.selector.error.username.empty.message": "Username is required", "username.selector.error.username.taken.message": "The username {{username}} is already taken.", "username.selector.username.field.label": "Username", "username.selector.username.field.placeholder": "Username" -} \ No newline at end of file +} diff --git a/packages/concordia-app/src/components/LoadingScreen.jsx b/packages/concordia-app/src/components/LoadingScreen.jsx index da719f1..a24d278 100644 --- a/packages/concordia-app/src/components/LoadingScreen.jsx +++ b/packages/concordia-app/src/components/LoadingScreen.jsx @@ -1,9 +1,8 @@ import React from 'react'; +import { Loader } from 'semantic-ui-react'; const LoadingScreen = () => ( -
- Loading -
+ ); export default LoadingScreen; diff --git a/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx b/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx index fd96bf4..e70c0a4 100644 --- a/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx +++ b/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx @@ -2,12 +2,11 @@ import React, { memo, useEffect, useMemo, useState, } from 'react'; import { - Dimmer, Grid, Image, List, Placeholder, + Dimmer, Grid, Image, Item, List, Placeholder, Segment, } from 'semantic-ui-react'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; import TimeAgo from 'react-timeago'; -import { useHistory } from 'react-router'; import { useDispatch, useSelector } from 'react-redux'; import { Link } from 'react-router-dom'; import { FETCH_USER_DATABASE } from '../../../redux/actions/peerDbReplicationActions'; @@ -34,7 +33,6 @@ const TopicListRow = (props) => { const topics = useSelector((state) => state.orbitData.topics); const users = useSelector((state) => state.orbitData.users); const dispatch = useDispatch(); - const history = useHistory(); const { t } = useTranslation(); useEffect(() => { @@ -98,7 +96,6 @@ const TopicListRow = (props) => { ? ( ) @@ -124,57 +121,65 @@ const TopicListRow = (props) => { return authorAvatar; }, [authorAvatar, topicAuthorAddress]); - return useMemo(() => { - const handleTopicClick = () => { - history.push(`/topics/${topicId}`); - }; - - return ( - - {authorAvatarLink} - - - - - {topicSubject !== null - ? topicSubject - : } - - - - {t('topic.list.row.topic.id', { id: topicId })} - - - - - - - - {topicAuthor !== null && timeAgo !== null - ? ( -
- {t('topic.list.row.author', { author: topicAuthor })} - ,  - -
- ) - : } - - - {numberOfReplies !== null - ? ( - - {t('topic.list.row.number.of.replies', { numberOfReplies })} - - ) - : } - - - - - - ); - }, [authorAvatarLink, history, loading, numberOfReplies, t, timeAgo, topicAuthor, topicId, topicSubject]); + return useMemo(() => ( + + + + + + {authorAvatarLink} + + + + + + + + {topicSubject !== null + ? topicSubject + : } + + + + {t('topic.list.row.topic.id', { id: topicId })} + + + + + + {topicAuthor !== null && timeAgo !== null + ? ( +
+ +  •  + + {topicAuthor} + +
+ ) + : } + + + {numberOfReplies !== null + ? ( + + {t('topic.list.row.number.of.replies', { numberOfReplies })} + + ) + : } + + + + + + + + + + + + + ), [authorAvatarLink, loading, numberOfReplies, t, timeAgo, topicAuthor, topicAuthorAddress, topicId, topicSubject]); }; TopicListRow.defaultProps = { diff --git a/packages/concordia-app/src/components/TopicList/TopicListRow/styles.css b/packages/concordia-app/src/components/TopicList/TopicListRow/styles.css index 6f92675..e520ff8 100644 --- a/packages/concordia-app/src/components/TopicList/TopicListRow/styles.css +++ b/packages/concordia-app/src/components/TopicList/TopicListRow/styles.css @@ -1,21 +1,49 @@ -.topic-metadata { - font-size: 12px !important; - font-weight: initial; -} - -.list-item { +.topic-row { display: flex !important; text-align: start; } -.profile-picture { - cursor: pointer; - max-width: 36px; - max-height: 36px; - margin: 0; - vertical-align: middle; +.topic-row-segment { + flex-grow: 1; } -.list-content { - flex-grow: 1; +.topic-row-segment:hover { + background-color: rgba(0, 0, 0, 0.03); +} + +.topic-row-segment div { + color: black; +} + +.topic-row-avatar { + margin: auto; + padding-left: 0.75em !important; + padding-right: 0 !important; + font-size: 2em; +} + +.topic-row-avatar i { + text-align: left !important; + margin:0; +} + +.topic-row-content { + padding-left: 2em !important; +} + +.topic-row-subject { + font-size: 1.25em; + font-weight: bold; +} + +.topic-row-metadata { + font-size: 12px !important; + font-weight: initial; +} + +.profile-picture { + border-radius: 50%; + max-width: none !important; + width: 2em; + height: 2em; } diff --git a/packages/concordia-app/src/components/TopicList/index.jsx b/packages/concordia-app/src/components/TopicList/index.jsx index 8a85f4e..ee53b99 100644 --- a/packages/concordia-app/src/components/TopicList/index.jsx +++ b/packages/concordia-app/src/components/TopicList/index.jsx @@ -3,10 +3,12 @@ import React, { } from 'react'; import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; -import { List } from 'semantic-ui-react'; +import { useHistory } from 'react-router'; +import { Button, List } from 'semantic-ui-react'; import TopicListRow from './TopicListRow'; import { drizzle } from '../../redux/store'; import { FORUM_CONTRACT } from '../../constants/contracts/ContractNames'; +import './styles.css'; const { contracts: { [FORUM_CONTRACT]: { methods: { getTopic: { cacheCall: getTopicChainData } } } } } = drizzle; @@ -15,6 +17,8 @@ const TopicList = (props) => { const [getTopicCallHashes, setGetTopicCallHashes] = useState([]); const drizzleInitialized = useSelector((state) => state.drizzleStatus.initialized); const drizzleInitializationFailed = useSelector((state) => state.drizzleStatus.failed); + const hasSignedUp = useSelector((state) => state.user.hasSignedUp); + const history = useHistory(); useEffect(() => { if (drizzleInitialized && !drizzleInitializationFailed) { @@ -51,9 +55,21 @@ const TopicList = (props) => { }), [getTopicCallHashes, topicIds]); return ( - - {topics} - +
+ {hasSignedUp && history.location.pathname === '/home' && ( +
); }; diff --git a/packages/concordia-app/src/components/TopicList/styles.css b/packages/concordia-app/src/components/TopicList/styles.css index ac3c53c..3ffc2e8 100644 --- a/packages/concordia-app/src/components/TopicList/styles.css +++ b/packages/concordia-app/src/components/TopicList/styles.css @@ -1,3 +1,11 @@ #topic-list{ height: 100%; + margin-bottom: 4em; + clear: both; +} + +#new-topic-button{ + float:right; + margin-bottom: 2em; + } diff --git a/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx b/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx index b2453f0..012fad6 100644 --- a/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx +++ b/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx @@ -42,17 +42,6 @@ const MainLayoutMenu = () => { app_logo - {hasSignedUp && history.location.pathname === '/home' && ( - history.push('/topics/new')} - position="right" - > - {t('topbar.button.create.topic')} - - )} {hasSignedUp ? (