diff --git a/src/components/Container/Container.scss b/src/components/Container/Container.scss index 632cd7be..b1580d48 100644 --- a/src/components/Container/Container.scss +++ b/src/components/Container/Container.scss @@ -1,7 +1,11 @@ .container { position: relative; + top: 55px; width: 100%; max-width: 1120px; - height: 100vh; + height: calc(100vh - 110px); margin: 0 auto; + &--small { + max-width: 845px; + } } diff --git a/src/components/Container/index.js b/src/components/Container/index.js index e1739d91..c666382b 100644 --- a/src/components/Container/index.js +++ b/src/components/Container/index.js @@ -3,13 +3,17 @@ import propTypes from 'prop-types'; import styles from './Container.scss'; -const Container = ({ children }) => ( -
+const Container = ({ children, className }) => ( +
{children}
); Container.propTypes = { children: propTypes.node.isRequired, + className: propTypes.string, +}; +Container.defaultProps = { + className: '', }; export default Container; diff --git a/src/components/CreateNewProjectWithTokens/index.js b/src/components/CreateNewProjectWithTokens/index.js index 1bdf36f5..f21b8cd1 100644 --- a/src/components/CreateNewProjectWithTokens/index.js +++ b/src/components/CreateNewProjectWithTokens/index.js @@ -149,7 +149,7 @@ class CreateNewProjectWithTokens extends Component { render() { const { steps } = this; const { currentStep, indicatorStep } = this.state; - if (currentStep === steps.uploading) return ; + if (currentStep === steps.uploading) return ; return (
diff --git a/src/components/CreateNewProjectWithoutTokens/index.js b/src/components/CreateNewProjectWithoutTokens/index.js index cc2286a7..cb371f0a 100644 --- a/src/components/CreateNewProjectWithoutTokens/index.js +++ b/src/components/CreateNewProjectWithoutTokens/index.js @@ -181,7 +181,7 @@ class CreateNewProjectWithoutTokens extends Component { render() { const { currentStep, indicatorStep } = this.state; - if (currentStep === 'uploading') return ; + if (currentStep === 'uploading') return ; return (
diff --git a/src/components/DropdownOption/index.js b/src/components/DropdownOption/index.js index 69a6cf81..66d759b2 100644 --- a/src/components/DropdownOption/index.js +++ b/src/components/DropdownOption/index.js @@ -27,10 +27,11 @@ DropdownOption.propTypes = { value: propTypes.string.isRequired, label: propTypes.string.isRequired, select: propTypes.func.isRequired, - subOption: propTypes.string.isRequired, + subOption: propTypes.string, }; DropdownOption.defaultProps = { + subOption: '', }; export default DropdownOption; diff --git a/src/components/Footer/Footer.scss b/src/components/Footer/Footer.scss new file mode 100644 index 00000000..19351ba7 --- /dev/null +++ b/src/components/Footer/Footer.scss @@ -0,0 +1,34 @@ +@import '../../assets/styles/partials/variables'; + +.footer { + padding: 15px 0; + a { + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: center; + color: $border; + font-size: 11px; + text-align: center; + svg { + path { + transition: .2s; + } + } + span { + margin-left: 10px; + transition: .2s; + } + &:hover{ + svg { + path { + opacity: 1; + fill: $primary; + } + } + span { + color: $primary; + } + } + } +} \ No newline at end of file diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js new file mode 100644 index 00000000..82109b80 --- /dev/null +++ b/src/components/Footer/index.js @@ -0,0 +1,15 @@ +import React from 'react'; +import { GithubIcon } from '../Icons'; + +import styles from './Footer.scss'; + +const Footer = () => ( + +); + +export default Footer; diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss index 392cf70d..1c482fe4 100644 --- a/src/components/Header/Header.scss +++ b/src/components/Header/Header.scss @@ -1,7 +1,7 @@ @import '../../assets/styles/partials/variables'; .header { - position: absolute; + position: relative; top: 30px; left: 50%; z-index: 2; diff --git a/src/components/Icons/entities/GithubIcon.js b/src/components/Icons/entities/GithubIcon.js new file mode 100644 index 00000000..f6f0d017 --- /dev/null +++ b/src/components/Icons/entities/GithubIcon.js @@ -0,0 +1,8 @@ +import React from 'react'; + +const GithubIcon = () => ( + + + +); +export default GithubIcon; diff --git a/src/components/Icons/entities/StartIcon.js b/src/components/Icons/entities/StartIcon.js new file mode 100644 index 00000000..699eba1b --- /dev/null +++ b/src/components/Icons/entities/StartIcon.js @@ -0,0 +1,12 @@ +import React from 'react'; + +const StartIcon = () => ( + + + + + + +); + +export default StartIcon; diff --git a/src/components/Icons/index.js b/src/components/Icons/index.js index a8335074..819aa576 100644 --- a/src/components/Icons/index.js +++ b/src/components/Icons/index.js @@ -22,6 +22,8 @@ import TokenName from './entities/TokenNameIcon'; import TxHashIcon from './entities/TxHashIcon'; import TxRecieptIcon from './entities/TxRecieptIcon'; import VerifyIcon from './entities/VerifyIcon'; +import StartIcon from './entities/StartIcon'; +import GithubIcon from './entities/GithubIcon'; export { AddIcon, @@ -48,4 +50,6 @@ export { TxHashIcon, TxRecieptIcon, VerifyIcon, + StartIcon, + GithubIcon, }; diff --git a/src/components/ProjectList/index.js b/src/components/ProjectList/index.js index 08f606f2..beeea7b4 100644 --- a/src/components/ProjectList/index.js +++ b/src/components/ProjectList/index.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import propTypes from 'prop-types'; -import { NavLink } from 'react-router-dom'; +import { NavLink, Redirect } from 'react-router-dom'; import { inject, observer } from 'mobx-react'; import { withTranslation } from 'react-i18next'; import Button from '../Button/Button'; @@ -17,7 +17,10 @@ import styles from '../Login/Login.scss'; class ProjectList extends Component { constructor(props) { super(props); - this.state = {}; + this.state = { + redirectToProject: false, + redirectToUploading: false, + }; } componentDidMount() { @@ -25,16 +28,42 @@ class ProjectList extends Component { appStore.readProjectList(); } + gotoProject = (address) => { + const { appStore } = this.props; + appStore.gotoProject(address); + this.setState({ redirectToProject: true }); + } + + startUploading = (address) => { + const { appStore } = this.props; + appStore.setProjectAddress(address); + this.setState({ redirectToUploading: true }); + } + + checkProject = async (address) => { + const { appStore } = this.props; + const isQuestionsUploaded = await appStore.checkIsQuestionsUploaded(address); + // eslint-disable-next-line no-unused-expressions + isQuestionsUploaded + ? this.gotoProject(address) + : this.startUploading(address); + } + render() { const { appStore: { projectList }, t } = this.props; + const { redirectToProject, redirectToUploading } = this.state; const projects = projectList.map((project, index) => ( )); + + if (redirectToProject) return ; + if (redirectToUploading) return ; return (
@@ -62,6 +91,9 @@ ProjectList.propTypes = { appStore: propTypes.shape({ readProjectList: propTypes.func.isRequired, projectList: propTypes.arrayOf(propTypes.object).isRequired, + checkIsQuestionsUploaded: propTypes.func.isRequired, + gotoProject: propTypes.func.isRequired, + setProjectAddress: propTypes.func.isRequired, }).isRequired, t: propTypes.func.isRequired, }; diff --git a/src/components/ProjectUploading/index.js b/src/components/ProjectUploading/index.js index c323c6e6..418163d0 100644 --- a/src/components/ProjectUploading/index.js +++ b/src/components/ProjectUploading/index.js @@ -37,11 +37,34 @@ class ProjectUploading extends Component { componentDidMount() { const { steps } = this; const { - appStore, appStore: { deployArgs, name }, userStore: { password }, t, + appStore, appStore: { deployArgs, projectAddress }, userStore: { password }, type, } = this.props; - this.setState({ - step: steps.sending, - }); + + switch (type) { + case ('project'): + this.setState({ + step: steps.sending, + }); + this.deployProject(deployArgs, password); + break; + case ('question'): + this.setState({ + step: steps.questions, + }); + appStore.deployQuestions(projectAddress).then(() => { + this.setState({ + uploading: false, + }); + }); + break; + default: + break; + } + } + + deployProject(deployArgs, password) { + const { steps } = this; + const { appStore, appStore: { name }, t } = this.props; appStore.deployContract('project', deployArgs, password) .then((txHash) => { @@ -55,6 +78,7 @@ class ProjectUploading extends Component { this.setState({ step: steps.questions, }); + appStore.setProjectAddress(receipt.contractAddress); appStore.addProjectToList({ name, address: receipt.contractAddress }); appStore.deployQuestions(receipt.contractAddress).then(() => { this.setState({ @@ -126,9 +150,11 @@ const AlertBlock = withTranslation()(({ t }) => ( {t('headings:projectCreated.subheading.1')} - + + + +
+
+
+ +
+
+ + ); +}; + +export default FullQuestion; diff --git a/src/components/Questions/Question/Question.scss b/src/components/Questions/Question/Question.scss new file mode 100644 index 00000000..dbd46411 --- /dev/null +++ b/src/components/Questions/Question/Question.scss @@ -0,0 +1,86 @@ +@import '../../../assets/styles/partials/variables'; +.question { + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: start; + height: 125px; + background-color: $white; + border: 1px solid $lightGrey; + &--extended { + align-items: flex-start; + height: auto; + .question__left { + width: 70%; + border: none; + } + .question__right { + padding-top: 28px; + } + } + &__left { + align-self: flex-start; + width: 80%; + height: 100%; + padding: 10px 30px; + border-right: 1px solid $lightGrey; + cursor: pointer; + } + &__right { + width: 20%; + text-align: center; + } + &__id { + color: $lightGrey; + font-size: 11px; + } + &__caption { + max-width: 70%; + margin: 5px 0 10px; + font-weight: 700; + font-size: 18px; + } + &__description { + max-width: 70%; + font-size: 11px; + } + &__start { + width: 50%; + margin: 0 auto; + &-icon { + cursor: pointer; + svg { + width: 30px; + height: 30px; + } + } + &-label { + margin-top: 10px; + color: $primary; + font-size: 11px; + } + } + &__parameter { + margin: 10px 0; + text-align: left; + &-heading { + font-weight: 700; + font-size: 14px; + text-align: left; + } + &-label { + margin-bottom: 5px; + color: $primary; + font-size: 11px; + } + &-text { + color: $border; + font-size: 11px; + } + } + &__formula { + padding: 10px 30px 30px; + color: $border; + font-size: 11px; + } +} \ No newline at end of file diff --git a/src/components/Questions/Question/index.js b/src/components/Questions/Question/index.js new file mode 100644 index 00000000..07eb65ba --- /dev/null +++ b/src/components/Questions/Question/index.js @@ -0,0 +1,100 @@ +import React from 'react'; +import propTypes from 'prop-types'; +import { NavLink } from 'react-router-dom'; +import { StartIcon } from '../../Icons'; + +import styles from './Question.scss'; + +// eslint-disable-next-line no-unused-vars +const startBlock = () => ( +
+
+

+ +

+

+ Начать новое голосование +

+
+
+); + +const ParametersBlock = () => ( +
+

Параметры

+
+

Дата применения

+

+ старое +

+
+
+

Дата применения

+

+ Начать +

+
+
+

Дата применения

+

голосование

+
+
+); + +const ShortDescription = () => ( +

+ {`Иногда описания могут не влазить, потому что для важных вопросов + нужно много описать, чтобы даже дурак все понял и принял правильное + решение, тогда делаем что то типо того, ща еще чуть чуть чтобы прям + забить строчку эту и еще чуть чуть.`} +

+); + +const FullDescription = () => ( +

+ {`Иногда описания могут не влазить, потому что для важных вопросов + нужно много описать, чтобы даже дурак все понял и принял правильное + решение, тогда делаем что то типо того, ща еще чуть чуть чтобы прям + забить строчку эту и еще чуть чуть.`} + {`Иногда описания могут не влазить, потому что для важных вопросов + нужно много описать, чтобы даже дурак все понял и принял правильное + решение, тогда делаем что то типо того, ща еще чуть чуть чтобы прям + забить строчку эту и еще чуть чуть.`} + {`Иногда описания могут не влазить, потому что для важных вопросов + нужно много описать, чтобы даже дурак все понял и принял правильное + решение, тогда делаем что то типо того, ща еще чуть чуть чтобы прям + забить строчку эту и еще чуть чуть.`} +

+); + +const FormulaBlock = () => ( +

+ Формула голосования: (group (0xD490af05Bf82eF6C6BA034B22D18c39B5D52Cc54)→condition (quorum=20%)) +

+); + +// eslint-disable-next-line no-unused-vars +const Question = ({ id, extended }) => ( +
+ +
+

{`#${id}`}

+

Я очень люблю писать рыбные заголовки

+ {extended ? FullDescription() : ShortDescription()} +
+ + {extended ? ParametersBlock() : startBlock()} + {extended ? FormulaBlock() : null} +
+); + +Question.propTypes = { + id: propTypes.number.isRequired, + extended: propTypes.bool, +}; +Question.defaultProps = { + extended: false, +}; + + +export default Question; diff --git a/src/components/Questions/Questions.scss b/src/components/Questions/Questions.scss new file mode 100644 index 00000000..be4cf472 --- /dev/null +++ b/src/components/Questions/Questions.scss @@ -0,0 +1,44 @@ +@import '../../assets/styles/partials/variables'; +.questions { + margin: 0 auto; + &__head { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + margin-bottom: 30px; + &-create { + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: space-between; + width: 45%; + .btn { + svg { + path { + fill: $white; + } + } + &:active { + path { + stroke: $white; + } + } + } + } + &-filters { + display: flex; + flex-flow: row nowrap; + align-items: center; + width: 25%; + .dropdown { + width: 100%; + } + } + } + &__wrapper { + display: grid; + grid-template-columns:1fr; + row-gap: 10px; + margin-bottom: 30px; + } +} \ No newline at end of file diff --git a/src/components/Questions/Questions.stories.js b/src/components/Questions/Questions.stories.js new file mode 100644 index 00000000..4505c281 --- /dev/null +++ b/src/components/Questions/Questions.stories.js @@ -0,0 +1,11 @@ +import React from 'react'; +import Questions from '.'; +import Question from './ShortQuestion'; + +export default ({ title: 'Questions' }); + +export const Wrapper = () => ( + +); + +export const defaultQuestion = () => ; diff --git a/src/components/Questions/index.js b/src/components/Questions/index.js new file mode 100644 index 00000000..398e5ee9 --- /dev/null +++ b/src/components/Questions/index.js @@ -0,0 +1,67 @@ +import React, { Component } from 'react'; +import propTypes from 'prop-types'; +import { withTranslation } from 'react-i18next'; +import Container from '../Container'; +import Button from '../Button/Button'; +import { CreateToken } from '../Icons'; +import Question from './Question'; +import styles from './Questions.scss'; +import SimpleDropdown from '../SimpleDropdown'; +import Footer from '../Footer'; + +@withTranslation() +class Questions extends Component { + constructor(props) { + super(props); + this.state = {}; + } + + render() { + const { t } = this.props; + const options = [{ + label: '1', + value: '1', + }, { + label: '2', + value: '2', + }, { + label: '3', + value: '3', + }]; + const questions = [1, 2, 3, 4, 5, 6, 7, 8, 9]; + return ( + +
+
+
+ + +
+
+ +
+
+
+ { + questions.map((id) => ( + + )) + } +
+
+