Web: People: replace tooltip

This commit is contained in:
Nikita Gopienko 2019-10-17 13:54:06 +03:00
parent 7ff3aee23c
commit 0f4c3bec04
3 changed files with 62 additions and 74 deletions

View File

@ -21,9 +21,10 @@ class RadioField extends React.Component {
radioIsDisabled,
radioOnChange,
tooltipId,
tooltipEvent,
iconButton
tooltipContent,
tooltipMaxWidth,
tooltipOffsetRight,
tooltipId
} = this.props;
return (
@ -31,9 +32,10 @@ class RadioField extends React.Component {
isRequired={isRequired}
hasError={hasError}
labelText={labelText}
tooltipContent={tooltipContent}
tooltipMaxWidth={tooltipMaxWidth}
tooltipOffsetRight={tooltipOffsetRight}
tooltipId={tooltipId}
tooltipEvent={tooltipEvent}
iconButton={iconButton}
>
<RadioButtonGroup
name={radioName}

View File

@ -32,9 +32,10 @@ class TextChangeField extends React.Component {
buttonOnClick,
buttonTabIndex,
tooltipContent,
tooltipId,
tooltipEvent,
iconButton
tooltipMaxWidth,
tooltipOffsetRight
} = this.props;
return (
@ -42,9 +43,10 @@ class TextChangeField extends React.Component {
isRequired={isRequired}
hasError={hasError}
labelText={labelText}
tooltipContent={tooltipContent}
tooltipId={tooltipId}
tooltipEvent={tooltipEvent}
iconButton={iconButton}
tooltipMaxWidth={tooltipMaxWidth}
tooltipOffsetRight={tooltipOffsetRight}
>
<InputContainer>
<TextInput

View File

@ -1,7 +1,7 @@
import React from 'react'
import { withRouter } from 'react-router'
import { connect } from 'react-redux'
import { Avatar, Button, Textarea, Text, toastr, ModalDialog, TextInput, AvatarEditor, Tooltip, Link } from 'asc-web-components'
import { Avatar, Button, Textarea, Text, toastr, ModalDialog, TextInput, AvatarEditor, Link } from 'asc-web-components'
import { withTranslation } from 'react-i18next';
import { toEmployeeWrapper, getUserRole, getUserContactsPattern, getUserContacts, mapGroupsToGroupSelectorOptions, mapGroupSelectorOptionsToGroups, filterGroupSelectorOptions } from "../../../../../store/people/selectors";
import { updateProfile } from '../../../../../store/profile/actions';
@ -23,8 +23,6 @@ const Table = styled.table`
margin-bottom: 23px;
`;
const Tr = styled.tr``;
const Th = styled.th`
padding: 11px 0 10px 0px;
border-top: 1px solid #ECEEF1;
@ -432,6 +430,45 @@ class UpdateUserForm extends React.Component {
const pattern = getUserContactsPattern();
const contacts = getUserContacts(profile.contacts);
const tooltipTypeContent =
<>
<Text.Body style={{paddingBottom: 17}} fontSize={13}>{t("ProfileTypePopupHelper")}</Text.Body>
<Table>
<tbody>
<tr>
<Th>{t("ProductsAndInstruments_Products")}</Th><Th>{t("Employee")}</Th><Th>{t("GuestCaption")}</Th>
</tr>
<tr>
<Td>{t("Mail")}</Td><Td>review</Td><Td>-</Td>
</tr>
<tr>
<Td>{t("DocumentsProduct")}</Td><Td>full access</Td><Td>view</Td>
</tr>
<tr>
<Td>{t("ProjectsProduct")}</Td><Td>review</Td><Td>-</Td>
</tr>
<tr>
<Td>{t("CommunityProduct")}</Td><Td>full access</Td><Td>view</Td>
</tr>
<tr>
<Td>{t("People")}</Td><Td>review</Td><Td>-</Td>
</tr>
<tr>
<Td>{t("Message")}</Td><Td>review</Td><Td>review</Td>
</tr>
<tr>
<Td>{t("Calendar")}</Td><Td>review</Td><Td>review</Td>
</tr>
</tbody>
</Table>
<Link
color="#316DAA"
isHovered={true}
href="https://helpcenter.onlyoffice.com/ru/gettingstarted/people.aspx#ManagingAccessRights_block"
style={{marginTop: 23}}>
{t("TermsOfUsePopupHelperLink")}
</Link>
</>;
return (
<>
@ -469,19 +506,12 @@ class UpdateUserForm extends React.Component {
buttonOnClick={this.onEmailChange}
buttonTabIndex={1}
tooltipId="tooltipEmailId"
tooltipEvent="click focus"
iconButton="QuestionIcon"
tooltipContent={<Text.Body fontSize={13}>{t("EmailPopupHelper")}</Text.Body>}
tooltipMaxWidth={312}
tooltipOffsetRight={100}
tooltipId="EmailTooltip"
/>
<Tooltip
id="tooltipEmailId"
offsetRight={100}
effect="solid"
place="top"
maxWidth={312}
>
<Text.Body fontSize={13}>{t("EmailPopupHelper")}</Text.Body>
</Tooltip>
<TextChangeField
labelText={`${t("Password")}:`}
inputName="password"
@ -552,57 +582,11 @@ class UpdateUserForm extends React.Component {
radioIsDisabled={isLoading}
radioOnChange={this.onUserTypeChange}
tooltipId="tooltipUserTypeId"
tooltipEvent="click focus"
iconButton="QuestionIcon"
tooltipContent={tooltipTypeContent}
tooltipMaxWidth={340}
tooltipOffsetRight={120}
tooltipId="TypeTooltip"
/>
<Tooltip
id="tooltipUserTypeId"
offsetRight={120}
effect="solid"
place="top"
maxWidth={340}
>
<>
<Text.Body style={{paddingBottom: 17}} fontSize={13}>{t("ProfileTypePopupHelper")}</Text.Body>
<Table>
<tbody>
<Tr>
<Th>{t("ProductsAndInstruments_Products")}</Th><Th>{t("Employee")}</Th><Th>{t("GuestCaption")}</Th>
</Tr>
<Tr>
<Td>{t("Mail")}</Td><Td>review</Td><Td>-</Td>
</Tr>
<Tr>
<Td>{t("DocumentsProduct")}</Td><Td>full access</Td><Td>view</Td>
</Tr>
<Tr>
<Td>{t("ProjectsProduct")}</Td><Td>review</Td><Td>-</Td>
</Tr>
<Tr>
<Td>{t("CommunityProduct")}</Td><Td>full access</Td><Td>view</Td>
</Tr>
<Tr>
<Td>{t("People")}</Td><Td>review</Td><Td>-</Td>
</Tr>
<Tr>
<Td>{t("Message")}</Td><Td>review</Td><Td>review</Td>
</Tr>
<Tr>
<Td>{t("Calendar")}</Td><Td>review</Td><Td>review</Td>
</Tr>
</tbody>
</Table>
<Link
color="#316DAA"
isHovered={true}
href="https://helpcenter.onlyoffice.com/ru/gettingstarted/people.aspx#ManagingAccessRights_block"
style={{marginTop: 23}}>
{t("TermsOfUsePopupHelperLink")}
</Link>
</>
</Tooltip>
<DateField
calendarHeaderContent={t("CalendarSelectDate")}
labelText={`${t("CustomEmployedSinceDate", { employedSinceDate })}:`}