Styles fix
This commit is contained in:
parent
3e4c584237
commit
40058ec43c
@ -1,5 +1,5 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { Box, Text } from "asc-web-components";
|
import { Box, Text, Icons } from "asc-web-components";
|
||||||
import ConsumerModalDialog from "./modal-dialog";
|
import ConsumerModalDialog from "./modal-dialog";
|
||||||
|
|
||||||
const ConsumerItem = (props) => {
|
const ConsumerItem = (props) => {
|
||||||
@ -10,14 +10,12 @@ const ConsumerItem = (props) => {
|
|||||||
<>
|
<>
|
||||||
<Box displayProp="flex" flexDirection="column" marginProp="16px">
|
<Box displayProp="flex" flexDirection="column" marginProp="16px">
|
||||||
<Box displayProp="flex" justifyContent="space-between" widthProp="100%">
|
<Box displayProp="flex" justifyContent="space-between" widthProp="100%">
|
||||||
<Box displayProp="flex">
|
<Box displayProp="flex" widthProp="100px">
|
||||||
<Text>
|
{React.createElement(Icons[`${name}Icon`], {})}
|
||||||
{name} logo
|
|
||||||
</Text>
|
|
||||||
</Box>
|
</Box>
|
||||||
<Box onClick={onToggleClick}>
|
<Box onClick={onToggleClick}>
|
||||||
toggle
|
toggle
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
<Box displayProp="flex" marginProp="10px 10px 10px auto">
|
<Box displayProp="flex" marginProp="10px 10px 10px auto">
|
||||||
<Text>
|
<Text>
|
||||||
|
@ -6,7 +6,7 @@ export const consumers = [
|
|||||||
tokens: ["Ключ доступа S3", "Секретный ключ доступа S3"]
|
tokens: ["Ключ доступа S3", "Секретный ключ доступа S3"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Mail.ru",
|
name: "MailRu",
|
||||||
description: "Подключите приложение для входа на портал по учетной записи Mail.ru.",
|
description: "Подключите приложение для входа на портал по учетной записи Mail.ru.",
|
||||||
innerDescription: "Добавив приложение сервиса Mail.ru Вы сможете на странице своего профиля подключить вход на портал используя аккаунт Mail.ru.",
|
innerDescription: "Добавив приложение сервиса Mail.ru Вы сможете на странице своего профиля подключить вход на портал используя аккаунт Mail.ru.",
|
||||||
tokens: ["ID", "Секретный ключ"]
|
tokens: ["ID", "Секретный ключ"]
|
||||||
@ -14,7 +14,7 @@ export const consumers = [
|
|||||||
{
|
{
|
||||||
name: "Telegram",
|
name: "Telegram",
|
||||||
description: "Подключите аккаунт Telegram для получения оповещений портала через Telegram.",
|
description: "Подключите аккаунт Telegram для получения оповещений портала через Telegram.",
|
||||||
innerDescription: "Описание",
|
innerDescription: "Добавив приложение сервиса Telegram Вы сможете на странице своего профиля подключить вход на портал используя аккаунт Telegram.",
|
||||||
tokens: ["Токен бота", "Имя бота"]
|
tokens: ["Токен бота", "Имя бота"]
|
||||||
}
|
}
|
||||||
]
|
]
|
@ -1,10 +1,29 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { ModalDialog, Text, Button, TextInput, Box } from "asc-web-components";
|
import { ModalDialog, Text, Button, TextInput, Box, Link } from "asc-web-components";
|
||||||
|
|
||||||
const ConsumerModalDialog = (props) => {
|
const ConsumerModalDialog = (props) => {
|
||||||
|
|
||||||
const { consumers, selectedConsumer } = props;
|
const { consumers, selectedConsumer } = props;
|
||||||
|
|
||||||
|
const bodyDescription = (
|
||||||
|
<>
|
||||||
|
<Text isBold={true}>Как это работает?</Text>
|
||||||
|
<Text>Для получения подробных инструкций по подключению этого сервиса, пожалуйста, перейдите в наш Справочный центр, где приводится вся необходимая информация.</Text>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
const bottomDescription = (
|
||||||
|
<>
|
||||||
|
<Text>
|
||||||
|
Если у вас остались вопросы по подключению этого сервиса или вам требуется помощь, вы всегда можете обратиться в нашу
|
||||||
|
{" "}
|
||||||
|
<Link
|
||||||
|
isHovered={true}
|
||||||
|
target="_blank"
|
||||||
|
href="http://support.onlyoffice.com/ru">
|
||||||
|
Службу техподдержки
|
||||||
|
</Link>.</Text></>
|
||||||
|
);
|
||||||
|
|
||||||
const getConsumerName = () => {
|
const getConsumerName = () => {
|
||||||
return consumers.find((consumer) => consumer.name === selectedConsumer).name;
|
return consumers.find((consumer) => consumer.name === selectedConsumer).name;
|
||||||
}
|
}
|
||||||
@ -35,10 +54,12 @@ const ConsumerModalDialog = (props) => {
|
|||||||
headerContent={`${getConsumerName()}`}
|
headerContent={`${getConsumerName()}`}
|
||||||
bodyContent={[
|
bodyContent={[
|
||||||
<Text>{getInnerDescription()}</Text>,
|
<Text>{getInnerDescription()}</Text>,
|
||||||
|
<Text>{bodyDescription}</Text>,
|
||||||
getInputFields()
|
getInputFields()
|
||||||
]}
|
]}
|
||||||
footerContent={[
|
footerContent={[
|
||||||
<Button primary size="medium" label="Включить" />
|
<Button primary size="medium" label="Включить" />,
|
||||||
|
<Text>{bottomDescription}</Text>
|
||||||
]}
|
]}
|
||||||
onClose={props.onModalClose}
|
onClose={props.onModalClose}
|
||||||
/>
|
/>
|
||||||
|
Loading…
Reference in New Issue
Block a user