Version 1.2.1

denno020 · Oct 8, 2019 · 96c78c2 · 96c78c2
1 parent 5d00992
commit 96c78c2
Show file tree

Hide file tree

Showing 30 changed files with 1,070 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,19 @@
+# 1.2.1
+
+**Added a loading indicator while the app generates an ID**
+
+Feedback is always nice when network requests are happening, so now the Get Link button will display a loading graphic while the application is generating an ID
+
+**Added a FAQ**
+
+Along with a single, lonesome question/answer
+
+**Added performance monitoring**
+
+One for me really, I will now be able to keep track of how long it takes to generate URL ID's
+
+# 1.2.0
+
 # 1.1.0
 
 ### Feature

diff --git a/application-configuration.js b/application-configuration.js
@@ -38,5 +38,5 @@ export default {
     "databaseURL": "{Enter databaseURL}",
     "projectId": "{Enter projectID}"
   },
-  version: '1.1.0'
+  version: '1.2.1'
 };
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "linkslist",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "licence": "GNU General Public Licence",
   "private": true,
   "scripts": {

diff --git a/src/App.css b/src/App.css
@@ -31,3 +31,13 @@
     margin: 0;
     width: 100%;
 }
+
+.empty-links-list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.empty-links-list__item {
+    margin-bottom: 20px;
+}
diff --git a/src/App.js b/src/App.js
@@ -19,8 +19,10 @@
 import {
   Alerts,
   Card,
+  FAQ,
   Footer,
   GetLink,
+  HowToUseDialog,
   Toolbar,
   ViewContainer
 } from './components';
@@ -30,8 +32,10 @@ export default {
   components: {
     Alerts,
     Card,
+    FAQ,
     Footer,
     GetLink,
+    HowToUseDialog,
     Toolbar,
     ViewContainer
   },

diff --git a/src/App.vue b/src/App.vue
@@ -60,9 +60,13 @@
                 <Card :link="link" />
               </li>
             </ul>
-            <span v-else class="font-weight-light">
-              Enter URLs into the input box above
-            </span>
+            <div v-else class="empty-links-list">
+              <div class="empty-links-list__item font-weight-light">
+                Enter URLs into the input box above
+              </div>
+              <HowToUseDialog class="empty-links-list__item"/>
+              <FAQ class="empty-links-list__item"/>
+            </div>
           </v-layout>
         </v-layout>
       </v-container>

diff --git a/src/components/FAQ/FAQ.js b/src/components/FAQ/FAQ.js
@@ -0,0 +1,36 @@
+/*
+ *  Links List - Create a list of links, and then share it!
+ *  Copyright (c) 2019 Luke Denton
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import Question from '../Question/Question.vue';
+
+export default {
+    name: "FAQ",
+    components: {
+        Question
+    },
+    data () {
+        return {
+            dialog: false
+        }
+    },
+    computed: {
+        theme() {
+            return this.$store.getters['ui/theme'];
+        }
+    }
+}
diff --git a/src/components/FAQ/FAQ.vue b/src/components/FAQ/FAQ.vue
@@ -0,0 +1,68 @@
+<!--
+  -  Links List - Create a list of links, and then share it!
+  -  Copyright (c) 2019 Luke Denton
+  -
+  -  This program is free software: you can redistribute it and/or modify
+  -  it under the terms of the GNU General Public License as published by
+  -  the Free Software Foundation; either version 3 of the License, or
+  -  (at your option) any later version.
+  -
+  -  This program is distributed in the hope that it will be useful,
+  -  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  -  GNU General Public License for more details.
+  -
+  -  You should have received a copy of the GNU General Public License
+  -  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<template>
+    <v-dialog
+        v-model="dialog"
+        width="700"
+    >
+        <v-btn slot="activator" class="privacy-policy-link">FAQ</v-btn>
+
+        <v-card>
+            <v-card-title class="headline white--text" :class="theme" primary-title>
+                Frequently Asked Questions
+            </v-card-title>
+
+            <v-card-text>
+                <v-expansion-panel>
+                    <Question>
+                        <template slot="question">
+                            Can I import my Chrome, Firefox, Safari bookmarks?
+                        </template>
+                        <template slot="answer">
+                            Yes! If you can export your bookmarks into a HTML or similar text file, then you can import those links into your Links List. Here's how
+                            <ol>
+                                <li>Open your exported bookmarks file in a text edit</li>
+                                <li>Copy <em>all</em> of the text in that file</li>
+                                <li>Go to Links List and paste the clipboard contents into the link input field</li>
+                                <li>Click on the Add button!</li>
+                            </ol>
+                            This works because Links List will parse all of the text in the input field, looking for links. When it finds one, it will
+                            update the count on the Add button, so you know exactly how many links it has found, and is about to add
+                        </template>
+                    </Question>
+                </v-expansion-panel>
+            </v-card-text>
+
+            <v-divider></v-divider>
+
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn
+                    :color="theme"
+                    flat
+                    @click="dialog = false"
+                >
+                    Close
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script src="./FAQ.js"></script>
diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css
@@ -28,3 +28,17 @@
     transition: border-bottom linear 200ms;
     will-change: border-bottom;
 }
+
+@media (max-width: 720px) {
+    .v-footer {
+        flex-direction: column;
+    }
+}
+
+.links-container {
+    align-content: center;
+}
+
+.privacy-policy-link-container {
+    display: flex;
+}
diff --git a/src/components/Footer/Footer.vue b/src/components/Footer/Footer.vue
@@ -17,7 +17,7 @@
   -->
 
 <template>
-  <v-footer :color="theme" app class="pl-2 pr-2 white--text">
+  <v-footer :color="theme" app class="pl-2 pr-2 white--text" height="auto">
     <v-layout xs-3 class="links-container">
       <div class="version" itemprop="softwareVersion">
         <a class="white--text" href="https://github.com/denno020/linkslist/blob/master/CHANGELOG.md" target="_blank" rel="nofollow noopener">Version {{this.applicationVersion}}</a>

diff --git a/src/components/GetLink/GetLink.js b/src/components/GetLink/GetLink.js
@@ -29,6 +29,9 @@ export default {
     },
     theme() {
       return this.$store.getters['ui/theme'];
+    },
+    isLoading() {
+      return this.$store.getters['ui/isGettingId'];
     }
   },
   methods: {

diff --git a/src/components/GetLink/GetLink.vue b/src/components/GetLink/GetLink.vue
@@ -18,7 +18,7 @@
 
 <template>
   <v-layout justify-center shrink>
-    <v-btn v-if="!urlString" :color="theme" class="white--text" @click="handleGetLink">
+    <v-btn v-if="!urlString" :color="theme" class="white--text" @click="handleGetLink" :loading="isLoading">
       <v-icon class="mr-2">link</v-icon>
       Get link
     </v-btn>

diff --git a/src/components/HowToUseDialog/HowToUseDialog.css b/src/components/HowToUseDialog/HowToUseDialog.css
@@ -0,0 +1,18 @@
+/*
+ *  Links List - Create a list of links, and then share it!
+ *  Copyright (c) 2019 Luke Denton
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
diff --git a/src/components/HowToUseDialog/HowToUseDialog.js b/src/components/HowToUseDialog/HowToUseDialog.js
@@ -0,0 +1,36 @@
+/*
+ *  Links List - Create a list of links, and then share it!
+ *  Copyright (c) 2019 Luke Denton
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import SVGIcon from '../SVGIcon/SVGIcon.vue';
+
+export default {
+  name: "HowToUseDialog",
+  components: {
+    SVGIcon
+  },
+  data () {
+    return {
+      dialog: false
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.getters['ui/theme'];
+    }
+  }
+}
diff --git a/src/components/HowToUseDialog/HowToUseDialog.vue b/src/components/HowToUseDialog/HowToUseDialog.vue
@@ -0,0 +1,102 @@
+<!--
+  -  Links List - Create a list of links, and then share it!
+  -  Copyright (c) 2019 Luke Denton
+  -
+  -  This program is free software: you can redistribute it and/or modify
+  -  it under the terms of the GNU General Public License as published by
+  -  the Free Software Foundation; either version 3 of the License, or
+  -  (at your option) any later version.
+  -
+  -  This program is distributed in the hope that it will be useful,
+  -  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  -  GNU General Public License for more details.
+  -
+  -  You should have received a copy of the GNU General Public License
+  -  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<template>
+  <v-dialog
+    v-model="dialog"
+    width="700"
+  >
+    <a href="#" slot="activator" class="privacy-policy-link">What can I create a list of?</a>
+
+    <v-card>
+      <v-card-title
+        class="headline white--text"
+        :class="theme"
+        primary-title
+      >
+        What can I create a list of?
+      </v-card-title>
+
+      <v-card-text>
+        <p>
+          Well, anything you like! Provided it's a URL. Random text that doesn't <em>look</em> like a URL, won't be added.
+        </p>
+        <h2 class="font-weight-light">Wishlists</h2>
+        <p>
+          Help your family/friends with their online shopping for a gift for you by creating a collection of links to products/
+          online services that you'd love as a gift. They will be able to open these links, and secretly purchase <SVGIcon icon="shush"/>
+        </p>
+        <h3 class="font-weight-light">eBay Wishlist</h3>
+        <p>
+          Fill the hole in your eBay experience and create a wishlist of eBay items that you would like to share. It might seem
+          like eBay already has this feature, but as of writing this, there is no way to share a collection of items in eBay, using
+          eBay itself.
+        </p>
+        <h3 class="font-weight-light">Etsy Wishlist</h3>
+        <p>
+          Etsy also doesn't have the ability to create, nor therefore share, a wishlist! Links List will allow you to add links
+          to any Etsy listing, and save it to a shareable wishlist.
+        </p>
+        <p>
+          Advanced users can even create a wishlist that has both eBay <em>and</em> Etsy listings on them <SVGIcon icon="wink"/>, as well as
+          absolutely any other online store.
+        </p>
+
+        <h2 class="font-weight-light">List of links to review</h2>
+        <p>
+          Ever get caught looking through the <a href="https://www.reddit.com/r/aww" target="_blank" rel="noreferrer nofollow">/aww</a> subreddit, and got a bit carried away with the number of links that you
+          share to your significant other? I certainly have. With Links List, you can now copy the link to each subreddit
+          post into a new list, and share just the lists’ link. Even after sharing the link, you can still add more items,
+          as every addition/removal is still made, even after the Get Link button is clicked. As your partner goes through
+          each link in the list, they can remove them, essentially crossing off the item as done.
+        </p>
+
+        <h2 class="font-weight-light">Parse Plain Text Links</h2>
+        <p>
+          Another use case for Links List is to take a list of raw text URL's, and convert them to a clickable link! Nothing
+          is more arduous than having to copy a URL, open a new browser tab, paste the URL, and then hit enter. Swapping your hands
+          between keyboard and mouse for every step is a good way to get Repetitive Strain Injury (RSI). Instead, copy <em>all</em>
+          of your raw text links in a single go, then paste that into the Links List input. The Add button will update to indicate
+          how many links have been detected in that paste, and you can click the Add button (or hit enter directly after pasting),
+          to create your list.
+        </p>
+        <p>
+          It's unlikely you'll be sharing this list, but you can if you wanted!
+        </p>
+
+
+      </v-card-text>
+
+      <v-divider></v-divider>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+          :color="theme"
+          flat
+          @click="dialog = false"
+        >
+          Close
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script src="./HowToUseDialog.js"></script>
+<style scoped src="./HowToUseDialog.css"></style>