feat: Implement the ability to be able to rotate an image on agent co…

…nversation. (#8559)
chatwoot · Dec 15, 2023 · cf0d6dd · cf0d6dd
1 parent fd18139
commit cf0d6dd
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
@@ -46,9 +46,25 @@
           </span>
         </div>
         <div
-          class="items-center flex gap-2 justify-end min-w-[15rem]"
+          class="items-center flex gap-2 justify-end min-w-[8rem] sm:min-w-[15rem]"
           @click.stop
         >
+          <woot-button
+            v-if="isImage"
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="arrow-rotate-counter-clockwise"
+            @click="onRotate('counter-clockwise')"
+          />
+          <woot-button
+            v-if="isImage"
+            size="large"
+            color-scheme="secondary"
+            variant="clear"
+            icon="arrow-rotate-clockwise"
+            @click="onRotate('clockwise')"
+          />
           <woot-button
             size="large"
             color-scheme="secondary"
@@ -89,6 +105,7 @@
               :key="activeAttachment.message_id"
               :src="activeAttachment.data_url"
               class="modal-image skip-context-menu my-0 mx-auto"
+              :style="imageRotationStyle"
               @click.stop
             />
             <video
@@ -186,6 +203,7 @@ export default {
         this.allAttachments.findIndex(
           attachment => attachment.message_id === this.attachment.message_id
         ) || 0,
+      activeImageRotation: 0,
     };
   },
   computed: {
@@ -232,6 +250,11 @@ export default {
       const fileName = dataUrl?.split('/').pop();
       return fileName || '';
     },
+    imageRotationStyle() {
+      return {
+        transform: `rotate(${this.activeImageRotation}deg)`,
+      };
+    },
   },
   mounted() {
     this.setImageAndVideoSrc(this.attachment);
@@ -246,6 +269,7 @@ export default {
       }
       this.activeImageIndex = index;
       this.setImageAndVideoSrc(attachment);
+      this.activeImageRotation = 0;
     },
     setImageAndVideoSrc(attachment) {
       const { file_type: type } = attachment;
@@ -280,6 +304,20 @@ export default {
       link.download = `attachment.${type}`;
       link.click();
     },
+    onRotate(type) {
+      if (!this.isImage) {
+        return;
+      }
+
+      const rotation = type === 'clockwise' ? 90 : -90;
+
+      // Reset rotation if it is 360
+      if (Math.abs(this.activeImageRotation) === 360) {
+        this.activeImageRotation = rotation;
+      } else {
+        this.activeImageRotation += rotation;
+      }
+    },
   },
 };
 </script>
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -18,6 +18,8 @@
   "arrow-trending-lines-outline": "M16.749 2h4.554l.1.014.099.028.06.026c.08.034.153.085.219.15l.04.044.044.057.054.09.039.09.019.064.014.064.009.095v4.532a.75.75 0 0 1-1.493.102l-.007-.102V4.559l-6.44 6.44a.75.75 0 0 1-.976.073L13 11 9.97 8.09l-5.69 5.689a.75.75 0 0 1-1.133-.977l.073-.084 6.22-6.22a.75.75 0 0 1 .976-.072l.084.072 3.03 2.91L19.438 3.5h-2.69a.75.75 0 0 1-.742-.648l-.007-.102a.75.75 0 0 1 .648-.743L16.75 2ZM3.75 17a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5a.75.75 0 0 1 .75-.75Zm5.75-3.25a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0v-7.5ZM13.75 15a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0v-5.5a.75.75 0 0 1 .75-.75Zm5.75-4.25a.75.75 0 0 0-1.5 0v10.5a.75.75 0 0 0 1.5 0v-10.5Z",
   "arrow-up-outline": "M4.21 10.733a.75.75 0 0 0 1.086 1.034l5.954-6.251V20.25a.75.75 0 0 0 1.5 0V5.516l5.955 6.251a.75.75 0 0 0 1.086-1.034l-7.067-7.42a.995.995 0 0 0-.58-.3.754.754 0 0 0-.29.001.995.995 0 0 0-.578.3L4.21 10.733Z",
   "arrow-up-right-outline": "M12.748 3.001h7.554l.1.014.099.028.06.026a.72.72 0 0 1 .219.15l.04.044.061.082.037.065.04.09.018.064.014.064.01.093v7.534a.75.75 0 0 1-1.493.102l-.007-.102V5.559L4.28 20.784a.75.75 0 0 1-.977.073l-.084-.073a.75.75 0 0 1-.073-.976l.073-.084L18.439 4.5l-5.69.001a.75.75 0 0 1-.744-.648l-.007-.102a.75.75 0 0 1 .648-.743L12.748 3Z",
+  "arrow-rotate-clockwise-outline": "M12 3a9 9 0 0 1 9 9 9.005 9.005 0 0 1-4.873 8.001L18 20a1 1 0 0 1 .117 1.993L18 22h-4a1 1 0 0 1-.993-.883L13 21v-4a1 1 0 0 1 1.993-.117L15 17l.001 1.327A7.006 7.006 0 0 0 19 12a7 7 0 1 0-14 0 1 1 0 1 1-2 0 9 9 0 0 1 9-9Zm0 6a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z",
+  "arrow-rotate-counter-clockwise-outline": "M12 3a9 9 0 0 0-4.977 16.5H5.25a.75.75 0 0 0-.102 1.493L5.25 21h4a.75.75 0 0 0 .743-.648L10 20.25v-4a.75.75 0 0 0-1.493-.102l-.007.102-.001 2.385A7.501 7.501 0 0 1 12 4.5a7.5 7.5 0 0 1 7.5 7.5.75.75 0 0 0 1.5 0 9 9 0 0 0-9-9Zm0 6.25a2.75 2.75 0 1 0 0 5.5 2.75 2.75 0 0 0 0-5.5Zm0 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z",
   "attach-outline": "M11.772 3.743a6 6 0 0 1 8.66 8.302l-.19.197-8.8 8.798-.036.03a3.723 3.723 0 0 1-5.489-4.973.764.764 0 0 1 .085-.13l.054-.06.086-.088.142-.148.002.003 7.436-7.454a.75.75 0 0 1 .977-.074l.084.073a.75.75 0 0 1 .074.976l-.073.084-7.594 7.613a2.23 2.23 0 0 0 3.174 3.106l8.832-8.83A4.502 4.502 0 0 0 13 4.644l-.168.16-.013.014-9.536 9.536a.75.75 0 0 1-1.133-.977l.072-.084 9.549-9.55h.002Z",
   "autocorrect-outline": "M13.461 4.934c.293.184.548.42.752.698l.117.171 2.945 4.696H21.5a.75.75 0 0 1 .743.649l.007.102a.75.75 0 0 1-.75.75l-3.284-.001.006.009-.009-.01a4.75 4.75 0 1 1-3.463-1.5h.756L13.059 6.6a1.25 1.25 0 0 0-2.04-.112l-.078.112-7.556 12.048a.75.75 0 0 1-1.322-.699l.052-.098L9.67 5.803a2.75 2.75 0 0 1 3.791-.869ZM14.751 12a3.25 3.25 0 1 0 0 6.5 3.25 3.25 0 0 0 0-6.5Z",
   "automation-outline": [