Release v.1.3.0 (#48)

* Implement dark mode switching though vuex (#41)

* Lazy load search result. Image fetch button was missing lazy prop (#42)

* Upgrade most dependencies (nuxt, babel, linting etc) (#43)

* Upgrade Vuetify from 1.5.8 to 2.0.4 through @nuxtjs/vuetify package  (#44)

* Subtle card transitions (#45)

* Setup Travis CI to run jest test and build nuxt application (#46)

* Update app version (#47)

.eslintrc.js

@@ -15,5 +15,13 @@ module.exports = {
     'prettier'
   ],
   // add your custom rules here
-  rules: {}
+  rules: {
+    "vue/max-attributes-per-line": ["error", {
+      "singleline": 8,
+      "multiline": {
+        "max": 1,
+        "allowFirstLine": false
+      }
+    }]
+  }
 }

.travis.yml

@@ -0,0 +1,7 @@
+language: node_js
+node_js:
+  - "node"
+cache: npm
+script:
+  - npm run test
+  - npm run build

README.md

@@ -1,4 +1,4 @@
-# ColorPix
+# ColorPix [![Build Status](https://travis-ci.org/danielv14/ColorPix.svg?branch=master)](https://travis-ci.org/danielv14/ColorPix)
 
 > Nuxt.js app to help users find inspiration from color palettes created via images from Unsplash
 

assets/style/variables.scss

@@ -0,0 +1,7 @@
+@import '~vuetify/src/styles/styles.sass';
+
+// Card
+$card-border-radius: 6px;
+
+// Sheet
+$sheet-border-radius: $card-border-radius

components/color/Box.vue

@@ -1,10 +1,6 @@
 <template>
-  <v-hover>
-    <div
-      slot-scope="{ hover }"
-      :style="{backgroundColor: color, height: boxSize}"
-      class="color-box"
-    >
+  <v-hover v-slot:default="{ hover }">
+    <div :style="{ backgroundColor: color, height: boxSize }" class="color-box">
       <v-expand-transition>
         <div
           v-if="hover && hoverEffect"
@@ -47,7 +43,7 @@ export default {
 }
 </script>
 
-<style lang="stylus" scoped>
+<style lang="sass" scoped>
 .color-box
   height: 80px
   position: relative
@@ -58,5 +54,4 @@ export default {
   justify-content: center
   position: absolute
   width: 100%
-
 </style>

components/color/Boxes.vue

@@ -1,6 +1,9 @@
 <template>
   <v-layout>
-    <v-flex v-for="color in colors" :key="Math.floor(Math.random() * 1000) + color">
+    <v-flex
+      v-for="color in colors"
+      :key="Math.floor(Math.random() * 1000) + color"
+    >
       <color-box :color="color" :size="size" :hover-effect="hoverEffect" />
     </v-flex>
   </v-layout>

components/color/ClipboardCopy.vue

@@ -2,7 +2,13 @@
   <div @mouseleave="resetToolTip">
     <v-tooltip bottom>
       <template v-slot:activator="{ on }">
-        <v-btn color="grey darken-1" flat icon @click="copyToClipBoard" v-on="on">
+        <v-btn
+          color="grey darken-1"
+          text
+          icon
+          @click="copyToClipBoard"
+          v-on="on"
+        >
           <v-icon>content_copy</v-icon>
         </v-btn>
       </template>
@@ -42,7 +48,3 @@ export default {
   }
 }
 </script>
-
-<style lang="stylus" scoped>
-
-</style>

components/color/Slider.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div>
     <v-slider

components/color/Tabs.vue

@@ -1,17 +1,16 @@
 <template>
-  <v-tabs
-    v-model="activeTab"
-    slider-color="primary"
-    grow
-    hide-slider
-  >
+  <v-tabs v-model="activeTab" slider-color="primary" grow hide-slider>
     <v-tab v-for="tab in tabs" :key="tab" ripple>
       {{ tab }}
     </v-tab>
-    <v-tab-item v-for="(tab, index) in tabs" :key="tab + 'manipulation'" class="mt-2">
+    <v-tab-item
+      v-for="(tab, index) in tabs"
+      :key="tab + 'manipulation'"
+      class="mt-2"
+    >
       <color-slider
-        v-for="sliderSetting in colorManipulation[index]" 
-        :key="sliderSetting.type" 
+        v-for="sliderSetting in colorManipulation[index]"
+        :key="sliderSetting.type"
         :colors="colors"
         :type="sliderSetting.type"
         :label="sliderSetting.label"
@@ -48,6 +47,3 @@ export default {
   }
 }
 </script>
-
-<style lang="stylus" scoped>
-</style>

components/core/Footer.vue

@@ -1,8 +1,5 @@
 <template>
-  <v-footer
-    :fixed="fixedFooter"
-    app
-  >
+  <v-footer :fixed="fixedFooter" app>
     <span class="pl-2">&copy; {{ getYear() }}</span>
   </v-footer>
 </template>
@@ -22,5 +19,4 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

components/core/NavigationDrawer.vue

@@ -1,25 +1,42 @@
 <template>
   <div>
-    <v-navigation-drawer v-model="drawer" :clipped="clipped" fixed app :temporary="temporary">
+    <v-navigation-drawer
+      v-model="drawer"
+      :clipped="clipped"
+      fixed
+      app
+      :temporary="temporary"
+    >
       <v-list>
-        <v-list-tile v-for="(item, i) in items" :key="i" :to="item.to" router exact>
-          <v-list-tile-action>
+        <v-list-item
+          v-for="(item, i) in items"
+          :key="i"
+          :to="item.to"
+          router
+          exact
+        >
+          <v-list-item-action>
             <v-icon>{{ item.icon }}</v-icon>
-          </v-list-tile-action>
-          <v-list-tile-content>
-            <v-list-tile-title v-text="item.title" />
-          </v-list-tile-content>
-        </v-list-tile>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title v-text="item.title" />
+          </v-list-item-content>
+        </v-list-item>
+        <v-divider />
+        <v-list-item>
+          <v-list-item-action>
+            <core-theme-switch />
+          </v-list-item-action>
+        </v-list-item>
       </v-list>
     </v-navigation-drawer>
-    <v-toolbar :clipped-left="clipped" fixed app>
-      <v-toolbar-side-icon @click="drawer = !drawer" />
+    <v-app-bar class="app-toolbar" :clipped-left="clipped" fixed app>
+      <v-app-bar-nav-icon @click="drawer = !drawer" />
       <v-toolbar-title v-text="title" />
       <v-spacer />
       <core-search-field />
       <v-spacer />
-      <!-- <core-menu-settings /> -->
-    </v-toolbar>
+    </v-app-bar>
   </div>
 </template>
 
@@ -30,7 +47,6 @@ export default {
       clipped: true,
       drawer: false,
       temporary: true,
-      darkTheme: false,
       title: 'ColorPix',
       items: [
         {
@@ -59,4 +75,7 @@ export default {
 }
 </script>
 
-<style lang="stylus" scoped></style>
+<style lang="sass" scoped>
+.app-toolbar
+  box-shadow: 1px 2px 10px rgba(0,0,0,.1)
+</style>

components/core/SearchField.vue

@@ -6,7 +6,7 @@
     append-icon="search"
     class="searchbar"
     hide-details
-    box
+    filled
     full-width
     @click:append="search"
     @keyup.enter="search"
@@ -30,8 +30,3 @@ export default {
   }
 }
 </script>
-
-<style lang="stylus">
-
-
-</style>

components/core/ThemeSwitch.vue

@@ -0,0 +1,24 @@
+<template>
+  <v-switch
+    v-model="darkMode"
+    inset
+    color="primary"
+    label="Dark mode"
+    @change="onChangeTheme"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      darkMode: this.$store.state.application.darkMode || false
+    }
+  },
+  methods: {
+    onChangeTheme(evt) {
+      this.$store.dispatch('application/toggleDarkMode', evt)
+    }
+  }
+}
+</script>

components/image/AttributeLink.vue

@@ -1,10 +1,10 @@
 <template>
   <span class="grey--text">
-    By 
+    By
     <a class="grey--text" :href="linkUser">
       {{ user.username }}
     </a>
-    on 
+    on
     <a class="grey--text" :href="linkSource">
       Unsplash
     </a>
@@ -22,9 +22,7 @@ export default {
   },
   computed: {
     linkUser() {
-      return `https://unsplash.com/@${this.user.username}?utm_source=${
-        pkg.name
-      }&utm_medium=referral`
+      return `https://unsplash.com/@${this.user.username}?utm_source=${pkg.name}&utm_medium=referral`
     },
     linkSource() {
       return `https://unsplash.com/?utm_source=${pkg.name}&utm_medium=referral`
@@ -39,7 +37,3 @@ export default {
   }
 }
 </script>
-
-<style lang="stylus" scoped>
-
-</style>