Fixed Bug 53161 - Client.Files.Removed the narrowing of the line background when selecting.
This commit is contained in:
parent
7b3a18b0c2
commit
28fec434e6
@ -29,7 +29,7 @@ const StyledRow = styled.div`
|
||||
align-content: center;
|
||||
|
||||
.row-loader {
|
||||
padding: 16px 12px 12px 0px;
|
||||
padding: 15px 12px 12px 0px;
|
||||
}
|
||||
`;
|
||||
StyledRow.defaultProps = { theme: Base };
|
||||
|
@ -0,0 +1,17 @@
|
||||
import { css } from "styled-components";
|
||||
|
||||
const marginStyles = css`
|
||||
margin-left: -24px;
|
||||
margin-right: -24px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default marginStyles;
|
@ -3,7 +3,46 @@ import { inject, observer } from "mobx-react";
|
||||
import RowContainer from "@appserver/components/row-container";
|
||||
import SimpleFilesRow from "./SimpleFilesRow";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import styled from "styled-components";
|
||||
import marginStyles from "./CommonStyles";
|
||||
|
||||
const borderColor = "#ECEEF1";
|
||||
|
||||
const StyledRowContainer = styled(RowContainer)`
|
||||
.row-selected + .row-wrapper:not(.row-selected) {
|
||||
.files-row {
|
||||
border-top: ${`1px ${borderColor} solid`};
|
||||
margin-top: -3px;
|
||||
${marginStyles}
|
||||
}
|
||||
}
|
||||
|
||||
.row-wrapper:not(.row-selected) + .row-selected {
|
||||
.files-row {
|
||||
border-top: ${`1px ${borderColor} solid`};
|
||||
margin-top: -3px;
|
||||
${marginStyles}
|
||||
}
|
||||
}
|
||||
|
||||
.row-selected:last-child {
|
||||
.files-row {
|
||||
border-bottom: ${`1px ${borderColor} solid`};
|
||||
padding-bottom: 1px;
|
||||
${marginStyles}
|
||||
}
|
||||
.files-row::after {
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
.row-selected:first-child {
|
||||
.files-row {
|
||||
border-top: ${`1px ${borderColor} solid`};
|
||||
margin-top: -3px;
|
||||
${marginStyles}
|
||||
}
|
||||
}
|
||||
`;
|
||||
const FilesRowContainer = ({ filesList, sectionWidth, viewAs, setViewAs }) => {
|
||||
useEffect(() => {
|
||||
if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;
|
||||
@ -16,7 +55,7 @@ const FilesRowContainer = ({ filesList, sectionWidth, viewAs, setViewAs }) => {
|
||||
}, [sectionWidth]);
|
||||
|
||||
return (
|
||||
<RowContainer
|
||||
<StyledRowContainer
|
||||
className="files-row-container"
|
||||
draggable
|
||||
useReactWindow={false}
|
||||
@ -28,7 +67,7 @@ const FilesRowContainer = ({ filesList, sectionWidth, viewAs, setViewAs }) => {
|
||||
sectionWidth={sectionWidth}
|
||||
/>
|
||||
))}
|
||||
</RowContainer>
|
||||
</StyledRowContainer>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -10,20 +10,11 @@ import withFileActions from "../../../../../HOCs/withFileActions";
|
||||
import withContextOptions from "../../../../../HOCs/withContextOptions";
|
||||
import SharedButton from "../../../../../components/SharedButton";
|
||||
import ItemIcon from "../../../../../components/ItemIcon";
|
||||
import marginStyles from "./CommonStyles";
|
||||
|
||||
const checkedStyle = css`
|
||||
background: #f3f4f4;
|
||||
margin-left: -24px;
|
||||
margin-right: -24px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
${marginStyles}
|
||||
`;
|
||||
|
||||
const draggingStyle = css`
|
||||
@ -31,17 +22,7 @@ const draggingStyle = css`
|
||||
&:hover {
|
||||
background: #efefb2;
|
||||
}
|
||||
margin-left: -24px;
|
||||
margin-right: -24px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
${marginStyles}
|
||||
`;
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
@ -144,7 +125,11 @@ const SimpleFilesRow = (props) => {
|
||||
);
|
||||
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<StyledWrapper
|
||||
className={`row-wrapper ${
|
||||
checkedProps || isActive ? "row-selected" : ""
|
||||
}`}
|
||||
>
|
||||
<DragAndDrop
|
||||
data-title={item.title}
|
||||
value={value}
|
||||
@ -172,6 +157,7 @@ const SimpleFilesRow = (props) => {
|
||||
isActive={isActive}
|
||||
inProgress={inProgress}
|
||||
isThirdPartyFolder={item.isThirdPartyFolder}
|
||||
className="files-row"
|
||||
>
|
||||
<FilesRowContent
|
||||
item={item}
|
||||
|
@ -5,6 +5,63 @@ import TableRow from "./TableRow";
|
||||
import TableHeader from "./TableHeader";
|
||||
import TableBody from "@appserver/components/table-container/TableBody";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
const borderColor = "#ECEEF1";
|
||||
const colorBorderTransition = "#f3f4f4";
|
||||
const contentStyles = css`
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: ${borderColor};
|
||||
margin-left: -24px;
|
||||
`;
|
||||
const StyledTableContainer = styled(TableContainer)`
|
||||
.table-row-selected + .table-row-selected {
|
||||
.table-row {
|
||||
.table-container_row-checkbox-wrapper,
|
||||
.table-container_row-context-menu-wrapper {
|
||||
margin-top: -1px;
|
||||
border-image-slice: 1;
|
||||
border-top: 1px solid;
|
||||
}
|
||||
.table-container_row-checkbox-wrapper {
|
||||
border-image-source: ${`linear-gradient(to right, ${colorBorderTransition} 24px, ${borderColor} 24px)`};
|
||||
}
|
||||
.table-container_row-context-menu-wrapper {
|
||||
border-image-source: ${`linear-gradient(to left, ${colorBorderTransition} 24px, ${borderColor} 24px)`};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-row-selected + .files-item:not(.table-row-selected) {
|
||||
.table-row {
|
||||
.table-container_row-checkbox-wrapper:first-child:before {
|
||||
${contentStyles}
|
||||
margin-top: -40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.files-item:not(.table-row-selected) + .table-row-selected {
|
||||
.table-row {
|
||||
.table-container_row-checkbox-wrapper,
|
||||
.table-container_row-context-menu-wrapper {
|
||||
margin-top: -1px;
|
||||
border-top: ${`1px ${borderColor} solid`};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-row-selected:last-child {
|
||||
.table-row {
|
||||
.table-container_row-checkbox-wrapper:before {
|
||||
${contentStyles}
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Table = ({ filesList, sectionWidth, viewAs, setViewAs }) => {
|
||||
const ref = useRef(null);
|
||||
@ -20,14 +77,14 @@ const Table = ({ filesList, sectionWidth, viewAs, setViewAs }) => {
|
||||
}, [sectionWidth]);
|
||||
|
||||
return (
|
||||
<TableContainer forwardedRef={ref}>
|
||||
<StyledTableContainer forwardedRef={ref}>
|
||||
<TableHeader sectionWidth={sectionWidth} containerRef={ref} />
|
||||
<TableBody>
|
||||
{filesList.map((item) => (
|
||||
<TableRow key={item.id} item={item} />
|
||||
))}
|
||||
</TableBody>
|
||||
</TableContainer>
|
||||
</StyledTableContainer>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -22,13 +22,6 @@ import { isSafari } from "react-device-detect";
|
||||
const sideColor = globalColors.gray;
|
||||
const { acceptBackground, background } = Base.dragAndDrop;
|
||||
|
||||
const rowCheckboxCheckedStyle = css`
|
||||
border-image-source: linear-gradient(to right, #f3f4f4 24px, #eceef1 24px);
|
||||
`;
|
||||
const contextMenuWrapperCheckedStyle = css`
|
||||
border-image-source: linear-gradient(to left, #f3f4f4 24px, #eceef1 24px);
|
||||
`;
|
||||
|
||||
const rowCheckboxDraggingStyle = css`
|
||||
border-image-source: linear-gradient(to right, #f8f7bf 24px, #eceef1 24px);
|
||||
`;
|
||||
@ -54,7 +47,7 @@ const contextMenuWrapperDraggingHoverStyle = css`
|
||||
|
||||
const StyledTableRow = styled(TableRow)`
|
||||
.table-container_cell {
|
||||
${isSafari && `border-image-slice: 0 !important`};
|
||||
/* ${isSafari && `border-image-slice: 0 !important`}; */
|
||||
background: ${(props) =>
|
||||
(props.checked || props.isActive) && "#F3F4F4 !important"};
|
||||
cursor: ${(props) =>
|
||||
@ -87,14 +80,24 @@ const StyledTableRow = styled(TableRow)`
|
||||
width: 50px;
|
||||
margin-left: -24px;
|
||||
padding-left: 24px;
|
||||
border-bottom: 1px solid;
|
||||
|
||||
${(props) =>
|
||||
!props.isActive &&
|
||||
!props.checked &&
|
||||
css`
|
||||
border-image-slice: 1;
|
||||
border-image-source: linear-gradient(to right, #ffffff 24px, #eceef1 24px);
|
||||
border-bottom: 1px solid;
|
||||
border-image-source: linear-gradient(
|
||||
to right,
|
||||
#ffffff 24px,
|
||||
#eceef1 24px
|
||||
);
|
||||
`};
|
||||
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
|
||||
${(props) => props.checked && rowCheckboxCheckedStyle};
|
||||
${(props) => props.dragging && rowCheckboxDraggingStyle};
|
||||
}
|
||||
|
||||
@ -102,14 +105,23 @@ const StyledTableRow = styled(TableRow)`
|
||||
margin-right: -20x;
|
||||
width: 28px;
|
||||
padding-right: 18px;
|
||||
|
||||
${(props) =>
|
||||
!props.isActive &&
|
||||
!props.checked &&
|
||||
css`
|
||||
border-bottom: 1px solid;
|
||||
border-image-slice: 1;
|
||||
border-image-source: linear-gradient(to left, #ffffff 24px, #eceef1 24px);
|
||||
border-image-source: linear-gradient(
|
||||
to left,
|
||||
#ffffff 24px,
|
||||
#eceef1 24px
|
||||
);
|
||||
`};
|
||||
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
|
||||
${(props) => props.checked && contextMenuWrapperCheckedStyle};
|
||||
${(props) => props.dragging && contextMenuWrapperDraggingStyle};
|
||||
}
|
||||
`;
|
||||
@ -234,7 +246,9 @@ const FilesTableRow = (props) => {
|
||||
<StyledDragAndDrop
|
||||
data-title={item.title}
|
||||
value={value}
|
||||
className={`files-item ${className}`}
|
||||
className={`files-item ${className} ${
|
||||
checkedProps || isActive ? "table-row-selected" : ""
|
||||
}`}
|
||||
onDrop={onDrop}
|
||||
onMouseDown={onMouseDown}
|
||||
dragging={dragging && isDragging}
|
||||
@ -242,6 +256,7 @@ const FilesTableRow = (props) => {
|
||||
onDragLeave={onDragLeave}
|
||||
>
|
||||
<StyledTableRow
|
||||
className="table-row"
|
||||
{...dragStyles}
|
||||
dragging={dragging && isDragging}
|
||||
selectionProp={selectionProp}
|
||||
|
Loading…
Reference in New Issue
Block a user