Merge branch 'develop' into table-group-menu
# Conflicts: # products/ASC.Files/Client/src/store/FilesStore.js
This commit is contained in:
commit
5bd9c06c1a
@ -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",
|
||||
|
@ -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 = {
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -357,7 +357,10 @@ class PageLayout extends React.Component {
|
||||
paddingRight: "20px",
|
||||
}}
|
||||
></div>
|
||||
<SubSectionFilter className="section-header_filter">
|
||||
<SubSectionFilter
|
||||
className="section-header_filter"
|
||||
viewAs={viewAs}
|
||||
>
|
||||
{sectionFilterContent
|
||||
? sectionFilterContent.props.children
|
||||
: null}
|
||||
|
@ -35,7 +35,12 @@ const commonStyles = css`
|
||||
flex: 1 0 auto;
|
||||
|
||||
outline: none;
|
||||
${(props) => props.viewAs == "tile" && "padding-right:0;"}
|
||||
${(props) =>
|
||||
props.viewAs == "tile" &&
|
||||
css`
|
||||
padding-right: 0;
|
||||
padding-left: 20px;
|
||||
`}
|
||||
|
||||
.section-wrapper {
|
||||
display: flex;
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -18,7 +18,12 @@ const StyledSectionHeader = styled.div`
|
||||
margin-top: 64px;
|
||||
`}
|
||||
|
||||
|
||||
@media ${desktop} {
|
||||
${(props) =>
|
||||
(props.viewAs === "table" || props.viewAs === "tile") &&
|
||||
"margin-left: -4px"};
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
${(props) =>
|
||||
props.viewAs !== "tablet" &&
|
||||
|
@ -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"]*/
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -24,7 +24,11 @@ const Aside = React.memo((props) => {
|
||||
contentPaddingBottom={contentPaddingBottom}
|
||||
className={`${className} not-selectable aside`}
|
||||
>
|
||||
{withoutBodyScroll ? children : <Scrollbar>{children}</Scrollbar>}
|
||||
{withoutBodyScroll ? (
|
||||
children
|
||||
) : (
|
||||
<Scrollbar stype="mediumBlack">{children}</Scrollbar>
|
||||
)}
|
||||
</StyledAside>
|
||||
);
|
||||
});
|
||||
|
@ -311,7 +311,13 @@ class AvatarEditorBody extends React.Component {
|
||||
const desktopMode = isDesktop();
|
||||
return (
|
||||
<Text as="span">
|
||||
<Link type="action" isHovered color="#316DAA" onClick={this.openDialog}>
|
||||
<Link
|
||||
type="action"
|
||||
fontWeight={600}
|
||||
isHovered
|
||||
color="#316DAA"
|
||||
onClick={this.openDialog}
|
||||
>
|
||||
{selectNewPhotoLabel}
|
||||
</Link>{" "}
|
||||
{desktopMode && orDropFileHereLabel}
|
||||
|
@ -27,5 +27,4 @@ Default.args = {
|
||||
source: "",
|
||||
userName: "",
|
||||
editing: false,
|
||||
editLabel: "Edit photo",
|
||||
};
|
||||
|
@ -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 ? (
|
||||
<StyledImage src={source} />
|
||||
@ -83,21 +74,13 @@ const Avatar = (props) => {
|
||||
{avatarContent}
|
||||
</AvatarWrapper>
|
||||
{editing && size === "max" && (
|
||||
<EditContainer gradient={!!source}>
|
||||
<EditLink>
|
||||
<Link
|
||||
type="action"
|
||||
title={editLabel}
|
||||
isTextOverflow={true}
|
||||
isHovered={true}
|
||||
fontSize="14px"
|
||||
fontWeight={600}
|
||||
color={whiteColor}
|
||||
onClick={editAction}
|
||||
>
|
||||
{editLabel}
|
||||
</Link>
|
||||
</EditLink>
|
||||
<EditContainer>
|
||||
<IconButton
|
||||
color={whiteColor}
|
||||
iconName="/static/images/pencil.react.svg"
|
||||
onClick={editAction}
|
||||
size={16}
|
||||
/>
|
||||
</EditContainer>
|
||||
)}
|
||||
<RoleWrapper size={size}>{roleIcon}</RoleWrapper>
|
||||
@ -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,
|
||||
};
|
||||
|
@ -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,
|
||||
|
@ -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 = (
|
||||
<a
|
||||
href={item.url || "#"}
|
||||
className={linkClassName}
|
||||
target={item.target}
|
||||
{...dataKeys}
|
||||
onClick={(event) => 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,
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
@ -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 = {
|
||||
|
@ -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: {
|
||||
|
@ -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: {
|
||||
|
@ -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,
|
||||
|
@ -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 = () => {
|
||||
|
@ -96,7 +96,7 @@ export default function withFileActions(WrappedFileItem) {
|
||||
}
|
||||
e.preventDefault();
|
||||
setTooltipPosition(e.pageX, e.pageY);
|
||||
setStartDrag(true);
|
||||
!isFileName && setStartDrag(true);
|
||||
!isActive && setBufferSelection(null);
|
||||
};
|
||||
|
||||
|
@ -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 (
|
||||
<EditingWrapper viewAs={viewAs}>
|
||||
@ -164,6 +167,7 @@ const EditingWrapperComponent = (props) => {
|
||||
onKeyUp={onKeyUpUpdateItem}
|
||||
onKeyDown={onEscapeKeyPress}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
isDisabled={isLoading}
|
||||
data-itemid={itemId}
|
||||
withBorder={!isTable}
|
||||
|
@ -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(
|
||||
() =>
|
||||
`<iframe src="${embeddingLink}" width="${widthValue}" height="${heightValue}" frameborder="0" scrolling="no" allowtransparency> </iframe>`,
|
||||
[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 (
|
||||
<div className="embedding-panel_body">
|
||||
<Text className="embedding-panel_text">{t("Common:Size")}:</Text>
|
||||
<div className="embedding-panel_links-container">
|
||||
<Link
|
||||
isHovered
|
||||
type="action"
|
||||
className="embedding-panel_link"
|
||||
onClick={onSelectSizeMiddle}
|
||||
>
|
||||
600 x 800 px
|
||||
</Link>
|
||||
<Link
|
||||
isHovered
|
||||
type="action"
|
||||
className="embedding-panel_link"
|
||||
onClick={onSelectSizeSmall}
|
||||
>
|
||||
400 x 600 px
|
||||
</Link>
|
||||
<Link
|
||||
isHovered
|
||||
type="action"
|
||||
className="embedding-panel_link"
|
||||
onClick={onSelectSizeAuto}
|
||||
>
|
||||
{t("Auto")}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="embedding-panel_inputs-container">
|
||||
<div>
|
||||
<Text className="embedding-panel_text">{t("Width")}:</Text>
|
||||
<TextInput
|
||||
className="embedding-panel_input"
|
||||
value={widthValue}
|
||||
onChange={onChangeWidth}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Text className="embedding-panel_text">{t("Height")}:</Text>
|
||||
<TextInput
|
||||
className="embedding-panel_input"
|
||||
value={heightValue}
|
||||
onChange={onChangeHeight}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="embedding-panel_code-container">
|
||||
<Text className="embedding-panel_text">{t("EmbedCode")}:</Text>
|
||||
<IconButton
|
||||
className="embedding-panel_copy-icon"
|
||||
size="16"
|
||||
iconName="/static/images/copy.react.svg"
|
||||
color="#333"
|
||||
onClick={onCopyLink}
|
||||
/>
|
||||
<Textarea color="#AEAEAE" isReadOnly value={link} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const EmbeddingBodyWrapper = withTranslation("EmbeddingPanel")(EmbeddingBody);
|
||||
|
||||
export default (props) => (
|
||||
<I18nextProvider i18n={i18n}>
|
||||
<EmbeddingBodyWrapper {...props} />
|
||||
</I18nextProvider>
|
||||
);
|
@ -4,33 +4,18 @@ import Backdrop from "@appserver/components/backdrop";
|
||||
import Heading from "@appserver/components/heading";
|
||||
import Aside from "@appserver/components/aside";
|
||||
import IconButton from "@appserver/components/icon-button";
|
||||
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 toastr from "@appserver/components/toast/toastr";
|
||||
import { withTranslation, I18nextProvider } from "react-i18next";
|
||||
import i18n from "./i18n";
|
||||
import {
|
||||
StyledEmbeddingPanel,
|
||||
StyledContent,
|
||||
StyledHeaderContent,
|
||||
StyledBody,
|
||||
} from "../StyledPanels";
|
||||
import copy from "copy-to-clipboard";
|
||||
import i18n from "./i18n";
|
||||
|
||||
import EmbeddingBody from "./EmbeddingBody";
|
||||
|
||||
class EmbeddingPanelComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
size: "auto",
|
||||
widthValue: "100%",
|
||||
heightValue: "100%",
|
||||
link: `<iframe src="${props.embeddingLink}" width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency> </iframe>`,
|
||||
};
|
||||
}
|
||||
|
||||
onArrowClick = () => this.props.onClose();
|
||||
|
||||
onClosePanels = () => {
|
||||
@ -38,81 +23,8 @@ class EmbeddingPanelComponent extends React.Component {
|
||||
this.props.onSharingPanelClose();
|
||||
};
|
||||
|
||||
onSelectSizeMiddle = () => {
|
||||
this.state.size !== "600x800" &&
|
||||
this.setState({ size: "600x800", widthValue: "600", heightValue: "800" });
|
||||
};
|
||||
|
||||
onSelectSizeSmall = () => {
|
||||
this.state.size !== "400x600" &&
|
||||
this.setState({ size: "400x600", widthValue: "400", heightValue: "600" });
|
||||
};
|
||||
onSelectSizeAuto = () => {
|
||||
this.state.size !== "auto" &&
|
||||
this.setState({ size: "auto", widthValue: "100%", heightValue: "100%" });
|
||||
};
|
||||
|
||||
onChangeWidth = (e) => {
|
||||
this.setState({ widthValue: e.target.value });
|
||||
};
|
||||
onChangeHeight = (e) => {
|
||||
this.setState({ heightValue: e.target.value });
|
||||
};
|
||||
|
||||
onCopyLink = () => {
|
||||
copy(this.state.link);
|
||||
toastr.success(this.props.t("CodeCopySuccess"));
|
||||
};
|
||||
|
||||
// shouldComponentUpdate(nextProps, nextState) {
|
||||
// const { size, widthValue, heightValue, link } = this.state;
|
||||
// const { visible, embeddingLink } = this.props;
|
||||
|
||||
// if (size !== nextState.size) {
|
||||
// return true;
|
||||
// }
|
||||
|
||||
// if (widthValue !== nextState.widthValue) {
|
||||
// return true;
|
||||
// }
|
||||
|
||||
// if (heightValue !== nextState.heightValue) {
|
||||
// return true;
|
||||
// }
|
||||
|
||||
// if (visible !== nextProps.visible) {
|
||||
// return true;
|
||||
// }
|
||||
|
||||
// if (embeddingLink !== nextProps.embeddingLink) {
|
||||
// return true;
|
||||
// }
|
||||
|
||||
// if (link !== nextState.link) {
|
||||
// return true;
|
||||
// }
|
||||
|
||||
// return false;
|
||||
// }
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
const { embeddingLink } = this.props;
|
||||
const { widthValue, heightValue } = this.state;
|
||||
|
||||
if (
|
||||
prevProps.embeddingLink !== embeddingLink ||
|
||||
widthValue !== prevState.widthValue ||
|
||||
heightValue !== prevState.heightValue
|
||||
) {
|
||||
const link = `<iframe src="${embeddingLink}" width="${widthValue}" height="${heightValue}" frameborder="0" scrolling="no" allowtransparency> </iframe>`;
|
||||
this.setState({ link });
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { visible, t } = this.props;
|
||||
const { size, widthValue, heightValue, link } = this.state;
|
||||
|
||||
const zIndex = 310;
|
||||
|
||||
//console.log("EmbeddingPanel render");
|
||||
@ -141,69 +53,8 @@ class EmbeddingPanelComponent extends React.Component {
|
||||
{t("EmbeddingDocument")}
|
||||
</Heading>
|
||||
</StyledHeaderContent>
|
||||
<StyledBody size={size}>
|
||||
<div className="embedding-panel_body">
|
||||
<Text className="embedding-panel_text">
|
||||
{t("Common:Size")}:
|
||||
</Text>
|
||||
<div className="embedding-panel_links-container">
|
||||
<Link
|
||||
isHovered
|
||||
type="action"
|
||||
className="embedding-panel_link"
|
||||
onClick={this.onSelectSizeMiddle}
|
||||
>
|
||||
600 x 800 px
|
||||
</Link>
|
||||
<Link
|
||||
isHovered
|
||||
type="action"
|
||||
className="embedding-panel_link"
|
||||
onClick={this.onSelectSizeSmall}
|
||||
>
|
||||
400 x 600 px
|
||||
</Link>
|
||||
<Link
|
||||
isHovered
|
||||
type="action"
|
||||
className="embedding-panel_link"
|
||||
onClick={this.onSelectSizeAuto}
|
||||
>
|
||||
{t("Auto")}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="embedding-panel_inputs-container">
|
||||
<div>
|
||||
<Text className="embedding-panel_text">{t("Width")}:</Text>
|
||||
<TextInput
|
||||
className="embedding-panel_input"
|
||||
value={widthValue}
|
||||
onChange={this.onChangeWidth}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Text className="embedding-panel_text">{t("Height")}:</Text>
|
||||
<TextInput
|
||||
className="embedding-panel_input"
|
||||
value={heightValue}
|
||||
onChange={this.onChangeHeight}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="embedding-panel_code-container">
|
||||
<Text className="embedding-panel_text">
|
||||
{t("EmbedCode")}:
|
||||
</Text>
|
||||
<IconButton
|
||||
className="embedding-panel_copy-icon"
|
||||
size="16"
|
||||
iconName="/static/images/copy.react.svg"
|
||||
color="#333"
|
||||
onClick={this.onCopyLink}
|
||||
/>
|
||||
<Textarea color="#AEAEAE" isReadOnly value={link} />
|
||||
</div>
|
||||
</div>
|
||||
<StyledBody>
|
||||
<EmbeddingBody />
|
||||
</StyledBody>
|
||||
</StyledContent>
|
||||
</Aside>
|
||||
@ -218,12 +69,12 @@ EmbeddingPanelComponent.propTypes = {
|
||||
onClose: PropTypes.func,
|
||||
};
|
||||
|
||||
const EmbeddingPanel = withTranslation("EmbeddingPanel")(
|
||||
const EmbeddingBodyWrapper = withTranslation("EmbeddingPanel")(
|
||||
EmbeddingPanelComponent
|
||||
);
|
||||
|
||||
export default (props) => (
|
||||
<I18nextProvider i18n={i18n}>
|
||||
<EmbeddingPanel {...props} />
|
||||
<EmbeddingBodyWrapper {...props} />
|
||||
</I18nextProvider>
|
||||
);
|
||||
|
@ -19,6 +19,7 @@ import {
|
||||
StyledFooter,
|
||||
StyledHeaderContent,
|
||||
StyledSharingBody,
|
||||
StyledModalRowContainer,
|
||||
} from "../StyledPanels";
|
||||
import { AddUsersPanel, AddGroupsPanel, EmbeddingPanel } from "../index";
|
||||
import SharingRow from "./SharingRow";
|
||||
@ -26,9 +27,12 @@ import { inject, observer } from "mobx-react";
|
||||
import config from "../../../../package.json";
|
||||
import i18n from "./i18n";
|
||||
import { I18nextProvider } from "react-i18next";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import { isMobile, isMobileOnly } from "react-device-detect";
|
||||
import Loaders from "@appserver/common/components/Loaders";
|
||||
import withLoader from "../../../HOCs/withLoader";
|
||||
import ModalDialogContainer from "../../dialogs/ModalDialogContainer";
|
||||
import ModalDialog from "@appserver/components/modal-dialog";
|
||||
import EmbeddingBody from "../EmbeddingPanel/EmbeddingBody";
|
||||
|
||||
const SharingBodyStyle = { height: `calc(100vh - 156px)` };
|
||||
|
||||
@ -50,6 +54,7 @@ class SharingPanelComponent extends React.Component {
|
||||
showPanel: false,
|
||||
accessOptions: [],
|
||||
filesOwnerId: null,
|
||||
showEmbeddingContent: false,
|
||||
};
|
||||
|
||||
this.ref = React.createRef();
|
||||
@ -74,6 +79,7 @@ class SharingPanelComponent extends React.Component {
|
||||
newDataItems[0].access = rights;
|
||||
this.setState({
|
||||
shareDataItems: newDataItems,
|
||||
showEmbeddingContent: false,
|
||||
});
|
||||
};
|
||||
|
||||
@ -343,6 +349,12 @@ class SharingPanelComponent extends React.Component {
|
||||
shareLink: link,
|
||||
});
|
||||
|
||||
onShowEmbeddingContainer = (link) =>
|
||||
this.setState({
|
||||
showEmbeddingContent: !this.state.showEmbeddingContent,
|
||||
shareLink: link,
|
||||
});
|
||||
|
||||
onShowGroupsPanel = () =>
|
||||
this.setState({
|
||||
showAddGroupsPanel: !this.state.showAddGroupsPanel,
|
||||
@ -448,6 +460,7 @@ class SharingPanelComponent extends React.Component {
|
||||
//showPanel,
|
||||
accessOptions,
|
||||
externalAccessOptions,
|
||||
showEmbeddingContent,
|
||||
} = this.state;
|
||||
|
||||
const visible = sharingPanelVisible;
|
||||
@ -460,7 +473,66 @@ class SharingPanelComponent extends React.Component {
|
||||
const internalLink =
|
||||
selection.length === 1 && !isEncrypted && this.getInternalLink();
|
||||
|
||||
return (
|
||||
return isPersonal && !isMobileOnly ? (
|
||||
<ModalDialog
|
||||
isLoading={!tReady}
|
||||
visible={visible}
|
||||
displayType="modal"
|
||||
onClose={this.onClose}
|
||||
>
|
||||
<ModalDialog.Header>{t("SharingSettingsTitle")}</ModalDialog.Header>
|
||||
<ModalDialog.Body>
|
||||
<StyledModalRowContainer>
|
||||
{!isLoading ? (
|
||||
shareDataItems.map((item, index) => (
|
||||
<SharingRow
|
||||
t={t}
|
||||
isPersonal={isPersonal}
|
||||
index={index}
|
||||
key={`${item.sharedTo.id}_${index}`}
|
||||
selection={selection}
|
||||
item={item}
|
||||
isMyId={isMyId}
|
||||
accessOptions={accessOptions}
|
||||
externalAccessOptions={externalAccessOptions}
|
||||
canShareOwnerChange={canShareOwnerChange}
|
||||
onChangeItemAccess={this.onChangeItemAccess}
|
||||
internalLink={internalLink}
|
||||
onRemoveUserClick={this.onRemoveUserItemClick}
|
||||
onShowEmbeddingPanel={this.onShowEmbeddingContainer}
|
||||
onToggleLink={this.onToggleLink}
|
||||
onShowChangeOwnerPanel={this.onShowChangeOwnerPanel}
|
||||
isLoading={isLoading}
|
||||
documentTitle={documentTitle}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<Loaders.Rectangle
|
||||
height="47px"
|
||||
animate={0}
|
||||
foregroundColor="#f8f9f9"
|
||||
backgroundColor="#f8f9f9"
|
||||
backgroundOpacity={1}
|
||||
foregroundOpacity={1}
|
||||
/>
|
||||
)}
|
||||
{showEmbeddingContent && (
|
||||
<EmbeddingBody embeddingLink={shareLink} />
|
||||
)}
|
||||
</StyledModalRowContainer>
|
||||
</ModalDialog.Body>
|
||||
<ModalDialog.Footer>
|
||||
<Button
|
||||
className="sharing_panel-button"
|
||||
label={t("Common:SaveButton")}
|
||||
size="big"
|
||||
primary
|
||||
onClick={this.onSaveClick}
|
||||
isDisabled={isLoading}
|
||||
/>
|
||||
</ModalDialog.Footer>
|
||||
</ModalDialog>
|
||||
) : (
|
||||
<StyledAsidePanel visible={visible}>
|
||||
<Backdrop
|
||||
onClick={this.onClose}
|
||||
|
@ -41,7 +41,11 @@ class LinkRow extends React.Component {
|
||||
const isDisabled = isLoading || disableLink;
|
||||
|
||||
return (
|
||||
<StyledLinkRow withToggle={withToggle} isDisabled={isDisabled}>
|
||||
<StyledLinkRow
|
||||
withToggle={withToggle}
|
||||
isDisabled={isDisabled}
|
||||
className="link-row__container"
|
||||
>
|
||||
<Row
|
||||
className="link-row"
|
||||
key={`${linkText.replace(" ", "-")}-key_${index}`}
|
||||
|
@ -92,11 +92,11 @@ const StyledVersionHistoryPanel = styled.div`
|
||||
${PanelStyles}
|
||||
.version-history-modal-dialog {
|
||||
transform: translateX(${(props) => (props.visible ? "0" : "720px")});
|
||||
width: 720px;
|
||||
width: 500px;
|
||||
}
|
||||
.version-history-aside-panel {
|
||||
transform: translateX(${(props) => (props.visible ? "0" : "720px")});
|
||||
width: 720px;
|
||||
width: 500px;
|
||||
}
|
||||
.version-history-panel-header {
|
||||
height: 53px;
|
||||
@ -780,6 +780,125 @@ const StyledFilesList = styled.div`
|
||||
grid-template-columns: 22px 32px 1fr;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledModalRowContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 47px;
|
||||
|
||||
.link-row__container {
|
||||
width: 100%;
|
||||
|
||||
.link-row {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.link-row::after {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.panel_combo-box {
|
||||
margin-left: 0px;
|
||||
|
||||
.combo-button {
|
||||
height: 30px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.optionalBlock {
|
||||
margin-right: 4px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.combo-button-label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sharing-access-combo-box-icon {
|
||||
height: 16px;
|
||||
path {
|
||||
fill: ${(props) => (props.isDisabled ? "#D0D5DA" : "#A3A9AE")};
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
min-height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.embedding-panel_code-container {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.embedding-panel_text {
|
||||
padding: 8px 0 4px 0;
|
||||
}
|
||||
|
||||
.embedding-panel_copy-icon {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
margin: 8px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.embedding-panel_links-container {
|
||||
display: flex;
|
||||
.embedding-panel_link {
|
||||
margin-right: 8px;
|
||||
height: 32px;
|
||||
background-color: #eceef1;
|
||||
line-height: 30px;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.embedding-panel_inputs-container {
|
||||
display: flex;
|
||||
|
||||
.embedding-panel_input {
|
||||
margin-right: 8px;
|
||||
width: 94px;
|
||||
}
|
||||
}
|
||||
|
||||
.embedding-panel_code-container {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.embedding-panel_text {
|
||||
padding: 8px 0 4px 0;
|
||||
}
|
||||
|
||||
.embedding-panel_copy-icon {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
margin: 8px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.panel-loader-wrapper {
|
||||
margin-top: 8px;
|
||||
padding-left: 32px;
|
||||
}
|
||||
.panel-loader {
|
||||
display: inline;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.row_content {
|
||||
height: 19px;
|
||||
overflow: initial;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export {
|
||||
StyledAsidePanel,
|
||||
StyledAddGroupsPanel,
|
||||
@ -795,4 +914,5 @@ export {
|
||||
StyledSelectFolderPanel,
|
||||
StyledSelectFilePanel,
|
||||
StyledFilesList,
|
||||
StyledModalRowContainer,
|
||||
};
|
||||
|
@ -1,10 +1,14 @@
|
||||
import React from "react";
|
||||
import CustomScrollbarsVirtualList from "@appserver/components/scrollbar/custom-scrollbars-virtual-list";
|
||||
import CustomScrollbars from "@appserver/components/scrollbar/custom-scrollbars-virtual-list";
|
||||
import AutoSizer from "react-virtualized-auto-sizer";
|
||||
import { FixedSizeList as List } from "react-window";
|
||||
import RowWrapper from "./RowWrapper";
|
||||
import { inject, observer } from "mobx-react";
|
||||
|
||||
const CustomScrollbarsVirtualList = React.forwardRef((props, ref) => (
|
||||
<CustomScrollbars stype="mediumBlack" {...props} forwardedRef={ref} />
|
||||
));
|
||||
|
||||
const FileList = ({ uploadDataFiles }) => {
|
||||
//console.log("FileList render");
|
||||
|
||||
|
@ -87,7 +87,11 @@ class UploadPanelComponent extends React.Component {
|
||||
zIndex={zIndex}
|
||||
isAside={true}
|
||||
/>
|
||||
<Aside className="header_aside-panel" visible={visible}>
|
||||
<Aside
|
||||
className="header_aside-panel"
|
||||
visible={visible}
|
||||
withoutBodyScroll
|
||||
>
|
||||
<StyledContent>
|
||||
<StyledHeaderContent className="upload-panel_header-content">
|
||||
<Heading className="upload_panel-header" size="medium" truncate>
|
||||
|
@ -63,6 +63,10 @@ const StyledTableRow = styled(TableRow)`
|
||||
"url(images/cursor.palm.svg), auto"};
|
||||
}
|
||||
|
||||
.table-container_element {
|
||||
margin-left: ${(props) => (props.isFolder ? "-3px" : "-4px")};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.table-container_row-checkbox-wrapper {
|
||||
${(props) => props.dragging && rowCheckboxDraggingHoverStyle}
|
||||
@ -236,6 +240,7 @@ const FilesTableRow = (props) => {
|
||||
onClick={onMouseClick}
|
||||
{...contextOptionsProps}
|
||||
isActive={isActive}
|
||||
isFolder={item.isFolder}
|
||||
onHideContextMenu={onHideContextMenu}
|
||||
isThirdPartyFolder={item.isThirdPartyFolder}
|
||||
onDoubleClick={onFilesClick}
|
||||
|
@ -9,6 +9,7 @@ import Text from "@appserver/components/text";
|
||||
import TileContent from "./sub-components/TileContent";
|
||||
import withContent from "../../../../../HOCs/withContent";
|
||||
import withBadges from "../../../../../HOCs/withBadges";
|
||||
import { isMobile } from "react-device-detect";
|
||||
|
||||
const SimpleFilesTileContent = styled(TileContent)`
|
||||
.row-main-container {
|
||||
@ -54,7 +55,8 @@ const SimpleFilesTileContent = styled(TileContent)`
|
||||
}
|
||||
|
||||
.title-link {
|
||||
font-size: 14px;
|
||||
font-size: ${isMobile ? "15px" : "13px"};
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.favorite,
|
||||
@ -83,18 +85,14 @@ const FilesTileContent = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<SimpleFilesTileContent
|
||||
sideColor="#333"
|
||||
isFile={fileExst}
|
||||
//disableSideInfo
|
||||
>
|
||||
<SimpleFilesTileContent sideColor="#333" isFile={fileExst}>
|
||||
<Link
|
||||
className="title-link item-file-name"
|
||||
containerWidth="100%"
|
||||
type="page"
|
||||
title={title}
|
||||
fontWeight="600"
|
||||
fontSize="14px"
|
||||
fontSize={isMobile ? "15px" : "13px"}
|
||||
target="_blank"
|
||||
{...linkStyles}
|
||||
color="#333"
|
||||
@ -106,7 +104,7 @@ const FilesTileContent = ({
|
||||
className="badge-ext"
|
||||
as="span"
|
||||
color="#A3A9AE"
|
||||
fontSize="14px"
|
||||
fontSize={isMobile ? "15px" : "13px"}
|
||||
fontWeight={600}
|
||||
truncate={true}
|
||||
>
|
||||
|
@ -6,6 +6,7 @@ import { ReactSVG } from "react-svg";
|
||||
import styled, { css } from "styled-components";
|
||||
import ContextMenu from "@appserver/components/context-menu";
|
||||
import { tablet } from "@appserver/components/utils/device";
|
||||
import { isDesktop, isMobile } from "react-device-detect";
|
||||
|
||||
import Link from "@appserver/components/link";
|
||||
|
||||
@ -100,9 +101,11 @@ const StyledTile = styled.div`
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display: flex;
|
||||
opacity: ${(props) => (props.checked ? 1 : 0)};
|
||||
flex: 0 0 16px;
|
||||
margin-right: 4px;
|
||||
justify-content: center;
|
||||
|
||||
@media ${tablet} {
|
||||
opacity: 1;
|
||||
@ -112,11 +115,18 @@ const StyledTile = styled.div`
|
||||
.file-checkbox {
|
||||
display: ${(props) => (props.checked ? "flex" : "none")};
|
||||
flex: 0 0 16px;
|
||||
margin-right: ${(props) => (props.isFolder ? "8px" : "4px")};
|
||||
margin-top: 3px;
|
||||
|
||||
margin-left: ${(props) =>
|
||||
isMobile
|
||||
? css`
|
||||
${props.isFolder ? "6px" : "12px"};
|
||||
`
|
||||
: css`
|
||||
${props.isFolder ? "5px" : "8px"}
|
||||
`};
|
||||
|
||||
@media ${tablet} {
|
||||
display: flex;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
@ -126,33 +136,47 @@ const StyledTile = styled.div`
|
||||
flex: 0 0 auto;
|
||||
margin-right: 4px;
|
||||
user-select: none;
|
||||
margin-top: 3px;
|
||||
margin-top: ${(props) => (props.isFolder ? "-6px" : "-4px")};
|
||||
margin-top: ${(props) => (props.isFolder ? "-8px" : "-6px")};
|
||||
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
height: ${isMobile ? "32px" : "24px"};
|
||||
width: ${isMobile ? "32px" : "24px"};
|
||||
|
||||
img {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
height: ${isMobile ? "32px" : "24px"};
|
||||
width: ${isMobile ? "32px" : "24px"};
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
display: none;
|
||||
}
|
||||
margin-left: ${(props) =>
|
||||
isMobile
|
||||
? css`
|
||||
${props.isFolder ? "2px" : "4px"};
|
||||
`
|
||||
: css`
|
||||
${props.isFolder ? "2px" : "4px"}
|
||||
`};
|
||||
}
|
||||
|
||||
.file-icon_container {
|
||||
min-width: 36px;
|
||||
min-width: ${isMobile ? "36px" : "28px"};
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
min-width: 28px;
|
||||
}
|
||||
.styled-content {
|
||||
padding-left: 10px;
|
||||
|
||||
padding-left: ${(props) =>
|
||||
isMobile
|
||||
? css`
|
||||
${props.isFolder ? "8px" : "12px"};
|
||||
`
|
||||
: css`
|
||||
${props.isFolder ? "10px" : "13px"}
|
||||
`};
|
||||
}
|
||||
|
||||
:hover {
|
||||
${(props) =>
|
||||
!props.dragging &&
|
||||
props.isDesktop &&
|
||||
css`
|
||||
.checkbox {
|
||||
opacity: 1;
|
||||
@ -173,8 +197,12 @@ const StyledFileTileTop = styled.div`
|
||||
align-items: baseline;
|
||||
background-color: #f8f9f9;
|
||||
padding: 13px;
|
||||
height: 157px;
|
||||
height: ${(props) => (props.checked || props.isActive ? "156px" : "156px")};
|
||||
position: relative;
|
||||
border-bottom: ${(props) =>
|
||||
props.checked || props.isActive
|
||||
? "1px solid #D0D5DA"
|
||||
: "1px solid transparent"};
|
||||
|
||||
.thumbnail-image,
|
||||
.temporary-icon > .injected-svg {
|
||||
@ -195,8 +223,6 @@ const StyledFileTileBottom = styled.div`
|
||||
padding-right: 0;
|
||||
min-height: 56px;
|
||||
box-sizing: border-box;
|
||||
border-top: ${(props) =>
|
||||
(props.checked || props.isActive) && "1px solid #D0D5DA"};
|
||||
`;
|
||||
|
||||
const StyledContent = styled.div`
|
||||
@ -292,6 +318,13 @@ class Tile extends React.PureComponent {
|
||||
onSelect && onSelect(e.target.checked, item);
|
||||
};
|
||||
|
||||
onFileIconClick = () => {
|
||||
if (isDesktop) return;
|
||||
|
||||
const { onSelect, item } = this.props;
|
||||
onSelect && onSelect(true, item);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
checked,
|
||||
@ -348,12 +381,18 @@ class Tile extends React.PureComponent {
|
||||
isRecycleBin={isRecycleBin}
|
||||
checked={checked}
|
||||
isActive={isActive}
|
||||
isDesktop={isDesktop}
|
||||
>
|
||||
{isFolder || (!fileExst && id === -1) ? (
|
||||
<>
|
||||
{renderElement && !(!fileExst && id === -1) && !isEdit && (
|
||||
<div className="file-icon_container">
|
||||
<StyledElement className="file-icon">{element}</StyledElement>
|
||||
<StyledElement
|
||||
className="file-icon"
|
||||
onClick={this.onFileIconClick}
|
||||
>
|
||||
{element}
|
||||
</StyledElement>
|
||||
<Checkbox
|
||||
className="checkbox file-checkbox"
|
||||
isChecked={checked}
|
||||
@ -363,6 +402,7 @@ class Tile extends React.PureComponent {
|
||||
</div>
|
||||
)}
|
||||
<StyledContent
|
||||
className="styled-content"
|
||||
isFolder={(isFolder && !fileExst) || (!fileExst && id === -1)}
|
||||
>
|
||||
{children}
|
||||
@ -386,11 +426,15 @@ class Tile extends React.PureComponent {
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<StyledFileTileTop>{icon}</StyledFileTileTop>
|
||||
<StyledFileTileBottom checked={checked} isActive={isActive}>
|
||||
<StyledFileTileTop checked={checked} isActive={isActive}>
|
||||
{icon}
|
||||
</StyledFileTileTop>
|
||||
<StyledFileTileBottom>
|
||||
{id !== -1 && !isEdit && (
|
||||
<div className="file-icon_container">
|
||||
<div className="file-icon">{element}</div>
|
||||
<div className="file-icon" onClick={this.onFileIconClick}>
|
||||
{element}
|
||||
</div>
|
||||
<Checkbox
|
||||
className="file-checkbox"
|
||||
isChecked={checked}
|
||||
|
@ -1,35 +1,50 @@
|
||||
/* eslint-disable react/display-name */
|
||||
import React, { memo } from "react";
|
||||
import styled from "styled-components";
|
||||
import styled, { css } from "styled-components";
|
||||
import PropTypes from "prop-types";
|
||||
import { FixedSizeList as List, areEqual } from "react-window";
|
||||
import AutoSizer from "react-virtualized-auto-sizer";
|
||||
import Heading from "@appserver/components/heading";
|
||||
import ContextMenu from "@appserver/components/context-menu";
|
||||
import CustomScrollbarsVirtualList from "@appserver/components/scrollbar";
|
||||
import { tablet } from "@appserver/components/utils/device";
|
||||
|
||||
import { tablet, desktop } from "@appserver/components/utils/device";
|
||||
|
||||
const foldersStyle = css`
|
||||
grid-gap: 19px 14px;
|
||||
|
||||
@media ${desktop} {
|
||||
margin-left: -1px;
|
||||
padding-right: 1px;
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
grid-gap: 17px 12px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
`;
|
||||
|
||||
const filesStyle = css`
|
||||
grid-gap: 14px 18px;
|
||||
|
||||
@media ${desktop} {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
grid-gap: 12px 14px;
|
||||
margin-left: -1px;
|
||||
padding-right: 2px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledGridWrapper = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
width: 100%;
|
||||
grid-gap: ${(props) => (props.isFolders ? "13px 14px" : "16px 18px")};
|
||||
padding-bottom: 24px;
|
||||
padding-right: 2px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 1px;
|
||||
|
||||
@media ${tablet} {
|
||||
margin-left: -6px !important;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-left: -2px;
|
||||
}
|
||||
${(props) => (props.isFolders ? foldersStyle : filesStyle)};
|
||||
`;
|
||||
|
||||
const StyledTileContainer = styled.div`
|
||||
@ -59,6 +74,8 @@ const StyledTileContainer = styled.div`
|
||||
&.files {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
@ -68,6 +85,10 @@ const StyledTileContainer = styled.div`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
margin-right: -3px;
|
||||
}
|
||||
`;
|
||||
|
||||
class TileContainer extends React.PureComponent {
|
||||
|
@ -1062,7 +1062,7 @@ class FilesStore {
|
||||
const { getFileIcon, getFolderIcon } = this.formatsStore.iconFormatsStore;
|
||||
|
||||
if (items.length && items[0].id === -1) return; //TODO: if change media collection from state remove this;
|
||||
const iconSize = this.viewAs === "tile" ? 32 : 24;
|
||||
const iconSize = this.viewAs === "tile" && isMobile ? 32 : 24;
|
||||
const icon = this.fileActionStore.extension
|
||||
? getFileIcon(`.${this.fileActionStore.extension}`, iconSize)
|
||||
: getFolderIcon(null, iconSize);
|
||||
@ -1134,7 +1134,7 @@ class FilesStore {
|
||||
const isThirdPartyFolder = providerKey && id === rootFolderId;
|
||||
|
||||
//const isCanWebEdit = canWebEdit(item.fileExst);
|
||||
const iconSize = this.viewAs === "table" ? 24 : 32;
|
||||
const iconSize = this.viewAs === "table" ? 24 : this.viewAs === "tile" && isMobile ? 32 : 24;
|
||||
const icon = getIcon(iconSize, fileExst, providerKey, contentLength);
|
||||
|
||||
let isFolder = false;
|
||||
|
@ -389,7 +389,7 @@ class UploadDataStore {
|
||||
this.uploadToFolder = null;
|
||||
this.percent = 0;
|
||||
}
|
||||
if (this.converted) {
|
||||
if (this.uploaded && this.converted) {
|
||||
this.files = [];
|
||||
this.filesToConversion = [];
|
||||
}
|
||||
@ -874,25 +874,25 @@ class UploadDataStore {
|
||||
return;
|
||||
}
|
||||
|
||||
let operationItem = null;
|
||||
let operationItem = data;
|
||||
let finished = data.finished;
|
||||
|
||||
while (progress !== 100) {
|
||||
await this.getOperationProgress(data.id)
|
||||
.then((item) => {
|
||||
operationItem = item;
|
||||
progress = item ? item.progress : 100;
|
||||
while (!finished) {
|
||||
const item = await this.getOperationProgress(data.id);
|
||||
operationItem = item;
|
||||
progress = item ? item.progress : 100;
|
||||
finished = item.finished;
|
||||
|
||||
setSecondaryProgressBarData({
|
||||
icon: pbData.icon,
|
||||
label: pbData.label || label,
|
||||
percent: progress,
|
||||
visible: true,
|
||||
alert: false,
|
||||
});
|
||||
})
|
||||
.catch((err) => Promise.reject(err));
|
||||
setSecondaryProgressBarData({
|
||||
icon: pbData.icon,
|
||||
label: pbData.label || label,
|
||||
percent: progress,
|
||||
visible: true,
|
||||
alert: false,
|
||||
});
|
||||
}
|
||||
return Promise.resolve(operationItem);
|
||||
|
||||
return operationItem;
|
||||
};
|
||||
|
||||
moveToCopyTo = (destFolderId, pbData, isCopy) => {
|
||||
|
@ -515,6 +515,7 @@ namespace ASC.Files.Core.Data
|
||||
|
||||
var toInsert = FilesDbContext.Tree
|
||||
.Where(r => r.FolderId == toFolderId)
|
||||
.OrderBy(r => r.Level)
|
||||
.ToList();
|
||||
|
||||
foreach (var subfolder in subfolders)
|
||||
@ -525,7 +526,7 @@ namespace ASC.Files.Core.Data
|
||||
{
|
||||
FolderId = subfolder.Key,
|
||||
ParentId = f.ParentId,
|
||||
Level = f.Level + 1
|
||||
Level = subfolder.Value + 1 + f.Level
|
||||
};
|
||||
FilesDbContext.AddOrUpdate(r => r.Tree, newTree);
|
||||
}
|
||||
|
@ -36,6 +36,7 @@ using ASC.Common.Threading;
|
||||
using ASC.Common.Web;
|
||||
using ASC.Core.Tenants;
|
||||
using ASC.Files.Core;
|
||||
using ASC.Files.Core.EF;
|
||||
using ASC.Files.Core.Resources;
|
||||
using ASC.MessagingSystem;
|
||||
using ASC.Web.Core.Files;
|
||||
@ -116,11 +117,44 @@ namespace ASC.Web.Files.Services.WCFService.FileOperations
|
||||
stream,
|
||||
MimeMapping.GetMimeMapping(path),
|
||||
"attachment; filename=\"" + fileName + "\"");
|
||||
Result = string.Format("{0}?{1}=bulk&ext={2}", filesLinkUtility.FileHandlerPath, FilesLinkUtility.Action, archiveExtension);
|
||||
Result = string.Format("{0}?{1}=bulk&ext={2}", filesLinkUtility.FileHandlerPath, FilesLinkUtility.Action, archiveExtension);
|
||||
|
||||
TaskInfo.SetProperty(PROGRESS, 100);
|
||||
TaskInfo.SetProperty(RESULT, Result);
|
||||
TaskInfo.SetProperty(FINISHED, true);
|
||||
|
||||
}
|
||||
|
||||
FillDistributedTask();
|
||||
TaskInfo.PublishChanges();
|
||||
}
|
||||
|
||||
public override void PublishChanges(DistributedTask task)
|
||||
{
|
||||
var thirdpartyTask = ThirdPartyOperation.GetDistributedTask();
|
||||
var daoTask = DaoOperation.GetDistributedTask();
|
||||
|
||||
var error1 = thirdpartyTask.GetProperty<string>(ERROR);
|
||||
var error2 = daoTask.GetProperty<string>(ERROR);
|
||||
|
||||
if (!string.IsNullOrEmpty(error1))
|
||||
{
|
||||
Error = error1;
|
||||
}
|
||||
else if (!string.IsNullOrEmpty(error2))
|
||||
{
|
||||
Error = error2;
|
||||
}
|
||||
|
||||
successProcessed = thirdpartyTask.GetProperty<int>(PROCESSED) + daoTask.GetProperty<int>(PROCESSED);
|
||||
|
||||
var progressSteps = ThirdPartyOperation.Total + DaoOperation.Total + 1;
|
||||
|
||||
var progress = (int)(successProcessed / (double)progressSteps * 100);
|
||||
|
||||
base.FillDistributedTask();
|
||||
|
||||
TaskInfo.SetProperty(PROGRESS, progress < 100 ? progress : progress);
|
||||
TaskInfo.PublishChanges();
|
||||
}
|
||||
}
|
||||
|
||||
@ -145,7 +179,8 @@ namespace ASC.Web.Files.Services.WCFService.FileOperations
|
||||
{
|
||||
if (!Files.Any() && !Folders.Any()) return;
|
||||
|
||||
entriesPathId = GetEntriesPathId(scope);
|
||||
entriesPathId = GetEntriesPathId(scope);
|
||||
|
||||
if (entriesPathId == null || entriesPathId.Count == 0)
|
||||
{
|
||||
if (Files.Count > 0)
|
||||
@ -156,7 +191,11 @@ namespace ASC.Web.Files.Services.WCFService.FileOperations
|
||||
throw new DirectoryNotFoundException(FilesCommonResource.ErrorMassage_FolderNotFound);
|
||||
}
|
||||
|
||||
ReplaceLongPath(entriesPathId);
|
||||
ReplaceLongPath(entriesPathId);
|
||||
|
||||
Total = entriesPathId.Count;
|
||||
|
||||
TaskInfo.PublishChanges();
|
||||
}
|
||||
|
||||
private ItemNameValueCollection<T> ExecPathFromFile(IServiceScope scope, File<T> file, string path)
|
||||
@ -236,7 +275,7 @@ namespace ASC.Web.Files.Services.WCFService.FileOperations
|
||||
}
|
||||
return entriesPathId;
|
||||
}
|
||||
|
||||
|
||||
internal void CompressToZip(Stream stream, IServiceScope scope)
|
||||
{
|
||||
if (entriesPathId == null) return;
|
||||
@ -345,6 +384,15 @@ namespace ASC.Web.Files.Services.WCFService.FileOperations
|
||||
}
|
||||
compressTo.CloseEntry();
|
||||
counter++;
|
||||
|
||||
if (!Equals(entryId, default(T)) && file != null)
|
||||
{
|
||||
ProcessedFile(entryId);
|
||||
}
|
||||
else
|
||||
{
|
||||
ProcessedFolder(default(T));
|
||||
}
|
||||
}
|
||||
|
||||
ProgressStep();
|
||||
|
@ -149,7 +149,7 @@ namespace ASC.Web.Files.Services.WCFService.FileOperations
|
||||
base.FillDistributedTask();
|
||||
}
|
||||
|
||||
public void PublishChanges(DistributedTask task)
|
||||
public virtual void PublishChanges(DistributedTask task)
|
||||
{
|
||||
var thirdpartyTask = ThirdPartyOperation.GetDistributedTask();
|
||||
var daoTask = DaoOperation.GetDistributedTask();
|
||||
|
@ -11,7 +11,7 @@
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="AppLimit.CloudComputing.SharpBox" Version="1.1.0.456" />
|
||||
<PackageReference Include="AppLimit.CloudComputing.SharpBox" Version="1.1.0.457" />
|
||||
<PackageReference Include="Autofac" Version="6.0.0" />
|
||||
<PackageReference Include="Autofac.Configuration" Version="6.0.0" />
|
||||
<PackageReference Include="Autofac.Extensions.DependencyInjection" Version="7.1.0" />
|
||||
|
@ -21,8 +21,6 @@ class ContactField extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log("ContactField render");
|
||||
|
||||
const {
|
||||
isDisabled,
|
||||
|
||||
|
@ -66,8 +66,6 @@ class ContactsField extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log("ContactsField render");
|
||||
|
||||
const {
|
||||
pattern,
|
||||
contacts,
|
||||
|
@ -9,8 +9,6 @@ class DateField extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log("DateField render");
|
||||
|
||||
const {
|
||||
isRequired,
|
||||
hasError,
|
||||
|
@ -16,8 +16,6 @@ class DepartmentField extends React.Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
console.log("DepartmentField render");
|
||||
|
||||
const {
|
||||
isRequired,
|
||||
isDisabled,
|
||||
|
@ -9,8 +9,6 @@ class EmailField extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log("EmailField render");
|
||||
|
||||
const {
|
||||
isRequired,
|
||||
hasError,
|
||||
|
@ -11,8 +11,6 @@ class PasswordField extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log("PasswordField render");
|
||||
|
||||
const {
|
||||
isRequired,
|
||||
hasError,
|
||||
|
@ -9,8 +9,6 @@ class RadioField extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
//console.log("RadioField render");
|
||||
|
||||
const {
|
||||
isRequired,
|
||||
hasError,
|
||||
|
@ -18,8 +18,6 @@ class TextChangeField extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log("TextChangeField render");
|
||||
|
||||
const {
|
||||
isRequired,
|
||||
hasError,
|
||||
|
@ -9,8 +9,6 @@ class TextField extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log("TextField render");
|
||||
|
||||
const {
|
||||
isRequired,
|
||||
hasError,
|
||||
|
@ -499,7 +499,6 @@ class UpdateUserForm extends React.Component {
|
||||
this.setState({ isLoading: true });
|
||||
const { profile, setAvatarMax, personal } = this.props;
|
||||
|
||||
console.log("profile", profile);
|
||||
if (isUpdate) {
|
||||
createThumbnailsAvatar(profile.id, {
|
||||
x: Math.round(result.x * avatar.defaultWidth - result.width / 2),
|
||||
@ -727,7 +726,6 @@ class UpdateUserForm extends React.Component {
|
||||
source={this.props.avatarMax || profile.avatarMax}
|
||||
userName={profile.displayName}
|
||||
editing={true}
|
||||
editLabel={t("Common:EditAvatar")}
|
||||
editAction={
|
||||
isMobile ? this.openAvatarEditorPage : this.openAvatarEditor
|
||||
}
|
||||
|
3
public/images/pencil.react.svg
Normal file
3
public/images/pencil.react.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.35866 11.0127L0.366956 14.6494C0.204108 15.2466 0.752062 15.7945 1.34924 15.6317L4.98595 14.64C5.32177 14.5484 5.62787 14.3708 5.87399 14.1247L12.7918 7.20689L8.79177 3.20689L1.87399 10.1247C1.62787 10.3708 1.45024 10.6769 1.35866 11.0127ZM10.2059 1.79264L14.2059 5.79264L14.9985 4.99999C16.103 3.89541 16.103 2.1046 14.9985 1.00006C13.8939 -0.104537 12.103 -0.104507 10.9984 1.00012L10.2059 1.79264Z" fill="white"/>
|
||||
</svg>
|
After Width: | Height: | Size: 572 B |
Loading…
Reference in New Issue
Block a user