diff --git a/public/index.html b/public/index.html index 1e20912..d6ff66a 100644 --- a/public/index.html +++ b/public/index.html @@ -1,20 +1,23 @@ - - - - - - - Exportify - - - -
- Fork me on Github -
+ + + + + + + Exportify + + + + + +
+ Fork me on Github +
+ +
+ -
- diff --git a/src/App.tsx b/src/App.tsx index 12885d1..76a50e5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -29,6 +29,7 @@ function App() { return (
+

Exportify diff --git a/src/components/PlaylistRow.jsx b/src/components/PlaylistRow.jsx index f13a8a8..7108c9d 100644 --- a/src/components/PlaylistRow.jsx +++ b/src/components/PlaylistRow.jsx @@ -45,13 +45,13 @@ class PlaylistRow extends React.Component { let playlist = this.props.playlist const icon = ['fas', (this.state.exporting ? 'sync' : 'download')] - if(playlist.uri==null) return ( + if (playlist.uri == null) return ( {this.renderIcon(playlist)} {playlist.name} - This playlist is not supported - {this.renderTickCross(playlist.public)} - {this.renderTickCross(playlist.collaborative)} + This playlist is not supported + {this.renderTickCross(playlist.public)} + {this.renderTickCross(playlist.collaborative)}   ); @@ -61,9 +61,9 @@ class PlaylistRow extends React.Component { {this.renderIcon(playlist)} {playlist.name} {playlist.owner.display_name} - {playlist.tracks.total} - {this.renderTickCross(playlist.public)} - {this.renderTickCross(playlist.collaborative)} + {playlist.tracks.total} + {this.renderTickCross(playlist.public)} + {this.renderTickCross(playlist.collaborative)}

- - - - - - - - - -
NameOwnerTracksPublic?Collaborative? - + + + + + + + + + + + + + + {this.state.playlists.map((playlist, i) => { + return - - - - - {this.state.playlists.map((playlist, i) => { - return - })} - -
NameOwnerTracksPublic?Collaborative? + +
+ })} + +
+
- + ); } else { return
diff --git a/src/components/TopMenu.tsx b/src/components/TopMenu.tsx index a37d9e2..7686c11 100644 --- a/src/components/TopMenu.tsx +++ b/src/components/TopMenu.tsx @@ -1,5 +1,5 @@ import React from "react" -import { Button } from "react-bootstrap" +import { Button, Modal, Table } from "react-bootstrap" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" type TopMenuProps = { @@ -7,6 +7,14 @@ type TopMenuProps = { } class TopMenu extends React.Component { + state = { + showHelp: false + } + + handleToggleHelp = () => { + this.setState({ showHelp: !this.state.showHelp }) + } + handleLogoutClick = () => { window.location.href = `${window.location.href.split('#')[0]}?change_user=true` } @@ -37,12 +45,66 @@ class TopMenu extends React.Component { } render() { + const helpButton = this.props.loggedIn ? ( + <> + + + + + Quick Reference + + +
Advanced Search Syntax
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Search queryBehavior
public:trueOnly show public playlists
public:falseOnly show private playlists
collaborative:trueOnly show collaborative playlists
collaborative:falseDon't show collaborative playlists
owner:meOnly show playlists I own
owner:[owner]Only show playlists owned by [owner]
+ +

For more detail please refer to the full project documentation.

+ + + + ) : '' + const logoutButton = this.props.loggedIn ? : '' return (
+ {helpButton} diff --git a/src/components/__snapshots__/PlaylistTable.test.jsx.snap b/src/components/__snapshots__/PlaylistTable.test.jsx.snap index 3adc21a..f690cdf 100644 --- a/src/components/__snapshots__/PlaylistTable.test.jsx.snap +++ b/src/components/__snapshots__/PlaylistTable.test.jsx.snap @@ -116,187 +116,222 @@ exports[`playlist loading 1`] = `
- - - - + + - + - + - + - + - + + + + + + - - - - - - + + - - - + - + + + + - - - - - - - - - + - - -
+
- - Name - + + Name + - Owner - + Owner + - Tracks - + Tracks + - Public? - + Public? + - Collaborative? - + Collaborative? + - +
- - Export All - - -
- - - - Liked - - - + + + Liked + + + + watsonbox + + - watsonbox - - - 1 - - - - + - - + +
- Export - -
- - - - Ghostpoet – Peanut Butter Blues and Melancholy Jam - - - - watsonbox - - - 10 - - - - - - - Export - -
+ + + + + + + +
diff --git a/src/icons.jsx b/src/icons.jsx index f755ec0..4aadaef 100644 --- a/src/icons.jsx +++ b/src/icons.jsx @@ -1,7 +1,7 @@ import { library } from '@fortawesome/fontawesome-svg-core' import { fab } from '@fortawesome/free-brands-svg-icons' import { faCheckCircle, faTimesCircle, faFileArchive, faHeart } from '@fortawesome/free-regular-svg-icons' -import { faBolt, faMusic, faDownload, faCog, faSearch, faTimes, faSignOutAlt, faSync, faLightbulb } from '@fortawesome/free-solid-svg-icons' +import { faBolt, faMusic, faDownload, faCog, faSearch, faTimes, faSignOutAlt, faSync, faLightbulb, faCircleInfo } from '@fortawesome/free-solid-svg-icons' library.add( fab, @@ -17,5 +17,6 @@ library.add( faTimes, faSignOutAlt, faSync, - faLightbulb + faLightbulb, + faCircleInfo )