diff --git a/src/index.scss b/src/index.scss index e12c6afa..f9f7bd22 100644 --- a/src/index.scss +++ b/src/index.scss @@ -24,7 +24,8 @@ body, .dropdown-item.active, .dropdown-item:active { - @extend .bg-main; + background-color: $lightGrey !important; + color: inherit !important; } .shlink-container { diff --git a/src/short-urls/helpers/DeleteShortUrlModal.js b/src/short-urls/helpers/DeleteShortUrlModal.js new file mode 100644 index 00000000..9580329f --- /dev/null +++ b/src/short-urls/helpers/DeleteShortUrlModal.js @@ -0,0 +1,52 @@ +import React, { Component } from 'react'; +import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap'; +import PropTypes from 'prop-types'; +import { shortUrlType } from '../reducers/shortUrlsList'; +import './QrCodeModal.scss'; + +export default class DeleteShortUrlModal extends Component { + static propTypes = { + shortUrl: shortUrlType, + toggle: PropTypes.func, + isOpen: PropTypes.bool, + }; + + state = { inputValue: '' }; + + render() { + const { shortUrl, toggle, isOpen } = this.props; + + return ( + +
e.preventDefault()}> + + Delete short URL + + +

Caution! You are about to delete a short URL.

+

This action cannot be undone. Once you have deleted it, all the visits stats will be lost.

+ + this.setState({ inputValue: e.target.value })} + /> +
+ + + + +
+
+ ); + } +} diff --git a/src/short-urls/helpers/ShortUrlsRowMenu.js b/src/short-urls/helpers/ShortUrlsRowMenu.js index c835a17b..bc39f8f0 100644 --- a/src/short-urls/helpers/ShortUrlsRowMenu.js +++ b/src/short-urls/helpers/ShortUrlsRowMenu.js @@ -4,6 +4,7 @@ import tagsIcon from '@fortawesome/fontawesome-free-solid/faTags'; import pieChartIcon from '@fortawesome/fontawesome-free-solid/faChartPie'; import menuIcon from '@fortawesome/fontawesome-free-solid/faEllipsisV'; import qrIcon from '@fortawesome/fontawesome-free-solid/faQrcode'; +import deleteIcon from '@fortawesome/fontawesome-free-solid/faMinusCircle'; import FontAwesomeIcon from '@fortawesome/react-fontawesome'; import React from 'react'; import { CopyToClipboard } from 'react-copy-to-clipboard'; @@ -16,6 +17,7 @@ import PreviewModal from './PreviewModal'; import QrCodeModal from './QrCodeModal'; import './ShortUrlsRowMenu.scss'; import EditTagsModal from './EditTagsModal'; +import DeleteShortUrlModal from './DeleteShortUrlModal'; export class ShortUrlsRowMenu extends React.Component { static propTypes = { @@ -30,15 +32,18 @@ export class ShortUrlsRowMenu extends React.Component { isQrModalOpen: false, isPreviewOpen: false, isTagsModalOpen: false, + isDeleteModalOpen: false, }; toggle = () => this.setState(({ isOpen }) => ({ isOpen: !isOpen })); render() { const { completeShortUrl, onCopyToClipboard, selectedServer, shortUrl } = this.props; const serverId = selectedServer ? selectedServer.id : ''; - const toggleQrCode = () => this.setState(({ isQrModalOpen }) => ({ isQrModalOpen: !isQrModalOpen })); - const togglePreview = () => this.setState(({ isPreviewOpen }) => ({ isPreviewOpen: !isPreviewOpen })); - const toggleTags = () => this.setState(({ isTagsModalOpen }) => ({ isTagsModalOpen: !isTagsModalOpen })); + const toggleModal = (prop) => () => this.setState((prevState) => ({ [prop]: !prevState[prop] })); + const toggleQrCode = toggleModal('isQrModalOpen'); + const togglePreview = toggleModal('isPreviewOpen'); + const toggleTags = toggleModal('isTagsModalOpen'); + const toggleDelete = toggleModal('isDeleteModalOpen'); return ( @@ -47,8 +52,9 @@ export class ShortUrlsRowMenu extends React.Component { -  Visit Stats +  Visit stats +  Edit tags @@ -59,6 +65,15 @@ export class ShortUrlsRowMenu extends React.Component { toggle={toggleTags} /> + +  Delete short URL + + + diff --git a/src/short-urls/helpers/ShortUrlsRowMenu.scss b/src/short-urls/helpers/ShortUrlsRowMenu.scss index 9e9aa579..b0799fe8 100644 --- a/src/short-urls/helpers/ShortUrlsRowMenu.scss +++ b/src/short-urls/helpers/ShortUrlsRowMenu.scss @@ -1,6 +1,19 @@ +@import '../../utils/base'; + .short-urls-row-menu__dropdown-toggle:before { display: none !important; } + .short-urls-row-menu__dropdown-toggle--hidden { visibility: hidden; } + +.short-urls-row-menu__dropdown-item--danger.short-urls-row-menu__dropdown-item--danger { + color: $dangerColor; + + &:hover, + &:active, + &.active { + color: $dangerColor !important; + } +}