squircle

commit 67d1faaccb2ae89fde899da7558632f055f02dfd
parent 0153b17adf16786aa6dfe78c04fef708660ee9e5
Author: George Francis <georgedoescode@gmail.com>
Date:   Fri,  3 Jul 2020 07:54:38 +0100

componentise generator preview component, add GeneratorExportControls and GeneratorPreview

Diffstat:
A
src/assets/img/code.svg
 | 
2
++
A
src/assets/img/download.svg
 | 
2
++
A
src/components/GeneratorExportConrols.vue
 | 
61
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
A
src/components/GeneratorPreview.vue
 | 
33
+++++++++++++++++++++++++++++++++
M
src/components/TheGenerator.vue
 | 
46
+++++++++++++++++++++++++---------------------

5 files changed, 123 insertions(+), 21 deletions(-)
diff --git a/src/assets/img/code.svg b/src/assets/img/code.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-code"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+\ No newline at end of file
diff --git a/src/assets/img/download.svg b/src/assets/img/download.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
+\ No newline at end of file
diff --git a/src/components/GeneratorExportConrols.vue b/src/components/GeneratorExportConrols.vue
@@ -0,0 +1,61 @@
+<script>
+    import CodeIcon from '@/assets/img/code.svg';
+    import DownloadIcon from '@/assets/img/download.svg';
+
+    export default {
+        name: 'GeneratorExportControls',
+        components: {
+            CodeIcon,
+            DownloadIcon,
+        },
+    };
+</script>
+
+<template>
+    <div class="generator-export-controls">
+        <button class="generator-export-controls__btn">
+            <DownloadIcon />
+        </button>
+        <button class="generator-export-controls__btn">
+            <CodeIcon />
+        </button>
+    </div>
+</template>
+
+<style scoped>
+    .generator-export-controls {
+        display: flex;
+        justify-content: flex-end;
+        width: 100%;
+    }
+
+    .generator-export-controls__btn {
+        margin-left: var(--spacing-5);
+        padding: 0;
+        border: 0;
+        border-radius: 50%;
+        outline: none;
+        cursor: pointer;
+        transition: stroke 125ms ease-in-out, transform 125ms ease-in-out;
+    }
+
+    .generator-export-controls__btn svg {
+        stroke: var(--grey-900);
+    }
+
+    .generator-export-controls__btn:hover {
+        transform: scale(1.125);
+    }
+
+    .generator-export-controls__btn:active {
+        transform: scale(0.875);
+    }
+
+    .generator-export-controls__btn:active svg {
+        stroke: var(--grey-500);
+    }
+
+    .generator-export-controls__btn:first-child {
+        margin-left: 0;
+    }
+</style>
diff --git a/src/components/GeneratorPreview.vue b/src/components/GeneratorPreview.vue
@@ -0,0 +1,33 @@
+<script>
+    export default {
+        name: 'GeneratorPreview',
+    };
+</script>
+
+<template>
+    <div class="generator-preview">
+        <svg></svg>
+    </div>
+</template>
+
+<style scoped>
+    .generator-preview {
+        position: relative;
+        width: 100%;
+    }
+
+    .generator-preview::before {
+        content: '';
+        display: block;
+        padding-bottom: 100%;
+    }
+
+    .generator-preview svg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: var(--grey-000);
+    }
+</style>
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -1,19 +1,34 @@
 <script>
+    import GeneratorPreview from './GeneratorPreview.vue';
+    import GeneratorExportControls from './GeneratorExportConrols.vue';
+
     export default {
         name: 'TheGenerator',
+        components: {
+            GeneratorPreview,
+            GeneratorExportControls,
+        },
     };
 </script>
 
 <template>
-    <div class="generator">
-        <div class="generator__preview">
-            <svg></svg>
+    <div class="generator-wrapper">
+        <div class="generator">
+            <div class="generator__preview-section">
+                <GeneratorPreview />
+            </div>
+            <div class="generator__control-section">
+                <div></div>
+                <GeneratorExportControls />
+            </div>
         </div>
-        <div class="generator__control-panel"></div>
     </div>
 </template>
 
 <style scoped>
+    .generator-wrapper {
+        padding: 0 var(--spacing-4);
+    }
     .generator {
         display: flex;
         max-width: var(--spacing-15);
@@ -23,30 +38,19 @@
         border-radius: 16px;
     }
 
-    .generator__preview {
+    .generator__preview-section {
         position: relative;
         width: 50%;
         flex-shrink: 0;
         margin-right: var(--spacing-4);
     }
 
-    .generator__preview::before {
-        content: '';
-        display: block;
-        padding-bottom: 100%;
-    }
-
-    .generator__preview svg {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: var(--grey-000);
-    }
-
-    .generator__control-panel {
+    .generator__control-section {
+        display: grid;
+        grid-template-rows: 1fr max-content;
         flex-grow: 1;
         min-height: 100%;
+
+        /* background: red; */
     }
 </style>