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

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
resources/js/views/Admin/Users/User.vue
+25 -73
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>
resources/js/views/Admin/Users/UserTabs/UserDetail.vue
+10 -10
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>
resources/js/views/FileView/Files.vue
+1 -1
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>
resources/js/views/Profile.vue
+7 -7
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,