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

Web: Client: JavascriptSDK: translations were corrected

Browse Source
This commit is contained in:
Vladimir Khvan 2024-03-04 19:13:27 +05:00
parent 67a3b35063
commit 59eb4ec57c
9 changed files with 80 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
packages/client/public/locales/en/JavascriptSdk.json
View File

@ -13,19 +13,20 @@
"Chat": "Chat",
"Code": "Code to insert",
"CopyWindowCode": "Copy window embed code",
"CreateSampleHeader": "Create sample DocSpace embed",
"CSPDescription": "To safely embed DocSpace as an iframe in a website, add its URL to your allow list.",
"CSPHeader": "Embed DocSpace as iframe",
"CreateSampleHeader": "Select a mode for embedding your DocSpace",
"CSPDescription": "To start the embedding process, add the DocSpace URL to the allow list.",
"CSPHeader": "Enter the address of DocSpace to embed",
"CSPHelp": "This setting is a security mechanism that can be used to protect against content injection attacks. The CSP describes secure resource download sources. Downloading from resources not included in the `white list` is blocked. Specify the domains (together with the protocol) with which it will work.",
"CSPInputPlaceholder": "Enter URL like this: https://example.com",
"CSPUrlHelp": "Enter the DocSpace domain name without URL paths or additional characters.",
"CustomizingDisplay": "Customizing the display",
"DataDisplay": "Data display settings",
"DefaultColumnsOption": "Default (Quantity depends on screen width)",
"Descending": "Descending",
"DisplayColumns": "Displaying columns in a file row",
"DocspaceDescription": "Embed the whole DocSpace to allow users to interact with all rooms, files, and settings.",
"Editor": "Editor",
"EditorDescription": "Allows you to open the SDK as a document editor for editing by specifying the id parameter for a file.",
"EditorPresetDescription": "This mode allows you to open the SDK as a document editor for editing by specifying the id parameter for a file.",
"EditorDescription": "Embed an editor to allow users to edit a file from the corresponding room.",
"ElementCalledAfterClicking": "The element will be called after clicking",
"ElementItself": "The element itself",
"EmbedCodeSuccessfullyCopied": "Embed code successfully copied to clipboard",
@ -37,8 +38,7 @@
"FeedbackAndSupport": "Feedback&Support",
"FileId": "File ID",
"FileSelector": "File selector",
"FileSelectorDescription": "Opens the file selector and allows you to select a file from a list of available files.",
"FileSelectorPresetDescription": "Use this mode to display the file selector. It allows selecting a file from the list of the available ones.",
"FileSelectorDescription": "Embed a file selector to allow users to access any file from the list of the available ones.",
"FilesSearchDescription": "File search within the opened folder/room.",
"FileTypeDisplay": "File type display",
"Filter": "Search, Filter and Sort",
@ -46,16 +46,15 @@
"GetCode": "Get code to insert",
"Header": "Header",
"HeaderDescription": "You can disable header in the mobile version to limit access to the DocSpace sections (just like disabling the left menu in the desktop version).",
"InitializeSDK": "Initialize the SDK in the following modes",
"InitializeSDK": "Select one of the suggested modes or use Custom to configure all the parameters manually.",
"InLeftPanel": "in the left panel",
"InterfaceElements": "Interface elements",
"ItemsCount": "Items count on one page",
"ItemsCountDescription": "You can specify the number of files / folders displayed on one page, as well as specify which page to start displaying",
"JavascriptSdk": "Javascript SDK",
"MainElementParameter": "Main element parameter",
"Manager": "Manager",
"ManagerDescription": "Displays a list of entities depending on the specified rootPath. It allows you to create rooms, folders, and files and work with them.",
"ManagerPresetDescription": "Use this mode to display a list of entities depending on the specified rootPath. It allows creating and working with rooms, folders and files.",
"Custom": "Custom",
"CustomDescription": "Manually configure the parameters for embedding your DocSpace.",
"ManagerSearchBlockDescription": "You can disable the search, filter and sort options.",
"ManagerTitleDescription": "You can disable the title of the current section/room/folder.",
"Menu": "Left menu",
@ -67,12 +66,11 @@
"RoomOrFolder": "Room or Folder",
"RoomOrFolderDescription": "You can select the section, room or folder you want to display",
"RoomSelector": "Room selector",
"RoomSelectorDescription": "Opens the room selector and allows you to select a room from a list of the available rooms.",
"RoomSelectorPresetDescription": "Use this mode to display the room selector. It allows selecting a room from the list of the available ones.",
"RoomSelectorDescription": "Embed a room selector to allow users to access any room from the list of the available ones. ",
"RoomTypeDisplay": "Room type display",
"Rotate": "Rotate",
"Scale": "Scale",
"SDKDescription": "Using JavaScript SDK, you can embed one of the available ONLYOFFICE DocSpace modes into your web interface as an iframe (file manager, room or file selector, editor and viewer). Here, you can find settings for creating a sample iframe using modes and configuring CSP. To use the complete SDK, please refer to the ",
"SDKDescription": "JavaScript SDK allows you to embed the whole DocSpace or its part into your web interface. Select ready-to-use modes with the pre-defined parameters or a custom one to configure it manually. To learn more about SDK, refer to the ",
"SearchBlock": "Search block",
"SearchTerm": "Search term",
"SelectButtonText": "Select Button text",
@ -85,16 +83,13 @@
"SetItUp": "Set it up",
"SettingUpColumns": "Setting up Columns",
"SettingUpColumnsDescription": "You can disable the ability for users to manage and customize file information columns in list view.",
"SetUp": "SET UP",
"SimpleRoom": "Simple Room",
"SimpleRoomDescription": "Opens the room selector and allows you to select a room from a list of the available rooms.",
"SimpleRoomPresetDescription": "Use this mode to display a list of entities depending on the specified rootPath. It allows creating and working with rooms, folders and files.",
"SetUp": "Start setting up",
"PublicRoomDescription": "Embed a public room to allow users to view all the documents stored there without registration.",
"SortOrder": "Sort order",
"Subtitle": "Subtitle",
"SubtitleDescription": "Subtitle with additional comments or descriptions for the current directory.",
"TabPlugins": "Tab Plugins",
"Title": "Navigate and Title",
"Viewer": "Viewer",
"ViewerDescription": "Allows you to open the SDK as a document editor for viewing by specifying the id parameter for a file.",
"ViewerPresetDescription": "Allows you to open the SDK as a document editor for viewing by specifying the id parameter for a file."
"ViewerDescription": "Embed a viewer to allow users to open a file for viewing from the corresponding room."
}

12
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/index.js
View File

@ -101,14 +101,14 @@ const PortalIntegration = (props) => {
const presetsData = [
{
title: t("Common:Room"),
description: t("SimpleRoomDescription"),
title: "DocSpace",
description: t("DocspaceDescription"),
image: theme.isBase ? DocspaceImg : DocspaceImgDark,
handleOnClick: navigateToSimpleRoom,
},
{
title: t("Common:Room"),
description: t("SimpleRoomDescription"),
title: t("Files:PublicRoom"),
description: t("PublicRoomDescription"),
image: theme.isBase ? PublicRoomImg : PublicRoomImgDark,
handleOnClick: navigateToSimpleRoom,
},
@ -137,8 +137,8 @@ const PortalIntegration = (props) => {
handleOnClick: navigateToFileSelector,
},
{
title: t("Manager"),
description: t("ManagerDescription"),
title: t("Custom"),
description: t("CustomDescription"),
image: theme.isBase ? CustomImg : CustomImgDark,
handleOnClick: navigateToManager,
},

2
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Editor.js
View File

@ -202,7 +202,7 @@ const Editor = (props) => {
return (
<SDKContainer>
<CategoryDescription>
<Text className="sdk-description">{t("EditorPresetDescription")}</Text>
<Text className="sdk-description">{t("EditorDescription")}</Text>
</CategoryDescription>
<CategoryHeader>{t("CreateSampleHeader")}</CategoryHeader>
<Container>

2
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/FileSelector.js
View File

@ -385,7 +385,7 @@ const FileSelector = (props) => {
return (
<SDKContainer>
<CategoryDescription>
<Text className="sdk-description">{t("FileSelectorPresetDescription")}</Text>
<Text className="sdk-description">{t("FileSelectorDescription")}</Text>
</CategoryDescription>
<CategoryHeader>{t("CreateSampleHeader")}</CategoryHeader>
<Container>

2
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js
View File

@ -668,7 +668,7 @@ const Manager = (props) => {
return (
<SDKContainer>
<CategoryDescription>
<Text className="sdk-description">{t("ManagerPresetDescription")}</Text>
<Text className="sdk-description">{t("CustomDescription")}</Text>
</CategoryDescription>
<CategoryHeader>{t("CreateSampleHeader")}</CategoryHeader>
<Container>

2
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/RoomSelector.js
View File

@ -291,7 +291,7 @@ const RoomSelector = (props) => {
return (
<SDKContainer>
<CategoryDescription>
<Text className="sdk-description">{t("RoomSelectorPresetDescription")}</Text>
<Text className="sdk-description">{t("RoomSelectorDescription")}</Text>
</CategoryDescription>
<CategoryHeader>{t("CreateSampleHeader")}</CategoryHeader>
<Container>

40
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/SimpleRoom.js
View File

@ -56,9 +56,13 @@ const SimpleRoom = (props) => {
const [widthDimension, setWidthDimension] = useState(dataDimensions[0]);
const [heightDimension, setHeightDimension] = useState(dataDimensions[1]);
const [width, setWidth] = useState("100");
const [height, setHeight] = useState(isTablet() ? "400" : isMobile() ? "206" : "600");
const [height, setHeight] = useState(
isTablet() ? "400" : isMobile() ? "206" : "600",
);
const [isGetCodeDialogOpened, setIsGetCodeDialogOpened] = useState(false);
const [showPreview, setShowPreview] = useState(window.innerWidth > showPreviewThreshold);
const [showPreview, setShowPreview] = useState(
window.innerWidth > showPreviewThreshold,
);
const [sharedLinks, setSharedLinks] = useState(null);
const [config, setConfig] = useState({
@ -100,7 +104,9 @@ const SimpleRoom = (props) => {
const params = objectToGetParams(config);
loadScript(`${scriptUrl}${params}`, "integration", () => window.DocSpace.SDK.initFrame(config));
loadScript(`${scriptUrl}${params}`, "integration", () =>
window.DocSpace.SDK.initFrame(config),
);
}, 500);
useEffect(() => {
@ -193,7 +199,8 @@ const SimpleRoom = (props) => {
const onResize = () => {
const isEnoughWidthForPreview = window.innerWidth > showPreviewThreshold;
if (isEnoughWidthForPreview !== showPreview) setShowPreview(isEnoughWidthForPreview);
if (isEnoughWidthForPreview !== showPreview)
setShowPreview(isEnoughWidthForPreview);
};
useEffect(() => {
@ -227,7 +234,9 @@ const SimpleRoom = (props) => {
const code = (
<CodeWrapper>
<CategorySubHeader className="copy-window-code">{t("CopyWindowCode")}</CategorySubHeader>
<CategorySubHeader className="copy-window-code">
{t("CopyWindowCode")}
</CategorySubHeader>
<Textarea value={codeBlock} heightTextArea={153} />
</CodeWrapper>
);
@ -248,7 +257,7 @@ const SimpleRoom = (props) => {
return (
<SDKContainer>
<CategoryDescription>
<Text className="sdk-description">{t("SimpleRoomPresetDescription")}</Text>
<Text className="sdk-description">{t("PublicRoomDescription")}</Text>
</CategoryDescription>
<CategoryHeader>{t("CreateSampleHeader")}</CategoryHeader>
<Container>
@ -270,22 +279,33 @@ const SimpleRoom = (props) => {
<HelpButton
offsetRight={0}
size={12}
tooltipContent={<Text fontSize="12px">{t("RoomOrFolderDescription")}</Text>}
tooltipContent={
<Text fontSize="12px">{t("RoomOrFolderDescription")}</Text>
}
/>
</LabelGroup>
<FilesSelectorInputWrapper>
<FilesSelectorInput onSelectFolder={onChangeFolderId} isSelect isRoomsOnly />
<FilesSelectorInput
onSelectFolder={onChangeFolderId}
isSelect
isRoomsOnly
/>
</FilesSelectorInputWrapper>
</ControlsGroup>
{sharedLinks && (
<ControlsGroup>
<LabelGroup>
<Label className="label" text={t("SharingPanel:ExternalLink")} />
<Label
className="label"
text={t("SharingPanel:ExternalLink")}
/>
<HelpButton
offsetRight={0}
size={12}
tooltipContent={
<Text fontSize="12px">{t("CreateEditRoomDialog:PublicRoomDescription")}</Text>
<Text fontSize="12px">
{t("CreateEditRoomDialog:PublicRoomDescription")}
</Text>
}
/>
</LabelGroup>

27
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Viewer.js
View File

@ -60,7 +60,9 @@ const Viewer = (props) => {
const [width, setWidth] = useState("100");
const [height, setHeight] = useState("100");
const [isGetCodeDialogOpened, setIsGetCodeDialogOpened] = useState(false);
const [showPreview, setShowPreview] = useState(window.innerWidth > showPreviewThreshold);
const [showPreview, setShowPreview] = useState(
window.innerWidth > showPreviewThreshold,
);
const [config, setConfig] = useState({
mode: "viewer",
@ -87,7 +89,9 @@ const Viewer = (props) => {
const params = objectToGetParams(config);
loadScript(`${scriptUrl}${params}`, "integration", () => window.DocSpace.SDK.initFrame(config));
loadScript(`${scriptUrl}${params}`, "integration", () =>
window.DocSpace.SDK.initFrame(config),
);
}, 500);
useEffect(() => {
@ -149,7 +153,8 @@ const Viewer = (props) => {
const onResize = () => {
const isEnoughWidthForPreview = window.innerWidth > showPreviewThreshold;
if (isEnoughWidthForPreview !== showPreview) setShowPreview(isEnoughWidthForPreview);
if (isEnoughWidthForPreview !== showPreview)
setShowPreview(isEnoughWidthForPreview);
};
useEffect(() => {
@ -183,7 +188,9 @@ const Viewer = (props) => {
const code = (
<CodeWrapper>
<CategorySubHeader className="copy-window-code">{t("CopyWindowCode")}</CategorySubHeader>
<CategorySubHeader className="copy-window-code">
{t("CopyWindowCode")}
</CategorySubHeader>
<Textarea value={codeBlock} heightTextArea={153} />
</CodeWrapper>
);
@ -204,7 +211,7 @@ const Viewer = (props) => {
return (
<SDKContainer>
<CategoryDescription>
<Text className="sdk-description">{t("ViewerPresetDescription")}</Text>
<Text className="sdk-description">{t("ViewerDescription")}</Text>
</CategoryDescription>
<CategoryHeader>{t("CreateSampleHeader")}</CategoryHeader>
<Container>
@ -389,7 +396,11 @@ export default inject(({ authStore, settingsStore }) => {
setDocumentTitle,
};
})(
withTranslation(["JavascriptSdk", "Files", "EmbeddingPanel", "Common", "CreateEditRoomDialog"])(
observer(Viewer),
),
withTranslation([
"JavascriptSdk",
"Files",
"EmbeddingPanel",
"Common",
"CreateEditRoomDialog",
])(observer(Viewer)),
);

7
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/csp.js
View File

@ -20,11 +20,12 @@ const CategoryHeader = styled.div`
`;
const Container = styled.div`
margin-bottom: 16px;
margin-bottom: 4px;
&.description-holder {
display: block;
color: ${(props) => props.theme.sdkPresets.secondaryColor};
margin-bottom: 16px;
}
&.description-holder > div {
@ -49,6 +50,7 @@ const ChipsContainer = styled.div`
display: flex;
align-items: center;
gap: 8px 4px;
margin-top: 8px;
margin-bottom: 16px;
flex-wrap: wrap;
`;
@ -132,6 +134,9 @@ const CSP = ({ t, cspDomains, getCSPSettings, setCSPSettings }) => {
/>
<SelectorAddButton onClick={addDomain} />
</Container>
<Text lineHeight="20px" color="#A3A9AE">
{t("CSPUrlHelp")}
</Text>
<ChipsContainer>{getChips(cspDomains)}</ChipsContainer>
</>
);