mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improved icons on short URL menu

Browse source
This commit is contained in:
Alejandro Celaya 2020-01-15 20:25:58 +01:00
parent 90751a09f7
commit 2d60f830f7
1 changed files with 14 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/short-urls/helpers/ShortUrlsRowMenu.js
View file

@ -5,6 +5,7 @@ import {
faEllipsisV as menuIcon, faEllipsisV as menuIcon,
faQrcode as qrIcon, faQrcode as qrIcon,
faMinusCircle as deleteIcon, faMinusCircle as deleteIcon,
faEdit as editIcon,
} from '@fortawesome/free-solid-svg-icons'; } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react'; import React from 'react';
@ -20,6 +21,7 @@ import PreviewModal from './PreviewModal';
import QrCodeModal from './QrCodeModal'; import QrCodeModal from './QrCodeModal';
import './ShortUrlsRowMenu.scss'; import './ShortUrlsRowMenu.scss';
// FIXME Replace with typescript: (DeleteShortUrlModal component, EditTagsModal component)
const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrlsRowMenu extends React.Component { const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrlsRowMenu extends React.Component {
static propTypes = { static propTypes = {
onCopyToClipboard: PropTypes.func, onCopyToClipboard: PropTypes.func,
@ -32,6 +34,7 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
isQrModalOpen: false, isQrModalOpen: false,
isPreviewModalOpen: false, isPreviewModalOpen: false,
isTagsModalOpen: false, isTagsModalOpen: false,
isMetaModalOpen: false,
isDeleteModalOpen: false, isDeleteModalOpen: false,
}; };
toggle = () => this.setState(({ isOpen }) => ({ isOpen: !isOpen })); toggle = () => this.setState(({ isOpen }) => ({ isOpen: !isOpen }));
@ -45,6 +48,7 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
const toggleQrCode = toggleModal('isQrModalOpen'); const toggleQrCode = toggleModal('isQrModalOpen');
const togglePreview = toggleModal('isPreviewModalOpen'); const togglePreview = toggleModal('isPreviewModalOpen');
const toggleTags = toggleModal('isTagsModalOpen'); const toggleTags = toggleModal('isTagsModalOpen');
const toggleMeta = toggleModal('isMetaModalOpen');
const toggleDelete = toggleModal('isDeleteModalOpen'); const toggleDelete = toggleModal('isDeleteModalOpen');
return ( return (
@ -54,11 +58,11 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
</DropdownToggle> </DropdownToggle>
<DropdownMenu right> <DropdownMenu right>
<DropdownItem tag={Link} to={`/server/${selectedServer ? selectedServer.id : ''}/short-code/${shortUrl.shortCode}/visits`}> <DropdownItem tag={Link} to={`/server/${selectedServer ? selectedServer.id : ''}/short-code/${shortUrl.shortCode}/visits`}>
<FontAwesomeIcon icon={pieChartIcon} /> &nbsp;Visit stats <FontAwesomeIcon icon={pieChartIcon} fixedWidth /> Visit stats
</DropdownItem> </DropdownItem>
<DropdownItem onClick={toggleTags}> <DropdownItem onClick={toggleTags}>
<FontAwesomeIcon icon={tagsIcon} /> &nbsp;Edit tags <FontAwesomeIcon icon={tagsIcon} fixedWidth /> Edit tags
</DropdownItem> </DropdownItem>
<EditTagsModal <EditTagsModal
url={completeShortUrl} url={completeShortUrl}
@ -67,8 +71,12 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
toggle={toggleTags} toggle={toggleTags}
/> />
<DropdownItem onClick={toggleMeta}>
<FontAwesomeIcon icon={editIcon} fixedWidth /> Edit metadata
</DropdownItem>
<DropdownItem className="short-urls-row-menu__dropdown-item--danger" onClick={toggleDelete}> <DropdownItem className="short-urls-row-menu__dropdown-item--danger" onClick={toggleDelete}>
<FontAwesomeIcon icon={deleteIcon} /> &nbsp;Delete short URL <FontAwesomeIcon icon={deleteIcon} fixedWidth /> Delete short URL
</DropdownItem> </DropdownItem>
<DeleteShortUrlModal shortUrl={shortUrl} isOpen={this.state.isDeleteModalOpen} toggle={toggleDelete} /> <DeleteShortUrlModal shortUrl={shortUrl} isOpen={this.state.isDeleteModalOpen} toggle={toggleDelete} />
@ -77,14 +85,14 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
{showPreviewBtn && ( {showPreviewBtn && (
<React.Fragment> <React.Fragment>
<DropdownItem onClick={togglePreview}> <DropdownItem onClick={togglePreview}>
<FontAwesomeIcon icon={pictureIcon} /> &nbsp;Preview <FontAwesomeIcon icon={pictureIcon} fixedWidth /> Preview
</DropdownItem> </DropdownItem>
<PreviewModal url={completeShortUrl} isOpen={this.state.isPreviewModalOpen} toggle={togglePreview} /> <PreviewModal url={completeShortUrl} isOpen={this.state.isPreviewModalOpen} toggle={togglePreview} />
</React.Fragment> </React.Fragment>
)} )}
<DropdownItem onClick={toggleQrCode}> <DropdownItem onClick={toggleQrCode}>
<FontAwesomeIcon icon={qrIcon} /> &nbsp;QR code <FontAwesomeIcon icon={qrIcon} fixedWidth /> QR code
</DropdownItem> </DropdownItem>
<QrCodeModal url={completeShortUrl} isOpen={this.state.isQrModalOpen} toggle={toggleQrCode} /> <QrCodeModal url={completeShortUrl} isOpen={this.state.isQrModalOpen} toggle={toggleQrCode} />
@ -92,7 +100,7 @@ const ShortUrlsRowMenu = (DeleteShortUrlModal, EditTagsModal) => class ShortUrls
<CopyToClipboard text={completeShortUrl} onCopy={onCopyToClipboard}> <CopyToClipboard text={completeShortUrl} onCopy={onCopyToClipboard}>
<DropdownItem> <DropdownItem>
<FontAwesomeIcon icon={copyIcon} /> &nbsp;Copy to clipboard <FontAwesomeIcon icon={copyIcon} fixedWidth /> Copy to clipboard
</DropdownItem> </DropdownItem>
</CopyToClipboard> </CopyToClipboard>
</DropdownMenu> </DropdownMenu>