diff --git a/packages/asc-web-common/components/FilterInput/FilterInput.js b/packages/asc-web-common/components/FilterInput/FilterInput.js index 009758c82b8..4f990e57143 100644 --- a/packages/asc-web-common/components/FilterInput/FilterInput.js +++ b/packages/asc-web-common/components/FilterInput/FilterInput.js @@ -8,7 +8,7 @@ import ViewSelector from "@appserver/components/view-selector"; import map from "lodash/map"; import clone from "lodash/clone"; import StyledFilterInput from "./StyledFilterInput"; -import { isMobileOnly } from "react-device-detect"; +import { isMobileOnly, isMobile } from "react-device-detect"; const cloneObjectsArray = function (props) { return map(props, clone); @@ -206,13 +206,15 @@ class FilterInput extends React.Component { size, placeholder, sectionWidth, + sortItemsVisible, } = this.props; if ( !equal(selectedFilterData, nextProps.selectedFilterData) || this.props.viewAs !== nextProps.viewAs || this.props.widthProp !== nextProps.widthProp || - sectionWidth !== nextProps.sectionWidth + sectionWidth !== nextProps.sectionWidth || + sortItemsVisible !== nextProps.sortItemsVisible ) { return true; } @@ -825,10 +827,9 @@ class FilterInput extends React.Component { filterColumnCount, viewAs, contextMenuHeader, - isMobile, sectionWidth, - getViewSettingsData, viewSelectorVisible, + sortItemsVisible, } = this.props; /* eslint-enable react/prop-types */ @@ -850,6 +851,7 @@ class FilterInput extends React.Component { : false; let iconSize = 30; + switch (size) { case "base": iconSize = 32; @@ -862,6 +864,7 @@ class FilterInput extends React.Component { default: break; } + return (
- {viewAs !== "table" && ( + {viewAs !== "table" && (sortItemsVisible || isMobileOnly) && ( )}
@@ -963,6 +967,7 @@ FilterInput.propTypes = { getSortData: PropTypes.func, value: PropTypes.string, getViewSettingsData: PropTypes.func, + sortItemsVisible: PropTypes.bool, }; FilterInput.defaultProps = { @@ -978,6 +983,7 @@ FilterInput.defaultProps = { directionAscLabel: "A-Z", directionDescLabel: "Z-A", viewSelectorVisible: true, + sortItemsVisible: true, }; export default FilterInput; diff --git a/packages/asc-web-common/components/FilterInput/sub-components/SortComboBox.js b/packages/asc-web-common/components/FilterInput/sub-components/SortComboBox.js index 0e54b9a9f53..ce2489f45b7 100644 --- a/packages/asc-web-common/components/FilterInput/sub-components/SortComboBox.js +++ b/packages/asc-web-common/components/FilterInput/sub-components/SortComboBox.js @@ -84,6 +84,7 @@ class SortComboBox extends React.Component { selectedOption, viewAs, viewSettings, + sortItemsVisible, } = this.props; const { sortDirection, opened } = this.state; @@ -97,36 +98,46 @@ class SortComboBox extends React.Component { { value: "1", label: directionDescLabel }, ]; + const viewIcon = viewSettings?.find((item) => item.value === viewAs); + + const selectorIcon = sortItemsVisible + ? "/static/images/z-a.sorting.react.svg" + : viewIcon.icon; + const advancedOptions = ( <> - - - - - - - - {viewSettings && viewSettings.length && viewAs && isMobileOnly && ( + {sortItemsVisible && ( <> + + + + + + + + )} + {viewSettings && viewSettings.length && viewAs && isMobileOnly && ( + <> + {sortItemsVisible && } (props.showIcon ? "pointer" : "default")}; + cursor: ${(props) => + props.showIcon && props.sortingVisible ? "pointer" : "default"}; .header-container-text-icon { height: 8px; diff --git a/packages/asc-web-components/table-container/TableHeader.js b/packages/asc-web-components/table-container/TableHeader.js index 41e2ff84488..8f265faa28a 100644 --- a/packages/asc-web-components/table-container/TableHeader.js +++ b/packages/asc-web-components/table-container/TableHeader.js @@ -441,6 +441,7 @@ class TableHeader extends React.Component { columnStorageName, hasAccess, isLengthenHeader, + sortingVisible, ...rest } = this.props; @@ -494,6 +495,7 @@ class TableHeader extends React.Component { resizable={resizable} defaultSize={column.defaultSize} onMouseDown={this.onMouseDown} + sortingVisible={sortingVisible} /> ); })} @@ -512,6 +514,7 @@ class TableHeader extends React.Component { TableHeader.defaultProps = { hasAccess: true, + sortingVisible: true, }; TableHeader.propTypes = { @@ -533,6 +536,7 @@ TableHeader.propTypes = { hasAccess: PropTypes.bool, resetColumnsSize: PropTypes.bool, isLengthenHeader: PropTypes.bool, + sortingVisible: PropTypes.bool, }; export default TableHeader; diff --git a/packages/asc-web-components/table-container/TableHeaderCell.js b/packages/asc-web-components/table-container/TableHeaderCell.js index 16d93d92754..f499f32b761 100644 --- a/packages/asc-web-components/table-container/TableHeaderCell.js +++ b/packages/asc-web-components/table-container/TableHeaderCell.js @@ -13,16 +13,19 @@ const TableHeaderCell = ({ sortBy, sorted, defaultSize, + sortingVisible, }) => { const { title, enable, active, minWidth } = column; const isActive = column.sortBy === sortBy || active; const onClick = (e) => { + if (!sortingVisible) return; column.onClick && column.onClick(column.sortBy, e); }; const onIconClick = (e) => { + if (!sortingVisible) return; column.onIconClick(); e.stopPropagation(); }; @@ -38,6 +41,7 @@ const TableHeaderCell = ({ data-min-width={minWidth} data-default-size={defaultSize} onClick={onClick} + sortingVisible={sortingVisible} >
@@ -49,13 +53,15 @@ const TableHeaderCell = ({ {enable ? title : ""} - + {sortingVisible && ( + + )}
{resizable && (
); } @@ -281,9 +283,14 @@ export default inject( firstElemChecked, } = filesStore; const { getHeaderMenu } = filesActionsStore; - const { isPrivacyFolder } = treeFoldersStore; + const { + isPrivacyFolder, + isFavoritesFolder, + isRecentFolder, + } = treeFoldersStore; const withContent = canShare || (canShare && isPrivacyFolder && isDesktop); + const sortingVisible = !(isFavoritesFolder || isRecentFolder); const { personal } = auth.settingsStore; return { @@ -294,6 +301,7 @@ export default inject( selectedFolderId: selectedFolderStore.id, withContent, personal, + sortingVisible, setSelected, setIsLoading, diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Filter/index.js b/products/ASC.Files/Client/src/pages/Home/Section/Filter/index.js index e5b18b9e481..1d2ed959a5d 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Filter/index.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Filter/index.js @@ -7,7 +7,7 @@ import { FilterType } from "@appserver/common/constants"; import Loaders from "@appserver/common/components/Loaders"; import FilterInput from "@appserver/common/components/FilterInput"; import { withLayoutSize } from "@appserver/common/utils"; -import { isMobileOnly, isMobile } from "react-device-detect"; +import { isMobile, isMobileOnly } from "react-device-detect"; import { inject, observer } from "mobx-react"; import withLoader from "../../../../HOCs/withLoader"; import { FileAction } from "@appserver/common/constants"; @@ -334,7 +334,15 @@ class SectionFilterContent extends React.Component { render() { //console.log("Filter render"); const selectedFilterData = this.getSelectedFilterData(); - const { t, sectionWidth, isFiltered, viewAs, personal } = this.props; + const { + t, + sectionWidth, + isFiltered, + viewAs, + personal, + isFavoritesFolder, + isRecentFolder, + } = this.props; const filterColumnCount = window.innerWidth < 500 ? {} : { filterColumnCount: personal ? 2 : 3 }; @@ -354,7 +362,7 @@ class SectionFilterContent extends React.Component { isReady={this.state.isReady} {...filterColumnCount} contextMenuHeader={t("Common:AddFilter")} - isMobile={isMobileOnly} + sortItemsVisible={!(isFavoritesFolder || isRecentFolder)} /> ); }