From 1d7bdb03b008237792e741da1b57c059c439c95d Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Wed, 12 Feb 2020 11:40:56 +0300 Subject: [PATCH 1/3] People.Client: Home: Fixed GroupButtonsMenu size with pined Aside on mobile --- .../components/pages/Home/Section/Header/index.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js b/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js index ed59989cde..f7c2e020a8 100644 --- a/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js +++ b/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js @@ -38,12 +38,14 @@ const StyledContainer = styled.div` .group-button-menu-container { margin: 0 -16px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + padding-bottom: 56px; @media (max-width: 1024px) { & > div:first-child { - position: absolute; - top: 56px; - z-index: 180; + ${props => props.isArticlePinned && css`width: calc(100% - 240px);`} + position: absolute; + top: 56px; + z-index: 180; } } @@ -268,8 +270,10 @@ const SectionHeaderContent = props => { ]; }, [settings, t, goToEmployeeCreate, goToGuestCreate, goToGroupCreate, onInvitationDialogClick/* , onSentInviteAgain */]); + const isArticlePinned = window.localStorage.getItem('asc_article_pinned_key'); + return ( - + {isHeaderVisible ? (
Date: Wed, 12 Feb 2020 16:18:23 +0300 Subject: [PATCH 2/3] Web: Common: Layout: Added use of icons from module --- .../ASC.People/Client/public/images/icon.svg | 3 ++ .../Client}/public/images/people.svg | 0 .../public/images/documentsIcon.svg | 3 ++ web/ASC.Web.Common/src/api/modules/index.js | 35 ++++++++++++------- .../src/components/Layout/index.js | 1 + .../Layout/sub-components/header-nav.js | 2 +- .../Layout/sub-components/nav-item.js | 11 +++++- .../components/StudioLayout/StudioLayout.js | 1 + 8 files changed, 41 insertions(+), 15 deletions(-) create mode 100644 products/ASC.People/Client/public/images/icon.svg rename {web/ASC.Web.Client => products/ASC.People/Client}/public/images/people.svg (100%) create mode 100644 web/ASC.Web.Client/public/images/documentsIcon.svg diff --git a/products/ASC.People/Client/public/images/icon.svg b/products/ASC.People/Client/public/images/icon.svg new file mode 100644 index 0000000000..ded968b9ef --- /dev/null +++ b/products/ASC.People/Client/public/images/icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/ASC.Web.Client/public/images/people.svg b/products/ASC.People/Client/public/images/people.svg similarity index 100% rename from web/ASC.Web.Client/public/images/people.svg rename to products/ASC.People/Client/public/images/people.svg diff --git a/web/ASC.Web.Client/public/images/documentsIcon.svg b/web/ASC.Web.Client/public/images/documentsIcon.svg new file mode 100644 index 0000000000..ec9769b531 --- /dev/null +++ b/web/ASC.Web.Client/public/images/documentsIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/ASC.Web.Common/src/api/modules/index.js b/web/ASC.Web.Common/src/api/modules/index.js index e639ce1ca7..f4b9ee29cb 100644 --- a/web/ASC.Web.Common/src/api/modules/index.js +++ b/web/ASC.Web.Common/src/api/modules/index.js @@ -16,19 +16,28 @@ export function getModulesList() { }) ) ) - .then((modules) => { - const newModules = modules.map(m => { return { ...m, isPrimary: true }; }).concat({ - id: "77777777-7777-7777-7777-777777777777", - title: "Documents", - link: "/coming-soon", - imageUrl: "images/documents.svg", - description: "Create, edit and share documents. Collaborate on them in real-time. 100% compatibility with MS Office formats guaranteed.", - isPrimary: true, - iconName: "DocumentsIcon" - }); - - return newModules; - }) + .then((modules) => { + const newModules = modules.map(m => { + return { + ...m, + isPrimary: true, + iconUrl: m.link + "images/icon.svg", + imageUrl: m.link + m.imageUrl, + }; + }) + .concat({ + id: "77777777-7777-7777-7777-777777777777", + title: "Documents", + link: "/coming-soon/", + imageUrl: "/images/documents.svg", + iconUrl: "/images/documentsIcon.svg", + description: "Create, edit and share documents. Collaborate on them in real-time. 100% compatibility with MS Office formats guaranteed.", + isPrimary: true, + iconName: "DocumentsIcon" + }); + + return newModules; + }) ); }); } diff --git a/web/ASC.Web.Common/src/components/Layout/index.js b/web/ASC.Web.Common/src/components/Layout/index.js index 7cf8bec0cd..82d0a1a784 100644 --- a/web/ASC.Web.Common/src/components/Layout/index.js +++ b/web/ASC.Web.Common/src/components/Layout/index.js @@ -199,6 +199,7 @@ class Layout extends React.Component { opened={this.state.isNavOpened} active={item.id == this.state.currentModuleId} iconName={item.iconName} + iconUrl={item.iconUrl} badgeNumber={item.notifications} onClick={item.onClick} onBadgeClick={e => { diff --git a/web/ASC.Web.Common/src/components/Layout/sub-components/header-nav.js b/web/ASC.Web.Common/src/components/Layout/sub-components/header-nav.js index 5dedbf506f..9323cc2668 100644 --- a/web/ASC.Web.Common/src/components/Layout/sub-components/header-nav.js +++ b/web/ASC.Web.Common/src/components/Layout/sub-components/header-nav.js @@ -34,7 +34,6 @@ const StyledNav = styled.nav` padding: 0 16px; } `; - const HeaderNav = React.memo(props => { //console.log("HeaderNav render"); return ( @@ -43,6 +42,7 @@ const HeaderNav = React.memo(props => { (props.opened ? "" : badgeCss)} `; +const NavCustomIcon = styled.img` + width: 24px; + height: 24px; +`; + const NavItem = React.memo(props => { //console.log("NavItem render"); const { @@ -53,6 +58,7 @@ const NavItem = React.memo(props => { opened, active, iconName, + iconUrl, children, badgeNumber, onClick, @@ -69,7 +75,9 @@ const NavItem = React.memo(props => { noHover={noHover} href={url} onClick={onClick}> - {React.createElement(Icons[iconName], { + {iconUrl + ? () + : React.createElement(Icons[iconName], { size: "big", isfill: true, color: color @@ -96,6 +104,7 @@ NavItem.propTypes = { children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]), url: PropTypes.string, iconName: PropTypes.string, + iconUrl: PropTypes.string, onBadgeClick: PropTypes.func, onClick: PropTypes.func, opened: PropTypes.bool, diff --git a/web/ASC.Web.Common/src/components/StudioLayout/StudioLayout.js b/web/ASC.Web.Common/src/components/StudioLayout/StudioLayout.js index 91d7d8c1c4..fc6ef672f7 100644 --- a/web/ASC.Web.Common/src/components/StudioLayout/StudioLayout.js +++ b/web/ASC.Web.Common/src/components/StudioLayout/StudioLayout.js @@ -20,6 +20,7 @@ const toModuleWrapper = (item, iconName) => { id: item.id, title: item.title, iconName: item.iconName || iconName || "PeopleIcon", //TODO: Change to URL + iconUrl: item.iconUrl, notifications: 0, url: item.link, onClick: (e) => { From cc4eb46c01f22ed35873513b19011da22c7be076 Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Wed, 12 Feb 2020 16:18:41 +0300 Subject: [PATCH 3/3] web: common: bump version --- web/ASC.Web.Common/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Common/package.json b/web/ASC.Web.Common/package.json index 845a37afc5..1cdece64ff 100644 --- a/web/ASC.Web.Common/package.json +++ b/web/ASC.Web.Common/package.json @@ -1,6 +1,6 @@ { "name": "asc-web-common", - "version": "1.0.73", + "version": "1.0.74", "description": "Ascensio System SIA common components and solutions library", "license": "AGPL-3.0", "files": [