IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Moved profile menu to the NavMenu.

Browse Source
This commit is contained in:
TatianaLopaeva 2021-03-03 11:25:28 +03:00
parent 5212633a8d
commit 988afe48fd
8 changed files with 65 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
packages/asc-web-common/components/ProfileMenu/ProfileMenu.stories.js
View File

@ -1,79 +0,0 @@
import React from "react";
import { storiesOf } from "@storybook/react";
import { withKnobs, text, select } from "@storybook/addon-knobs/react";
import { BooleanValue } from "react-values";
import ProfileMenu from ".";
import Section from "../../../.storybook/decorators/section";
import withReadme from "storybook-readme/with-readme";
import Readme from "./README.md";
import DropDownItem from "@appserver/components/drop-down-item";
import Avatar from "@appserver/components/avatar";
const roleOptions = ["owner", "admin", "guest", "user"];
const defaultAvatar =
"https://static-www.onlyoffice.com/images/team/developers_photos/personal_44_2x.jpg";
storiesOf("Components|ProfileMenu", module)
.addDecorator(withKnobs)
.addDecorator(withReadme(Readme))
.add("base", () => {
const userRole = select("avatarRole", roleOptions, "admin");
const userAvatar = text("avatarSource", "") || defaultAvatar;
const userEmail = text("email", "") || "janedoe@gmail.com";
const userDisplayName = text("displayName", "") || "Jane Doe";
return (
<Section>
<BooleanValue>
{({ value, toggle }) => (
<div
style={{
position: "relative",
float: "right",
height: "56px",
paddingRight: "4px",
}}
>
<Avatar
size="medium"
role={userRole}
source={userAvatar}
userName={userDisplayName}
onClick={() => toggle(!value)}
/>
<ProfileMenu
avatarRole={userRole}
avatarSource={userAvatar}
displayName={userDisplayName}
email={userEmail}
open={value}
>
<DropDownItem
key="1"
label="Profile"
onClick={() => console.log("Profile click")}
/>
<DropDownItem
key="2"
label="Subscriptions"
onClick={() => console.log("Subscriptions click")}
/>
<DropDownItem key="sep" isSeparator />
<DropDownItem
key="3"
label="About this program"
onClick={() => console.log("About click")}
/>
<DropDownItem
key="4"
label="Log out"
onClick={() => console.log("Log out click")}
/>
</ProfileMenu>
</div>
)}
</BooleanValue>
</Section>
);
});

18
packages/asc-web-common/components/ProfileMenu/ProfileMenu.test.js
View File

@ -1,18 +0,0 @@
import React from "react";
import { mount } from "enzyme";
import ProfileMenu from ".";
const baseProps = {
avatarRole: "admin",
avatarSource: "",
displayName: "Jane Doe",
email: "janedoe@gmail.com",
};
describe("<Layout />", () => {
it("renders without error", () => {
const wrapper = mount(<ProfileMenu {...baseProps} />);
expect(wrapper).toExist();
});
});

32
packages/asc-web-common/components/ProfileMenu/README.md
View File

@ -1,32 +0,0 @@
# ProfileMenu
### Usage
```js
import ProfileMenu from "@appserver/common/components/ProfileMenu";
```
```jsx
<ProfileMenu
avatarRole="admin"
avatarSource=""
displayName="Jane Doe"
email="janedoe@gmail.com"
/>
```
To add preview of user profile, you must use ProfileMenu component inherited from DropDownItem.
To add an avatar username and email, you need to add parameters of Avatar component: avatarSource - link to user's avatar, avatarRole - user's role, displayName - user name and email - user’s email address.
### Properties
| Props | Type | Required | Values | Default | Description |
| -------------- | :------------: | :------: | :----------------------------: | :-----: | ---------------------- |
| `avatarRole` | `oneOf` | - | `owner`,`admin`,`guest`,`user` | `user` | Adds a user role table |
| `avatarSource` | `string` | - | - | - | Avatar image source |
| `className` | `string` | - | - | - | Accepts class |
| `displayName` | `string` | - | - | - | User name for display |
| `email` | `string` | - | - | - | User email for display |
| `id` | `string` | - | - | - | Accepts id |
| `style` | `obj`, `array` | - | - | - | Accepts css style |

63
packages/asc-web-common/components/ProfileMenu/StyledProfileMenu.js
View File

@ -1,63 +0,0 @@
import styled, { css } from "styled-components";
import DropDownItem from "@appserver/components/drop-down-item";
const commonStyle = css`
font-family: "Open Sans", sans-serif, Arial;
font-style: normal;
color: #ffffff;
margin-left: 60px;
margin-top: -3px;
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`;
export const StyledProfileMenu = styled(DropDownItem)`
position: relative;
overflow: visible;
padding: 0px;
cursor: pointer;
display: inline-block;
margin-top: -6px;
`;
export const MenuContainer = styled.div`
position: relative;
height: 76px;
background: linear-gradient(200.71deg, #2274aa 0%, #0f4071 100%);
border-radius: 6px 6px 0px 0px;
padding: 16px;
cursor: default;
box-sizing: border-box;
`;
export const AvatarContainer = styled.div`
display: inline-block;
float: left;
`;
export const MainLabelContainer = styled.div`
font-size: 16px;
line-height: 28px;
${commonStyle}
`;
export const LabelContainer = styled.div`
font-weight: normal;
font-size: 11px;
line-height: 16px;
${commonStyle}
`;
export const TopArrow = styled.div`
position: absolute;
cursor: default;
top: -6px;
right: 16px;
width: 24px;
height: 6px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.27954 1.12012C10.8122 -0.295972 13.1759 -0.295971 14.7086 1.12012L18.8406 4.93793C19.5796 5.62078 20.5489 6 21.5551 6H24H0H2.43299C3.4392 6 4.40845 5.62077 5.1475 4.93793L9.27954 1.12012Z' fill='%23206FA4'/%3E%3C/svg%3E");
`;

1
packages/asc-web-common/components/ProfileMenu/index.js
View File

@ -1 +0,0 @@
export default from "./ProfileMenu";

1
packages/asc-web-common/components/index.js
View File

@ -9,7 +9,6 @@ export { default as Layout } from "./Layout";
export { default as ScrollToTop } from "./Layout/ScrollToTop";
export * from "./Layout/context";
export { default as PageLayout } from "./PageLayout";
export { default as ProfileMenu } from "./ProfileMenu";
export { default as ErrorContainer } from "./ErrorContainer";
export { default as ErrorBoundary } from "./ErrorBoundary";
export { default as FilterInput } from "./FilterInput";

2
web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-actions.js
View File

@ -3,7 +3,7 @@ import PropTypes from "prop-types";
import Avatar from "@appserver/components/avatar";
import DropDownItem from "@appserver/components/drop-down-item";
import Link from "@appserver/components/link";
import ProfileMenu from "@appserver/common/components/ProfileMenu";
import ProfileMenu from "./profile-menu";
import { inject, observer } from "mobx-react";
class ProfileActions extends React.PureComponent {

72
packages/asc-web-common/components/ProfileMenu/ProfileMenu.js → web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-menu.js
View File

@ -2,14 +2,70 @@ import React from "react";
import PropTypes from "prop-types";
import Avatar from "@appserver/components/avatar";
import DropDown from "@appserver/components/drop-down";
import {
AvatarContainer,
LabelContainer,
MainLabelContainer,
MenuContainer,
StyledProfileMenu,
TopArrow,
} from "./StyledProfileMenu";
import styled, { css } from "styled-components";
import DropDownItem from "@appserver/components/drop-down-item";
const commonStyle = css`
font-family: "Open Sans", sans-serif, Arial;
font-style: normal;
color: #ffffff;
margin-left: 60px;
margin-top: -3px;
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`;
export const StyledProfileMenu = styled(DropDownItem)`
position: relative;
overflow: visible;
padding: 0px;
cursor: pointer;
display: inline-block;
margin-top: -6px;
`;
export const MenuContainer = styled.div`
position: relative;
height: 76px;
background: linear-gradient(200.71deg, #2274aa 0%, #0f4071 100%);
border-radius: 6px 6px 0px 0px;
padding: 16px;
cursor: default;
box-sizing: border-box;
`;
export const AvatarContainer = styled.div`
display: inline-block;
float: left;
`;
export const MainLabelContainer = styled.div`
font-size: 16px;
line-height: 28px;
${commonStyle}
`;
export const LabelContainer = styled.div`
font-weight: normal;
font-size: 11px;
line-height: 16px;
${commonStyle}
`;
export const TopArrow = styled.div`
position: absolute;
cursor: default;
top: -6px;
right: 16px;
width: 24px;
height: 6px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.27954 1.12012C10.8122 -0.295972 13.1759 -0.295971 14.7086 1.12012L18.8406 4.93793C19.5796 5.62078 20.5489 6 21.5551 6H24H0H2.43299C3.4392 6 4.40845 5.62077 5.1475 4.93793L9.27954 1.12012Z' fill='%23206FA4'/%3E%3C/svg%3E");
`;
class ProfileMenu extends React.Component {
constructor(props) {