fixed after-merge room-info button deletion and configured new showCurrentFolderInfo feature

2022-03-17 17:16:21 +03:00 · 2022-03-17 17:16:21 +03:00 · 2d452e18da
commit 2d452e18da
parent cc293f60c2
7 changed files with 226 additions and 145 deletions
--- a/packages/asc-web-common/components/Navigation/Navigation.js
+++ b/packages/asc-web-common/components/Navigation/Navigation.js
@ -30,6 +30,9 @@ const Navigation = ({
  isRecycleBinFolder,
  isEmptyFilesList,
  clearTrash,
+  showFolderInfo,
+  isCurrentFolderInfo,
+  isInfoPanelVisible,
  ...rest
 }) => {
  const [isOpen, setIsOpen] = React.useState(false);
@ -134,6 +137,9 @@ const Navigation = ({
              isRecycleBinFolder={isRecycleBinFolder}
              isEmptyFilesList={isEmptyFilesList}
              clearTrash={clearTrash}
+              showFolderInfo={showFolderInfo}
+              isCurrentFolderInfo={isCurrentFolderInfo}
+              isInfoPanelVisible={isInfoPanelVisible}
            />
          </StyledContainer>
        </>
--- a/packages/asc-web-common/components/Navigation/StyledNavigation.js
+++ b/packages/asc-web-common/components/Navigation/StyledNavigation.js
@ -5,12 +5,12 @@ import { tablet, desktop, mobile } from "@appserver/components/utils/device";
 const StyledContainer = styled.div`
  padding: ${(props) => (props.isDropBox ? "14px 0 3px" : "14px 0 0px")};

-  width: fit-content;
+  width: 100%;

  display: grid;

  grid-template-columns: ${(props) =>
-    props.isRootFolder ? "1fr auto" : "29px 1fr auto"};
+    props.isRootFolder ? "auto 1fr" : "29px auto 1fr"};

  align-items: center;

--- a/packages/asc-web-common/components/Navigation/sub-components/control-btn.js
+++ b/packages/asc-web-common/components/Navigation/sub-components/control-btn.js
@ -30,7 +30,8 @@ const StyledContainer = styled.div`
  }

  .option-button {
-    margin-right: 8px;
+    margin-left: auto;
+    margin-right: 15px;
    min-width: 17px;
  }

@ -39,6 +40,27 @@ const StyledContainer = styled.div`
  }
 `;

+const StyledInfoPanelToggleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+  margin-left: ${({ isRootFolder }) => (isRootFolder ? "auto" : "none")};
+
+  .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.isCurrentFolderInfo
+        ? "#F8F9F9"
+        : "transparent"};
+  }
+`;
+
 const ControlButtons = ({
  personal,
  isDropBox,
@ -49,43 +71,25 @@ const ControlButtons = ({
  isRecycleBinFolder,
  isEmptyFilesList,
  clearTrash,
+  showFolderInfo,
+  isCurrentFolderInfo,
+  isInfoPanelVisible,
 }) => {
  return (
    <StyledContainer isDropBox={isDropBox}>
-      {!isRootFolder && canCreate ? (
-        <>
-          <ContextMenuButton
-            className="add-button"
-            directionX="right"
-            iconName="images/plus.svg"
-            size={17}
-            isFill
-            getData={getContextOptionsPlus}
-            isDisabled={false}
-          />
-          {!personal && (
-            <ContextMenuButton
-              className="option-button"
-              directionX="right"
-              iconName="images/vertical-dots.react.svg"
-              size={17}
-              isFill
-              getData={getContextOptionsFolder}
-              isDisabled={false}
-            />
-          )}
-        </>
-      ) : canCreate ? (
+      {canCreate && (
        <ContextMenuButton
          className="add-button"
-          directionX="right"
+          directionX="left"
          iconName="images/plus.svg"
          size={17}
          isFill
          getData={getContextOptionsPlus}
          isDisabled={false}
        />
-      ) : isRecycleBinFolder && !isEmptyFilesList ? (
+      )}
+
+      {isRecycleBinFolder && !isEmptyFilesList && (
        <IconButton
          iconName="images/clear.active.react.svg"
          size={17}
@ -93,9 +97,38 @@ const ControlButtons = ({
          onClick={clearTrash}
          className="trash-button"
        />
-      ) : (
-        <></>
      )}
+
+      {!isRootFolder && !personal && (
+        <ContextMenuButton
+          className="option-button"
+          directionX="right"
+          iconName="images/vertical-dots.react.svg"
+          size={17}
+          isFill
+          getData={getContextOptionsFolder}
+          isDisabled={false}
+        />
+      )}
+
+      <StyledInfoPanelToggleWrapper
+        isRootFolder={isRootFolder}
+        isCurrentFolderInfo={isCurrentFolderInfo}
+        isInfoPanelVisible={isInfoPanelVisible}
+      >
+        <div className="info-panel-toggle-bg">
+          <IconButton
+            className="info-panel-toggle"
+            iconName="images/panel.svg"
+            size="17"
+            color={
+              isInfoPanelVisible && isCurrentFolderInfo ? "#3B72A7" : "#A3A9AE"
+            }
+            isFill={true}
+            onClick={showFolderInfo}
+          />
+        </div>
+      </StyledInfoPanelToggleWrapper>
    </StyledContainer>
  );
 };
--- a/products/ASC.Files/Client/src/HOCs/withFileActions.js
+++ b/products/ASC.Files/Client/src/HOCs/withFileActions.js
@ -10,15 +10,28 @@ export default function withFileActions(WrappedFileItem) {
    }

    onContentFileSelect = (checked, file) => {
-      const { selectRowAction, infoPanelIsVisible, showInfoPanel } = this.props;
+      const {
+        selectRowAction,
+        infoPanelIsVisible,
+        showInfoPanel,
+        setShowCurrentFolder,
+      } = this.props;
      if (!file || file.id === -1) return;
      selectRowAction(checked, file);

-      if (!infoPanelIsVisible && isDesktop()) showInfoPanel();
+      if (!infoPanelIsVisible && isDesktop()) {
+        setShowCurrentFolder(false);
+        showInfoPanel();
+      }
    };

    fileContextClick = () => {
-      const { onSelectItem, item, infoPanelIsVisible, showInfoPanel } = this.props;
+      const {
+        onSelectItem,
+        item,
+        infoPanelIsVisible,
+        showInfoPanel,
+      } = this.props;
      const { id, isFolder } = item;

      id !== -1 && onSelectItem({ id, isFolder });
@ -98,20 +111,21 @@ export default function withFileActions(WrappedFileItem) {
        isItemsSelected,
        infoPanelIsVisible,
        showInfoPanel,
+        setShowCurrentFolder,
      } = this.props;

-      if(
+      if (
        e.target.tagName === "INPUT" ||
        e.target.tagName === "SPAN" ||
        e.target.tagName === "A" ||
        e.target.closest(".checkbox") ||
        e.button !== 0 ||
-        e.target.closest('.expandButton') || 
-        e.target.querySelector('.expandButton') ||
+        e.target.closest(".expandButton") ||
+        e.target.querySelector(".expandButton") ||
        e.target.closest(".badges") ||
        e.target.closest(".not-selectable")
      )
-        return
+        return;

      if (viewAs === "tile") {
        if (e.target.closest(".edit-button") || e.target.tagName === "IMG")
@ -122,8 +136,12 @@ export default function withFileActions(WrappedFileItem) {
        this.fileContextClick();
      }

-      if (!infoPanelIsVisible && isDesktop()) showInfoPanel();
+      if (!infoPanelIsVisible && isDesktop()) {
+        setShowCurrentFolder(false);
+        showInfoPanel();
+      }
    };
+
    onFilesClick = (e) => {
      const { item, openFileAction } = this.props;
      if (
@ -263,7 +281,7 @@ export default function withFileActions(WrappedFileItem) {

      const { startUpload } = uploadDataStore;
      const { type, extension, id } = fileActionStore;
-      const { isVisible, setVisible } = infoPanelStore;
+      const { isVisible, setVisible, setShowCurrentFolder } = infoPanelStore;

      const selectedItem = selection.find(
        (x) => x.id === item.id && x.fileExst === item.fileExst
@ -332,6 +350,7 @@ export default function withFileActions(WrappedFileItem) {
        openFileAction,
        isInfoPanelVisible: isVisible,
        showInfoPanel: setVisible,
+        setShowCurrentFolder,
      };
    }
  )(observer(WithFileActions));
--- a/products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/index.js
+++ b/products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/index.js
@ -8,74 +8,96 @@ import SingleItem from "./SingleItem";
 import { StyledInfoRoomBody } from "./styles/styles.js";

 const InfoPanelBodyContent = ({
-    t,
-    selectedItems,
-    bufferSelectedItem,
-    getFolderInfo,
-    getIcon,
-    getFolderIcon,
-    getShareUsers,
-    onSelectItem,
-    setSharingPanelVisible,
-    isRecycleBinFolder,
+  t,
+  selectedItems,
+  bufferSelectedItem,
+  getFolderInfo,
+  getIcon,
+  getFolderIcon,
+  getShareUsers,
+  onSelectItem,
+  setSharingPanelVisible,
+  isRecycleBinFolder,
+  showCurrentFolder,
 }) => {
-    if (selectedItems.length) {
-    }
+  if (selectedItems.length) {
+  }

-    return (
-        <StyledInfoRoomBody>
-            {selectedItems.length === 0 && !bufferSelectedItem ? (
-                <div className="no-item">
-                    <h4>{t("NoItemsSelected")}</h4>
-                </div>
-            ) : selectedItems.length === 1 || bufferSelectedItem ? (
-                <SingleItem
-                    selectedItem={selectedItems[0] || bufferSelectedItem}
-                    isRecycleBinFolder={isRecycleBinFolder}
-                    onSelectItem={onSelectItem}
-                    setSharingPanelVisible={setSharingPanelVisible}
-                    getFolderInfo={getFolderInfo}
-                    getIcon={getIcon}
-                    getFolderIcon={getFolderIcon}
-                    getShareUsers={getShareUsers}
-                />
-            ) : (
-                <SeveralItems selectedItems={selectedItems} getIcon={getIcon} />
-            )}
-        </StyledInfoRoomBody>
-    );
+  return (
+    <StyledInfoRoomBody>
+      <>{console.log(showCurrentFolder)}</>
+
+      {showCurrentFolder ? (
+        <div>Room Info</div>
+      ) : (
+        // <SingleItem
+        //   selectedItem={selectedItems[0] || bufferSelectedItem}
+        //   isRecycleBinFolder={isRecycleBinFolder}
+        //   onSelectItem={onSelectItem}
+        //   setSharingPanelVisible={setSharingPanelVisible}
+        //   getFolderInfo={getFolderInfo}
+        //   getIcon={getIcon}
+        //   getFolderIcon={getFolderIcon}
+        //   getShareUsers={getShareUsers}
+        // />
+        <>
+          {selectedItems.length === 0 && !bufferSelectedItem ? (
+            <div className="no-item">
+              <h4>{t("NoItemsSelected")}</h4>
+            </div>
+          ) : selectedItems.length === 1 || bufferSelectedItem ? (
+            <SingleItem
+              selectedItem={selectedItems[0] || bufferSelectedItem}
+              isRecycleBinFolder={isRecycleBinFolder}
+              onSelectItem={onSelectItem}
+              setSharingPanelVisible={setSharingPanelVisible}
+              getFolderInfo={getFolderInfo}
+              getIcon={getIcon}
+              getFolderIcon={getFolderIcon}
+              getShareUsers={getShareUsers}
+            />
+          ) : (
+            <SeveralItems selectedItems={selectedItems} getIcon={getIcon} />
+          )}
+        </>
+      )}
+    </StyledInfoRoomBody>
+  );
 };

 export default inject(
-    ({
-        filesStore,
-        settingsStore,
-        filesActionsStore,
-        dialogsStore,
-        treeFoldersStore,
-    }) => {
-        const selectedItems = JSON.parse(JSON.stringify(filesStore.selection));
-        const bufferSelectedItem = JSON.parse(
-            JSON.stringify(filesStore.bufferSelection)
-        );
+  ({
+    infoPanelStore,
+    filesStore,
+    settingsStore,
+    filesActionsStore,
+    dialogsStore,
+    treeFoldersStore,
+  }) => {
+    const selectedItems = JSON.parse(JSON.stringify(filesStore.selection));
+    const bufferSelectedItem = JSON.parse(
+      JSON.stringify(filesStore.bufferSelection)
+    );

-        //console.log(settin);
-        const { getFolderInfo, getShareUsers } = filesStore;
-        const { getIcon, getFolderIcon } = settingsStore;
-        const { onSelectItem } = filesActionsStore;
-        const { setSharingPanelVisible } = dialogsStore;
-        const { isRecycleBinFolder } = treeFoldersStore;
+    //console.log(settin);
+    const { showCurrentFolder } = infoPanelStore;
+    const { getFolderInfo, getShareUsers } = filesStore;
+    const { getIcon, getFolderIcon } = settingsStore;
+    const { onSelectItem } = filesActionsStore;
+    const { setSharingPanelVisible } = dialogsStore;
+    const { isRecycleBinFolder } = treeFoldersStore;

-        return {
-            bufferSelectedItem,
-            selectedItems,
-            getFolderInfo,
-            getShareUsers,
-            getIcon,
-            getFolderIcon,
-            onSelectItem,
-            setSharingPanelVisible,
-            isRecycleBinFolder,
-        };
-    }
+    return {
+      bufferSelectedItem,
+      selectedItems,
+      getFolderInfo,
+      getShareUsers,
+      getIcon,
+      getFolderIcon,
+      onSelectItem,
+      setSharingPanelVisible,
+      isRecycleBinFolder,
+      showCurrentFolder,
+    };
+  }
 )(withRouter(withTranslation(["InfoPanel"])(observer(InfoPanelBodyContent))));
--- a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js
+++ b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js
@ -57,25 +57,6 @@ const StyledContainer = styled.div`
  }
 `;

-const StyledInfoPanelToggleWrapper = styled.div`
-  display: flex;
-  margin-left: auto;
-  align-items: center;
-  align-self: center;
-  justify-content: center;
-
-  .info-panel-toggle-bg {
-    height: 32px;
-    width: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    /* background-color: ${(props) =>
-       props.isInfoPanelVisible ? "#F8F9F9" : "#FFFFFF"}; */
-  }
-`;
-
 class SectionHeaderContent extends React.Component {
  constructor(props) {
    super(props);
@ -221,7 +202,11 @@ class SectionHeaderContent extends React.Component {
  };

  onEmptyTrashAction = () => this.props.setEmptyTrashDialogVisible(true);
-  onToggleInfoPanel = () => this.props.toggleInfoPanel();
+  showFolderInfo = () => {
+    this.props.setShowCurrentFolder(true);
+    console.log(this.props.showCurrentFolder);
+    this.props.setIsInfoPanelVisible(true);
+  };

  getContextOptionsFolder = () => {
    const { t, personal } = this.props;
@ -394,6 +379,9 @@ class SectionHeaderContent extends React.Component {
                    isEmptyFilesList={isEmptyFilesList}
                    clearTrash={this.onEmptyTrashAction}
                    onBackToParentFolder={this.onBackToParentFolder}
+                    showFolderInfo={this.showFolderInfo}
+                    isCurrentFolderInfo={this.props.showCurrentFolder}
+                    isInfoPanelVisible={this.props.isInfoPanelVisible}
                  />
                )}
              </div>
@ -451,13 +439,15 @@ export default inject(
      backToParentFolder,
    } = filesActionsStore;

-    //const { toggleInfoPanel, isInfoPanelVisible } = infoPanelStore;
-    const toggleInfoPanel = infoPanelStore.toggleIsVisible;
-    const isInfoPanelVisible = infoPanelStore.isVisible;
+    const {
+      showCurrentFolder,
+      setShowCurrentFolder,
+      setIsVisible,
+      isVisible,
+    } = infoPanelStore;

    return {
      showText: auth.settingsStore.showText,
-
      isDesktop: auth.settingsStore.isDesktopClient,
      isRootFolder: selectedFolderStore.parentId === 0,
      title: selectedFolderStore.title,
@ -465,8 +455,10 @@ export default inject(
      pathParts: selectedFolderStore.pathParts,
      navigationPath: selectedFolderStore.navigationPath,
      canCreate,
-      toggleInfoPanel,
-      isInfoPanelVisible,
+      setIsInfoPanelVisible: setIsVisible,
+      isInfoPanelVisible: isVisible,
+      showCurrentFolder,
+      setShowCurrentFolder,
      isHeaderVisible,
      isHeaderIndeterminate,
      isHeaderChecked,
--- a/products/ASC.Files/Client/src/store/InfoPanelStore.js
+++ b/products/ASC.Files/Client/src/store/InfoPanelStore.js
@ -1,27 +1,36 @@
 import { makeAutoObservable } from "mobx";

 class InfoPanelStore {
-    isVisible = false;
+  isVisible = false;
+  showCurrentFolder = false;

-    constructor() {
-        makeAutoObservable(this);
-    }
+  constructor() {
+    makeAutoObservable(this);
+  }

-    toggleIsVisible = () => {
-        this.isVisible = !this.isVisible;
-    };
+  setShowCurrentFolder = (bool) => {
+    this.showCurrentFolder = bool;
+  };

-    setVisible = () => {
-        this.isVisible = true;
-    };
+  get showCurrenFolder() {
+    return this.showCurrenFolder;
+  }

-    setIsVisible = (bool) => {
-        this.isVisible = bool;
-    };
+  toggleIsVisible = () => {
+    this.isVisible = !this.isVisible;
+  };

-    get isVisible() {
-        return this.isVisible;
-    }
+  setVisible = () => {
+    this.isVisible = true;
+  };
+
+  setIsVisible = (bool) => {
+    this.isVisible = bool;
+  };
+
+  get isVisible() {
+    return this.isVisible;
+  }
 }

 export default InfoPanelStore;