consistently rename maxCardCount to CardLimit

+ remove snackbar as response due to it showing on every change
+ fix component name of ClearLocalStorage
+ disabled stepper in number input field
+ changed color of hint

src/App.vue

@@ -13,7 +13,7 @@
             <router-view
               :decks="decks"
               :numberOfSelectedDecks="numberOfSelectedDecks"
-              :maxCardCount="maxCardCount"
+              :cardLimit="cardLimit"
             />
             <v-snackbar app v-model="snackbar.snackbar" :timeout="snackbar.timeout">
               {{ snackbar.text }}
@@ -65,9 +65,9 @@ const AppProps = Vue.extend({
 export default class App extends AppProps {
   propertiesToSyncWithLocalStorage = [
     { key: "decks", defaultValue: [] },
-    { key: "maxCardCount", defaultValue: "" }
+    { key: "cardLimit", defaultValue: "" }
   ] as SyncItem[];
-  maxCardCount = "";
+  cardLimit = "";
   decks = [] as Deck[];
   snackbar = {
     text: "",

src/components/learn/Learn.vue

@@ -51,7 +51,7 @@ const LearnProps = Vue.extend({
   props: {
     decks: { type: Array as () => Deck[] },
     numberOfSelectedDecks: Number,
-    maxCardCount: String
+    cardLimit: String
   }
 });
 
@@ -141,10 +141,10 @@ export default class Learn extends LearnProps {
       (this.learningSessionManager.learningSession.currentElementIndex ===
         this.learningSessionManager.learningSession.elements.length - 1 &&
         this.learningSessionManager.cardsToSelectFrom.length === 0) ||
-      (this.maxCardCount === "0"
+      (this.cardLimit === "0"
         ? false
         : this.learningSessionManager.learningSession.currentElementIndex ===
-          parseInt(this.maxCardCount) - 1);
+          parseInt(this.cardLimit) - 1);
     return endOfSession;
   }
 

src/components/settings/CardLimit.vue

@@ -0,0 +1,89 @@
+<template>
+  <v-col cols="12" sm="12" md="6" lg="6" xl="6">
+    <v-card height="100%" raised>
+      <v-card-title>Card Limit</v-card-title>
+      <v-card-text>
+        <p class="paragraph">
+          Limit the number of cards that will be in each learning session.
+          <v-icon
+            size="1em"
+            @click="showHelpText = !showHelpText"
+            class="mx-1"
+          >mdi-help-circle-outline</v-icon>
+        </p>
+        <p
+          class="description"
+          v-show="showHelpText"
+        >If the given deck(s) has (have) less cards it will default to the number of cards in the given deck(s).</p>
+        <v-text-field v-model="curcardLimit" type="number" min="1" :label="label" hide-details="auto" outlined></v-text-field>
+      </v-card-text>
+      <v-card-actions class="button-padding">
+        <v-spacer></v-spacer>
+        <v-btn color="red" @click="deactivatecardLimit" right>Deactivate Limit</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-col>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import Component from "vue-class-component";
+
+import { Event } from "../../types";
+
+const CardLimitProps = Vue.extend({
+  props: {
+    cardLimit: String
+  }
+});
+
+@Component
+export default class CardLimit extends CardLimitProps {
+  noLimitString = "Currently no limit";
+  defaultLabel = "Card Limit";
+  showHelpText = false;
+
+  get label() {
+    return this.cardLimit === "0" || null
+      ? this.noLimitString
+      : this.defaultLabel;
+  }
+
+  get curcardLimit() {
+    return this.cardLimit === "0" || null
+      ? null
+      : this.cardLimit;
+  }
+
+  set curcardLimit(newValue) {
+    this.$eventHub.$emit(Event.UPDATE_CARD_LIMIT, newValue);
+  }
+
+  deactivatecardLimit() {
+    this.$eventHub.$emit(Event.UPDATE_CARD_LIMIT, "0");
+  }
+}
+</script>
+
+<style scoped>
+.button-padding {
+  padding: 16px;
+}
+.description {
+  align-items: center;
+  font-size: 0.875rem;
+  font-weight: 400;
+  padding: 0 16px;
+  color: rgba(255, 255, 255, 0.7);
+}
+p .v-icon {
+  color: inherit;
+}
+
+/* Disable stepper in number input */
+::v-deep input::-webkit-outer-spin-button,
+::v-deep input::-webkit-inner-spin-button {
+-webkit-appearance: none;
+margin: 0;
+}
+</style>

src/components/settings/ClearLocalStorage.vue

@@ -21,7 +21,7 @@ import Component from "vue-class-component";
 import * as clearStorageDialogHelper from "../../helpers/clearStorageDialogHelper";
 
 @Component
-export default class MaxCardCount extends Vue {
+export default class ClearLocalStorage extends Vue {
   clearLocalStorage() {
     clearStorageDialogHelper.clearLocalStorageDialog(this);
   }

src/components/settings/MaxCardCountCard.vue

@@ -1,70 +0,0 @@
-<template>
-  <v-col cols="12" sm="12" md="6" lg="6" xl="6">
-    <v-card height="100%" raised>
-      <v-card-title>Max Card Count</v-card-title>
-      <v-card-text>
-        <p>
-          Limit the number of cards that will be in each learning session.
-          <v-icon
-            size="1em"
-            @click="showHelpText = !showHelpText"
-            class="mx-1"
-          >mdi-help-circle-outline</v-icon>
-        </p>
-        <p
-          class="description"
-          v-show="showHelpText"
-        >If the given deck(s) has(have) less cards it will default to the number of cards in the given deck(s).</p>
-        <v-text-field v-model="curMaxCardCount" type="number" min="1" :label="label" outlined></v-text-field>
-      </v-card-text>
-      <v-card-actions class="button-padding">
-        <v-spacer></v-spacer>
-        <v-btn color="red" @click="deactivateMaxCardCount" right>Deactivate Limit</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-col>
-</template>
-
-<script lang="ts">
-import Vue from "vue";
-import Component from "vue-class-component";
-
-import { Event } from '../../types';
-
-const MaxCardCountProps = Vue.extend({
-  props: {
-    maxCardCount: String
-  }
-});
-
-@Component
-export default class MaxCardCount extends MaxCardCountProps {
-  noLimitString = "Currently no limit";
-  defaultLabel = "Maximum Cards";
-  showHelpText = false;
-
-  get label() {
-    return this.maxCardCount === "0" || null
-      ? this.noLimitString
-      : this.defaultLabel;
-  }
-
-  get curMaxCardCount() {
-    return this.maxCardCount === "0" || null ? null : this.maxCardCount;
-  }
-
-  set curMaxCardCount(newValue) {
-    this.$eventHub.$emit(Event.UPDATE_MAX_CARD_COUNT, newValue);
-  }
-
-  deactivateMaxCardCount() {
-    this.$eventHub.$emit(Event.UPDATE_MAX_CARD_COUNT, "0");
-  }
-}
-</script>
-
-<style scoped>
-.button-padding {
-  padding: 16px;
-}
-</style>

src/components/settings/Settings.vue

@@ -2,7 +2,7 @@
   <div>
     <v-container fluid>
       <v-row>
-        <MaxCardCount :maxCardCount="maxCardCount" />
+        <CardLimit :cardLimit="cardLimit" />
         <ClearLocalStorage />
       </v-row>
     </v-container>
@@ -13,18 +13,18 @@
 import Vue from "vue";
 import Component from "vue-class-component";
 
-import MaxCardCount from "./MaxCardCountCard.vue";
+import CardLimit from "./CardLimit.vue";
 import ClearLocalStorage from "./ClearLocalStorage.vue";
 
 const SettingProps = Vue.extend({
   props: {
-    maxCardCount: String
+    cardLimit: String
   }
 });
 
 @Component({
   components: {
-    MaxCardCount,
+    CardLimit,
     ClearLocalStorage
   }
 })

src/helpers/eventListener.ts

@@ -8,7 +8,6 @@ import {
 import { clearLocalStorage } from "./localStorageHelper";
 import { addDecksFromJSON, addDecksFromFile } from "./addDecksHelper";
 import { showSnackbar } from "./snackbarHelper";
-import { updateMaxCardCount } from "./updateMaxCardCount";
 
 export function registerEventListenerForMainApp(context: any) {
   context.$eventHub.$on(Event.DELETE_SELECTED_DECKS, () => {
@@ -47,7 +46,7 @@ export function registerEventListenerForMainApp(context: any) {
     }
     context.$router.replace("/");
   });
-  context.$eventHub.$on(Event.UPDATE_MAX_CARD_COUNT, (newValue: string) => {
+  context.$eventHub.$on(Event.UPDATE_CARD_LIMIT, (newValue: string) => {
-    updateMaxCardCount(context, newValue);
+    context.cardLimit = newValue;
   });
 }

src/helpers/updateMaxCardCount.ts

@@ -1,11 +0,0 @@
-import { showSnackbar } from "./snackbarHelper";
-
-export function updateMaxCardCount(context: any, newValue: string) {
-  context.maxCardCount = newValue;
-  newValue !== "0"
-    ? showSnackbar(
-        context,
-        "Successfully updated max card count to " + newValue + "."
-      )
-    : showSnackbar(context, "Successfully deactivated max card count.");
-}

src/types/index.ts

@@ -117,7 +117,7 @@ export enum Event {
   DESELECT_ALL_DECKS = "deselectAllDecks",
   SWIPE_LEFT_IN_LEARN = "swipeLeftInLearn",
   SWIPE_RIGHT_IN_LEARN = "swipeRightInLearn",
-  UPDATE_MAX_CARD_COUNT = "updateMaxCardCount",
+  UPDATE_CARD_LIMIT = "updateCardLimit",
 }
 
 export interface NavBarConfigItem {

src/views/Learn.vue

@@ -4,7 +4,7 @@
       :decks="decks"
       :numberOfSelectedDecks="numberOfSelectedDecks"
       :learningSession="learningSession"
-      :maxCardCount="maxCardCount"
+      :cardLimit="cardLimit"
     />
   </div>
 </template>
@@ -22,7 +22,7 @@ const LearnProps = Vue.extend({
     decks: { type: Array as () => Deck[] },
     learningSession: { type: Object as () => LearningSession },
     numberOfSelectedDecks: Number,
-    maxCardCount: String
+    cardLimit: String
   }
 });
 

src/views/Settings.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="settings">
-    <SettingsComponent :maxCardCount="maxCardCount" />
+    <SettingsComponent :cardLimit="cardLimit" />
   </div>
 </template>
 
@@ -12,7 +12,7 @@ import SettingsComponent from "../components/settings/Settings.vue";
 
 const SettingProps = Vue.extend({
   props: {
-    maxCardCount: String
+    cardLimit: String
   }
 });