diff --git a/packages/asc-web-common/components/AdvancedSelector/AdvancedSelector.js b/packages/asc-web-common/components/AdvancedSelector/AdvancedSelector.js index cf758ac4576..fa268ed392f 100644 --- a/packages/asc-web-common/components/AdvancedSelector/AdvancedSelector.js +++ b/packages/asc-web-common/components/AdvancedSelector/AdvancedSelector.js @@ -17,7 +17,6 @@ class AdvancedSelector extends React.Component { super(props); this.ref = React.createRef(); - this.state = { displayType: this.getTypeByWidth(), }; @@ -87,16 +86,28 @@ class AdvancedSelector extends React.Component { render() { const { displayType } = this.state; - const { isOpen, id, className, style, withoutAside } = this.props; + const { + isOpen, + id, + className, + style, + withoutAside, + isDefaultDisplayDropDown, + smallSectionWidth, + } = this.props; //console.log(`AdvancedSelector render() isOpen=${isOpen} displayType=${displayType}`); return ( -
+
{displayType === "dropdown" ? ( @@ -157,6 +168,7 @@ AdvancedSelector.propTypes = { onCancel: PropTypes.func, onAddNewClick: PropTypes.func, loadNextPage: PropTypes.func, + isDefaultDisplayDropDown: PropTypes.bool, }; AdvancedSelector.defaultProps = { @@ -168,6 +180,7 @@ AdvancedSelector.defaultProps = { allowAnyClickClose: true, displayType: "auto", options: [], + isDefaultDisplayDropDown: true, }; export default AdvancedSelector; diff --git a/packages/asc-web-common/components/AdvancedSelector/sub-components/Selector.js b/packages/asc-web-common/components/AdvancedSelector/sub-components/Selector.js index 787e21d5f6b..240cf4030ae 100644 --- a/packages/asc-web-common/components/AdvancedSelector/sub-components/Selector.js +++ b/packages/asc-web-common/components/AdvancedSelector/sub-components/Selector.js @@ -604,6 +604,7 @@ const Selector = (props) => { scaled={true} scaledOptions={true} size="content" + isDefaultMode={false} onSelect={onGroupSelect} /> {isMultiSelect && diff --git a/packages/asc-web-common/components/FilterInput/FilterInput.js b/packages/asc-web-common/components/FilterInput/FilterInput.js index cacf0a68501..23e859ac683 100644 --- a/packages/asc-web-common/components/FilterInput/FilterInput.js +++ b/packages/asc-web-common/components/FilterInput/FilterInput.js @@ -895,6 +895,8 @@ class FilterInput extends React.Component { openFilterItems={openFilterItems} hiddenFilterItems={hiddenFilterItems} iconSize={iconSize} + smallSectionWidth={smallSectionWidth} + sectionWidth={sectionWidth} getFilterData={getFilterData} onClickFilterItem={this.onClickFilterItem} onDeleteFilterItem={this.onDeleteFilterItem} diff --git a/packages/asc-web-common/components/FilterInput/StyledFilterInput.js b/packages/asc-web-common/components/FilterInput/StyledFilterInput.js index b920c448a5c..b2353d020f9 100644 --- a/packages/asc-web-common/components/FilterInput/StyledFilterInput.js +++ b/packages/asc-web-common/components/FilterInput/StyledFilterInput.js @@ -70,9 +70,6 @@ const StyledFilterInput = styled.div` width: auto; padding-left: 4px; } - > div:last-child { - max-width: 220px; - } .combo-button-label { color: #333; } diff --git a/packages/asc-web-common/components/FilterInput/sub-components/FilterBlock.js b/packages/asc-web-common/components/FilterInput/sub-components/FilterBlock.js index 0b77f55d16f..cd9c714b99a 100644 --- a/packages/asc-web-common/components/FilterInput/sub-components/FilterBlock.js +++ b/packages/asc-web-common/components/FilterInput/sub-components/FilterBlock.js @@ -160,7 +160,16 @@ class FilterItem extends React.Component { groupsCaption, defaultOption, asideView, + smallSectionWidth, + openItems, + sectionWidth, } = this.props; + + const openInAside = + ((window.innerWidth < 1360 || sectionWidth < 1080) && openItems >= 3) || + ((window.innerWidth < 1170 || sectionWidth < 1000) && openItems >= 2) || + sectionWidth < 780; + return ( @@ -186,6 +195,7 @@ class FilterItem extends React.Component { isMultiSelect={false} onCancel={this.onCancelSelector} onSelect={this.onSelectGroup} + smallSectionWidth={smallSectionWidth} displayType={asideView ? "aside" : "auto"} /> @@ -213,8 +223,9 @@ class FilterItem extends React.Component { defaultOption={defaultOption} defaultOptionLabel={defaultOptionLabel} onCancel={this.onCancelSelector} + smallSectionWidth={smallSectionWidth} onSelect={this.onSelectGroup} - displayType={asideView ? "aside" : "auto"} + displayType={asideView || openInAside ? "aside" : "auto"} /> )} @@ -234,7 +245,9 @@ class FilterItem extends React.Component { size="content" scaled={false} noBorder={true} + isDefaultMode={false} opened={opened} + textOverflow={true} directionX="left" toggleAction={this.toggleCombobox} dropDownMaxHeight={300} @@ -317,7 +330,12 @@ class FilterBlock extends React.Component { }); }; getFilterItems = () => { - const { openFilterItems, hiddenFilterItems } = this.props; + const { + openFilterItems, + hiddenFilterItems, + smallSectionWidth, + sectionWidth, + } = this.props; const { asideView } = this.props; const _this = this; let result = []; @@ -341,6 +359,8 @@ class FilterBlock extends React.Component { ); }); @@ -388,11 +409,13 @@ class FilterBlock extends React.Component { return t.group == group && t.group != t.key; })} onSelectFilterItem={_this.props.onClickFilterItem} + sectionWidth={sectionWidth} id={key} groupLabel={groupLabel} opened={key.indexOf("_-1") == -1 ? false : true} label={label} onClose={_this.onDeleteFilterItem} + smallSectionWidth={smallSectionWidth} typeSelector={typeSelector} groupsCaption={groupsCaption} defaultOptionLabel={defaultOptionLabel} diff --git a/packages/asc-web-common/components/FilterInput/sub-components/HideFilter.js b/packages/asc-web-common/components/FilterInput/sub-components/HideFilter.js index bccc3f26dd6..bce4d6f691e 100644 --- a/packages/asc-web-common/components/FilterInput/sub-components/HideFilter.js +++ b/packages/asc-web-common/components/FilterInput/sub-components/HideFilter.js @@ -26,7 +26,7 @@ class HideFilter extends React.Component { } onClick = (state, e) => { - if (!state && e && this.dropDownRef.current.contains(e.target)) { + if (!state && e && this.ref.current.contains(e.target)) { return; } if (!this.props.isDisabled) { @@ -58,11 +58,12 @@ class HideFilter extends React.Component { -
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 7248abc42b5..0e54b9a9f53 100644 --- a/packages/asc-web-common/components/FilterInput/sub-components/SortComboBox.js +++ b/packages/asc-web-common/components/FilterInput/sub-components/SortComboBox.js @@ -155,6 +155,7 @@ class SortComboBox extends React.Component { ref={this.combobox} scaled={true} selectedOption={selectedOption} + scaledOptions={true} size="content" > diff --git a/packages/asc-web-common/custom.scss b/packages/asc-web-common/custom.scss index 414f373b0c9..0e90d957db7 100644 --- a/packages/asc-web-common/custom.scss +++ b/packages/asc-web-common/custom.scss @@ -19,6 +19,24 @@ body { } } +.table-container_settings-checkbox { + padding: 8px 16px; +} + +.hide-filter-drop-down { + padding: 16px !important; + margin-top: 2px; +} + +.styled-close-button { + margin-left: 7px; + margin-top: -1px; +} + +.styled-combobox { + margin-top: -2px; +} + body { margin: 0; } diff --git a/packages/asc-web-components/calendar/index.js b/packages/asc-web-components/calendar/index.js index d442719765a..f142313f421 100644 --- a/packages/asc-web-components/calendar/index.js +++ b/packages/asc-web-components/calendar/index.js @@ -493,6 +493,7 @@ class Calendar extends Component { {advancedOptions ? advancedOptions @@ -176,7 +184,7 @@ ComboBox.propTypes = { /** X direction selection */ directionX: PropTypes.oneOf(["left", "right"]), /** Y direction selection */ - directionY: PropTypes.oneOf(["bottom", "top"]), + directionY: PropTypes.oneOf(["bottom", "top", "both"]), /** Component Display Type */ displayType: PropTypes.oneOf(["default", "toggle"]), /** Height of Dropdown */ @@ -211,6 +219,8 @@ ComboBox.propTypes = { textOverflow: PropTypes.bool, /** Disables clicking on the icon */ disableIconClick: PropTypes.bool, + /** Defines the operation mode of the component, by default with the portal */ + isDefaultMode: PropTypes.bool, /** Y offset */ offsetDropDownY: PropTypes.string, }; @@ -225,6 +235,7 @@ ComboBox.defaultProps = { disableIconClick: true, showDisabledItems: false, offsetDropDownY: "102%", + isDefaultMode: true, }; export default ComboBox; diff --git a/packages/asc-web-components/context-menu-button/index.js b/packages/asc-web-components/context-menu-button/index.js index 5c4c585b891..f56d685e75c 100644 --- a/packages/asc-web-components/context-menu-button/index.js +++ b/packages/asc-web-components/context-menu-button/index.js @@ -196,6 +196,7 @@ class ContextMenuButton extends React.Component { directionX={directionX} directionY={directionY} open={isOpen} + forwardedRef={this.ref} clickOutsideAction={this.clickOutsideAction} columnCount={columnCount} withBackdrop={!!isMobile} diff --git a/packages/asc-web-components/date-picker/index.js b/packages/asc-web-components/date-picker/index.js index 751ccc3abb9..dc76fc2fea1 100644 --- a/packages/asc-web-components/date-picker/index.js +++ b/packages/asc-web-components/date-picker/index.js @@ -349,9 +349,11 @@ class DatePicker extends Component { displayType === "dropdown" ? ( {this.renderBody()} diff --git a/packages/asc-web-components/drop-down/index.js b/packages/asc-web-components/drop-down/index.js index aadb0adec23..1fb0e1eb302 100644 --- a/packages/asc-web-components/drop-down/index.js +++ b/packages/asc-web-components/drop-down/index.js @@ -3,6 +3,8 @@ import PropTypes from "prop-types"; import { VariableSizeList } from "react-window"; import onClickOutside from "react-onclickoutside"; import { isMobile } from "react-device-detect"; +import Portal from "../portal"; +import DomHelpers from "../utils/domHelpers"; import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual-list"; import DropDownItem from "../drop-down-item"; @@ -32,30 +34,36 @@ class DropDown extends React.PureComponent { super(props); this.state = { - width: this.dropDownRef ? this.dropDownRef.current.offsetWidth : 240, directionX: props.directionX, directionY: props.directionY, }; - this.dropDownRef = React.createRef(); } componentDidMount() { if (this.props.open) { this.props.enableOnClickOutside(); - this.checkPosition(); + if (this.props.isDefaultMode) { + return setTimeout(() => this.checkPositionPortal(), 0); // ditry, but need after render for ref + } + return this.checkPosition(); } } componentWillUnmount() { this.props.disableOnClickOutside(); + this.unbindDocumentResizeListener(); } componentDidUpdate(prevProps) { if (this.props.open !== prevProps.open) { if (this.props.open) { this.props.enableOnClickOutside(); - this.checkPosition(); + this.bindDocumentResizeListener(); + if (this.props.isDefaultMode) { + return this.checkPositionPortal(); + } + return this.checkPosition(); } else { this.props.disableOnClickOutside(); } @@ -72,9 +80,32 @@ class DropDown extends React.PureComponent { this.props.clickOutsideAction(e, !this.props.open); }; + bindDocumentResizeListener() { + if (!this.documentResizeListener) { + this.documentResizeListener = (e) => { + if (this.props.open) { + if (this.props.isDefaultMode) { + this.checkPositionPortal(); + } else { + this.checkPosition(); + } + } + }; + + window.addEventListener("resize", this.documentResizeListener); + } + } + + unbindDocumentResizeListener() { + if (this.documentResizeListener) { + window.removeEventListener("resize", this.documentResizeListener); + this.documentResizeListener = null; + } + } + checkPosition = () => { if (!this.dropDownRef.current) return; - + const { smallSectionWidth } = this.props; const rects = this.dropDownRef.current.getBoundingClientRect(); const container = { width: window.innerWidth, height: window.innerHeight }; const left = rects.left < 0 && rects.width < container.width; @@ -85,13 +116,61 @@ class DropDown extends React.PureComponent { rects.width < container.width; const top = rects.bottom > container.height && rects.top > rects.height; const bottom = rects.top < 0; - const x = left ? "left" : right ? "right" : this.state.directionX; + const x = left + ? "left" + : right || smallSectionWidth + ? "right" + : this.state.directionX; const y = bottom ? "bottom" : top ? "top" : this.state.directionY; this.setState({ directionX: x, directionY: y, - width: rects.width, + width: this.dropDownRef ? this.dropDownRef.current.offsetWidth : 240, + }); + }; + + checkPositionPortal = () => { + const parent = this.props.forwardedRef; + if (!parent.current) return; + const rects = parent.current.getBoundingClientRect(); + + let dropDownHeight = this.dropDownRef.current.offsetParent + ? this.dropDownRef.current.offsetHeight + : DomHelpers.getHiddenElementOuterHeight(this.dropDownRef.current); + + let left = rects.left; + let bottom = rects.bottom; + + const viewport = DomHelpers.getViewport(); + const dropDownRects = this.dropDownRef.current.getBoundingClientRect(); + + if ( + this.props.directionY === "top" || + (this.props.directionY === "both" && + rects.bottom + dropDownHeight > viewport.height) + ) { + bottom -= parent.current.clientHeight + dropDownHeight; + } + + if (this.props.right) { + this.dropDownRef.current.style.right = this.props.right; + } else if (this.props.directionX === "right") { + this.dropDownRef.current.style.left = + rects.right - this.dropDownRef.current.clientWidth + "px"; + } else if (rects.left + dropDownRects.width > viewport.width) { + this.dropDownRef.current.style.left = + rects.right - this.dropDownRef.current.clientWidth + "px"; + } else { + this.dropDownRef.current.style.left = left + "px"; + } + + this.dropDownRef.current.style.top = this.props.top || bottom + "px"; + + this.setState({ + directionX: this.props.directionX, + directionY: this.props.directionY, + width: this.dropDownRef ? this.dropDownRef.current.offsetWidth : 240, }); }; @@ -123,7 +202,7 @@ class DropDown extends React.PureComponent { } }; - render() { + renderDropDown() { const { maxHeight, children, showDisabledItems } = this.props; const { directionX, directionY, width } = this.state; let cleanChildren; @@ -169,6 +248,15 @@ class DropDown extends React.PureComponent { ); } + render() { + const { isDefaultMode } = this.props; + const element = this.renderDropDown(); + if (isDefaultMode) { + return ; + } + + return element; + } } const EnhancedComponent = onClickOutside(DropDown); @@ -211,7 +299,7 @@ DropDownContainer.propTypes = { /** Sets the opening direction relative to the parent */ directionX: PropTypes.oneOf(["left", "right"]), //TODO: make more informative /** Sets the opening direction relative to the parent */ - directionY: PropTypes.oneOf(["bottom", "top"]), + directionY: PropTypes.oneOf(["bottom", "top", "both"]), /** Accepts id */ id: PropTypes.string, /** Required if you need to specify the exact width of the component, for example 100% */ @@ -232,6 +320,11 @@ DropDownContainer.propTypes = { columnCount: PropTypes.number, /** Display disabled items or not */ showDisabledItems: PropTypes.bool, + forwardedRef: PropTypes.shape({ current: PropTypes.any }), + /** Defines the operation mode of the component, by default with the portal */ + isDefaultMode: PropTypes.bool, + /** Needed to open correctly people and group selector when the section width is small */ + smallSectionWidth: PropTypes.bool, }; DropDownContainer.defaultProps = { @@ -239,6 +332,7 @@ DropDownContainer.defaultProps = { directionY: "bottom", withBackdrop: true, showDisabledItems: false, + isDefaultMode: true, }; export default DropDownContainer; diff --git a/packages/asc-web-components/group-button/index.js b/packages/asc-web-components/group-button/index.js index 0bcb7d3df99..c4766dc76cf 100644 --- a/packages/asc-web-components/group-button/index.js +++ b/packages/asc-web-components/group-button/index.js @@ -140,6 +140,7 @@ class GroupButton extends React.Component { @@ -119,6 +122,7 @@ class LinkWithDropdown extends React.Component { {...item} onClick={this.onClickDropDownItem} data-key={item.key} + textOverflow={isTextOverflow} /> ))} @@ -159,6 +163,8 @@ LinkWithDropdown.propTypes = { style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), /** Set disabled view */ isDisabled: PropTypes.bool, + /** Sets the opening direction relative to the parent */ + directionY: PropTypes.oneOf(["bottom", "top", "both"]), }; LinkWithDropdown.defaultProps = { diff --git a/packages/asc-web-components/main-button/index.js b/packages/asc-web-components/main-button/index.js index 123d0eb4e59..b0c316c47f0 100644 --- a/packages/asc-web-components/main-button/index.js +++ b/packages/asc-web-components/main-button/index.js @@ -75,6 +75,9 @@ class MainButton extends React.PureComponent { render() { //console.log("MainButton render"); + const dropDownManualWidthProp = this.ref.current + ? { manualWidth: this.ref.current.clientWidth + "px" } + : {}; return ( @@ -82,8 +85,10 @@ class MainButton extends React.PureComponent { {this.props.isDropdown ? ( diff --git a/packages/asc-web-components/paging/index.js b/packages/asc-web-components/paging/index.js index 7c805d5ae8c..79532eb0f70 100644 --- a/packages/asc-web-components/paging/index.js +++ b/packages/asc-web-components/paging/index.js @@ -55,7 +55,7 @@ const Paging = (props) => { directionY={openDirection} options={pageItems} onSelect={onSelectPageAction} - scaledOptions={pageItems.length > 6} + scaledOptions={pageItems.length < 6} selectedOption={selectedPageItem} {...setDropDownMaxHeight} /> @@ -78,6 +78,7 @@ const Paging = (props) => { directionY={openDirection} directionX="right" options={countItems} + scaledOptions={true} onSelect={onSelectCountAction} selectedOption={selectedCountItem} /> @@ -114,7 +115,7 @@ Paging.propTypes = { /** Items per page combo box items */ countItems: PropTypes.array, /** Indicates opening direction of combo box */ - openDirection: PropTypes.oneOf(["bottom", "top"]), + openDirection: PropTypes.oneOf(["bottom", "top", "both"]), /** Accepts class */ className: PropTypes.string, /** Accepts id */ diff --git a/packages/asc-web-components/progress-bar/index.js b/packages/asc-web-components/progress-bar/index.js index 8c14ef7c4c8..62c343bcdbd 100644 --- a/packages/asc-web-components/progress-bar/index.js +++ b/packages/asc-web-components/progress-bar/index.js @@ -52,7 +52,7 @@ const ProgressBar = (props) => {
{dropDownContent && ( - +
{dropDownContent}
 )} diff --git a/packages/asc-web-components/row-container/index.js b/packages/asc-web-components/row-container/index.js index 3199c4ac86a..d3220b13943 100644 --- a/packages/asc-web-components/row-container/index.js +++ b/packages/asc-web-components/row-container/index.js @@ -20,10 +20,12 @@ class RowContainer extends React.PureComponent { id, className, style, + onScroll, } = this.props; const renderList = ({ height, width }) => ( { directionX="right" open={isOpen} clickOutsideAction={clickOutsideAction} + forwardedRef={ref} withBackdrop={false} > {columns.map((column) => { diff --git a/packages/asc-web-components/themes/base.js b/packages/asc-web-components/themes/base.js index 4895e1e03ef..67caa61386f 100644 --- a/packages/asc-web-components/themes/base.js +++ b/packages/asc-web-components/themes/base.js @@ -197,7 +197,6 @@ const Base = { }, dropDown: { - width: "100%", top: "100%", }, @@ -1163,7 +1162,7 @@ const Base = { dropDown: { fontWeight: "600", fontSize: "13px", - zIndex: "200", + zIndex: "400", background: white, borderRadius: "6px", boxShadow: "0px 5px 20px rgba(0, 0, 0, 0.13)", diff --git a/packages/asc-web-components/themes/dark.js b/packages/asc-web-components/themes/dark.js index af6723b1ece..0235b3ad498 100644 --- a/packages/asc-web-components/themes/dark.js +++ b/packages/asc-web-components/themes/dark.js @@ -182,7 +182,6 @@ const Dark = { }, dropDown: { - width: "100%", top: "100%", }, @@ -1122,7 +1121,7 @@ const Dark = { dropDown: { fontWeight: "600", fontSize: "13px", - zIndex: "200", + zIndex: "400", background: white, borderRadius: "6px", boxShadow: "0px 5px 20px rgba(0, 0, 0, 0.13)", diff --git a/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/DownloadContent.js b/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/DownloadContent.js index aab2d3215d2..7d4ccf6c148 100644 --- a/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/DownloadContent.js +++ b/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/DownloadContent.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { isMobile } from "react-device-detect"; import Row from "@appserver/components/row"; import RowContent from "@appserver/components/row-content"; @@ -29,6 +29,9 @@ const DownloadContent = (props) => { title, } = props; + const [isScrolling, setIsScrolling] = useState(null); + const [isOpen, setIsOpen] = useState(null); + const getTitleExtensions = () => { let arr = []; for (let item of items) { @@ -73,6 +76,21 @@ const DownloadContent = (props) => { return formats; }; + useEffect(() => { + if (isScrolling) { + setIsOpen(false); + const id = setTimeout(() => setIsScrolling(false), 500); + return () => { + clearTimeout(id); + setIsOpen(null); + }; + } + }, [isScrolling]); + + const onScroll = () => { + setIsScrolling(true); + }; + const getFormats = (item) => { const arrayFormats = item && filesConverts.find((f) => f[item.fileExst]); const conversionFormats = arrayFormats ? arrayFormats[item.fileExst] : []; @@ -155,6 +173,7 @@ const DownloadContent = (props) => { useReactWindow={length > 2} style={{ minHeight: minHeight, padding: "8px 0" }} itemHeight={50} + onScroll={onScroll} > {items.map((file) => { const element = getItemIcon(file); @@ -188,6 +207,7 @@ const DownloadContent = (props) => { {file.checked ? ( { directionX={directionX} disableIconClick={false} isDisabled={isDisabled} + isDefaultMode={false} > diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js index 78b9cb9250b..ca137e6af27 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js @@ -563,6 +563,7 @@ class SharingPanelComponent extends React.Component { /> { - console.log("Paging onChangePageSize", pageItem); + //console.log("Paging onChangePageSize", pageItem); const newFilter = filter.clone(); newFilter.page = 0; @@ -73,7 +73,7 @@ const SectionPagingContent = ({ const onChangePage = useCallback( (pageItem) => { - console.log("Paging onChangePage", pageItem); + //console.log("Paging onChangePage", pageItem); const newFilter = filter.clone(); newFilter.page = pageItem.key; @@ -157,7 +157,7 @@ const SectionPagingContent = ({ disableHover={isMobile} previousAction={onPrevClick} nextAction={onNextClick} - openDirection="top" + openDirection="both" selectedPageItem={selectedPageItem} //FILTER CURRENT PAGE selectedCountItem={selectedCountItem} //FILTER PAGE COUNT showCountItem={showCountItem} diff --git a/products/ASC.Files/Client/src/pages/Home/index.js b/products/ASC.Files/Client/src/pages/Home/index.js index a99bd2258e7..6bf42907782 100644 --- a/products/ASC.Files/Client/src/pages/Home/index.js +++ b/products/ASC.Files/Client/src/pages/Home/index.js @@ -117,7 +117,7 @@ class PureHome extends React.Component { .all(requests) .catch((err) => { Promise.resolve(FilesFilter.getDefault()); - console.warn("Filter restored by default", err); + //console.warn("Filter restored by default", err); }) .then((data) => { const filter = data[0]; diff --git a/products/ASC.People/Client/src/HOCs/withContent.js b/products/ASC.People/Client/src/HOCs/withContent.js index b867ffc32df..84716797ee1 100644 --- a/products/ASC.People/Client/src/HOCs/withContent.js +++ b/products/ASC.People/Client/src/HOCs/withContent.js @@ -69,6 +69,7 @@ export default function withContent(WrappedContent) { isTextOverflow containerMinWidth="120px" containerWidth="15%" + directionY="both" title={temp[0].label} fontSize="12px" fontWeight={400} diff --git a/products/ASC.People/Client/src/components/GroupSelector/index.js b/products/ASC.People/Client/src/components/GroupSelector/index.js index cb724280d42..29e80ccefb1 100644 --- a/products/ASC.People/Client/src/components/GroupSelector/index.js +++ b/products/ASC.People/Client/src/components/GroupSelector/index.js @@ -94,6 +94,7 @@ class GroupSelector extends React.Component { withoutAside, embeddedComponent, showCounter, + smallSectionWidth, } = this.props; return ( @@ -103,6 +104,7 @@ class GroupSelector extends React.Component { style={style} options={options} hasNextPage={hasNextPage} + smallSectionWidth={smallSectionWidth} isNextPageLoading={isNextPageLoading} loadNextPage={this.loadNextPage} size={"compact"} @@ -110,6 +112,7 @@ class GroupSelector extends React.Component { selectedOptions={selectedOptions} isOpen={isOpen} isMultiSelect={isMultiSelect} + isDefaultDisplayDropDown={false} isDisabled={isDisabled} searchPlaceHolderLabel={ searchPlaceHolderLabel || t("SearchPlaceholder") diff --git a/products/ASC.People/Client/src/components/PeopleSelector/index.js b/products/ASC.People/Client/src/components/PeopleSelector/index.js index 5f931a8156a..6c319b203da 100644 --- a/products/ASC.People/Client/src/components/PeopleSelector/index.js +++ b/products/ASC.People/Client/src/components/PeopleSelector/index.js @@ -229,6 +229,7 @@ class PeopleSelector extends React.Component { embeddedComponent, selectedOptions, showCounter, + smallSectionWidth, } = this.props; console.log("CustomAllGroups", t("CustomAllGroups", { groupsCaption })); @@ -243,6 +244,7 @@ class PeopleSelector extends React.Component { groups={groups} hasNextPage={hasNextPage} isNextPageLoading={isNextPageLoading} + smallSectionWidth={smallSectionWidth} loadNextPage={this.loadNextPage} size={size} displayType={displayType} @@ -254,6 +256,7 @@ class PeopleSelector extends React.Component { searchPlaceHolderLabel={ searchPlaceHolderLabel || t("SearchUsersPlaceholder") } + isDefaultDisplayDropDown={false} selectButtonLabel={t("Translations:AddMembers")} selectAllLabel={t("Common:SelectAll")} groupsHeaderLabel={groupsCaption} diff --git a/products/ASC.People/Client/src/pages/Home/Section/Paging/index.js b/products/ASC.People/Client/src/pages/Home/Section/Paging/index.js index ff09860153e..2f86b457fb2 100644 --- a/products/ASC.People/Client/src/pages/Home/Section/Paging/index.js +++ b/products/ASC.People/Client/src/pages/Home/Section/Paging/index.js @@ -20,7 +20,7 @@ const PureSectionPagingContent = ({ e.preventDefault(); return; } - console.log("Next Clicked", e); + //console.log("Next Clicked", e); const newFilter = filter.clone(); newFilter.page++; @@ -38,7 +38,7 @@ const PureSectionPagingContent = ({ return; } - console.log("Prev Clicked", e); + //console.log("Prev Clicked", e); const newFilter = filter.clone(); newFilter.page--; @@ -51,7 +51,7 @@ const PureSectionPagingContent = ({ const onChangePageSize = useCallback( (pageItem) => { - console.log("Paging onChangePageSize", pageItem); + //console.log("Paging onChangePageSize", pageItem); const newFilter = filter.clone(); newFilter.page = 0; @@ -65,7 +65,7 @@ const PureSectionPagingContent = ({ const onChangePage = useCallback( (pageItem) => { - console.log("Paging onChangePage", pageItem); + //console.log("Paging onChangePage", pageItem); const newFilter = filter.clone(); newFilter.page = pageItem.key; @@ -126,7 +126,7 @@ const PureSectionPagingContent = ({ //console.log("SectionPagingContent render", filter); return isLoaded ? ( - !filter || filter.total < filter.pageCount || !tReady ? ( + !tReady || !filter || filter.total < filter.pageCount ? ( <> ) : ( diff --git a/products/ASC.People/Client/src/pages/Home/index.js b/products/ASC.People/Client/src/pages/Home/index.js index 70cceadaca6..9788316a023 100644 --- a/products/ASC.People/Client/src/pages/Home/index.js +++ b/products/ASC.People/Client/src/pages/Home/index.js @@ -17,27 +17,29 @@ import { } from "./Section"; import { inject, observer } from "mobx-react"; import { isMobile } from "react-device-detect"; +import { withTranslation } from "react-i18next"; import Dialogs from "./Section/Body/Dialogs"; //TODO: Move dialogs to another folder -const Home = ({ +const PureHome = ({ isLoading, history, getUsersList, setIsLoading, setIsRefresh, selectedGroup, + tReady, viewAs, }) => { const { location } = history; const { pathname } = location; - console.log("People Home render"); + //console.log("People Home render"); useEffect(() => { if (pathname.indexOf("/people/filter") > -1) { setIsLoading(true); setIsRefresh(true); const newFilter = Filter.getFilter(location); - console.log("PEOPLE URL changed", pathname, newFilter); + //console.log("PEOPLE URL changed", pathname, newFilter); getUsersList(newFilter).finally(() => { setIsLoading(false); setIsRefresh(false); @@ -90,7 +92,7 @@ const Home = ({ - + @@ -99,10 +101,12 @@ const Home = ({ ); }; -Home.propTypes = { +PureHome.propTypes = { isLoading: PropTypes.bool, }; +const Home = withTranslation("Home")(PureHome); + export default inject(({ peopleStore }) => { const { usersStore, selectedGroupStore, loadingStore, viewAs } = peopleStore; const { getUsersList } = usersStore; 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 74f6065b4e3..b0387b84186 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 @@ -364,6 +364,7 @@ class ProfileInfo extends React.PureComponent { {cultureNames && selectedLanguage ? ( <> ); diff --git a/web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-actions.js b/web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-actions.js index ee82c2ba088..7e69305fb5d 100644 --- a/web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-actions.js +++ b/web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-actions.js @@ -103,6 +103,7 @@ class ProfileActions extends React.PureComponent { email={user.email} open={opened} clickOutsideAction={this.onClose} + forwardedRef={this.ref} >
{this.props.userActions.map((action) => ( diff --git a/web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-menu.js b/web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-menu.js index b33de742bd6..583c665c4a2 100644 --- a/web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-menu.js +++ b/web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-menu.js @@ -5,6 +5,7 @@ import DropDown from "@appserver/components/drop-down"; import styled, { css } from "styled-components"; import DropDownItem from "@appserver/components/drop-down-item"; +import { isDesktop, isTablet } from "react-device-detect"; const commonStyle = css` font-family: "Open Sans", sans-serif, Arial; @@ -82,14 +83,20 @@ class ProfileMenu extends React.Component { email, clickOutsideAction, open, + forwardedRef, } = this.props; + const right = isTablet ? "4px" : "8px"; + const top = "62px"; return (