Merge branch 'master' of github.com:ONLYOFFICE/CommunityServer-AspNetCore
This commit is contained in:
commit
a49da5f7c6
@ -16,6 +16,11 @@ const avatarWrapper = {
|
||||
marginBottom: "24px"
|
||||
};
|
||||
|
||||
const editButtonWrapper = {
|
||||
marginTop: "16px",
|
||||
width: "160px"
|
||||
};
|
||||
|
||||
const infoWrapper = {
|
||||
display: "inline-flex",
|
||||
marginBottom: "24px"
|
||||
@ -44,6 +49,41 @@ const notesWrapper = {
|
||||
width: "100%"
|
||||
};
|
||||
|
||||
const marginTop24 = {
|
||||
marginTop: "24px"
|
||||
};
|
||||
|
||||
const marginTop22 = {
|
||||
marginTop: "22px"
|
||||
};
|
||||
|
||||
const marginTop10 = {
|
||||
marginTop: "10px"
|
||||
};
|
||||
|
||||
const marginLeft18 = {
|
||||
marginLeft: "18px"
|
||||
};
|
||||
|
||||
const selfToggleWrapper = {
|
||||
width: "100%",
|
||||
marginBottom: "24px"
|
||||
}
|
||||
|
||||
const contactsToggleWrapper = {
|
||||
width: "100%",
|
||||
marginTop: "24px"
|
||||
};
|
||||
|
||||
const notesToggleWrapper = {
|
||||
width: "100%"
|
||||
};
|
||||
|
||||
const contactWrapper = {
|
||||
display: "inline-flex",
|
||||
width: "300px"
|
||||
};
|
||||
|
||||
let socialProfiles = [
|
||||
{ type: "facebook", value: "", icon: "ShareFacebookIcon" },
|
||||
{ type: "livejournal", value: "", icon: "LivejournalIcon" },
|
||||
@ -90,9 +130,9 @@ const getFormattedContacts = (profile) => {
|
||||
};
|
||||
|
||||
const getFormattedDepartments = (departments) => {
|
||||
let splittedDepartments = departments.split(',');
|
||||
const splittedDepartments = departments.split(',');
|
||||
const departmentsLength = splittedDepartments.length - 1;
|
||||
return splittedDepartments.map((department, index) => {
|
||||
const formattedDepartments = splittedDepartments.map((department, index) => {
|
||||
return (
|
||||
<span key={index}>
|
||||
<Link type="action" fontSize={13} isHovered={true} >
|
||||
@ -102,6 +142,8 @@ const getFormattedDepartments = (departments) => {
|
||||
</span>
|
||||
)
|
||||
});
|
||||
|
||||
return formattedDepartments;
|
||||
};
|
||||
|
||||
const sendMail = (email) => {
|
||||
@ -114,24 +156,24 @@ const capitalizeFirstLetter = (string) => {
|
||||
};
|
||||
|
||||
const createContacts = (contacts) => {
|
||||
return contacts.map((contact, index) => {
|
||||
const completeContacts = contacts.map((contact, index) => {
|
||||
if (contact.value)
|
||||
return (
|
||||
<div key={index} style={{ display: "inline-flex", width: "300px" }}>
|
||||
<div key={index} style={contactWrapper}>
|
||||
<IconButton color="#333333" size={16} iconName={contact.icon} isFill={true} onClick={() => { }} />
|
||||
<div style={textTruncate}>{contact.value}</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
});
|
||||
|
||||
return completeContacts;
|
||||
};
|
||||
|
||||
const SectionBodyContent = (props) => {
|
||||
const { profile, history, isSelf, settings} = props;
|
||||
const { profile, history, isSelf, settings } = props;
|
||||
|
||||
getFormattedContacts(profile);
|
||||
|
||||
console.log(props);
|
||||
|
||||
return (
|
||||
<div style={profileWrapper}>
|
||||
<div style={avatarWrapper}>
|
||||
@ -141,7 +183,7 @@ const SectionBodyContent = (props) => {
|
||||
source={profile.avatarMax}
|
||||
userName={profile.displayName}
|
||||
/>
|
||||
<Button style={{ marginTop: "16px", width: '160px' }} size="big" label="Edit profile" onClick={() => history.push(`${settings.homepage}/edit/${profile.userName}`)} />
|
||||
<Button style={editButtonWrapper} size="big" label="Edit profile" onClick={() => history.push(`${settings.homepage}/edit/${profile.userName}`)} />
|
||||
</div>
|
||||
<div style={infoWrapper}>
|
||||
<div style={titlesWrapper}>
|
||||
@ -155,7 +197,7 @@ const SectionBodyContent = (props) => {
|
||||
{profile.birthday && <Text.Body style={restMargins} color='lightGray' title='Date of birth'>Date of birth:</Text.Body>}
|
||||
{profile.location && <Text.Body style={restMargins} color='lightGray' title='Location'>Location:</Text.Body>}
|
||||
{isSelf && <Text.Body style={restMargins} color='lightGray' title='Language'>Language:</Text.Body>}
|
||||
{isSelf && <Text.Body style={{ marginTop: "24px" }} color='lightGray' title='Affiliate status'>Affiliate status:</Text.Body>}
|
||||
{isSelf && <Text.Body style={marginTop24} color='lightGray' title='Affiliate status'>Affiliate status:</Text.Body>}
|
||||
</div>
|
||||
<div>
|
||||
<Text.Body style={restMargins}>{profile.isVisitor ? "Guest" : "Employee"}</Text.Body>
|
||||
@ -168,24 +210,24 @@ const SectionBodyContent = (props) => {
|
||||
<Text.Body style={restMargins}>{getFormattedDate(profile.birthday)}</Text.Body>
|
||||
<Text.Body style={restMargins}>{profile.location}</Text.Body>
|
||||
{isSelf && <Text.Body style={restMargins}>{profile.cultureName}</Text.Body>}
|
||||
{isSelf && <Button style={{ marginTop: "22px" }} size="base" label="Become our Affiliate" onClick={() => console.log('Become our Affiliate onClick()')} />}
|
||||
{isSelf && <Button style={marginTop22} size="base" label="Become our Affiliate" onClick={() => console.log('Become our Affiliate onClick()')} />}
|
||||
</div>
|
||||
</div>
|
||||
{isSelf &&
|
||||
<div style={{ width: "100%", marginBottom: "24px" }}>
|
||||
<div style={selfToggleWrapper}>
|
||||
<ToggleContent label="Login settings" style={notesWrapper} isOpen={true}>
|
||||
<Text.Body tag="span">
|
||||
Two-factor authentication via code generating application was enabled for all users by cloud service administrator.
|
||||
<div style={{ marginTop: "10px" }}>
|
||||
<div style={marginTop10}>
|
||||
<Link type="action" isBold={true} isHovered={true} fontSize={13} >{'Reset application'}</Link>
|
||||
<Link style={{ marginLeft: "18px" }} type="action" isBold={true} isHovered={true} fontSize={13} >{'Show backup codes'}</Link>
|
||||
<Link style={marginLeft18} type="action" isBold={true} isHovered={true} fontSize={13} >{'Show backup codes'}</Link>
|
||||
</div>
|
||||
</Text.Body>
|
||||
</ToggleContent>
|
||||
</div>
|
||||
}
|
||||
{isSelf &&
|
||||
<div style={{ width: "100%", marginBottom: "24px" }}>
|
||||
<div style={selfToggleWrapper}>
|
||||
<ToggleContent label="Subscriptions" style={notesWrapper} isOpen={true}>
|
||||
<Text.Body tag="span">
|
||||
<Button size="big" label="Edit subscriptions" primary={true} onClick={() => console.log('Edit subscriptions onClick()')} />
|
||||
@ -194,7 +236,7 @@ const SectionBodyContent = (props) => {
|
||||
</div>
|
||||
}
|
||||
{profile.notes &&
|
||||
<div style={{ width: "100%" }}>
|
||||
<div style={notesToggleWrapper}>
|
||||
<ToggleContent label="Comment" style={notesWrapper} isOpen={true}>
|
||||
<Text.Body tag="span">
|
||||
{profile.notes}
|
||||
@ -203,7 +245,7 @@ const SectionBodyContent = (props) => {
|
||||
</div>
|
||||
}
|
||||
{profile.contacts &&
|
||||
<div style={{ width: "100%", marginTop: "24px" }}>
|
||||
<div style={contactsToggleWrapper}>
|
||||
<ToggleContent label="Contact information" style={notesWrapper} isOpen={true}>
|
||||
<Text.Body tag="span">
|
||||
{createContacts(userContacts)}
|
||||
@ -212,7 +254,7 @@ const SectionBodyContent = (props) => {
|
||||
</div>
|
||||
}
|
||||
{profile.contacts &&
|
||||
<div style={{ width: "100%", marginTop: "24px" }}>
|
||||
<div style={contactsToggleWrapper}>
|
||||
<ToggleContent label="Social profiles" style={notesWrapper} isOpen={true}>
|
||||
<Text.Body tag="span">
|
||||
{createContacts(userSocialProfiles)}
|
||||
|
||||
@ -133,6 +133,15 @@ class Link extends React.PureComponent {
|
||||
stopAction = (e) => !this.props.href && e.preventDefault();
|
||||
toggleDropdown = (isOpen) => this.setState({ isOpen: isOpen });
|
||||
toggleHovered = (isHovered) => this.setState({ isHovered: isHovered });
|
||||
onMouseAction = () => this.props.dropdownType === 'appearDottedAfterHover' && this.toggleHovered(!this.state.isHovered);
|
||||
clickToSpan = () => {
|
||||
this.setState({ data: this.props.data });
|
||||
this.toggleDropdown(!this.state.isOpen);
|
||||
}
|
||||
clickToSpanWithHandleEvent = (e) => {
|
||||
this.stopAction(e);
|
||||
this.props.hasOwnProperty("onClick") && this.props.onClick(e);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.ref.current) {
|
||||
@ -157,27 +166,16 @@ class Link extends React.PureComponent {
|
||||
}
|
||||
|
||||
render() {
|
||||
//console.log("Link render");
|
||||
console.log("Link render");
|
||||
return (
|
||||
<span ref={this.ref}
|
||||
onMouseEnter={() => {
|
||||
this.props.dropdownType === 'appearDottedAfterHover' &&
|
||||
this.toggleHovered(!this.state.isHovered)
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
this.props.dropdownType === 'appearDottedAfterHover' &&
|
||||
this.toggleHovered(!this.state.isHovered)
|
||||
}}>
|
||||
onMouseEnter={this.onMouseAction}
|
||||
onMouseLeave={this.onMouseAction}
|
||||
>
|
||||
<StyledSpan onClick={
|
||||
this.state.isDropdown ?
|
||||
() => {
|
||||
this.setState({ data: this.props.data });
|
||||
this.toggleDropdown(!this.state.isOpen);
|
||||
}
|
||||
: (e) => {
|
||||
this.stopAction(e);
|
||||
this.props.hasOwnProperty("onClick") && this.props.onClick(e);
|
||||
}
|
||||
this.clickToSpan
|
||||
: this.clickToSpanWithHandleEvent
|
||||
}>
|
||||
<StyledLink {...this.props}
|
||||
>{this.props.children}</StyledLink>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { Link, DropDownItem } from 'asc-web-components';
|
||||
import { Link } from 'asc-web-components';
|
||||
import { Container, Row, Col } from 'reactstrap';
|
||||
|
||||
const rowStyle = {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user