squircle

commit 8395114c5a3ddae320745cf1e308acecfc04937c
parent 0da18dc081326b04229bf71f1f3b19c59ec87373
Author: George Francis <georgedoescode@gmail.com>
Date:   Tue,  7 Jul 2020 07:54:43 +0100

add initial prop for squircle fill to keep things in sync, start adding detail toggle

Diffstat:
M
src/components/GeneratorControls.vue
 | 
43
+++++++++++++++++++++++++++++++++----------
M
src/components/GeneratorPreview.vue
 | 
7
+++++--
M
src/components/TheGenerator.vue
 | 
8
++++++--

3 files changed, 44 insertions(+), 14 deletions(-)
diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -7,11 +7,26 @@ export default {
     components: {
         VSwatches,
     },
+    props: {
+        initialFill: {
+            type: String,
+            required: true,
+        },
+    },
+
     data() {
         return {
-            color: '#1f2933',
+            fill: this.initialFill,
         };
     },
+    watch: {
+        fill(newVal) {
+            this.$emit('controls-changed', {
+                id: 'fill',
+                value: newVal,
+            });
+        },
+    },
     methods: {
         handleControlChange(e) {
             this.$emit('controls-changed', e.target);
@@ -53,23 +68,24 @@ export default {
             <div class="generator-controls__swatch">
                 <input
                     id="colorHex"
-                    v-model="color"
+                    v-model="fill"
                     class="generator-conrols__swatch-text"
                     type="text"
                     name="colorHex"
                 />
                 <VSwatches
-                    v-model="color"
+                    v-model="fill"
                     :trigger-style="{
-                        width: '48px',
-                        height: '32px',
-                        borderRadius: '0 8px 8px 0',
+                        width: '64px',
+                        height: '48px',
+                        borderRadius: '0 16px 16px 0',
                     }"
                 />
             </div>
             <label for="quality" class="generator-controls__label">
-                Quality
+                Detail
             </label>
+            <div class="generator-controls__detail"></div>
         </div>
     </div>
 </template>
@@ -116,9 +132,9 @@ export default {
     align-items: center;
     justify-content: space-between;
     padding-left: var(--spacing-3);
-    height: var(--spacing-5);
+    height: var(--spacing-6);
     background: var(--grey-000);
-    border-radius: 8px;
+    border-radius: 12px;
 }
 
 .generator-conrols__swatch-text {
@@ -126,6 +142,13 @@ export default {
     background: transparent;
     outline: none;
     width: 100%;
+    text-transform: uppercase;
+}
+
+.generator-controls__detail {
+    height: var(--spacing-5);
+    border: 1px solid var(--grey-200);
+    border-radius: 8px;
 }
 
 @media only screen and (max-width: 48rem) {
@@ -135,7 +158,7 @@ export default {
     }
 
     .generator-controls__inputs {
-        grid-row-gap: var(--spacing-4);
+        grid-row-gap: var(--spacing-5);
     }
 
     .generator-controls__label {
diff --git a/src/components/GeneratorPreview.vue b/src/components/GeneratorPreview.vue
@@ -6,13 +6,17 @@ export default {
             type: Array,
             required: true,
         },
+        fill: {
+            type: String,
+            required: true,
+        },
     },
 };
 </script>
 
 <template>
     <div class="generator-preview">
-        <svg viewBox="0 0 200 200" preserveAspectRatio>
+        <svg viewBox="0 0 200 200" preserveAspectRatio :fill="fill">
             <polygon :points="points" transform="translate(100 100)" />
         </svg>
     </div>
@@ -50,7 +54,6 @@ export default {
     left: 0;
     width: 100%;
     height: 100%;
-    fill: var(--grey-900);
 }
 
 @media only screen and (max-width: 48rem) {
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -15,6 +15,7 @@ export default {
             squircleOpts: {
                 curvature: 8,
                 scale: 50,
+                fill: '#1f2933',
             },
             points: [],
         };
@@ -58,8 +59,11 @@ export default {
 
 <template>
     <div class="generator">
-        <GeneratorPreview :points="points" />
-        <GeneratorControls @controls-changed="handleControlChange" />
+        <GeneratorPreview :points="points" :fill="squircleOpts.fill" />
+        <GeneratorControls
+            :initial-fill="squircleOpts.fill"
+            @controls-changed="handleControlChange"
+        />
         <GeneratorExportOptions class="generator__export-opts" />
     </div>
 </template>