info sidebar refactoring

resources/js/components/Others/FilePreviewDetail.vue

@@ -1,66 +1,56 @@
 <template>
-    <div v-if="canBePreview" class="preview">
-        <img v-if="singleFile.data.type === 'image' && singleFile.data.attributes.thumbnail" :src="singleFile.data.attributes.thumbnail.md" :alt="singleFile.data.attributes.name" />
-        <audio v-else-if="singleFile.data.type === 'audio'" :src="singleFile.data.attributes.file_url" controlsList="nodownload" controls></audio>
-        <video v-else-if="singleFile.data.type === 'video'" controlsList="nodownload" disablePictureInPicture playsinline controls>
+    <div v-if="canBePreview" class="w-full block mb-4">
+
+		<!--Image-->
+		<img
+			v-if="singleFile.data.type === 'image' && singleFile.data.attributes.thumbnail"
+			:src="singleFile.data.attributes.thumbnail.md"
+			:alt="singleFile.data.attributes.name"
+			class="rounded-lg overflow-hidden w-full object-cover shadow-lg"
+		/>
+
+		<!--Audio-->
+		<audio
+			v-else-if="singleFile.data.type === 'audio'"
+			:src="singleFile.data.attributes.file_url"
+			controlsList="nodownload"
+			controls
+			class="w-full"
+		>
+		</audio>
+
+		<!--Video-->
+		<video
+			class="w-full h-auto rounded-sm overflow-hidden"
+			v-else-if="singleFile.data.type === 'video'"
+			controlsList="nodownload"
+			disablePictureInPicture
+			playsinline
+			controls
+		>
             <source :src="singleFile.data.attributes.file_url" type="video/mp4">
         </video>
     </div>
 </template>
 
 <script>
-    import { mapGetters } from 'vuex'
-    import { includes } from 'lodash'
+    import {mapGetters} from 'vuex'
+	import {includes} from 'lodash'
 
-    export default {
-        name: 'FilePreview',
-        computed: {
-            ...mapGetters([
+	export default {
+		name: 'FilePreview',
+		computed: {
+			...mapGetters([
 				'clipboard',
 			]),
 			singleFile() {
-            	return this.clipboard[0]
+				return this.clipboard[0]
 			},
-            canBePreview() {
-                return this.singleFile && ! includes([
-                    'folder', 'file'
-                ], this.singleFile.data.type)
-            },
-        }
+			canBePreview() {
+				return this.singleFile && !includes([
+					'folder', 'file'
+				], this.singleFile.data.type)
+			},
+		}
 	}
-</script>
-
-<style scoped lang="scss">
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-
-    .preview {
-        width: 100%;
-        display: block;
-        margin-bottom: 7px;
-
-        img {
-            border-radius: 4px;
-            overflow: hidden;
-            width: 100%;
-            object-fit: cover;
-        }
-
-        audio {
-            width: 100%;
-            &::-webkit-media-controls-panel {
-                background-color: $light_background;
-            }
-
-            &::-webkit-media-controls-play-button {
-                color: $theme;
-            }
-        }
-
-        video {
-            width: 100%;
-            height: auto;
-            border-radius: 3px;
-        }
-    }
-</style>
+</script>

resources/js/components/Others/ListInfoItem.vue

@@ -1,64 +1,22 @@
 <template>
-    <li class="list-info-item">
-        <b class="text-theme dark-text-theme">{{ title }}</b>
-        <span v-if="content">{{ content }}</span>
-        <slot></slot>
-    </li>
+    <div class="mb-4">
+        <small class="text-theme font-bold text-xs block">
+			{{ title }}
+		</small>
+        <b v-if="content" class="inline-block font-bold text-sm">
+			{{ content }}
+		</b>
+
+        <slot v-if="$slots.default" />
+    </div>
 </template>
 
 <script>
     export default {
         name: 'ListInfoItem',
-        props: ['title', 'content']
+        props: [
+			'content',
+			'title',
+		]
     }
 </script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-
-    .list-info-item {
-        display: block;
-        padding-bottom: 20px;
-
-        .action-button {
-            cursor: pointer;
-			display: flex;
-			align-items: center;
-
-            .edit-icon {
-                display: inline-block;
-                margin-left: 7px;
-            }
-        }
-
-        b {
-            display: block;
-            @include font-size(13);
-            margin-bottom: 2px;
-        }
-
-        span {
-            display: inline-block;
-            @include font-size(14);
-            font-weight: bold;
-            color: $text;
-        }
-    }
-
-    .dark {
-        .list-info-item {
-
-            span {
-                color: $dark_mode_text_primary
-            }
-
-            .action-button {
-
-                .icon {
-                    color: $dark_mode_text_primary;
-                }
-            }
-        }
-    }
-</style>