beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

added hint text to all selection bar icon

Browse source
This commit is contained in:
abhinav-grd 2021-09-24 11:31:43 +05:30
parent a51e209f4b
commit 1bf346a835
2 changed files with 47 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/components/pages/gallery/SelectedFileOptions.tsx
View file

@ -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>

3
src/utils/strings/englishConstants.tsx
View file

@ -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;