@live-change/image-frontend 0.8.15 → 0.8.17

package/front/src/ImageCrop.vue

@@ -9,9 +9,10 @@
        @touchcancel="handleEditorTouchCancel"
        @touchmove="handleEditorTouchMove"
        @wheel="handleEditorWheel">
-    <div class="p-6 md:p-8 lg:p-8">
-      <div class="w-auto relative"
-           :style="`aspect-ratio: ${aspectRatio}`" ref="cropArea">
+    <div class="p-4 md:p-5 lg:p-6 flex flex-row justify-content-center align-items-center">
+      <div class="w-full relative"
+           :style="`aspect-ratio: ${aspectRatio}; max-width: 40vh;`"
+           ref="cropArea">
         <div class="absolute left-50 top-50 w-0 h-0">
           <Image :image="sourceImage"
                  :style="{ width: `${rectSize?.x}px`, transform: imageTransform }"

package/front/src/ImageEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="state == 'edit'">
+  <div v-if="state === 'edit'">
     <ImageCrop v-if="sourceImage || sourceUpload"
                :crop="cropData"
                :aspectRatio="aspectRatio"
@@ -8,33 +8,34 @@
                :sourceUpload="sourceUpload"
                :type="type"
                v-model:ready="cropReady"
-               ref="imageCrop" />
-    <div class="flex p-4">
-      <div class="flex-grow-1 flex">
-        <Button type="button" label="Add Image" icon="pi pi-plus" class="p-button-primary"
+               ref="imageCrop" style="max-height: 60vh" />
+    <div class="flex p-3 pb-2 flex-wrap">
+      <div class="flex-grow-1 flex justify-content-center">
+        <Button type="button" label="Upload" icon="pi pi-upload" class="p-button-primary mb-2"
                 @click="() => state = 'upload' "/>
       </div>
-      <div class="flex">
-        <Button type="button" label="Save Image" icon="pi pi-save" class="p-button-warning ml-2"
+      <div class="flex flex-grow-1 justify-content-center">
+        <Button type="button" label="Save" icon="pi pi-save" class="p-button-warning ml-2 mb-2"
                 :disabled="!cropReady" @click="saveImage" />
-        <Button type="button" label="Remove Image" icon="pi pi-trash" class="p-button-danger ml-2"
+        <Button type="button" label="Remove" icon="pi pi-times" class="p-button-danger ml-2 mb-2"
                 @click="removeImage"/>
       </div>
     </div>
   </div>
-  <div v-else-if="state == 'upload'">
-    <DropZone class="w-full relative p-6 md:p-8 lg:p-8" :accept="acceptList" @input="handleFile">
-      <div class="w-auto border-dashed border-primary-500 flex align-items-center justify-content-center"
-                :style="`aspect-ratio: ${aspectRatio}`">
-        <p class="text-primary text-xl">Drop image here!</p>
+  <div v-else-if="state === 'upload'" class="flex flex-column align-items-center">
+    <DropZone class="flex-grow-1 w-full relative p-4 md:p-5 lg:p-6 pt-2 md:pt-3 lg:pt-4 surface-section"
+              :accept="acceptList" @input="handleFile">
+      <div class="w-auto flex flex-row align-items-center justify-content-center">
+        <div class="w-full border-dashed border-primary-500 flex align-items-center justify-content-center"
+             :style="`aspect-ratio: ${aspectRatio}; max-width: 50vh`">
+          <p class="text-primary text-xl">Drop image here!</p>
+        </div>
       </div>
     </DropZone>
-    <div class="flex p-4">
-      <div class="flex-grow-1 flex">
-        <FileInput :accept="acceptList" @input="handleFile" class="block">
-          <Button type="button" label="Upload Image" icon="pi pi-upload" class="p-button-primary" />
-        </FileInput>
-      </div>
+    <div class="w-full flex justify-content-center px-4 pt-3 pb-3 flex-grow-0">
+      <FileInput :accept="acceptList" @input="handleFile" class="block">
+        <Button type="button" label="Upload Image" icon="pi pi-upload" class="p-button-primary" />
+      </FileInput>
     </div>
   </div>
   <div v-else>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/image-frontend",
-  "version": "0.8.15",
+  "version": "0.8.17",
   "scripts": {
     "memDev": "node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -22,16 +22,16 @@
   "type": "module",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.4.2",
-    "@live-change/cli": "^0.8.15",
-    "@live-change/dao": "^0.8.15",
-    "@live-change/dao-vue3": "^0.8.15",
-    "@live-change/dao-websocket": "^0.8.15",
-    "@live-change/framework": "^0.8.15",
-    "@live-change/image-service": "^0.8.15",
-    "@live-change/session-service": "^0.8.15",
-    "@live-change/vue3-components": "^0.8.15",
-    "@live-change/vue3-ssr": "^0.8.15",
-    "@vueuse/core": "^10.7.2",
+    "@live-change/cli": "^0.8.17",
+    "@live-change/dao": "^0.8.17",
+    "@live-change/dao-vue3": "^0.8.17",
+    "@live-change/dao-websocket": "^0.8.17",
+    "@live-change/framework": "^0.8.17",
+    "@live-change/image-service": "^0.8.17",
+    "@live-change/session-service": "^0.8.17",
+    "@live-change/vue3-components": "^0.8.17",
+    "@live-change/vue3-ssr": "^0.8.17",
+    "@vueuse/core": "^10.9.0",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",
@@ -39,8 +39,8 @@
     "pica": "^9.0.1",
     "pretty-bytes": "^6.1.1",
     "primeflex": "^3.3.1",
-    "primeicons": "^6.0.1",
-    "primevue": "^3.49.1",
+    "primeicons": "^7.0.0",
+    "primevue": "^3.51.0",
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-visualizer": "5.12.0",
     "serialize-javascript": "^6.0.2",
@@ -50,7 +50,7 @@
     "vue3-scroll-border": "0.1.6"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.8.15",
+    "@live-change/codeceptjs-helper": "^0.8.17",
     "codeceptjs": "^3.5.12",
     "generate-password": "1.7.1",
     "playwright": "^1.41.2",
@@ -61,5 +61,5 @@
   "author": "",
   "license": "BSD-3-Clause",
   "description": "",
-  "gitHead": "4897eefbf3ce9ace57630127da89503c71114563"
+  "gitHead": "a736d9be9e93757a967867b98b840e08de2d713c"
 }