364 lines
7.3 KiB
Vue
364 lines
7.3 KiB
Vue
<script setup>
|
|
import { formatDistanceStrict } from 'date-fns';
|
|
import { inject, ref } from 'vue';
|
|
|
|
import mockupRelease from '#/assets/mockup-release.ts';
|
|
import Alerts from '#/components/alerts/alerts.vue';
|
|
import Revisions from '#/components/edit/revisions.vue';
|
|
import Summaries from '#/components/scenes/summaries.vue';
|
|
// filters are implemented as generic settings panel in case we want to extend it in the future
|
|
import Settings from '#/components/settings/settings.vue';
|
|
import Stashes from '#/components/stashes/stashes.vue';
|
|
import Account from '#/components/user/account.vue';
|
|
import ApiKeys from '#/components/user/api-keys.vue';
|
|
import Preferences from '#/components/user/preferences.vue';
|
|
|
|
const pageContext = inject('pageContext');
|
|
|
|
const section = pageContext.routeParams.section;
|
|
const domain = pageContext.routeParams.domain;
|
|
|
|
const user = pageContext.user;
|
|
const profile = ref(pageContext.pageProps.profile);
|
|
const primaryStash = pageContext.assets.primaryStash;
|
|
|
|
const showFilters = ref(false);
|
|
|
|
function scrollHorizontal(event) {
|
|
event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page">
|
|
<div class="profile">
|
|
<div class="profile-header">
|
|
<a
|
|
:href="`/user/${profile.username}/`"
|
|
:title="`#${profile.id}`"
|
|
class="user nolink"
|
|
>
|
|
<Icon
|
|
v-if="section && profile.id === user?.id"
|
|
icon="arrow-left3"
|
|
class="profile-back"
|
|
/>
|
|
|
|
<img
|
|
v-else-if="profile.avatar"
|
|
:src="profile.avatar"
|
|
class="avatar"
|
|
>
|
|
|
|
<h2 class="username ellipsis">{{ profile.username }}</h2>
|
|
</a>
|
|
|
|
<strong
|
|
v-if="section && profile.id === user?.id"
|
|
class="profile-crumb"
|
|
>
|
|
<template v-if="domain">{{ domain }}</template>
|
|
{{ section }}
|
|
</strong>
|
|
|
|
<span
|
|
v-else
|
|
class="age"
|
|
>{{ formatDistanceStrict(Date.now(), profile.createdAt) }}</span>
|
|
</div>
|
|
|
|
<nav
|
|
v-if="!section && profile.id === user?.id"
|
|
class="domains nobar"
|
|
@wheel.prevent="scrollHorizontal"
|
|
>
|
|
<a
|
|
v-if="primaryStash"
|
|
:href="`/stash/${user.username}/${primaryStash.slug}`"
|
|
class="domain nolink"
|
|
><Icon :icon="primaryStash.slug === 'favorites' ? 'heart7' : 'folder-heart'" />{{ primaryStash.name }}</a>
|
|
|
|
<a
|
|
:href="`/user/${profile.username}/stashes`"
|
|
class="domain nolink"
|
|
:class="{ active: section === 'stashes' }"
|
|
><Icon icon="folder-heart" />Stashes</a>
|
|
|
|
<a
|
|
:href="`/user/${profile.username}/alerts`"
|
|
class="domain nolink"
|
|
:class="{ active: section === 'alerts' }"
|
|
><Icon icon="alarm" />Alerts</a>
|
|
|
|
<a
|
|
:href="`/user/${profile.username}/templates`"
|
|
class="domain nolink"
|
|
:class="{ active: section === 'templates' }"
|
|
><Icon icon="paste3" />Templates</a>
|
|
|
|
<a
|
|
:href="`/user/${profile.username}/revisions/scenes`"
|
|
class="domain nolink"
|
|
:class="{ active: section === 'revisions' && domain === 'scenes' }"
|
|
><Icon icon="file-video2" />Scene Revisions</a>
|
|
|
|
<a
|
|
:href="`/user/${profile.username}/revisions/actors`"
|
|
class="domain nolink"
|
|
:class="{ active: section === 'revisions' && domain === 'actors' }"
|
|
><Icon icon="profile" />Actor Revisions</a>
|
|
|
|
<span
|
|
:href="`/user/${profile.username}/preferences`"
|
|
class="domain nolink"
|
|
:class="{ active: section === 'filters' }"
|
|
@click="showFilters = true"
|
|
><Icon icon="filter" />Filters</span>
|
|
|
|
<a
|
|
v-if="profile.isIdentityVerified"
|
|
:href="`/user/${profile.username}/api`"
|
|
class="domain nolink"
|
|
:class="{ active: section === 'api' }"
|
|
><Icon icon="key" />API Keys</a>
|
|
|
|
<a
|
|
:href="`/user/${profile.username}/preferences`"
|
|
class="domain nolink"
|
|
:class="{ active: section === 'preferences' }"
|
|
><Icon icon="equalizer" />Preferences</a>
|
|
|
|
<a
|
|
:href="`/user/${profile.username}/account`"
|
|
class="domain nolink"
|
|
:class="{ active: section === 'account' }"
|
|
><Icon icon="user-tie" />Account</a>
|
|
</nav>
|
|
|
|
<Stashes v-if="section === 'stashes'" />
|
|
<Alerts v-if="section === 'alerts' && profile.id === user?.id" />
|
|
|
|
<Summaries
|
|
v-if="section === 'templates' && profile.id === user?.id"
|
|
:release="mockupRelease"
|
|
/>
|
|
|
|
<ApiKeys v-if="section === 'api'" />
|
|
<Preferences v-if="section === 'preferences'" />
|
|
<Account v-if="section === 'account'" />
|
|
</div>
|
|
|
|
<div
|
|
v-if="section === 'revisions' && profile.id === user?.id"
|
|
class="profile-section revisions"
|
|
>
|
|
<Revisions context="user" />
|
|
</div>
|
|
|
|
<Settings
|
|
v-if="showFilters"
|
|
@close="showFilters = false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.profile-section {
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: .5rem 1rem;
|
|
text-transform: capitalize;
|
|
|
|
.button {
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
|
|
.heading {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
|
|
@media(--small-20) {
|
|
.profile-section .section-header {
|
|
padding: .5rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex-grow: 1;
|
|
background: var(--background-base-10);
|
|
}
|
|
|
|
.profile {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
width: 1200px;
|
|
max-width: 100%;
|
|
margin: 0 .5rem;
|
|
}
|
|
|
|
.profile-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: .5rem 1rem;
|
|
color: var(--highlight-strong-30);
|
|
background: var(--shadow-strong-30);
|
|
border-radius: 0 0 .5rem .5rem;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.user {
|
|
display: flex;
|
|
overflow: hidden;
|
|
|
|
&:hover .profile-back {
|
|
fill: var(--primary);
|
|
}
|
|
}
|
|
|
|
.username {
|
|
margin: 0;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.age {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
font-size: .9rem;
|
|
|
|
.icon {
|
|
width: .9rem;
|
|
fill: var(--highlight-strong-20);
|
|
margin-right: .75rem;
|
|
transform: translateY(-1px);
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
border-radius: .25rem;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.profile-back {
|
|
padding: .25rem 1.25rem .25rem .25rem;
|
|
fill: var(--highlight);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.profile-crumb {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.domains {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
|
|
gap: .5rem;
|
|
box-sizing: border-box;
|
|
padding: .5rem 0;
|
|
margin-top: .5rem;
|
|
}
|
|
|
|
.domain {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
flex-shrink: 0;
|
|
color: var(--glass-strong-20);
|
|
background: var(--background-dark-20);
|
|
padding: 1.25rem 2rem;
|
|
border-radius: 1rem;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
|
|
.icon {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
transform: translateY(-1px);
|
|
fill: var(--glass-strong-20);
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--primary);
|
|
color: var(--text-light);
|
|
cursor: pointer;
|
|
|
|
.icon {
|
|
fill: var(--text-light);
|
|
}
|
|
}
|
|
}
|
|
|
|
.revisions {
|
|
width: 100%; /* necessary for FF */
|
|
box-sizing: border-box;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.revisions-nav {
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
|
|
@media(--compact) {
|
|
.domains {
|
|
padding: .5rem 1rem;
|
|
grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
|
|
}
|
|
|
|
.profile {
|
|
margin: 0;
|
|
}
|
|
|
|
.profile-header {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
@media(--small) {
|
|
.domains {
|
|
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
|
|
}
|
|
}
|
|
|
|
@media(--small-20) {
|
|
.profile-header {
|
|
padding: .5rem;
|
|
}
|
|
|
|
.domains {
|
|
padding: .5rem .5rem;
|
|
}
|
|
|
|
.age .icon {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media(--small-30) {
|
|
.age .icon {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media(--small-50) {
|
|
.age {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|