don't show drag icons if sorting is enabled (#156)

* don't show drag icons if sorting is enabled

Sorting overwrites the dragging order. Therefore the drag icons should only be visible if sorting is disabled.

* reverse initial attempt

* Add custom sort icons

* use `sort-amount-down` as default

* Linting

* params are kebab case

it's a ~~Jersey~~Vue thing

src/components/Lists/List.vue

@@ -2,9 +2,9 @@
   <div :class="['list', viewClass, { unique: unique && view !== 'masonry', dragging }]">
     <header>
       <span class="list-name">
-        <i
+        <sort-icon
           v-if="autoSortEnabled"
-          class="fas fa-magic"
+          :sort-order="list[listIndex].sortOrder"
           title="List sorted automatically"
         />
         {{ list[listIndex].name }} ({{ gameList.length }})
@@ -61,6 +61,7 @@ import GameCardGrid from '@/components/GameCards/GameCardGrid';
 import GameCardWide from '@/components/GameCards/GameCardWide';
 import GameCardText from '@/components/GameCards/GameCardText';
 import AddGameModal from '@/components/Lists/AddGameModal';
+import SortIcon from '@/components/SortIcon';
 import { mapState } from 'vuex';
 
 export default {
@@ -73,6 +74,7 @@ export default {
     GameCardWide,
     GameCardText,
     AddGameModal,
+    SortIcon,
     ListSettingsModal,
     draggable,
   },

src/components/SortIcon.vue

@@ -0,0 +1,77 @@
+<template lang="html">
+  <span
+    v-if="custom && sortOrder != 'sortByName'"
+    class="sort-icon"
+  >
+    <i class="fas fa-long-arrow-alt-down arrow" />
+    <i
+      v-if="sortOrder === 'sortByRating'"
+      class="fas fa-star sort-type"
+    />
+    <i
+      v-if="sortOrder === 'sortByRating'"
+      class="far fa-star sort-type bottom-icon"
+    />
+    <i
+      v-if="sortOrder === 'sortByProgress'"
+      class="fas fa-clock sort-type single-icon"
+    />
+    <i
+      v-if="sortOrder === 'sortByReleaseDate'"
+      class="fas fa-calendar sort-type single-icon"
+    />
+  </span>
+  <i
+    v-else-if="custom"
+    class="fas fa-sort-alpha-down"
+  />
+  <i
+    v-else
+    class="fas fa-sort-amount-down"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    sortOrder: {
+      type: String,
+      default: '',
+    },
+    custom: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+  @import "~styles/styles";
+
+  .sort-icon {
+    display: inline-grid;
+    grid-gap: 1px;
+    grid-template: 1fr 1fr / 1fr 1fr;
+    align-items: center;
+    justify-items: center;
+
+    .arrow,
+    .single-icon {
+      grid-row: span 2;
+    }
+
+    .sort-type {
+      font-size: $font-size / 2;
+    }
+
+    .single-icon {
+      align-self: start;
+    }
+
+    .bottom-icon {
+      grid-column: 2;
+      grid-row: 2;
+    }
+  }
+</style>