web: people: fix headers

This commit is contained in:
NikolayRechkin 2019-10-01 10:07:39 +03:00
parent 83ef9c584c
commit acd456b8a0
2 changed files with 19 additions and 10 deletions

View File

@ -1,6 +1,6 @@
import React, { useCallback } from "react";
import { connect } from "react-redux";
import { Text, IconButton, ContextMenuButton, toastr } from "asc-web-components";
import { Text, IconButton, ContextMenuButton, toastr, utils } from "asc-web-components";
import { withRouter } from "react-router";
import { isAdmin, isMe } from "../../../../../store/auth/selectors";
import { getUserStatus } from "../../../../../store/people/selectors";
@ -8,16 +8,21 @@ import { useTranslation } from 'react-i18next';
import { resendUserInvites } from "../../../../../store/services/api";
import { EmployeeStatus } from "../../../../../helpers/constants";
import { updateUserStatus } from "../../../../../store/people/actions";
import { callbackify } from "util";
import styled from 'styled-components';
const wrapperStyle = {
display: "flex",
alignItems: "center"
};
const textStyle = {
marginLeft: "16px",
marginRight: "16px"
};
const Header = styled(Text.ContentHeader)`
margin-left: 16px;
margin-right: 16px;
max-width: calc(100vw - 430px);
@media ${utils.device.tablet} {
max-width: calc(100vw - 96px);
}
`;
const SectionHeaderContent = props => {
const { profile, history, settings, isAdmin, viewer, updateUserStatus } = props;
@ -188,10 +193,10 @@ const SectionHeaderContent = props => {
onClick={onClick}
/>
</div>
<Text.ContentHeader truncate={true} style={textStyle}>
<Header truncate={true}>
{profile.displayName}
{profile.isLDAP && ` (${t('LDAPLbl')})`}
</Text.ContentHeader>
</Header>
{(isAdmin || isMe(viewer, profile.userName)) && (
<ContextMenuButton
directionX="right"

View File

@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
import styled from 'styled-components';
import { connect } from 'react-redux';
import { withRouter } from "react-router";
import { IconButton, Text } from 'asc-web-components';
import { IconButton, Text, utils } from 'asc-web-components';
import { useTranslation } from 'react-i18next';
import {typeUser, typeGuest } from './../../../../../helpers/customNames';
@ -13,6 +13,10 @@ const Wrapper = styled.div`
const Header = styled(Text.ContentHeader)`
margin-left: 16px;
max-width: calc(100vw - 430px);
@media ${utils.device.tablet} {
max-width: calc(100vw - 64px);
}
`;
const SectionHeaderContent = (props) => {
@ -35,7 +39,7 @@ const SectionHeaderContent = (props) => {
return (
<Wrapper>
<IconButton iconName={'ArrowPathIcon'} size="16" onClick={onClick}/>
<Header>{headerText}</Header>
<Header truncate={true}>{headerText}</Header>
</Wrapper>
);
};