138 lines
8.2 KiB
Vue
138 lines
8.2 KiB
Vue
<script setup lang="ts">
|
|
import useState from '~/hooks/useState'
|
|
const { t } = useI18n()
|
|
|
|
const profile = ref({
|
|
username: 'jesusperez',
|
|
fullname: 'Jesús Pérez Lorenzo',
|
|
bgcolors: ['bg-emerald-500', 'bg-purple-500', 'bg-yellow-500', 'bg-gray-800', 'bg-pink-500'],
|
|
bgcolor: 'bg-dark-800',
|
|
photourl: 'https://avatars.githubusercontent.com/u/59666?v=4',
|
|
})
|
|
const profile_showsettings= ref(false)
|
|
const profile_editing= ref('')
|
|
const profile_saveedit = (name: string) => {
|
|
profile_editing.value = ''
|
|
}
|
|
const profile_edit = (name: string) => {
|
|
profile_editing.value = name
|
|
// this.$nextTick(() => {
|
|
// this.$refs[`${name}input`].focus()
|
|
// })
|
|
}
|
|
const profile_discard = (name: string) => {
|
|
// this.$refs[`${name}input`].value = this[name]
|
|
profile_editing.value = ''
|
|
}
|
|
const profile_selectcolor = (color: string) => {
|
|
profile.value.bgcolor = color
|
|
}
|
|
const onSettings = () => {
|
|
profile_showsettings.value= true
|
|
}
|
|
const onCloseSettings = () => {
|
|
profile_showsettings.value=false
|
|
}
|
|
const onLogout = () => {
|
|
useState().show_profile.value = false
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="block flex flex-col w-full h-screen justify-center items-center bg-white">
|
|
<div class="flex flex-col w-75 shadow-md max-w-full h-70 rounded-lg transition-colors ease-in" :class="profile.bgcolor">
|
|
<div v-show="profile_showsettings" class="fixed z-10 flex flex-col w-75 max-w-full h-70 text-center text-white p-5 origin-top-left transform scale-0 transition-all" :class="{'scale-100': profile_showsettings}">
|
|
<span class="text-2xl font-bold">{{ t('profile.Settings','Settings') }}</span>
|
|
<div class="flex flex-col space-y-2 mt-5 flex-grow">
|
|
<span class="text-md font-bold">{{ t('profile.backgroud_color','Background color') }}:</span>
|
|
<div class="w-full flex justify-center space-x-2">
|
|
<span v-for="c in profile.bgcolors" :key="c">
|
|
<button class="flex border-4 border-white inline cursor-pointer w-8 h-8 rounded-full" :class="c" :disabled="profile.bgcolor == c" @click="profile_selectcolor(c)"></button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-center flex-shrink align-end">
|
|
<button class="rounded bg-transparent font-bold text-lg fill-current text-white" @click="onCloseSettings">
|
|
{{ t(`profile.Close`,'Close') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div v-show="!profile_showsettings">
|
|
<div class="flex w-full justify-between p-2 mt-1">
|
|
<button @click="onSettings" class="flex space-x-1 group font-semibold items-center bg-transparent cursor-pointer text-white fill-current">
|
|
<svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
<span class="origin-left transform scale-x-0 group-focus:scale-x-100 group-hover:scale-x-100 transition-transform ease-in select-none text-lg">{{ t('profile.Settings','Settings') }}</span>
|
|
</button>
|
|
<button @click="onLogout" class="flex space-x-1 group font-semibold items-center bg-transparent cursor-pointer text-white fill-current">
|
|
<span class="origin-right transform scale-x-0 group-focus:scale-x-100 group-hover:scale-x-100 transition-transform ease-in select-none text-lg">{{ t('profile.Logout','Logout') }}</span>
|
|
<svg class="w-7 h-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="flex flex-col w-full h-full text-center">
|
|
<div class="flex flex-col space-y-2 items-center mb-3">
|
|
<img :src="profile.photourl" alt="Profile Picture" class="rounded-full select-none w-22">
|
|
<div class="text-center relative group">
|
|
<span v-show="profile_editing !== 'fullname'" class="text-xl break-words font-semibold text-white font-sans m-0 p-0 px-2 select-none" title="Double click to edit" @dblclick="profile_edit('fullname')">{{ profile.fullname }}</span>
|
|
<svg v-show="profile_editing != 'fullname'" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-50 inline absolute right-2 -top-3 transform scale-0 group-hover:scale-100 transition-transform" viewBox="0 0 20 20" fill="currentColor">
|
|
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
|
|
<path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
|
|
</svg>
|
|
<input
|
|
v-show="profile_editing == 'fullname'"
|
|
id=""
|
|
type="text"
|
|
name=""
|
|
class="bg-transparent text-xl font-sans w-full p-0 px-2 m-0 text-center text-white font-semibold focus:outline-none focus:animate-pulse"
|
|
:value="profile.fullname"
|
|
spellcheck="false"
|
|
x-ref="fullnameinput"
|
|
title="Enter to save, click outside to discard."
|
|
maxlength="20"
|
|
@keydown.enter="profile_saveedit('fullname')"
|
|
@click="profile_discard('fullname')"
|
|
@keydown.escape="profile_discard('fullname')"
|
|
>
|
|
</div>
|
|
<div class="text-center relative group">
|
|
<span v-show="profile_editing != 'username'" class="text-sm text-wrap font-semibold font-sans m-0 p-0 text-green-100 select-none" title="Double click to edit" @dblclick="profile_edit('username')">{{ profile.username }}</span>
|
|
<svg v-show="profile_editing != 'username'" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-50 inline absolute ml-1 -top-1 transform scale-0 group-hover:scale-100 transition-transform" viewBox="0 0 20 20" fill="currentColor">
|
|
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
|
|
<path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
|
|
</svg>
|
|
<input
|
|
v-show="profile_editing == 'username'"
|
|
id=""
|
|
type="text"
|
|
name=""
|
|
class="inline-block bg-transparent text-sm font-sans p-0 m-0 w-auto text-center font-semibold text-green-100 focus:outline-none focus:animate-pulse"
|
|
:value="profile.username"
|
|
spellcheck="false"
|
|
x-ref="usernameinput"
|
|
title="Enter to save, click outside to discard."
|
|
maxlength="15"
|
|
@keydown.enter="profile_saveedit('username')"
|
|
@click="profile_discard('username')"
|
|
@keydown.escape="profile_discard('username')"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="hidden flex flex-row justify-evenly">
|
|
<div class="flex flex-col cursor-pointer hover:opacity-80">
|
|
<span class="text-lg font-bold text-white">11</span>
|
|
<span class="text-green-100 text-sm">Followers</span>
|
|
</div>
|
|
<div class="flex flex-col cursor-pointer hover:opacity-80">
|
|
<span class="text-lg font-bold text-white">52</span>
|
|
<span class="text-green-100 text-sm">Following</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|