diff --git a/build/install/docker/Dockerfile.app b/build/install/docker/Dockerfile.app index aaf9b4df1c..f03fa17119 100644 --- a/build/install/docker/Dockerfile.app +++ b/build/install/docker/Dockerfile.app @@ -201,7 +201,7 @@ WORKDIR ${BUILD_PATH}/products/ASC.Files/service/ COPY --chown=onlyoffice:onlyoffice docker-entrypoint.sh . COPY --from=base --chown=onlyoffice:onlyoffice ${BUILD_PATH}/services/ASC.Files.Service/service/ . -CMD ["ASC.Files.Service.dll", "ASC.Files.Service", "core:products:folder=/var/www/products/", "core:products:subfolder=server"] +CMD ["ASC.Files.Service.dll", "ASC.Files.Service", "core:products:folder=/var/www/products/", "core:products:subfolder=server", "disable_elastic=true"] ## ASC.Mail ## FROM builder AS mail diff --git a/common/ASC.Api.Core/Core/BaseWorkerStartup.cs b/common/ASC.Api.Core/Core/BaseWorkerStartup.cs index 0e77221c50..dee00c2f5d 100644 --- a/common/ASC.Api.Core/Core/BaseWorkerStartup.cs +++ b/common/ASC.Api.Core/Core/BaseWorkerStartup.cs @@ -11,15 +11,16 @@ namespace ASC.Api.Core { public class BaseWorkerStartup { - public IConfiguration Configuration { get; } - + public IConfiguration Configuration { get; } + public BaseWorkerStartup(IConfiguration configuration) { Configuration = configuration; } public virtual void ConfigureServices(IServiceCollection services) - { + { + services.AddHttpContextAccessor(); services.AddCustomHealthCheck(Configuration); } diff --git a/common/services/ASC.ElasticSearch/Engine/BaseIndexer.cs b/common/services/ASC.ElasticSearch/Engine/BaseIndexer.cs index 2cff58569f..dc8e677944 100644 --- a/common/services/ASC.ElasticSearch/Engine/BaseIndexer.cs +++ b/common/services/ASC.ElasticSearch/Engine/BaseIndexer.cs @@ -36,6 +36,7 @@ using System.Threading.Tasks; using ASC.Common; using ASC.Common.Caching; using ASC.Common.Logging; +using ASC.Common.Utils; using ASC.Core; using ASC.Core.Common.EF; using ASC.Core.Common.EF.Context; @@ -102,14 +103,14 @@ namespace ASC.ElasticSearch DbContextManager dbContextManager, TenantManager tenantManager, BaseIndexerHelper baseIndexerHelper, - Settings settings, + ConfigurationExtension configurationExtension, IServiceProvider serviceProvider) { Client = client; Log = log.CurrentValue; TenantManager = tenantManager; BaseIndexerHelper = baseIndexerHelper; - Settings = settings; + Settings = Settings.GetInstance(configurationExtension); ServiceProvider = serviceProvider; LazyWebstudioDbContext = new Lazy(() => dbContextManager.Value); } diff --git a/common/services/ASC.ElasticSearch/Engine/Client.cs b/common/services/ASC.ElasticSearch/Engine/Client.cs index 606cc0e4eb..7061f25c29 100644 --- a/common/services/ASC.ElasticSearch/Engine/Client.cs +++ b/common/services/ASC.ElasticSearch/Engine/Client.cs @@ -29,6 +29,7 @@ using System.Text; using ASC.Common; using ASC.Common.Logging; +using ASC.Common.Utils; using ASC.Core; using ASC.Core.Tenants; using ASC.ElasticSearch.Service; @@ -53,11 +54,11 @@ namespace ASC.ElasticSearch private CoreConfiguration CoreConfiguration { get; } private Settings Settings { get; } - public Client(IOptionsMonitor option, CoreConfiguration coreConfiguration, Settings settings) + public Client(IOptionsMonitor option, CoreConfiguration coreConfiguration, ConfigurationExtension configurationExtension) { Log = option.Get("ASC.Indexer"); CoreConfiguration = coreConfiguration; - Settings = settings; + Settings = Settings.GetInstance(configurationExtension); } public ElasticClient Instance diff --git a/common/services/ASC.ElasticSearch/Service/Launcher.cs b/common/services/ASC.ElasticSearch/Service/Launcher.cs index d8d5f61b8f..b4d0dab5f8 100644 --- a/common/services/ASC.ElasticSearch/Service/Launcher.cs +++ b/common/services/ASC.ElasticSearch/Service/Launcher.cs @@ -32,6 +32,7 @@ using System.Threading.Tasks; using ASC.Common; using ASC.Common.Caching; using ASC.Common.Logging; +using ASC.Common.Utils; using ASC.ElasticSearch.Service; using Microsoft.Extensions.DependencyInjection; @@ -57,13 +58,14 @@ namespace ASC.ElasticSearch ICacheNotify notify, ICacheNotify indexNotify, IServiceProvider serviceProvider, - Settings settings) + ConfigurationExtension configurationExtension) { Log = options.Get("ASC.Indexer"); Notify = notify; IndexNotify = indexNotify; ServiceProvider = serviceProvider; CancellationTokenSource = new CancellationTokenSource(); + var settings = Settings.GetInstance(configurationExtension); Period = TimeSpan.FromMinutes(settings.Period.Value); } diff --git a/common/services/ASC.ElasticSearch/Service/Settings.cs b/common/services/ASC.ElasticSearch/Service/Settings.cs index cd8cab5fc5..b90b31a7d5 100644 --- a/common/services/ASC.ElasticSearch/Service/Settings.cs +++ b/common/services/ASC.ElasticSearch/Service/Settings.cs @@ -31,24 +31,21 @@ namespace ASC.ElasticSearch.Service { [Singletone] public class Settings - { - public Settings() + { + public static Settings GetInstance(ConfigurationExtension configuration) { - - } - - public Settings(ConfigurationExtension configuration) - { + var result = new Settings(); var cfg = configuration.GetSetting("elastic"); - Scheme = cfg.Scheme ?? "http"; - Host = cfg.Host ?? "localhost"; - Port = cfg.Port ?? 9200; - Period = cfg.Period ?? 1; - MaxContentLength = cfg.MaxContentLength ?? 100 * 1024 * 1024L; - MaxFileSize = cfg.MaxFileSize ?? 10 * 1024 * 1024L; - Threads = cfg.Threads ?? 1; - HttpCompression = cfg.HttpCompression ?? true; - } + result.Scheme = cfg.Scheme ?? "http"; + result.Host = cfg.Host ?? "localhost"; + result.Port = cfg.Port ?? 9200; + result.Period = cfg.Period ?? 1; + result.MaxContentLength = cfg.MaxContentLength ?? 100 * 1024 * 1024L; + result.MaxFileSize = cfg.MaxFileSize ?? 10 * 1024 * 1024L; + result.Threads = cfg.Threads ?? 1; + result.HttpCompression = cfg.HttpCompression ?? true; + return result; + } public string Host { get; set; } 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/Loaders/SectionHeaderLoader/StyledSectionHeaderLoader.js b/packages/asc-web-common/components/Loaders/SectionHeaderLoader/StyledSectionHeaderLoader.js index 4781b02721..40b3edaff6 100644 --- a/packages/asc-web-common/components/Loaders/SectionHeaderLoader/StyledSectionHeaderLoader.js +++ b/packages/asc-web-common/components/Loaders/SectionHeaderLoader/StyledSectionHeaderLoader.js @@ -12,6 +12,7 @@ const StyledContainer = styled.div` margin-bottom: 18px; @media ${mobile}, ${tablet} { + margin-top: 23px; grid-template-columns: 100px 1fr 42px; } `; 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 693b008eae..5fae6ae94e 100644 --- a/packages/asc-web-common/components/PageLayout/index.js +++ b/packages/asc-web-common/components/PageLayout/index.js @@ -335,6 +335,7 @@ class PageLayout extends React.Component { widthProp={width} unpinArticle={this.unpinArticle} pinned={isArticlePinned} + visible={isArticleVisible} > {isSectionHeaderAvailable && ( - + {sectionFilterContent ? sectionFilterContent.props.children : null} diff --git a/packages/asc-web-common/components/PageLayout/sub-components/article-main-button.js b/packages/asc-web-common/components/PageLayout/sub-components/article-main-button.js index 7fcdb00b32..6808bf2b04 100644 --- a/packages/asc-web-common/components/PageLayout/sub-components/article-main-button.js +++ b/packages/asc-web-common/components/PageLayout/sub-components/article-main-button.js @@ -10,6 +10,7 @@ const StyledArticleMainButton = styled.div` line-height: 36px; } @media ${tablet} { + margin: 16px 0 0; .main-button_drop-down { line-height: 40px; } 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..c49ef976c2 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 @@ -8,7 +8,7 @@ import { inject, observer } from "mobx-react"; import Scrollbar from "@appserver/components/scrollbar"; import DragAndDrop from "@appserver/components/drag-and-drop"; -import { tablet } from "@appserver/components/utils/device"; +import { tablet, desktop } from "@appserver/components/utils/device"; const commonStyles = css` flex-grow: 1; @@ -21,7 +21,12 @@ const commonStyles = css` flex: 1 0 auto; padding: 17px 7px 16px 24px; outline: none; - ${(props) => props.viewAs == "tile" && "padding-right:0;"} + ${(props) => + props.viewAs == "tile" && + css` + padding-right: 0; + padding-left: 20px; + `} @media ${tablet} { padding: 16px 0 16px 24px; @@ -36,6 +41,10 @@ const commonStyles = css` .people-row-container, .files-row-container { margin-top: -22px; + + @media ${desktop} { + ${(props) => props.viewAs === "row" && `margin-top: -9px;`} + } } } `; @@ -46,7 +55,6 @@ const StyledSectionBody = styled.div` ${(props) => props.withScroll && ` - margin-left: -24px; `} `; 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..3786bb01a3 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,10 +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; + margin: 11px 24px 0 0; + + @media ${desktop} { + ${(props) => + (props.viewAs === "table" || props.viewAs === "tile") && + css` + margin-left: -4px; + margin-right: 20px; + margin-bottom: 9px; + `}; + } @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..951b6813ef 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 @@ -19,13 +19,19 @@ const StyledSectionHeader = styled.div` min-height: 48px; max-height: 49px; */ width: ${(props) => !props.isLoaded && "100%"}; - margin-top: 64px; - /* @media ${tablet} { - margin-top: 55px; - } */ + + margin-top: 62px; + @media ${tablet} { + margin-top: 48px; + } `} - + @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/components/PageLayout/sub-components/section.js b/packages/asc-web-common/components/PageLayout/sub-components/section.js index 65e815866c..e3aeeca0b8 100644 --- a/packages/asc-web-common/components/PageLayout/sub-components/section.js +++ b/packages/asc-web-common/components/PageLayout/sub-components/section.js @@ -31,9 +31,13 @@ const StyledSection = styled.section` right: 15px; bottom: 21px; - @media ${tablet} { - bottom: 83px; - } + ${(props) => + !props.visible && + css` + @media ${tablet} { + bottom: 83px; + } + `} } .layout-progress-second-bar { @@ -41,9 +45,13 @@ const StyledSection = styled.section` right: 15px; bottom: 83px; - @media ${tablet} { - bottom: 145px; - } + ${(props) => + !props.visible && + css` + @media ${tablet} { + bottom: 145px; + } + `} } .section-header_filter { @@ -57,13 +65,11 @@ const StyledSection = styled.section` padding: 0 0 0 16px; ${tabletProps}; } - ${ - isMobile && - css` - ${tabletProps}; - min-width: 100px; - ` - } + ${isMobile && + css` + ${tabletProps}; + min-width: 100px; + `} `; class Section extends React.Component { 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/campaigns-banner/index.js b/packages/asc-web-components/campaigns-banner/index.js index f744c3e312..2f06e733db 100644 --- a/packages/asc-web-components/campaigns-banner/index.js +++ b/packages/asc-web-components/campaigns-banner/index.js @@ -7,7 +7,7 @@ import Text from "../text"; import Loaders from "@appserver/common/components/Loaders"; const onButtonClick = (url) => { - window.location = url; + window.open(url, "_blank"); }; const CampaignsBanner = (props) => { diff --git a/packages/asc-web-components/combobox/index.js b/packages/asc-web-components/combobox/index.js index 00189eb3e2..8cd8bb6add 100644 --- a/packages/asc-web-components/combobox/index.js +++ b/packages/asc-web-components/combobox/index.js @@ -89,6 +89,7 @@ class ComboBox extends React.Component { toggleAction, textOverflow, showDisabledItems, + offsetDropDownY, } = this.props; const { isOpen, selectedOption } = this.state; @@ -138,7 +139,7 @@ class ComboBox extends React.Component { className="dropdown-container not-selectable" directionX={directionX} directionY={directionY} - manualY="102%" + manualY={offsetDropDownY} open={isOpen} clickOutsideAction={this.handleClickOutside} {...dropDownMaxHeightProp} @@ -210,6 +211,8 @@ ComboBox.propTypes = { textOverflow: PropTypes.bool, /** Disables clicking on the icon */ disableIconClick: PropTypes.bool, + /** Y offset */ + offsetDropDownY: PropTypes.string, }; ComboBox.defaultProps = { @@ -221,6 +224,7 @@ ComboBox.defaultProps = { size: "base", disableIconClick: true, showDisabledItems: false, + offsetDropDownY: "102%", }; export default ComboBox; 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/group-button/index.js b/packages/asc-web-components/group-button/index.js index 93bb1973c5..0bcb7d3df9 100644 --- a/packages/asc-web-components/group-button/index.js +++ b/packages/asc-web-components/group-button/index.js @@ -105,9 +105,11 @@ class GroupButton extends React.Component { ? { maxHeight: dropDownMaxHeight } : {}; const offsetSelectDropDown = isSelect - ? { manualX: window.innerWidth <= 1024 ? "16px" : "24px" } + ? { manualX: window.innerWidth <= 1024 ? "44px" : "50px" } : {}; + const manualY = window.innerWidth <= 1024 ? "60px" : "53px"; + return ( { if (scrollbarsRef) { forwardedRef(scrollbarsRef.view); 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/search-input/index.js b/packages/asc-web-components/search-input/index.js index 790dbfc0c4..81ad472441 100644 --- a/packages/asc-web-components/search-input/index.js +++ b/packages/asc-web-components/search-input/index.js @@ -48,11 +48,11 @@ class SearchInput extends React.Component { render() { //console.log("Search input render"); - let clearButtonSize = 15; + let clearButtonSize = 16; switch (this.props.size) { case "base": clearButtonSize = - !!this.state.inputValue || this.props.showClearButton ? 12 : 15; + !!this.state.inputValue || this.props.showClearButton ? 12 : 16; break; case "middle": clearButtonSize = @@ -60,7 +60,7 @@ class SearchInput extends React.Component { break; case "big": clearButtonSize = - !!this.state.inputValue || this.props.showClearButton ? 19 : 21; + !!this.state.inputValue || this.props.showClearButton ? 18 : 22; break; case "huge": clearButtonSize = diff --git a/packages/asc-web-components/table-container/StyledTableContainer.js b/packages/asc-web-components/table-container/StyledTableContainer.js index fb9b6020da..6270c9b990 100644 --- a/packages/asc-web-components/table-container/StyledTableContainer.js +++ b/packages/asc-web-components/table-container/StyledTableContainer.js @@ -33,11 +33,10 @@ const StyledTableContainer = styled.div` border-right: 2px solid #d0d5da; } - .table-container_group-menu { - padding-left: 24px; - margin-left: -24px; - padding-right: 24px; - margin-right: -24px; + .table-container_group-menu, + .table-container_header { + padding: 0 24px; + margin: 0 -24px; border-bottom: 1px solid; border-image-slice: 1; @@ -138,7 +137,10 @@ const StyledTableHeaderCell = styled.div` cursor: ${(props) => (props.showIcon ? "pointer" : "default")}; .header-container-text-icon { - padding: 16px 0 0 4px; + height: 8px; + width: 8px; + + padding: 16px 0 16px 4px; display: ${(props) => props.isActive && props.showIcon ? "block" : "none"}; @@ -146,7 +148,7 @@ const StyledTableHeaderCell = styled.div` props.sorted && css` transform: scale(1, -1); - padding: 14px 0 0 4px; + padding: 14px 0 14px 4px; `} } diff --git a/packages/asc-web-components/table-container/TableGroupMenu.js b/packages/asc-web-components/table-container/TableGroupMenu.js index 25ec414269..4260f955ed 100644 --- a/packages/asc-web-components/table-container/TableGroupMenu.js +++ b/packages/asc-web-components/table-container/TableGroupMenu.js @@ -51,6 +51,7 @@ const TableGroupMenu = (props) => { className="table-container_group-menu-combobox not-selectable" options={[]} selectedOption={{}} + offsetDropDownY="44px" />
{headerMenu.map((item, index) => { diff --git a/packages/asc-web-components/table-container/TableHeader.js b/packages/asc-web-components/table-container/TableHeader.js index 5897983cf2..de6cf333e5 100644 --- a/packages/asc-web-components/table-container/TableHeader.js +++ b/packages/asc-web-components/table-container/TableHeader.js @@ -136,7 +136,12 @@ class TableHeader extends React.Component { const clearSize = gridTemplateColumns.map((c) => this.getSubstring(c)); const maxSize = Math.max.apply(Math, clearSize); - const defaultColSize = containerWidth / filterColumns.length; + + const defaultSize = columns[activeColumnIndex - 1].defaultSize; + + const defaultColSize = defaultSize + ? defaultSize + : containerWidth / filterColumns.length; const indexOfMaxSize = clearSize.findIndex((s) => s === maxSize); const newSize = maxSize - defaultColSize; @@ -234,8 +239,8 @@ class TableHeader extends React.Component { const storageSize = !resetColumnsSize && localStorage.getItem(columnStorageName); - const defaultSize = this.props.columns.find((col) => col.defaultSize) - ?.defaultSize; + // const defaultSize = this.props.columns.find((col) => col.defaultSize) + // ?.defaultSize; //TODO: Fixed columns size if something went wrong if (storageSize) { @@ -243,11 +248,16 @@ class TableHeader extends React.Component { const isInvalid = splitStorage.some((s) => s === "NaNpx"); - if ( - (defaultSize && - splitStorage[splitStorage.length - 2] !== `${defaultSize}px`) || - isInvalid - ) { + // if ( + // (defaultSize && + // splitStorage[splitStorage.length - 2] !== `${defaultSize}px`) || + // isInvalid + // ) { + // localStorage.removeItem(columnStorageName); + // return this.onResize(); + // } + + if (isInvalid) { localStorage.removeItem(columnStorageName); return this.onResize(); } diff --git a/packages/asc-web-components/themes/base.js b/packages/asc-web-components/themes/base.js index d3ccfbe5de..4895e1e03e 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/packages/asc-web-components/view-selector/styled-view-selector.js b/packages/asc-web-components/view-selector/styled-view-selector.js index 84fbac5b85..bc7a113f0e 100644 --- a/packages/asc-web-components/view-selector/styled-view-selector.js +++ b/packages/asc-web-components/view-selector/styled-view-selector.js @@ -40,9 +40,7 @@ const lastItemStyle = css` const IconWrapper = styled.div` position: relative; - width: 32px; - height: 100%; - padding: 8px; + padding: 7px; box-sizing: border-box; border: 1px solid; @@ -80,8 +78,8 @@ const IconWrapper = styled.div` `} } svg { - width: 15px; - height: 15px; + width: 16px; + height: 16px; ${(props) => !props.isDisabled 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..0ebb63952d 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 = () => { @@ -336,7 +337,7 @@ export default function withContextOptions(WrappedComponent) { return { key: option, label: t("SharingSettings"), - icon: "/static/images/catalog.shared.react.svg", + icon: "/static/images/catalog.share.react.svg", onClick: this.onClickShare, disabled: !isShareable, }; diff --git a/products/ASC.Files/Client/src/HOCs/withFileActions.js b/products/ASC.Files/Client/src/HOCs/withFileActions.js index b55eeb8cd6..2c8d5c4f70 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); }; @@ -210,7 +210,7 @@ export default function withFileActions(WrappedFileItem) { return; } - return window.open(viewUrl, "_blank"); + return window.open(viewUrl, "_self"); } }; diff --git a/products/ASC.Files/Client/src/components/Article/Body/TreeFolders.js b/products/ASC.Files/Client/src/components/Article/Body/TreeFolders.js index 3d9bf6d76a..dab9d34a6a 100644 --- a/products/ASC.Files/Client/src/components/Article/Body/TreeFolders.js +++ b/products/ASC.Files/Client/src/components/Article/Body/TreeFolders.js @@ -81,7 +81,7 @@ class TreeFolders extends React.Component { iconUrl = "/static/images/catalog.user.react.svg"; break; case FolderType.SHARE: - iconUrl = "/static/images/catalog.shared.react.svg"; + iconUrl = "/static/images/catalog.share.react.svg"; break; case FolderType.COMMON: iconUrl = "/static/images/catalog.portfolio.react.svg"; diff --git a/products/ASC.Files/Client/src/components/EditingWrapperComponent.js b/products/ASC.Files/Client/src/components/EditingWrapperComponent.js index bf55db87c0..e2dd5f537f 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) => @@ -118,7 +120,7 @@ const EditingWrapperComponent = (props) => { renameTitle, onClickUpdateItem, cancelUpdateItem, - isLoading, + //isLoading, viewAs, elementIcon, } = props; @@ -127,10 +129,14 @@ const EditingWrapperComponent = (props) => { const [OkIconIsHovered, setIsHoveredOk] = useState(false); const [CancelIconIsHovered, setIsHoveredCancel] = useState(false); + const [isLoading, setIsLoading] = useState(false); const onKeyUpUpdateItem = (e) => { + if (isLoading) return; + var code = e.keyCode || e.which; if (code === 13) { + if (!isLoading) setIsLoading(true); return onClickUpdateItem(e); } //if (code === 27) return cancelUpdateItem(e); @@ -149,6 +155,11 @@ const EditingWrapperComponent = (props) => { }; const onFocus = (e) => e.target.select(); + const onBlur = (e) => { + if (e.relatedTarget && e.relatedTarget.classList.contains("edit-button")) + return false; + onClickUpdateItem(e, false); + }; return ( @@ -161,9 +172,10 @@ const EditingWrapperComponent = (props) => { tabIndex={1} isAutoFocussed={true} onChange={renameTitle} - onKeyUp={onKeyUpUpdateItem} + onKeyPress={onKeyUpUpdateItem} onKeyDown={onEscapeKeyPress} onFocus={onFocus} + onBlur={onBlur} isDisabled={isLoading} data-itemid={itemId} withBorder={!isTable} diff --git a/products/ASC.Files/Client/src/components/SharedButton.js b/products/ASC.Files/Client/src/components/SharedButton.js index bd9325f3e7..70933f35d6 100644 --- a/products/ASC.Files/Client/src/components/SharedButton.js +++ b/products/ASC.Files/Client/src/components/SharedButton.js @@ -10,6 +10,7 @@ const SharedButton = ({ shared, onSelectItem, setSharingPanelVisible, + isSmallIcon = false, }) => { const color = shared ? "#657077" : "#a3a9ae"; @@ -18,6 +19,10 @@ const SharedButton = ({ setSharingPanelVisible(true); }; + const icon = isSmallIcon + ? "/static/images/catalog.share.small.react.svg" + : "/static/images/catalog.share.react.svg"; + return ( {t("Share")} diff --git a/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/index.js index f6dae605d8..e0bd790603 100644 --- a/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/index.js +++ b/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/index.js @@ -52,7 +52,7 @@ class DownloadDialogComponent extends React.Component { if (item.checked) { if (item.fileExst) { const format = - item.format === this.props.t("OriginalFormat") + !item.format || item.format === this.props.t("OriginalFormat") ? item.fileExst : item.format; if (!singleFileUrl) { 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")}: + +