Merge pull request #102 from buggregator/issue/#95-improve-copy-image

buggregator · Dec 11, 2023 · 7295a7d · 7295a7d
2 parents f9f1080 + a735ba1
commit 7295a7d
Show file tree

Hide file tree

Showing 10 changed files with 200 additions and 56 deletions.
diff --git a/app.vue b/app.vue
@@ -6,5 +6,5 @@
 
 <script lang="ts" setup>
 import "./assets/index.css";
-import "./assets/index";
+import "./assets/vendor";
 </script>
diff --git a/assets/index.ts → assets/vendor.ts b/assets/index.ts → assets/vendor.ts
diff --git a/src/entities/sentry/ui/preview-card/preview-card.vue b/src/entities/sentry/ui/preview-card/preview-card.vue
@@ -8,7 +8,7 @@ import { SentryException } from "../sentry-exception";
 
 type Props = {
   event: NormalizedEvent<Sentry>;
-  maxFrames: number;
+  maxFrames?: number;
 };
 
 const props = withDefaults(defineProps<Props>(), {

diff --git a/src/shared/ui/icon-svg/icon-svg-originals/file-download.svg b/src/shared/ui/icon-svg/icon-svg-originals/file-download.svg
diff --git a/src/shared/ui/icon-svg/icon-svg-originals/image-download.svg b/src/shared/ui/icon-svg/icon-svg-originals/image-download.svg
diff --git a/src/shared/ui/icon-svg/icon-svg.vue b/src/shared/ui/icon-svg/icon-svg.vue
@@ -3,30 +3,43 @@ type Props = {
   name: string;
 };
 
-const props = defineProps<Props>();
+defineProps<Props>();
 </script>
 
 <template>
   <div class="icon-svg">
     <svg
       v-if="name === 'bolt'"
       xmlns="http://www.w3.org/2000/svg"
-      width="24" height="24" viewBox="0 0 24 24" fill="none"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
     >
-      <path d="M3.75 13.5L14.25 2.25L12 10.5H20.25L9.75 21.75L12 13.5H3.75Z" stroke-width="1.5"
-            stroke-linecap="round" stroke-linejoin="round"/>
+      <path
+        d="M3.75 13.5L14.25 2.25L12 10.5H20.25L9.75 21.75L12 13.5H3.75Z"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </svg>
     <svg
-      v-if="name === 'bolt-slash'"
+      v-else-if="name === 'bolt-slash'"
       xmlns="http://www.w3.org/2000/svg"
-      width="24" height="24" viewBox="0 0 24 24" fill="none"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
     >
       <path
         d="M11.4123 15.6549L9.75 21.75L13.4949 17.7376M9.25736 13.5H3.75L6.40873 10.6514M8.4569 8.4569L14.25 2.25L12 10.5H20.25L15.5431 15.5431M8.4569 8.4569L3 3M8.4569 8.4569L15.5431 15.5431M15.5431 15.5431L21 21"
-        stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </svg>
     <svg
-      v-if="name === 'copy'"
+      v-else-if="name === 'copy'"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 460 460"
     >
@@ -73,14 +86,17 @@ const props = defineProps<Props>();
       />
     </svg>
 
-    <svg v-else-if="name === 'discord'"
-         viewBox="0 -28.5 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
+    <svg
+      v-else-if="name === 'discord'"
+      viewBox="0 -28.5 256 256"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid"
+    >
       <path
         d="M216.856 16.597A208.502 208.502 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.809 207.809 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.094 161.094 0 0 0 79.735 175.3a136.413 136.413 0 0 1-21.846-10.632 108.636 108.636 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a131.66 131.66 0 0 0 5.355 4.237 136.07 136.07 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848 21.142-6.58 42.646-16.637 64.815-33.213 5.316-56.288-9.08-105.09-38.056-148.36ZM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18Zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18Z"
       />
     </svg>
 
-
     <svg
       v-else-if="name === 'heartBeat'"
       xmlns="http://www.w3.org/2000/svg"
@@ -98,19 +114,19 @@ const props = defineProps<Props>();
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 489.8 489.8"
     >
-      <circle cx="245" cy="453.9" r="26.8"/>
-      <circle cx="422.8" cy="453.9" r="26.8"/>
-      <circle cx="67" cy="453.9" r="26.8"/>
+      <circle cx="245" cy="453.9" r="26.8" />
+      <circle cx="422.8" cy="453.9" r="26.8" />
+      <circle cx="67" cy="453.9" r="26.8" />
       <path
         d="M443 31c0-17-14-31-31-31H78C61 0 47 14 47 31v69c0 8 4 15 9 21-5 6-9 13-9 21v70c0 8 4 15 9 21-5 5-9 13-9 21v69c0 17 14 31 31 31h334c17 0 31-14 31-31v-69c0-8-3-16-9-21 6-6 9-13 9-22v-69c0-8-3-16-9-21 6-6 9-13 9-21V31zM65 31c0-7 6-13 12-13h335c7 0 13 6 13 13v69c0 6-6 12-13 12H78c-7 0-13-5-13-12V31zm360 111v70c0 6-6 12-13 12H78c-7 0-13-6-13-12v-70c0-6 6-12 13-12h334c7 0 13 6 13 12zm0 181c0 7-6 13-13 13H78c-7 0-13-6-13-13v-69c0-7 6-12 13-12h334c7 0 13 5 13 12v69z"
       />
-      <path d="M241 74h113c5 0 9-4 9-9s-4-9-9-9H241c-5 0-9 4-9 9s4 9 9 9z"/>
-      <circle cx="148.8" cy="65.1" r="10.8"/>
+      <path d="M241 74h113c5 0 9-4 9-9s-4-9-9-9H241c-5 0-9 4-9 9s4 9 9 9z" />
+      <circle cx="148.8" cy="65.1" r="10.8" />
       <path
         d="M241 186h113c5 0 9-4 9-9s-4-9-9-9H241c-5 0-9 4-9 9s4 9 9 9zM354 280H241c-5 0-9 4-9 9s4 9 9 9h113c5 0 9-4 9-9s-4-9-9-9z"
       />
-      <circle cx="148.8" cy="177" r="10.8"/>
-      <circle cx="148.8" cy="288.9" r="10.8"/>
+      <circle cx="148.8" cy="177" r="10.8" />
+      <circle cx="148.8" cy="288.9" r="10.8" />
       <path
         d="M423 418c-17 0-31 11-35 27H280c-4-13-13-22-26-26v-28c0-5-4-9-9-9s-9 4-9 9v28c-13 3-22 13-26 26H102a36 36 0 100 18h108a36 36 0 0070 0h108a36 36 0 1035-45zM67 472a18 18 0 010-36 18 18 0 010 36zm178 0a18 18 0 010-36 18 18 0 010 36zm178 0a18 18 0 010-36 18 18 0 010 36z"
       />
@@ -176,7 +192,7 @@ const props = defineProps<Props>();
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 12 12"
     >
-      <path d="M12 6c0 .6-.4 1-1 1H1a1 1 0 0 1 0-2h10c.6 0 1 .4 1 1Z"/>
+      <path d="M12 6c0 .6-.4 1-1 1H1a1 1 0 0 1 0-2h10c.6 0 1 .4 1 1Z" />
     </svg>
 
     <svg
@@ -196,8 +212,8 @@ const props = defineProps<Props>();
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 12 12"
     >
-      <path d="M6 0c.6 0 1 .4 1 1v10a1 1 0 1 1-2 0V1c0-.6.4-1 1-1Z"/>
-      <path d="M12 6c0 .6-.4 1-1 1H1a1 1 0 0 1 0-2h10c.6 0 1 .4 1 1Z"/>
+      <path d="M6 0c.6 0 1 .4 1 1v10a1 1 0 1 1-2 0V1c0-.6.4-1 1-1Z" />
+      <path d="M12 6c0 .6-.4 1-1 1H1a1 1 0 0 1 0-2h10c.6 0 1 .4 1 1Z" />
     </svg>
 
     <svg
@@ -379,7 +395,7 @@ const props = defineProps<Props>();
           y2="30"
           gradientUnits="userSpaceOnUse"
         >
-          <stop class="transition-all duration-200" stop-color="#FACC15"/>
+          <stop class="transition-all duration-200" stop-color="#FACC15" />
           <stop
             class="transition-all duration-200"
             offset="1"
@@ -410,7 +426,7 @@ const props = defineProps<Props>();
       <path
         d="M128 406c4 0 8-4 8-8V124a8 8 0 0 0-15 0v274c0 4 3 8 7 8zM384 264c-4 0-7 3-7 7v204c0 12-11 22-23 22H158c-12 0-22-10-22-22v-47a8 8 0 0 0-15 0v47c0 20 16 37 37 37h196c21 0 38-17 38-37V271c0-4-4-7-8-7zM354 0H158c-21 0-37 17-37 38v56a8 8 0 0 0 15 0V38c0-13 10-23 22-23h31c8 15 24 25 41 25h52c17 0 33-10 41-25h31c12 0 23 10 23 23v203a8 8 0 0 0 15 0V38c0-21-17-38-38-38zm-72 25h-52c-9 0-17-4-23-10h98c-6 6-14 10-23 10z"
       />
-      <path d="M287 478a8 8 0 0 0 0-15h-62a8 8 0 0 0 0 15h62z"/>
+      <path d="M287 478a8 8 0 0 0 0-15h-62a8 8 0 0 0 0 15h62z" />
     </svg>
 
     <svg
@@ -424,7 +440,7 @@ const props = defineProps<Props>();
       <path
         d="M90 61v284a8 8 0 0 0 15 0V69h302v103a8 8 0 0 0 15 0V61c0-4-3-7-7-7H97c-4 0-7 3-7 7zM90 432c0 4 3 8 7 8h318c4 0 7-4 7-8V202a8 8 0 0 0-15 0v223H105v-50a8 8 0 0 0-15 0v57zM233 467a23 23 0 1 0 46-1 23 23 0 0 0-46 1zm31 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0zM288 42a8 8 0 0 0 0-15h-34a8 8 0 0 0 0 15h34z"
       />
-      <circle cx="225.6" cy="34.3" r="7.5"/>
+      <circle cx="225.6" cy="34.3" r="7.5" />
     </svg>
 
     <svg
@@ -487,12 +503,12 @@ const props = defineProps<Props>();
       stroke-linecap="round"
       stroke-linejoin="round"
     >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
       <path
         d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z"
       />
-      <path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/>
-      <path d="M8 11v-4a4 4 0 1 1 8 0v4"/>
+      <path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />
+      <path d="M8 11v-4a4 4 0 1 1 8 0v4" />
     </svg>
 
     <svg
@@ -506,13 +522,55 @@ const props = defineProps<Props>();
       stroke-linecap="round"
       stroke-linejoin="round"
     >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
       <path
         d="M15 11h2a2 2 0 0 1 2 2v2m0 4a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2h4"
       />
-      <path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/>
-      <path d="M8 11v-3m.719 -3.289a4 4 0 0 1 7.281 2.289v4"/>
-      <path d="M3 3l18 18"/>
+      <path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />
+      <path d="M8 11v-3m.719 -3.289a4 4 0 0 1 7.281 2.289v4" />
+      <path d="M3 3l18 18" />
+    </svg>
+
+    <svg
+      v-else-if="name === 'image-download'"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke-width="2"
+      stroke="currentColor"
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M15 8h.01" />
+      <path
+        d="M12.5 21h-6.5a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v6.5"
+      />
+      <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l4 4" />
+      <path d="M14 14l1 -1c.653 -.629 1.413 -.815 2.13 -.559" />
+      <path d="M19 16v6" />
+      <path d="M22 19l-3 3l-3 -3" />
+    </svg>
+
+    <svg
+      v-else-if="name === 'file-download'"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      stroke-width="2"
+      stroke="currentColor"
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+      <path
+        d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"
+      />
+      <path d="M12 17v-6" />
+      <path d="M9.5 14.5l2.5 2.5l2.5 -2.5" />
     </svg>
   </div>
 </template>

diff --git a/src/shared/ui/preview-card/preview-card-header.vue b/src/shared/ui/preview-card/preview-card-header.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import { computed } from "vue";
-import { EVENT_TYPES } from "../../types";
+import type { EventType } from "../../types";
 import { IconSvg } from "../icon-svg";
+import { DownloadType } from "./types";
 
 type Props = {
-  eventType: EVENT_TYPES;
+  eventType: EventType | "unknown";
   eventId: string;
   eventUrl: string;
   tags: string[];
@@ -17,7 +18,7 @@ type Emits = {
   delete: [value: boolean];
   toggleView: [value: boolean];
   copy: [value: boolean];
-  download: [value: boolean];
+  download: [value: DownloadType];
   lock: [value: boolean];
 };
 
@@ -40,8 +41,12 @@ const copyEvent = () => {
   emit("copy", true);
 };
 
-const downloadEvent = () => {
-  emit("download", true);
+const downloadImageEvent = () => {
+  emit("download", DownloadType.Image);
+};
+
+const downloadFile = () => {
+  emit("download", DownloadType.File);
 };
 
 const lockEvent = () => {
@@ -76,14 +81,37 @@ const isVisibleTags = computed(() => props.tags.length > 0);
       </template>
     </div>
 
-    <div v-if="isVisibleControls" class="preview-card-header__container">
-      <button
-        class="preview-card-header__button preview-card-header__button--copy"
-        @click="downloadEvent"
-        @click.right.prevent="copyEvent"
-      >
-        <IconSvg name="copy" class="preview-card-header__button-icon" />
-      </button>
+    <div v-if="isVisibleControls" class="preview-card-header__buttons">
+      <div class="preview-card-header__buttons-expand">
+        <button
+          class="preview-card-header__button preview-card-header__button--copy"
+          @click="copyEvent"
+        >
+          <IconSvg name="copy" class="preview-card-header__button-icon" />
+        </button>
+
+        <div class="preview-card-header__buttons-expand-list">
+          <button
+            class="preview-card-header__button preview-card-header__button--copy"
+            @click="downloadFile"
+          >
+            <IconSvg
+              name="file-download"
+              class="preview-card-header__button-icon"
+            />
+          </button>
+
+          <button
+            class="preview-card-header__button preview-card-header__button--copy"
+            @click="downloadImageEvent"
+          >
+            <IconSvg
+              name="image-download"
+              class="preview-card-header__button-icon"
+            />
+          </button>
+        </div>
+      </div>
 
       <button
         class="preview-card-header__button preview-card-header__button--collapse"
@@ -139,10 +167,6 @@ $eventTypeColorsMap: (
   @apply w-full flex sm:flex-row flex-col-reverse justify-between gap-y-3;
 }
 
-.preview-card-header__container {
-  @apply flex justify-end space-x-2;
-}
-
 .preview-card-header__tags {
   @apply flex flex-wrap gap-3;
 }
@@ -182,6 +206,28 @@ $eventTypeColorsMap: (
   }
 }
 
+.preview-card-header__buttons {
+  @apply flex justify-end space-x-2;
+}
+
+.preview-card-header__buttons-expand {
+  @apply relative left-[2px] flex border-x-2 rounded-3xl border-transparent dark:border-transparent cursor-pointer;
+
+  &:hover {
+    @apply bg-gray-200 dark:bg-gray-700 ring-1 ring-gray-200 dark:ring-gray-700 border-gray-200 dark:border-gray-700;
+  }
+}
+
+.preview-card-header__buttons-expand-list {
+  @apply flex flex-row justify-end space-x-2 pr-2 transition-all;
+  @apply hidden overflow-hidden opacity-0;
+  order: -1;
+
+  .preview-card-header__buttons-expand:hover & {
+    @apply flex overflow-visible opacity-100;
+  }
+}
+
 .preview-card-header__button {
   @apply w-5 h-5 md:w-4 md:h-4 rounded-full opacity-90 hover:opacity-100 transition-all hover:ring-4 ring-offset-1;
   @apply text-white bg-gray-300 dark:bg-gray-600 ring-blue-200 dark:ring-blue-800;
@@ -218,10 +264,14 @@ $eventTypeColorsMap: (
 }
 
 .preview-card-header__button-icon {
-  @apply p-1 dark:fill-white;
+  @apply p-0.5 dark:fill-white;
+
+  .preview-card-header__button--collapse & {
+    @apply p-1;
+  }
 
-  .preview-card-header__button--lock & {
-    @apply p-0.5;
+  .preview-card-header__button--delete & {
+    @apply p-1;
   }
 }
 </style>