feat: todo-app

todo-app/App.vue

@@ -0,0 +1,49 @@
+<template>
+  <div id="app">
+    <transition>
+      <router-view />
+    </transition>
+  </div>
+</template>
+
+<style>
+@import url('https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css');
+
+* {
+  margin: 0;
+  padding: 0;
+}
+a {
+  text-decoration: inherit;
+}
+ul,
+ol {
+  list-style: none;
+}
+h1,
+h2,
+h3,
+h4 {
+  font: inherit;
+}
+input,
+select,
+button {
+  font: inherit;
+}
+html,
+body {
+  height: 100%;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+#app {
+  height: 100%;
+  overflow: hidden;
+}
+</style>

todo-app/README.md

@@ -0,0 +1,29 @@
+# todo-app
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Run your tests
+```
+npm run test
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

todo-app/components/AppBar.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="app-bar">
+    <span class="app-bar_l" @click="$emit('left')">
+      <i :class="['fa', `fa-${left}`]"></i>
+    </span>
+    <h1>{{ title }}</h1>
+    <span class="app-bar_r" @click="$emit('right')">
+      <i :class="['fa', `fa-${right}`]"></i>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    left: {
+      type: String,
+      default: 'chevron-left'
+    },
+    right: {
+      type: String,
+      default: 'ellipsis-v'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.app-bar {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  font-size: 15px;
+  z-index: 1;
+
+  h1 {
+    display: flex;
+    justify-content: center;
+    flex: 1;
+  }
+  span {
+    padding: 0 20px;
+  }
+}
+</style>

todo-app/components/Avatar.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="avatar" :class="{ avatar__selected: !!selected }">
+    <div class="avatar_face">
+      <img src="../assets/face.jpeg" />
+    </div>
+    <h2 class="avatar_name">Hello, Jane.</h2>
+    <p class="avatar_tips">
+      Looks like feed good.<br />You have {{ todayTasks.length }} tasks to do
+      today.
+    </p>
+    <p class="avatar_date">TODAY : {{ today | dateString }}</p>
+  </div>
+</template>
+
+<script>
+import { mapState, mapGetters } from 'vuex'
+export default {
+  data () {
+    return {
+      today: new Date()
+    }
+  },
+  computed: {
+    ...mapState(['selected']),
+    ...mapGetters(['todayTasks'])
+  },
+  filters: {
+    dateString (val) {
+      return val
+        .toDateString()
+        .toUpperCase()
+        .replace(/(\s\d{4})$/, ', $1')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.avatar {
+  display: flex;
+  padding: 0 40px;
+  height: 300px;
+  justify-content: flex-end;
+  flex-direction: column;
+  transition: all 0.5s ease;
+}
+.avatar__selected {
+  transform: translate3d(0, 20px, 0);
+  opacity: 0;
+}
+.avatar_face {
+  width: 44px;
+  height: 44px;
+  border-radius: 100%;
+  overflow: hidden;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+.avatar_name {
+  margin-top: 32px;
+  padding: 0 6px;
+  font-size: 32px;
+  letter-spacing: 1px;
+  font-weight: 300;
+}
+.avatar_tips {
+  margin-top: 16px;
+  padding: 0 6px;
+  font-size: 13px;
+  font-weight: 100;
+  opacity: 0.8;
+  line-height: 1.6em;
+}
+.avatar_date {
+  margin-top: 44px;
+  margin-bottom: 16px;
+  padding: 0 6px;
+  font-size: 14px;
+}
+</style>

todo-app/components/FloatingButton.vue

@@ -0,0 +1,82 @@
+<template>
+  <transition name="grow">
+    <button
+      class="floating-button"
+      v-if="!!selected"
+      :class="{ 'floating-button__editing': !!editing }"
+      :style="{ background: gradientColor }"
+      @click="toggleEditing"
+    ></button>
+  </transition>
+</template>
+
+<script>
+import { mapState, mapGetters, mapMutations } from 'vuex'
+export default {
+  computed: {
+    ...mapState(['selected', 'editing']),
+    ...mapGetters(['currentTodo']),
+    gradientColor () {
+      const colorLeft = `color-stop(30%, ${this.currentTodo.colors[0]})`
+      const colorRight = `to(${this.currentTodo.colors[1]})`
+      return `-webkit-gradient(linear, left bottom, right top, ${colorLeft}, ${colorRight})`
+    }
+  },
+  methods: {
+    ...mapMutations(['toggleEditing'])
+  }
+}
+</script>
+
+<style lang="scss">
+.floating-button {
+  position: fixed;
+  right: 44px;
+  bottom: 64px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  border-radius: 44px;
+  width: 44px;
+  height: 44px;
+  color: white;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  transition: all 0.5s ease;
+}
+.floating-button::before,
+.floating-button::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  width: 20px;
+  height: 2px;
+  background-color: white;
+  transform: translate(-50%, -50%);
+}
+.floating-button::after {
+  transform: translate(-50%, -50%) rotate(90deg);
+}
+.floating-button__editing {
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  border-radius: 0;
+}
+.grow-leave-to,
+.grow-enter {
+  transform: scale(0);
+}
+.grow-enter-to,
+.grow-leave {
+  transform: scale(1);
+}
+.grow-enter-active {
+  transition: all 0.2s 0.3s ease;
+}
+.grow-leave-active {
+  transition: all 0.3s ease;
+}
+</style>

todo-app/components/Gradient.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="gradient">
+    <gradient-color
+      v-for="(todo, index) in todos"
+      :key="todo.name"
+      :colors="todo.colors"
+      :active="index <= currentIndex"
+    />
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import GradientColor from './GradientColor'
+export default {
+  components: {
+    GradientColor
+  },
+  computed: {
+    ...mapState(['todos', 'currentIndex'])
+  }
+}
+</script>
+
+<style lang="scss">
+.gradient {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: -1;
+}
+</style>

todo-app/components/GradientColor.vue

@@ -0,0 +1,40 @@
+<template>
+  <div
+    class="gradient_color"
+    :class="{ gradient_color__active: active }"
+    :style="{ backgroundImage: gradientColor }"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    colors: {
+      type: Array
+    },
+    active: {
+      type: Boolean
+    }
+  },
+  computed: {
+    gradientColor () {
+      const colorBottom = `color-stop(30%, ${this.colors[0]})`
+      const colorTop = `to(${this.colors[1]})`
+      return `-webkit-gradient(linear, left bottom, left top, ${colorBottom}, ${colorTop})`
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.gradient_color {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+.gradient_color__active {
+  opacity: 1;
+}
+</style>