diff --git a/package.json b/package.json index eee18e34f9..f15dbfe41d 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "deploy:personal": "shx rm -rf build/deploy/products && shx rm -rf build/deploy/public && shx rm -rf build/deploy/studio && lerna run deploy --parallel --scope {@appserver/studio,@appserver/people,@appserver/files,@appserver/editor} && shx cp -r public build/deploy", "serve": "lerna run serve --parallel --ignore @appserver/common --ignore @appserver/components --ignore @appserver/browserslist-config-asc --ignore @appserver/debug-info", "start": "lerna run start --parallel --ignore @appserver/common --ignore @appserver/components --ignore @appserver/browserslist-config-asc --ignore @appserver/debug-info", + "start:personal": "lerna run start --parallel --scope {@appserver/studio,@appserver/people,@appserver/files,@appserver/editor}", "start-prod": "lerna run start-prod --parallel --ignore @appserver/common --ignore @appserver/components --ignore @appserver/browserslist-config-asc --ignore @appserver/debug-info", "storybook": "yarn workspace @appserver/components storybook", "storybook-build": "yarn workspace @appserver/components run storybook-build", diff --git a/packages/asc-web-common/components/Loaders/RectangleLoader/RectangleLoader.js b/packages/asc-web-common/components/Loaders/RectangleLoader/RectangleLoader.js index 3911f0827e..236f5e05d0 100644 --- a/packages/asc-web-common/components/Loaders/RectangleLoader/RectangleLoader.js +++ b/packages/asc-web-common/components/Loaders/RectangleLoader/RectangleLoader.js @@ -36,7 +36,7 @@ RectangleLoader.propTypes = { backgroundOpacity: PropTypes.number, foregroundOpacity: PropTypes.number, speed: PropTypes.number, - animate: PropTypes.bool, + animate: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]), }; RectangleLoader.defaultProps = { diff --git a/packages/asc-web-common/components/MediaViewer/MediaViewer.js b/packages/asc-web-common/components/MediaViewer/MediaViewer.js index da6c0a5b59..6af2caaffd 100644 --- a/packages/asc-web-common/components/MediaViewer/MediaViewer.js +++ b/packages/asc-web-common/components/MediaViewer/MediaViewer.js @@ -13,6 +13,7 @@ import equal from "fast-deep-equal/react"; import Hammer from "hammerjs"; import IconButton from "@appserver/components/icon-button"; import commonIconsStyles from "@appserver/components/utils/common-icons-style"; +import { isDesktop } from "react-device-detect"; const StyledVideoViewer = styled(VideoViewer)` z-index: 301; @@ -104,7 +105,7 @@ class MediaViewer extends React.Component { document.getElementsByClassName("videoViewerOverlay")[0] ); } - if (_this.hammer) { + if (_this.hammer && !isDesktop) { _this.hammer.on("swipeleft", _this.nextMedia); _this.hammer.on("swiperight", _this.prevMedia); } diff --git a/packages/asc-web-common/components/PageLayout/index.js b/packages/asc-web-common/components/PageLayout/index.js index d774b3d141..361ab75a86 100644 --- a/packages/asc-web-common/components/PageLayout/index.js +++ b/packages/asc-web-common/components/PageLayout/index.js @@ -394,7 +394,7 @@ class PageLayout extends React.Component { display: 'grid', paddingRight: '20px', }}> - + {sectionFilterContent ? sectionFilterContent.props.children : null} diff --git a/packages/asc-web-common/components/PageLayout/sub-components/section-body.js b/packages/asc-web-common/components/PageLayout/sub-components/section-body.js index e949687ecb..dfa82e09bf 100644 --- a/packages/asc-web-common/components/PageLayout/sub-components/section-body.js +++ b/packages/asc-web-common/components/PageLayout/sub-components/section-body.js @@ -10,22 +10,37 @@ import Scrollbar from "@appserver/components/scrollbar"; import DragAndDrop from "@appserver/components/drag-and-drop"; import { tablet } from "@appserver/components/utils/device"; +const paddingStyles = css` + padding: 17px 7px 16px 24px; + @media ${tablet} { + padding: 16px 0 16px 24px; + } +`; const commonStyles = css` flex-grow: 1; - height: 100%; + ${(props) => !props.withScroll && `height: 100%;`} border-left: none; -webkit-user-select: none; - .section-wrapper-content { - flex: 1 0 auto; - padding: 17px 7px 16px 24px; - outline: none; - ${(props) => props.viewAs == "tile" && "padding-right:0;"} + .section-wrapper { + ${(props) => + !props.withScroll && + `display: flex; height: 100%; box-sizing:border-box`}; + ${(props) => !props.withScroll && paddingStyles} + } - @media ${tablet} { - padding: 16px 0 16px 24px; - } + .section-wrapper-content { + ${paddingStyles} + flex: 1 0 auto; + + outline: none; + ${(props) => + props.viewAs == "tile" && + css` + padding-right: 0; + padding-left: 20px; + `} .section-wrapper { display: flex; @@ -48,7 +63,16 @@ const StyledSectionBody = styled.div` ` margin-left: -24px; - `} + `} + + .additional-scroll-height { + ${(props) => + !props.withScroll && + !props.pinned && + ` height: 64px; + +`} + } `; const StyledDropZoneBody = styled(DragAndDrop)` @@ -87,8 +111,9 @@ class SectionBody extends React.Component { // } componentDidMount() { + const { withScroll } = this.props; if (!this.props.autoFocus) return; - this.focusRef.current.focus(); + if (withScroll) this.focusRef.current.focus(); } componentWillUnmount() { @@ -176,10 +201,7 @@ class SectionBody extends React.Component { ) ) : ( -
- {children} - -
+
{children}
)} ); diff --git a/packages/asc-web-common/components/PageLayout/sub-components/section-filter.js b/packages/asc-web-common/components/PageLayout/sub-components/section-filter.js index ef14360b06..e3d5c9c2e7 100644 --- a/packages/asc-web-common/components/PageLayout/sub-components/section-filter.js +++ b/packages/asc-web-common/components/PageLayout/sub-components/section-filter.js @@ -1,11 +1,20 @@ import React from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import equal from "fast-deep-equal/react"; -import { tablet } from "@appserver/components/utils/device"; +import { tablet, desktop } from "@appserver/components/utils/device"; const StyledSectionFilter = styled.div` margin: 11px 24px 9px 0; + @media ${desktop} { + ${(props) => + (props.viewAs === "table" || props.viewAs === "tile") && + css` + margin-left: -4px; + margin-right: 20px; + `}; + } + @media ${tablet} { margin-left: -4px; } diff --git a/packages/asc-web-common/components/PageLayout/sub-components/section-header.js b/packages/asc-web-common/components/PageLayout/sub-components/section-header.js index c914d9f83c..ee90b531e5 100644 --- a/packages/asc-web-common/components/PageLayout/sub-components/section-header.js +++ b/packages/asc-web-common/components/PageLayout/sub-components/section-header.js @@ -25,7 +25,12 @@ const StyledSectionHeader = styled.div` } */ `} - + @media ${desktop} { + ${(props) => + (props.viewAs === "table" || props.viewAs === "tile") && + "margin-left: -4px"}; + } + @media ${tablet} { ${(props) => props.viewAs !== "tablet" && diff --git a/packages/asc-web-common/utils/firebase.js b/packages/asc-web-common/utils/firebase.js index b40b976030..19e67e939d 100644 --- a/packages/asc-web-common/utils/firebase.js +++ b/packages/asc-web-common/utils/firebase.js @@ -53,8 +53,8 @@ class FirebaseHelper { this.config["projectId"] && this.config["storageBucket"] && this.config["messagingSenderId"] && - this.config["appId"] && - this.config["measurementId"] + this.config["appId"] /*&& + this.config["measurementId"]*/ ); } diff --git a/packages/asc-web-components/aside/aside.js b/packages/asc-web-components/aside/aside.js index 3c7647b26d..8ff72d7bf5 100644 --- a/packages/asc-web-components/aside/aside.js +++ b/packages/asc-web-components/aside/aside.js @@ -13,6 +13,7 @@ const Aside = React.memo((props) => { zIndex, className, contentPaddingBottom, + withoutBodyScroll, } = props; return ( @@ -23,7 +24,11 @@ const Aside = React.memo((props) => { contentPaddingBottom={contentPaddingBottom} className={`${className} not-selectable aside`} > - {children} + {withoutBodyScroll ? ( + children + ) : ( + {children} + )} ); }); @@ -40,10 +45,12 @@ Aside.propTypes = { PropTypes.arrayOf(PropTypes.node), PropTypes.node, ]), + withoutBodyScroll: PropTypes.bool, }; Aside.defaultProps = { scale: false, zIndex: 400, + withoutBodyScroll: false, }; export default Aside; diff --git a/packages/asc-web-components/avatar-editor/sub-components/avatar-editor-body.js b/packages/asc-web-components/avatar-editor/sub-components/avatar-editor-body.js index f2da4ebea1..8648565a7e 100644 --- a/packages/asc-web-components/avatar-editor/sub-components/avatar-editor-body.js +++ b/packages/asc-web-components/avatar-editor/sub-components/avatar-editor-body.js @@ -311,7 +311,13 @@ class AvatarEditorBody extends React.Component { const desktopMode = isDesktop(); return ( - + {selectNewPhotoLabel} {" "} {desktopMode && orDropFileHereLabel} diff --git a/packages/asc-web-components/avatar/avatar.stories.js b/packages/asc-web-components/avatar/avatar.stories.js index 39ee1197d3..c565f59acb 100644 --- a/packages/asc-web-components/avatar/avatar.stories.js +++ b/packages/asc-web-components/avatar/avatar.stories.js @@ -27,5 +27,4 @@ Default.args = { source: "", userName: "", editing: false, - editLabel: "Edit photo", }; diff --git a/packages/asc-web-components/avatar/index.js b/packages/asc-web-components/avatar/index.js index d89e4132cd..efd5051b78 100644 --- a/packages/asc-web-components/avatar/index.js +++ b/packages/asc-web-components/avatar/index.js @@ -4,7 +4,6 @@ import styled from "styled-components"; import { GuestIcon, AdministratorIcon, OwnerIcon } from "./svg"; import { - EditLink, EmptyIcon, EditContainer, AvatarWrapper, @@ -13,7 +12,7 @@ import { StyledImage, StyledAvatar, } from "./styled-avatar"; -import Link from "../link"; +import IconButton from "../icon-button"; import commonIconsStyles from "../utils/common-icons-style"; const whiteColor = "#FFFFFF"; @@ -57,15 +56,7 @@ Initials.propTypes = { // eslint-disable-next-line react/display-name const Avatar = (props) => { //console.log("Avatar render"); - const { - size, - source, - userName, - role, - editing, - editLabel, - editAction, - } = props; + const { size, source, userName, role, editing, editAction } = props; const avatarContent = source ? ( @@ -83,21 +74,13 @@ const Avatar = (props) => { {avatarContent} {editing && size === "max" && ( - - - - {editLabel} - - + + )} {roleIcon} @@ -112,8 +95,6 @@ Avatar.propTypes = { role: PropTypes.oneOf(["owner", "admin", "guest", "user"]), /** The address of the image for an image avatar */ source: PropTypes.string, - /** Displays avatar edit layer */ - editLabel: PropTypes.string, userName: PropTypes.string, editing: PropTypes.bool, /** Function called when the avatar change button is pressed */ @@ -130,7 +111,6 @@ Avatar.defaultProps = { size: "medium", role: "", source: "", - editLabel: "Edit photo", userName: "", editing: false, }; diff --git a/packages/asc-web-components/avatar/styled-avatar.js b/packages/asc-web-components/avatar/styled-avatar.js index e6edc02676..30115ac9d7 100644 --- a/packages/asc-web-components/avatar/styled-avatar.js +++ b/packages/asc-web-components/avatar/styled-avatar.js @@ -5,23 +5,6 @@ import NoUserSelect from "../utils/commonStyles"; import { CameraIcon } from "./svg"; import commonIconsStyles from "../utils/common-icons-style"; - -const EditLink = styled.div` - padding-left: ${(props) => props.theme.avatar.editLink.paddingLeft}; - padding-right: ${(props) => props.theme.avatar.editLink.paddingRight}; - - a:hover { - border-bottom: ${(props) => props.theme.avatar.editLink.borderBottom}; - } - - span { - display: ${(props) => props.theme.avatar.editLink.display}; - max-width: ${(props) => props.theme.avatar.editLink.maxWidth}; - text-decoration: ${(props) => props.theme.avatar.editLink.textDecoration}; - } -`; -EditLink.defaultProps = { theme: Base }; - const EmptyIcon = styled(CameraIcon)` ${commonIconsStyles} border-radius: ${(props) => props.theme.avatar.image.borderRadius}; @@ -29,21 +12,17 @@ const EmptyIcon = styled(CameraIcon)` EmptyIcon.defaultProps = { theme: Base }; const EditContainer = styled.div` - box-sizing: ${(props) => props.theme.avatar.editContainer.boxSizing}; position: absolute; - width: ${(props) => props.theme.avatar.editContainer.width}; - height: ${(props) => props.theme.avatar.editContainer.height}; - top: ${(props) => props.theme.avatar.editContainer.top}; - left: ${(props) => props.theme.avatar.editContainer.left}; - transform: ${(props) => props.theme.avatar.editContainer.transform}; - padding: ${(props) => props.theme.avatar.editContainer.padding}; - text-align: ${(props) => props.theme.avatar.editContainer.textAlign}; - line-height: ${(props) => props.theme.avatar.editContainer.lineHeight}; + display: flex; + right: ${(props) => props.theme.avatar.editContainer.right}; + bottom: ${(props) => props.theme.avatar.editContainer.bottom}; + background-color: ${(props) => + props.theme.avatar.editContainer.backgroundColor}; border-radius: ${(props) => props.theme.avatar.editContainer.borderRadius}; - background: ${(props) => - props.gradient - ? props.theme.avatar.editContainer.linearGradient - : props.theme.avatar.editContainer.transparent}; + height: ${(props) => props.theme.avatar.editContainer.height}; + width: ${(props) => props.theme.avatar.editContainer.width}; + align-items: center; + justify-content: center; `; EditContainer.defaultProps = { theme: Base }; @@ -129,7 +108,6 @@ const StyledAvatar = styled.div` StyledAvatar.defaultProps = { theme: Base }; export { - EditLink, EmptyIcon, EditContainer, AvatarWrapper, diff --git a/packages/asc-web-components/context-menu/index.js b/packages/asc-web-components/context-menu/index.js index 5c296d08f2..79a50f9161 100644 --- a/packages/asc-web-components/context-menu/index.js +++ b/packages/asc-web-components/context-menu/index.js @@ -32,7 +32,7 @@ class ContextMenuSub extends Component { }); } - onItemClick(e, item) { + onItemClick(item, e) { if (item.disabled) { e.preventDefault(); return; @@ -157,13 +157,16 @@ class ContextMenuSub extends Component { const dataKeys = Object.fromEntries( Object.entries(item).filter((el) => el[0].indexOf("data-") === 0) ); + const onClick = (e) => { + this.onItemClick(item, e); + }; let content = ( this.onItemClick(event, item, index)} + onClick={onClick} role="menuitem" > {icon} @@ -174,7 +177,7 @@ class ContextMenuSub extends Component { if (item.template) { const defaultContentOptions = { - onClick: (event) => this.onItemClick(event, item, index), + onClick, className: linkClassName, labelClassName: "p-menuitem-text", iconClassName, diff --git a/packages/asc-web-components/drop-down/index.js b/packages/asc-web-components/drop-down/index.js index dd3cd9ec4a..aadb0adec2 100644 --- a/packages/asc-web-components/drop-down/index.js +++ b/packages/asc-web-components/drop-down/index.js @@ -80,7 +80,7 @@ class DropDown extends React.PureComponent { const left = rects.left < 0 && rects.width < container.width; const right = rects.width && - rects.left < 250 && + rects.left < (rects.width || 250) && rects.left > rects.width && rects.width < container.width; const top = rects.bottom > container.height && rects.top > rects.height; diff --git a/packages/asc-web-components/scrollbar/custom-scrollbars-virtual-list.js b/packages/asc-web-components/scrollbar/custom-scrollbars-virtual-list.js index a90fdbe225..3a66c08fce 100644 --- a/packages/asc-web-components/scrollbar/custom-scrollbars-virtual-list.js +++ b/packages/asc-web-components/scrollbar/custom-scrollbars-virtual-list.js @@ -2,7 +2,7 @@ import React from "react"; import Scrollbar from "../scrollbar"; -class CustomScrollbars extends React.Component { +export class CustomScrollbars extends React.Component { refSetter = (scrollbarsRef, forwardedRef) => { if (scrollbarsRef) { forwardedRef(scrollbarsRef.view); @@ -32,6 +32,7 @@ class CustomScrollbars extends React.Component { className={className} > {children} +
); } diff --git a/packages/asc-web-components/scrollbar/styled-scrollbar.js b/packages/asc-web-components/scrollbar/styled-scrollbar.js index 4b3d2aea78..287aaed1fb 100644 --- a/packages/asc-web-components/scrollbar/styled-scrollbar.js +++ b/packages/asc-web-components/scrollbar/styled-scrollbar.js @@ -16,6 +16,11 @@ const StyledScrollbar = styled(Scrollbars)` ? props.color : props.theme.scrollbar.backgroundColorHorizontal}; } + + .nav-thumb-vertical:hover { + background-color: ${(props) => + props.theme.scrollbar.hoverBackgroundColorVertical}; + } `; StyledScrollbar.defaultProps = { diff --git a/packages/asc-web-components/themes/base.js b/packages/asc-web-components/themes/base.js index 127314d806..b3249f875d 100644 --- a/packages/asc-web-components/themes/base.js +++ b/packages/asc-web-components/themes/base.js @@ -478,8 +478,9 @@ const Base = { }, scrollbar: { - backgroundColorVertical: "#e5e5e5", + backgroundColorVertical: "rgba(208, 213, 218, 1)", backgroundColorHorizontal: "rgba(0, 0, 0, 0.1)", + hoverBackgroundColorVertical: "rgba(163, 169, 174, 1)", }, modalDialog: { @@ -917,28 +918,12 @@ const Base = { }, editContainer: { - boxSizing: "border-box", - width: "100%", - height: "100%", - top: "50%", - left: "50%", - transform: "translate(-50%, -50%)", - padding: "75% 16px 5px", - textAlign: "center", - lineHeight: "19px", + right: "0px", + bottom: "0px", + backgroundColor: "#265a8f", borderRadius: "50%", - linearGradient: - "linear-gradient(180deg, rgba(6, 22, 38, 0) 24.48%, rgba(6, 22, 38, 0.75) 100%)", - transparent: "transparent", - }, - - editLink: { - paddingLeft: "10px", - paddingRight: "10px", - borderBottom: "none", - display: "inline-block", - maxWidth: "100%", - textDecoration: "underline dashed", + height: "32px", + width: "32px", }, image: { @@ -1403,7 +1388,7 @@ const Base = { maxWidth: "175px", lineHeightWithoutBorder: "16px", - lineHeightTextDecoration: "underline dashed transparent", + lineHeightTextDecoration: "underline dashed", }, childrenButton: { diff --git a/packages/asc-web-components/themes/dark.js b/packages/asc-web-components/themes/dark.js index 394091912a..af6723b1ec 100644 --- a/packages/asc-web-components/themes/dark.js +++ b/packages/asc-web-components/themes/dark.js @@ -444,8 +444,9 @@ const Dark = { }, scrollbar: { - backgroundColorVertical: "rgba(255, 255, 255, 0.5)", + backgroundColorVertical: "rgba(208, 213, 218, 1)", backgroundColorHorizontal: "rgba(255, 255, 255, 0.5)", + hoverBackgroundColorVertical: "rgba(163, 169, 174, 1)", }, modalDialog: { @@ -880,29 +881,14 @@ const Dark = { }, }, editContainer: { - boxSizing: "border-box", - width: "100%", - height: "100%", - top: "50%", - left: "50%", - transform: "translate(-50%, -50%)", - padding: "75% 16px 5px", - textAlign: "center", - lineHeight: "19px", + right: "0px", + bottom: "0px", + backgroundColor: "#265a8f", borderRadius: "50%", - linearGradient: - "linear-gradient(180deg, rgba(6, 22, 38, 0) 24.48%, rgba(6, 22, 38, 0.75) 100%)", - transparent: "transparent", + height: "32px", + width: "32px", }, - editLink: { - paddingLeft: "10px", - paddingRight: "10px", - borderBottom: "none", - display: "inline-block", - maxWidth: "100%", - textDecoration: "underline dashed", - }, image: { width: "100%", height: "100%", @@ -1194,7 +1180,7 @@ const Dark = { maxWidth: "175px", lineHeightWithoutBorder: "16px", - lineHeightTextDecoration: "underline dashed transparent", + lineHeightTextDecoration: "underline dashed", }, childrenButton: { diff --git a/products/ASC.Files/Client/src/HOCs/withContent.js b/products/ASC.Files/Client/src/HOCs/withContent.js index 260d996461..473515915a 100644 --- a/products/ASC.Files/Client/src/HOCs/withContent.js +++ b/products/ASC.Files/Client/src/HOCs/withContent.js @@ -109,18 +109,19 @@ export default function withContent(WrappedContent) { return this.completeAction(e); }; - onClickUpdateItem = (e) => { + onClickUpdateItem = (e, open = true) => { const { fileActionType } = this.props; fileActionType === FileAction.Create - ? this.createItem(e) + ? this.createItem(e, open) : this.updateItem(e); }; - createItem = (e) => { + createItem = (e, open) => { const { createFile, item, setIsLoading, + isLoading, openDocEditor, isPrivacy, isDesktop, @@ -131,6 +132,8 @@ export default function withContent(WrappedContent) { } = this.props; const { itemTitle } = this.state; + if (isLoading) return; + setIsLoading(true); const itemId = e.currentTarget.dataset.itemid; @@ -141,7 +144,7 @@ export default function withContent(WrappedContent) { } let tab = - !isDesktop && item.fileExst + !isDesktop && item.fileExst && open ? window.open( combineUrl( AppServerConfig.proxyURL, @@ -170,10 +173,12 @@ export default function withContent(WrappedContent) { encryptedFile, true, false - ).then(() => openDocEditor(file.id, file.providerKey, tab)); + ).then( + () => open && openDocEditor(file.id, file.providerKey, tab) + ); }); } - return openDocEditor(file.id, file.providerKey, tab); + return open && openDocEditor(file.id, file.providerKey, tab); }) .then(() => this.completeAction(itemId)) .catch((e) => toastr.error(e)) @@ -315,6 +320,7 @@ export default function withContent(WrappedContent) { const { editCompleteAction } = filesActionsStore; const { setIsLoading, + isLoading, openDocEditor, updateFile, renameFolder, @@ -338,6 +344,7 @@ export default function withContent(WrappedContent) { return { setIsLoading, + isLoading, isTrashFolder: isRecycleBinFolder, openDocEditor, updateFile, diff --git a/products/ASC.Files/Client/src/HOCs/withContextOptions.js b/products/ASC.Files/Client/src/HOCs/withContextOptions.js index 9dac07161a..ea377b4ca3 100644 --- a/products/ASC.Files/Client/src/HOCs/withContextOptions.js +++ b/products/ASC.Files/Client/src/HOCs/withContextOptions.js @@ -248,9 +248,10 @@ export default function withContextOptions(WrappedComponent) { }; onClickShare = () => { - const { onSelectItem, setSharingPanelVisible, id, isFolder } = this.props; - onSelectItem({ id, isFolder }); - setSharingPanelVisible(true); + const { setSharingPanelVisible } = this.props; + setTimeout(() => { + setSharingPanelVisible(true); + }, 10); //TODO: remove delay after fix context menu callback }; onClickMarkRead = () => { diff --git a/products/ASC.Files/Client/src/HOCs/withFileActions.js b/products/ASC.Files/Client/src/HOCs/withFileActions.js index b55eeb8cd6..0b6d0b5ea8 100644 --- a/products/ASC.Files/Client/src/HOCs/withFileActions.js +++ b/products/ASC.Files/Client/src/HOCs/withFileActions.js @@ -96,7 +96,7 @@ export default function withFileActions(WrappedFileItem) { } e.preventDefault(); setTooltipPosition(e.pageX, e.pageY); - setStartDrag(true); + !isFileName && setStartDrag(true); !isActive && setBufferSelection(null); }; diff --git a/products/ASC.Files/Client/src/components/EditingWrapperComponent.js b/products/ASC.Files/Client/src/components/EditingWrapperComponent.js index bf55db87c0..62a4521ebe 100644 --- a/products/ASC.Files/Client/src/components/EditingWrapperComponent.js +++ b/products/ASC.Files/Client/src/components/EditingWrapperComponent.js @@ -46,6 +46,8 @@ const EditingWrapper = styled.div` border-bottom: 1px solid #eceef1; padding-bottom: 4px; margin-top: 4px; + + margin-left: -4px; `} ${(props) => @@ -149,6 +151,7 @@ const EditingWrapperComponent = (props) => { }; const onFocus = (e) => e.target.select(); + const onBlur = (e) => onClickUpdateItem(e, false); return ( @@ -164,6 +167,7 @@ const EditingWrapperComponent = (props) => { onKeyUp={onKeyUpUpdateItem} onKeyDown={onEscapeKeyPress} onFocus={onFocus} + onBlur={onBlur} isDisabled={isLoading} data-itemid={itemId} withBorder={!isTable} diff --git a/products/ASC.Files/Client/src/components/panels/EmbeddingPanel/EmbeddingBody.js b/products/ASC.Files/Client/src/components/panels/EmbeddingPanel/EmbeddingBody.js new file mode 100644 index 0000000000..e5132252b1 --- /dev/null +++ b/products/ASC.Files/Client/src/components/panels/EmbeddingPanel/EmbeddingBody.js @@ -0,0 +1,131 @@ +import React, { useEffect, useState, useCallback } from "react"; +import Text from "@appserver/components/text"; +import Link from "@appserver/components/link"; +import TextInput from "@appserver/components/text-input"; +import Textarea from "@appserver/components/textarea"; +import copy from "copy-to-clipboard"; +import toastr from "@appserver/components/toast/toastr"; +import IconButton from "@appserver/components/icon-button"; +import i18n from "./i18n"; +import { withTranslation, I18nextProvider } from "react-i18next"; + +const EmbeddingBody = ({ embeddingLink, t }) => { + const [size, setSize] = useState("auto"); + const [widthValue, setWidthValue] = useState("100%"); + const [heightValue, setHeightValue] = useState("100%"); + const getIframe = useCallback( + () => + ``, + [embeddingLink, widthValue, heightValue] + ); + const [link, setLink] = useState(getIframe()); + + useEffect(() => { + const link = getIframe(); + setLink(link); + }, [embeddingLink, widthValue, heightValue]); + + const onSelectSizeMiddle = () => { + if (size === "600x800") return; + + setSize("600x800"); + setWidthValue("600"); + setHeightValue("800"); + }; + + const onSelectSizeSmall = () => { + if (size === "400x600") return; + + setSize("400x600"); + setWidthValue("400"); + setHeightValue("600"); + }; + const onSelectSizeAuto = () => { + if (size === "auto") return; + + setSize("auto"); + setWidthValue("100%"); + setHeightValue("100%"); + }; + + const onChangeWidth = (e) => { + setWidthValue(e.target.value); + }; + const onChangeHeight = (e) => { + setHeightValue(e.target.value); + }; + + const onCopyLink = () => { + copy(link); + toastr.success(t("CodeCopySuccess")); + }; + + return ( +
+ {t("Common:Size")}: +
+ + 600 x 800 px + + + 400 x 600 px + + + {t("Auto")} + +
+
+
+ {t("Width")}: + +
+
+ {t("Height")}: + +
+
+
+ {t("EmbedCode")}: + +