Web: People/Components: Added login settings buttons to edit profile page, social button - style fix

2021-03-23 18:29:29 +03:00 · 2021-03-23 18:29:29 +03:00 · e1df253b22
commit e1df253b22
parent 848e5dc500
6 changed files with 111 additions and 7 deletions
--- a/packages/asc-web-components/social-button/index.js
+++ b/packages/asc-web-components/social-button/index.js
@ -13,7 +13,7 @@ class SocialButton extends React.Component {
  }

  render() {
-    const { label, iconName } = this.props;
+    const { label, iconName, iconOptions } = this.props;
    return (
      <StyledSocialButton {...this.props}>
        <ReactSVG src={iconName} />
@ -42,6 +42,8 @@ SocialButton.propTypes = {
  id: PropTypes.string,
  /** Accepts css style */
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  onClick: PropTypes.func,
+  iconOptions: PropTypes.object,
 };

 SocialButton.defaultProps = {
@ -49,6 +51,7 @@ SocialButton.defaultProps = {
  iconName: "SocialButtonGoogleIcon",
  tabIndex: -1,
  isDisabled: false,
+  iconOptions: {},
 };

 export default SocialButton;
--- a/packages/asc-web-components/social-button/styled-social-button.js
+++ b/packages/asc-web-components/social-button/styled-social-button.js
@ -1,3 +1,4 @@
+import React from "react";
 import styled, { css } from "styled-components";
 import Base from "../themes/base";
 import PropTypes from "prop-types";
@ -20,7 +21,8 @@ const StyledSocialButton = styled(ButtonWrapper).attrs((props) => ({
 }))`
  font-family: ${(props) => props.theme.fontFamily};
  border: none;
-  display: inline-block;
+  display: flex;
+  align-items: center;

  font-weight: ${(props) => props.theme.socialButton.fontWeight};
  text-decoration: ${(props) => props.theme.socialButton.textDecoration};
@ -76,7 +78,7 @@ const StyledSocialButton = styled(ButtonWrapper).attrs((props) => ({
        `};

  .social_button_text {
-    position: absolute;
+    position: relative;

    width: ${(props) => props.theme.socialButton.text.width};
    height: ${(props) => props.theme.socialButton.text.height};
--- a/packages/asc-web-components/themes/base.js
+++ b/packages/asc-web-components/themes/base.js
@ -213,10 +213,8 @@ const Base = {
  socialButton: {
    fontWeight: "600",
    textDecoration: "none",
-    margin: "20px 0 0 20px",
    padding: "0",
    borderRadius: "2px",
-    width: "201px",
    height: "40px",
    textAlign: "left",
    stroke: " none",
@ -238,14 +236,15 @@ const Base = {
    text: {
      width: "142px",
      height: "16px",
-      margin: "12px 9px 12px 10px",
-      fontWeight: "500",
+      margin: "0 11px",
+      fontWeight: "600",
      fontSize: "14px",
      lineHeight: "16px",
      letterSpacing: "0.21875px",
      overflow: "hidden",
      textOverflow: "ellipsis",
      whiteSpace: "nowrap",
+      color: "#757575",
    },

    svg: {
--- a/products/ASC.People/Client/public/images/share.google.svg
+++ b/products/ASC.People/Client/public/images/share.google.svg
@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.64 9.20419C17.64 8.56601 17.5827 7.95237 17.4764 7.36328H9V10.8446H13.8436C13.635 11.9696 13.0009 12.9228 12.0477 13.561V15.8192H14.9564C16.6582 14.2524 17.64 11.9451 17.64 9.20419Z" fill="#4285F4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 18.0009C11.43 18.0009 13.4673 17.195 14.9564 15.8205L12.0477 13.5623C11.2418 14.1023 10.2109 14.4214 9 14.4214C6.65591 14.4214 4.67182 12.8382 3.96409 10.7109H0.957275V13.0428C2.43818 15.9841 5.48182 18.0009 9 18.0009Z" fill="#34A853"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.96409 10.7088C3.78409 10.1688 3.68182 9.59203 3.68182 8.99885C3.68182 8.40567 3.78409 7.82885 3.96409 7.28885V4.95703H0.957273C0.347727 6.17203 0 7.54658 0 8.99885C0 10.4511 0.347727 11.8257 0.957273 13.0407L3.96409 10.7088Z" fill="#FBBC05"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3.57955C10.3214 3.57955 11.5077 4.03364 12.4405 4.92545L15.0218 2.34409C13.4632 0.891818 11.4259 0 9 0C5.48182 0 2.43818 2.01682 0.957275 4.95818L3.96409 7.29C4.67182 5.16273 6.65591 3.57955 9 3.57955Z" fill="#EA4335"/>
+</svg>
--- a/products/ASC.People/Client/public/images/share.linkedin.svg
+++ b/products/ASC.People/Client/public/images/share.linkedin.svg
@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.75036 8.05344C9.74586 8.06301 9.73967 8.07201 9.73292 8.08044H9.75036V8.05344Z" fill="#1276B3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 0C1.00736 0 0 1.00736 0 2.25V15.75C0 16.9926 1.00736 18 2.25 18H15.75C16.9926 18 18 16.9926 18 15.75V2.25C18 1.00736 16.9926 0 15.75 0H2.25ZM2.89855 6.91044H5.5828V14.9846H2.89855V6.91044ZM4.25755 3.01794C5.17611 3.01794 5.74142 3.62094 5.7583 4.41407C5.7583 5.18751 5.17611 5.80851 4.24011 5.80851H4.22267C3.32211 5.80851 2.73992 5.18751 2.73992 4.41407C2.73992 3.62094 3.34011 3.01794 4.25755 3.01794ZM12.1697 6.72144C13.9354 6.72144 15.26 7.87513 15.26 10.3546L15.2595 14.9846H12.5758V10.6646C12.5758 9.57782 12.1882 8.83869 11.2157 8.83869C10.4754 8.83869 10.0333 9.34044 9.83867 9.82082C9.7678 9.99463 9.75036 10.2314 9.75036 10.4756V14.9846H7.06723C7.06723 14.9846 7.10155 7.66757 7.06723 6.91044H9.75036V8.05344C10.1087 7.50388 10.746 6.72144 12.1697 6.72144Z" fill="#1276B3"/>
+</svg>
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js
@ -6,6 +6,7 @@ import Button from "@appserver/components/button";
 import Textarea from "@appserver/components/textarea";
 import Text from "@appserver/components/text";
 import AvatarEditor from "@appserver/components/avatar-editor";
+import SocialButton from "@appserver/components/social-button";
 import Link from "@appserver/components/link";
 import { isTablet } from "@appserver/components/utils/device";

@ -51,6 +52,9 @@ import config from "../../../../../package.json";
 import { combineUrl } from "@appserver/common/utils";
 import { AppServerConfig } from "@appserver/common/constants";

+const facebookIconOptions = { isfill: true, color: "#4469B0" };
+const twitterIconOptions = { isfill: true, color: "#2AA3EF" };
+
 const dialogsDataset = {
  changeEmail: "changeEmail",
  changePassword: "changePassword",
@ -69,6 +73,13 @@ const Th = styled.th`

 const Td = styled.td``;

+const StyledWrapper = styled.div`
+  align-items: center;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 16px 22px;
+`;
+
 class UpdateUserForm extends React.Component {
  constructor(props) {
    super(props);
@ -533,6 +544,19 @@ class UpdateUserForm extends React.Component {
    this.setIsEdit();
  }

+  onClickGoogleConnect = () => {
+    console.log("Connect to Google");
+  };
+  onClickFacebookConnect = () => {
+    console.log("Connect to Facebook");
+  };
+  onClickTwitterConnect = () => {
+    console.log("Connect to Twitter");
+  };
+  onClickLinkedInConnect = () => {
+    console.log("Connect to LinkedIn");
+  };
+
  render() {
    const {
      isLoading,
@ -826,6 +850,72 @@ class UpdateUserForm extends React.Component {
            />
          </MainFieldsContainer>
        </MainContainer>
+        <InfoFieldContainer headerText={t("LoginSettings")}>
+          <StyledWrapper>
+            <SocialButton
+              iconName={"images/share.google.svg"}
+              label={t("SignInWithGoogle")}
+              className="socialButton"
+            />
+
+            <Link
+              type="action"
+              color="A3A9AE"
+              onClick={this.onClickGoogleConnect}
+              isHovered={true}
+            >
+              {t("Connect")}
+            </Link>
+            <div>
+              <SocialButton
+                iconName={"images/share.facebook.react.svg"}
+                label={t("SignInWithFacebook")}
+                className="socialButton"
+                iconOptions={facebookIconOptions}
+              />
+            </div>
+
+            <Link
+              type="action"
+              color="A3A9AE"
+              onClick={this.onClickFacebookConnect}
+              isHovered={true}
+            >
+              {t("Connect")}
+            </Link>
+            <div>
+              <SocialButton
+                iconName={"images/share.twitter.react.svg"}
+                label={t("SignInWithTwitter")}
+                className="socialButton"
+                iconOptions={twitterIconOptions}
+              />
+            </div>
+            <Link
+              type="action"
+              color="A3A9AE"
+              onClick={this.onClickTwitterConnect}
+              isHovered={true}
+            >
+              {t("Connect")}
+            </Link>
+            <div>
+              <SocialButton
+                iconName={"images/share.linkedin.svg"}
+                label={t("SignInWithLinkedIn")}
+                className="socialButton"
+              />
+            </div>
+            <Link
+              type="action"
+              color="A3A9AE"
+              onClick={this.onClickLinkedInConnect}
+              isHovered={true}
+            >
+              {t("Connect")}
+            </Link>
+          </StyledWrapper>
+        </InfoFieldContainer>
        <InfoFieldContainer headerText={t("Comments")}>
          <Textarea
            placeholder={t("WriteComment")}