Merge branch 'release/v1.2' of github.com:ONLYOFFICE/AppServer into release/v1.2

packages/asc-web-components/avatar/README.md

@@ -21,6 +21,7 @@ If you want to create an avatar with initials, only _first letter of first two w
 | `size`       |    `oneOf`     |    -     | `max`, `big`, `medium`, `small`, `min` |   `medium`   | Size of avatar                                           |
 | `role`       |    `oneOf`     |    -     |   `owner`, `admin`, `guest`, `user`    |    `user`    | Adds a user role table                                   |
 | `source`     |    `string`    |    -     |                   -                    |      -       | The address of the image for an image avatar             |
+| `isIcon`     |     `bool`     |    -     |                   -                    |   `false`    | Set `true` if `.svg` is provided as `source` prop        |
 | `userName`   |    `string`    |    -     |                   -                    |      -       | Need to create an avatar with initials                   |
 | `editing`    |     `bool`     |    -     |                   -                    |   `false`    | Displays avatar edit layer                               |
 | `editLabel`  |    `string`    |    -     |                   -                    | `Edit photo` | Label for editing layer                                  |

packages/asc-web-components/avatar/avatar.stories.js

@@ -19,12 +19,46 @@ export default {
 };
 
 const Template = (args) => <Avatar {...args} />;
-
 export const Default = Template.bind({});
+
+const PictureTemplate = (args) => <Avatar {...args} />;
+export const Picture = PictureTemplate.bind({});
+
+const InitialsTemplate = (args) => <Avatar {...args} />;
+export const Initials = InitialsTemplate.bind({});
+
+const IconTemplate = (args) => <Avatar {...args} />;
+export const Icon = IconTemplate.bind({});
+
 Default.args = {
   size: "max",
-  role: "admin",
+  role: "owner",
   source: "",
   userName: "",
   editing: false,
 };
+
+Picture.args = {
+  size: "max",
+  role: "admin",
+  source:
+    "https://images.unsplash.com/photo-1623949444573-4811dfc64771?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80",
+  userName: "",
+  editing: false,
+};
+
+Initials.args = {
+  size: "max",
+  role: "guest",
+  source: "",
+  userName: "John Doe",
+  editing: false,
+};
+
+Icon.args = {
+  size: "max",
+  role: "user",
+  source: "/static/images/@.react.svg",
+  userName: "",
+  editing: false,
+};

packages/asc-web-components/avatar/index.js

@@ -11,6 +11,7 @@ import {
   NamedAvatar,
   StyledImage,
   StyledAvatar,
+  StyledIconWrapper,
 } from "./styled-avatar";
 import IconButton from "../icon-button";
 import commonIconsStyles from "../utils/common-icons-style";
@@ -55,12 +56,20 @@ Initials.propTypes = {
 const Avatar = (props) => {
   //console.log("Avatar render");
   const { size, source, userName, role, editing, editAction } = props;
-  let isDefault = false;
+  let isDefault = false,
+    isIcon = false;
 
   if (source?.includes("default_user_photo")) isDefault = true;
+  else if (source?.includes(".svg")) isIcon = true;
 
   const avatarContent = source ? (
+    isIcon ? (
+      <StyledIconWrapper>
+        <IconButton iconName={source} className="icon" isDisabled={true} />
+      </StyledIconWrapper>
+    ) : (
       <StyledImage src={source} isDefault={isDefault} />
+    )
   ) : userName ? (
     <Initials userName={userName} size={size} />
   ) : (
@@ -94,8 +103,9 @@ Avatar.propTypes = {
   size: PropTypes.oneOf(["max", "big", "medium", "small", "min"]),
   /** Adds a user role table */
   role: PropTypes.oneOf(["owner", "admin", "guest", "user"]),
-  /** The address of the image for an image avatar */
+  /** Provide either a url to display as `Picture` or path to **.svg** file to display as `Icon` */
   source: PropTypes.string,
+  /** Provide this and leave `source` empty to display as initials */
   userName: PropTypes.string,
   editing: PropTypes.bool,
   /** Function called when the avatar change button is pressed */

packages/asc-web-components/avatar/styled-avatar.js

@@ -37,11 +37,13 @@ EditContainer.defaultProps = { theme: Base };
 const AvatarWrapper = styled.div`
   border-radius: ${(props) => props.theme.avatar.imageContainer.borderRadius};
   height: ${(props) => props.theme.avatar.imageContainer.height};
+
   background-color: ${(props) =>
-    (props.source === "" &&
-      props.userName !== "" &&
-      props.theme.avatar.imageContainer.backgroundImage) ||
-    props.theme.avatar.imageContainer.background};
+    props.source
+      ? props.theme.avatar.icon.background
+      : props.userName
+      ? props.theme.avatar.imageContainer.backgroundImage
+      : props.theme.avatar.imageContainer.background};
 
   & > svg {
     display: ${(props) => props.theme.avatar.imageContainer.svg.display};
@@ -106,6 +108,24 @@ const StyledImage = styled.img`
 `;
 StyledImage.defaultProps = { theme: Base };
 
+const StyledIconWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .icon,
+  .icon:hover {
+    width: 50%;
+    height: 50%;
+    path {
+      fill: ${(props) => props.theme.avatar.icon.color};
+    }
+  }
+`;
+StyledIconWrapper.defaultProps = { theme: Base };
+
 const widthStyle = (props) => props.theme.avatar.width[props.size];
 const heightStyle = (props) => props.theme.avatar.height[props.size];
 
@@ -161,5 +181,6 @@ export {
   RoleWrapper,
   NamedAvatar,
   StyledImage,
+  StyledIconWrapper,
   StyledAvatar,
 };

packages/asc-web-components/themes/base.js

@@ -42,6 +42,7 @@ const {
   hoverWarning,
   darkBlack,
   silver,
+  lightHover,
   strongBlue,
   lightGrayishStrongBlue,
   darkRed,
@@ -1074,6 +1075,11 @@ const Base = {
       borderRadius: "50%",
     },
 
+    icon: {
+      background: lightHover,
+      color: grayMain,
+    },
+
     width: {
       min: "32px",
       small: "36px",

public/images/@.react.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.12622 0.0623095C6.52259 0.0529189 3.84959 1.16251 2.32398 3.25184C0.736323 5.39443 0.336116 8.22297 0.861673 10.7781C1.23082 12.4836 2.25589 14.0953 3.82515 14.9865C5.61514 16.0398 7.79774 16.1975 9.83777 15.9703C10.8616 15.8495 11.8696 15.5833 12.806 15.1664C12.806 14.5367 12.806 13.907 12.806 13.2773C10.7015 14.1265 8.29542 14.5402 6.05867 13.9306C4.48717 13.4996 3.20984 12.1815 2.86419 10.6287C2.45157 9.04801 2.55181 7.34822 3.07473 5.80605C3.63474 4.26487 4.849 2.93158 6.44338 2.37082C8.03429 1.76484 9.86191 1.70933 11.4856 2.23251C12.9327 2.74901 14.112 3.96461 14.4731 5.42171C14.8484 6.75538 14.8052 8.22873 14.275 9.51254C14.0412 10.0535 13.5129 10.6052 12.854 10.4814C12.4894 10.4243 12.2048 10.1235 12.1692 9.76841C11.9747 8.8739 12.2135 7.95948 12.1981 7.05533C12.2482 6.14079 12.2982 5.22624 12.3499 4.31179C10.8664 3.87955 9.26388 3.60154 7.73322 3.95049C6.18348 4.36389 4.99476 5.72089 4.7354 7.25821C4.50893 8.40277 4.60731 9.63904 5.15132 10.68C5.65435 11.5723 6.62808 12.2075 7.6839 12.2469C8.8488 12.3533 10.0897 11.8801 10.7516 10.9229C11.1825 11.88 12.3358 12.4244 13.3839 12.2305C14.6343 12.0636 15.6432 11.1114 16.0838 9.99452C16.8123 8.33866 16.7794 6.43221 16.2744 4.72095C15.6722 2.8322 14.1737 1.21605 12.2394 0.558331C11.2486 0.195612 10.1849 0.042059 9.12622 0.0623095ZM9.00327 5.55242C9.41499 5.55114 9.82836 5.5837 10.2278 5.66847C10.1108 6.97335 10.2543 8.33962 9.73879 9.57566C9.49209 10.0977 8.95286 10.5035 8.35165 10.4958C7.72235 10.5558 7.0233 10.196 6.8763 9.56454C6.59511 8.72671 6.67809 7.79938 6.93529 6.96772C7.22353 6.20371 7.95707 5.57045 8.82131 5.56199C8.88181 5.55689 8.94255 5.55366 9.00327 5.55242Z" fill="black"/>
+</svg>