Add styles and data prototypes
This commit is contained in:
parent
153a420674
commit
bdfdd76f43
@ -0,0 +1,28 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Box, Text } from "asc-web-components";
|
||||||
|
|
||||||
|
const ConsumerItem = (props) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Box displayProp="flex" flexDirection="column" marginProp="16px">
|
||||||
|
<Box displayProp="flex" justifyContent="space-between" widthProp="100%">
|
||||||
|
<Box displayProp="flex">
|
||||||
|
<Text>
|
||||||
|
{props.name} logo
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
toggle
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<Box displayProp="flex" marginProp="10px 10px 10px auto">
|
||||||
|
<Text>
|
||||||
|
{props.description}
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ConsumerItem;
|
@ -0,0 +1,20 @@
|
|||||||
|
export const consumers = [
|
||||||
|
{
|
||||||
|
name: "Amazon",
|
||||||
|
description: "Подключите Amazon AWS S3 для резервного копирования и хранения данных портала.",
|
||||||
|
innerDescription: "Добавив Amazon AWS S3, вы сможете использовать его для создания резервных копий портала, чтобы предотвратить потерю данных. Также используйте его для хранения данных и статического содержимого портала.",
|
||||||
|
tokens: ["Ключ доступа S3", "Секретный ключ доступа S3"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Mail.ru",
|
||||||
|
description: "Подключите приложение для входа на портал по учетной записи Mail.ru.",
|
||||||
|
innerDescription: "Добавив приложение сервиса Mail.ru Вы сможете на странице своего профиля подключить вход на портал используя аккаунт Mail.ru.",
|
||||||
|
tokens: ["ID", "Секретный ключ"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Telegram",
|
||||||
|
description: "Подключите аккаунт Telegram для получения оповещений портала через Telegram.",
|
||||||
|
innerDescription: "",
|
||||||
|
tokens: ["Токен бота", "Имя бота"]
|
||||||
|
}
|
||||||
|
]
|
@ -1,13 +1,49 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
import { consumers } from "./sub-components/consumers";
|
||||||
|
import { Box, Text } from "asc-web-components";
|
||||||
|
import ConsumerItem from "./sub-components/consumerItem";
|
||||||
|
|
||||||
class ThirdParty extends React.Component {
|
class ThirdPartyServices extends React.Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
consumers: consumers,
|
||||||
|
dialogVisible: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onToggleClick = () => {
|
||||||
|
this.setState( {
|
||||||
|
dialogVisible: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
titleDescription = "Ключи авторизации позволяют подключить портал ONLYOFFICE к сторонним сервисам, таким как Twitter, Facebook, Dropbox и т.д. Подключите портал к Facebook, Twitter или Linkedin, если Вы не хотите каждый раз при входе вводить свои учетные данные на портале. Привяжите портал к таким сервисам, как Dropbox, OneDrive и т.д. чтобы перенести документы из всех этих хранилищ в модуль Документы ONLYOFFICE."
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>tfs settings</div>
|
<>
|
||||||
|
<Box displayProp="flex" flexDirection="column">
|
||||||
|
<Box marginProp="10px">
|
||||||
|
<Text>{this.titleDescription}</Text>
|
||||||
|
</Box>
|
||||||
|
<Box displayProp="flex">
|
||||||
|
<Box displayProp="flex" widthProp="100%">
|
||||||
|
{this.state.consumers
|
||||||
|
.map((c) =>
|
||||||
|
<ConsumerItem
|
||||||
|
name={c.name}
|
||||||
|
description={c.description}
|
||||||
|
onToggleClick={this.onToggleClick} />
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export default ThirdParty;
|
export default ThirdPartyServices;
|
Loading…
Reference in New Issue
Block a user