forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-17 13:03:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated styles in javascript to fulfill adidas rules

Browse Source
This commit is contained in:
Alejandro Celaya
2018-08-25 23:39:27 +02:00
parent ed0aa68452
commit 6a016d8e6f
70 changed files with 1250 additions and 759 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/short-urls/helpers/ShortUrlsRowMenu.js
View File

@@ -9,11 +9,21 @@ import React from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Link } from 'react-router-dom';
import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
import PropTypes from 'prop-types';
import { serverType } from '../../servers/prop-types';
import { shortUrlType } from '../reducers/shortUrlsList';
import PreviewModal from './PreviewModal';
import QrCodeModal from './QrCodeModal';
import './ShortUrlsRowMenu.scss';
import EditTagsModal from './EditTagsModal';
const propTypes = {
completeShortUrl: PropTypes.string,
onCopyToClipboard: PropTypes.func,
selectedServer: serverType,
shortUrl: shortUrlType,
};
export class ShortUrlsRowMenu extends React.Component {
state = {
isOpen: false,
@@ -21,26 +31,26 @@ export class ShortUrlsRowMenu extends React.Component {
isPreviewOpen: false,
isTagsModalOpen: false,
};
toggle = () => this.setState({ isOpen: !this.state.isOpen });
toggle = () => this.setState(({ isOpen }) => ({ isOpen: !isOpen }));
render() {
const { completeShortUrl, onCopyToClipboard, selectedServer, shortUrl } = this.props;
const serverId = selectedServer ? selectedServer.id : '';
const toggleQrCode = () => this.setState({isQrModalOpen: !this.state.isQrModalOpen});
const togglePreview = () => this.setState({isPreviewOpen: !this.state.isPreviewOpen});
const toggleTags = () => this.setState({isTagsModalOpen: !this.state.isTagsModalOpen});
const toggleQrCode = () => this.setState(({ isQrModalOpen }) => ({ isQrModalOpen: !isQrModalOpen }));
const togglePreview = () => this.setState(({ isPreviewOpen }) => ({ isPreviewOpen: !isPreviewOpen }));
const toggleTags = () => this.setState(({ isTagsModalOpen }) => ({ isTagsModalOpen: !isTagsModalOpen }));
return (
<ButtonDropdown toggle={this.toggle} isOpen={this.state.isOpen} direction="left">
<DropdownToggle size="sm" caret className="short-urls-row-menu__dropdown-toggle btn-outline-secondary">
&nbsp;<FontAwesomeIcon icon={menuIcon}/>&nbsp;
&nbsp;<FontAwesomeIcon icon={menuIcon} />&nbsp;
</DropdownToggle>
<DropdownMenu>
<DropdownItem tag={Link} to={`/server/${serverId}/short-code/${shortUrl.shortCode}/visits`}>
<FontAwesomeIcon icon={pieChartIcon}/> &nbsp;Visit Stats
<FontAwesomeIcon icon={pieChartIcon} /> &nbsp;Visit Stats
</DropdownItem>
<DropdownItem onClick={toggleTags}>
<FontAwesomeIcon icon={tagsIcon}/> &nbsp;Edit tags
<FontAwesomeIcon icon={tagsIcon} /> &nbsp;Edit tags
</DropdownItem>
<EditTagsModal
url={completeShortUrl}
@@ -49,10 +59,10 @@ export class ShortUrlsRowMenu extends React.Component {
toggle={toggleTags}
/>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem onClick={togglePreview}>
<FontAwesomeIcon icon={pictureIcon}/> &nbsp;Preview
<FontAwesomeIcon icon={pictureIcon} /> &nbsp;Preview
</DropdownItem>
<PreviewModal
url={completeShortUrl}
@@ -61,7 +71,7 @@ export class ShortUrlsRowMenu extends React.Component {
/>
<DropdownItem onClick={toggleQrCode}>
<FontAwesomeIcon icon={qrIcon}/> &nbsp;QR code
<FontAwesomeIcon icon={qrIcon} /> &nbsp;QR code
</DropdownItem>
<QrCodeModal
url={completeShortUrl}
@@ -69,11 +79,11 @@ export class ShortUrlsRowMenu extends React.Component {
toggle={toggleQrCode}
/>
<DropdownItem divider/>
<DropdownItem divider />
<CopyToClipboard text={completeShortUrl} onCopy={onCopyToClipboard}>
<DropdownItem>
<FontAwesomeIcon icon={copyIcon}/> &nbsp;Copy to clipboard
<FontAwesomeIcon icon={copyIcon} /> &nbsp;Copy to clipboard
</DropdownItem>
</CopyToClipboard>
</DropdownMenu>
@@ -81,3 +91,5 @@ export class ShortUrlsRowMenu extends React.Component {
);
}
}
ShortUrlsRowMenu.propTypes = propTypes;