added hint text to all selection bar icon
This commit is contained in:
parent
a51e209f4b
commit
1bf346a835
|
@ -13,10 +13,18 @@ import MoveIcon from 'components/icons/MoveIcon';
|
|||
import { COLLECTION_OPS_TYPE } from 'utils/collection';
|
||||
import { ALL_SECTION, ARCHIVE_SECTION } from './Collections';
|
||||
import UnArchive from 'components/icons/UnArchive';
|
||||
import { OverlayTrigger } from 'react-bootstrap';
|
||||
import { Collection } from 'services/collectionService';
|
||||
|
||||
interface Props {
|
||||
addToCollectionHelper: (collectionName, collection) => void;
|
||||
moveToCollectionHelper: (collectionName, collection) => void;
|
||||
addToCollectionHelper: (
|
||||
collectionName: string,
|
||||
collection: Collection
|
||||
) => void;
|
||||
moveToCollectionHelper: (
|
||||
collectionName: string,
|
||||
collection: Collection
|
||||
) => void;
|
||||
showCreateCollectionModal: (opsType: COLLECTION_OPS_TYPE) => () => void;
|
||||
setDialogMessage: SetDialogMessage;
|
||||
setCollectionSelectorAttributes: SetCollectionSelectorAttributes;
|
||||
|
@ -34,6 +42,7 @@ const SelectionBar = styled(Navbar)`
|
|||
color: #fff;
|
||||
z-index: 1001;
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
`;
|
||||
|
||||
const SelectionContainer = styled.div`
|
||||
|
@ -85,6 +94,14 @@ const SelectedFileOptions = ({
|
|||
});
|
||||
};
|
||||
|
||||
const IconWithMessage = (props) => (
|
||||
<OverlayTrigger
|
||||
placement="bottom"
|
||||
overlay={<p style={{ zIndex: 1002 }}>{props.message}</p>}>
|
||||
{props.children}
|
||||
</OverlayTrigger>
|
||||
);
|
||||
|
||||
return (
|
||||
<SelectionBar>
|
||||
<SelectionContainer>
|
||||
|
@ -96,27 +113,37 @@ const SelectedFileOptions = ({
|
|||
</div>
|
||||
</SelectionContainer>
|
||||
{activeCollection === ARCHIVE_SECTION ? (
|
||||
<IconButton onClick={unArchiveFilesHelper}>
|
||||
<UnArchive />
|
||||
</IconButton>
|
||||
<IconWithMessage message={constants.UNARCHIVE}>
|
||||
<IconButton onClick={unArchiveFilesHelper}>
|
||||
<UnArchive />
|
||||
</IconButton>
|
||||
</IconWithMessage>
|
||||
) : (
|
||||
<>
|
||||
{activeCollection === ALL_SECTION && (
|
||||
<IconButton onClick={archiveFilesHelper}>
|
||||
<Archive />
|
||||
</IconButton>
|
||||
<IconWithMessage message={constants.ARCHIVE}>
|
||||
<IconButton onClick={archiveFilesHelper}>
|
||||
<Archive />
|
||||
</IconButton>
|
||||
</IconWithMessage>
|
||||
)}
|
||||
{activeCollection !== ALL_SECTION && (
|
||||
<IconButton onClick={moveToCollection}>
|
||||
<MoveIcon />
|
||||
</IconButton>
|
||||
<IconWithMessage message={constants.MOVE}>
|
||||
<IconButton onClick={moveToCollection}>
|
||||
<MoveIcon />
|
||||
</IconButton>
|
||||
</IconWithMessage>
|
||||
)}
|
||||
<IconButton onClick={addToCollection}>
|
||||
<AddIcon />
|
||||
</IconButton>
|
||||
<IconButton onClick={deleteHandler}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
<IconWithMessage message={constants.ADD}>
|
||||
<IconButton onClick={addToCollection}>
|
||||
<AddIcon />
|
||||
</IconButton>
|
||||
</IconWithMessage>
|
||||
<IconWithMessage message={constants.DELETE}>
|
||||
<IconButton onClick={deleteHandler}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</IconWithMessage>
|
||||
</>
|
||||
)}
|
||||
</SelectionBar>
|
||||
|
|
|
@ -545,6 +545,9 @@ const englishConstants = {
|
|||
ARCHIVE: 'archive',
|
||||
ALL: 'all',
|
||||
MOVE_TO_COLLECTION: 'move to collection',
|
||||
UNARCHIVE: 'un-archive',
|
||||
MOVE: 'move',
|
||||
ADD: 'add',
|
||||
};
|
||||
|
||||
export default englishConstants;
|
||||
|
|
Loading…
Reference in a new issue