Add effect filters

fakegit · May 16, 2019 · 66470e8 · 66470e8
1 parent 888aaab
commit 66470e8
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 335 deletions.
diff --git a/components/Controls.old.vue b/components/Controls.old.vue
diff --git a/components/Controls.vue b/components/Controls.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="wrapper" :class="{ open }">
-    <div class="tab" :class="{ open }" @click="toggle">
+    <div class="tab" :class="{ open }" @click="toggleControls">
       <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M256 217.9L383 345c9.4 9.4 24.6 9.4 33.9 0 9.4-9.4 9.3-24.6 0-34L273 167c-9.1-9.1-23.7-9.3-33.1-.7L95 310.9c-4.7 4.7-7 10.9-7 17s2.3 12.3 7 17c9.4 9.4 24.6 9.4 33.9 0l127.1-127z"
@@ -9,60 +9,84 @@
     </div>
 
     <div class="controls">
-      <div class="order">
-        <svg
-          class="shuffle"
-          @click="$emit('shuffle')"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 512 512"
-        >
-          <path
-            d="M222.2 188.1L97.8 64 64 97.8l124.1 124.1 34.1-33.8zM316 64l49 49L64 414.2 97.8 448 399 147l49 49V64H316zm7.9 225.8l-33.8 33.8 75.1 75.1L316 448h132V316l-49 49-75.1-75.2z"
-          ></path>
-        </svg>
-
-        <svg
-          class="reset"
-          @click="$emit('reset')"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 512 512"
-        >
-          <path
-            d="M256 388c-72.597 0-132-59.405-132-132 0-72.601 59.403-132 132-132 36.3 0 69.299 15.4 92.406 39.601L278 234h154V80l-51.698 51.702C348.406 99.798 304.406 80 256 80c-96.797 0-176 79.203-176 176s78.094 176 176 176c81.045 0 148.287-54.134 169.401-128H378.85c-18.745 49.561-67.138 84-122.85 84z"
-          ></path>
-        </svg>
-      </div>
+      <svg
+        class="shuffle"
+        @click="$emit('shuffle')"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 512"
+      >
+        <path
+          d="M222.2 188.1L97.8 64 64 97.8l124.1 124.1 34.1-33.8zM316 64l49 49L64 414.2 97.8 448 399 147l49 49V64H316zm7.9 225.8l-33.8 33.8 75.1 75.1L316 448h132V316l-49 49-75.1-75.2z"
+        ></path>
+      </svg>
+
+      <svg
+        class="reset"
+        @click="$emit('reset')"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 512"
+      >
+        <path
+          d="M256 388c-72.597 0-132-59.405-132-132 0-72.601 59.403-132 132-132 36.3 0 69.299 15.4 92.406 39.601L278 234h154V80l-51.698 51.702C348.406 99.798 304.406 80 256 80c-96.797 0-176 79.203-176 176s78.094 176 176 176c81.045 0 148.287-54.134 169.401-128H378.85c-18.745 49.561-67.138 84-122.85 84z"
+        ></path>
+      </svg>
+
+      <EffectFilter label="Buttons" v-model="filters.button"/>
+      <EffectFilter label="Inputs" v-model="filters.input"/>
+      <EffectFilter label="Loaders" v-model="filters.loader"/>
+      <EffectFilter label="Text" v-model="filters.hover"/>
     </div>
   </div>
 </template>
 
 <script>
+import EffectFilter from "~/components/EffectFilter";
+
 export default {
+  components: { EffectFilter },
   data() {
-    return { open: false };
+    return {
+      open: false,
+      filters: {
+        button: true,
+        input: true,
+        loader: true,
+        hover: true
+      }
+    };
   },
   methods: {
-    toggle() {
+    toggleControls() {
       this.open = !this.open;
+    },
+    updateFilters() {
+      this.$emit("filter", this.filters);
     }
+  },
+  watch: {
+    "filters.button": "updateFilters",
+    "filters.input": "updateFilters",
+    "filters.loader": "updateFilters",
+    "filters.hover": "updateFilters"
   }
 };
 </script>
 
 <style lang="scss" scoped>
 .wrapper {
   z-index: 99;
+  width: 90%;
   position: fixed;
-  bottom: 0.75em;
+  top: 100%;
   left: 50%;
-  transform: translate(-50%, 4.5em);
+  transform: translate(-50%, -2em);
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   transition: transform 0.25s ease-in-out;
 
   &.open {
-    transform: translate(-50%, 0);
+    transform: translate(-50%, calc(-100% - 1em));
   }
 }
 
@@ -108,13 +132,12 @@ export default {
   }
 }
 
-.order {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
+.shuffle,
+.reset {
+  margin: 0 0.5em;
+}
 
-  .reset {
-    margin-left: 0.5em;
-  }
+.reset {
+  margin-right: 1.5em;
 }
 </style>
diff --git a/components/EffectFilter.vue b/components/EffectFilter.vue
@@ -0,0 +1,65 @@
+<template>
+  <label>
+    <input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)">
+
+    <svg class="unchecked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+      <path
+        d="M405.3 106.7v298.7H106.7V106.7h298.6m0-42.7H106.7C83.2 64 64 83.2 64 106.7v298.7c0 23.5 19.2 42.7 42.7 42.7h298.7c23.5 0 42.7-19.2 42.7-42.7V106.7C448 83.2 428.8 64 405.3 64z"
+      ></path>
+    </svg>
+    <svg class="checked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+      <path
+        d="M168.531 215.469l-29.864 29.864 96 96L448 128l-29.864-29.864-183.469 182.395-66.136-65.062zm236.802 189.864H106.667V106.667H320V64H106.667C83.198 64 64 83.198 64 106.667v298.666C64 428.802 83.198 448 106.667 448h298.666C428.802 448 448 428.802 448 405.333V234.667h-42.667v170.666z"
+      ></path>
+    </svg>
+    {{ this.label }}
+  </label>
+</template>
+
+<script>
+export default {
+  model: {
+    prop: "checked",
+    event: "change"
+  },
+  props: {
+    label: String,
+    checked: Boolean
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+label {
+  display: inline-flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  color: hsla(0, 0%, 100%, 0.5);
+  margin: 0 0.5em;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+input {
+  opacity: 0;
+  width: 0;
+
+  & ~ .checked {
+    display: none;
+  }
+  &:checked ~ .checked {
+    display: block;
+  }
+  &:checked ~ .unchecked {
+    display: none;
+  }
+}
+
+svg {
+  fill: hsla(0, 0%, 100%, 0.5);
+  width: 1.5em;
+  margin-right: 0.25em;
+}
+</style>