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

Web:Files:Badges:Functional badges, styles, moved from the FilesRowContent component to the SimpleFilesRow component.

Browse Source 
HOC withBadges removed from the FilesRowContent component, added to the SimpleFilesRow component.
The SharedButton has been added to the Badges component, and the badge className has been added to the SharedButton. Removed SharedButton text.
This commit is contained in:
Vlada Gazizova 2021-12-02 16:26:08 +03:00
parent d94ea502df
commit 5590eca01e
8 changed files with 76 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
products/ASC.Files/Client/src/HOCs/withBadges.js
View File

@ -56,6 +56,7 @@ export default function withBadges(WrappedComponent) {
);
}
};
onBadgeClick = () => {
const {
item,
@ -141,6 +142,7 @@ export default function withBadges(WrappedComponent) {
onFilesClick, // from withFileAction HOC
isAdmin,
isDesktopClient,
showShare,
} = this.props;
const { fileStatus, access } = item;
@ -157,6 +159,7 @@ export default function withBadges(WrappedComponent) {
item={item}
isAdmin={isAdmin}
showNew={showNew}
showShare={showShare}
newItems={newItems}
canWebEdit={canWebEdit}
canConvert={canConvert}

1
products/ASC.Files/Client/src/HOCs/withFileActions.js
View File

@ -249,6 +249,7 @@ export default function withFileActions(WrappedFileItem) {
const isShareable = allowShareIn && item.canShare;
const isMobileView = sectionWidth < 500;
const displayShareButton = isMobileView
? "26px"
: !isShareable

40
products/ASC.Files/Client/src/components/Badges.js
View File

@ -6,6 +6,7 @@ import {
StyledFileActionsConvertEditDocIcon,
StyledFileActionsLockedIcon,
} from "./Icons";
import SharedButton from "@appserver/files/src/components/SharedButton";
const Badges = ({
t,
@ -18,6 +19,7 @@ const Badges = ({
canConvert,
accessToEdit,
showNew,
showShare,
onFilesClick,
onClickLock,
onClickFavorite,
@ -44,6 +46,21 @@ const Badges = ({
return fileExst ? (
<div className="badges additional-badges">
{version > 1 && (
<Badge
className="badge-version icons-group"
backgroundColor="#A3A9AE"
borderRadius="11px"
color="#FFFFFF"
fontSize="10px"
fontWeight={800}
label={`Ver.${versionGroup}`}
maxWidth="50px"
onClick={onShowVersionHistory}
padding="0 5px"
data-id={id}
/>
)}
{canConvert && !isTrashFolder && (
<IconButton
onClick={setConvertDialogVisible}
@ -80,6 +97,14 @@ const Badges = ({
size="small"
/>
)}
{item.canShare && showShare ? (
<SharedButton
t={t}
id={item.id}
shared={item.shared}
isFolder={item.isFolder}
/>
) : null}
{locked && accessToEdit && !isTrashFolder && (
<StyledFileActionsLockedIcon
className="badge lock-file icons-group"
@ -99,21 +124,6 @@ const Badges = ({
onClick={onClickFavorite}
/>
)}
{version > 1 && (
<Badge
className="badge-version icons-group"
backgroundColor="#A3A9AE"
borderRadius="11px"
color="#FFFFFF"
fontSize="10px"
fontWeight={800}
label={`Ver.${versionGroup}`}
maxWidth="50px"
onClick={onShowVersionHistory}
padding="0 5px"
data-id={id}
/>
)}
{(showNew || isNewWithFav) && (
<Badge
className="badge-version icons-group"

3
products/ASC.Files/Client/src/components/SharedButton.js
View File

@ -25,7 +25,7 @@ const SharedButton = ({
return (
<Text
className="share-button"
className="badge share-button"
as="span"
title={t("Share")}
fontSize="12px"
@ -41,7 +41,6 @@ const SharedButton = ({
size={isSmallIcon ? 12 : 16}
iconName={icon}
/>
{t("Share")}
</Text>
);
};

31
products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js
View File

@ -9,7 +9,6 @@ import Text from "@appserver/components/text";
import RowContent from "@appserver/components/row-content";
import withContent from "../../../../../HOCs/withContent";
import withBadges from "../../../../../HOCs/withBadges";
const sideColor = "#A3A9AE";
@ -21,30 +20,6 @@ const SimpleFilesRowContent = styled(RowContent)`
margin-right: 8px;
}
.badge {
height: 14px;
width: 14px;
margin-right: 6px;
}
.lock-file {
cursor: ${(props) => (props.withAccess ? "pointer" : "default")};
}
.badges {
display: flex;
align-items: center;
height: 19px;
}
.favorite {
cursor: pointer;
margin-right: 6px;
}
.share-icon {
margin-top: -4px;
padding-right: 8px;
}
.row_update-text {
overflow: hidden;
text-overflow: ellipsis;
@ -59,7 +34,6 @@ const FilesRowContent = ({
updatedDate,
fileOwner,
linkStyles,
badgesComponent,
isAdmin,
}) => {
const {
@ -108,7 +82,6 @@ const FilesRowContent = ({
</Text>
)}
</Link>
<div className="badges">{badgesComponent}</div>
<Text
containerMinWidth="120px"
containerWidth="15%"
@ -156,7 +129,5 @@ const FilesRowContent = ({
};
export default withRouter(
withTranslation(["Home", "Translations"])(
withContent(withBadges(FilesRowContent))
)
withTranslation(["Home", "Translations"])(withContent(FilesRowContent))
);

54
products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
View File

@ -8,7 +8,7 @@ import { withRouter } from "react-router-dom";
import withFileActions from "../../../../../HOCs/withFileActions";
import withContextOptions from "../../../../../HOCs/withContextOptions";
import SharedButton from "../../../../../components/SharedButton";
import withBadges from "../../../../../HOCs/withBadges";
import ItemIcon from "../../../../../components/ItemIcon";
const checkedStyle = css`
@ -70,10 +70,6 @@ const StyledSimpleFilesRow = styled(Row)`
}
`}
.share-button-icon {
margin-right: 7px;
}
.share-button:hover,
.share-button-icon:hover {
cursor: pointer;
@ -95,6 +91,38 @@ const StyledSimpleFilesRow = styled(Row)`
/* width: ${(props) => (props.isEdit ? "52px" : "24px")}; */
margin-right: 7px;
}
.badge {
height: 14px;
width: 14px;
margin-right: 25px;
}
.badge:last-child {
margin-right: 0px;
}
.badge-version {
margin-right: 25px;
}
.lock-file {
cursor: ${(props) => (props.withAccess ? "pointer" : "default")};
}
.badges {
display: flex;
align-items: center;
height: 19px;
}
.favorite {
cursor: pointer;
}
.expandButton {
margin-left: 7px;
}
`;
const SimpleFilesRow = (props) => {
@ -110,6 +138,7 @@ const SimpleFilesRow = (props) => {
className,
isDragging,
value,
badgesComponent,
displayShareButton,
isPrivacy,
contextOptionsProps,
@ -117,20 +146,9 @@ const SimpleFilesRow = (props) => {
onFilesClick,
onMouseClick,
isEdit,
showShare,
isActive,
} = props;
const sharedButton =
item.canShare && showShare ? (
<SharedButton
t={t}
id={item.id}
shared={item.shared}
isFolder={item.isFolder}
/>
) : null;
const element = (
<ItemIcon id={item.id} icon={item.icon} fileExst={item.fileExst} />
);
@ -151,7 +169,7 @@ const SimpleFilesRow = (props) => {
isEdit={isEdit}
element={element}
sectionWidth={sectionWidth}
contentElement={sharedButton}
contentElement={badgesComponent}
onSelect={onContentFileSelect}
rowContextClick={fileContextClick}
isPrivacy={isPrivacy}
@ -176,5 +194,5 @@ const SimpleFilesRow = (props) => {
};
export default withTranslation(["Home", "Translations"])(
withFileActions(withRouter(withContextOptions(SimpleFilesRow)))
withFileActions(withRouter(withContextOptions(withBadges(SimpleFilesRow))))
);

1
products/ASC.Files/Client/src/pages/Home/Section/Body/index.js
View File

@ -180,6 +180,7 @@ const SectionBodyContent = (props) => {
};
//console.log("Files Home SectionBodyContent render", props);
return (
<Consumer>
{(context) =>

16
products/ASC.Files/Client/src/store/UploadDataStore.js
View File

@ -486,12 +486,12 @@ class UploadDataStore {
}
}
if (
if (
newPath[newPath.length - 1] !== this.selectedFolderStore.id &&
path.length
) {
) {
return;
}
}
const addNewFile = () => {
if (folderInfo) {
@ -557,7 +557,7 @@ class UploadDataStore {
const newExpandedKeys = expandedKeys.filter(
(x) => x !== newPath[newPath.length - 1] + ""
);
);
setExpandedKeys(newExpandedKeys);
@ -567,7 +567,7 @@ class UploadDataStore {
this.filesStore.folders.length === 1 ? this.filesStore.folders : [],
this.filesStore.folders.length
);
}
}
}
};
@ -652,7 +652,7 @@ class UploadDataStore {
} else {
if (currentFile.action === "uploaded") {
this.refreshFiles(currentFile);
}
}
return Promise.resolve();
}
};
@ -1036,8 +1036,8 @@ class UploadDataStore {
true,
true
).finally(() => {
setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
this.dialogsStore.setIsFolderActions(false);
setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
this.dialogsStore.setIsFolderActions(false);
});
} else {
setSecondaryProgressBarData({