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

addded new folder icon

Browse Source
This commit is contained in:
Čarodej
2021-09-22 17:58:10 +02:00
parent f715cd897f
commit d40108f6a9
13 changed files with 189 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
resources/js/components/FilesView/FolderIcon.vue
View File

@@ -5,17 +5,29 @@
:emoji="emoji"
class="emoji-icon"
/>
<FontAwesomeIcon
<VueFolderIcon
v-if="!emoji && !item.data.attributes.isTeamFolder"
:class="[{'is-deleted':isDeleted},{'default-color': ! color && ! isDeleted}, 'folder-icon' ]"
:style="{fill: color}"
/>
<VueFolderTeamIcon
v-if="!emoji && item.data.attributes.isTeamFolder"
:class="[{'is-deleted':isDeleted},{'default-color': ! color && ! isDeleted}, 'folder-icon' ]"
:style="{fill: color}"
/>
<!-- <FontAwesomeIcon
v-if="!emoji"
:class="[{'is-deleted':isDeleted},{'is-team':item.data.attributes.isTeamFolder},{'default-color': ! color && ! isDeleted}, 'folder-icon' ]"
:style="{fill: color}"
icon="folder"
/>
/>-->
</div>
</template>
<script>
import Emoji from '/resources/js/components/Others/Emoji'
import VueFolderIcon from "./Icons/VueFolderIcon"
import VueFolderTeamIcon from "./Icons/VueFolderTeamIcon"
export default {
name: 'FolderIcon',
@@ -25,7 +37,9 @@
'item',
],
components: {
Emoji
VueFolderTeamIcon,
VueFolderIcon,
Emoji,
},
computed: {
isDeleted() {

32
resources/js/components/FilesView/Icons/VueFolderIcon.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<svg width="53px" height="52px" viewBox="0 0 53 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="50%" y1="6.48193497%" x2="50%" y2="35.9903566%" id="linearGradient-dy2zl5q25f-1">
<stop stop-color="#3DB07D" offset="0%"></stop>
<stop stop-color="#339569" offset="100%"></stop>
</linearGradient>
</defs>
<g id="V2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="folder" fill-rule="nonzero">
<path d="M48.03125,6.5 L29.790833,6.5 C28.7431613,6.5 27.7373076,6.08896217 26.9894703,5.35523504 L22.6980297,1.14476496 C21.9501924,0.41103783 20.9443387,-6.36543387e-16 19.896667,0 L4.96875,0 L4.96875,0 C2.22455078,0 0,2.18257812 0,4.875 L0,34.125 C0,36.8174219 2.22455078,39 4.96875,39 L48.03125,39 C50.7754492,39 53,36.8174219 53,34.125 L53,11.375 C53,8.68257813 50.7754492,6.5 48.03125,6.5 Z" id="back" fill="url(#linearGradient-dy2zl5q25f-1)"></path>
<path d="M48.03125,12.75 C49.0609313,12.75 49.9941504,13.1577174 50.6692739,13.8201027 C51.3356976,14.4739525 51.75,15.3766531 51.75,16.375 L51.75,16.375 L51.75,34.125 C51.75,35.1233469 51.3356976,36.0260475 50.6692739,36.6798973 C49.9941504,37.3422826 49.0609313,37.75 48.03125,37.75 L48.03125,37.75 L4.96875,37.75 C3.93906868,37.75 3.00584961,37.3422826 2.33072613,36.6798973 C1.66430239,36.0260475 1.25,35.1233469 1.25,34.125 L1.25,34.125 L1.25,16.375 C1.25,15.3766531 1.66430239,14.4739525 2.33072613,13.8201027 C3.00584961,13.1577174 3.93906868,12.75 4.96875,12.75 L4.96875,12.75 Z" id="front" stroke="#41B883" stroke-width="2.5" fill="#41B883"></path>
</g>
</g>
</svg>
</template>
<style lang="scss">
.alphabet-icon {
polyline, line, g {
color: inherit;
}
}
</style>
<script>
export default {
name: 'VueFolderIcon',
}
</script>

38
resources/js/components/FilesView/Icons/VueFolderTeamIcon.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<svg width="53px" height="52px" viewBox="0 0 53 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="50%" y1="6.48193497%" x2="50%" y2="35.9903566%" id="linearGradient-8fktz2_lvc-1">
<stop stop-color="#3DB07D" offset="0%"></stop>
<stop stop-color="#339569" offset="100%"></stop>
</linearGradient>
</defs>
<g id="V2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="team-folder">
<path d="M48.03125,6.5 L29.790833,6.5 C28.7431613,6.5 27.7373076,6.08896217 26.9894703,5.35523504 L22.6980297,1.14476496 C21.9501924,0.41103783 20.9443387,-6.36543387e-16 19.896667,0 L4.96875,0 L4.96875,0 C2.22455078,0 0,2.18257812 0,4.875 L0,34.125 C0,36.8174219 2.22455078,39 4.96875,39 L48.03125,39 C50.7754492,39 53,36.8174219 53,34.125 L53,11.375 C53,8.68257813 50.7754492,6.5 48.03125,6.5 Z" id="back" fill="url(#linearGradient-8fktz2_lvc-1)" fill-rule="nonzero"></path>
<path d="M48.03125,12.75 C49.0609313,12.75 49.9941504,13.1577174 50.6692739,13.8201027 C51.3356976,14.4739525 51.75,15.3766531 51.75,16.375 L51.75,16.375 L51.75,34.125 C51.75,35.1233469 51.3356976,36.0260475 50.6692739,36.6798973 C49.9941504,37.3422826 49.0609313,37.75 48.03125,37.75 L48.03125,37.75 L4.96875,37.75 C3.93906868,37.75 3.00584961,37.3422826 2.33072613,36.6798973 C1.66430239,36.0260475 1.25,35.1233469 1.25,34.125 L1.25,34.125 L1.25,16.375 C1.25,15.3766531 1.66430239,14.4739525 2.33072613,13.8201027 C3.00584961,13.1577174 3.93906868,12.75 4.96875,12.75 L4.96875,12.75 Z" id="front" stroke="#41B883" stroke-width="2.5" fill="#41B883" fill-rule="nonzero"></path>
<g id="Icon" transform="translate(8.000000, 20.000000)" stroke="#359B6E" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3">
<path d="M9.59999943,10.7999994 L9.59999943,9.59999943 C9.59999943,8.27451611 8.52548289,7.19999957 7.19999957,7.19999957 L2.39999986,7.19999957 C1.07451654,7.19999957 0,8.27451611 0,9.59999943 L0,10.7999994" id="Path"></path>
<circle id="Oval" cx="4.79999971" cy="2.39999986" r="2.39999986"></circle>
<path d="M13.1999992,10.7999994 L13.1999992,9.59999943 C13.1991834,8.50627014 12.4589985,7.55143166 11.3999993,7.27799957" id="Path"></path>
<path d="M8.99999946,0.0779999954 C10.0619483,0.349901852 10.8047053,1.30679461 10.8047053,2.40299986 C10.8047053,3.4992051 10.0619483,4.45609786 8.99999946,4.72799972" id="Path"></path>
</g>
</g>
</g>
</svg>
</template>
<style lang="scss">
.alphabet-icon {
polyline, line, g {
color: inherit;
}
}
</style>
<script>
export default {
name: 'VueFolderTeamIcon',
}
</script>

2
resources/js/components/Others/ThumbnailItem.vue
View File

@@ -125,7 +125,7 @@
height: 36px;
/deep/ .folder-icon {
@include font-size(36);
transform: scale(0.8) translate(-10px, -11px);
}
}

3
resources/js/views/FileView/Files.vue
View File

@@ -38,6 +38,9 @@
<ContextMenu>
<template v-slot:empty-select>
<OptionGroup>
<OptionUpload :title="$t('actions.upload')" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$createFolder" :title="$t('context_menu.create_folder')" icon="create-folder" />
</OptionGroup>

3
resources/js/views/FileView/Public.vue
View File

@@ -40,6 +40,9 @@
<ContextMenu>
<template v-slot:empty-select v-if="$checkPermission('editor')">
<OptionGroup>
<OptionUpload :title="$t('actions.upload')" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$createFolder" :title="$t('context_menu.create_folder')" icon="create-folder" />
</OptionGroup>

14
resources/js/views/FileView/RecentUploads.vue
View File

@@ -57,6 +57,18 @@
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</template>
<template v-slot:empty-file-page>
<h1 class="title">
{{ $t('empty_page.title') }}
</h1>
<p class="description">
{{ $t('empty_page.description') }}
</p>
<ButtonUpload button-style="theme">
{{ $t('empty_page.call_to_action') }}
</ButtonUpload>
</template>
</FileBrowser>
<MobileMultiSelectToolbar>
@@ -72,6 +84,7 @@
import MobileMultiSelectToolbar from "/resources/js/components/FilesView/MobileMultiSelectToolbar"
import MobileContextMenu from "/resources/js/components/FilesView/MobileContextMenu"
import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
import ButtonUpload from '/resources/js/components/FilesView/ButtonUpload'
import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
@@ -87,6 +100,7 @@
MobileActionButton,
MobileContextMenu,
ToolbarButton,
ButtonUpload,
OptionGroup,
FileBrowser,
ContextMenu,

35
resources/js/views/FileView/TeamFolders.vue
View File

@@ -100,15 +100,30 @@
</template>
<template v-slot:empty-file-page>
<h1 class="title">
{{ $t('empty_page.title') }}
</h1>
<p class="description">
{{ $t('empty_page.description') }}
</p>
<ButtonUpload button-style="theme">
{{ $t('empty_page.call_to_action') }}
</ButtonUpload>
<template v-if="isTeamFolderHomepage">
<h1 class="title">
{{ $t('Create your Team Folder') }}
</h1>
<p class="description">
{{ $t('Share your files with your team easily by creating new team folder.') }}
</p>
<ButtonBase @click.native="$createTeamFolder" button-style="theme" class="m-center">
{{ $t('Create Team Folder') }}
</ButtonBase>
</template>
<template v-if="! isTeamFolderHomepage">
<h1 class="title">
{{ $t('empty_page.title') }}
</h1>
<p class="description">
{{ $t('empty_page.description') }}
</p>
<ButtonUpload button-style="theme">
{{ $t('empty_page.call_to_action') }}
</ButtonUpload>
</template>
</template>
</FileBrowser>
</div>
@@ -126,6 +141,7 @@
import FileBrowser from '/resources/js/components/FilesView/FileBrowser'
import ContextMenu from '/resources/js/components/FilesView/ContextMenu'
import OptionGroup from '/resources/js/components/FilesView/OptionGroup'
import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import Option from '/resources/js/components/FilesView/Option'
import { mapGetters } from 'vuex'
import {events} from "../../bus";
@@ -146,6 +162,7 @@
OptionGroup,
FileBrowser,
ContextMenu,
ButtonBase,
Option,
},
computed: {

1
resources/sass/app.scss vendored
View File

@@ -1,6 +1,7 @@
// Fonts
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
@import '/resources/sass/vuefilemanager/_vuewind';
#viewport {
display: flex;

5
resources/sass/vuefilemanager/_vuewind.scss vendored
View File

@@ -20,4 +20,9 @@
.top-80 {
top: 80px;
}
.m-center {
margin-left: auto;
margin-right: auto;
}