change layout: add tool menu

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="">
     <TopMenu />
-    <main class="py-6 grid grid-cols-1 gap-y-8 lg:py-12 lg:grid-cols-[1fr_2fr] lg:gap-x-20">
+    <main class="pt-5 grid grid-cols-1 lg:grid-cols-[1fr_2fr] lg:gap-x-20">
       <RouterView />
     </main>
   </div>

src/page/HomePage.vue

@@ -1,7 +1,40 @@
 <template>
   <div class="md:grid md:grid-cols-12 md:col-span-12">
-    <div class="col-span-3 flex flex-col gap-4 lg:gap-6">
+    <div
-      <div class="drop-shadow-md rounded-md md:border border-zinc-300 p-5">
+      class="col-span-3 lg:mr-4 tools"
+      ref="tools"
+    >
+      <div class="mb-2">
+        <button
+          class="p-3 mr-2 rounded"
+          :class="{'bg-slate-300': this.tool == 'heading'}"
+          @click="this.tool = 'heading'"
+        >Heading</button>
+
+        <button
+          class="p-3 mr-2 rounded"
+          :class="{'bg-slate-300': this.tool == 'author'}"
+          @click="this.tool = 'author'"
+        >Author</button>
+
+        <button
+          class="p-3 mr-2 rounded"
+          :class="{'bg-slate-300': this.tool == 'background'}"
+          @click="this.tool = 'background'"
+        >Background</button>
+
+        <button
+          class="p-3 rounded"
+          :class="{'bg-slate-300': this.tool == 'size'}"
+          @click="this.tool = 'size'"
+        >Size</button>
+      </div>
+
+      <div
+        :class="{hidden: this.tool !== 'heading'}"
+        class="drop-shadow-md rounded-md md:border border-zinc-300 tool"
+      >
+        <div class="p-5">
           <div>
             <TextareaForm
               id="heading"
@@ -12,7 +45,7 @@
               id="heading-size"
               v-model="headingSize"
               min="1"
-            max="10"
+              max="20"
               step="0.1"
             />
           </div>
@@ -27,7 +60,7 @@
               id="subheading-size"
               v-model="subheadingSize"
               min="1"
-            max="10"
+              max="20"
               step="0.1"
             />
           </div>
@@ -45,7 +78,7 @@
               id="content-padding"
               v-model="contentPadding"
               min="0"
-            max="50"
+              max="300"
               step="0.05"
               label="Padding"
             />
@@ -75,8 +108,13 @@
             </div>
           </div>
         </div>
+      </div>
 
-      <div class="drop-shadow-md rounded-md md:border border-zinc-300 p-5">
+      <div
+        :class="{hidden: this.tool !== 'author'}"
+        class="drop-shadow-md rounded-md md:border border-zinc-300 tool"
+      >
+        <div class="p-5">
           <div>
             <InputForm
               id="author"
@@ -151,9 +189,13 @@
           </div>
         </div>
       </div>
-    <div class="col-span-3 md:px-10 flex flex-col gap-4 lg:gap-6">
+
-      <div class="drop-shadow-md rounded-md md:border border-zinc-300 p-5">
+      <div
-        <div class="py-6">
+        :class="{hidden: this.tool !== 'background'}"
+        class="drop-shadow-md rounded-md md:border border-zinc-300 tool"
+      >
+        <div class="p-5">
+          <div class="pb-6">
             <FileForm
               id="background"
               v-model="background"
@@ -177,12 +219,17 @@
             />
           </div>
         </div>
-      <div class="drop-shadow-md rounded-md md:border border-zinc-300 p-5">
+      </div>
+      <div
+        :class="{hidden: this.tool !== 'size'}"
+        class="drop-shadow-md rounded-md md:border border-zinc-300 tool"
+      >
+        <div class="p-5">
           <div>
             <label
               class="block text-sm font-medium text-gray-700"
               for="width"
-          >Size and quality</label>
+            >Size</label>
 
             <div class="grid grid-cols-2 gap-x-4">
               <InputForm
@@ -196,21 +243,15 @@
                 type="number"
               />
             </div>
-
+          </div>
-          <RangeForm
-            id="quality"
-            v-model="quality"
-            min="0"
-            max="1"
-            step="0.05"
-          />
         </div>
       </div>
     </div>
     <div
       ref="ogwrapper"
-      class="col-span-6 space-y-6"
+      class="og-wrapper col-span-9 lg:pl-10"
     >
+      <div class="og-wrapper-content">
         <div
           ref="og"
           class="og"
@@ -218,6 +259,7 @@
         >
           <div
             class="og-image"
+            ref="ogimage"
             :style="ogImageStyle()"
           >
             <div
@@ -280,8 +322,9 @@
             </div>
           </div>
         </div>
+      </div>
 
-      <div class="text-center">
+      <div class="text-center mt-3">
         <DownloadButton
           class="rounded-l-md"
           label="PNG"
@@ -294,6 +337,8 @@
         />
       </div>
     </div>
+
+    <div id="bottom"></div>
   </div>
 </template>
 
@@ -322,6 +367,7 @@ export default {
   },
   data() {
     return {
+      tool: localStorage.getItem('tool') ?? 'heading',
       author: localStorage.getItem('author'),
       authorPadding: localStorage.getItem('authorPadding') ?? 0,
       authorAlign: localStorage.getItem('authorAlign') ?? 'left',
@@ -343,7 +389,6 @@ export default {
       subheadingSize: localStorage.getItem('subheadingSize') ?? 2,
       width: localStorage.getItem('width') ?? 1920,
       height: localStorage.getItem('height') ?? 1080,
-      quality: localStorage.getItem('quality') ?? 0.9,
       contentPadding: localStorage.getItem('contentPadding') ?? 2.5,
       allowHtml: localStorage.getItem('allowHtml'),
       ogMaxWidth: 100,
@@ -363,6 +408,9 @@ export default {
     }
   },
   watch: {
+    tool(value) {
+      localStorage.setItem('tool', value)
+    },
     author(value) {
       localStorage.setItem('author', value)
     },
@@ -423,9 +471,6 @@ export default {
     height(value) {
       localStorage.setItem('height', value)
     },
-    quality(value) {
-      localStorage.setItem('quality', value)
-    },
     contentPadding(value) {
       localStorage.setItem('contentPadding', value)
     },
@@ -444,18 +489,25 @@ export default {
     ogStyle() {
       return {
         color: this.textColor,
-        width: `${this.width}px`,
-        maxWidth: `${this.ogMaxWidth}px`,
         fontFamily: this.font,
+        maxHeight: `${this.ogMaxHeight}px`,
+        maxWidth: `${this.ogMaxWidth}px !important`,
+        aspectRatio: `${this.width}/${this.height}`,
       }
     },
     ogImageStyle() {
+      let value = {
+        maxHeight: `${this.ogMaxHeight}px`,
+        maxWidth: `${this.ogMaxWidth}px`,
+        aspectRatio: `${this.width}/${this.height}`,
+      }
+
       if (this.background) {
-        return {
+        value.background = `url(${this.background}) center`
-          background: `url(${this.background}) center`,
+        value.backgroundSize = 'cover'
-          backgroundSize: 'cover',
-        }
       }
+
+      return value
     },
     ogHeadingStyle() {
       return {
@@ -513,7 +565,9 @@ export default {
 
       return {
         background,
-        aspectRatio: `${this.width}/${this.height}`
+        aspectRatio: `${this.width}/${this.height}`,
+        maxHeight: `${this.ogMaxHeight}px`,
+        maxWidth: `${this.ogMaxWidth}px`,
       }
     },
     ogContentStyle() {
@@ -530,12 +584,12 @@ export default {
       return this.download(toJpeg, 'image.jpg')
     },
     download(callback, filename) {
-      const element = this.$refs.og
+      const element = this.$refs.ogimage
 
-      callback(this.$refs.og, {
+      callback(element, {
         canvasWidth: this.width,
         canvasHeight: this.height,
-        quality: this.quality,
+        quality: 1,
       })
         .then((dataUrl) => {
           const link = document.createElement('a')
@@ -552,7 +606,8 @@ export default {
     },
     updateOgMaxWidth() {
       this.$refs.og.style.display = 'none'
-      this.ogMaxWidth = this.$refs.ogwrapper.offsetWidth
+      this.ogMaxWidth = this.$refs.ogwrapper.offsetWidth - 30
+      this.ogMaxHeight = this.$refs.tools.offsetHeight - 50
       this.$refs.og.style.display = 'block'
     },
   }
@@ -560,12 +615,31 @@ export default {
 </script>
 
 <style>
+#bottom {
+  position: fixed;
+  bottom: 0;
+}
+
+.tool {
+  max-height: calc(100vh - 250px);
+  overflow: auto;
+}
+
+.tools {
+  height: calc(100vh - 250px);
+}
+
 .og {
-  background: #cecece;
-  max-width: 10px;
   margin: auto;
 }
 
+.og-wrapper-content {
+  background-color: #c1c1c1;
+  background-image: linear-gradient(45deg, #646464 25%, transparent 25%, transparent 75%, #646464 75%), linear-gradient(45deg, #646464 25%, transparent 25%, transparent 75%, #646464 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 10px 10px;
+}
+
 .og-heading {
   font-size: 5em;
 }