fixed context menu and added first-close-disable interaction
This commit is contained in:
parent
c4b470f98a
commit
bd20587a2b
@ -28,7 +28,11 @@ const StyledInfoPanelHeader = styled.div`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const SubInfoPanelHeader = ({ children, toggleIsVisible }) => {
|
const SubInfoPanelHeader = ({
|
||||||
|
children,
|
||||||
|
onHeaderCrossClick,
|
||||||
|
revertHeaderCrossClick,
|
||||||
|
}) => {
|
||||||
const content = children?.props?.children;
|
const content = children?.props?.children;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -36,9 +40,20 @@ const SubInfoPanelHeader = ({ children, toggleIsVisible }) => {
|
|||||||
<Text className="header-text" fontSize="21px" fontWeight="700">
|
<Text className="header-text" fontSize="21px" fontWeight="700">
|
||||||
{content}
|
{content}
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
<IconButton
|
<IconButton
|
||||||
className="close-btn"
|
className="close-btn"
|
||||||
onClick={toggleIsVisible}
|
onClick={revertHeaderCrossClick}
|
||||||
|
iconName="/static/images/eye.react.svg"
|
||||||
|
size="17"
|
||||||
|
color="#A3A9AE"
|
||||||
|
hoverColor="#657077"
|
||||||
|
isFill={true}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<IconButton
|
||||||
|
className="close-btn"
|
||||||
|
onClick={onHeaderCrossClick}
|
||||||
iconName="/static/images/cross.react.svg"
|
iconName="/static/images/cross.react.svg"
|
||||||
size="17"
|
size="17"
|
||||||
color="#A3A9AE"
|
color="#A3A9AE"
|
||||||
@ -61,9 +76,11 @@ SubInfoPanelHeader.propTypes = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export default inject(({ infoPanelStore }) => {
|
export default inject(({ infoPanelStore }) => {
|
||||||
let toggleIsVisible = () => {};
|
let onHeaderCrossClick = () => {};
|
||||||
|
let revertHeaderCrossClick = () => {};
|
||||||
if (infoPanelStore) {
|
if (infoPanelStore) {
|
||||||
toggleIsVisible = infoPanelStore.toggleIsVisible;
|
onHeaderCrossClick = infoPanelStore.onHeaderCrossClick;
|
||||||
|
revertHeaderCrossClick = infoPanelStore.revertHeaderCrossClick;
|
||||||
}
|
}
|
||||||
return { toggleIsVisible };
|
return { onHeaderCrossClick, revertHeaderCrossClick };
|
||||||
})(observer(SubInfoPanelHeader));
|
})(observer(SubInfoPanelHeader));
|
||||||
|
@ -13,16 +13,13 @@ export default function withFileActions(WrappedFileItem) {
|
|||||||
const {
|
const {
|
||||||
selectRowAction,
|
selectRowAction,
|
||||||
infoPanelIsVisible,
|
infoPanelIsVisible,
|
||||||
showInfoPanel,
|
infoPanelonItemClick,
|
||||||
setShowCurrentFolder,
|
setShowCurrentFolder,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
if (!file || file.id === -1) return;
|
if (!file || file.id === -1) return;
|
||||||
selectRowAction(checked, file);
|
selectRowAction(checked, file);
|
||||||
|
|
||||||
if (!infoPanelIsVisible && isDesktop()) {
|
infoPanelonItemClick(checked);
|
||||||
setShowCurrentFolder(false);
|
|
||||||
if (checked) showInfoPanel();
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
fileContextClick = () => {
|
fileContextClick = () => {
|
||||||
@ -105,8 +102,7 @@ export default function withFileActions(WrappedFileItem) {
|
|||||||
viewAs,
|
viewAs,
|
||||||
isItemsSelected,
|
isItemsSelected,
|
||||||
infoPanelIsVisible,
|
infoPanelIsVisible,
|
||||||
showInfoPanel,
|
infoPanelonItemClick,
|
||||||
setShowCurrentFolder,
|
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
if (
|
if (
|
||||||
@ -125,16 +121,10 @@ export default function withFileActions(WrappedFileItem) {
|
|||||||
if (viewAs === "tile") {
|
if (viewAs === "tile") {
|
||||||
if (e.target.closest(".edit-button") || e.target.tagName === "IMG")
|
if (e.target.closest(".edit-button") || e.target.tagName === "IMG")
|
||||||
return;
|
return;
|
||||||
|
|
||||||
if (e.detail === 1) this.fileContextClick();
|
if (e.detail === 1) this.fileContextClick();
|
||||||
} else {
|
} else this.fileContextClick();
|
||||||
this.fileContextClick();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!infoPanelIsVisible && isDesktop()) {
|
infoPanelonItemClick();
|
||||||
setShowCurrentFolder(false);
|
|
||||||
showInfoPanel();
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
onFilesClick = (e) => {
|
onFilesClick = (e) => {
|
||||||
@ -276,7 +266,7 @@ export default function withFileActions(WrappedFileItem) {
|
|||||||
|
|
||||||
const { startUpload } = uploadDataStore;
|
const { startUpload } = uploadDataStore;
|
||||||
const { type, extension, id } = fileActionStore;
|
const { type, extension, id } = fileActionStore;
|
||||||
const { isVisible, setVisible, setShowCurrentFolder } = infoPanelStore;
|
const { isVisible, onItemClick, setShowCurrentFolder } = infoPanelStore;
|
||||||
|
|
||||||
const selectedItem = selection.find(
|
const selectedItem = selection.find(
|
||||||
(x) => x.id === item.id && x.fileExst === item.fileExst
|
(x) => x.id === item.id && x.fileExst === item.fileExst
|
||||||
@ -344,7 +334,7 @@ export default function withFileActions(WrappedFileItem) {
|
|||||||
showHotkeyBorder,
|
showHotkeyBorder,
|
||||||
openFileAction,
|
openFileAction,
|
||||||
isInfoPanelVisible: isVisible,
|
isInfoPanelVisible: isVisible,
|
||||||
showInfoPanel: setVisible,
|
infoPanelonItemClick: onItemClick,
|
||||||
setShowCurrentFolder,
|
setShowCurrentFolder,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -18,6 +18,7 @@ class ContextOptionsStore {
|
|||||||
uploadDataStore;
|
uploadDataStore;
|
||||||
versionHistoryStore;
|
versionHistoryStore;
|
||||||
settingsStore;
|
settingsStore;
|
||||||
|
infoPanelStore;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
authStore,
|
authStore,
|
||||||
@ -28,7 +29,8 @@ class ContextOptionsStore {
|
|||||||
treeFoldersStore,
|
treeFoldersStore,
|
||||||
uploadDataStore,
|
uploadDataStore,
|
||||||
versionHistoryStore,
|
versionHistoryStore,
|
||||||
settingsStore
|
settingsStore,
|
||||||
|
infoPanelStore
|
||||||
) {
|
) {
|
||||||
makeAutoObservable(this);
|
makeAutoObservable(this);
|
||||||
this.authStore = authStore;
|
this.authStore = authStore;
|
||||||
@ -40,6 +42,7 @@ class ContextOptionsStore {
|
|||||||
this.uploadDataStore = uploadDataStore;
|
this.uploadDataStore = uploadDataStore;
|
||||||
this.versionHistoryStore = versionHistoryStore;
|
this.versionHistoryStore = versionHistoryStore;
|
||||||
this.settingsStore = settingsStore;
|
this.settingsStore = settingsStore;
|
||||||
|
this.infoPanelStore = infoPanelStore;
|
||||||
}
|
}
|
||||||
|
|
||||||
onOpenFolder = (item) => {
|
onOpenFolder = (item) => {
|
||||||
@ -331,6 +334,11 @@ class ContextOptionsStore {
|
|||||||
return options;
|
return options;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
onToggleInfoPanel = () => {
|
||||||
|
const { toggleIsVisible } = this.infoPanelStore;
|
||||||
|
toggleIsVisible();
|
||||||
|
};
|
||||||
|
|
||||||
getFilesContextOptions = (item, t) => {
|
getFilesContextOptions = (item, t) => {
|
||||||
const { contextOptions } = item;
|
const { contextOptions } = item;
|
||||||
const isRootThirdPartyFolder =
|
const isRootThirdPartyFolder =
|
||||||
@ -437,6 +445,13 @@ class ContextOptionsStore {
|
|||||||
onClick: () => this.onOpenFolder(item),
|
onClick: () => this.onOpenFolder(item),
|
||||||
disabled: false,
|
disabled: false,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
key: "show-info",
|
||||||
|
label: t("InfoPanel:Info"),
|
||||||
|
icon: "/static/images/info.outline.react.svg",
|
||||||
|
onClick: () => this.onToggleInfoPanel(),
|
||||||
|
disabled: false,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
key: "fill-form",
|
key: "fill-form",
|
||||||
label: t("Common:FillFormButton"),
|
label: t("Common:FillFormButton"),
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import { isDesktop } from "@appserver/components/utils/device";
|
||||||
import { makeAutoObservable } from "mobx";
|
import { makeAutoObservable } from "mobx";
|
||||||
|
|
||||||
class InfoPanelStore {
|
class InfoPanelStore {
|
||||||
@ -12,6 +13,23 @@ class InfoPanelStore {
|
|||||||
this.showCurrentFolder = bool;
|
this.showCurrentFolder = bool;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
onItemClick = (checked = true) => {
|
||||||
|
if (localStorage.getItem("disableOpenOnFileClick")) return;
|
||||||
|
if (!this.isVisible && isDesktop()) {
|
||||||
|
this.showCurrentFolder = false;
|
||||||
|
if (checked) this.isVisible = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onHeaderCrossClick = () => {
|
||||||
|
localStorage.setItem("disableOpenOnFileClick", "true");
|
||||||
|
this.isVisible = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
revertHeaderCrossClick = () => {
|
||||||
|
localStorage.removeItem("disableOpenOnFileClick");
|
||||||
|
};
|
||||||
|
|
||||||
get showCurrentFolder() {
|
get showCurrentFolder() {
|
||||||
return this.showCurrenFolder;
|
return this.showCurrenFolder;
|
||||||
}
|
}
|
||||||
|
@ -78,7 +78,8 @@ const contextOptionsStore = new ContextOptionsStore(
|
|||||||
treeFoldersStore,
|
treeFoldersStore,
|
||||||
uploadDataStore,
|
uploadDataStore,
|
||||||
versionHistoryStore,
|
versionHistoryStore,
|
||||||
settingsStore
|
settingsStore,
|
||||||
|
infoPanelStore
|
||||||
);
|
);
|
||||||
|
|
||||||
const hotkeyStore = new HotkeyStore(
|
const hotkeyStore = new HotkeyStore(
|
||||||
@ -107,4 +108,4 @@ const stores = {
|
|||||||
infoPanelStore,
|
infoPanelStore,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default stores;
|
export default stores;
|
||||||
|
Loading…
Reference in New Issue
Block a user