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

Add Gallery

Browse Source
This commit is contained in:
Miloš Holba
2020-08-08 21:46:56 +02:00
parent a947882449
commit 785dade6b2
15 changed files with 144565 additions and 3629 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
resources/js/components/FilesView/ToolbarButton.vue
View File

@@ -1,75 +1,108 @@
<template>
<button class="button" :title="action">
<corner-down-right-icon v-if="source === 'move'" size="19"></corner-down-right-icon>
<folder-plus-icon v-if="source === 'folder-plus'" size="19"></folder-plus-icon>
<trash-2-icon v-if="source === 'trash'" size="19"></trash-2-icon>
<list-icon v-if="source === 'th-list'" size="19"></list-icon>
<info-icon v-if="source === 'info'" size="19"></info-icon>
<grid-icon v-if="source === 'th'" size="19"></grid-icon>
<link-icon v-if="source === 'share'" size="19"></link-icon>
</button>
<button class="button" :title="action">
<corner-down-right-icon
v-if="source === 'move'"
size="19"
></corner-down-right-icon>
<download-cloud-icon
v-if="source === 'download'"
size="19"
></download-cloud-icon>
<folder-plus-icon
v-if="source === 'folder-plus'"
size="19"
></folder-plus-icon>
<edit-2-icon v-if="source === 'rename'" size="19"></edit-2-icon>
<printer-icon v-if="source === 'print'" size="19"></printer-icon>
<trash-2-icon v-if="source === 'trash'" size="19"></trash-2-icon>
<list-icon v-if="source === 'th-list'" size="19"></list-icon>
<info-icon v-if="source === 'info'" size="19"></info-icon>
<grid-icon v-if="source === 'th'" size="19"></grid-icon>
<link-icon v-if="source === 'share'" size="19"></link-icon>
</button>
</template>
<script>
import {FolderPlusIcon, Trash2Icon, GridIcon, ListIcon, InfoIcon, CornerDownRightIcon, LinkIcon} from 'vue-feather-icons'
import {
FolderPlusIcon,
Trash2Icon,
GridIcon,
ListIcon,
Edit2Icon,
InfoIcon,
CornerDownRightIcon,
LinkIcon,
DownloadCloudIcon,
PrinterIcon,
} from "vue-feather-icons";
export default {
name: 'ToolbarButton',
props: ['source', 'action'],
components: {
CornerDownRightIcon,
FolderPlusIcon,
Trash2Icon,
ListIcon,
GridIcon,
InfoIcon,
LinkIcon,
},
}
export default {
name: "ToolbarButton",
props: ["source", "action"],
components: {
CornerDownRightIcon,
DownloadCloudIcon,
FolderPlusIcon,
PrinterIcon,
Trash2Icon,
Edit2Icon,
ListIcon,
GridIcon,
InfoIcon,
LinkIcon,
},
};
</script>
<style scoped lang="scss">
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
@import "@assets/vue-file-manager/_variables";
@import "@assets/vue-file-manager/_mixins";
.button {
height: 42px;
width: 42px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
text-align: center;
cursor: pointer;
white-space: nowrap;
outline: none;
border: none;
@include transition(150ms);
background: transparent;
.button {
height: 42px;
width: 42px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
text-align: center;
cursor: pointer;
white-space: nowrap;
outline: none;
border: none;
@include transition(150ms);
background: transparent;
&:hover {
background: $light_background;
&:hover {
background: $light_background;
path, line, polyline, rect, circle {
@include transition(150ms);
stroke: $theme;
}
}
path,
line,
polyline,
rect,
circle {
@include transition(150ms);
stroke: $theme;
}
}
}
@media (prefers-color-scheme: dark) {
.button {
background: transparent;
&:hover {
background: $dark_mode_foreground;
}
@media (prefers-color-scheme: dark) {
.button {
background: transparent;
&:hover {
background: $dark_mode_foreground;
}
path, line, polyline, rect, circle {
stroke: $dark_mode_text_primary;
}
}
path,
line,
polyline,
rect,
circle {
stroke: $dark_mode_text_primary;
}
}
}
</style>