mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 08:12:15 +00:00
Initial commit
This commit is contained in:
MakingCG
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="file-item">
|
||||
|
||||
<!--Thumbnail for item-->
|
||||
<div class="icon-item" :class="file.type">
|
||||
|
||||
<!--If is file or image, then link item-->
|
||||
<span v-if="isFile" class="file-icon-text">{{ file.mimetype }}</span>
|
||||
|
||||
<!--Folder thumbnail-->
|
||||
<FontAwesomeIcon v-if="isFile" class="file-icon" icon="file" />
|
||||
|
||||
<!--Image thumbnail-->
|
||||
<img v-if="isImage" :src="file.thumbnail" :alt="file.name" />
|
||||
|
||||
<!--Else show only folder icon-->
|
||||
<FontAwesomeIcon v-if="isFolder" class="folder-icon" icon="folder" />
|
||||
</div>
|
||||
|
||||
<!--Name-->
|
||||
<div class="item-name">
|
||||
|
||||
<!--Name-->
|
||||
<span class="name" >{{ file.name }}</span>
|
||||
|
||||
<!--Other attributes-->
|
||||
<span v-if="isFile || isImage" class="item-size">{{ file.filesize }}, {{ file.created_at }}</span>
|
||||
|
||||
<span v-if="isFolder" class="item-length">{{ file.items == 0 ? 'Empty' : (file.items + ' item') | pluralize(file.items) }}, {{ file.created_at }}</span >
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'FileListItemThumbnail',
|
||||
props: ['file'],
|
||||
computed: {
|
||||
isFolder() {
|
||||
return this.file.type === 'folder'
|
||||
},
|
||||
isFile() {
|
||||
return this.file.type === 'file'
|
||||
},
|
||||
isImage() {
|
||||
return this.file.type === 'image'
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
pluralize(word, amount) {
|
||||
return amount > 1 ? word + 's' : word
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
|
||||
.file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 15px;
|
||||
@include transition(150ms);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme, .1);
|
||||
|
||||
.item-name .name {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
display: block;
|
||||
margin-left: 10px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.item-size,
|
||||
.item-length {
|
||||
@include font-size(11);
|
||||
font-weight: 100;
|
||||
color: $text-muted;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.name {
|
||||
color: $text;
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
position: relative;
|
||||
min-width: 40px;
|
||||
|
||||
.file-icon {
|
||||
@include font-size(35);
|
||||
|
||||
path {
|
||||
fill: #fafafc;
|
||||
stroke: #dfe0e8;
|
||||
stroke-width: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.file {
|
||||
text-align: center;
|
||||
|
||||
.file-icon-text {
|
||||
top: 40%;
|
||||
@include font-size(9);
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: $theme;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
max-width: 20px;
|
||||
max-height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&.image {
|
||||
line-height: 0;
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
user-select: none;
|
||||
max-width: 100%;
|
||||
border-radius: 5px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.file-item {
|
||||
|
||||
.icon-item .file-icon {
|
||||
|
||||
path {
|
||||
fill: $dark_mode_background;
|
||||
stroke: #2F3C54;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
background: rgba($theme, .1);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.item-name .name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 690px) and (prefers-color-scheme: dark){
|
||||
.file-item {
|
||||
|
||||
.icon-item .file-icon {
|
||||
|
||||
path {
|
||||
fill: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div class="storage-size" v-if="app">
|
||||
<div class="storage-info">
|
||||
<span class="title">Storage</span>
|
||||
<span class="size">{{ app.storage.used }} of {{ app.storage.capacity }} Used</span>
|
||||
</div>
|
||||
<ProgressBar :progress="app.storage.percentage"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProgressBar from '@/components/VueFileManagerComponents/FilesView/ProgressBar'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'StorageSize',
|
||||
components: {
|
||||
ProgressBar,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['app']),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.storage-size {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 15px;
|
||||
border-radius: 8px;
|
||||
|
||||
.storage-info {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.title {
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.size {
|
||||
@include font-size(12);
|
||||
text-align: right;
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
.storage-size {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
|
||||
.size {
|
||||
@include font-size(10);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<div class="user-headline-wrapper" v-if="app">
|
||||
<div class="user-headline" @click="openMenu">
|
||||
<div class="user-avatar">
|
||||
<img :src="app.user.avatar" :alt="app.user.name">
|
||||
</div>
|
||||
<div class="user-name">
|
||||
<b class="name">{{ app.user.name }}</b>
|
||||
<span class="email">{{ app.user.email }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<transition name="user-menu">
|
||||
<div class="user-menu" v-if="isOpenedMenu">
|
||||
<ul class="menu-options" id="menu-options-list" @click="closeMenu">
|
||||
<li class="menu-option" @click="$goToView('user-settings')">Profile Settings</li>
|
||||
<li class="menu-option" @click="$store.dispatch('logOut')">Log Out</li>
|
||||
</ul>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'UserHeadline',
|
||||
computed: {
|
||||
...mapGetters(['app', 'appSize']),
|
||||
isSmallAppSize() {
|
||||
return this.appSize === 'small'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isOpenedMenu: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openMenu() {
|
||||
|
||||
// If is mobile, then go to user settings page, else, open menu
|
||||
if ( this.isSmallAppSize ) {
|
||||
|
||||
this.$goToView('user-settings')
|
||||
} else {
|
||||
|
||||
this.isOpenedMenu = !this.isOpenedMenu
|
||||
}
|
||||
|
||||
},
|
||||
closeMenu() {
|
||||
this.isOpenedMenu = !this.isOpenedMenu
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.user-headline-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-headline {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 15px;
|
||||
user-select: none;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
@include transition(150ms);
|
||||
|
||||
&:hover {
|
||||
//background: rgba($theme, .1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.user-name {
|
||||
|
||||
.name, .email {
|
||||
white-space: nowrap;
|
||||
width: 180px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: block;
|
||||
@include font-size(17);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.email {
|
||||
@include font-size(13);
|
||||
color: $light_text;
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
line-height: 0;
|
||||
margin-right: 15px;
|
||||
|
||||
img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-menu {
|
||||
position: absolute;
|
||||
top: 75px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 15px;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.menu-options {
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: $shadow;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
|
||||
.menu-option {
|
||||
font-weight: 600;
|
||||
@include font-size(15);
|
||||
padding: 15px 30px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
.user-headline {
|
||||
position: relative;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
#sidebar {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
|
||||
.user-headline {
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.user-name {
|
||||
|
||||
.email {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-options {
|
||||
background: $dark_mode_background;
|
||||
|
||||
.menu-option {
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Transition
|
||||
.user-menu-enter-active {
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
.user-menu-leave-active {
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
.user-menu-enter,
|
||||
.user-menu-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-35%);
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user