diff --git a/packages/asc-web-common/components/Headline/Headline.js b/packages/asc-web-common/components/Headline/Headline.js index 6f46ef838c..3603ba3920 100644 --- a/packages/asc-web-common/components/Headline/Headline.js +++ b/packages/asc-web-common/components/Headline/Headline.js @@ -18,7 +18,6 @@ Headline.propTypes = { }; Headline.defaultProps = { - //color: "#333333", title: null, truncate: false, isInline: false, diff --git a/packages/asc-web-common/components/Headline/StyledHeadline.js b/packages/asc-web-common/components/Headline/StyledHeadline.js index 554ab6dd73..b693b8352c 100644 --- a/packages/asc-web-common/components/Headline/StyledHeadline.js +++ b/packages/asc-web-common/components/Headline/StyledHeadline.js @@ -19,7 +19,7 @@ const StyledHeading = styled(Heading)` line-height: 65px; font-size: ${(props) => size[props.headlineType]}; font-weight: ${(props) => weight[props.headlineType]}; - color: ${(props) => props.theme.color}; + color: ${(props) => (props.color ? props.color : props.theme.color)}; `; StyledHeading.defaultProps = { theme: Base }; diff --git a/packages/asc-web-common/components/NavMenu/sub-components/header-nav.js b/packages/asc-web-common/components/NavMenu/sub-components/header-nav.js index 6ed7450999..0bdb817451 100644 --- a/packages/asc-web-common/components/NavMenu/sub-components/header-nav.js +++ b/packages/asc-web-common/components/NavMenu/sub-components/header-nav.js @@ -96,8 +96,9 @@ const HeaderNav = ({ iconName={m.iconName} iconUrl={m.iconUrl} badgeNumber={m.notifications} + url={m.link} onClick={(e) => { - window.open(m.link, "_self"); + history.push(m.link); e.preventDefault(); }} onBadgeClick={(e) => console.log(m.iconName + "Badge Clicked", e)} diff --git a/packages/asc-web-common/components/NavMenu/sub-components/header.js b/packages/asc-web-common/components/NavMenu/sub-components/header.js index d1fe81760b..60e48450e1 100644 --- a/packages/asc-web-common/components/NavMenu/sub-components/header.js +++ b/packages/asc-web-common/components/NavMenu/sub-components/header.js @@ -2,7 +2,7 @@ import React from "react"; import { inject, observer } from "mobx-react"; import PropTypes from "prop-types"; import styled from "styled-components"; -import { Link as LogoLink } from "react-router-dom"; +import { useLocation, Link as LinkWithoutRedirect } from "react-router-dom"; import NavItem from "./nav-item"; import Headline from "../../Headline"; import Nav from "./nav"; @@ -67,6 +67,23 @@ const Header = styled.header` } `; +const StyledLink = styled.div` + display: inline; + .nav-menu-header_link { + color: #7a95b0; + font-size: 13px; + } + + a { + text-decoration: none; + } + :hover { + color: #7a95b0; + -webkit-text-decoration: underline; + text-decoration: underline; + } +`; + const versionBadgeProps = { color: "#7A95B0", fontWeight: "600", @@ -91,6 +108,7 @@ const HeaderComponent = ({ ...props }) => { const { t } = useTranslation(); + const { pathname } = useLocation(); const isNavAvailable = mainModules.length > 0; @@ -114,7 +132,7 @@ const HeaderComponent = ({ const onItemClick = (e) => { if (!e) return; const link = e.currentTarget.dataset.link; - window.open(link, "_self"); + history.push(link); e.preventDefault(); }; @@ -147,7 +165,7 @@ const HeaderComponent = ({ ); }; - + const isMainPage = pathname === "/"; return ( <>
- + ( @@ -177,7 +195,7 @@ const HeaderComponent = ({ )} src={props.logoUrl} /> - + {currentProductName} @@ -212,7 +230,7 @@ const HeaderComponent = ({ data-id={id} data-link={link} opened={isNavOpened} - active={id == currentProductId} + active={isMainPage ? false : id == currentProductId} iconName={iconName} iconUrl={iconUrl} badgeNumber={notifications} @@ -239,14 +257,11 @@ const HeaderComponent = ({ {" "} -{" "} - - {t("AboutShort")} - + + + {t("AboutShort")} + + )} diff --git a/packages/asc-web-components/avatar-editor/styled-avatar-editor.js b/packages/asc-web-components/avatar-editor/styled-avatar-editor.js index f14d2c4800..d60308dd79 100644 --- a/packages/asc-web-components/avatar-editor/styled-avatar-editor.js +++ b/packages/asc-web-components/avatar-editor/styled-avatar-editor.js @@ -1,5 +1,5 @@ import styled from "styled-components"; -import Base from "../themes/base"; +import { Base } from "../themes"; const StyledButtonsWrapper = styled.div` display: grid; diff --git a/packages/asc-web-components/group-button/index.js b/packages/asc-web-components/group-button/index.js index 2ff1169f22..44cca35d99 100644 --- a/packages/asc-web-components/group-button/index.js +++ b/packages/asc-web-components/group-button/index.js @@ -22,6 +22,10 @@ const textColor = "#333333", const StyledExpanderDownIcon = styled(ExpanderDownIcon)` ${commonIconsStyles} path { + color: ${(props) => + props.disabled + ? props.theme.groupButton.disableColor + : props.theme.groupButton.color}; fill: ${(props) => props.color}; } `; @@ -98,7 +102,6 @@ class GroupButton extends React.Component { style, } = this.props; - const color = disabled ? disabledTextColor : textColor; const itemLabel = !isSelect ? label : this.state.selected; const dropDownMaxHeightProp = dropDownMaxHeight ? { maxHeight: dropDownMaxHeight } @@ -131,7 +134,7 @@ class GroupButton extends React.Component { > {itemLabel} - + - isDisabled ? props.theme.linkWithDropdown.disableColor : props.color; + props.isDisabled ? props.theme.linkWithDropdown.disableColor : props.color; // eslint-disable-next-line react/prop-types, no-unused-vars const ExpanderDownIconWrapper = ({ diff --git a/packages/asc-web-components/tree-menu/sub-components/tree-node.js b/packages/asc-web-components/tree-menu/sub-components/tree-node.js index 98b09ba626..ddb09c36c7 100644 --- a/packages/asc-web-components/tree-menu/sub-components/tree-node.js +++ b/packages/asc-web-components/tree-menu/sub-components/tree-node.js @@ -10,6 +10,22 @@ import CatalogFolderIcon from "../../../../public/images/catalog.folder.react.sv import CheckboxCheckedIcon from "../../../../public/images/checkbox.checked.react.svg"; import CheckboxIndeterminateIcon from "../../../../public/images/checkbox.indeterminate.react.svg"; import CheckboxIcon from "../../../../public/images/checkbox.react.svg"; +import commonIconsStyles from "../../utils/common-icons-style"; + +const StyledCheckboxIcon = styled(CheckboxIcon)` + ${(props) => props.color && `color: ${props.color}`}; + ${commonIconsStyles} +`; + +const StyledCheckboxCheckedIcon = styled(CheckboxCheckedIcon)` + ${(props) => props.color && `color: ${props.color}`}; + ${commonIconsStyles} +`; + +const StyledCheckboxIndeterminateIcon = styled(CheckboxIndeterminateIcon)` + ${(props) => props.color && `color: ${props.color}`}; + ${commonIconsStyles} +`; var checkboxIcon, checkboxСheckedIcon, @@ -24,60 +40,60 @@ var checkboxIcon, treeIcon; (function () { - checkboxIcon = getCssFromSvg(ReactDOMServer.renderToString()); + checkboxIcon = getCssFromSvg( + ReactDOMServer.renderToString() + ); сheckboxDisabledIcon = getCssFromSvg( - ReactDOMServer.renderToString( - - ) + ReactDOMServer.renderToString() ); сheckboxHoverIcon = getCssFromSvg( - ReactDOMServer.renderToString() + ReactDOMServer.renderToString() ); checkboxСheckedIcon = getCssFromSvg( - ReactDOMServer.renderToString() + ReactDOMServer.renderToString() ); checkboxCheckedDisabledIcon = getCssFromSvg( ReactDOMServer.renderToString( - ) ); checkboxCheckedHoverIcon = getCssFromSvg( ReactDOMServer.renderToString( - ) ); сheckboxIndeterminateIcon = getCssFromSvg( - ReactDOMServer.renderToString() + ReactDOMServer.renderToString() ); checkboxIndeterminateDisabledIcon = getCssFromSvg( ReactDOMServer.renderToString( - ) ); checkboxIndeterminateHoverIcon = getCssFromSvg( ReactDOMServer.renderToString( - ) ); diff --git a/products/ASC.Files/Client/src/Files.jsx b/products/ASC.Files/Client/src/Files.jsx index cec65b58ac..19bd915c1f 100644 --- a/products/ASC.Files/Client/src/Files.jsx +++ b/products/ASC.Files/Client/src/Files.jsx @@ -102,12 +102,11 @@ class FilesContent extends React.Component { } const Files = inject(({ auth, initFilesStore }) => { - const homepage = config.homepage; // "/products/files"; //TODO: add homepage to config? return { //isDesktop: auth.settingsStore.isDesktopClient, user: auth.userStore.user, isAuthenticated: auth.isAuthenticated, - homepage: auth.settingsStore.homepage || homepage, + homepage: auth.settingsStore.homepage || config.homepage, encryptionKeys: auth.settingsStore.encryptionKeys, isEncryption: auth.settingsStore.isEncryptionSupport, isLoaded: auth.isLoaded && initFilesStore.isLoaded, diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js index 32dda48879..399a468215 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js @@ -1,4 +1,5 @@ import React from "react"; +import styled from "styled-components"; import Row from "@appserver/components/row"; import LinkWithDropdown from "@appserver/components/link-with-dropdown"; import ToggleButton from "@appserver/components/toggle-button"; @@ -6,6 +7,14 @@ import { StyledLinkRow } from "../StyledPanels"; import AccessComboBox from "./AccessComboBox"; import { ShareAccessRights } from "@appserver/common/constants"; import AccessEditIcon from "../../../../public/images/access.edit.react.svg"; +import commonIconsStyles from "@appserver/components/utils/common-icons-style"; + +const StyledAccessEditIcon = styled(AccessEditIcon)` + ${commonIconsStyles} + path { + fill: "#A3A9AE"; + } +`; class LinkRow extends React.Component { onToggleButtonChange = () => { @@ -48,11 +57,9 @@ class LinkRow extends React.Component { isDisabled={isDisabled} /> ) : ( - ) } diff --git a/products/ASC.Files/Client/src/i18n.js b/products/ASC.Files/Client/src/i18n.js index a809d146af..0d8a075788 100644 --- a/products/ASC.Files/Client/src/i18n.js +++ b/products/ASC.Files/Client/src/i18n.js @@ -11,7 +11,6 @@ import { LANGUAGE } from "@appserver/common/constants"; // for passing in lng and translations on init const languages = ["en", "ru"]; -const homepage = "/products/files"; //TODO: add homepage to config? i18n /* @@ -49,7 +48,7 @@ i18n }, backend: { - loadPath: `${homepage}/locales/{{lng}}/{{ns}}.json`, + loadPath: `${config.homepage}/locales/{{lng}}/{{ns}}.json`, }, react: { diff --git a/products/ASC.Files/Client/src/store/FilesStore.js b/products/ASC.Files/Client/src/store/FilesStore.js index 9474ff9c58..89d0ba832b 100644 --- a/products/ASC.Files/Client/src/store/FilesStore.js +++ b/products/ASC.Files/Client/src/store/FilesStore.js @@ -233,8 +233,7 @@ class FilesStore { params.push(`${SORT_ORDER}=${filter.sortOrder}`); //console.log("window", window.location); - const homepage = "/products/files"; //TODO: add homepage to config? - history.push(`${homepage}/filter?${params.join("&")}`); + history.push(`${config.homepage}/filter?${params.join("&")}`); }; fetchFiles = (folderId, filter, clearFilter = true) => { diff --git a/products/ASC.Files/Client/src/store/InitFilesStore.js b/products/ASC.Files/Client/src/store/InitFilesStore.js index 524e26f3a0..7a2aa9653d 100644 --- a/products/ASC.Files/Client/src/store/InitFilesStore.js +++ b/products/ASC.Files/Client/src/store/InitFilesStore.js @@ -97,8 +97,7 @@ class InitFilesStore { setModuleInfo, } = auth.settingsStore; - const homepage = "/products/files"; //TODO: add homepage to config? - setModuleInfo(homepage, "e67be73d-f9ae-4ce1-8fec-1880cb518cb4"); + setModuleInfo(config.homepage, "e67be73d-f9ae-4ce1-8fec-1880cb518cb4"); const requests = []; diff --git a/products/ASC.People/Client/src/components/Article/Header/index.js b/products/ASC.People/Client/src/components/Article/Header/index.js index 32674c970a..6132ea6dee 100644 --- a/products/ASC.People/Client/src/components/Article/Header/index.js +++ b/products/ASC.People/Client/src/components/Article/Header/index.js @@ -14,6 +14,6 @@ const ArticleHeaderContent = ({ isLoaded, currentModuleName }) => { export default inject(({ auth }) => { return { isLoaded: auth.isLoaded, - currentModuleName: "", //TODO: FIX (auth.isLoaded && auth.product.title) || null, + currentModuleName: auth.product.title, }; })(observer(ArticleHeaderContent)); diff --git a/web/ASC.Web.Client/src/Shell.jsx b/web/ASC.Web.Client/src/Shell.jsx index a11b322fe1..6a4139b18c 100644 --- a/web/ASC.Web.Client/src/Shell.jsx +++ b/web/ASC.Web.Client/src/Shell.jsx @@ -1,4 +1,5 @@ import React, { useEffect } from "react"; +import styled from "styled-components"; import { Router, Switch } from "react-router-dom"; import { inject, observer } from "mobx-react"; import NavMenu from "@appserver/common/components/NavMenu"; @@ -11,6 +12,7 @@ import Layout from "@appserver/common/components/Layout"; import ScrollToTop from "@appserver/common/components/Layout/ScrollToTop"; import history from "@appserver/common/history"; import toastr from "@appserver/common/components/Toast"; +import RectangleLoader from "@appserver/common/components/Loaders/RectangleLoader"; import { updateTempContent } from "@appserver/common/utils"; import { Provider as MobxProvider } from "mobx-react"; import ThemeProvider from "@appserver/components/theme-provider"; @@ -30,15 +32,24 @@ const About = React.lazy(() => import("./components/pages/About")); const Settings = React.lazy(() => import("./components/pages/Settings")); const ComingSoon = React.lazy(() => import("./components/pages/ComingSoon")); +const LoadingBody = styled.div` + padding: 20px; +`; +const LoadingShell = () => ( + + + +); + const SettingsRoute = (props) => ( - + }> ); const PaymentsRoute = (props) => ( - + }> @@ -46,7 +57,7 @@ const PaymentsRoute = (props) => ( ); const Error404Route = (props) => ( - + }> @@ -54,7 +65,7 @@ const Error404Route = (props) => ( ); const HomeRoute = (props) => ( - + }> @@ -62,7 +73,7 @@ const HomeRoute = (props) => ( ); const LoginRoute = (props) => ( - + }> @@ -70,7 +81,7 @@ const LoginRoute = (props) => ( ); const PeopleRoute = (props) => ( - + }> @@ -78,7 +89,7 @@ const PeopleRoute = (props) => ( ); const FilesRoute = (props) => ( - + }> @@ -86,7 +97,7 @@ const FilesRoute = (props) => ( ); const AboutRoute = (props) => ( - + }> @@ -94,7 +105,7 @@ const AboutRoute = (props) => ( ); const ComingSoonRoute = (props) => ( - + }> diff --git a/web/ASC.Web.Client/src/components/pages/Home/ModuleTile.js b/web/ASC.Web.Client/src/components/pages/Home/ModuleTile.js index a8ef01ff17..f903c7745e 100644 --- a/web/ASC.Web.Client/src/components/pages/Home/ModuleTile.js +++ b/web/ASC.Web.Client/src/components/pages/Home/ModuleTile.js @@ -2,7 +2,7 @@ import React, { useCallback } from "react"; import PropTypes from "prop-types"; import Text from "@appserver/components/text"; import StyledModuleTile from "./StyledModuleTile"; - +import { Link } from "react-router-dom"; const ModuleTile = (props) => { // console.log("ModuleTile render", props); const { title, imageUrl, link, description, isPrimary, onClick } = props; @@ -15,7 +15,7 @@ const ModuleTile = (props) => { }, [link, onClick] ); - console.log("imageUrl", imageUrl); + return ( {isPrimary ? ( @@ -29,13 +29,15 @@ const ModuleTile = (props) => {
-
- - {title} - - - {description} - +
+ + + {title} + + + {description} + +
@@ -50,13 +52,11 @@ const ModuleTile = (props) => {
- - {title} - + + + {title} + +
diff --git a/web/ASC.Web.Client/src/components/pages/Home/StyledModuleTile.js b/web/ASC.Web.Client/src/components/pages/Home/StyledModuleTile.js index 98ebbfa10f..6c99b2dde1 100644 --- a/web/ASC.Web.Client/src/components/pages/Home/StyledModuleTile.js +++ b/web/ASC.Web.Client/src/components/pages/Home/StyledModuleTile.js @@ -44,7 +44,11 @@ const StyledModuleTile = styled.div` width: auto; max-width: 50%; } + a { + text-decoration: none; + } } + .title-text { flex: 1 1 auto; padding: 1.25rem; @@ -74,6 +78,9 @@ const StyledModuleTile = styled.div` margin: 16px 0 16px 0; text-align: center; } + a { + text-decoration: none; + } } `;