feat: arbitrary profile picture

This commit is contained in:
liyasthomas
2022-03-04 05:56:52 +05:30
parent b7988b54c5
commit a8e7fd3434
38 changed files with 132 additions and 88 deletions

View File

@@ -1,7 +1,15 @@
<svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
aria-label="Email" role="img" aria-label="Email"
viewBox="0 0 512 512"><rect role="img"
width="512" height="512" viewBox="0 0 512 512"
rx="15%" >
fill="teal"/><rect width="356" height="256" x="78" y="128" fill="#fff" rx="8%"/><path fill="none" stroke="teal" stroke-width="20" d="M434 128L269 292c-7 8-19 8-26 0L78 128m0 256l129-128m227 128L305 256"/></svg> <rect width="512" height="512" rx="15%" fill="teal" />
<rect width="356" height="256" x="78" y="128" fill="#fff" rx="8%" />
<path
fill="none"
stroke="teal"
stroke-width="20"
d="M434 128L269 292c-7 8-19 8-26 0L78 128m0 256l129-128m227 128L305 256"
/>
</svg>

Before

Width:  |  Height:  |  Size: 344 B

After

Width:  |  Height:  |  Size: 383 B

View File

@@ -1,7 +1,12 @@
<svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
aria-label="GitHub" role="img" aria-label="GitHub"
viewBox="0 0 512 512"><rect role="img"
width="512" height="512" viewBox="0 0 512 512"
rx="15%" >
fill="#181717"/><path fill="#fff" d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-44c-71 16-86-34-86-34-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"/></svg> <rect width="512" height="512" rx="15%" fill="#181717" />
<path
fill="#fff"
d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-44c-71 16-86-34-86-34-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"
/>
</svg>

Before

Width:  |  Height:  |  Size: 544 B

After

Width:  |  Height:  |  Size: 571 B

View File

@@ -1,7 +1,24 @@
<svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
aria-label="Google" role="img" aria-label="Google"
viewBox="0 0 512 512"><rect role="img"
width="512" height="512" viewBox="0 0 512 512"
rx="15%" >
fill="#fff"/><path fill="#4285f4" d="M386 400c45-42 65-112 53-179H260v74h102c-4 24-18 44-38 57z"/><path fill="#34a853" d="M90 341a192 192 0 0 0 296 59l-62-48c-53 35-141 22-171-60z"/><path fill="#fbbc02" d="M153 292c-8-25-8-48 0-73l-63-49c-23 46-30 111 0 171z"/><path fill="#ea4335" d="M153 219c22-69 116-109 179-50l55-54c-78-75-230-72-297 55z"/></svg> <rect width="512" height="512" rx="15%" fill="#fff" />
<path
fill="#4285f4"
d="M386 400c45-42 65-112 53-179H260v74h102c-4 24-18 44-38 57z"
/>
<path
fill="#34a853"
d="M90 341a192 192 0 0 0 296 59l-62-48c-53 35-141 22-171-60z"
/>
<path
fill="#fbbc02"
d="M153 292c-8-25-8-48 0-73l-63-49c-23 46-30 111 0 171z"
/>
<path
fill="#ea4335"
d="M153 219c22-69 116-109 179-50l55-54c-78-75-230-72-297 55z"
/>
</svg>

Before

Width:  |  Height:  |  Size: 486 B

After

Width:  |  Height:  |  Size: 555 B

View File

@@ -1,11 +1,12 @@
<svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
aria-label="Microsoft" role="img" aria-label="Microsoft"
viewBox="0 0 512 512"><rect role="img"
width="512" height="512" viewBox="0 0 512 512"
rx="15%" >
fill="#fff"/><path <rect width="512" height="512" rx="15%" fill="#fff" />
d="M75 75v171h171v-171z" fill="#f25022"/><path <path d="M75 75v171h171v-171z" fill="#f25022" />
d="M266 75v171h171v-171z" fill="#7fba00"/><path <path d="M266 75v171h171v-171z" fill="#7fba00" />
d="M75 266v171h171v-171z" fill="#00a4ef"/><path <path d="M75 266v171h171v-171z" fill="#00a4ef" />
d="M266 266v171h171v-171z" fill="#ffb900"/></svg> <path d="M266 266v171h171v-171z" fill="#ffb900" />
</svg>

Before

Width:  |  Height:  |  Size: 349 B

After

Width:  |  Height:  |  Size: 378 B

View File

@@ -79,12 +79,15 @@
network.isOnline ? 'bg-green-500' : 'bg-red-500' network.isOnline ? 'bg-green-500' : 'bg-red-500'
" "
/> />
<ButtonSecondary <ProfilePicture
v-else v-else
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="t('header.account')" :title="currentUser.displayName"
class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark" :initial="currentUser.displayName"
svg="user" indicator
:indicator-styles="
network.isOnline ? 'bg-green-500' : 'bg-red-500'
"
/> />
</template> </template>
<div class="flex flex-col px-2 text-tiny" role="menu"> <div class="flex flex-col px-2 text-tiny" role="menu">

View File

@@ -1,20 +1,31 @@
<template> <template>
<div <div
tabindex="0" tabindex="0"
class="relative flex items-center justify-center w-5 h-5 rounded-full cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-primaryDark" class="relative flex items-center justify-center cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
:class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
> >
<img <img
class="absolute object-cover object-center w-5 h-5 rounded-full transition bg-primaryDark" v-if="url"
class="absolute object-cover object-center transition bg-primaryDark"
:class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
:src="url" :src="url"
:alt="alt" :alt="alt"
loading="lazy" loading="lazy"
/> />
<div class="absolute inset-0 rounded-full shadow-inner"></div> <div
v-else
class="absolute flex items-center justify-center object-cover object-center transition bg-primaryDark text-accentContrast"
:class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
:style="`background-color: ${toHex(initial)}`"
>
{{ initial.charAt(0).toUpperCase() }}
</div>
<span <span
v-if="indicator" v-if="indicator"
class="border-primary rounded-full border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute" class="border-primary border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"
:class="indicatorStyles" :class="[`rounded-${rounded}`, indicatorStyles]"
></span> ></span>
<!-- w-5 h-5 rounded-lg -->
</div> </div>
</template> </template>
@@ -25,9 +36,7 @@ export default defineComponent({
props: { props: {
url: { url: {
type: String, type: String,
default: `https://avatars.dicebear.com/v2/avataaars/${Math.random() default: "",
.toString(36)
.substring(7)}.svg?mood[]=happy`,
}, },
alt: { alt: {
type: String, type: String,
@@ -41,6 +50,34 @@ export default defineComponent({
type: String, type: String,
default: "bg-green-500", default: "bg-green-500",
}, },
rounded: {
type: String,
default: "full",
},
size: {
type: String,
default: "5",
},
initial: {
type: String,
default: "",
},
},
methods: {
toHex(initial) {
let hash = 0
if (initial.length === 0) return hash
for (let i = 0; i < initial.length; i++) {
hash = initial.charCodeAt(i) + ((hash << 5) - hash)
hash = hash & hash
}
let color = "#"
for (let i = 0; i < 3; i++) {
const value = (hash >> (i * 8)) & 255
color += `00${value.toString(16)}`.substr(-2)
}
return color
},
}, },
}) })
</script> </script>

View File

@@ -35,17 +35,16 @@
:title="member.user.displayName" :title="member.user.displayName"
class="inline-flex" class="inline-flex"
> >
<img <ProfilePicture
v-if="member.user.photoURL" v-if="member.user.photoURL"
:src="member.user.photoURL" :url="member.user.photoURL"
:alt="member.user.displayName" :alt="member.user.displayName"
class="inline-block w-5 h-5 rounded-full ring-primary ring-2" class="ring-primary ring-2"
loading="lazy"
/> />
<SmartIcon <ProfilePicture
v-else v-else
name="user" :initial="member.user.displayName"
class="rounded-lg svg-icons bg-primaryLight ring-primary ring-2" class="ring-primary ring-2"
/> />
</div> </div>
</div> </div>

View File

@@ -216,7 +216,6 @@
"subscriptions": "Inskrywings" "subscriptions": "Inskrywings"
}, },
"header": { "header": {
"account": "Rekening",
"install_pwa": "Installeer toep", "install_pwa": "Installeer toep",
"login": "Teken aan", "login": "Teken aan",
"save_workspace": "Stoor my werkspasie" "save_workspace": "Stoor my werkspasie"

View File

@@ -217,7 +217,6 @@
"subscriptions": "الاشتراكات" "subscriptions": "الاشتراكات"
}, },
"header": { "header": {
"account": "حساب",
"install_pwa": "تثبيت التطبيق", "install_pwa": "تثبيت التطبيق",
"login": "تسجيل الدخول", "login": "تسجيل الدخول",
"save_workspace": "حفظ مساحة العمل الخاصة بي" "save_workspace": "حفظ مساحة العمل الخاصة بي"

View File

@@ -216,7 +216,6 @@
"subscriptions": "Subscripcions" "subscriptions": "Subscripcions"
}, },
"header": { "header": {
"account": "Compte",
"install_pwa": "Instal·la l'aplicació", "install_pwa": "Instal·la l'aplicació",
"login": "iniciar Sessió", "login": "iniciar Sessió",
"save_workspace": "Desa el meu espai de treball" "save_workspace": "Desa el meu espai de treball"

View File

@@ -216,7 +216,6 @@
"subscriptions": "订阅" "subscriptions": "订阅"
}, },
"header": { "header": {
"account": "帐户",
"install_pwa": "安装应用", "install_pwa": "安装应用",
"login": "登录", "login": "登录",
"save_workspace": "保存我的工作区" "save_workspace": "保存我的工作区"

View File

@@ -216,7 +216,6 @@
"subscriptions": "Předplatné" "subscriptions": "Předplatné"
}, },
"header": { "header": {
"account": "Účet",
"install_pwa": "Nainstalovat aplikaci", "install_pwa": "Nainstalovat aplikaci",
"login": "Přihlásit se", "login": "Přihlásit se",
"save_workspace": "Uložit můj pracovní prostor" "save_workspace": "Uložit můj pracovní prostor"

View File

@@ -216,7 +216,6 @@
"subscriptions": "Abonnementer" "subscriptions": "Abonnementer"
}, },
"header": { "header": {
"account": "Konto",
"install_pwa": "Installer app", "install_pwa": "Installer app",
"login": "Log på", "login": "Log på",
"save_workspace": "Gem mit arbejdsområde" "save_workspace": "Gem mit arbejdsområde"

View File

@@ -216,7 +216,6 @@
"subscriptions": "Abonnements" "subscriptions": "Abonnements"
}, },
"header": { "header": {
"account": "Konto",
"install_pwa": "App installieren", "install_pwa": "App installieren",
"login": "Anmeldung", "login": "Anmeldung",
"save_workspace": "Meinen Arbeitsbereich speichern" "save_workspace": "Meinen Arbeitsbereich speichern"

View File

@@ -216,7 +216,6 @@
"subscriptions": "Συνδρομές" "subscriptions": "Συνδρομές"
}, },
"header": { "header": {
"account": "λογαριασμός",
"install_pwa": "Εγκατάσταση εφαρμογής", "install_pwa": "Εγκατάσταση εφαρμογής",
"login": "Σύνδεση", "login": "Σύνδεση",
"save_workspace": "Αποθήκευση του χώρου εργασίας μου" "save_workspace": "Αποθήκευση του χώρου εργασίας μου"

View File

@@ -216,7 +216,6 @@
"subscriptions": "Subscriptions" "subscriptions": "Subscriptions"
}, },
"header": { "header": {
"account": "Account",
"install_pwa": "Install app", "install_pwa": "Install app",
"login": "Login", "login": "Login",
"save_workspace": "Save My Workspace" "save_workspace": "Save My Workspace"

View File

@@ -216,7 +216,6 @@
"subscriptions": "Suscripciones" "subscriptions": "Suscripciones"
}, },
"header": { "header": {
"account": "Cuenta",
"install_pwa": "Instalar aplicación", "install_pwa": "Instalar aplicación",
"login": "Acceso", "login": "Acceso",
"save_workspace": "Guardar mi espacio de trabajo" "save_workspace": "Guardar mi espacio de trabajo"

View File

@@ -216,7 +216,6 @@
"subscriptions": "Tilaukset" "subscriptions": "Tilaukset"
}, },
"header": { "header": {
"account": "Tili",
"install_pwa": "Asenna sovellus", "install_pwa": "Asenna sovellus",
"login": "Kirjaudu sisään", "login": "Kirjaudu sisään",
"save_workspace": "Tallenna työtila" "save_workspace": "Tallenna työtila"

View File

@@ -216,7 +216,6 @@
"subscriptions": "Abonnements" "subscriptions": "Abonnements"
}, },
"header": { "header": {
"account": "Compte",
"install_pwa": "Installer l'application", "install_pwa": "Installer l'application",
"login": "Connexion", "login": "Connexion",
"save_workspace": "Enregistrer mon espace de travail" "save_workspace": "Enregistrer mon espace de travail"

View File

@@ -216,7 +216,6 @@
"subscriptions": "מנויים" "subscriptions": "מנויים"
}, },
"header": { "header": {
"account": "חֶשְׁבּוֹן",
"install_pwa": "התקן אפליקציה", "install_pwa": "התקן אפליקציה",
"login": "התחברות", "login": "התחברות",
"save_workspace": "שמור את סביבת העבודה שלי" "save_workspace": "שמור את סביבת העבודה שלי"

View File

@@ -216,7 +216,6 @@
"subscriptions": "Feliratkozások" "subscriptions": "Feliratkozások"
}, },
"header": { "header": {
"account": "Fiók",
"install_pwa": "Alkalmazás telepítése", "install_pwa": "Alkalmazás telepítése",
"login": "Bejelentkezés", "login": "Bejelentkezés",
"save_workspace": "Saját munkaterület mentése" "save_workspace": "Saját munkaterület mentése"

View File

@@ -216,7 +216,6 @@
"subscriptions": "Sottoscrizioni" "subscriptions": "Sottoscrizioni"
}, },
"header": { "header": {
"account": "Account",
"install_pwa": "Installa l'applicazione", "install_pwa": "Installa l'applicazione",
"login": "Accedi", "login": "Accedi",
"save_workspace": "Salva il mio spazio di lavoro" "save_workspace": "Salva il mio spazio di lavoro"

View File

@@ -216,7 +216,6 @@
"subscriptions": "サブスクリプション" "subscriptions": "サブスクリプション"
}, },
"header": { "header": {
"account": "アカウント",
"install_pwa": "アプリをインストールする", "install_pwa": "アプリをインストールする",
"login": "ログイン", "login": "ログイン",
"save_workspace": "ワークスペースを保存" "save_workspace": "ワークスペースを保存"

View File

@@ -216,7 +216,6 @@
"subscriptions": "구독" "subscriptions": "구독"
}, },
"header": { "header": {
"account": "계정",
"install_pwa": "앱을 설치", "install_pwa": "앱을 설치",
"login": "로그인", "login": "로그인",
"save_workspace": "내 작업 공간 저장" "save_workspace": "내 작업 공간 저장"

View File

@@ -216,7 +216,6 @@
"subscriptions": "Abonnementen" "subscriptions": "Abonnementen"
}, },
"header": { "header": {
"account": "Rekening",
"install_pwa": "Installeer app", "install_pwa": "Installeer app",
"login": "Log in", "login": "Log in",
"save_workspace": "Bewaar mijn werkruimte" "save_workspace": "Bewaar mijn werkruimte"

View File

@@ -216,7 +216,6 @@
"subscriptions": "Abonnementer" "subscriptions": "Abonnementer"
}, },
"header": { "header": {
"account": "Regnskap",
"install_pwa": "Installer app", "install_pwa": "Installer app",
"login": "Logg Inn", "login": "Logg Inn",
"save_workspace": "Lagre arbeidsområdet mitt" "save_workspace": "Lagre arbeidsområdet mitt"

View File

@@ -216,7 +216,6 @@
"subscriptions": "Subskrypcje" "subscriptions": "Subskrypcje"
}, },
"header": { "header": {
"account": "Konto",
"install_pwa": "Zainstaluj aplikację", "install_pwa": "Zainstaluj aplikację",
"login": "Zaloguj sie", "login": "Zaloguj sie",
"save_workspace": "Zapisz mój obszar roboczy" "save_workspace": "Zapisz mój obszar roboczy"

View File

@@ -216,7 +216,6 @@
"subscriptions": "Assinaturas" "subscriptions": "Assinaturas"
}, },
"header": { "header": {
"account": "Conta",
"install_pwa": "Instalar aplicativo", "install_pwa": "Instalar aplicativo",
"login": "Conecte-se", "login": "Conecte-se",
"save_workspace": "Salvar meu espaço de trabalho" "save_workspace": "Salvar meu espaço de trabalho"

View File

@@ -216,7 +216,6 @@
"subscriptions": "Assinaturas" "subscriptions": "Assinaturas"
}, },
"header": { "header": {
"account": "Conta",
"install_pwa": "Instalar aplicativo", "install_pwa": "Instalar aplicativo",
"login": "Conecte-se", "login": "Conecte-se",
"save_workspace": "Salvar meu espaço de trabalho" "save_workspace": "Salvar meu espaço de trabalho"

View File

@@ -216,7 +216,6 @@
"subscriptions": "Abonamente" "subscriptions": "Abonamente"
}, },
"header": { "header": {
"account": "Cont",
"install_pwa": "Instalează aplicația", "install_pwa": "Instalează aplicația",
"login": "Autentificare", "login": "Autentificare",
"save_workspace": "Salvați spațiul meu de lucru" "save_workspace": "Salvați spațiul meu de lucru"

View File

@@ -216,7 +216,6 @@
"subscriptions": "Подписки" "subscriptions": "Подписки"
}, },
"header": { "header": {
"account": "Счет",
"install_pwa": "Установить приложение", "install_pwa": "Установить приложение",
"login": "Авторизоваться", "login": "Авторизоваться",
"save_workspace": "Сохранить мою рабочую область" "save_workspace": "Сохранить мою рабочую область"

View File

@@ -217,7 +217,6 @@
"subscriptions": "Претплате" "subscriptions": "Претплате"
}, },
"header": { "header": {
"account": "Рачун",
"install_pwa": "Инсталирати апликацију", "install_pwa": "Инсталирати апликацију",
"login": "Пријавите се", "login": "Пријавите се",
"save_workspace": "Сачувај мој радни простор" "save_workspace": "Сачувај мој радни простор"

View File

@@ -216,7 +216,6 @@
"subscriptions": "Prenumerationer" "subscriptions": "Prenumerationer"
}, },
"header": { "header": {
"account": "konto",
"install_pwa": "Installera app", "install_pwa": "Installera app",
"login": "Logga in", "login": "Logga in",
"save_workspace": "Spara min arbetsyta" "save_workspace": "Spara min arbetsyta"

View File

@@ -216,7 +216,6 @@
"subscriptions": "abonelikler" "subscriptions": "abonelikler"
}, },
"header": { "header": {
"account": "Hesap",
"install_pwa": "Uygulamayı yükle", "install_pwa": "Uygulamayı yükle",
"login": "Giriş yap", "login": "Giriş yap",
"save_workspace": "Çalışma Alanımı Kaydet" "save_workspace": "Çalışma Alanımı Kaydet"

View File

@@ -216,7 +216,6 @@
"subscriptions": "訂閱" "subscriptions": "訂閱"
}, },
"header": { "header": {
"account": "帳號",
"install_pwa": "安裝應用程式", "install_pwa": "安裝應用程式",
"login": "登入", "login": "登入",
"save_workspace": "儲存我的工作區" "save_workspace": "儲存我的工作區"

View File

@@ -216,7 +216,6 @@
"subscriptions": "Підписки" "subscriptions": "Підписки"
}, },
"header": { "header": {
"account": "Рахунок",
"install_pwa": "Встановити додаток", "install_pwa": "Встановити додаток",
"login": "Увійти", "login": "Увійти",
"save_workspace": "Зберегти мою робочу область" "save_workspace": "Зберегти мою робочу область"

View File

@@ -216,7 +216,6 @@
"subscriptions": "Đăng ký" "subscriptions": "Đăng ký"
}, },
"header": { "header": {
"account": "Tài khoản",
"install_pwa": "Cài đặt ứng dụng", "install_pwa": "Cài đặt ứng dụng",
"login": "Đăng nhập", "login": "Đăng nhập",
"save_workspace": "Lưu không gian làm việc của tôi" "save_workspace": "Lưu không gian làm việc của tôi"

View File

@@ -28,16 +28,20 @@
></div> ></div>
<div class="flex flex-col justify-between px-4 space-y-8 md:flex-row"> <div class="flex flex-col justify-between px-4 space-y-8 md:flex-row">
<div class="flex items-end"> <div class="flex items-end">
<img <ProfilePicture
v-if="currentUser.photoURL" v-if="currentUser.photoURL"
:src="currentUser.photoURL" :url="currentUser.photoURL"
class="w-16 h-16 rounded-lg ring-primary ring-4" :alt="currentUser.displayName"
:alt="`${currentUser.displayName}`" class="ring-primary ring-4"
size="16"
rounded="lg"
/> />
<SmartIcon <ProfilePicture
v-else v-else
name="user" :initial="currentUser.displayName"
class="svg-icons !w-16 !h-16 bg-primaryLight rounded-lg ring-primary ring-4" rounded="lg"
size="16"
class="ring-primary ring-4"
/> />
<div class="ml-4"> <div class="ml-4">
<label class="heading"> <label class="heading">