Web: Files: icons moved to separate file

This commit is contained in:
Artem Tarasov 2021-04-13 13:13:29 +03:00
parent 6467a66773
commit 999722ada7
4 changed files with 53 additions and 46 deletions

View File

@ -10,8 +10,8 @@ import Text from "@appserver/components/text";
import Tile from "./FilesTile/sub-components/Tile"; import Tile from "./FilesTile/sub-components/Tile";
import FilesContent from "./FilesContent"; import FilesContent from "./FilesContent";
import { SimpleFilesRow, EncryptedFileIcon } from "./FilesRow/SimpleFilesRow"; import SimpleFilesRow from "./FilesRow/SimpleFilesRow";
import { EncryptedFileIcon } from "./sub-components/Icons";
const svgLoader = () => <div style={{ width: "24px" }}></div>; const svgLoader = () => <div style={{ width: "24px" }}></div>;
const FileItem = (props) => { const FileItem = (props) => {

View File

@ -1,7 +1,7 @@
import styled from "styled-components"; import styled from "styled-components";
import Row from "@appserver/components/row"; import Row from "@appserver/components/row";
export const SimpleFilesRow = styled(Row)` export default styled(Row)`
margin-top: -2px; margin-top: -2px;
${(props) => ${(props) =>
!props.contextOptions && !props.contextOptions &&
@ -36,12 +36,3 @@ export const SimpleFilesRow = styled(Row)`
margin-right: 7px; margin-right: 7px;
} }
`; `;
export const EncryptedFileIcon = styled.div`
background: url("images/security.svg") no-repeat 0 0 / 16px 16px transparent;
height: 16px;
position: absolute;
width: 16px;
margin-top: 14px;
margin-left: ${(props) => (props.isEdit ? "40px" : "12px")};
`;

View File

@ -1,42 +1,13 @@
import React from "react"; import React from "react";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import styled from "styled-components";
import { ShareAccessRights } from "@appserver/common/constants"; import { ShareAccessRights } from "@appserver/common/constants";
import Badge from "@appserver/components/badge"; import Badge from "@appserver/components/badge";
import IconButton from "@appserver/components/icon-button"; import IconButton from "@appserver/components/icon-button";
import commonIconsStyles from "@appserver/components/utils/common-icons-style"; import {
import FavoriteIcon from "../../../../../../../public/images/favorite.react.svg"; StyledFavoriteIcon,
import FileActionsConvertEditDocIcon from "../../../../../../../public/images/file.actions.convert.edit.doc.react.svg"; StyledFileActionsConvertEditDocIcon,
import FileActionsLockedIcon from "../../../../../../../public/images/file.actions.locked.react.svg"; StyledFileActionsLockedIcon,
} from "./Icons";
export const StyledFavoriteIcon = styled(FavoriteIcon)`
${commonIconsStyles}
&:hover {
cursor: pointer;
}
`;
export const StyledFileActionsConvertEditDocIcon = styled(
FileActionsConvertEditDocIcon
)`
${commonIconsStyles}
path {
fill: #3b72a7;
}
&:hover {
cursor: pointer;
}
`;
export const StyledFileActionsLockedIcon = styled(FileActionsLockedIcon)`
${commonIconsStyles}
path {
fill: #3b72a7;
}
&:hover {
cursor: pointer;
}
`;
const Badges = (props) => { const Badges = (props) => {
const { const {

View File

@ -0,0 +1,45 @@
import styled from "styled-components";
import commonIconsStyles from "@appserver/components/utils/common-icons-style";
import FavoriteIcon from "../../../../../../../public/images/favorite.react.svg";
import FileActionsConvertEditDocIcon from "../../../../../../../public/images/file.actions.convert.edit.doc.react.svg";
import FileActionsLockedIcon from "../../../../../../../public/images/file.actions.locked.react.svg";
export const StyledFavoriteIcon = styled(FavoriteIcon)`
${commonIconsStyles}
&:hover {
cursor: pointer;
}
`;
export const StyledFileActionsConvertEditDocIcon = styled(
FileActionsConvertEditDocIcon
)`
${commonIconsStyles}
path {
fill: #3b72a7;
}
&:hover {
cursor: pointer;
}
`;
export const StyledFileActionsLockedIcon = styled(FileActionsLockedIcon)`
${commonIconsStyles}
path {
fill: #3b72a7;
}
&:hover {
cursor: pointer;
}
`;
export const EncryptedFileIcon = styled.div`
background: url("images/security.svg") no-repeat 0 0 / 16px 16px transparent;
height: 16px;
position: absolute;
width: 16px;
margin-top: 14px;
margin-left: ${(props) => (props.isEdit ? "40px" : "12px")};
`;