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

v1.5-alpha.1

Browse Source
This commit is contained in:
carodej
2020-05-15 17:31:25 +02:00
parent cfecf542ca
commit 41656235fc
97 changed files with 4108 additions and 2118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/Others/ActionButton.vue
+2 -1
View File
@@ -15,7 +15,8 @@
</script>
<style lang="scss" scoped>
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.action-button {
cursor: pointer;
resources/js/components/Others/ContentFileview.vue
+63
View File
@@ -0,0 +1,63 @@
<template>
<div @click="fileViewClick"
@contextmenu.prevent.capture="contextMenu($event, undefined)"
id="files-view">
<ContextMenu/>
<DesktopToolbar/>
<FileBrowser/>
</div>
</template>
<script>
import DesktopToolbar from '@/components/FilesView/DesktopToolbar'
import FileBrowser from '@/components/FilesView/FileBrowser'
import ContextMenu from '@/components/FilesView/ContextMenu'
import {ResizeSensor} from 'css-element-queries'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name: 'FilesView',
components: {
DesktopToolbar,
FileBrowser,
ContextMenu,
},
computed: {
...mapGetters(['config']),
},
methods: {
fileViewClick() {
events.$emit('contextMenu:hide')
},
contextMenu(event, item) {
events.$emit('contextMenu:show', event, item)
},
},
}
</script>
<style lang="scss">
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
#files-view {
font-family: 'Nunito', sans-serif;
font-size: 16px;
width: 100%;
height: 100%;
position: relative;
min-width: 320px;
overflow-x: hidden;
padding-left: 15px;
padding-right: 15px;
}
@media only screen and (max-width: 690px) {
#files-view {
padding-left: 0;
padding-right: 0;
}
}
</style>
resources/js/components/Others/Forms/CopyInput.vue
+11 -6
View File
@@ -2,15 +2,22 @@
<div class="inline-wrapper icon-append copy-input" :class="size" @click="copyUrl">
<input ref="sel" :value="value" id="link-input" type="text" class="input-text" readonly>
<div class="icon">
<FontAwesomeIcon :icon="isCopiedLink ? 'check' : 'link'"/>
<link-icon v-if="! isCopiedLink" size="14"></link-icon>
<check-icon v-if="isCopiedLink" size="14"></check-icon>
</div>
</div>
</template>
<script>
import { LinkIcon, CheckIcon } from 'vue-feather-icons'
export default {
name: 'CopyInput',
props: ['size', 'value'],
components: {
CheckIcon,
LinkIcon,
},
data() {
return {
isCopiedLink: false,
@@ -40,8 +47,10 @@
</script>
<style lang="scss" scoped>
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
@import "@assets/vue-file-manager/_inapp-forms.scss";
@import "@assets/vue-file-manager/_forms.scss";
// Single page
.copy-input {
@@ -52,7 +61,6 @@
.icon {
padding: 8px 10px;
@include font-size(11);
}
}
@@ -81,9 +89,6 @@
.copy-input {
input {
color: $dark_mode_text_primary;
&:disabled {
}
}
}
}
resources/js/components/Others/Forms/SelectInput.vue
+25 -9
View File
@@ -7,7 +7,8 @@
<!--If is selected-->
<div class="selected" v-if="selected">
<div class="option-icon" v-if="selected.icon">
<FontAwesomeIcon :icon="selected.icon" />
<user-icon v-if="selected.icon === 'user'" size="14"></user-icon>
<edit2-icon v-if="selected.icon === 'user-edit'" size="14"></edit2-icon>
</div>
<span class="option-value">{{ selected.label }}</span>
</div>
@@ -17,7 +18,7 @@
<span class="option-value placehoder">{{ placeholder }}</span>
</div>
<FontAwesomeIcon icon="chevron-down" class="chevron"/>
<chevron-down-icon size="19" class="chevron"></chevron-down-icon>
</div>
<!--Options-->
@@ -25,7 +26,8 @@
<ul class="input-options" v-if="isOpen">
<li class="option-item" @click="selectOption(option)" v-for="(option, i) in options" :key="i">
<div class="option-icon" v-if="option.icon">
<FontAwesomeIcon :icon="option.icon" />
<user-icon v-if="option.icon === 'user'" size="14"></user-icon>
<edit2-icon v-if="option.icon === 'user-edit'" size="14"></edit2-icon>
</div>
<span class="option-value">{{ option.label }}</span>
</li>
@@ -35,9 +37,16 @@
</template>
<script>
import { ChevronDownIcon, Edit2Icon, UserIcon } from 'vue-feather-icons'
export default {
name:'SelectInput',
props: ['options', 'isError', 'default', 'placeholder'],
components: {
Edit2Icon,
UserIcon,
ChevronDownIcon
},
data() {
return {
selected: undefined,
@@ -69,7 +78,8 @@
</script>
<style lang="scss" scoped>
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.select {
position: relative;
@@ -77,7 +87,7 @@
}
.input-options {
background: $light_background;
background: $light_mode_input_background;
border-radius: 8px;
position: absolute;
overflow: hidden;
@@ -105,7 +115,7 @@
.input-area {
justify-content: space-between;
background: $light_background;
background: $light_mode_input_background;
border: 1px solid transparent;
@include transition(150ms);
align-items: center;
@@ -138,16 +148,22 @@
.option-icon {
width: 20px;
display: inline-block;
@include font-size(12);
@include font-size(10);
svg {
margin-top: -4px;
vertical-align: middle;
}
}
.option-value {
@include font-size(15);
@include font-size(14);
font-weight: 700;
width: 100%;
vertical-align: middle;
&.placehoder {
color: $light_text;
color: rgba($text, 0.5);
}
}
resources/js/components/Others/Forms/SwitchInput.vue
+2 -1
View File
@@ -39,7 +39,8 @@
</script>
<style lang="scss" scoped>
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.input-wrapper {
display: flex;
resources/js/components/Others/MobileNavigation.vue
+177
View File
@@ -0,0 +1,177 @@
<template>
<div class="mobile-main-navigation">
<transition name="context-menu">
<nav v-if="isVisible" class="mobile-navigation">
<!--User Info-->
<div class="user-info">
<UserAvatar size="large" />
<UserHeadline/>
</div>
<!--Navigation-->
<MenuItemList :navigation="navigation" @menu="action" />
</nav>
</transition>
<transition name="fade">
<div v-show="isVisible" class="vignette" @click="closeAndResetContextMenu"></div>
</transition>
</div>
</template>
<script>
import UserHeadline from '@/components/Sidebar/UserHeadline'
import MenuItemList from '@/components/Mobile/MenuItemList'
import UserAvatar from '@/components/Others/UserAvatar'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name: 'MenuBar',
components: {
MenuItemList,
UserHeadline,
UserAvatar,
},
computed: {
...mapGetters(['app', 'homeDirectory']),
},
data() {
return {
isVisible: false,
navigation: [
{
icon: 'hard-drive',
title: 'Files',
routeName: 'Files',
},
{
icon: 'latest',
title: 'Recent Uploads',
routeName: 'Files',
},
{
icon: 'share',
title: 'Shared Files',
routeName: 'SharedFiles',
},
{
icon: 'trash',
title: 'Trash',
routeName: 'Trash',
},
{
icon: 'settings',
title: 'Settings',
routeName: 'MobileSettings',
},
{
icon: 'power',
title: 'Log Out',
routeName: 'LogOut',
},
]
}
},
methods: {
action(name) {
if (name === 'latest') {
this.$store.dispatch('getLatest')
}
if (name === 'hard-drive') {
this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
}
this.closeAndResetContextMenu()
},
closeAndResetContextMenu() {
this.isVisible = false
events.$emit('hide:mobile-navigation')
}
},
created() {
events.$on('show:mobile-navigation', () => {
this.isVisible = true
})
}
}
</script>
<style scoped lang="scss">
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.mobile-navigation {
padding: 20px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
background: white;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
min-height: 440px;
max-height: 80%;
overflow-y: auto;
}
.vignette {
background: rgba(0, 0, 0, 0.35);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9;
cursor: pointer;
opacity: 1;
}
.user-info {
display: flex;
align-items: center;
margin-bottom: 10px;
}
@media only screen and (max-width: 690px) {
}
@media (prefers-color-scheme: dark) {
.mobile-navigation {
background: $dark_mode_background;
}
}
// Transition
.context-menu-enter-active,
.fade-enter-active {
transition: all 200ms;
}
.context-menu-leave-active,
.fade-leave-active {
transition: all 200ms;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.context-menu-enter,
.context-menu-leave-to {
opacity: 0;
transform: translateY(100%);
}
.context-menu-leave-active {
position: absolute;
}
</style>
resources/js/components/Others/MoveItem.vue
+1 -2
View File
@@ -1,7 +1,7 @@
<template>
<PopupWrapper name="move">
<!--Title-->
<PopupHeader :title="$t('popup_move_item.title')" />
<PopupHeader :title="$t('popup_move_item.title')" icon="move" />
<!--Content-->
<PopupContent type="height-limited" v-if="pickedItem">
@@ -123,7 +123,6 @@
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
.item-thumbnail {
margin-bottom: 20px;
resources/js/components/Others/PageHeader.vue
+13 -5
View File
@@ -36,19 +36,20 @@
</script>
<style lang="scss" scoped>
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.page-header {
display: flex;
align-items: center;
padding: 20px 30px;
background: white;
position: sticky;
top: 0;
z-index: 9;
max-width: 700px;
width: 100%;
margin: 20px auto 30px;
.title {
@include font-size(22);
@include font-size(18);
font-weight: 700;
color: $text;
}
@@ -64,6 +65,7 @@
.page-header {
padding: 20px 15px;
margin: 0;
.title {
@include font-size(18);
@@ -71,6 +73,12 @@
}
}
@media only screen and (max-width: 690px) {
.page-header {
display: none;
}
}
@media (prefers-color-scheme: dark) {
.page-header {
resources/js/components/Others/Popup/PopupActions.vue
+2 -1
View File
@@ -11,7 +11,8 @@
</script>
<style lang="scss" scoped>
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.actions {
padding: 20px;
resources/js/components/Others/Popup/PopupContent.vue
+2 -1
View File
@@ -14,7 +14,8 @@
</script>
<style lang="scss" scoped>
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.popup-content {
resources/js/components/Others/Popup/PopupHeader.vue
+62 -5
View File
@@ -1,26 +1,58 @@
<template>
<div class="popup-header">
<h1 class="title">{{ title }}</h1>
<div class="icon">
<corner-down-right-icon v-if="icon === 'move'" size="15" class="title-icon"></corner-down-right-icon>
<link-icon v-if="icon === 'share'" size="17" class="title-icon"></link-icon>
</div>
<div class="label">
<h1 class="title">{{ title }}</h1>
<x-icon @click="closePopup" size="22" class="close-icon"></x-icon>
</div>
</div>
</template>
<script>
import { CornerDownRightIcon, LinkIcon, XIcon } from 'vue-feather-icons'
import {events} from '@/bus'
export default {
name: 'PopupHeader',
props: [
'title'
]
'title', 'icon'
],
components: {
CornerDownRightIcon,
LinkIcon,
XIcon,
},
methods: {
closePopup() {
events.$emit('popup:close')
}
}
}
</script>
<style lang="scss" scoped>
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.popup-header {
padding: 20px;
display: flex;
align-items: center;
.icon {
margin-right: 10px;
line-height: 0;
path, line, polyline, rect, circle {
stroke: $theme;
}
}
.title {
@include font-size(18);
@include font-size(17);
font-weight: 700;
color: $text;
}
@@ -30,6 +62,27 @@
color: #8b8f9a;
margin-top: 5px;
}
.label {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
.close-icon {
padding: 1px 4px;
border-radius: 6px;
&:hover {
background: $light_background;
line {
stroke: $theme;
}
}
cursor: pointer;
}
}
}
.small {
@@ -38,6 +91,10 @@
}
}
@media only screen and (max-width: 690px) {
}
@media (prefers-color-scheme: dark) {
.popup-header {
.title {
resources/js/components/Others/Popup/PopupWrapper.vue
+12 -2
View File
@@ -1,6 +1,6 @@
<template>
<transition name="popup">
<div class="popup" @click.self="closePopup" v-show="isVisibleWrapper">
<div class="popup" @click.self="closePopup" v-if="isVisibleWrapper">
<div class="popup-wrapper">
<slot></slot>
</div>
@@ -46,7 +46,8 @@
</script>
<style lang="scss" scoped>
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.popup {
position: absolute;
@@ -129,6 +130,15 @@
}
}
@media only screen and (max-width: 690px) {
.popup-wrapper {
left: 15px;
right: 15px;
padding: 25px 15px;
}
}
@media (prefers-color-scheme: dark) {
.popup-wrapper {
background: $dark_mode_background;
resources/js/components/Others/ShareCreate.vue
+4 -4
View File
@@ -1,7 +1,7 @@
<template>
<PopupWrapper name="share-create">
<!--Title-->
<PopupHeader :title="$t('popup_share_create.title', {item: itemTypeTitle})" />
<PopupHeader :title="$t('popup_share_create.title', {item: itemTypeTitle})" icon="share" />
<!--Content-->
<PopupContent>
@@ -181,8 +181,6 @@
// Restore data
setTimeout(() => {
this.isGeneratedShared = false
this.shareLink = undefined
this.shareOptions = {
permission: undefined,
password: undefined,
@@ -190,6 +188,8 @@
type: undefined,
unique_id: undefined,
}
this.isGeneratedShared = false
this.shareLink = undefined
}, 150)
})
}
@@ -197,8 +197,8 @@
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
@import "@assets/vue-file-manager/_inapp-forms.scss";
@import '@assets/vue-file-manager/_forms';
.input-wrapper {
resources/js/components/Others/ShareEdit.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<template>
<PopupWrapper name="share-edit">
<!--Title-->
<PopupHeader :title="$t('popup_share_edit.title')" />
<PopupHeader :title="$t('popup_share_edit.title')" icon="share" />
<!--Content-->
<PopupContent v-if="pickedItem && pickedItem.shared">
@@ -243,8 +243,8 @@
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
@import "@assets/vue-file-manager/_inapp-forms.scss";
@import '@assets/vue-file-manager/_forms';
.input-wrapper {
resources/js/components/Others/TextLabel.vue
+12 -5
View File
@@ -11,17 +11,24 @@
</script>
<style lang="scss" scoped>
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.text-label {
@include font-size(10);
color: $theme;
text-transform: uppercase;
font-weight: 900;
padding-left: 25px;
@include font-size(12);
color: #AFAFAF;
font-weight: 700;
display: block;
margin-bottom: 5px;
}
@media only screen and (max-width: 1024px) {
.text-label {
padding-left: 20px;
}
}
@media (prefers-color-scheme: dark) {
.text-label {
color: $theme;
resources/js/components/Others/ThemeLabel.vue
+4 -4
View File
@@ -11,14 +11,14 @@
</script>
<style lang="scss" scoped>
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.theme-label {
@include font-size(14);
color: $theme;
text-transform: uppercase;
font-weight: 900;
font-weight: 600;
display: block;
margin-bottom: 5px;
margin-bottom: 20px;
}
</style>
resources/js/components/Others/ThumbnailItem.vue
+6 -5
View File
@@ -61,7 +61,8 @@
</script>
<style scoped lang="scss">
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.file-item {
display: flex;
@@ -104,7 +105,7 @@
.icon-item {
position: relative;
min-width: 40px;
min-width: 52px;
text-align: center;
line-height: 0;
@@ -150,8 +151,8 @@
user-select: none;
max-width: 100%;
border-radius: 5px;
width: 36px;
height: 36px;
width: 52px;
height: 52px;
}
}
}
@@ -159,7 +160,7 @@
.small {
.file-item {
padding: 0 15px;
margin-bottom: 25px;
margin-bottom: 20px;
}
}
resources/js/components/Others/TreeMenu.vue
+38 -51
View File
@@ -2,9 +2,10 @@
<!--Folder Icon-->
<div class="folder-item-wrapper">
<div class="folder-item" :class="{'is-selected': isSelected}" @click="showTree" :style="indent">
<FontAwesomeIcon class="icon-chevron" :class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}" icon="chevron-right"/>
<FontAwesomeIcon class="icon" :icon="directoryIcon"/>
<div class="folder-item" :class="{'is-selected': isSelected}" @click="getFolder" :style="indent">
<chevron-right-icon @click.stop="showTree" size="17" class="icon-arrow" :class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}"></chevron-right-icon>
<hard-drive-icon v-if="nodes.location === 'base'" size="17" class="icon"></hard-drive-icon>
<folder-icon v-if="nodes.location !== 'base'" size="17" class="icon"></folder-icon>
<span class="label">{{ nodes.name }}</span>
</div>
@@ -14,6 +15,7 @@
<script>
import TreeMenu from '@/components/Others/TreeMenu'
import {FolderIcon, ChevronRightIcon, HardDriveIcon} from 'vue-feather-icons'
import {events} from "@/bus"
export default {
@@ -22,20 +24,15 @@
'nodes', 'depth'
],
components: {
ChevronRightIcon,
HardDriveIcon,
FolderIcon,
TreeMenu,
},
computed: {
indent() {
return { paddingLeft: this.depth * 25 + 'px' }
return { paddingLeft: this.depth * 20 + 'px' }
},
directoryIcon() {
if (this.nodes.location === 'base') {
return 'hdd'
} else {
return 'folder'
}
}
},
data() {
return {
@@ -44,10 +41,12 @@
}
},
methods: {
getFolder() {
events.$emit('show-folder-item', this.nodes)
events.$emit('pick-folder', this.nodes)
},
showTree() {
this.isVisible = ! this.isVisible
events.$emit('pick-folder', this.nodes)
}
},
created() {
@@ -61,36 +60,46 @@
if (this.nodes.unique_id == node.unique_id) this.isSelected = true
})
// Select clicked folder
events.$on('show-folder-item', node => {
this.isSelected = false
if (this.nodes.unique_id == node.unique_id)
this.isSelected = true
})
}
}
</script>
<style lang="scss" scoped>
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.folder-item {
user-select: none;
display: block;
padding: 15px 20px;
padding: 8px 23px;
@include transition(150ms);
cursor: pointer;
position: relative;
white-space: nowrap;
border-bottom: 1px solid $light_mode_border;
.icon {
@include font-size(18);
line-height: 0;
width: 15px;
margin-right: 9px;
vertical-align: middle;
margin-top: -1px;
path {
fill: $text;
path, line, polyline, rect, circle {
@include transition(150ms);
}
}
.icon-chevron {
.icon-arrow {
@include transition(300ms);
@include font-size(13);
margin-right: 9px;
margin-right: 4px;
vertical-align: middle;
opacity: 0;
@@ -101,14 +110,11 @@
&.is-opened {
@include transform(rotate(90deg));
}
path {
fill: rgba($text, 0.25);
}
}
.label {
@include font-size(15);
@include transition(150ms);
@include font-size(13);
font-weight: 700;
vertical-align: middle;
white-space: nowrap;
@@ -118,16 +124,12 @@
color: $text;
}
&:hover {
background: $light_background;
}
&:hover,
&.is-selected {
background: rgba($theme, .1);
.icon {
path {
fill: $theme;
path, line, polyline, rect, circle {
stroke: $theme;
}
}
@@ -141,33 +143,18 @@
@media (prefers-color-scheme: dark) {
.folder-item {
border-bottom: 1px solid $dark_mode_border_color;
.label {
color: $dark_mode_text_primary;
}
&:hover {
background: $dark_mode_foreground;
background: rgba($theme, .1);
}
&.is-selected {
background: rgba($theme, .1);
}
.icon {
path {
fill: lighten($dark_mode_foreground, 10%);
}
}
.icon-chevron {
path {
fill: $theme;
}
}
}
&.is-selected {
resources/js/components/Others/TreeMenuNavigator.vue
+182
View File
@@ -0,0 +1,182 @@
<template>
<transition name="folder">
<div class="folder-item-wrapper">
<div class="folder-item" :class="{'is-selected': isSelected}" :style="indent" @click="getFolder">
<chevron-right-icon @click.stop="showTree" size="17" class="icon-arrow"
:class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}"></chevron-right-icon>
<folder-icon size="17" class="icon"></folder-icon>
<span class="label">{{ nodes.name }}</span>
</div>
<TreeMenuNavigator :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders"
:key="item.unique_id"/>
</div>
</transition>
</template>
<script>
import TreeMenuNavigator from '@/components/Others/TreeMenuNavigator'
import {FolderIcon, ChevronRightIcon} from 'vue-feather-icons'
import {events} from "@/bus"
export default {
name: 'TreeMenuNavigator',
props: [
'nodes', 'depth'
],
components: {
TreeMenuNavigator,
ChevronRightIcon,
FolderIcon,
},
computed: {
indent() {
let offset = window.innerWidth <= 1024 ? 17 : 22;
let value = this.depth == 0 ? offset : offset + (this.depth * 20);
return {paddingLeft: value + 'px'}
},
},
data() {
return {
isVisible: false,
isSelected: false,
}
},
methods: {
getFolder() {
events.$emit('show-folder', this.nodes)
// Get folder content
this.$store.dispatch('getFolder', [{folder: this.nodes, back: false, init: false}])
},
showTree() {
this.isVisible = !this.isVisible
}
},
created() {
// Select clicked folder
events.$on('show-folder', node => {
this.isSelected = false
if (this.nodes.unique_id == node.unique_id)
this.isSelected = true
})
}
}
</script>
<style lang="scss" scoped>
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.folder-item {
display: block;
padding: 8px 0;
@include transition(150ms);
cursor: pointer;
position: relative;
white-space: nowrap;
width: 100%;
.icon {
line-height: 0;
width: 15px;
margin-right: 9px;
vertical-align: middle;
margin-top: -1px;
path, line, polyline, rect, circle {
@include transition(150ms);
}
}
.icon-arrow {
@include transition(300ms);
margin-right: 4px;
vertical-align: middle;
opacity: 0;
&.is-visible {
opacity: 1;
}
&.is-opened {
@include transform(rotate(90deg));
}
}
.label {
@include transition(150ms);
@include font-size(13);
font-weight: 700;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
color: $text;
max-width: 130px;
}
&:hover,
&.is-selected {
.icon {
path, line, polyline, rect, circle {
stroke: $theme;
}
}
.label {
color: $theme;
}
}
}
@media only screen and (max-width: 1024px) {
.folder-item {
padding: 8px 0;
}
}
// Dark mode
@media (prefers-color-scheme: dark) {
.folder-item {
.label {
color: $dark_mode_text_primary;
}
&:hover {
background: rgba($theme, .1);
}
&.is-selected {
background: rgba($theme, .1);
}
}
&.is-selected {
background: rgba($theme, .1);
}
}
@media (prefers-color-scheme: dark) and (max-width: 690px) {
.folder-item {
&:hover,
&.is-selected {
background: rgba($theme, .1);
}
}
}
</style>
resources/js/components/Others/UserAvatar.vue
+47
View File
@@ -0,0 +1,47 @@
<template>
<div class="user-avatar" :class="size">
<img :src="app.user.avatar" :alt="app.user.name">
</div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
name: 'UserAvatar',
props: [
'size'
],
computed: {
...mapGetters(['app']),
},
}
</script>
<style lang="scss" scoped>
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.user-avatar {
line-height: 0;
img {
border-radius: 6px;
width: 40px;
height: 40px;
}
&.large {
img {
border-radius: 9px;
width: 52px;
height: 52px;
}
}
}
@media (prefers-color-scheme: dark) {
}
</style>
resources/js/components/Others/UserImageInput.vue
+4 -5
View File
@@ -60,7 +60,8 @@
</script>
<style lang="scss" scoped>
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.dropzone {
position: relative;
@@ -79,12 +80,10 @@
}
.image-preview {
width: 75px;
height: 75px;
width: 56px;
height: 56px;
object-fit: cover;
border-radius: 8px;
border: 1px dashed $theme;
padding: 2px;
}
}
</style>
resources/js/components/Others/Vignette.vue
+2 -1
View File
@@ -34,7 +34,8 @@
</script>
<style lang="scss" scoped>
@import "@assets/app.scss";
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.vignette {
position: absolute;