Web: Client: fixed drag n drop style when editing index mode enabled
This commit is contained in:
parent
afd8251e27
commit
c8c724e63b
@ -75,10 +75,12 @@ const Item = ({
|
||||
iconBadge,
|
||||
folderId,
|
||||
currentColorScheme,
|
||||
isIndexEditingMode,
|
||||
}) => {
|
||||
const [isDragActive, setIsDragActive] = useState(false);
|
||||
|
||||
const isDragging = dragging ? showDragItems(item) : false;
|
||||
const isDragging =
|
||||
dragging && !isIndexEditingMode ? showDragItems(item) : false;
|
||||
|
||||
let value = "";
|
||||
if (isDragging) value = `${item.id} dragging`;
|
||||
@ -222,6 +224,7 @@ const Items = ({
|
||||
currentDeviceType,
|
||||
folderAccess,
|
||||
currentColorScheme,
|
||||
isIndexEditingMode,
|
||||
}) => {
|
||||
const getEndOfBlock = React.useCallback(
|
||||
(item) => {
|
||||
@ -347,6 +350,7 @@ const Items = ({
|
||||
iconBadge={iconBadge}
|
||||
folderId={`document_catalog-${FOLDER_NAMES[item.rootFolderType]}`}
|
||||
currentColorScheme={currentColorScheme}
|
||||
isIndexEditingMode={isIndexEditingMode}
|
||||
/>
|
||||
);
|
||||
});
|
||||
@ -399,6 +403,7 @@ const Items = ({
|
||||
firstLoad,
|
||||
activeItemId,
|
||||
emptyTrashInProgress,
|
||||
isIndexEditingMode,
|
||||
],
|
||||
);
|
||||
|
||||
@ -425,6 +430,7 @@ export default inject(
|
||||
clientLoadingStore,
|
||||
userStore,
|
||||
settingsStore,
|
||||
indexingStore,
|
||||
}) => {
|
||||
const { isCommunity, isPaymentPageAvailable, currentDeviceType } =
|
||||
authStore;
|
||||
@ -441,6 +447,8 @@ export default inject(
|
||||
startDrag,
|
||||
} = filesStore;
|
||||
|
||||
const { isIndexEditingMode } = indexingStore;
|
||||
|
||||
const { firstLoad } = clientLoadingStore;
|
||||
|
||||
const { startUpload } = uploadDataStore;
|
||||
@ -493,6 +501,7 @@ export default inject(
|
||||
currentDeviceType,
|
||||
folderAccess,
|
||||
currentColorScheme,
|
||||
isIndexEditingMode,
|
||||
};
|
||||
},
|
||||
)(withTranslation(["Files", "Common", "Translations"])(observer(Items)));
|
||||
|
@ -74,12 +74,12 @@ const contextMenuWrapperDraggingStyle = css`
|
||||
const StyledTableRow = styled(TableRow)`
|
||||
.table-container_cell:not(.table-container_element-wrapper) {
|
||||
border-top: ${(props) =>
|
||||
!props.isIndexEditingMode &&
|
||||
`1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
|
||||
margin-top: -1px;
|
||||
border-left: 0; //for Safari
|
||||
border-right: 0; //for Safari
|
||||
}
|
||||
|
||||
${(props) =>
|
||||
props.isIndexEditingMode &&
|
||||
css`
|
||||
@ -195,6 +195,7 @@ const StyledTableRow = styled(TableRow)`
|
||||
background: ${(props) =>
|
||||
(props.checked || props.isActive) &&
|
||||
!props.isIndexUpdated &&
|
||||
!props.isIndexEditingMode &&
|
||||
`${props.theme.filesSection.tableView.row.backgroundActive} !important`};
|
||||
cursor: ${(props) =>
|
||||
!props.isThirdPartyFolder &&
|
||||
|
@ -102,7 +102,7 @@ const FilesTableRow = (props) => {
|
||||
const dragStyles = {
|
||||
style: {
|
||||
background:
|
||||
dragging && isDragging
|
||||
dragging && isDragging && !isIndexEditingMode
|
||||
? isDragActive
|
||||
? acceptBackground
|
||||
: background
|
||||
|
@ -106,6 +106,13 @@ const StyledTableContainer = styled.div<{ useReactWindow?: boolean }>`
|
||||
}
|
||||
}
|
||||
|
||||
.droppable-index {
|
||||
width: 100vw;
|
||||
height: 3px;
|
||||
background-color: rgb(71, 129, 209);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.lengthen-header {
|
||||
border-image-slice: 1;
|
||||
border-image-source: ${(props) =>
|
||||
@ -443,7 +450,10 @@ const StyledTableBody = styled.div<{
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledTableRow = styled.div<{ dragging?: boolean }>`
|
||||
const StyledTableRow = styled.div<{
|
||||
dragging?: boolean;
|
||||
isIndexEditingMode?: boolean;
|
||||
}>`
|
||||
display: contents;
|
||||
|
||||
.table-container_header-checkbox {
|
||||
@ -458,7 +468,7 @@ const StyledTableRow = styled.div<{ dragging?: boolean }>`
|
||||
|
||||
.droppable-hover {
|
||||
background: ${(props) =>
|
||||
props.dragging
|
||||
props.dragging && !props.isIndexEditingMode
|
||||
? `${props.theme.dragAndDrop.acceptBackground} !important`
|
||||
: "none"};
|
||||
}
|
||||
|
@ -95,6 +95,7 @@ const TableRow = (props: TableRowProps) => {
|
||||
return (
|
||||
<StyledTableRow
|
||||
onContextMenu={onContextMenu}
|
||||
isIndexEditingMode={isIndexEditingMode}
|
||||
className={`${className} table-container_row`}
|
||||
{...rest}
|
||||
>
|
||||
|
Loading…
Reference in New Issue
Block a user