From cd03c78b5452f630cde8f94e99031f148544d582 Mon Sep 17 00:00:00 2001 From: StarGazer1258 Date: Mon, 15 Apr 2019 16:28:11 -0500 Subject: [PATCH] Changes to sidebar Add labels for bottom buttons Improve navigation animations --- README.md | 3 +- package.json | 2 +- src/components/DonateButton.js | 26 ---- src/components/QueueButton.js | 28 ---- src/components/SearchButton.js | 40 ------ src/components/SettingsButton.js | 24 ---- src/components/SideBar.js | 57 +++++--- src/css/DonateButton.scss | 36 ----- src/css/QueueButton.scss | 61 --------- src/css/SearchButton.scss | 42 ------ src/css/SettingsButton.scss | 33 ----- src/css/SideBar.scss | 223 ++++++++++++++++++++++++++++--- 12 files changed, 246 insertions(+), 329 deletions(-) delete mode 100644 src/components/DonateButton.js delete mode 100644 src/components/QueueButton.js delete mode 100644 src/components/SearchButton.js delete mode 100644 src/components/SettingsButton.js delete mode 100644 src/css/DonateButton.scss delete mode 100644 src/css/QueueButton.scss delete mode 100644 src/css/SearchButton.scss delete mode 100644 src/css/SettingsButton.scss diff --git a/README.md b/README.md index 711a95c..5790761 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ -# BeatDrop[![Build Status](https://travis-ci.org/StarGazer1258/BeatDrop.svg?branch=master)](https://travis-ci.org/StarGazer1258/BeatDrop) +[![Build Status](https://travis-ci.org/StarGazer1258/BeatDrop.svg?branch=master)](https://travis-ci.org/StarGazer1258/BeatDrop) +# BeatDrop The ultimate content-manager for Beat Saber. ## How to get BeatDrop diff --git a/package.json b/package.json index 94d38d3..fff3630 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "beatdrop", "description": "A desktop app for downloading Beat Saber songs.", "author": "Nathaniel Johns (StarGazer1258)", - "version": "2.1.7-beta", + "version": "2.1.8", "private": false, "license": "CC-BY-NC-SA-4.0", "repository": { diff --git a/src/components/DonateButton.js b/src/components/DonateButton.js deleted file mode 100644 index 916af9c..0000000 --- a/src/components/DonateButton.js +++ /dev/null @@ -1,26 +0,0 @@ -import React, { Component } from 'react' -import '../css/DonateButton.scss' - -import { connect } from 'react-redux' -import PropTypes from 'prop-types' -import { setView } from '../actions/viewActions' -import { DONATE } from '../views' - -class DonateButton extends Component { - - render() { - return - } - -} - -DonateButton.propTypes = { - view: PropTypes.string.isRequired, - setView: PropTypes.func.isRequired -} - -const mapStateToProps = (state) => ({ - view: state.view.view -}) - -export default connect(mapStateToProps, { setView })(DonateButton) \ No newline at end of file diff --git a/src/components/QueueButton.js b/src/components/QueueButton.js deleted file mode 100644 index 2b25d5b..0000000 --- a/src/components/QueueButton.js +++ /dev/null @@ -1,28 +0,0 @@ -import React, { Component } from 'react' -import '../css/QueueButton.scss' - -import { connect } from 'react-redux' -import PropTypes from 'prop-types' -import { setQueueOpen } from '../actions/queueActions' - -class QueueButton extends Component { - - componentDidMount() { - document.addEventListener('mouseup', (e) => { if(!e.target.classList.contains('i-download-queue') && this.props.isOpen) { this.props.setQueueOpen(false) } }) - } - - render() { - return
{ this.props.setQueueOpen(!this.props.isOpen) } }>
- } -} - -QueueButton.propTypes = ({ - setQueueOpen: PropTypes.func.isRequired, - isOpen: PropTypes.bool.isRequired -}) - -let mapStateToProps = (state) => ({ - isOpen: state.queue.isOpen -}) - -export default connect(mapStateToProps, { setQueueOpen })(QueueButton) \ No newline at end of file diff --git a/src/components/SearchButton.js b/src/components/SearchButton.js deleted file mode 100644 index cd93b81..0000000 --- a/src/components/SearchButton.js +++ /dev/null @@ -1,40 +0,0 @@ -import React, { Component } from 'react' -import '../css/SearchButton.scss' - -import { connect } from 'react-redux' -import PropTypes from 'prop-types' -import { setView } from '../actions/viewActions' -import { SEARCH } from '../views' - -const searchShortcut = function (e) { if(e.keyCode === 83 && e.ctrlKey) { this.props.setView(SEARCH); document.getElementById('search-box').focus() } } - -class SearchButton extends Component { - constructor(props) { - super(props) - - this.searchShortcut = searchShortcut.bind(this) - } - - componentDidMount() { - window.addEventListener('keyup', this.searchShortcut) - } - - componentWillUnmount() { - window.removeEventListener('keyup', this.searchShortcut) - } - - render() { - return
this.props.setView(SEARCH) }>
- } -} - -SearchButton.propTypes = { - view: PropTypes.string.isRequired, - setView: PropTypes.func.isRequired -} - -const mapStateToProps = (state) => ({ - view: state.view.view -}) - -export default connect(mapStateToProps, { setView })(SearchButton) \ No newline at end of file diff --git a/src/components/SettingsButton.js b/src/components/SettingsButton.js deleted file mode 100644 index 80d4117..0000000 --- a/src/components/SettingsButton.js +++ /dev/null @@ -1,24 +0,0 @@ -import React, { Component } from 'react' -import '../css/SettingsButton.scss' - -import { connect } from 'react-redux' -import PropTypes from 'prop-types' -import { setView } from '../actions/viewActions' -import { SETTINGS } from '../views' - -class SettingsButton extends Component { - render() { - return
this.props.setView(SETTINGS) }>
- } -} - -SettingsButton.propTypes = { - view: PropTypes.string.isRequired, - setView: PropTypes.func.isRequired -} - -const mapStateToProps = (state) => ({ - view: state.view.view -}) - -export default connect(mapStateToProps, { setView })(SettingsButton) \ No newline at end of file diff --git a/src/components/SideBar.js b/src/components/SideBar.js index e24e31e..03fbe0f 100644 --- a/src/components/SideBar.js +++ b/src/components/SideBar.js @@ -4,21 +4,36 @@ import '../css/SideBar.scss' import { connect } from 'react-redux' import PropTypes from 'prop-types' -import SettingsButton from './SettingsButton' -import SearchButton from './SearchButton' +import { setView } from '../actions/viewActions' +import { setQueueOpen } from '../actions/queueActions' import { fetchNew, fetchTopDownloads, fetchTopFinished, fetchLocalSongs } from '../actions/songListActions' import { fetchApprovedMods, fetchRecommendedMods, fetchModCategories, fetchLocalMods, fetchActivatedMods, checkInstalledMods } from '../actions/modActions' import { fetchLocalPlaylists } from '../actions/playlistsActions' import { setResource } from '../actions/sourceActions' import { resizeSidebar, setSection } from '../actions/sidebarActions' -import QueueButton from './QueueButton'; -import { SONG_LIST, PLAYLIST_LIST, MODS_VIEW } from '../views' + +import * as VIEWS from '../views' import * as RESOURCES from '../constants/resources' import * as SECTIONS from '../constants/sections' -import DonateButton from './DonateButton'; + +const closeQueueAction = function (e) { if(!e.target.classList.contains('i-download-queue') && this.props.isQueueOpen) { this.props.setQueueOpen(false) } } class SideBar extends Component { + constructor(props) { + super(props) + + this.closeQueueAction = closeQueueAction.bind(this) + } + + componentDidMount() { + document.addEventListener('mouseup', this.closeQueueAction) + } + + componentWillUnmount() { + document.removeEventListener('mouseup', this.closeQueueAction) + } + render() { return ( ) } @@ -78,10 +98,11 @@ const mapStateToProps = state => ({ resource: state.resource, sidebarOpen: state.sidebar.isOpen, offlineMode: state.settings.offlineMode, - section: state.sidebar.section + section: state.sidebar.section, + isQueueOpen: state.queue.isOpen }) -export default connect(mapStateToProps, { fetchNew, fetchTopDownloads, fetchTopFinished, fetchLocalSongs, fetchLocalPlaylists, fetchApprovedMods, fetchLocalMods, fetchActivatedMods, fetchRecommendedMods, fetchModCategories, setResource, resizeSidebar, setSection, checkInstalledMods })(SideBar) +export default connect(mapStateToProps, { fetchNew, fetchTopDownloads, fetchTopFinished, fetchLocalSongs, fetchLocalPlaylists, fetchApprovedMods, fetchLocalMods, fetchActivatedMods, fetchRecommendedMods, fetchModCategories, setResource, resizeSidebar, setSection, checkInstalledMods, setView, setQueueOpen })(SideBar) /*
  • Mod Packs
    • diff --git a/src/css/DonateButton.scss b/src/css/DonateButton.scss deleted file mode 100644 index 52ecfb8..0000000 --- a/src/css/DonateButton.scss +++ /dev/null @@ -1,36 +0,0 @@ -#donate-button { - width: 40px; - height: 50px; - background-size: 25px 25px; - background-repeat: no-repeat; - background-image: url(../assets/heart.png); - background-position: center center; - cursor: pointer; - - &:hover, &.open { - background-image: url(../assets/heart-filled.png); - } - - &.open { - animation: heartbeat 1s alternate forwards infinite; - } -} - -.theme-dark, .theme-hc { - #donate-button { - background-image: url(../assets/dark/heart.png); - - &:hover, &.open { - background-image: url(../assets/heart-filled.png); - } - } -} - -@keyframes heartbeat { - 70% { - transform: scaleX(1) scaleY(1); - } - 100% { - transform: scaleX(1.1) scaleY(1.2); - } -} \ No newline at end of file diff --git a/src/css/QueueButton.scss b/src/css/QueueButton.scss deleted file mode 100644 index f514a44..0000000 --- a/src/css/QueueButton.scss +++ /dev/null @@ -1,61 +0,0 @@ -@import './Animations'; - -#queue-button { - width: 40px; - height: 50px; - background-size: 25px 25px; - background-repeat: no-repeat; - background-image: url(../assets/queue.png); - background-position: center center; - cursor: pointer; - - &:hover, &.open { - background-image: url(../assets/queue-filled.png); - } - - &.open { - animation: queue-button-anim 3s forwards infinite; - } - - &.notify { - animation: bounce 1s ease 0s 1 forwards; - } -} - -.theme-dark, .theme-hc { - #queue-button { - background-image: url(../assets/dark/queue.png); - - &:hover, &.open { - background-image: url(../assets/dark/queue-filled.png); - } - - &.open { - animation: queue-button-anim-dark 3s forwards infinite; - } - } -} - -@keyframes queue-button-anim { - 30% { - background-image: url(../assets/queue-filled-0.png); - } - 60% { - background-image: url(../assets/queue-filled-1.png); - } - 90% { - background-image: url(../assets/queue-filled-2.png); - } -} - -@keyframes queue-button-anim-dark { - 30% { - background-image: url(../assets/dark/queue-filled-0.png); - } - 60% { - background-image: url(../assets/dark/queue-filled-1.png); - } - 90% { - background-image: url(../assets/dark/queue-filled-2.png); - } -} \ No newline at end of file diff --git a/src/css/SearchButton.scss b/src/css/SearchButton.scss deleted file mode 100644 index 8df4006..0000000 --- a/src/css/SearchButton.scss +++ /dev/null @@ -1,42 +0,0 @@ -#search-button { - width: 40px; - height: 50px; - background-size: 25px 25px; - background-repeat: no-repeat; - background-image: url(../assets/search.png); - background-position: center center; - cursor: pointer; - - &:hover, &.open { - background-image: url(../assets/search-filled.png); - } - - &.open { - animation: search-button-anim 5s forwards infinite; - } -} - -.theme-dark, .theme-hc { - #search-button { - background-image: url(../assets/dark/search.png); - - &:hover, &.open { - background-image: url(../assets/dark/search-filled.png); - } - } -} - -@keyframes search-button-anim { - 20% { - transform: translate(3px, -3px); - } - 40% { - transform: translate(-3px, 3px); - } - 60% { - transform: translate(-3px, -3px); - } - 80% { - transform: translate(3px, 3px); - } -} \ No newline at end of file diff --git a/src/css/SettingsButton.scss b/src/css/SettingsButton.scss deleted file mode 100644 index 79ef3a3..0000000 --- a/src/css/SettingsButton.scss +++ /dev/null @@ -1,33 +0,0 @@ -@import './Animations'; - -.settings-button { - width: 40px; - height: 50px; - background-size: 25px 25px; - background-repeat: no-repeat; - background-image: url(../assets/settings.png); - background-position: center center; - cursor: pointer; - - &:hover, &.open { - background-image: url(../assets/settings-filled.png); - } - - &.open { - animation: spin 10s linear forwards infinite; - } -} - -.theme-dark, .theme-hc { - .settings-button { - background-image: url(../assets/dark/settings.png); - - &:hover, &.open { - background-image: url(../assets/dark/settings-filled.png); - } - - &.open { - background-image: url(../assets/dark/settings-filled.png); - } - } -} \ No newline at end of file diff --git a/src/css/SideBar.scss b/src/css/SideBar.scss index 5f622aa..e873d14 100644 --- a/src/css/SideBar.scss +++ b/src/css/SideBar.scss @@ -1,4 +1,5 @@ @import './StyleConstants'; +@import './Animations'; #sidebar { width: 195px; @@ -22,20 +23,101 @@ } .buttons-bottom { - width: 100vw !important; - display: flex; - flex-flow: row wrap; position: absolute; bottom: 15px; width: inherit; div { - width: 30px; + width: 100%; + overflow: hidden; height: 30px; - background-size: 30px; cursor: pointer; padding-right: 5px; padding-top: 5px; + display: flex; + align-items: center; + + &:before { + content: ''; + display: inline-block; + height: 25px; + width: 25px; + overflow: hidden; + margin-right: 10px; + background-size: 25px 25px; + background-repeat: no-repeat; + background-position: center center; + flex-shrink: 0; + } + } + + #settings-button { + &:before { + background-image: url(../assets/settings.png); + } + + &:hover, &.open { + &::before { + background-image: url(../assets/settings-filled.png); + } + } + + &.open::before { + animation: spin 10s linear forwards infinite; + } + } + + #search-button { + &::before { + background-image: url(../assets/search.png); + } + + &:hover, &.open { + &::before { + background-image: url(../assets/search-filled.png); + } + } + + &.open::before { + animation: search-button-anim 5s forwards infinite; + } + } + + #queue-button { + &::before { + background-image: url(../assets/queue.png); + } + + &:hover, &.open { + &::before { + background-image: url(../assets/queue-filled.png); + } + + } + + &.open::before { + animation: queue-button-anim 3s forwards infinite; + } + + &.notify::before { + animation: bounce 1s ease 0s 1 forwards; + } + } + + #donate-button { + &::before { + background-image: url(../assets/heart.png); + } + + &:hover, &.open { + &::before { + background-image: url(../assets/heart-filled.png); + } + } + + &.open::before { + animation: heartbeat 1s alternate forwards infinite; + } } } @@ -57,16 +139,9 @@ } } - .buttons-bottom { - width: 30px !important; - } - - h5, ul { - display: none; - } - - .section { - font-size: 0; + .section-content { + max-height: 0 !important; + transition: .3s !important; } } @@ -74,8 +149,10 @@ font-size: 12pt; margin-top: 5px; margin-bottom: 10px; - margin-left: 5px; cursor: pointer; + overflow: hidden; + display: flex; + align-items: center; &.selected { color: $theme-light-accent-color; @@ -83,7 +160,7 @@ } &:hover { - font-weight: 900; + font-weight: 900 } &::before { @@ -91,8 +168,10 @@ display: inline-block; width: 25px; height: 25px; - transform: translate(-5px, 7px); + flex-shrink: 0; + margin-right: 10px; background-size: 25px; + background-position: center; background-repeat: no-repeat; } @@ -160,9 +239,10 @@ .section-content { max-height: 0; overflow: hidden; - transition: .5s; + transition: .2s; &.selected { + transition: .5s; max-height: 400px; } } @@ -269,6 +349,63 @@ background-color: $theme-light-sidebar-background-color; color: $theme-dark-text-color; + .buttons-bottom { + #settings-button { + &::before { + background-image: url(../assets/dark/settings.png); + } + + + &:hover, &.open { + &::before { + background-image: url(../assets/dark/settings-filled.png); + } + } + } + + #search-button { + &::before { + background-image: url(../assets/dark/search.png); + } + + + &:hover, &.open { + &::before { + background-image: url(../assets/dark/search-filled.png); + } + } + } + + #queue-button { + &::before { + background-image: url(../assets/dark/queue.png); + } + + &:hover, &.open { + &::before { + background-image: url(../assets/dark/queue-filled.png); + } + } + + &.open::before { + animation: queue-button-anim-dark 3s forwards infinite; + } + } + + #donate-button { + &::before { + background-image: url(../assets/dark/heart.png); + } + + + &:hover, &.open { + &::before { + background-image: url(../assets/heart-filled.png); + } + } + } + } + .section { &.section-songs { &::before { @@ -436,4 +573,52 @@ } } } +} + +@keyframes search-button-anim { + 20% { + transform: translate(3px, -3px); + } + 40% { + transform: translate(-3px, 3px); + } + 60% { + transform: translate(-3px, -3px); + } + 80% { + transform: translate(3px, 3px); + } +} + +@keyframes heartbeat { + 70% { + transform: scaleX(1) scaleY(1); + } + 100% { + transform: scaleX(1.1) scaleY(1.2); + } +} + +@keyframes queue-button-anim { + 30% { + background-image: url(../assets/queue-filled-0.png); + } + 60% { + background-image: url(../assets/queue-filled-1.png); + } + 90% { + background-image: url(../assets/queue-filled-2.png); + } +} + +@keyframes queue-button-anim-dark { + 30% { + background-image: url(../assets/dark/queue-filled-0.png); + } + 60% { + background-image: url(../assets/dark/queue-filled-1.png); + } + 90% { + background-image: url(../assets/dark/queue-filled-2.png); + } } \ No newline at end of file