From 1e2ee349768dfa2ce96fb17bf0f36fdc77ae2089 Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Fri, 6 May 2022 10:40:37 +0300 Subject: [PATCH 01/11] Web:Common:Navigation: hide add button for tablet devices when dropbox is open --- .../Navigation/sub-components/control-btn.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/asc-web-common/components/Navigation/sub-components/control-btn.js b/packages/asc-web-common/components/Navigation/sub-components/control-btn.js index 64260cca03..532fabf8c9 100644 --- a/packages/asc-web-common/components/Navigation/sub-components/control-btn.js +++ b/packages/asc-web-common/components/Navigation/sub-components/control-btn.js @@ -16,17 +16,13 @@ const StyledContainer = styled.div` margin-right: 16px; min-width: 15px; - ${(props) => - !props.isDropBox && - css` - @media ${tablet} { - display: none; - } - `} + @media ${tablet} { + display: none; + } ${isMobile && css` - ${(props) => !props.isDropBox && "display: none"}; + display: none; `} } From 60cfefce5636958dc26b5cbdd543d97d9e4f34d3 Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Fri, 6 May 2022 12:25:19 +0300 Subject: [PATCH 02/11] Web:Common:Navigation: fix header truncate --- .../Navigation/sub-components/control-btn.js | 2 ++ .../Navigation/sub-components/drop-box.js | 3 +- .../Navigation/sub-components/text.js | 31 +++++++++++-------- 3 files changed, 22 insertions(+), 14 deletions(-) diff --git a/packages/asc-web-common/components/Navigation/sub-components/control-btn.js b/packages/asc-web-common/components/Navigation/sub-components/control-btn.js index 532fabf8c9..9d33ef1b75 100644 --- a/packages/asc-web-common/components/Navigation/sub-components/control-btn.js +++ b/packages/asc-web-common/components/Navigation/sub-components/control-btn.js @@ -12,6 +12,8 @@ const StyledContainer = styled.div` display: flex; align-items: center; + height: 32px; + .add-button { margin-right: 16px; min-width: 15px; diff --git a/packages/asc-web-common/components/Navigation/sub-components/drop-box.js b/packages/asc-web-common/components/Navigation/sub-components/drop-box.js index 1a9b2511f3..4e5fca72ff 100644 --- a/packages/asc-web-common/components/Navigation/sub-components/drop-box.js +++ b/packages/asc-web-common/components/Navigation/sub-components/drop-box.js @@ -98,7 +98,8 @@ const DropBox = React.forwardRef( const [dropBoxHeight, setDropBoxHeight] = React.useState(0); const countItems = navigationItems.length; - const isDesktop = !isMobile || isDesktopUtils(); + const isDesktop = + (!isMobile && !isTabletUtils() && !isMobileUtils()) || isDesktopUtils(); const getItemSize = (index) => { if (index === countItems - 1) return 51; diff --git a/packages/asc-web-common/components/Navigation/sub-components/text.js b/packages/asc-web-common/components/Navigation/sub-components/text.js index b75012c612..d48137b4c3 100644 --- a/packages/asc-web-common/components/Navigation/sub-components/text.js +++ b/packages/asc-web-common/components/Navigation/sub-components/text.js @@ -4,32 +4,37 @@ import PropTypes from "prop-types"; import ExpanderDownIcon from "@appserver/components/public/static/images/expander-down.react.svg"; import commonIconsStyles from "@appserver/components/utils/common-icons-style"; - -import Headline from "@appserver/common/components/Headline"; +import Heading from "@appserver/components/heading"; import { tablet } from "@appserver/components/utils/device"; import { isMobile } from "react-device-detect"; import { Base } from "@appserver/components/themes"; const StyledTextContainer = styled.div` - width: fit-content; - - position: relative; - display: grid; - - grid-template-columns: ${(props) => - props.isRootFolder ? "auto" : "auto 12px"}; + display: flex; align-items: center; + flex-direction: row; + + position: relative; + + overflow: hidden; + ${(props) => !props.isRootFolder && "cursor: pointer"}; + + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; `; -const StyledHeadline = styled(Headline)` - width: 100%; +const StyledHeading = styled(Heading)` font-weight: 700; font-size: ${isMobile ? "21px !important" : "18px"}; line-height: ${isMobile ? "28px !important" : "24px"}; + + margin: 0; + @media ${tablet} { font-size: 21px; line-height: 28px; @@ -73,9 +78,9 @@ const Text = ({ title, isRootFolder, isOpen, onClick, ...rest }) => { onClick={onClick} {...rest} > - + {title} - + {!isRootFolder ? ( isOpen ? ( From 9f74bf994b31cd09a4d4508ee33e2e14560d56a5 Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Fri, 6 May 2022 15:11:04 +0300 Subject: [PATCH 03/11] Web:Common:Navigation: move out toggle info panel button from control-btn to separate file --- .../Navigation/sub-components/control-btn.js | 79 +++++--------- .../sub-components/toggle-infopanel-btn.js | 102 ++++++++++++++++++ 2 files changed, 127 insertions(+), 54 deletions(-) create mode 100644 packages/asc-web-common/components/Navigation/sub-components/toggle-infopanel-btn.js diff --git a/packages/asc-web-common/components/Navigation/sub-components/control-btn.js b/packages/asc-web-common/components/Navigation/sub-components/control-btn.js index 9d33ef1b75..664bb5babd 100644 --- a/packages/asc-web-common/components/Navigation/sub-components/control-btn.js +++ b/packages/asc-web-common/components/Navigation/sub-components/control-btn.js @@ -6,6 +6,7 @@ import IconButton from "@appserver/components/icon-button"; import { isMobile } from "react-device-detect"; import { tablet } from "@appserver/components/utils/device"; import { Base } from "@appserver/components/themes"; +import ToggleInfoPanelButton from "./toggle-infopanel-btn"; const StyledContainer = styled.div` margin-left: 20px; @@ -125,20 +126,11 @@ const ControlButtons = ({ /> )} {!isDesktop && ( - -
- -
- + toggleInfoPanelAction={toggleInfoPanelAction} + /> )} ) : canCreate ? ( @@ -155,20 +147,13 @@ const ControlButtons = ({ isDisabled={false} /> )} - -
- -
- + {!isDesktop && ( + + )} ) : isRecycleBinFolder && !isEmptyFilesList ? ( <> @@ -179,37 +164,23 @@ const ControlButtons = ({ onClick={clearTrash} className="trash-button" /> - -
- -
- + {!isDesktop && ( + + )} ) : ( <> - -
- -
- + {!isDesktop && ( + + )} )} diff --git a/packages/asc-web-common/components/Navigation/sub-components/toggle-infopanel-btn.js b/packages/asc-web-common/components/Navigation/sub-components/toggle-infopanel-btn.js new file mode 100644 index 0000000000..c60020c543 --- /dev/null +++ b/packages/asc-web-common/components/Navigation/sub-components/toggle-infopanel-btn.js @@ -0,0 +1,102 @@ +import React from "react"; +import styled, { css } from "styled-components"; +import ContextMenuButton from "@appserver/components/context-menu-button"; +import IconButton from "@appserver/components/icon-button"; +import { isMobile } from "react-device-detect"; +import { tablet } from "@appserver/components/utils/device"; +import { Base } from "@appserver/components/themes"; + +const StyledContainer = styled.div` + margin-left: 20px; + display: flex; + align-items: center; + + height: 32px; + + .add-button { + margin-right: 16px; + min-width: 15px; + + @media ${tablet} { + display: none; + } + + ${isMobile && + css` + display: none; + `} + } + + .option-button { + margin-right: 16px; + min-width: 15px; + } + + .trash-button { + margin-right: 16px; + min-width: 15px; + } +`; + +const StyledInfoPanelToggleWrapper = styled.div` + display: flex; + align-items: center; + align-self: center; + justify-content: center; + margin-left: auto; + + @media ${tablet} { + margin-left: ${(props) => (props.isRootFolder ? "auto" : "0")}; + } + + ${isMobile && + css` + margin-left: ${(props) => (props.isRootFolder ? "auto" : "0")}; + `} + + .info-panel-toggle-bg { + height: 32px; + width: 32px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background-color: ${(props) => + props.isInfoPanelVisible + ? props.theme.infoPanel.sectionHeaderToggleBgActive + : props.theme.infoPanel.sectionHeaderToggleBg}; + + path { + fill: ${(props) => + props.isInfoPanelVisible + ? props.theme.infoPanel.sectionHeaderToggleIconActive + : props.theme.infoPanel.sectionHeaderToggleIcon}; + } + } +`; +StyledInfoPanelToggleWrapper.defaultProps = { theme: Base }; + +const ToggleInfoPanelButton = ({ + isRootFolder, + isInfoPanelVisible, + toggleInfoPanelAction, +}) => { + return ( + +
+ +
+ + ); +}; + +export default ToggleInfoPanelButton; From fd35268d2051a5ef995eaf29c8a9795df3b04eaa Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Fri, 6 May 2022 16:26:33 +0300 Subject: [PATCH 04/11] Web:Common:Section: change display type for section header container to flex --- .../components/Section/sub-components/section-header.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/asc-web-common/components/Section/sub-components/section-header.js b/packages/asc-web-common/components/Section/sub-components/section-header.js index 87ef6fe858..9b76e6d918 100644 --- a/packages/asc-web-common/components/Section/sub-components/section-header.js +++ b/packages/asc-web-common/components/Section/sub-components/section-header.js @@ -24,6 +24,10 @@ const StyledSectionHeader = styled.div` width: 100%; max-width: 100%; + .header-container { + display: flex; + } + @media ${tablet} { padding-right: 16px; margin-right: 0px; From f89e7e82b0e2567ebc5988580bb43cbad7b720b0 Mon Sep 17 00:00:00 2001 From: Dmitry Sychugov Date: Fri, 6 May 2022 19:39:10 +0500 Subject: [PATCH 05/11] Web: Components: added prop for empty screen, fixed margin --- .../empty-screen-container/index.js | 11 ++++++++++- .../styled-empty-screen-container.js | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/asc-web-components/empty-screen-container/index.js b/packages/asc-web-components/empty-screen-container/index.js index e80d142246..473d070960 100644 --- a/packages/asc-web-components/empty-screen-container/index.js +++ b/packages/asc-web-components/empty-screen-container/index.js @@ -7,6 +7,8 @@ import { EmptyContentImage, } from "./styled-empty-screen-container"; +import { isMobile } from "react-device-detect"; + const EmptyScreenContainer = (props) => { const { imageSrc, @@ -15,12 +17,15 @@ const EmptyScreenContainer = (props) => { subheadingText, descriptionText, buttons, + imageStyle, + buttonStyle, } = props; return ( @@ -54,7 +59,11 @@ const EmptyScreenContainer = (props) => { )} - {buttons &&
{buttons}
} + {buttons && ( +
+ {buttons} +
+ )} ); }; diff --git a/packages/asc-web-components/empty-screen-container/styled-empty-screen-container.js b/packages/asc-web-components/empty-screen-container/styled-empty-screen-container.js index 31b029c052..57b1844fde 100644 --- a/packages/asc-web-components/empty-screen-container/styled-empty-screen-container.js +++ b/packages/asc-web-components/empty-screen-container/styled-empty-screen-container.js @@ -24,7 +24,7 @@ const EmptyContentBody = styled.div` grid-template-rows: max-content; .ec-image { grid-area: img; - margin: 0 0 0 auto; + margin: 16px 0 0 auto; ${NoUserSelect} } From 939b256897514935b3e31950815598f9a5ca5ad6 Mon Sep 17 00:00:00 2001 From: Dmitry Sychugov Date: Fri, 6 May 2022 19:41:38 +0500 Subject: [PATCH 06/11] Web: Files: fixed and redesign empty container --- .../EmptyContainer/EmptyContainer.js | 6 ++++++ .../EmptyContainer/EmptyFolderContainer.js | 6 ++++-- .../EmptyContainer/RootFolderContainer.js | 21 ++++++++++++++----- .../Settings/Section/Body/ConnectedClouds.js | 12 ++++++----- 4 files changed, 33 insertions(+), 12 deletions(-) diff --git a/products/ASC.Files/Client/src/components/EmptyContainer/EmptyContainer.js b/products/ASC.Files/Client/src/components/EmptyContainer/EmptyContainer.js index 842e3c5386..02d7809cfd 100644 --- a/products/ASC.Files/Client/src/components/EmptyContainer/EmptyContainer.js +++ b/products/ASC.Files/Client/src/components/EmptyContainer/EmptyContainer.js @@ -55,14 +55,20 @@ const EmptyFoldersContainer = (props) => { subheadingText, descriptionText, buttons, + style, + imageStyle, + buttonStyle, } = props; return ( ); diff --git a/products/ASC.Files/Client/src/components/EmptyContainer/RootFolderContainer.js b/products/ASC.Files/Client/src/components/EmptyContainer/RootFolderContainer.js index 3f55f0ad2d..7fead20eba 100644 --- a/products/ASC.Files/Client/src/components/EmptyContainer/RootFolderContainer.js +++ b/products/ASC.Files/Client/src/components/EmptyContainer/RootFolderContainer.js @@ -12,6 +12,7 @@ const RootFolderContainer = (props) => { t, theme, isPrivacyFolder, + isRecycleBinFolder, isDesktop, isEncryptionSupport, organizationName, @@ -29,7 +30,8 @@ const RootFolderContainer = (props) => { const myDescription = t("MyEmptyContainerDescription"); const shareDescription = t("SharedEmptyContainerDescription"); const commonDescription = t("CommonEmptyContainerDescription"); - const trashDescription = t("TrashEmptyContainerDescription"); + const trashHeader = t("EmptyScreenFolder"); + const trashDescription = t("TrashEmptyDescription"); const favoritesDescription = t("FavoritesEmptyContainerDescription"); const recentDescription = t("RecentEmptyContainerDescription"); @@ -70,6 +72,7 @@ const RootFolderContainer = (props) => { case FolderType.Favorites: return { descriptionText: favoritesDescription, + imageStyle: { margin: "0px 0 0 auto" }, imageSrc: "images/empty_screen_favorites.png", }; case FolderType.Recent: @@ -85,10 +88,12 @@ const RootFolderContainer = (props) => { }; case FolderType.TRASH: return { + headerText: trashHeader, descriptionText: trashDescription, + style: { gridColumnGap: "39px", gridTemplateColumns: "150px" }, imageSrc: theme.isBase - ? "images/empty_screen_trash.png" - : "images/empty_screen_trash_dark.png", + ? "images/empty_screen_trash_alt.png" + : "images/empty_screen_trash_alt.png", buttons: trashButtons, }; default: @@ -186,7 +191,8 @@ const RootFolderContainer = (props) => { ); const headerText = isPrivacyFolder ? privateRoomHeader : title; - const subheadingTextProp = isPrivacyFolder ? {} : { subheadingText }; + const subheadingTextProp = + isPrivacyFolder || isRecycleBinFolder ? {} : { subheadingText }; const emptyFolderProps = getEmptyFolderProps(); return ( @@ -214,11 +220,16 @@ export default inject( setIsLoading, } = filesStore; const { title, rootFolderType } = selectedFolderStore; - const { isPrivacyFolder, myFolderId } = treeFoldersStore; + const { + isPrivacyFolder, + myFolderId, + isRecycleBinFolder, + } = treeFoldersStore; return { theme, isPrivacyFolder, + isRecycleBinFolder, isDesktop: isDesktopClient, isEncryptionSupport, organizationName, diff --git a/products/ASC.Files/Client/src/pages/Settings/Section/Body/ConnectedClouds.js b/products/ASC.Files/Client/src/pages/Settings/Section/Body/ConnectedClouds.js index 152dc50efd..2c9f3224e5 100644 --- a/products/ASC.Files/Client/src/pages/Settings/Section/Body/ConnectedClouds.js +++ b/products/ASC.Files/Client/src/pages/Settings/Section/Body/ConnectedClouds.js @@ -264,9 +264,11 @@ class ConnectClouds extends React.Component { ) : ( - {t("Translations:AddAccount")} + {t("Common:Connect")} @@ -326,7 +328,7 @@ export default inject( }; } )( - withTranslation(["Settings", "Translations"])( + withTranslation(["Settings", "Translations", "Common"])( observer(withRouter(ConnectClouds)) ) ); From 2d6960a5a2dddc5b185f017cdb2c871d976c18c6 Mon Sep 17 00:00:00 2001 From: Dmitry Sychugov Date: Fri, 6 May 2022 19:42:20 +0500 Subject: [PATCH 07/11] Web: Files: added empty container en translation --- products/ASC.Files/Client/public/locales/en/Home.json | 3 +++ products/ASC.Files/Client/public/locales/en/Settings.json | 2 ++ 2 files changed, 5 insertions(+) diff --git a/products/ASC.Files/Client/public/locales/en/Home.json b/products/ASC.Files/Client/public/locales/en/Home.json index 20be80968e..77e136bf29 100644 --- a/products/ASC.Files/Client/public/locales/en/Home.json +++ b/products/ASC.Files/Client/public/locales/en/Home.json @@ -17,6 +17,8 @@ "EmptyFilterDescriptionText": "No files or folders match this filter. Try a different one or clear filter to view all files. ", "EmptyFilterSubheadingText": "No files to be displayed for this filter here", "EmptyFolderHeader": "No files in this folder", + "EmptyScreenFolder": "No docs here yet", + "EmptyFolderDecription": "Drop files here or create new ones.", "EmptyRecycleBin": "Empty Trash", "FavoritesEmptyContainerDescription": "To mark files as favorites or remove them from this list, use the context menu.", "FileRemoved": "File moved to Trash", @@ -75,6 +77,7 @@ "TooltipElementsCopyMessage": "Copy {{element}} elements", "TooltipElementsMoveMessage": "Move {{element}} elements", "TrashEmptyContainerDescription": "Trash is where all the deleted files are moved. You can restore or delete them permanently by emptying Trash. ", + "TrashEmptyDescription": "All deleted files are moved to 'Trash'. Restore files deleted by mistake or delete them permanently. Please note, that the files deleted from the 'Trash' cannot be restored any longer.", "UnblockVersion": "Unblock/Check-in", "UploadToFolder": "Upload to folder", "ViewList": "List", diff --git a/products/ASC.Files/Client/public/locales/en/Settings.json b/products/ASC.Files/Client/public/locales/en/Settings.json index 67563af424..2ed3881c10 100644 --- a/products/ASC.Files/Client/public/locales/en/Settings.json +++ b/products/ASC.Files/Client/public/locales/en/Settings.json @@ -3,9 +3,11 @@ "Common": "Common", "CommonSettings": "Common settings", "ConnectAccounts": "Connect Accounts", + "ConnectEmpty": "There's nothing here", "ConnectAccountsSubTitle": "No connected accounts", "ConnectAdminDescription": "For successful connection, enter the necessary data on <1>this page.", "ConnectDescription": "You can connect the following accounts to the ONLYOFFICE Documents. The documents from these accounts will be available for editing in 'My Documents' section. ", + "ConnectDescriptionText": "You haven't connected any third-party clouds yet.", "ConnectedCloud": "Connected cloud", "ConnectMakeShared": "Make shared and put into the 'Common' folder", "ConnextOtherAccount": "Other account", From e9e2e4e27f5d28cc92027347d7c924f2407a8ee1 Mon Sep 17 00:00:00 2001 From: Dmitry Sychugov Date: Fri, 6 May 2022 19:42:49 +0500 Subject: [PATCH 08/11] Web: added new empty screen icons --- .../public/images/empty_screen_trash_alt.png | Bin 0 -> 2361 bytes public/images/empty_screen_alt.svg | 27 ++++++++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 products/ASC.Files/Client/public/images/empty_screen_trash_alt.png create mode 100644 public/images/empty_screen_alt.svg diff --git a/products/ASC.Files/Client/public/images/empty_screen_trash_alt.png b/products/ASC.Files/Client/public/images/empty_screen_trash_alt.png new file mode 100644 index 0000000000000000000000000000000000000000..10d91110af71b72277e03c0322030c964d4bc8df GIT binary patch literal 2361 zcmV-93C8w`P))!kPsZQoVbLK-cT;2hc?HCzW@S%Ksm#q?TH%#1=M5H z8x@4CRP|6U7^zCQHHbX`N$kF7&$GuHf6RKuYiHNL$QiHa!{gt)nfLt0_E=CN+U@pK zx7%HHUH3=)IR*N#al5^_x%n%U2n$NWxpU`c_xARF$K6@_jl^~=%j!TrOkw^O=ARY6 ze?elugOX4RsWPENCT^=+TU&pCCQhF|y^O&vA{V!NFJHdA2_>KuQs?LAf5u>$2z4Ci zVyDyD1w&}HTC>e&a|?H;kl2ez>;?=N4JZfK=pPdLtw}-&Se}iIb&vKjya6R(;G~{8 zbEXac7}y~Kpa5WFd5Q|p(S{N*a8mI?JuQ!2(}se;jU_3rfub~05k|Xxl~C50I@B10 z0i)4qkRl<8Em~4{2XKy944hOlanS4`?XPW@rs3e=;1rm-OY0jEJN4|@vn{Ml3u-6> zmErFA_;}~}^XGPOjQ)|CgI$FT@>!^n7mtzLn?$Z9ZW-Uu(XWnw0dpsgp^6sCaP0H< z-7u>w|8%9_?&0Hy_C=XekuG5Ks`^?g3c;bRF3F zFPyM^B5`x*sN-U21?2h~h7MceH-w=Z#?vv%=jRX8Q9b~v zdPhpEWAMf!u>OPO%sGnWI&!P2$hcU zg@@&dcvosT=#fQ1#e5rImx@fRM>2t&Oaan@Bma+sfASxx1$Yim&3Z}U6LUKY< z0ts~7un~fm42OwGkBX_MWkuC+czRh>nI8V{25F+MCT2ubwP1!TLT!Dtlq$#g`Svcx(d%5cIu$Rs+_ z@7`|i?Kk8`^2-f|3C;&$qeYuZl!t$z6nhBl)V1IK4axNihp2Q$h!4iuaEye=K3|v> z*>~j%iK_{^I!I-(Jl%?mPmZ^?{>S87n75dURbpugzIziR4S5v}dxENR@2@+RqT-<aRX{)H6hVnpb|UEBs+QF#y0@s(tLWxP1R7`b$Fe#}p;@_z%ic~Eebw!o+aj#w|k*fQhs-v!``h}`VWn@g% zg)S+Bn4cmjt@1-}|23P<+@vlnEO<8V<;#~L59a6RVR3O0mX?+v4=Dfj>(_JVSA8s< zp|l!htJRu9QoYXwy?F5gMhz<~EAZ;oD{}j_RhA-E>i(uzj67<{`nXpwl(j!=zEL!* zvOezBi@r^&QFN-PKA6T(CY9HT9<}dOlY$k3w5vJ{_S5}0D5NhsjuIX`c;JP2{f|}i zD3dBy&E2KXZr;CtA4UQExl#gN|C(yPrfR}>@7{f!nVI<$cbCb$AcZwIH)qVSuM()c zKYH{C?%cTppFe*lDZP!R)DzYGN_MIYT37+c*Po={o^hQuO+n;Wy#aV_gJ;j4$!63& z6r#SCw9mB^JuUZ+{(xIZ?lKH7Hn7XzRx$Q_k&9FY-DzR4fCRS`7So=Bk`{;U1GFme f2CXWYhfK!*YcP$^j?IXm00000NkvXXu0mjfre=JE literal 0 HcmV?d00001 diff --git a/public/images/empty_screen_alt.svg b/public/images/empty_screen_alt.svg new file mode 100644 index 0000000000..6dc654d6f5 --- /dev/null +++ b/public/images/empty_screen_alt.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + From e91bce51da166ded04c50283b32507737991a294 Mon Sep 17 00:00:00 2001 From: pavelbannov Date: Mon, 9 May 2022 18:57:07 +0300 Subject: [PATCH 09/11] Files: thumbnails. BitDepth changed to Bit8 --- .../ASC.Files/Service/Thumbnail/Builder.cs | 35 +++++++++++-------- .../Users/UserPhotoThumbnailManager.cs | 6 ++-- 2 files changed, 23 insertions(+), 18 deletions(-) diff --git a/products/ASC.Files/Service/Thumbnail/Builder.cs b/products/ASC.Files/Service/Thumbnail/Builder.cs index 32c72719b9..f4e056ffc2 100644 --- a/products/ASC.Files/Service/Thumbnail/Builder.cs +++ b/products/ASC.Files/Service/Thumbnail/Builder.cs @@ -20,7 +20,6 @@ using System.Collections.Generic; using System.IO; using System.Linq; using System.Net.Http; -using System.Threading; using System.Threading.Tasks; using ASC.Common; @@ -31,7 +30,6 @@ using ASC.Files.Core; using ASC.Web.Core.Files; using ASC.Web.Core.Users; using ASC.Web.Files.Classes; -using ASC.Web.Files.Core; using ASC.Web.Files.Services.DocumentService; using ASC.Web.Files.Utils; @@ -177,8 +175,8 @@ namespace ASC.Files.ThumbnailBuilder } if (IsImage(file)) - { - await CropImage(fileDao, file); + { + await CropImage(fileDao, file); } else { @@ -248,7 +246,7 @@ namespace ASC.Files.ThumbnailBuilder attempt++; } - Thread.Sleep(config.AttemptWaitInterval); + await Task.Delay(config.AttemptWaitInterval); } while (string.IsNullOrEmpty(thumbnailUrl)); @@ -306,7 +304,7 @@ namespace ASC.Files.ThumbnailBuilder var httpClient = ClientFactory.CreateClient(); using var response = httpClient.Send(request); - using (var stream = new ResponseStream(response)) + using (var stream = await response.Content.ReadAsStreamAsync()) { await Crop(fileDao, file, stream); } @@ -322,10 +320,10 @@ namespace ASC.Files.ThumbnailBuilder private async Task CropImage(IFileDao fileDao, File file) { - logger.DebugFormat("CropImage: FileId: {0}.", file.ID); - + logger.DebugFormat("CropImage: FileId: {0}.", file.ID); + using (var stream = await fileDao.GetFileStreamAsync(file)) - { + { await Crop(fileDao, file, stream); } @@ -334,13 +332,20 @@ namespace ASC.Files.ThumbnailBuilder private async Task Crop(IFileDao fileDao, File file, Stream stream) { - using (var sourceImg = Image.Load(stream)) + using (var sourceImg = await Image.LoadAsync(stream)) { using (var targetImg = GetImageThumbnail(sourceImg)) { using (var targetStream = new MemoryStream()) { - targetImg.Save(targetStream, PngFormat.Instance); + var pngEncoderOptions = new PngEncoder() + { + CompressionLevel = PngCompressionLevel.BestCompression, + BitDepth = PngBitDepth.Bit8, + ColorType = PngColorType.Palette + }; + + await targetImg.SaveAsPngAsync(targetStream, pngEncoderOptions); //targetImg.Save(targetStream, JpegFormat.Instance); await fileDao.SaveThumbnailAsync(file, targetStream); } @@ -350,13 +355,13 @@ namespace ASC.Files.ThumbnailBuilder } private Image GetImageThumbnail(Image sourceBitmap) - { - //bad for small or disproportionate images + { + //bad for small or disproportionate images //return sourceBitmap.GetThumbnailImage(config.ThumbnaillWidth, config.ThumbnaillHeight, () => false, IntPtr.Zero); var targetSize = new Size(Math.Min(sourceBitmap.Width, config.ThumbnaillWidth), Math.Min(sourceBitmap.Height, config.ThumbnaillHeight)); var point = new Point(0, 0); - var size = targetSize; + var size = targetSize; if (sourceBitmap.Width > config.ThumbnaillWidth && sourceBitmap.Height > config.ThumbnaillHeight) { @@ -375,7 +380,7 @@ namespace ASC.Files.ThumbnailBuilder if (sourceBitmap.Width > sourceBitmap.Height) { point.X = (sourceBitmap.Width - size.Width) / 2; - } + } var targetThumbnailSettings = new UserPhotoThumbnailSettings(point, size); diff --git a/web/ASC.Web.Core/Users/UserPhotoThumbnailManager.cs b/web/ASC.Web.Core/Users/UserPhotoThumbnailManager.cs index d52ae1b396..24a283e153 100644 --- a/web/ASC.Web.Core/Users/UserPhotoThumbnailManager.cs +++ b/web/ASC.Web.Core/Users/UserPhotoThumbnailManager.cs @@ -85,12 +85,12 @@ namespace ASC.Web.Core.Users width, height); - var destRound = mainImg.Clone(x => x.Crop(rect).Resize(new ResizeOptions + mainImg.Mutate(x => x.Crop(rect).Resize(new ResizeOptions { Size = size })); - - return destRound; + + return mainImg; } } From 1d65ca76450b9f4b9cead54cd135c03f76b3011a Mon Sep 17 00:00:00 2001 From: pavelbannov Date: Mon, 9 May 2022 21:15:27 +0300 Subject: [PATCH 10/11] Files: thumbnails extension changed to jpg --- products/ASC.Files/Core/Helpers/Global.cs | 2 +- products/ASC.Files/Service/Thumbnail/Builder.cs | 10 +--------- web/ASC.Web.Core/Users/UserPhotoThumbnailManager.cs | 4 ++-- 3 files changed, 4 insertions(+), 12 deletions(-) diff --git a/products/ASC.Files/Core/Helpers/Global.cs b/products/ASC.Files/Core/Helpers/Global.cs index 66bae6a8d9..022e435359 100644 --- a/products/ASC.Files/Core/Helpers/Global.cs +++ b/products/ASC.Files/Core/Helpers/Global.cs @@ -131,7 +131,7 @@ namespace ASC.Web.Files.Classes CustomNamingPeople = customNamingPeople; FileSecurityCommon = fileSecurityCommon; - ThumbnailExtension = configuration["files:thumbnail:exts"] ?? "png"; + ThumbnailExtension = configuration["files:thumbnail:exts"] ?? "jpg"; } #region Property diff --git a/products/ASC.Files/Service/Thumbnail/Builder.cs b/products/ASC.Files/Service/Thumbnail/Builder.cs index f4e056ffc2..5aac70adbf 100644 --- a/products/ASC.Files/Service/Thumbnail/Builder.cs +++ b/products/ASC.Files/Service/Thumbnail/Builder.cs @@ -37,7 +37,6 @@ using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.Options; using SixLabors.ImageSharp; -using SixLabors.ImageSharp.Formats.Png; namespace ASC.Files.ThumbnailBuilder { @@ -338,14 +337,7 @@ namespace ASC.Files.ThumbnailBuilder { using (var targetStream = new MemoryStream()) { - var pngEncoderOptions = new PngEncoder() - { - CompressionLevel = PngCompressionLevel.BestCompression, - BitDepth = PngBitDepth.Bit8, - ColorType = PngColorType.Palette - }; - - await targetImg.SaveAsPngAsync(targetStream, pngEncoderOptions); + await targetImg.SaveAsJpegAsync(targetStream); //targetImg.Save(targetStream, JpegFormat.Instance); await fileDao.SaveThumbnailAsync(file, targetStream); } diff --git a/web/ASC.Web.Core/Users/UserPhotoThumbnailManager.cs b/web/ASC.Web.Core/Users/UserPhotoThumbnailManager.cs index 24a283e153..1ac166a7ba 100644 --- a/web/ASC.Web.Core/Users/UserPhotoThumbnailManager.cs +++ b/web/ASC.Web.Core/Users/UserPhotoThumbnailManager.cs @@ -85,9 +85,9 @@ namespace ASC.Web.Core.Users width, height); - mainImg.Mutate(x => x.Crop(rect).Resize(new ResizeOptions + mainImg.Mutate(x => x.BackgroundColor(Color.White).Crop(rect).Resize(new ResizeOptions { - Size = size + Size = size })); return mainImg; From 71a3e5885bcfebe3a7774e24c647ce48d819da3a Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Wed, 11 May 2022 10:58:24 +0300 Subject: [PATCH 11/11] Web:Common:Navigation: fix displaying for desktop devices, add max-width for header container and moved out from drop-box toggle info-panel button --- .../components/Navigation/Navigation.js | 30 +++++++++++++++---- .../components/Navigation/StyledNavigation.js | 19 ++++++++++-- .../Navigation/sub-components/control-btn.js | 2 +- .../Navigation/sub-components/drop-box.js | 8 ++--- .../Navigation/sub-components/text.js | 2 +- .../sub-components/toggle-infopanel-btn.js | 4 +-- 6 files changed, 47 insertions(+), 18 deletions(-) diff --git a/packages/asc-web-common/components/Navigation/Navigation.js b/packages/asc-web-common/components/Navigation/Navigation.js index e0455801cb..7797ad7825 100644 --- a/packages/asc-web-common/components/Navigation/Navigation.js +++ b/packages/asc-web-common/components/Navigation/Navigation.js @@ -1,28 +1,31 @@ import React from "react"; import PropTypes from "prop-types"; -import Loaders from "@appserver/common/components/Loaders"; - import StyledContainer from "./StyledNavigation"; import ArrowButton from "./sub-components/arrow-btn"; import Text from "./sub-components/text"; import ControlButtons from "./sub-components/control-btn"; import DropBox from "./sub-components/drop-box"; -import { isMobileOnly } from "react-device-detect"; - import { Consumer } from "@appserver/components/utils/context"; import DomHelpers from "@appserver/components/utils/domHelpers"; import Backdrop from "@appserver/components/backdrop"; +import { isMobile, isMobileOnly } from "react-device-detect"; +import { + isMobile as isMobileUtils, + isTablet as isTabletUtils, + isDesktop as isDesktopUtils, +} from "@appserver/components/utils/device"; +import ToggleInfoPanelButton from "./sub-components/toggle-infopanel-btn"; + const Navigation = ({ tReady, showText, isRootFolder, title, canCreate, - isDesktop, isTabletView, personal, onClickFolder, @@ -47,6 +50,12 @@ const Navigation = ({ const dropBoxRef = React.useRef(null); const containerRef = React.useRef(null); + const isDesktop = + (!isMobile && !isTabletUtils() && !isMobileUtils()) || + (isDesktopUtils() && !isMobile); + + console.log(isDesktop); + const onMissClick = (e) => { e.preventDefault; const path = e.path || (e.composedPath && e.composedPath()); @@ -120,6 +129,7 @@ const Navigation = ({ )} + {isDesktop && ( + + )} )} diff --git a/packages/asc-web-common/components/Navigation/StyledNavigation.js b/packages/asc-web-common/components/Navigation/StyledNavigation.js index 3c9ac311b4..96b5850f83 100644 --- a/packages/asc-web-common/components/Navigation/StyledNavigation.js +++ b/packages/asc-web-common/components/Navigation/StyledNavigation.js @@ -1,9 +1,16 @@ import styled, { css } from "styled-components"; import { isMobileOnly } from "react-device-detect"; -import { tablet, mobile } from "@appserver/components/utils/device"; +import { tablet, mobile, isMobile } from "@appserver/components/utils/device"; const StyledContainer = styled.div` - width: 100% !important; + ${(props) => + !props.isDropBox && + props.isDesktop && + css` + width: fit-content; + max-width: calc(100% - 72px); + `} + display: grid; align-items: center; grid-template-columns: ${(props) => @@ -29,6 +36,14 @@ const StyledContainer = styled.div` padding: ${(props) => (props.isDropBox ? "14px 0 5px" : "14px 0 15px")}; } + ${isMobile && + css` + width: 100%; + grid-template-columns: ${(props) => + props.isRootFolder ? "auto 1fr" : "29px 1fr auto"}; + padding: ${(props) => (props.isDropBox ? "14px 0 5px" : "14px 0 15px")}; + `} + @media ${mobile} { padding: ${(props) => props.isDropBox ? "10px 0 5px" : "10px 0 11px"} !important; diff --git a/packages/asc-web-common/components/Navigation/sub-components/control-btn.js b/packages/asc-web-common/components/Navigation/sub-components/control-btn.js index 664bb5babd..50532565a3 100644 --- a/packages/asc-web-common/components/Navigation/sub-components/control-btn.js +++ b/packages/asc-web-common/components/Navigation/sub-components/control-btn.js @@ -151,7 +151,7 @@ const ControlButtons = ({ )} diff --git a/packages/asc-web-common/components/Navigation/sub-components/drop-box.js b/packages/asc-web-common/components/Navigation/sub-components/drop-box.js index 4e5fca72ff..6d6daf81a7 100644 --- a/packages/asc-web-common/components/Navigation/sub-components/drop-box.js +++ b/packages/asc-web-common/components/Navigation/sub-components/drop-box.js @@ -14,10 +14,8 @@ import StyledContainer from "../StyledNavigation"; import { isMobile, isMobileOnly } from "react-device-detect"; import { tablet, - mobile, isMobile as isMobileUtils, isTablet as isTabletUtils, - isDesktop as isDesktopUtils, } from "@appserver/components/utils/device"; import { Base } from "@appserver/components/themes"; @@ -29,7 +27,7 @@ const StyledBox = styled.div` padding: ${isMobile ? "0 16px " : "0 20px"}; - ${(props) => !props.isDesktop && `width: ${props.dropBoxWidth}px;`}; + ${(props) => `width: ${props.dropBoxWidth}px;`}; height: ${(props) => (props.height ? `${props.height}px` : "fit-content")}; max-height: calc(100vh - 48px); @@ -92,15 +90,13 @@ const DropBox = React.forwardRef( isInfoPanelVisible, maxHeight, isOpen, + isDesktop, }, ref ) => { const [dropBoxHeight, setDropBoxHeight] = React.useState(0); const countItems = navigationItems.length; - const isDesktop = - (!isMobile && !isTabletUtils() && !isMobileUtils()) || isDesktopUtils(); - const getItemSize = (index) => { if (index === countItems - 1) return 51; return isMobile || isMobileUtils() || isTabletUtils() ? 36 : 30; diff --git a/packages/asc-web-common/components/Navigation/sub-components/text.js b/packages/asc-web-common/components/Navigation/sub-components/text.js index d48137b4c3..de0aaeb32a 100644 --- a/packages/asc-web-common/components/Navigation/sub-components/text.js +++ b/packages/asc-web-common/components/Navigation/sub-components/text.js @@ -59,7 +59,7 @@ const StyledExpanderDownIconRotate = styled(ExpanderDownIcon)` min-width: 8px !important; width: 8px !important; min-height: 18px !important; - padding: 0 4px 0 1px; + padding: 0 4px 0 2px; transform: rotate(-180deg); path { diff --git a/packages/asc-web-common/components/Navigation/sub-components/toggle-infopanel-btn.js b/packages/asc-web-common/components/Navigation/sub-components/toggle-infopanel-btn.js index c60020c543..748b9b5b3c 100644 --- a/packages/asc-web-common/components/Navigation/sub-components/toggle-infopanel-btn.js +++ b/packages/asc-web-common/components/Navigation/sub-components/toggle-infopanel-btn.js @@ -79,7 +79,7 @@ StyledInfoPanelToggleWrapper.defaultProps = { theme: Base }; const ToggleInfoPanelButton = ({ isRootFolder, isInfoPanelVisible, - toggleInfoPanelAction, + toggleInfoPanel, }) => { return (