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

UI improvements part 3

Browse Source
This commit is contained in:
Čarodej
2022-01-27 17:04:12 +01:00
parent d855739bf2
commit f74bb7cec5
12 changed files with 223 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/App.vue
View File

@@ -34,7 +34,7 @@ import {mapGetters} from 'vuex'
import {events} from './bus'
export default {
name: 'app',
name: 'App',
components: {
CookieDisclaimer,
ToasterWrapper,

2
resources/js/components/FilesView/InfoSidebar.vue
View File

@@ -61,7 +61,7 @@
v-if="singleFile.data.attributes.isTeamFolder"
:title="$t('Shared with the Team')"
>
<div class="action-button" @click="$updateTeamFolder(singleFile)">
<div class="flex items-center cursor-pointer" @click="$updateTeamFolder(singleFile)">
<TeamMembersPreview :folder="singleFile" :avatar-size="32" />
<Edit2Icon size="10" class="ml-2" />
</div>

62
resources/js/components/Others/Forms/AvatarInput.vue Normal file
View File

@@ -0,0 +1,62 @@
<template>
<div class="relative cursor-pointer">
<input
ref="file"
type="file"
@change="showImagePreview($event)"
class="absolute opacity-0 top-0 bottom-0 left-0 right-0 w-full z-10 cursor-pointer"
/>
<img
v-if="imagePreview"
ref="image"
:src="imagePreview"
class="md:w-16 w-14 md:h-16 h-14 object-cover rounded-xl relative z-0 shadow-lg cursor-pointer"
alt="avatar"
/>
</div>
</template>
<script>
export default {
name: 'AvatarInput',
props: [
'avatar',
],
data() {
return {
imagePreview: undefined
}
},
watch: {
imagePreview(val) {
this.$store.commit('UPDATE_AVATAR', val)
}
},
methods: {
showImagePreview(event) {
let imgPath = event.target.files[0].name,
extension = imgPath
.substring(imgPath.lastIndexOf('.') + 1)
.toLowerCase()
if (['png', 'jpg', 'jpeg'].includes(extension)) {
let file = event.target.files[0],
reader = new FileReader()
reader.onload = () => (this.imagePreview = reader.result)
reader.readAsDataURL(file)
// Update user avatar
this.$updateImage('/user/settings', 'avatar', event.target.files[0])
} else {
alert(this.$t('validation_errors.wrong_image'))
}
}
},
created() {
// If there is default image then load
if (this.avatar) this.imagePreview = this.avatar
}
}
</script>

1
resources/js/components/Others/ShareEditPopup.vue
View File

@@ -350,6 +350,7 @@
this.shareOptions = undefined
this.pickedItem = undefined
this.activeSection = undefined
this.qrCode = undefined
}, 150)
})
}

101
resources/js/components/Others/UserImageInput.vue
View File

@@ -1,101 +0,0 @@
<template>
<div class="dropzone" :class="{ 'is-error': error }">
<input
ref="file"
type="file"
@change="showImagePreview($event)"
:name="name"
class="dummy"
/>
<img
ref="image"
:src="imagePreview"
class="image-preview"
v-if="imagePreview"
/>
<img
ref="image"
:src="imagePreview"
class="image-preview blurred"
v-if="imagePreview"
/>
</div>
</template>
<script>
export default {
props: ['label', 'name', 'avatar', 'info', 'error'],
data() {
return {
imagePreview: undefined
}
},
watch: {
imagePreview(val) {
this.$store.commit('UPDATE_AVATAR', val)
}
},
methods: {
showImagePreview(event) {
const imgPath = event.target.files[0].name,
extn = imgPath
.substring(imgPath.lastIndexOf('.') + 1)
.toLowerCase()
if (['png', 'jpg', 'jpeg'].includes(extn)) {
const file = event.target.files[0],
reader = new FileReader()
reader.onload = () => (this.imagePreview = reader.result)
reader.readAsDataURL(file)
// Update user avatar
this.$updateImage('/user/settings', 'avatar', event.target.files[0])
} else {
alert( this.$t('validation_errors.wrong_image') )
}
}
},
created() {
// If has default image then load
if (this.avatar) this.imagePreview = this.avatar
}
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.dropzone {
position: relative;
line-height: 0;
input[type='file'] {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
width: 100%;
cursor: pointer;
}
.image-preview {
width: 62px;
height: 62px;
object-fit: cover;
border-radius: 8px;
z-index: 1;
position: relative;
}
.blurred {
@include blurred-image;
}
}
</style>

5
resources/js/components/Spotlight/Spotlight.vue
View File

@@ -128,6 +128,7 @@
v-if="activeFilter === 'users' && !result.action"
:class="{'dark:bg-4x-dark-foreground bg-light-background rounded-xl': (i + actions.length) === index}"
class="flex items-center px-2.5 py-3.5"
@click="openUser(result)"
>
<MemberAvatar
:is-border="false"
@@ -733,7 +734,9 @@ export default {
this.isVisible = true
this.activeFilter = filter
this.$nextTick(() => this.$refs.searchInput.focus())
this.$nextTick(() => {
if (this.$refs.searchInput) this.$refs.searchInput.focus()
})
})
events.$on('spotlight:hide', () => this.exitSpotlight())

98
resources/js/views/Admin/Users/User.vue
View File

@@ -3,19 +3,29 @@
<div id="page-content" v-if="! isLoading">
<!--Page Tab links-->
<div class="card shadow-card pt-4 sticky top-0 z-10" style="padding-bottom: 0;">
<div class="user-thumbnail">
<div class="avatar">
<img :src="user.data.relationships.settings.data.attributes.avatar.sm" :alt="user.data.relationships.settings.data.attributes.name">
<!--<img :src="user.data.attributes.avatar" :alt="user.data.attributes.name" class="blurred">-->
</div>
<div class="info">
<b class="name">
{{ user.data.relationships.settings.data.attributes.name }}
<!--User thumbnail-->
<div class="flex items-center mb-3">
<!--Image input for replace avatar-->
<img
:src="user.data.relationships.settings.data.attributes.avatar.sm" :alt="user.data.relationships.settings.data.attributes.name"
class="md:w-16 w-14 md:h-16 h-14 object-cover rounded-xl relative z-0 shadow-lg cursor-pointer"
/>
<!--User name & email-->
<div class="ml-4">
<b class="sm:text-lg text-md font-bold block">
{{ user.data.relationships.settings.data.attributes.first_name }} {{ user.data.relationships.settings.data.attributes.last_name }}
<ColorLabel color="purple">
{{ user.data.attributes.role }}
</ColorLabel>
</b>
<span class="email">{{ user.data.attributes.email }}</span>
<small class="sm:text-sm text-xs text-gray-600 block">
{{ user.data.attributes.email }}
</small>
</div>
</div>
@@ -26,7 +36,7 @@
<router-view :user="user" @reload-user="fetchUser"/>
</div>
<div id="loader" v-if="isLoading">
<Spinner></Spinner>
<Spinner />
</div>
</div>
</template>
@@ -59,6 +69,11 @@
LockIcon,
Spinner,
},
watch: {
'$route.fullPath': function() {
this.fetchUser()
}
},
computed: {
...mapGetters([
'config'
@@ -134,66 +149,3 @@
}
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.user-thumbnail {
display: flex;
align-items: center;
cursor: pointer;
padding-bottom: 10px;
padding-top: 15px;
.avatar {
margin-right: 20px;
position: relative;
img {
line-height: 0;
width: 62px;
height: 62px;
border-radius: 12px;
z-index: 1;
position: relative;
&.blurred {
@include blurred-image;
top: 0;
}
}
}
.info {
.name {
display: block;
@include font-size(17);
line-height: 1;
}
.email {
color: $text-muted;
@include font-size(14);
}
}
}
@media only screen and (max-width: 960px) {
}
.dark {
.user-thumbnail {
.info {
.email {
color: $dark_mode_text_secondary;
}
}
}
}
</style>

20
resources/js/views/Admin/Users/UserTabs/UserDetail.vue
View File

@@ -31,7 +31,7 @@
:value="user.data.relationships.settings.data.attributes.first_name"
:placeholder="$t('page_registration.placeholder_name')"
type="text"
class="focus-border-theme input-dark"
class="disabled:text-gray-900 disabled:opacity-100 focus-border-theme input-dark"
/>
</AppInputText>
<AppInputText :title="$t('Last Name')" class="w-full">
@@ -40,7 +40,7 @@
:value="user.data.relationships.settings.data.attributes.last_name"
:placeholder="$t('page_registration.placeholder_name')"
type="text"
class="focus-border-theme input-dark"
class="disabled:text-gray-900 disabled:opacity-100 focus-border-theme input-dark"
/>
</AppInputText>
</div>
@@ -49,7 +49,7 @@
<input :value="user.data.relationships.settings.data.attributes.name"
:placeholder="$t('page_registration.placeholder_name')"
type="text"
class="focus-border-theme input-dark"
class="disabled:text-gray-900 disabled:opacity-100 focus-border-theme input-dark"
disabled
/>
</AppInputText>
@@ -59,7 +59,7 @@
<AppInputText :title="$t('user_settings.name')">
<input :value="user.data.relationships.settings.data.attributes.name"
type="text"
class="focus-border-theme input-dark"
class="disabled:text-gray-900 disabled:opacity-100 focus-border-theme input-dark"
disabled
/>
</AppInputText>
@@ -67,14 +67,14 @@
<input :value="user.data.relationships.settings.data.attributes.address"
type="text"
disabled
class="focus-border-theme input-dark"
class="disabled:text-gray-900 disabled:opacity-100 focus-border-theme input-dark"
/>
</AppInputText>
<AppInputText :title="$t('user_settings.country')">
<input :value="user.data.relationships.settings.data.attributes.country"
type="text"
disabled
class="focus-border-theme input-dark"
class="disabled:text-gray-900 disabled:opacity-100 focus-border-theme input-dark"
/>
</AppInputText>
<div class="flex space-x-4">
@@ -82,14 +82,14 @@
<input :value="user.data.relationships.settings.data.attributes.city"
type="text"
disabled
class="focus-border-theme input-dark"
class="disabled:text-gray-900 disabled:opacity-100 focus-border-theme input-dark"
/>
</AppInputText>
<AppInputText :title="$t('user_settings.postal_code')" class="w-full">
<input :value="user.data.relationships.settings.data.attributes.postal_code"
type="text"
disabled
class="focus-border-theme input-dark"
class="disabled:text-gray-900 disabled:opacity-100 focus-border-theme input-dark"
/>
</AppInputText>
</div>
@@ -97,14 +97,14 @@
<input :value="user.data.relationships.settings.data.attributes.state"
type="text"
disabled
class="focus-border-theme input-dark"
class="disabled:text-gray-900 disabled:opacity-100 focus-border-theme input-dark"
/>
</AppInputText>
<AppInputText :title="$t('user_settings.phone_number')" :is-last="true">
<input :value="user.data.relationships.settings.data.attributes.phone_number"
type="text"
disabled
class="focus-border-theme input-dark"
class="disabled:text-gray-900 disabled:opacity-100 focus-border-theme input-dark"
/>
</AppInputText>
</div>

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

@@ -208,8 +208,8 @@
this.$store.dispatch('getFolder', this.$route.params.id)
events.$on('context-menu:show', (event, item) => this.item = item)
events.$on('mobile-context-menu:show', item => this.item = item)
events.$on('context-menu:current-folder', folder => this.item = folder)
events.$on('mobile-context-menu:show', item => this.item = item)
}
}
</script>

14
resources/js/views/Profile.vue
View File

@@ -35,20 +35,20 @@
<div class="flex items-center mb-3">
<!--Image input for replace avatar-->
<UserImageInput v-model="avatar" :avatar="user.data.relationships.settings.data.attributes.avatar.md" />
<AvatarInput v-model="avatar" :avatar="user.data.relationships.settings.data.attributes.avatar.md" />
<!--User name & email-->
<div class="pl-4">
<b class="sm:text-lg text-md font-bold block sm:leading-6 leading-3">
<div class="ml-4">
<b class="sm:text-lg text-md font-bold block">
{{ user.data.relationships.settings.data.attributes.first_name }} {{ user.data.relationships.settings.data.attributes.last_name }}
<ColorLabel v-if="config.subscriptionType === 'fixed'" :color="subscriptionColor">
{{ subscriptionStatus }}
</ColorLabel>
</b>
<span class="sm:text-sm text-xs text-gray-600">
<small class="sm:text-sm text-xs text-gray-600 block">
{{ user.data.attributes.email }}
</span>
</small>
</div>
</div>
@@ -75,7 +75,7 @@
import TwoFactorRecoveryCodesPopup from '/resources/js/components/Others/TwoFactorRecoveryCodesPopup'
import CreatePersonalTokenPopup from '/resources/js/components/Others/CreatePersonalTokenPopup'
import TwoFactorQrSetupPopup from '/resources/js/components/Others/TwoFactorQrSetupPopup'
import UserImageInput from '/resources/js/components/Others/UserImageInput'
import AvatarInput from '/resources/js/components/Others/Forms/AvatarInput'
import SidebarNavigation from "../components/Sidebar/SidebarNavigation"
import ColorLabel from '/resources/js/components/Others/ColorLabel'
import Spinner from '/resources/js/components/FilesView/Spinner'
@@ -100,7 +100,7 @@
CreatePersonalTokenPopup,
TwoFactorQrSetupPopup,
SidebarNavigation,
UserImageInput,
AvatarInput,
ColorLabel,
Spinner,