nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-19 00:22:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

info sidebar refactoring

Browse Source
This commit is contained in:
Čarodej
2022-01-22 12:31:27 +01:00
parent ba05cdde83
commit 26bf65af88
9 changed files with 337 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
resources/js/components/FilesView/TitlePreview.vue
View File

@@ -1,93 +1,45 @@
<template>
<div class="wrapper">
<div class="icon-wrapper">
<CheckSquareIcon v-if="icon === 'check-square'" class="icon text-theme vue-feather" size="21" />
<image-icon v-if="icon === 'image'" class="icon text-theme vue-feather" size="21" />
<video-icon v-if="icon === 'video'" class="icon text-theme vue-feather" size="21" />
<folder-icon v-if="icon === 'folder'" class="icon text-theme vue-feather" size="21" />
<file-icon v-if="icon === 'file'" class="icon text-theme vue-feather" size="21" />
<div class="flex items-start">
<div class="mr-2">
<CheckSquareIcon v-if="icon === 'check-square'" class="text-theme vue-feather" size="19" />
<image-icon v-if="icon === 'image'" class="text-theme vue-feather" size="19" />
<video-icon v-if="icon === 'video'" class="text-theme vue-feather" size="19" />
<folder-icon v-if="icon === 'folder'" class="text-theme vue-feather" size="19" />
<file-icon v-if="icon === 'file'" class="text-theme vue-feather" size="19" />
</div>
<div class="text">
<span class="title">{{ title }}</span>
<span class="subtitle">{{ subtitle }}</span>
<div>
<b class="font-bold text-base inline-block whitespace-nowrap 2xl:w-72 w-52 overflow-ellipsis overflow-hidden leading-3">
{{ title }}
</b>
<small class="font-bold text-xs text-gray-400 block">
{{ subtitle }}
</small>
</div>
</div>
</template>
<script>
import {
CheckSquareIcon,
FolderIcon,
ImageIcon,
VideoIcon,
FileIcon,
} from "vue-feather-icons"
export default {
name: 'TitlePreview',
props: [
'subtitle',
'title',
'icon',
],
components: {
CheckSquareIcon,
import {
CheckSquareIcon,
FolderIcon,
ImageIcon,
VideoIcon,
FileIcon,
},
}
} from "vue-feather-icons"
export default {
name: 'TitlePreview',
props: [
'subtitle',
'title',
'icon',
],
components: {
CheckSquareIcon,
FolderIcon,
ImageIcon,
VideoIcon,
FileIcon,
},
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.wrapper {
display: flex;
align-items: flex-start;
.text {
padding-left: 10px;
width: 100%;
word-break: break-all;
.title {
@include font-size(14);
font-weight: 700;
line-height: 1.4;
display: block;
color: $text;
}
.subtitle {
@include font-size(12);
font-weight: 600;
color: $text-muted;
display: block;
}
}
.icon-wrapper {
polyline, path, rect, circle, polyline {
color: inherit;
}
}
}
.dark {
.wrapper {
.text {
.title {
color: $dark_mode_text_primary;
}
.subtitle {
color: $dark_mode_text_secondary;
}
}
}
}
</style>