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

- cancel/resume subscription fix

Browse Source 
- upload into root folder fix
- custom color theme part 3
This commit is contained in:
Peter Papp
2021-03-25 10:46:23 +01:00
parent a18ceb1b4f
commit ac6b2b09e1
41 changed files with 591 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
resources/js/components/FilesView/ButtonUpload.vue
View File

@@ -48,11 +48,6 @@
transform: scale(0.95);
}
&.theme {
color: $theme;
background: rgba($theme, .1);
}
&.secondary {
color: $text;
background: $light_background;

14
resources/js/components/FilesView/DesktopToolbar.vue
View File

@@ -7,14 +7,12 @@
<chevron-left-icon size="17" :class="{ 'is-active': browseHistory.length > 1 }" class="icon-back"></chevron-left-icon>
<span class="back-directory-title">
{{ directoryName }}
</span>
{{ directoryName }}
</span>
<span @click.stop="folderActions" v-if="
browseHistory.length > 1 && $isThisLocation(['base', 'public'])
" class="folder-options" id="folder-actions">
<more-horizontal-icon size="14" class="icon-more"></more-horizontal-icon>
</span>
<span @click.stop="folderActions" v-if="browseHistory.length > 1 && $isThisLocation(['base', 'public'])" class="folder-options group" id="folder-actions">
<more-horizontal-icon size="14" class="icon-more group-hover-text-theme" />
</span>
</div>
</div>
@@ -287,7 +285,7 @@ export default {
background: $light_background;
svg circle {
stroke: $theme;
color: inherit;
}
}

34
resources/js/components/FilesView/DragUI.vue
View File

@@ -68,8 +68,6 @@ export default {
events.$on('drop', () => {
this.isVisible = false
})
}
}
</script>
@@ -88,43 +86,11 @@ export default {
border-radius: 8px;
box-shadow: 0 7px 25px 1px rgba(0, 0, 0, 0.12);
background: white;
/deep/ .text {
.title {
color: $text;
}
.count {
color: $text-muted;
}
}
/deep/ .icon-wrapper {
.icon {
stroke: $theme;
}
}
}
@media (prefers-color-scheme: dark) {
#multi-select-ui {
background: $dark_mode_foreground;
/deep/ .text {
.title {
color: $dark_mode_text_primary;
}
.count {
color: $dark_mode_text_secondary;
}
}
/deep/ .icon-wrapper {
.icon {
stroke: $theme;
}
}
}
}

6
resources/js/components/FilesView/FileItemGrid.vue
View File

@@ -15,7 +15,7 @@
</div>
<!--If is file or image, then link item-->
<span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text">
<span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text text-theme">
{{ item.mimetype }}
</span>
@@ -394,7 +394,7 @@ export default {
vertical-align: middle;
path, circle, line {
stroke: $theme;
color: inherit;
}
}
}
@@ -438,7 +438,6 @@ export default {
padding: 15px 0;
&.is-dragenter {
border: 2px dashed $theme;
border-radius: 8px;
}
@@ -489,7 +488,6 @@ export default {
text-align: center;
left: 0;
right: 0;
color: $theme;
@include font-size(12);
font-weight: 600;
user-select: none;

1
resources/js/components/FilesView/FileItemList.vue
View File

@@ -509,7 +509,6 @@ export default {
padding: 7px;
&.is-dragenter {
border: 2px dashed $theme;
border-radius: 8px;
}

26
resources/js/components/FilesView/Icons/AlphabetIcon.vue
View File

@@ -1,14 +1,16 @@
<template>
<svg width="13px" height="15px" viewBox="0 0 13 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="VueFileManager" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="Storage-Alert-Copy" transform="translate(-888.000000, -238.000000)" stroke="#000000" stroke-width="1.6">
<g id="Sorting-Menu" transform="translate(865.000000, 67.000000)">
<g id="alphabet-icon" transform="translate(24.000000, 172.000000)">
<polyline id="Path" points="11.1999993 13.1999991 5.59999967 0.199999094 0 13.1999991 5.59999967 0.199999094"></polyline>
<line x1="2.25" y1="8" x2="8.75" y2="8" id="Line-2"></line>
</g>
</g>
</g>
</g>
<svg class="alphabet-icon" fill="none" stroke="currentColor" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" width="15px" height="15px" viewBox="0 0 13 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polyline id="Path" points="11.1999993 13.1999991 5.59999967 0.199999094 0 13.1999991 5.59999967 0.199999094"></polyline>
<line x1="2.25" y1="8" x2="8.75" y2="8" id="Line-2"></line>
</svg>
</template>
</template>
<style lang="scss">
.alphabet-icon {
polyline, line, g {
color: inherit;
}
}
</style>

55
resources/js/components/FilesView/MultiSelected.vue
View File

@@ -1,27 +1,28 @@
<template>
<div class="wrapper">
<div class="icon-wrapper">
<CheckSquareIcon class="icon" size="21"/>
<CheckSquareIcon class="icon text-theme" size="21" />
</div>
<div class="text" >
<span class="title">{{title }}</span>
<span class="count">{{subtitle }}</span>
<div class="text">
<span class="title">{{ title }}</span>
<span class="count">{{ subtitle }}</span>
</div>
</div>
</template>
<script>
import {CheckSquareIcon} from "vue-feather-icons";
import {mapGetters} from 'vuex'
import {events} from '@/bus'
import {CheckSquareIcon} from "vue-feather-icons"
export default {
name:'MultiSelected',
props: [ 'title' , 'subtitle' ],
components: {CheckSquareIcon},
}
export default {
name: 'MultiSelected',
props: [
'title',
'subtitle'
],
components: {
CheckSquareIcon
},
}
</script>
<style lang="scss" scoped>
@@ -31,25 +32,28 @@ import {events} from '@/bus'
.wrapper {
display: flex;
justify-content: center;
.text{
.text {
padding-left: 10px;
width: 100%;
word-break: break-all;
.title {
@include font-size(14);
@include font-size(14);
font-weight: 700;
line-height: 1.4;
display: block;
color: $text;
}
.count {
@include font-size(12);
@include font-size(12);
font-weight: 600;
color: $theme;
color: $text-muted;
display: block;
}
}
.icon-wrapper {
display: inline-flex;
align-items: center;
@@ -60,8 +64,9 @@ import {events} from '@/bus'
white-space: nowrap;
outline: none;
border: none;
.icon {
stroke: $text;
polyline, path {
color: inherit;
}
}
}
@@ -72,15 +77,17 @@ import {events} from '@/bus'
.title {
color: $dark_mode_text_primary;
}
.count {
color: $dark_mode_text_secondary;
}
}
}
.icon-wrapper {
.icon {
.icon {
stroke: $theme;
}
}
}
}
}
}
</style>

11
resources/js/components/FilesView/Option.vue
View File

@@ -16,6 +16,7 @@
<folder-plus-icon v-if="icon === 'create-folder'" size="17" class="group-hover-text-theme"/>
<smile-icon v-if="icon === 'no-options'" size="17" class="group-hover-text-theme"/>
<paperclip-icon v-if="icon === 'zip-folder'" size="17" class="group-hover-text-theme"/>
<alphabet-icon v-if="icon === 'alphabet'" size="17" class="group-hover-text-theme"/>
</div>
<div class="text-label group-hover-text-theme">
{{ title }}
@@ -24,6 +25,7 @@
</template>
<script>
import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
import {
CornerDownRightIcon,
DownloadCloudIcon,
@@ -36,7 +38,10 @@ import {
StarIcon,
LinkIcon,
EyeIcon,
SmileIcon
SmileIcon,
GridIcon,
ListIcon,
CalendarIcon,
} from 'vue-feather-icons'
export default {
@@ -48,6 +53,7 @@ import {
FolderPlusIcon,
PaperclipIcon,
LifeBuoyIcon,
AlphabetIcon,
Trash2Icon,
SmileIcon,
Edit2Icon,
@@ -55,6 +61,9 @@ import {
LinkIcon,
StarIcon,
EyeIcon,
GridIcon,
ListIcon,
CalendarIcon,
}
}
</script>

3
resources/js/components/FilesView/ProgressBar.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="progress-bar">
<span :style="{ width: progress + '%' }"></span>
<span class="bg-theme" :style="{ width: progress + '%' }"></span>
</div>
</template>
@@ -23,7 +23,6 @@ export default {
border-radius: 10px;
span {
background: $theme;
display: block;
height: 100%;
border-radius: 10px;

71
resources/js/components/FilesView/SortingAndPreviewMenu.vue
View File

@@ -1,56 +1,17 @@
<template>
<div class="menu-options" id="menu-list">
<OptionGroup class="menu-option-group">
<Option v-if="isList" @click="changePreview('grid')" :title="$t('preview_sorting.grid_view')" icon="grid" />
<Option v-if="isGrid" @click="changePreview('list')" :title="$t('preview_sorting.list_view')" icon="list" />
<Option v-if="isList" @click.native="changePreview('grid')" :title="$t('preview_sorting.grid_view')" icon="grid" />
<Option v-if="isGrid" @click.native="changePreview('list')" :title="$t('preview_sorting.list_view')" icon="list" />
</OptionGroup>
<OptionGroup class="menu-option-group">
<Option @click.stop="sort('created_at')" :title="$t('preview_sorting.sort_date')" icon="calendar" />
<Option @click.stop="sort('name')" :title="$t('preview_sorting.sort_alphabet')" icon="alphabet" />
<Option @click.native.stop="sort('created_at')" :title="$t('preview_sorting.sort_date')" icon="calendar" />
<Option @click.native.stop="sort('name')" :title="$t('preview_sorting.sort_alphabet')" icon="alphabet" />
</OptionGroup>
<ul v-if="false" class="menu-option-group">
<li v-if="isList" class="menu-option" @click="changePreview('grid')">
<div class="icon">
<grid-icon size="17"/>
</div>
<div class="text-label">
{{ $t('preview_sorting.grid_view') }}
</div>
</li>
<li v-if="isGrid" class="menu-option" @click="changePreview('list')">
<div class="icon">
<list-icon size="17"/>
</div>
<div class="text-label">
{{ $t('preview_sorting.list_view') }}
</div>
</li>
</ul>
<ul v-if="false" class="menu-option-group">
<li class="menu-option" @click.stop="sort('created_at')">
<div class="icon">
<calendar-icon size="17"/>
</div>
<div class="text-label">
{{ $t('preview_sorting.sort_date') }}
</div>
<div class="show-icon">
<arrow-up-icon size="17" v-if="filter.field === 'created_at'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
</div>
</li>
<li class="menu-option" @click.stop="sort('name')">
<div class="icon">
<alphabet-icon size="17" class="alphabet-icon"/>
</div>
<div class="text-label">
{{ $t('preview_sorting.sort_alphabet') }}
</div>
<div class="show-icon">
<arrow-up-icon size="17" v-if="filter.field === 'name'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
</div>
</li>
</ul>
<!-- TODO: implementovat sipky
<arrow-up-icon size="17" v-if="filter.field === 'created_at'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
<arrow-up-icon size="17" v-if="filter.field === 'name'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>-->
</div>
</template>
@@ -129,7 +90,6 @@ export default {
this.filter.sort = sorting ? sorting.sort : 'DESC'
this.filter.field = sorting ? sorting.field : 'created_at'
}
}
</script>
@@ -152,14 +112,6 @@ export default {
.icon {
margin-right: 20px;
line-height: 0;
.alphabet-icon {
/deep/ line,
/deep/ polyline {
stroke: $text;
}
}
}
.text-label {
@@ -222,15 +174,6 @@ export default {
.menu-option {
color: $dark_mode_text_primary;
.icon {
.alphabet-icon {
/deep/ line,
/deep/ polyline {
stroke: $dark_mode_text_primary;
}
}
}
}
}
}

8
resources/js/components/FilesView/UploadProgress.vue
View File

@@ -5,7 +5,7 @@
<!--Is processing-->
<span v-if="isProcessingFile">
<refresh-cw-icon size="12" class="sync-alt"></refresh-cw-icon>
<refresh-cw-icon size="12" class="sync-alt text-theme" />
{{ $t('uploading.processing_file') }}
</span>
@@ -17,7 +17,7 @@
<div class="progress-wrapper">
<ProgressBar :progress="uploadingProgress" />
<span @click="cancelUpload" :title="$t('uploading.cancel')" class="cancel-icon">
<x-icon size="16" @click="cancelUpload"></x-icon>
<x-icon size="16" @click="cancelUpload" class="hover-text-theme"></x-icon>
</span>
</div>
</div>
@@ -63,7 +63,7 @@
margin-right: 5px;
polyline, path {
stroke: $theme;
color: inherit;
}
}
@@ -103,7 +103,7 @@
&:hover {
line {
stroke: $theme;
color: inherit;
}
}
}