commit 402965416dd779320dc728fd50d0c66f12c1a1d5
parent cfc4ec2c21d9bd17ebb930676ab6e702a4d6882b
Author: George Francis <georgedoescode@gmail.com>
Date: Fri, 3 Jul 2020 16:20:33 +0100
add color swatch picker, experiment with css grid for the cleanest layout, layour looking good for now
Diffstat:
9 files changed, 142 insertions(+), 20 deletions(-)
diff --git a/package-lock.json b/package-lock.json
@@ -10936,6 +10936,11 @@
"svg-to-vue": "^0.7.0"
}
},
+ "vue-swatches": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/vue-swatches/-/vue-swatches-2.1.0.tgz",
+ "integrity": "sha512-JbSomg1penZvgHL24blA3PDgji7LPVGGSFlMo7F+jYVcxooemadI3gkMwFJVIPMikG5g160Mq+Lbph/lqFjzzw=="
+ },
"vue-template-compiler": {
"version": "2.6.11",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz",
diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
"normalize.css": "^8.0.1",
"vue": "^2.6.11",
"vue-social-sharing": "^3.0.0-beta.11",
+ "vue-swatches": "^2.1.0",
"vuex": "^3.5.1"
}
}
diff --git a/src/assets/img/trash.svg b/src/assets/img/trash.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-trash"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
+\ No newline at end of file
diff --git a/src/components/BaseRangeInput.vue b/src/components/BaseRangeInput.vue
@@ -17,5 +17,7 @@ export default {
<style scoped>
input {
min-width: 0;
+ max-width: 100%;
+ cursor: pointer;
}
</style>
diff --git a/src/components/ColorSwatch.vue b/src/components/ColorSwatch.vue
@@ -0,0 +1,39 @@
+<script>
+export default {
+ name: 'ColorSwatch',
+ props: {
+ colors: {
+ type: Array,
+ required: true,
+ },
+ },
+};
+</script>
+
+<template>
+ <div class="color-swatch">
+ <div
+ v-for="(color, index) in colors"
+ :key="color + index"
+ class="color-swatch__color"
+ :style="{
+ background: color,
+ }"
+ ></div>
+ </div>
+</template>
+
+<style>
+.color-swatch {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+}
+.color-swatch__color {
+ width: var(--spacing-4);
+ height: var(--spacing-4);
+ border-radius: 50%;
+ align-self: center;
+ cursor: pointer;
+}
+</style>
diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -1,19 +1,49 @@
<script>
+import ColorSwatch from './ColorSwatch.vue';
+
export default {
name: 'GeneratorControls',
+ components: {
+ ColorSwatch,
+ },
+ data() {
+ return {
+ color: '#1f2933',
+ };
+ },
};
</script>
<template>
- <div class="generator-controls">
- <label for="scaleX" class="generator-controls__label">Scale X</label>
- <BaseRangeInput name="scaleX" />
- <label for="scaleX" class="generator-controls__label">Scale Y</label>
- <BaseRangeInput name="scaleY" />
- <label for="roundness" class="generator-controls__label"
- >Roundness</label
- >
- <BaseRangeInput name="roundness" />
+ <div>
+ <div class="generator-controls">
+ <label for="scaleX" class="generator-controls__label">
+ Scale X
+ </label>
+ <BaseRangeInput name="scaleX" class="generator-controls__slider" />
+ <label for="scaleY" class="generator-controls__label">
+ Scale Y
+ </label>
+ <BaseRangeInput name="scaleY" class="generator-controls__slider" />
+ <label for="roundness" class="generator-controls__label">
+ Roundness
+ </label>
+ <BaseRangeInput
+ name="roundness"
+ class="generator-controls__slider"
+ />
+ <label class="generator-controls__label">Fill</label>
+ <ColorSwatch
+ class="generator-controls__color-picker"
+ :colors="[
+ '#1f2933',
+ '#323f4b',
+ '#3e4c59',
+ '#52606d',
+ '#616e7c',
+ ]"
+ />
+ </div>
</div>
</template>
@@ -21,7 +51,20 @@ export default {
.generator-controls {
display: grid;
grid-template-columns: max-content 1fr;
- grid-auto-rows: max-content;
+ grid-auto-rows: minmax(var(--spacing-5), max-content);
+ grid-row-gap: var(--spacing-5);
width: 100%;
}
+
+.generator-controls__label {
+ grid-column: 1;
+ align-self: center;
+ margin-right: var(--spacing-4);
+ font-size: var(--font-size-3);
+ font-weight: 700;
+}
+
+.generator-controls__slider {
+ grid-column: 2;
+}
</style>
diff --git a/src/components/GeneratorExportOptions.vue b/src/components/GeneratorExportOptions.vue
@@ -30,6 +30,9 @@ export default {
}
.generator-export-controls__btn {
+ align-self: flex-end;
+ width: var(--spacing-4);
+ height: var(--spacing-4);
margin-left: var(--spacing-5);
padding: 0;
border: 0;
@@ -40,6 +43,8 @@ export default {
}
.generator-export-controls__btn svg {
+ width: 100%;
+ height: 100%;
stroke: var(--grey-900);
}
diff --git a/src/components/GeneratorPreview.vue b/src/components/GeneratorPreview.vue
@@ -6,7 +6,15 @@ export default {
<template>
<div class="generator-preview">
- <svg></svg>
+ <svg>
+ <rect
+ x="25%"
+ y="25%"
+ width="50%"
+ height="50%"
+ fill="#1f2933"
+ ></rect>
+ </svg>
</div>
</template>
@@ -14,6 +22,8 @@ export default {
.generator-preview {
position: relative;
width: 100%;
+ border: 1px dashed var(--grey-100);
+ border-radius: 16px;
}
.generator-preview::before {
@@ -28,6 +38,5 @@ export default {
left: 0;
width: 100%;
height: 100%;
- background: var(--grey-000);
}
</style>
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -21,7 +21,10 @@ export default {
</div>
<div class="generator__control-section">
<GeneratorControls />
- <GeneratorExportOptions />
+ <div class="generator__control-section-footer">
+ <button class="generator-reset-btn">Reset</button>
+ <GeneratorExportOptions />
+ </div>
</div>
</div>
</div>
@@ -29,29 +32,42 @@ export default {
<style scoped>
.generator-wrapper {
- padding: 0 var(--spacing-4);
+ max-width: var(--spacing-15);
+ margin: 0 auto;
}
.generator {
display: flex;
- max-width: var(--spacing-15);
margin: 0 auto;
- padding: var(--spacing-4);
+ padding: var(--spacing-5);
background: #fff;
border-radius: 16px;
}
.generator__preview-section {
position: relative;
- width: 50%;
+ width: 45%;
flex-shrink: 0;
- margin-right: var(--spacing-4);
+ margin-right: var(--spacing-5);
}
.generator__control-section {
- display: grid;
- grid-template-rows: 1fr max-content;
flex-grow: 1;
min-height: 100%;
+ padding: var(--spacing-2);
+}
+
+.generator__control-section-footer {
+ display: flex;
+ height: var(--spacing-5);
+ margin-top: var(--spacing-5);
+}
+
+.generator-reset-btn {
+ align-self: flex-end;
+ padding: 0;
+ font-size: var(--font-size-1);
+ border: 0;
+ cursor: pointer;
}
</style>
