From 2463e3cfc3cecd2212fcdb0f56869b88f555f974 Mon Sep 17 00:00:00 2001 From: mushka Date: Wed, 8 Jun 2022 17:37:58 +0300 Subject: [PATCH 1/3] updated Avatar component for it to also display provided SVGs and filled its Storybook --- packages/asc-web-components/avatar/README.md | 1 + .../avatar/avatar.stories.js | 38 ++++++++++++++++++- packages/asc-web-components/avatar/index.js | 16 ++++++-- .../avatar/styled-avatar.js | 29 ++++++++++++-- packages/asc-web-components/themes/base.js | 6 +++ public/images/@.react.svg | 3 ++ 6 files changed, 84 insertions(+), 9 deletions(-) create mode 100644 public/images/@.react.svg diff --git a/packages/asc-web-components/avatar/README.md b/packages/asc-web-components/avatar/README.md index ae2d54b0d1..25383a9d6c 100644 --- a/packages/asc-web-components/avatar/README.md +++ b/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 | diff --git a/packages/asc-web-components/avatar/avatar.stories.js b/packages/asc-web-components/avatar/avatar.stories.js index c565f59acb..15ff55be1a 100644 --- a/packages/asc-web-components/avatar/avatar.stories.js +++ b/packages/asc-web-components/avatar/avatar.stories.js @@ -19,12 +19,46 @@ export default { }; const Template = (args) => ; - export const Default = Template.bind({}); + +const PictureTemplate = (args) => ; +export const Picture = PictureTemplate.bind({}); + +const InitialsTemplate = (args) => ; +export const Initials = InitialsTemplate.bind({}); + +const IconTemplate = (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, +}; diff --git a/packages/asc-web-components/avatar/index.js b/packages/asc-web-components/avatar/index.js index 41ba9a6e20..39be9434cd 100644 --- a/packages/asc-web-components/avatar/index.js +++ b/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 ? ( + + + + ) : ( + + ) ) : userName ? ( ) : ( @@ -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 */ diff --git a/packages/asc-web-components/avatar/styled-avatar.js b/packages/asc-web-components/avatar/styled-avatar.js index 45c36fee27..d75e4e0ad2 100644 --- a/packages/asc-web-components/avatar/styled-avatar.js +++ b/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, }; diff --git a/packages/asc-web-components/themes/base.js b/packages/asc-web-components/themes/base.js index 1badb9bc0c..68d3014603 100644 --- a/packages/asc-web-components/themes/base.js +++ b/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", diff --git a/public/images/@.react.svg b/public/images/@.react.svg new file mode 100644 index 0000000000..a6e8577933 --- /dev/null +++ b/public/images/@.react.svg @@ -0,0 +1,3 @@ + + + From 1f856ef377b908c52e1aad47533cb074dc2a21a5 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Wed, 8 Jun 2022 17:44:27 +0300 Subject: [PATCH 2/3] =?UTF-8?q?Web:=20Common/People:=20Fixed=20Bug=2057478?= =?UTF-8?q?=20-=20Client.Profile.=20The=20=E2=80=98Learn=20more=E2=80=99?= =?UTF-8?q?=20link=20in=20the=20popup=20helper=20window=20leads=20to=20a?= =?UTF-8?q?=20page=20with=20a=20404=20Error.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/asc-web-common/store/SettingsStore.js | 16 ++++------------ .../Section/Body/ProfileInfo/ProfileInfo.js | 6 ++++-- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/packages/asc-web-common/store/SettingsStore.js b/packages/asc-web-common/store/SettingsStore.js index ff1111812f..2531c0c941 100644 --- a/packages/asc-web-common/store/SettingsStore.js +++ b/packages/asc-web-common/store/SettingsStore.js @@ -115,6 +115,7 @@ class SettingsStore { folderFormValidation = new RegExp('[*+:"<>?|\\\\/]', "gim"); tenantStatus = null; + helpLink = null; constructor() { makeAutoObservable(this); @@ -125,9 +126,7 @@ class SettingsStore { }; get urlAuthKeys() { - const splitted = this.culture.split("-"); - const lang = splitted.length > 0 ? splitted[0] : "en"; - return `https://helpcenter.onlyoffice.com/${lang}/installation/groups-authorization-keys.aspx`; + return `${this.helpLink}/installation/groups-authorization-keys.aspx`; } get wizardCompleted() { @@ -135,16 +134,11 @@ class SettingsStore { } get helpUrlCommonSettings() { - const substring = this.culture.substring(0, this.culture.indexOf("-")); - const lang = substring.length > 0 ? substring : "en"; - - return `https://helpcenter.onlyoffice.com/${lang}/administration/configuration.aspx#CustomizingPortal_block`; + return `${this.helpLink}/administration/configuration.aspx#CustomizingPortal_block`; } get helpUrlCreatingBackup() { - const splitted = this.culture.split("-"); - const lang = splitted.length > 0 ? splitted[0] : "en"; - return `https://helpcenter.onlyoffice.com/${lang}/administration/configuration.aspx#CreatingBackup_block`; + return `${this.helpLink}/administration/configuration.aspx#CreatingBackup_block`; } setValue = (key, value) => { @@ -334,8 +328,6 @@ class SettingsStore { : `${homepage}/` : "/"; - console.log("SET base URL", baseUrl); - baseElm[0].setAttribute("href", baseUrl); } }; diff --git a/products/ASC.People/Client/src/pages/Profile/Section/Body/ProfileInfo/ProfileInfo.js b/products/ASC.People/Client/src/pages/Profile/Section/Body/ProfileInfo/ProfileInfo.js index e1c425856e..53576ab159 100644 --- a/products/ASC.People/Client/src/pages/Profile/Section/Body/ProfileInfo/ProfileInfo.js +++ b/products/ASC.People/Client/src/pages/Profile/Section/Body/ProfileInfo/ProfileInfo.js @@ -216,6 +216,7 @@ class ProfileInfo extends React.PureComponent { culture, personal, theme, + helpLink, } = this.props; const { @@ -275,7 +276,7 @@ class ProfileInfo extends React.PureComponent { {t("Common:LearnMore")} @@ -424,7 +425,7 @@ class ProfileInfo extends React.PureComponent { export default withRouter( inject(({ auth, peopleStore }) => { const { settingsStore } = auth; - const { culture, customNames, theme } = settingsStore; + const { culture, customNames, theme, helpLink } = settingsStore; const { groupCaption, regDateCaption, @@ -456,6 +457,7 @@ export default withRouter( isLoading, updateProfileCulture, personal: auth.settingsStore.personal, + helpLink, }; })( observer( From d761598b1f20e0105f71424c7f119d55a4688a30 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Wed, 8 Jun 2022 17:47:24 +0300 Subject: [PATCH 3/3] Web: Client: Settings: applied helpLink from settings --- .../Section/Body/updateUserForm.js | 4 +++- .../language-and-time-zone.js | 5 ++++- .../common/sub-components/common-tooltips.js | 4 ++-- .../categories/security/access-portal/index.js | 17 +++++++++-------- .../security/access-portal/passwordStrength.js | 13 ++++++++----- .../categories/security/access-portal/tfa.js | 8 ++++---- .../security/access-portal/trustedMail.js | 7 ++++--- 7 files changed, 34 insertions(+), 24 deletions(-) diff --git a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js index 25d74bdf57..d8a09ba959 100644 --- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js +++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js @@ -599,6 +599,7 @@ class UpdateUserForm extends React.Component { personal, isTabletView, theme, + helpLink, } = this.props; const { guestCaption, @@ -690,7 +691,7 @@ class UpdateUserForm extends React.Component { @@ -1065,6 +1066,7 @@ export default withRouter( setUserIsUpdate: auth.userStore.setUserIsUpdate, userFormValidation: auth.settingsStore.userFormValidation, isTabletView: auth.settingsStore.isTabletView, + helpLink: auth.settingsStore.helpLink, }))( observer( withTranslation(["ProfileAction", "Common", "Translations"])( diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/language-and-time-zone.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/language-and-time-zone.js index 57fa13e9ff..af1440d41e 100644 --- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/language-and-time-zone.js +++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/language-and-time-zone.js @@ -395,6 +395,7 @@ class LanguageAndTimeZone extends React.Component { cultures, i18n, isLoadedPage, + helpLink, } = this.props; const { @@ -409,7 +410,7 @@ class LanguageAndTimeZone extends React.Component { const cultureNames = mapCulturesToArray(cultures, i18n); const tooltipLanguageTimeSettings = ( - + ); const settingsBlock = ( @@ -504,6 +505,7 @@ export default inject(({ auth, setup, common }) => { getPortalTimezones, getCurrentCustomSchema, cultures, + helpLink, } = auth.settingsStore; const { user } = auth.userStore; @@ -526,6 +528,7 @@ export default inject(({ auth, setup, common }) => { isLoaded, setIsLoadedLngTZSettings, cultures, + helpLink, }; })( withLoading( diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/common-tooltips.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/common-tooltips.js index d1cc69deac..dc3b7ee96b 100644 --- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/common-tooltips.js +++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/common-tooltips.js @@ -19,7 +19,7 @@ const StyledTooltip = styled.div` } `; -export const LanguageTimeSettingsTooltip = ({ t, theme }) => { +export const LanguageTimeSettingsTooltip = ({ t, theme, helpLink }) => { const learnMore = t("Common:LearnMore"); const text = t("Settings:StudioTimeLanguageSettings"); const save = t("Common:SaveButton"); @@ -47,7 +47,7 @@ export const LanguageTimeSettingsTooltip = ({ t, theme }) => { color={theme.studio.settings.common.linkColorHelp} className="display-block font-size" isHovered={true} - href="https://helpcenter.onlyoffice.com/administration/configuration.aspx#CustomizingPortal_block" + href={`${helpLink}/administration/configuration.aspx#CustomizingPortal_block`} > {{ learnMore }} diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/index.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/index.js index 8c45a7ebde..cca9639833 100644 --- a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/index.js +++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/index.js @@ -10,10 +10,10 @@ import TrustedMailSection from "./trustedMail"; import MobileView from "./mobileView"; import CategoryWrapper from "../sub-components/category-wrapper"; import { size } from "@appserver/components/utils/device"; -import { getLanguage } from "@appserver/common/utils"; +import { inject, observer } from "mobx-react"; const AccessPortal = (props) => { - const { t } = props; + const { t, helpLink } = props; const [isMobileView, setIsMobileView] = useState(false); useEffect(() => { @@ -29,8 +29,6 @@ const AccessPortal = (props) => { : setIsMobileView(false); }; - const lng = getLanguage(localStorage.getItem("language") || "en"); - if (isMobileView) return ; return ( @@ -39,7 +37,7 @@ const AccessPortal = (props) => { t={t} title={t("SettingPasswordStrength")} tooltipTitle={t("SettingPasswordStrengthDescription")} - tooltipUrl={`https://helpcenter.onlyoffice.com/${lng}/administration/configuration.aspx#ChangingSecuritySettings_block`} + tooltipUrl={`${helpLink}/administration/configuration.aspx#ChangingSecuritySettings_block`} />
@@ -47,7 +45,7 @@ const AccessPortal = (props) => { t={t} title={t("TwoFactorAuth")} tooltipTitle={t("TwoFactorAuthDescription")} - tooltipUrl={`https://helpcenter.onlyoffice.com/${lng}/administration/two-factor-authentication.aspx`} + tooltipUrl={`${helpLink}/administration/two-factor-authentication.aspx`} />
@@ -55,11 +53,14 @@ const AccessPortal = (props) => { t={t} title={t("TrustedMail")} tooltipTitle={t("TrustedMailDescription")} - tooltipUrl={`https://helpcenter.onlyoffice.com/${lng}/administration/configuration.aspx#ChangingSecuritySettings_block`} + tooltipUrl={`${helpLink}/administration/configuration.aspx#ChangingSecuritySettings_block`} /> ); }; -export default withTranslation("Settings")(withRouter(AccessPortal)); +export default inject(({ auth }) => { + const { helpLink } = auth.settingsStore; + return { helpLink }; +})(withTranslation("Settings")(withRouter(observer(AccessPortal)))); diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/passwordStrength.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/passwordStrength.js index 58780a757a..fa988f3e2a 100644 --- a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/passwordStrength.js +++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/passwordStrength.js @@ -8,7 +8,6 @@ import Text from "@appserver/components/text"; import Link from "@appserver/components/link"; import Slider from "@appserver/components/slider"; import Checkbox from "@appserver/components/checkbox"; -import { getLanguage } from "@appserver/common/utils"; import { LearnMoreWrapper } from "../StyledSecurity"; import toastr from "@appserver/components/toast/toastr"; import { size } from "@appserver/components/utils/device"; @@ -44,6 +43,7 @@ const PasswordStrength = (props) => { passwordSettings, initSettings, isInit, + helpLink, } = props; const [passwordLen, setPasswordLen] = useState(8); @@ -175,8 +175,6 @@ const PasswordStrength = (props) => { setShowReminder(false); }; - const lng = getLanguage(localStorage.getItem("language") || "en"); - return ( @@ -187,7 +185,7 @@ const PasswordStrength = (props) => { color="#316DAA" target="_blank" isHovered - href={`https://helpcenter.onlyoffice.com/${lng}/administration/configuration.aspx#ChangingSecuritySettings_block`} + href={`${helpLink}/administration/configuration.aspx#ChangingSecuritySettings_block`} > {t("Common:LearnMore")} @@ -253,7 +251,11 @@ const PasswordStrength = (props) => { }; export default inject(({ auth, setup }) => { - const { setPortalPasswordSettings, passwordSettings } = auth.settingsStore; + const { + setPortalPasswordSettings, + passwordSettings, + helpLink, + } = auth.settingsStore; const { initSettings, isInit } = setup; return { @@ -261,6 +263,7 @@ export default inject(({ auth, setup }) => { passwordSettings, initSettings, isInit, + helpLink, }; })( withTranslation(["Settings", "Common"])( diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/tfa.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/tfa.js index bf59724435..a17be4f76c 100644 --- a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/tfa.js +++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/tfa.js @@ -7,7 +7,6 @@ import RadioButtonGroup from "@appserver/components/radio-button-group"; import Text from "@appserver/components/text"; import Link from "@appserver/components/link"; import toastr from "@appserver/components/toast/toastr"; -import { getLanguage } from "@appserver/common/utils"; import { LearnMoreWrapper } from "../StyledSecurity"; import { size } from "@appserver/components/utils/device"; import { saveToSessionStorage, getFromSessionStorage } from "../../../utils"; @@ -22,7 +21,7 @@ const MainContainer = styled.div` `; const TwoFactorAuth = (props) => { - const { t, history, initSettings, isInit, setIsInit } = props; + const { t, history, initSettings, isInit, setIsInit, helpLink } = props; const [type, setType] = useState("none"); const [smsDisabled, setSmsDisabled] = useState(false); @@ -116,7 +115,6 @@ const TwoFactorAuth = (props) => { setShowReminder(false); }; - const lng = getLanguage(localStorage.getItem("language") || "en"); return ( @@ -125,7 +123,7 @@ const TwoFactorAuth = (props) => { color="#316DAA" target="_blank" isHovered - href={`https://helpcenter.onlyoffice.com/${lng}/administration/two-factor-authentication.aspx`} + href={`${helpLink}/administration/two-factor-authentication.aspx`} > {t("Common:LearnMore")} @@ -184,6 +182,7 @@ export default inject(({ auth, setup }) => { } = auth.tfaStore; const { isInit, initSettings, setIsInit } = setup; + const { helpLink } = auth.settingsStore; return { setTfaSettings, @@ -194,6 +193,7 @@ export default inject(({ auth, setup }) => { isInit, initSettings, setIsInit, + helpLink, }; })( withTranslation(["Settings", "Common"])(withRouter(observer(TwoFactorAuth))) diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/trustedMail.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/trustedMail.js index 6adca3eaf3..03c0e585fd 100644 --- a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/trustedMail.js +++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/access-portal/trustedMail.js @@ -7,7 +7,6 @@ import Text from "@appserver/components/text"; import Link from "@appserver/components/link"; import RadioButtonGroup from "@appserver/components/radio-button-group"; import { LearnMoreWrapper } from "../StyledSecurity"; -import { getLanguage } from "@appserver/common/utils"; import toastr from "@appserver/components/toast/toastr"; import UserFields from "../sub-components/user-fields"; import { size } from "@appserver/components/utils/device"; @@ -34,6 +33,7 @@ const TrustedMail = (props) => { trustedDomainsType, trustedDomains, setMailDomainSettings, + helpLink, } = props; const regexp = /^[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9](?:\.[a-zA-Z]{1,})+/; //check domain name valid @@ -150,7 +150,6 @@ const TrustedMail = (props) => { setShowReminder(false); }; - const lng = getLanguage(localStorage.getItem("language") || "en"); return ( @@ -159,7 +158,7 @@ const TrustedMail = (props) => { color="#316DAA" target="_blank" isHovered - href={`https://helpcenter.onlyoffice.com/${lng}/administration/configuration.aspx#ChangingSecuritySettings_block`} + href={`${helpLink}/administration/configuration.aspx#ChangingSecuritySettings_block`} > {t("Common:LearnMore")} @@ -222,11 +221,13 @@ export default inject(({ auth }) => { trustedDomainsType, trustedDomains, setMailDomainSettings, + helpLink, } = auth.settingsStore; return { trustedDomainsType, trustedDomains, setMailDomainSettings, + helpLink, }; })(withTranslation(["Settings", "Common"])(withRouter(observer(TrustedMail))));