Update mime type icon styles

outl1ne · Jun 18, 2021 · fc41e36 · fc41e36
1 parent 8d298af
commit fc41e36
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 11 deletions.
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/js/components/IndexFileField.vue b/resources/js/components/IndexFileField.vue
@@ -40,15 +40,31 @@ export default {
   },
 };
 </script>
-<style scoped lang="scss">
-.mime-type-icon {
-  width: 100%;
-  max-width: 50px;
-}
+<style lang="scss">
+.mime-type-icon-wrapper {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+
+  .mime-type-icon {
+    width: 100%;
+    max-width: 50px;
+  }
+
+  .mime-type-video {
+    padding: 6px;
+  }
+
+  .mime-type-audio {
+    padding: 8px;
+  }
 
-img,
-svg {
-  width: 100%;
-  height: 100%;
+  img,
+  svg {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
 }
 </style>
diff --git a/resources/js/components/MimeTypeIcon.vue b/resources/js/components/MimeTypeIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mime-type-icon">
+  <div :class="`mime-type-icon mime-type-${mimeStartsWith}`">
     <img
       v-if="isImageFile && src && !isImageFileMissing"
       draggable="false"
@@ -38,6 +38,10 @@ export default {
   },
 
   computed: {
+    mimeStartsWith() {
+      const split = this.mimeType?.split('/');
+      return split.length ? split[0] : null;
+    },
     isImageFile() {
       return this.mimeType?.indexOf('image/') === 0;
     },