diff --git a/src/common/MenuLayout.js b/src/common/MenuLayout.js
index acadd34b..253a4cdd 100644
--- a/src/common/MenuLayout.js
+++ b/src/common/MenuLayout.js
@@ -1,6 +1,6 @@
import React from 'react';
import { Route, Switch } from 'react-router-dom';
-import ShortUrlsList from '../short-urls/ShortUrlsList';
+import ShortUrls from '../short-urls/ShortUrls';
import AsideMenu from './AsideMenu';
export default function MenuLayout() {
@@ -11,7 +11,7 @@ export default function MenuLayout() {
diff --git a/src/short-urls/SearchBar.js b/src/short-urls/SearchBar.js
new file mode 100644
index 00000000..5a917a10
--- /dev/null
+++ b/src/short-urls/SearchBar.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import searchIcon from '@fortawesome/fontawesome-free-solid/faSearch';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import './SearchBar.scss';
+
+export default class SearchBar extends React.Component {
+ render() {
+ return (
+
+
+
+
+ );
+ }
+}
diff --git a/src/short-urls/SearchBar.scss b/src/short-urls/SearchBar.scss
new file mode 100644
index 00000000..66d24140
--- /dev/null
+++ b/src/short-urls/SearchBar.scss
@@ -0,0 +1,15 @@
+@import "../utils/mixins/vertical-align";
+
+.search-bar {
+ position: relative;
+}
+
+.search-bar__input.search-bar__input {
+ padding-left: 40px;
+}
+
+.search-bar__icon {
+ @include vertical-align();
+ left: 15px;
+ color: #707581;
+}
diff --git a/src/short-urls/ShortUrls.js b/src/short-urls/ShortUrls.js
new file mode 100644
index 00000000..fe892434
--- /dev/null
+++ b/src/short-urls/ShortUrls.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import SearchBar from './SearchBar';
+import ShortUrlsList from './ShortUrlsList';
+import './ShortUrls.scss';
+
+export default function ShortUrls(props) {
+ return (
+
+ );
+}
diff --git a/src/short-urls/ShortUrls.scss b/src/short-urls/ShortUrls.scss
new file mode 100644
index 00000000..b708a7b1
--- /dev/null
+++ b/src/short-urls/ShortUrls.scss
@@ -0,0 +1,3 @@
+.short-urls-container {
+ padding: 30px 30px 30px 20px;
+}
diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index 8f3e7cd9..86f51341 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/src/short-urls/ShortUrlsList.js
@@ -1,9 +1,17 @@
import React from 'react';
import Moment from 'react-moment';
import { connect } from 'react-redux';
+import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
+import { isEmpty } from 'ramda';
+import pieChartIcon from '@fortawesome/fontawesome-free-solid/faChartPie';
+import pictureIcon from '@fortawesome/fontawesome-free-solid/faImage';
+import qrIcon from '@fortawesome/fontawesome-free-solid/faQrcode';
+import copyIcon from '@fortawesome/fontawesome-free-solid/faCopy';
+import menuIcon from '@fortawesome/fontawesome-free-solid/faEllipsisV';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import Tag from '../utils/Tag';
import { listShortUrls } from './reducers/shortUrlsList';
-import { isEmpty } from 'ramda';
+import './ShortUrlsList.scss';
export class ShortUrlsList extends React.Component {
componentDidMount() {
@@ -13,7 +21,7 @@ export class ShortUrlsList extends React.Component {
render() {
return (
-
+
Created at |
@@ -21,7 +29,7 @@ export class ShortUrlsList extends React.Component {
Original URL |
Tags |
Visits |
- - |
+ |
@@ -34,24 +42,11 @@ export class ShortUrlsList extends React.Component {
renderShortUrls() {
const { shortUrlsList, selectedServer } = this.props;
if (isEmpty(shortUrlsList)) {
- return Loading...;
+ return Loading... |
;
}
return shortUrlsList.map(shortUrl => (
-
- {shortUrl.dateCreated} |
-
-
- {`${selectedServer.url}/${shortUrl.shortCode}`}
-
- |
-
- {shortUrl.originalUrl}
- |
- {ShortUrlsList.renderTags(shortUrl.tags)} |
- {shortUrl.visitsCount} |
- |
-
+
));
}
@@ -64,6 +59,73 @@ export class ShortUrlsList extends React.Component {
}
}
+class Row extends React.Component {
+ state = { displayMenu: false };
+
+ render() {
+ const { shortUrl, selectedServer } = this.props;
+
+ return (
+ this.setState({ displayMenu: true })}
+ onMouseLeave={() => this.setState({ displayMenu: false })}
+ >
+
+ {shortUrl.dateCreated}
+ |
+
+
+ {`${selectedServer.url}/${shortUrl.shortCode}`}
+
+ |
+
+ {shortUrl.originalUrl}
+ |
+ {ShortUrlsList.renderTags(shortUrl.tags)} |
+ {shortUrl.visitsCount} |
+
+
+ |
+
+ )
+ }
+}
+
+class RowMenu extends React.Component {
+ state = { isOpen: false };
+ toggle = () => this.setState({ isOpen: ! this.state.isOpen });
+
+ render () {
+ const determineClass = () => {
+ const baseClass = 'short-urls-list__dropdown-toggle';
+ return ! this.props.display ? `${baseClass} short-urls-list__dropdown-toggle--hidden` : baseClass;
+ };
+
+ return (
+
+
+
+
+
+
+ Visit Stats
+
+
+
+ Preview
+
+
+ QR code
+
+
+
+ Copy to clipboard
+
+
+
+ );
+ }
+}
+
export default connect(state => ({
shortUrlsList: state.shortUrlsList,
selectedServer: state.selectedServer,
diff --git a/src/short-urls/ShortUrlsList.scss b/src/short-urls/ShortUrlsList.scss
new file mode 100644
index 00000000..776c61e9
--- /dev/null
+++ b/src/short-urls/ShortUrlsList.scss
@@ -0,0 +1,10 @@
+.short-urls-list__cell {
+ vertical-align: middle !important;
+}
+
+.short-urls-list__dropdown-toggle:before {
+ display: none !important;
+}
+.short-urls-list__dropdown-toggle--hidden {
+ visibility: hidden;
+}
diff --git a/src/utils/mixins/vertical-align.scss b/src/utils/mixins/vertical-align.scss
new file mode 100644
index 00000000..d9fd0a0b
--- /dev/null
+++ b/src/utils/mixins/vertical-align.scss
@@ -0,0 +1,5 @@
+@mixin vertical-align {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+}