On the way

2024-11-10 14:44:13 +00:00 · 2016-11-17 16:37:12 +08:00 · 2016-11-17 16:37:12 +08:00 · d25670a50d
commit d25670a50d
parent 5185e547b0
10 changed files with 71 additions and 32 deletions
--- a/resources/assets/js/components/main-wrapper/main-content/album.vue
+++ b/resources/assets/js/components/main-wrapper/main-content/album.vue
@ -4,8 +4,7 @@
      <span class="overview">
        <img :src="album.cover" width="64" height="64" class="cover">
        {{ album.name }}
-        <i class="fa fa-angle-down toggler" v-show="isPhone && !showingControls" @click="showingControls = true"/>
-        <i class="fa fa-angle-up toggler" v-show="isPhone && showingControls" @click.prevent="showingControls = false"/>
+        <controls-toggler :showing-controls="showingControls" @toggleControls="toggleControls"/>

        <span class="meta" v-show="meta.songCount">
          by
@ -27,7 +26,11 @@
        </span>
      </span>

-      <song-list-controls :config="songListControlConfig" :selectedSongs="selectedSongs"/>
+      <song-list-controls
+        v-show="!isPhone || showingControls"
+        :config="songListControlConfig"
+        :selectedSongs="selectedSongs"
+      />
    </h1>

    <song-list :items="album.songs" type="album"/>
--- a/resources/assets/js/components/main-wrapper/main-content/artist.vue
+++ b/resources/assets/js/components/main-wrapper/main-content/artist.vue
@ -4,8 +4,7 @@
      <span class="overview">
        <img :src="artist.image" width="64" height="64" class="cover">
        {{ artist.name }}
-        <i class="fa fa-angle-down toggler" v-show="isPhone && !showingControls" @click="showingControls = true"/>
-        <i class="fa fa-angle-up toggler" v-show="isPhone && showingControls" @click.prevent="showingControls = false"/>
+        <controls-toggler :showing-controls="showingControls" @toggleControls="toggleControls"/>

        <span class="meta" v-show="meta.songCount">
          {{ artist.albums.length | pluralize('album') }}
@ -26,7 +25,11 @@
        </span>
      </span>

-      <song-list-controls :config="songListControlConfig" :selectedSongs="selectedSongs"/>
+      <song-list-controls
+        v-show="!isPhone || showingControls"
+        :config="songListControlConfig"
+        :selectedSongs="selectedSongs"
+      />
    </h1>

    <song-list :items="artist.songs" type="artist"/>
--- a/resources/assets/js/components/main-wrapper/main-content/favorites.vue
+++ b/resources/assets/js/components/main-wrapper/main-content/favorites.vue
@ -2,8 +2,7 @@
  <section id="favoritesWrapper">
    <h1 class="heading">
      <span>Songs You Love
-        <i class="fa fa-angle-down toggler" v-show="isPhone && !showingControls" @click="showingControls = true"/>
-        <i class="fa fa-angle-up toggler" v-show="isPhone && showingControls" @click.prevent="showingControls = false"/>
+        <controls-toggler :showing-controls="showingControls" @toggleControls="toggleControls"/>

        <span class="meta" v-show="meta.songCount">
          {{ meta.songCount | pluralize('song') }}
@ -18,7 +17,11 @@
        </span>
      </span>

-      <song-list-controls :config="songListControlConfig" :selectedSongs="selectedSongs"/>
+      <song-list-controls
+        v-show="!isPhone || showingControls"
+        :config="songListControlConfig"
+        :selectedSongs="selectedSongs"
+      />
    </h1>

    <song-list v-show="state.songs.length" :items="state.songs" type="favorites"/>
--- a/resources/assets/js/components/main-wrapper/main-content/index.vue
+++ b/resources/assets/js/components/main-wrapper/main-content/index.vue
@ -162,12 +162,6 @@ export default {
      text-align: center;
      flex-direction: column;

-      .toggler {
-        font-size: 1rem;
-        margin-left: 4px;
-        color: $colorHighlight;
-      }
-
      .meta {
        display: none;
      }
--- a/resources/assets/js/components/main-wrapper/main-content/playlist.vue
+++ b/resources/assets/js/components/main-wrapper/main-content/playlist.vue
@ -2,8 +2,7 @@
  <section id="playlistWrapper">
    <h1 class="heading">
      <span>{{ playlist.name }}
-        <i class="fa fa-angle-down toggler" v-show="isPhone && !showingControls" @click="showingControls = true"/>
-        <i class="fa fa-angle-up toggler" v-show="isPhone && showingControls" @click.prevent="showingControls = false"/>
+        <controls-toggler :showing-controls="showingControls" @toggleControls="toggleControls"/>

        <span class="meta" v-show="meta.songCount">
          {{ meta.songCount | pluralize('song') }}
@ -19,7 +18,7 @@
      </span>

      <song-list-controls
-        v-show="playlist.songs.length"
+        v-show="playlist.songs.length && (!isPhone || showingControls)"
        @shuffleAll="shuffleAll"
        @shuffleSelected="shuffleSelected"
        @deletePlaylist="confirmDelete"
--- a/resources/assets/js/components/main-wrapper/main-content/queue.vue
+++ b/resources/assets/js/components/main-wrapper/main-content/queue.vue
@ -2,8 +2,7 @@
  <section id="queueWrapper">
    <h1 class="heading">
      <span title="That's a freaking lot of U's and E's">Current Queue
-        <i class="fa fa-angle-down toggler" v-show="isPhone && !showingControls" @click="showingControls = true"/>
-        <i class="fa fa-angle-up toggler" v-show="isPhone && showingControls" @click.prevent="showingControls = false"/>
+        <controls-toggler :showing-controls="showingControls" @toggleControls="toggleControls"/>

        <span class="meta" v-show="meta.songCount">
          {{ meta.songCount | pluralize('song') }}
@ -13,7 +12,7 @@
      </span>

      <song-list-controls
-        v-show="state.songs.length"
+        v-show="state.songs.length && (!isPhone || showingControls)"
        @shuffleAll="shuffleAll"
        @shuffleSelected="shuffleSelected"
        @clearQueue="clearQueue"
@ -98,7 +97,6 @@ export default {
    }
  }

-
  button.play-shuffle {
    i {
      margin-right: 0 !important;
--- a/resources/assets/js/components/main-wrapper/main-content/songs.vue
+++ b/resources/assets/js/components/main-wrapper/main-content/songs.vue
@ -2,8 +2,7 @@
  <section id="songsWrapper">
    <h1 class="heading">
      <span>All Songs
-        <i class="fa fa-angle-down toggler" v-show="isPhone && !showingControls" @click="showingControls = true"/>
-        <i class="fa fa-angle-up toggler" v-show="isPhone && showingControls" @click.prevent="showingControls = false"/>
+        <controls-toggler :showing-controls="showingControls" @toggleControls="toggleControls"/>

        <span class="meta" v-show="meta.songCount">
          {{ meta.songCount | pluralize('song') }}
@ -13,6 +12,7 @@
      </span>

      <song-list-controls
+        v-show="!isPhone || showingControls"
        @shuffleAll="shuffleAll"
        @shuffleSelected="shuffleSelected"
        :config="songListControlConfig"
--- a/resources/assets/js/components/shared/song-list-controls-toggler.vue
+++ b/resources/assets/js/components/shared/song-list-controls-toggler.vue
@ -0,0 +1,38 @@
+<template>
+  <span class="song-list-controls-toggler" v-if="isPhone" @click="toggleControls">
+    <i class="fa fa-angle-down toggler" v-show="!showingControls"/>
+    <i class="fa fa-angle-up toggler" v-show="showingControls"/>
+  </span>
+</template>
+
+<script>
+import isMobile from 'ismobilejs';
+
+export default {
+  name: 'shared--song-list-controls-toggler',
+  props: ['showingControls'],
+
+  data() {
+    return {
+      isPhone: isMobile.phone
+    }
+  },
+
+  methods: {
+    toggleControls() {
+      this.$emit('toggleControls');
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+@import "../../../sass/partials/_vars.scss";
+@import "../../../sass/partials/_mixins.scss";
+
+.toggler {
+  font-size: 1rem;
+  margin-left: 4px;
+  color: $colorHighlight;
+}
+</style>
--- a/resources/assets/js/components/shared/song-list-controls.vue
+++ b/resources/assets/js/components/shared/song-list-controls.vue
@ -39,7 +39,6 @@
 </template>

 <script>
-import isMobile from 'ismobilejs';
 import { assign } from 'lodash';
 import { queueStore } from '../../stores';
 import addToMenu from './add-to-menu.vue';
@ -52,7 +51,6 @@ export default {

  data() {
    return {
-      isPhone: isMobile.phone,
      fullConfig: {
        shuffle: true,
        addTo: {
@ -112,6 +110,4 @@ export default {
 };
 </script>

-<style lang="sass">
-
-</style>
+<style lang="sass"></style>
--- a/resources/assets/js/mixins/has-song-list.js
+++ b/resources/assets/js/mixins/has-song-list.js
@ -8,9 +8,10 @@ import isMobile from 'ismobilejs';
 import { playback } from '../services';
 import songList from '../components/shared/song-list.vue';
 import songListControls from '../components/shared/song-list-controls.vue';
+import controlsToggler from '../components/shared/song-list-controls-toggler.vue';

 export default {
-  components: { songList, songListControls },
+  components: { songList, songListControls, controlsToggler },

  data() {
    return {
@ -20,9 +21,9 @@ export default {
        totalLength: '00:00',
      },
      selectedSongs: [],
-      isPhone: isMobile.phone,
-      showingControls: true,
+      showingControls: false,
      songListControlConfig: {},
+      isPhone: isMobile.phone,
    };
  },

@ -42,5 +43,9 @@ export default {
    shuffleSelected() {
      playback.queueAndPlay(this.selectedSongs, true);
    },
+
+    toggleControls() {
+      this.showingControls = !this.showingControls;
+    }
  },
 };