Web: Files: added hotkey border
This commit is contained in:
parent
b30f488213
commit
66f684eee2
@ -244,6 +244,7 @@ export default function withFileActions(WrappedFileItem) {
|
||||
viewAs,
|
||||
bufferSelection,
|
||||
setBufferSelection,
|
||||
hotkeyCaret,
|
||||
} = filesStore;
|
||||
const { startUpload } = uploadDataStore;
|
||||
const { type, extension, id } = fileActionStore;
|
||||
@ -267,6 +268,8 @@ export default function withFileActions(WrappedFileItem) {
|
||||
bufferSelection.fileExst === item.fileExst &&
|
||||
!selection.length; // need for select row item
|
||||
|
||||
const showHotkeyBorder = hotkeyCaret?.id === item.id;
|
||||
|
||||
return {
|
||||
t,
|
||||
item,
|
||||
@ -301,7 +304,7 @@ export default function withFileActions(WrappedFileItem) {
|
||||
isActive,
|
||||
setBufferSelection,
|
||||
bufferSelection,
|
||||
|
||||
showHotkeyBorder,
|
||||
openFileAction,
|
||||
};
|
||||
}
|
||||
|
@ -63,6 +63,25 @@ const StyledSimpleFilesRow = styled(Row)`
|
||||
"url(images/cursor.palm.svg), auto"};
|
||||
margin-top: -2px;
|
||||
|
||||
${(props) =>
|
||||
props.showHotkeyBorder &&
|
||||
css`
|
||||
border-top: 1px solid #2da7db;
|
||||
margin-top: -3px;
|
||||
`}
|
||||
|
||||
::after {
|
||||
${(props) =>
|
||||
props.showHotkeyBorder &&
|
||||
css`
|
||||
background: #2da7db;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
margin-left: -24px;
|
||||
margin-right: -24px;
|
||||
`}
|
||||
}
|
||||
|
||||
${(props) =>
|
||||
!props.contextOptions &&
|
||||
`
|
||||
@ -183,6 +202,7 @@ const SimpleFilesRow = (props) => {
|
||||
isEdit,
|
||||
isActive,
|
||||
isAdmin,
|
||||
showHotkeyBorder,
|
||||
} = props;
|
||||
|
||||
const withAccess = isAdmin || item.access === 0;
|
||||
@ -220,6 +240,7 @@ const SimpleFilesRow = (props) => {
|
||||
isActive={isActive}
|
||||
isThirdPartyFolder={item.isThirdPartyFolder}
|
||||
withAccess={withAccess}
|
||||
showHotkeyBorder={showHotkeyBorder}
|
||||
>
|
||||
<FilesRowContent
|
||||
item={item}
|
||||
|
@ -29,6 +29,10 @@ const contextMenuWrapperCheckedStyle = css`
|
||||
border-image-source: linear-gradient(to left, #f3f4f4 24px, #eceef1 24px);
|
||||
`;
|
||||
|
||||
const hotkeyBorderStyle = css`
|
||||
border-image-source: linear-gradient(to left, #2da7db 24px, #2da7db 24px);
|
||||
`;
|
||||
|
||||
const rowCheckboxDraggingStyle = css`
|
||||
border-image-source: linear-gradient(to right, #f8f7bf 24px, #eceef1 24px);
|
||||
`;
|
||||
@ -61,6 +65,8 @@ const StyledTableRow = styled(TableRow)`
|
||||
!props.isThirdPartyFolder &&
|
||||
(props.checked || props.isActive) &&
|
||||
"url(images/cursor.palm.svg), auto"};
|
||||
|
||||
${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"}
|
||||
}
|
||||
|
||||
.table-container_element {
|
||||
@ -109,6 +115,7 @@ const StyledTableRow = styled(TableRow)`
|
||||
|
||||
${(props) => props.checked && contextMenuWrapperCheckedStyle};
|
||||
${(props) => props.dragging && contextMenuWrapperDraggingStyle};
|
||||
${(props) => props.showHotkeyBorder && hotkeyBorderStyle};
|
||||
}
|
||||
|
||||
.edit {
|
||||
@ -117,6 +124,15 @@ const StyledTableRow = styled(TableRow)`
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
${(props) =>
|
||||
props.showHotkeyBorder &&
|
||||
css`
|
||||
.table-container_cell {
|
||||
margin-top: -1px;
|
||||
border-top: 1px solid #2da7db;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const StyledDragAndDrop = styled(DragAndDrop)`
|
||||
@ -214,6 +230,7 @@ const FilesTableRow = (props) => {
|
||||
onHideContextMenu,
|
||||
onFilesClick,
|
||||
quickButtonsComponent,
|
||||
showHotkeyBorder,
|
||||
} = props;
|
||||
|
||||
const element = (
|
||||
@ -273,6 +290,7 @@ const FilesTableRow = (props) => {
|
||||
isThirdPartyFolder={item.isThirdPartyFolder}
|
||||
onDoubleClick={onFilesClick}
|
||||
checked={checkedProps}
|
||||
showHotkeyBorder={showHotkeyBorder}
|
||||
title={
|
||||
item.isFolder
|
||||
? t("Translations:TitleShowFolderActions")
|
||||
|
@ -38,6 +38,7 @@ const FilesTile = (props) => {
|
||||
isActive,
|
||||
isEdit,
|
||||
quickButtonsComponent,
|
||||
showHotkeyBorder,
|
||||
} = props;
|
||||
|
||||
const temporaryExtension =
|
||||
@ -91,6 +92,7 @@ const FilesTile = (props) => {
|
||||
? t("Translations:TitleShowFolderActions")
|
||||
: t("Translations:TitleShowActions")
|
||||
}
|
||||
showHotkeyBorder={showHotkeyBorder}
|
||||
>
|
||||
<FilesTileContent
|
||||
item={item}
|
||||
|
@ -47,6 +47,7 @@ const StyledTile = styled.div`
|
||||
width: 100%;
|
||||
border: 1px solid #d0d5da;
|
||||
border-radius: 3px;
|
||||
${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
|
||||
${(props) => props.isFolder && "border-top-left-radius: 0px;"}
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
|
||||
@ -89,6 +90,7 @@ const StyledTile = styled.div`
|
||||
&:before,
|
||||
&:after {
|
||||
${(props) => props.isFolder && props.dragging && draggingStyle};
|
||||
${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
|
||||
}
|
||||
|
||||
&:before,
|
||||
@ -346,6 +348,7 @@ class Tile extends React.PureComponent {
|
||||
isActive,
|
||||
isEdit,
|
||||
title,
|
||||
showHotkeyBorder,
|
||||
} = this.props;
|
||||
const { isFolder, id, fileExst } = item;
|
||||
|
||||
@ -389,6 +392,7 @@ class Tile extends React.PureComponent {
|
||||
checked={checked}
|
||||
isActive={isActive}
|
||||
isDesktop={isDesktop}
|
||||
showHotkeyBorder={showHotkeyBorder}
|
||||
>
|
||||
{isFolder || (!fileExst && id === -1) ? (
|
||||
<>
|
||||
|
@ -32,6 +32,7 @@ const SectionBodyContent = (props) => {
|
||||
tooltipPageX,
|
||||
tooltipPageY,
|
||||
setHotkeyCaretStart,
|
||||
setHotkeyCaret,
|
||||
} = props;
|
||||
|
||||
useEffect(() => {
|
||||
@ -72,6 +73,7 @@ const SectionBodyContent = (props) => {
|
||||
setSelection([]);
|
||||
setBufferSelection(null);
|
||||
setHotkeyCaretStart(null);
|
||||
setHotkeyCaret(null);
|
||||
}
|
||||
};
|
||||
|
||||
@ -215,6 +217,7 @@ export default inject(
|
||||
tooltipPageY,
|
||||
setBufferSelection,
|
||||
setHotkeyCaretStart,
|
||||
setHotkeyCaret,
|
||||
} = filesStore;
|
||||
|
||||
return {
|
||||
@ -236,6 +239,7 @@ export default inject(
|
||||
tooltipPageX,
|
||||
tooltipPageY,
|
||||
setHotkeyCaretStart,
|
||||
setHotkeyCaret,
|
||||
};
|
||||
}
|
||||
)(
|
||||
|
Loading…
Reference in New Issue
Block a user