Web: Client: Added HelpButtons to admins page

This commit is contained in:
Alexey Kostenko 2021-05-19 18:04:35 +03:00
parent 0f19106f6d
commit c1e29096ac
3 changed files with 132 additions and 47 deletions

View File

@ -68,13 +68,17 @@
"ClearButton": "Reset filter",
"ProductUserOpportunities": "View profiles and groups",
"LearnMore": "Learn more...",
"AccessRightsChangeOwnerButtonText": "Change portal owner",
"ChangeOwner": "Change portal owner",
"AdministratorsAddedSuccessfully": "Administrators added successfully",
"AdministratorsRemovedSuccessfully": "Administrators removed successfully",
"AccessSettings": "Access settings",
"FullAccess": "Full access",
"AdminInModules": "Admin in modules",
"FullAccessTooltip": "Have tha same access rights as the portal owner, except the right to:",
"DeactivateOrDeletePortal": "Deactivate or delete portal.",
"DocumentsAdministratorsCan": "Documents administrators can: do the same as a user, link Dropbox, Box and other accounts in the 'Common Documents' section, set up access rights to the documents and folders in the 'Common Documents' section.",
"PeopleAdministratorsCan": "People administrators can: do the same as a user, create profiles and groups, import profiles, invite users.",
"ThirdPartyTitleDescription": "Authorization keys is the option which allows you to connect your portal with the third-party services like Twitter, Facebook, DropBox etc. Connect your portal with Facebook, Twitter or Linkedin if you don't want to introduce your portal credentials every time you enter it. Link it up with such services like DropBox, OneDrive, etc. to transfer the documents from all those storages to Documents module.",
"ThirdPartyBodyDescription": "For more detailed instructions about connecting this service, please refer to our <2>Help Center</2> that provides all the necessary information.",

View File

@ -66,13 +66,17 @@
"NotFoundDescription": "Измените настройки фильтра или добавьте людей в раздел.",
"ClearButton": "Сбросить фильтр",
"LearnMore": "Подробнее...",
"AccessRightsChangeOwnerButtonText": "Сменить владельца портала",
"ChangeOwner": "Сменить владельца портала",
"AdministratorsAddedSuccessfully": "Администраторы успешно добавленны",
"AdministratorsRemovedSuccessfully": "Администраторы успешно удалены",
"AccessSettings": "Настройки доступа",
"FullAccess": "Полный доступ",
"AdminInModules": "Администратор в модулях",
"FullAccessTooltip": "Имеет те же права доступа, что и владелец портала за исключением:",
"DeactivateOrDeletePortal": "Деактивировать или удалять портал.",
"DocumentsAdministratorsCan": "Администраторы модуля Документы могут делать то же самое, что и пользователь, связать Dropbox, Box и другие учетные записи в разделе 'Общие документы', настраивать права доступа к документам и папкам в разделе 'Общие документы'.",
"PeopleAdministratorsCan": "Администраторы модуля Люди могут делать то же самое, что и пользователь, создавать профили и группы, импортировать профили, приглашать пользователей.",
"ThirdPartyTitleDescription": "Ключи авторизации позволяют подключить портал ONLYOFFICE к сторонним сервисам, таким как Twitter, Facebook, Dropbox и т.д. Подключите портал к Facebook, Twitter или Linkedin, если Вы не хотите каждый раз при входе вводить свои учетные данные на портале. Привяжите портал к таким сервисам, как Dropbox, OneDrive и т.д. чтобы перенести документы из всех этих хранилищ в модуль Документы ONLYOFFICE.",
"ThirdPartyBodyDescription": "Для получения подробных инструкций по подключению этого сервиса, пожалуйста, перейдите в наш <2>Справочный центр</2>, где приводится вся необходимая информация.",

View File

@ -3,7 +3,7 @@ import { withRouter } from "react-router";
import { withTranslation } from "react-i18next";
import PropTypes from "prop-types";
import styled from "styled-components";
import { ReactSVG } from "react-svg";
import HelpButton from "@appserver/components/help-button";
import ToggleButton from "@appserver/components/toggle-button";
import ModalDialog from "@appserver/components/modal-dialog";
@ -78,14 +78,51 @@ const StyledModalBody = styled.div`
justify-content: space-between;
}
.help-button-wrapper {
display: flex;
align-items: center;
&.modules {
margin-top: 12px;
}
.place-left {
margin-left: 0;
}
}
p {
margin-right: 8px;
}
.modules-settings {
margin-top: 12px;
}
.setting-wrapper {
display: flex;
justify-content: space-between;
margin-top: 12px;
}
.setting-heading {
margin-top: 12px;
.listOfFullAccess {
padding-left: 10px;
position: relative;
margin-left: 8px;
text-transform: lowercase;
&:before {
content: "";
width: 3px;
height: 3px;
background-color: #333333;
border-radius: 2px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
}
`;
@ -359,6 +396,31 @@ class PortalAdmins extends Component {
});
};
fullAccessTooltip = () => {
const { t } = this.props;
return (
<>
<Text>{t("FullAccessTooltip")}</Text>
<br />
<Text className="listOfFullAccess">{t("ChangeOwner")}</Text>
<Text className="listOfFullAccess">
{t("DeactivateOrDeletePortal")}
</Text>
</>
);
};
modulesTooltip = () => {
const { t } = this.props;
return (
<div>
<Text>{t("DocumentsAdministratorsCan")}</Text>
<br />
<Text>{t("PeopleAdministratorsCan")}</Text>
</div>
);
};
createNewListAdminModules = (isAdmin, listAdminModules, moduleName) => {
let newListAdminModules = listAdminModules ? listAdminModules.slice() : [];
@ -630,9 +692,17 @@ class PortalAdmins extends Component {
</div>
<div>
<div className="full-access-wrapper">
<Text fontWeight={600} fontSize="15px">
{t("FullAccess")}
</Text>
<div className="help-button-wrapper">
<Text as="p" fontWeight={600} fontSize="15px">
{t("FullAccess")}
</Text>
<HelpButton
displayType="dropdown"
place="top"
offsetRight={0}
tooltipContent={this.fullAccessTooltip()}
/>
</div>
<ToggleButton
className="toggle-btn"
isChecked={selectedUser.isAdmin}
@ -643,46 +713,53 @@ class PortalAdmins extends Component {
/>
</div>
{modules && modules.length > 0 && (
<div>
<Text
className="setting-heading"
fontWeight={600}
fontSize="15px"
>
{t("AdminInModules")}
</Text>
<div className="module-settings">
{modules.map((module) => {
const isModuleAdmin = this.isModuleAdmin(
selectedUser,
module.appName
);
return (
<div
key={module.appName}
className="setting-wrapper"
>
<Text fontWeight={400} fontSize="13px">
{module.title}
</Text>
<ToggleButton
className="toggle-btn"
isChecked={isModuleAdmin}
inputId={module.id}
onChange={() =>
this.onModuleToggle(
module,
!isModuleAdmin
)
}
isDisabled={selectedUser.isAdmin}
/>
</div>
);
})}
<>
<div className="help-button-wrapper modules">
<Text as="p" fontWeight={600} fontSize="15px">
{t("AdminInModules")}
</Text>
<HelpButton
displayType="dropdown"
place="top"
offsetRight={0}
tooltipContent={this.modulesTooltip()}
/>
</div>
</div>
<div className="modules-settings">
<div className="module-settings">
{modules.map((module) => {
const isModuleAdmin = this.isModuleAdmin(
selectedUser,
module.appName
);
return (
<div
key={module.appName}
className="setting-wrapper"
>
<Text fontWeight={400} fontSize="13px">
{module.title}
</Text>
<ToggleButton
className="toggle-btn"
isChecked={isModuleAdmin}
inputId={module.id}
onChange={() =>
this.onModuleToggle(
module,
!isModuleAdmin
)
}
isDisabled={selectedUser.isAdmin}
/>
</div>
);
})}
</div>
</div>
</>
)}
</div>
</StyledModalBody>