kaslo/synapse
1
0
Fork 0
Code Wiki Activity

Start moving to accordion.

Browse Source
This commit is contained in:
Jorik Schellekens
2019-08-12 14:28:51 +01:00
parent 388dcb1e6c
commit 63b9c8d3a6
7 changed files with 5998 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
synapse_topology/view/webui/index.html
View File

@@ -5,6 +5,8 @@
<title>Topology - The synapse configuration tool</title>
</head>
<link rel="stylesheet" href="less/bootstrap.min.css">
<body>
<div id="content" />
<script src="dist/bundle.js" type="text/javascript"></script>

41
synapse_topology/view/webui/js/components/ServerName.jsx
View File

@@ -1,6 +1,8 @@
import React, { useState } from 'react';
import ContentWrapper from '../containers/ContentWrapper';
import Accordion from 'react-bootstrap/Accordion';
import Card from 'react-bootstrap/Card';
import { SERVER_NAME_UI } from '../reducers/ui_constants';
export default ({ onClick }) => {
const [servername, setServerName] = useState("");
@@ -9,20 +11,25 @@ export default ({ onClick }) => {
setServerName(event.target.value);
}
return <ContentWrapper>
<h1>Select a server name</h1>
<p>It's important to choose a good name for your server because it cannot be changed later.</p>
<p>
The name forms a part of the user id's for the users on the server. Which will look like `@you:server.name`.
The name will also be what other servers look up when they're trying to reach this one.
</p>
<p>
Normally the server name is usually just your domain. For example <a target="_blank" href="https://matrix.org">matrix.org</a>'s server is
known as `matrix.org`.
</p>
<input type="text" onChange={onChange} autoFocus placeholder="synapse.dev"></input>
<div>
<button disabled={servername ? undefined : true} onClick={() => onClick(servername)}>I like it</button>
</div>
</ContentWrapper>;
return <Card>
<Accordion.Toggle as={Card.Header} eventKey={SERVER_NAME_UI}>
Name your server
</Accordion.Toggle>
<Accordion.Collapse eventKey={SERVER_NAME_UI}>
<Card.Body>
<p>
Your server name usually matches your domain. For example, the
matrix.org server is simply called `matrix.org`.
</p>
<p>
Your server name will be used to establish User IDs (e.g.
`@user:server.name`) and Room Aliases (e.g. `#room:server.name`).
</p>
<input type="text" onChange={onChange} autoFocus placeholder="Enter server name"></input>
<div>
<button disabled={servername ? undefined : true} onClick={() => onClick(servername)}>Continue</button>
</div>
</Card.Body>
</Accordion.Collapse>
</Card>;
}

30
synapse_topology/view/webui/js/components/StatsReporter.jsx
View File

@@ -3,15 +3,27 @@ import React from 'react';
import style from '../../less/main.less';
import ButtonDisplay from './ButtonDisplay';
import ContentWrapper from '../containers/ContentWrapper';
import Accordion from 'react-bootstrap/Accordion';
import Card from 'react-bootstrap/Card';
import { STATS_REPORT_UI } from '../reducers/ui_constants';
export default ({ onClick }) =>
<ContentWrapper>
<h1>Anonymous Statistics</h1>
<p>Would you like to report anonymouse statistics to matrix.org?</p>
<ButtonDisplay>
<button onClick={() => onClick(true)}>YES</button>
<button onClick={() => onClick(false)} className={style.redButton}>NO</button>
</ButtonDisplay>
</ContentWrapper >
<Card>
<Accordion.Toggle as={Card.Header} eventKey={STATS_REPORT_UI}>
Anonymous Statistics
</Accordion.Toggle>
<Accordion.Collapse eventKey={STATS_REPORT_UI}>
<Card.Body>
<p>
Would you like to report anonymous statistics to matrix.org?
Your server will send anonymised, aggregated statistics to matrix.org
on user usage so we can measure the health of the Matrix ecosystem.
</p>
<ButtonDisplay>
<button onClick={() => onClick(true)}>YES</button>
<button onClick={() => onClick(false)} className={style.redButton}>NO</button>
</ButtonDisplay>
</Card.Body>
</Accordion.Collapse>
</Card >

13
synapse_topology/view/webui/js/components/UI.jsx
View File

@@ -2,6 +2,9 @@ import React from 'react';
import style from '../../less/main.less';
import Accordion from 'react-bootstrap/Accordion';
import Card from 'react-bootstrap/Card';
import {
SETUP_INTRO_UI,
SERVER_NAME_UI,
@@ -85,16 +88,20 @@ const block_mapping = ui_block => {
}
export default ({ setup_ui, config_ui, base_config }) => {
if (!base_config.base_config_checked) {
return <Loading />
}
if (base_config.setup_done) {
console.log(`switching to ui ${config_ui}`);
return <ConfigSelector></ConfigSelector>
} else {
}
if (!base_config.setup_done) {
console.log(setup_ui);
return <WalkThrough>
return <Accordion defaultActiveKey="0">
{setup_ui.active_blocks.map(block_mapping)}
</WalkThrough>
</Accordion >
}
}

7
synapse_topology/view/webui/less/bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
synapse_topology/view/webui/package.json
View File

@@ -35,6 +35,7 @@
},
"dependencies": {
"fetch-absolute": "^1.0.0",
"react-bootstrap": "^1.0.0-beta.11",
"react-localize-redux": "^3.5.3",
"react-redux": "^7.1.0",
"redux": "^4.0.4",

5933
synapse_topology/view/webui/yarn-error.log Normal file
View File

File diff suppressed because it is too large Load Diff