IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web:Client:Plugins: fix plugin dialog

Browse Source
This commit is contained in:
Timofey Boyko 2023-09-19 08:58:48 +03:00
parent 9b261b72d6
commit 91ae0883e9
11 changed files with 270 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/client/public/locales/en/WebPlugins.json
View File

@ -2,5 +2,7 @@
"Description": "You can embed software modules to extend the functionality of DocSpace. Click download plugin and select a file in zip archive format.",
"Plugins": "Plugins",
"UploadPlugin": "Upload plugin",
"Metadata": "Metadata"
"Metadata": "Metadata",
"NeedSettings": "Need enter settings",
"NotNeedSettings": "Not need enter settings"
}

33
packages/client/src/components/Article/MainButton/index.js
View File

@ -12,6 +12,7 @@ import PersonManagerReactSvgUrl from "PUBLIC_DIR/images/person.manager.react.svg
import PersonReactSvgUrl from "PUBLIC_DIR/images/person.react.svg?url";
import PersonUserReactSvgUrl from "PUBLIC_DIR/images/person.user.react.svg?url";
import InviteAgainReactSvgUrl from "PUBLIC_DIR/images/invite.again.react.svg?url";
import PluginMoreReactSvgUrl from "PUBLIC_DIR/images/plugin.more.react.svg?url";
import React from "react";
import { isMobileOnly } from "react-device-detect";
@ -253,6 +254,17 @@ const ArticleMainButtonContent = (props) => {
React.useEffect(() => {
if (isRoomsFolder || isSettingsPage) return;
const pluginItems = [];
if (mainButtonItemsList && enablePlugins && !isAccountsPage) {
mainButtonItemsList.forEach((option) => {
pluginItems.push({
key: option.key,
...option.value,
});
});
}
const formActions = [
{
id: "actions_template",
@ -410,6 +422,18 @@ const ArticleMainButtonContent = (props) => {
const menuModel = [...actions];
if (pluginItems.length > 0) {
menuModel.push({
id: "actions_more-plugins",
className: "main-button_drop-down",
icon: PluginMoreReactSvgUrl,
label: t("Common:More"),
disabled: false,
key: "more-plugins",
items: pluginItems,
});
}
menuModel.push({
isSeparator: true,
key: "separator",
@ -418,15 +442,6 @@ const ArticleMainButtonContent = (props) => {
menuModel.push(...uploadActions);
setUploadActions(uploadActions);
if (mainButtonItemsList && enablePlugins && !isAccountsPage) {
mainButtonItemsList.forEach((option) => {
menuModel.splice(option.value.position, 0, {
key: option.key,
...option.value,
});
});
}
setModel(menuModel);
setActions(actions);
}, [

13
packages/client/src/components/dialogs/PluginDialog/index.js
View File

@ -110,13 +110,12 @@ const PluginDialog = ({
}, []);
const onLoadAction = React.useCallback(async () => {
if (onLoad) {
const res = await onLoad();
setDialogHeaderProps(res.newDialogHeader);
setDialogBodyProps(res.newDialogBody);
setDialogFooterProps(res.newDialogFooter);
}
// if (onLoad) {
// const res = await onLoad();
// setDialogHeaderProps(res.newDialogHeader);
// setDialogBodyProps(res.newDialogBody);
// setDialogFooterProps(res.newDialogFooter);
// }
}, [onLoad]);
React.useEffect(() => {

4
packages/client/src/components/dialogs/SettingsPluginDialog/index.js
View File

@ -25,9 +25,7 @@ const SettingsPluginDialog = ({
...rest
}) => {
console.log(rest);
const { t } = useTranslation("WebPlugins", "Common");
const { t } = useTranslation(["WebPlugins", "Common", "Files", "People"]);
const [customSettingsProps, setCustomSettingsProps] =
React.useState(settings);

235
packages/client/src/components/dialogs/SettingsPluginDialog/sub-components/Info.js
View File

@ -1,8 +1,14 @@
import React from "react";
import styled from "styled-components";
import { getCookie } from "@docspace/common/utils";
import { LANGUAGE } from "@docspace/common/constants";
import Text from "@docspace/components/text";
import Link from "@docspace/components/link";
import getCorrectDate from "@docspace/components/utils/getCorrectDate";
import { PluginStatus } from "SRC_DIR/helpers/plugins/constants";
const StyledContainer = styled.div`
width: 100%;
@ -31,7 +37,14 @@ const StyledInfo = styled.div`
`;
const Info = ({ t, plugin }) => {
console.log(plugin);
const locale = getCookie(LANGUAGE) || "en";
const uploadDate = plugin.createOn && getCorrectDate(locale, plugin.createOn);
const pluginStatus =
plugin.status === PluginStatus.active
? t("NotNeedSettings")
: t("NeedSettings");
return (
<StyledContainer>
<StyledSeparator />
@ -39,6 +52,94 @@ const Info = ({ t, plugin }) => {
{t("Metadata")}
</Text>
<StyledInfo>
{plugin.author && (
<>
<Text
fontSize={"13px"}
fontWeight={400}
lineHeight={"20px"}
noSelect
truncate
>
{t("Files:ByAuthor")}
</Text>
<Text
fontSize={"13px"}
fontWeight={600}
lineHeight={"20px"}
noSelect
>
{plugin.author}
</Text>
</>
)}
{plugin.version && (
<>
<Text
fontSize={"13px"}
fontWeight={400}
lineHeight={"20px"}
noSelect
truncate
>
{t("Common:Version")}
</Text>
<Text
fontSize={"13px"}
fontWeight={600}
lineHeight={"20px"}
noSelect
>
{plugin.version}
</Text>
</>
)}
{plugin.createBy && (
<>
<Text
fontSize={"13px"}
fontWeight={400}
lineHeight={"20px"}
noSelect
truncate
>
{t("Common:Uploader")}
</Text>
<Text
fontSize={"13px"}
fontWeight={600}
lineHeight={"20px"}
noSelect
>
{plugin.createBy}
</Text>
</>
)}
{uploadDate && (
<>
<Text
fontSize={"13px"}
fontWeight={400}
lineHeight={"20px"}
noSelect
truncate
>
{t("Common:UploadDate")}
</Text>
<Text
fontSize={"13px"}
fontWeight={600}
lineHeight={"20px"}
noSelect
>
{uploadDate}
</Text>
</>
)}
<Text
fontSize={"13px"}
fontWeight={400}
@ -46,92 +147,58 @@ const Info = ({ t, plugin }) => {
noSelect
truncate
>
Author
{t("People:UserStatus")}
</Text>
<Text fontSize={"13px"} fontWeight={600} lineHeight={"20px"} noSelect>
{plugin?.author}
</Text>
<Text
fontSize={"13px"}
fontWeight={400}
lineHeight={"20px"}
noSelect
truncate
>
Version
</Text>
<Text fontSize={"13px"} fontWeight={600} lineHeight={"20px"} noSelect>
{plugin?.version}
</Text>
<Text
fontSize={"13px"}
fontWeight={400}
lineHeight={"20px"}
noSelect
truncate
>
Uploader
</Text>
<Text fontSize={"13px"} fontWeight={600} lineHeight={"20px"} noSelect>
{plugin?.createBy}
</Text>
<Text
fontSize={"13px"}
fontWeight={400}
lineHeight={"20px"}
noSelect
truncate
>
Upload date
</Text>
<Text fontSize={"13px"} fontWeight={600} lineHeight={"20px"} noSelect>
{plugin?.createOn}
</Text>
<Text
fontSize={"13px"}
fontWeight={400}
lineHeight={"20px"}
noSelect
truncate
>
Status
</Text>
<Text fontSize={"13px"} fontWeight={600} lineHeight={"20px"} noSelect>
Not need enter settings
</Text>
<Text
fontSize={"13px"}
fontWeight={400}
lineHeight={"20px"}
noSelect
truncate
>
Homepage
</Text>
<Link
fontSize={"13px"}
fontWeight={600}
lineHeight={"20px"}
type={"page"}
href={plugin?.homePage}
target={"_blank"}
noSelect
isHovered
>
{plugin?.homePage}
</Link>
<Text
fontSize={"13px"}
fontWeight={400}
lineHeight={"20px"}
noSelect
truncate
>
Description
</Text>
<Text fontSize={"13px"} fontWeight={600} lineHeight={"20px"} noSelect>
{plugin?.description}
{pluginStatus}
</Text>
{plugin.homePage && (
<>
<Text
fontSize={"13px"}
fontWeight={400}
lineHeight={"20px"}
noSelect
truncate
>
{t("Common:Homepage")}
</Text>
<Link
fontSize={"13px"}
fontWeight={600}
lineHeight={"20px"}
type={"page"}
href={plugin?.homePage}
target={"_blank"}
noSelect
isHovered
>
{plugin.homePage}
</Link>
</>
)}
{plugin.description && (
<>
<Text
fontSize={"13px"}
fontWeight={400}
lineHeight={"20px"}
noSelect
truncate
>
{t("Common:Description")}
</Text>
<Text
fontSize={"13px"}
fontWeight={600}
lineHeight={"20px"}
noSelect
>
{plugin.description}
</Text>
</>
)}
</StyledInfo>
</StyledContainer>
);

5
packages/client/src/helpers/plugins/WrappedComponent.js
View File

@ -217,6 +217,7 @@ const ComponentPure = ({
setSettingsModalRequestRunning(true);
}
}
const message = await elementProps.onClick();
messageActions(
@ -302,7 +303,9 @@ const ComponentPure = ({
}
case PluginComponents.iFrame: {
return <iframe {...elementProps}></iframe>;
return (
<iframe {...elementProps} style={{ minHeight: "100%" }}></iframe>
);
}
case PluginComponents.img: {

38
packages/client/src/pages/Home/MediaViewer/index.js
View File

@ -257,23 +257,6 @@ export default inject(
setIsSectionFilterLoading(param);
};
const { contextMenuItemsList, getContextMenuKeysByType } = pluginStore;
const pluginContextMenuKeys = [
...(getContextMenuKeysByType() || []),
...(getContextMenuKeysByType(PluginFileType.Image) || []),
...(getContextMenuKeysByType(PluginFileType.Video) || []),
];
const pluginContextMenuItems =
contextMenuItemsList?.filter((i) => {
if (pluginContextMenuKeys.includes(i.key)) {
return true;
}
return false;
}) || [];
const {
files,
userAccess,
@ -323,6 +306,27 @@ export default inject(
onCopyLink,
} = contextOptionsStore;
const { contextMenuItemsList, getContextMenuKeysByType } = pluginStore;
const item = playlist.find((p) => p.fileId === currentMediaFileId);
const fileExst = item?.fileExst;
const pluginContextMenuKeys = [
...(getContextMenuKeysByType() || []),
...(getContextMenuKeysByType(PluginFileType.Image, fileExst) || []),
...(getContextMenuKeysByType(PluginFileType.Video, fileExst) || []),
];
const pluginContextMenuItems =
contextMenuItemsList?.filter((i) => {
if (pluginContextMenuKeys.includes(i.key)) {
return true;
}
return false;
}) || [];
return {
files,
playlist,

2
packages/client/src/store/ContextOptionsStore.js
View File

@ -999,8 +999,6 @@ class ContextOptionsStore {
});
}
console.log(pluginItems);
const optionsModel = [
{
id: "option_select",

49
packages/client/src/store/PluginStore.js
View File

@ -11,6 +11,7 @@ import {
PluginScopes,
PluginUsersType,
PluginDevices,
PluginStatus,
} from "SRC_DIR/helpers/plugins/constants";
import { getPluginUrl, messageActions } from "SRC_DIR/helpers/plugins/utils";
@ -86,7 +87,40 @@ class PluginStore {
const pluginIdx = this.plugins.findIndex((p) => p.id === id);
if (pluginIdx !== -1) {
if (this.plugins[pluginIdx].status === newStatus) return;
this.plugins[pluginIdx].status = newStatus;
if (
newStatus === PluginStatus.active &&
this.plugins[pluginIdx].enabled
) {
if (this.plugins[pluginIdx].scopes.includes(PluginScopes.ContextMenu)) {
this.updateContextMenuItems(this.plugins[pluginIdx].id);
}
if (this.plugins[pluginIdx].scopes.includes(PluginScopes.InfoPanel)) {
this.updateInfoPanelItems(this.plugins[pluginIdx].id);
}
if (this.plugins[pluginIdx].scopes.includes(PluginScopes.MainButton)) {
this.updateMainButtonItems(this.plugins[pluginIdx].id);
}
if (this.plugins[pluginIdx].scopes.includes(PluginScopes.ProfileMenu)) {
this.updateProfileMenuItems(this.plugins[pluginIdx].id);
}
if (
this.plugins[pluginIdx].scopes.includes(PluginScopes.EventListener)
) {
this.updateEventListenerItems(this.plugins[pluginIdx].id);
}
if (this.plugins[pluginIdx].scopes.includes(PluginScopes.File)) {
this.updateFileItems(this.plugins[pluginIdx].id);
}
}
}
};
@ -178,7 +212,7 @@ class PluginStore {
frameDoc.body.appendChild(script);
};
installPlugin = (plugin, addToList = true) => {
installPlugin = async (plugin, addToList = true) => {
if (addToList) {
const idx = this.plugins.findIndex((p) => p.id === plugin.id);
@ -196,9 +230,13 @@ class PluginStore {
}
if (plugin.onLoadCallback) {
plugin.onLoadCallback();
await plugin.onLoadCallback();
this.updatePluginStatus(plugin.id);
}
if (plugin.status === PluginStatus.hide) return;
if (plugin.scopes.includes(PluginScopes.ContextMenu)) {
this.updateContextMenuItems(plugin.id);
}
@ -377,6 +415,10 @@ class PluginStore {
if (!item.fileType) return;
if (item.fileType.includes(PluginFileType.Image)) {
const correctFileExt = item.fileExt
? item.fileExt.includes(fileExst)
: true;
const correctUserType = item.usersType
? item.usersType.includes(userRole)
: true;
@ -385,7 +427,8 @@ class PluginStore {
? item.devices.includes(device)
: true;
if (correctUserType && correctDevice) keys.push(item.key);
if (correctUserType && correctDevice && correctFileExt)
keys.push(item.key);
}
});
break;

10
public/images/plugin.more.react.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_260_50584)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 6C15.1046 6 16 6.89543 16 8C16 9.10457 15.1046 10 14 10C12.8954 10 12 9.10457 12 8C12 6.89543 12.8954 6 14 6ZM8 6C9.10457 6 10 6.89543 10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6ZM4 8C4 6.89543 3.10457 6 2 6C0.895431 6 -3.91405e-08 6.89543 -8.74228e-08 8C-1.35705e-07 9.10457 0.89543 10 2 10C3.10457 10 4 9.10457 4 8Z" fill="#333333"/>
</g>
<defs>
<clipPath id="clip0_260_50584">
<rect width="16" height="16" fill="white" transform="translate(16) rotate(90)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 712 B

4
public/locales/en/Common.json
View File

@ -83,6 +83,7 @@
"Culture_zh-CN": "中文（简体，中国）",
"Date": "Date",
"Delete": "Delete",
"Description": "Description",
"DescriptionOfTheEveryoneRole": "The form is available for filling out by all participants of this room.",
"DescriptionOfTheRoleQueue": "Each form filled out by users from the first role will go in turn to the next users listed below.",
"Disconnect": "Disconnect",
@ -125,6 +126,7 @@
"HasFullAccess": "He has full access to the room",
"HelpCenter": "Help Center",
"HideArticleMenu": "Hide menu",
"Homepage": "Homepage",
"Hotkeys": "Hotkeys",
"Image": "Image",
"IncorrectDomain": "Incorrect domain",
@ -276,6 +278,8 @@
"UnexpectedError": "An unexpected error occurred. Try again later or contact support.",
"Unknown": "Unknown",
"UnknownError": "Unknown error",
"Uploader": "Uploader",
"UploadDate": "Upload date",
"UseLikePro": "Use ONLYOFFICE like a pro",
"User": "User",
"UsersInvited": "Users invited",