From 6b8b9c017f5f07ad1b7c6692393554e5bf5d0f45 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 18 Jun 2021 17:39:29 +0300
Subject: whoops

---
 src/components/attachment/attachment.scss | 271 ++++++++++++++++++++++++++++++
 1 file changed, 271 insertions(+)
 create mode 100644 src/components/attachment/attachment.scss

(limited to 'src/components/attachment/attachment.scss')

diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
new file mode 100644
index 00000000..f902f37d
--- /dev/null
+++ b/src/components/attachment/attachment.scss
@@ -0,0 +1,271 @@
+@import '../../_variables.scss';
+
+.Attachment {
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+  align-self: flex-start;
+  line-height: 0;
+  height: 100%;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: $fallback--attachmentRadius;
+  border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
+  z-index: 1;
+
+  .attachment-wrapper {
+    flex: 1 1 auto;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    z-index: 2;
+  }
+
+  .description-container {
+    flex: 0 1 0;
+    display: flex;
+    padding-top: 0.5em;
+
+    p {
+      flex: 1;
+      text-align: center;
+      line-height: 1.5;
+      padding: 0.5em;
+      margin: 0;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    &.-static {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      z-index: 1;
+      background: var(--popover);
+      box-shadow: var(--popupShadow);
+      opacity: 0;
+      transition: 0.35s all;
+      transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+    }
+  }
+
+  &:hover {
+    .description-container.-static {
+      opacity: 1;
+      transform: translateY(-3em);
+    }
+  }
+
+  .description-field {
+    flex: 1;
+    min-width: 0;
+  }
+
+  & .image-container,
+  & .audio-container,
+  & .video-container,
+  & .flash-container,
+  & .oembed-container {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .image-container {
+    .image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  & .flash-container,
+  & .video-container {
+    & .flash,
+    & video {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      align-self: center;
+      z-index: 0;
+    }
+  }
+
+  .audio-container {
+    display: flex;
+    align-items: flex-end;
+
+    audio {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .play-icon {
+    position: absolute;
+    font-size: 64px;
+    top: calc(50% - 32px);
+    left: calc(50% - 32px);
+    color: rgba(255, 255, 255, 0.75);
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+
+    &::before {
+      margin: 0;
+    }
+  }
+
+  .attachment-buttons {
+    display: flex;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 2;
+    margin-top: 0.5em;
+    margin-right: 0.5em;
+
+    .attachment-button {
+      padding: 0;
+      z-index: 4;
+      border-radius: $fallback--tooltipRadius;
+      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+      text-align: center;
+      width: 2em;
+      height: 2em;
+      margin-left: 0.5em;
+      font-size: 1.25em;
+      // TODO: theming? hard to theme with unknown background image color
+      background: rgba(230, 230, 230, 0.7);
+
+      .svg-inline--fa {
+        color: rgba(0, 0, 0, 0.6);
+      }
+
+      &:hover .svg-inline--fa {
+        color: rgba(0, 0, 0, 0.9);
+      }
+    }
+  }
+
+  .oembed-container {
+    line-height: 1.2em;
+    flex: 1 0 100%;
+    width: 100%;
+    margin-right: 15px;
+    display: flex;
+
+    img {
+      width: 100%;
+    }
+
+    .image {
+      flex: 1;
+      img {
+        border: 0px;
+        border-radius: 5px;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .text {
+      flex: 2;
+      margin: 8px;
+      word-break: break-all;
+      h1 {
+        font-size: 14px;
+        margin: 0px;
+      }
+    }
+  }
+
+  &.-size-small {
+    .play-icon {
+      zoom: 0.5;
+      opacity: 0.7;
+    }
+
+    .attachment-buttons {
+      zoom: 0.7;
+      opacity: 0.5;
+    }
+  }
+
+  &.-editable {
+    padding: 0.5em;
+
+    & .description-container,
+    & .attachment-buttons {
+      margin: 0;
+    }
+  }
+
+  &.-placeholder {
+    display: inline-block;
+    color: $fallback--link;
+    color: var(--postLink, $fallback--link);
+    overflow: hidden;
+    white-space: nowrap;
+    height: auto;
+    line-height: 1.5;
+
+    &:not(.-editable) {
+      border: none;
+    }
+
+    &.-editable {
+      display: flex;
+      flex-direction: row;
+      align-items: baseline;
+
+      & .description-container,
+      & .attachment-buttons {
+        margin: 0;
+        padding: 0;
+        position: relative;
+      }
+
+      .description-container {
+        flex: 1;
+        padding-left: 0.5em;
+      }
+
+      .attachment-buttons {
+        order: 99;
+        align-self: center;
+      }
+    }
+
+    a {
+      display: inline-block;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    svg {
+      color: inherit;
+    }
+  }
+
+  &.-loading {
+    cursor: progress;
+  }
+
+  &.-contain-fit {
+    img,
+    canvas {
+      object-fit: contain;
+    }
+  }
+
+  &.-cover-fit {
+    img,
+    canvas {
+      object-fit: cover;
+    }
+  }
+}
-- 
cgit v1.2.3-70-g09d2


From 4016182b89dacbc9095ee7f4d2e021bb9fad65d0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 22 Jun 2021 20:32:55 +0300
Subject: fix z-indexes

---
 src/components/attachment/attachment.scss | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

(limited to 'src/components/attachment/attachment.scss')

diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index f902f37d..b4a81a08 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -13,14 +13,12 @@
   border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
-  z-index: 1;
 
   .attachment-wrapper {
     flex: 1 1 auto;
     height: 100%;
     position: relative;
     overflow: hidden;
-    z-index: 2;
   }
 
   .description-container {
@@ -44,7 +42,6 @@
       left: 0;
       right: 0;
       top: 0;
-      z-index: 1;
       background: var(--popover);
       box-shadow: var(--popupShadow);
       opacity: 0;
@@ -91,7 +88,6 @@
       max-height: 100%;
       object-fit: contain;
       align-self: center;
-      z-index: 0;
     }
   }
 
@@ -123,13 +119,12 @@
     position: absolute;
     right: 0;
     top: 0;
-    z-index: 2;
     margin-top: 0.5em;
     margin-right: 0.5em;
+    z-index: 1;
 
     .attachment-button {
       padding: 0;
-      z-index: 4;
       border-radius: $fallback--tooltipRadius;
       border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
       text-align: center;
-- 
cgit v1.2.3-70-g09d2


From 5118eee19a5dba5245b9394ac222cf1ff7e09ea0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 22 Jun 2021 20:35:34 +0300
Subject: fix videos not stretching to container

---
 src/components/attachment/attachment.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/attachment/attachment.scss')

diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index b4a81a08..0cb23a37 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -84,8 +84,8 @@
   & .video-container {
     & .flash,
     & video {
-      max-width: 100%;
-      max-height: 100%;
+      width: 100%;
+      height: 100%;
       object-fit: contain;
       align-self: center;
     }
-- 
cgit v1.2.3-70-g09d2


From a2f21f4e131e03240699017ef92b7dba38c4fb44 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 22 Jun 2021 20:42:52 +0300
Subject: fix description colliding with extra-long text

---
 src/components/attachment/attachment.scss | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/components/attachment/attachment.scss')

diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index 0cb23a37..33e058e7 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -25,6 +25,7 @@
     flex: 0 1 0;
     display: flex;
     padding-top: 0.5em;
+    z-index: 1;
 
     p {
       flex: 1;
-- 
cgit v1.2.3-70-g09d2


From 830a03a0d13738ed1677d364fdf03821fbc507ab Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 21:04:28 +0300
Subject: inline description display

---
 src/components/attachment/attachment.js   | 12 +++++++++---
 src/components/attachment/attachment.scss | 13 ++-----------
 src/components/attachment/attachment.vue  |  8 ++++++++
 3 files changed, 19 insertions(+), 14 deletions(-)

(limited to 'src/components/attachment/attachment.scss')

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index b2ba1655..fea7c6f8 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -15,7 +15,8 @@ import {
   faStop,
   faSearchPlus,
   faTrashAlt,
-  faPencilAlt
+  faPencilAlt,
+  faAlignRight
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -28,7 +29,8 @@ library.add(
   faStop,
   faSearchPlus,
   faTrashAlt,
-  faPencilAlt
+  faPencilAlt,
+  faAlignRight
 )
 
 const Attachment = {
@@ -52,7 +54,8 @@ const Attachment = {
       img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
       modalOpen: false,
       showHidden: false,
-      flashLoaded: false
+      flashLoaded: false,
+      showDescription: false
     }
   },
   components: {
@@ -157,6 +160,9 @@ const Attachment = {
     setFlashLoaded (event) {
       this.flashLoaded = event
     },
+    toggleDescription () {
+      this.showDescription = !this.showDescription
+    },
     toggleHidden (event) {
       if (
         (this.mergedConfig.useOneClickNsfw && !this.showHidden) &&
diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index 33e058e7..065c38d2 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -42,19 +42,10 @@
       position: absolute;
       left: 0;
       right: 0;
-      top: 0;
+      bottom: 0;
+      padding-top: 0;
       background: var(--popover);
       box-shadow: var(--popupShadow);
-      opacity: 0;
-      transition: 0.35s all;
-      transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-    }
-  }
-
-  &:hover {
-    .description-container.-static {
-      opacity: 1;
-      transform: translateY(-3em);
     }
   }
 
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 8a1c31c7..82a72a8d 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -86,6 +86,14 @@
         >
           <FAIcon icon="stop" />
         </button>
+        <button
+          v-if="attachment.description && size !== 'small' && !edit"
+          class="button-unstyled attachment-button"
+          @click.prevent="toggleDescription"
+          :title="$t('status.show_attachment_description')"
+        >
+          <FAIcon icon="align-right" />
+        </button>
         <button
           v-if="!useModal"
           class="button-unstyled attachment-button"
-- 
cgit v1.2.3-70-g09d2


From befd4d5fc787d3f8287456dbf5d1a6c70419591f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Feb 2022 15:42:28 +0200
Subject: improve unknown attachment handling

---
 src/components/attachment/attachment.js   |  7 ++++---
 src/components/attachment/attachment.scss | 10 ++++++++++
 src/components/attachment/attachment.vue  | 17 ++++++++++++++---
 3 files changed, 28 insertions(+), 6 deletions(-)

(limited to 'src/components/attachment/attachment.scss')

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index f9c8d981..d62a4adc 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -79,7 +79,7 @@ const Attachment = {
       ]
     },
     usePlaceholder () {
-      return this.size === 'hide' || this.type === 'unknown'
+      return this.size === 'hide'
     },
     useContainFit () {
       return this.$store.getters.mergedConfig.useContainFit
@@ -106,7 +106,7 @@ const Attachment = {
       return this.nsfw && this.hideNsfwLocal && !this.showHidden
     },
     isEmpty () {
-      return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown'
+      return (this.type === 'html' && !this.attachment.oembed)
     },
     useModal () {
       let modalTypes = []
@@ -143,6 +143,8 @@ const Attachment = {
       if (this.useModal) {
         this.$emit('setMedia')
         this.$store.dispatch('setCurrentMedia', this.attachment)
+      } else if (this.type === 'unknown') {
+        window.open(this.attachment.url)
       }
     },
     openModalForce (event) {
@@ -150,7 +152,6 @@ const Attachment = {
       this.$store.dispatch('setCurrentMedia', this.attachment)
     },
     onEdit (event) {
-      console.log('ONEDIT', event)
       this.edit && this.edit(this.attachment, event)
     },
     onRemove () {
diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index 065c38d2..dfda15bf 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -54,6 +54,7 @@
     min-width: 0;
   }
 
+  & .placeholder-container,
   & .image-container,
   & .audio-container,
   & .video-container,
@@ -93,6 +94,15 @@
     }
   }
 
+  .placeholder-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-top: 0.5em;
+  }
+
+
   .play-icon {
     position: absolute;
     font-size: 64px;
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 4abf63dd..59173759 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -12,7 +12,6 @@
       :href="attachment.url"
       :alt="attachment.description"
       :title="attachment.description"
-      @click.prevent=""
     >
       <FAIcon :icon="placeholderIconClass" />
       <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ edit ? '' : placeholderName }}
@@ -88,7 +87,7 @@
           <FAIcon icon="stop" />
         </button>
         <button
-          v-if="attachment.description && size !== 'small' && !edit"
+          v-if="attachment.description && size !== 'small' && !edit && type !== 'unknown'"
           class="button-unstyled attachment-button"
           @click.prevent="toggleDescription"
           :title="$t('status.show_attachment_description')"
@@ -96,7 +95,7 @@
           <FAIcon icon="align-right" />
         </button>
         <button
-          v-if="!useModal"
+          v-if="!useModal && type !== 'unknown'"
           class="button-unstyled attachment-button"
           @click.prevent="openModalForce"
           :title="$t('status.show_attachment_in_modal')"
@@ -155,6 +154,18 @@
         />
       </a>
 
+      <a
+        v-if="type === 'unknown' && !hidden"
+        class="placeholder-container"
+        :href="attachment.url"
+        target="_blank"
+      >
+        <FAIcon size="5x" :icon="placeholderIconClass" />
+        <p>
+          {{ localDescription }}
+        </p>
+      </a>
+
       <component
         :is="videoTag"
         v-if="type === 'video' && !hidden"
-- 
cgit v1.2.3-70-g09d2