MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(ui): user profile pic

This commit is contained in:
ArneBo 2025-01-05 15:48:44 +01:00 committed by upsiflu
parent 6a4aaada5c
commit 5ad37d30c6
2 changed files with 57 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
front/src/ui/components/UserMenu.vue
View File

@ -58,6 +58,7 @@ const labels = computed(() => ({
v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.medium_square_crop"
alt=""
:src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.medium_square_crop)"
class="avatar"
>
<i v-else class="bi bi-gear-fill" />
</Button>
@ -157,6 +158,11 @@ const labels = computed(() => ({
<style scoped lang="scss">
header > nav button.button {
padding: 10px;
&:has(img) {
padding: 4px;
height: 40px;
}
}
nav.button-list {
width: 100%;
@ -165,4 +171,9 @@ nav.button-list {
border: none;
}
}
.avatar {
width: 30px;
height: 30px;
border-radius: 50%;
}
</style>

53
front/src/views/auth/ProfileBase.vue
View File

@ -81,9 +81,17 @@ watch(props, fetchData, { immediate: true })
class="page-profile"
>
<Layout flex>
<i
v-if="!object?.icon"
class="avatar icon"
>
<!-- TODO: Get User Initials -->
TU
</i>
<img
src="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
alt="{{ displayName }}"
v-else
v-lazy="store.getters['instance/absoluteUrl'](object.icon.urls.medium_square_crop)"
alt=""
class="avatar"
/>
<!-- <div class="ui five wide column">
@ -204,18 +212,38 @@ watch(props, fetchData, { immediate: true })
<span>{{ object?.full_username }}<i class="bi bi-copy" style="margin-left: 8px;"/></span>
<rendered-description
:content="object?.summary"
:field-name="'info'"
:field-name="'summary'"
:update-url="`users/${store.state.auth.username}/`"
:can-update="store.state.auth.authenticated && object?.full_username === store.state.auth.fullUsername"
@updated="emit('updated', $event)"
/>
</Layout>
</Layout>
<!-- TODO: Make routerlinks work for tabs -->
<Tabs>
<Tab title="Overview">{{ t('views.auth.ProfileBase.link.overview') }}</Tab>
<Tab title="Collections">{{ t('views.auth.ProfileBase.link.collections') }}</Tab>
<Tab title="Channels">{{ t('views.auth.ProfileBase.link.channels') }}</Tab>
<Tab title="Activity">{{ t('views.auth.ProfileBase.link.activity') }}</Tab>
<Tab title="Overview" :to="{name: 'profile.overview', params: routerParams}">
{{ t('views.auth.ProfileBase.link.overview') }}
<router-view
:object="object"
@updated="fetchData"
/>
</Tab>
<Tab title="Collections">
{{ t('views.auth.ProfileBase.link.collections') }}
</Tab>
<Tab title="Channels">
{{ t('views.auth.ProfileBase.link.channels') }}
</Tab>
<Tab title="Activity" :to="{name: 'profile.activity', params: routerParams}">
{{ t('views.auth.ProfileBase.link.activity') }}
<router-view
:object="object"
@updated="fetchData"
/>
</Tab>
</Tabs>
</Layout>
</template>
@ -227,6 +255,17 @@ watch(props, fetchData, { immediate: true })
border-radius: 50%;
}
i.avatar {
font-size: 100px;
font-style: normal;
font-weight: 800;
padding: 26px 0px 0px 26px;
background-color: var(--fw-gray-500);
border-radius: 50%;
width: 176px;
height: 176px;
}
h1 {
font-size: 48px;
margin-bottom: 8px;