From 880a9bc0c54d319702b2c6577623a77529f95286 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Valenta?= <tomas@imaniti.org>
Date: Wed, 24 Apr 2024 15:11:41 +0200
Subject: [PATCH] wip - avatar generator
---
frontend/package-lock.json | 41 +++++++++++
frontend/package.json | 1 +
frontend/src/components/Navbar.vue | 2 +-
frontend/src/router/index.js | 11 ++-
frontend/src/views/avatar/Avatar.vue | 100 +++++++++++++++++++++++++++
frontend/src/views/avatar/canvas.js | 3 +
frontend/tailwind.config.js | 4 +-
7 files changed, 159 insertions(+), 3 deletions(-)
create mode 100644 frontend/src/views/avatar/Avatar.vue
create mode 100644 frontend/src/views/avatar/canvas.js
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b3c827e8..0050f0de 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -18,6 +18,7 @@
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.2.0",
+ "@tailwindcss/typography": "^0.5.12",
"@vitejs/plugin-vue": "^4.2.1",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"@vue/eslint-config-prettier": "^7.1.0",
@@ -1303,6 +1304,34 @@
"resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.5.tgz",
"integrity": "sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw=="
},
+ "node_modules/@tailwindcss/typography": {
+ "version": "0.5.12",
+ "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.12.tgz",
+ "integrity": "sha512-CNwpBpconcP7ppxmuq3qvaCxiRWnbhANpY/ruH4L5qs2GCiVDJXde/pjj2HWPV1+Q4G9+V/etrwUYopdcjAlyg==",
+ "dev": true,
+ "dependencies": {
+ "lodash.castarray": "^4.4.0",
+ "lodash.isplainobject": "^4.0.6",
+ "lodash.merge": "^4.6.2",
+ "postcss-selector-parser": "6.0.10"
+ },
+ "peerDependencies": {
+ "tailwindcss": ">=3.0.0 || insiders"
+ }
+ },
+ "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+ "version": "6.0.10",
+ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+ "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+ "dev": true,
+ "dependencies": {
+ "cssesc": "^3.0.0",
+ "util-deprecate": "^1.0.2"
+ },
+ "engines": {
+ "node": ">=4"
+ }
+ },
"node_modules/@tootallnate/once": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -3315,6 +3344,18 @@
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
},
+ "node_modules/lodash.castarray": {
+ "version": "4.4.0",
+ "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+ "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+ "dev": true
+ },
+ "node_modules/lodash.isplainobject": {
+ "version": "4.0.6",
+ "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+ "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+ "dev": true
+ },
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 855357d5..9df00f5b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,6 +20,7 @@
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.2.0",
+ "@tailwindcss/typography": "^0.5.12",
"@vitejs/plugin-vue": "^4.2.1",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"@vue/eslint-config-prettier": "^7.1.0",
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index b8e5421c..20f57f1b 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -44,7 +44,7 @@ export default {
</RouterLink>
</div>
<div>
- <div class="w-72">
+ <div class="w-72" v-if="currentTemplate">
<VueSelect
class="bg-white rounded-md"
:options="Object.values(TEMPLATES)"
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 9cd3a95a..32a31950 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -3,7 +3,16 @@ import TEMPLATES from '../templates'
import defaultFavicon from '../assets/favicon.png'
-let routes = [];
+let routes = [
+ {
+ path: '/avatar',
+ name: 'avatar',
+ component: () => import('../views/avatar/Avatar.vue'),
+ meta: {
+ title: 'Profilové obrázky'
+ }
+ }
+];
for (let [identifier, templateData] of Object.entries(TEMPLATES)) {
routes.push({
diff --git a/frontend/src/views/avatar/Avatar.vue b/frontend/src/views/avatar/Avatar.vue
new file mode 100644
index 00000000..32fa8df8
--- /dev/null
+++ b/frontend/src/views/avatar/Avatar.vue
@@ -0,0 +1,100 @@
+<script setup>
+import { watch, ref } from 'vue'
+
+import Canvas from '../../components/canvas/Canvas.vue'
+import redraw from './canvas'
+
+import Navbar from '../../components/Navbar.vue'
+import MainContainer from '../../components/MainContainer.vue'
+import ImageInput from '../../components/inputs/ImageInput.vue'
+</script>
+
+<script>
+export default {
+ components: {
+ Canvas,
+ Navbar,
+ MainContainer,
+ ImageInput,
+ },
+ data () {
+ return {
+ mainImage: null,
+ autoRedraw: false
+ }
+ },
+ methods: {
+ async reloadCanvasProperties () {
+ const canvasProperties = {
+ mainImage: this.mainImage,
+ }
+
+ await this.$refs.canvas.redraw(canvasProperties)
+ }
+ },
+ mounted () {
+ this.$watch(
+ vm => [
+ vm.mainImage,
+ ],
+ async (value) => {
+ if (this.autoRedraw) {
+ await this.reloadCanvasProperties()
+ }
+ },
+ {
+ immediate: true,
+ deep: true
+ }
+ )
+ },
+}
+</script>
+
+<template>
+ <header>
+ <Navbar></Navbar>
+ </header>
+ <main>
+ <MainContainer>
+ <template v-slot:left>
+ <Canvas
+ ref="canvas"
+ :redrawFunction="redraw"
+ width="2000"
+ height="2000"
+ />
+ </template>
+
+ <template v-slot:right>
+ <div class="prose max-w-none">
+ <p>
+ Amet illo et atque et voluptates esse ad magni. Dolor omnis non ad. Qui est aut aperiam rerum atque mollitia ut. Ea aliquam nihil earum vel. Dicta odit quod aliquam molestiae porro ex error. Aut soluta et voluptatibus vel.
+ </p>
+
+ <p>
+ Quo quos est eaque ipsa esse. Laboriosam laborum est facilis. Corporis excepturi consequuntur quo dolorem omnis accusantium expedita voluptates. Ut omnis et asperiores consequatur quia voluptatum repudiandae.
+ </p>
+ </div>
+
+ <ReloadButton
+ :parentRefs="$refs"
+ @click="reloadCanvasProperties"
+ />
+ <AutoReloadCheckbox
+ v-model="autoRedraw"
+ />
+ <ImageInput
+ name="Obrázek"
+ v-model="mainImage"
+ :important="true"
+ zIndex="10"
+ />
+ </template>
+ </MainContainer>
+ </main>
+</template>
+
+<style>
+@import "vue-select/dist/vue-select.css";
+</style>
diff --git a/frontend/src/views/avatar/canvas.js b/frontend/src/views/avatar/canvas.js
new file mode 100644
index 00000000..d4b80a9a
--- /dev/null
+++ b/frontend/src/views/avatar/canvas.js
@@ -0,0 +1,3 @@
+const redraw = async (canvas, options) => { }
+
+export default redraw
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 76edd3b4..528e5199 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -7,5 +7,7 @@ module.exports = {
theme: {
extend: {},
},
- plugins: [],
+ plugins: [
+ require('@tailwindcss/typography')
+ ],
}
--
GitLab