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

UI improvements 2

Browse Source
This commit is contained in:
Čarodej
2022-02-03 18:19:10 +01:00
parent 78f69ca816
commit cad8c31422
22 changed files with 316 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
resources/js/components/FilesView/OptionUpload.vue
View File

@@ -1,14 +1,16 @@
<template>
<label class="menu-option group">
<div class="icon-left group-hover-text-theme">
<upload-cloud-icon v-if="type === 'file'" size="17" class="group-hover-text-theme" />
<folder-upload-icon v-if="type === 'folder'" size="17" class="group-hover-text-theme" />
<label
class="flex items-center py-4 px-5 lg:py-3 2xl:py-4"
:class="{'group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground': ! isHoverDisabled,}"
>
<div class="mr-4">
<upload-cloud-icon v-if="type === 'file'" size="17" class="vue-feather group-hover-text-theme" />
<folder-upload-icon v-if="type === 'folder'" size="17" class="vue-feather group-hover-text-theme" />
</div>
<div class="text-label group-hover-text-theme">
<div class="group-hover-text-theme text-sm font-bold text-left">
{{ title }}
<input v-if="type === 'file'" @change="emmitFiles" v-show="false" id="file" type="file" name="files[]" multiple />
<input v-if="type === 'folder'" @change="emmitFiles" v-show="false" id="folder" type="file" name="folders[]" webkitdirectory mozdirectory />
</div>
</label>
@@ -32,52 +34,3 @@ export default {
},
}
</script>
<style scoped lang="scss">
@import 'resources/sass/vuefilemanager/_variables';
@import 'resources/sass/vuefilemanager/_mixins';
.menu-option {
white-space: nowrap;
font-weight: 700;
@include font-size(14);
padding: 15px 20px;
cursor: pointer;
width: 100%;
color: $text;
display: flex;
align-items: center;
.icon-left {
margin-right: 20px;
line-height: 0;
path,
line,
polyline,
rect,
circle,
polygon {
color: inherit;
}
}
.text-label {
@include font-size(16);
}
&:hover {
background: $light_background;
}
}
.dark {
.menu-option {
color: $dark_mode_text_primary;
&:hover {
background: lighten($dark_mode_foreground, 2%);
}
}
}
</style>