From be4a89193a4da52548204345a394bdcb9bbe15da Mon Sep 17 00:00:00 2001 From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com> Date: Mon, 13 Nov 2023 16:05:55 +0300 Subject: [PATCH] Userpic flow in profile settings (#311) Userpic flow update --- public/icons/user-image-black.svg | 8 +++ public/icons/user-image-gray.svg | 8 +++ public/locales/en/translation.json | 5 +- public/locales/ru/translation.json | 5 +- src/pages/profile/Settings.module.scss | 56 +++++++++++++++++++++ src/pages/profile/profileSettings.page.tsx | 58 ++++++++++++++++++---- 6 files changed, 128 insertions(+), 12 deletions(-) create mode 100644 public/icons/user-image-black.svg create mode 100644 public/icons/user-image-gray.svg diff --git a/public/icons/user-image-black.svg b/public/icons/user-image-black.svg new file mode 100644 index 00000000..2b7b10ef --- /dev/null +++ b/public/icons/user-image-black.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/icons/user-image-gray.svg b/public/icons/user-image-gray.svg new file mode 100644 index 00000000..a70784ec --- /dev/null +++ b/public/icons/user-image-gray.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 1b765ad0..d6eb744b 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -1,5 +1,4 @@ { - "subscribing...": "subscribing...", "About": "About", "About the project": "About the project", "Add a few topics so that the reader knows what your content is about and can find it on pages of topics that interest them. Topics can be swapped, the first topic becomes the title": "Add a few topics so that the reader knows what your content is about and can find it on pages of topics that interest them. Topics can be swapped, the first topic becomes the title", @@ -95,6 +94,7 @@ "Decline": "Decline", "Delete": "Delete", "Delete cover": "Delete cover", + "Delete userpic": "Delete userpic", "Description": "Description", "Discours": "Discours", "Discours is an intellectual environment, a web space and tools that allows authors to collaborate with readers and come together to co-create publications and media projects": "Discours is an intellectual environment, a web space and tools that allows authors to collaborate with readers and come together to co-create publications and media projects.
We are convinced that one voice is good, but many is better. We create the most amazing stories together", @@ -151,6 +151,7 @@ "Help to edit": "Help to edit", "Here you can customize your profile the way you want.": "Here you can customize your profile the way you want.", "Here you can manage all your Discourse subscriptions": "Here you can manage all your Discourse subscriptions", + "Here you can upload your photo": "Here you can upload your photo", "Hide table of contents": "Hide table of contents", "Highlight": "Highlight", "Hooray! Welcome!": "Hooray! Welcome!", @@ -354,6 +355,7 @@ "Unnamed draft": "Unnamed draft", "Upload": "Upload", "Upload error": "Upload error", + "Upload userpic": "Upload userpic", "Upload video": "Upload video", "Uploading image": "Uploading image", "Username": "Username", @@ -439,6 +441,7 @@ "subscriber": "subscriber", "subscriber_rp": "subscriber", "subscribers": "subscribers", + "subscribing...": "subscribing...", "subscription": "subscription", "subscription_rp": "subscription", "subscriptions": "subscriptions", diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 1ed9ca94..3640e6a3 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -1,5 +1,4 @@ { - "subscribing...": "Подписка...", "A short introduction to keep the reader interested": "Добавьте вступление, чтобы заинтересовать читателя", "About": "О себе", "About the project": "О проекте", @@ -98,6 +97,7 @@ "Decline": "Отмена", "Delete": "Удалить", "Delete cover": "Удалить обложку", + "Delete userpic": "Удалить аватар", "Description": "Описание", "Discours": "Дискурс", "Discours is an intellectual environment, a web space and tools that allows authors to collaborate with readers and come together to co-create publications and media projects": "Дискурс — это интеллектуальная среда, веб-пространство и инструменты, которые позволяют авторам сотрудничать с читателями и объединяться для совместного создания публикаций и медиапроектов.
Мы убеждены, один голос хорошо, а много — лучше. Самые потрясающиe истории мы создаём вместе.", @@ -158,6 +158,7 @@ "Help to edit": "Помочь редактировать", "Here you can customize your profile the way you want.": "Здесь можно настроить свой профиль так, как вы хотите.", "Here you can manage all your Discourse subscriptions": "Здесь можно управлять всеми своими подписками на Дискурсе", + "Here you can upload your photo": "Здесь вы можете загрузить свою фотографию", "Hide table of contents": "Скрыть главление", "Highlight": "Подсветка", "Hooray! Welcome!": "Ура! Добро пожаловать!", @@ -372,6 +373,7 @@ "Unnamed draft": "Черновик без названия", "Upload": "Загрузить", "Upload error": "Ошибка загрузки", + "Upload userpic": "Загрузить аватар", "Upload video": "Загрузить видео", "Uploading image": "Загружаем изображение", "Username": "Имя пользователя", @@ -466,6 +468,7 @@ "subscriber": "подписчик", "subscriber_rp": "подписчика", "subscribers": "подписчиков", + "subscribing...": "Подписка...", "terms of use": "правилами пользования сайтом", "today": "сегодня", "topics": "темы", diff --git a/src/pages/profile/Settings.module.scss b/src/pages/profile/Settings.module.scss index 1bdb7520..4553b827 100644 --- a/src/pages/profile/Settings.module.scss +++ b/src/pages/profile/Settings.module.scss @@ -216,6 +216,62 @@ h5 { } } +.userpic { + @include font-size(1.2rem); + + position: relative; + width: 180px; + height: 180px; + border-radius: 50%; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; + gap: 1rem; + color: var(--black-300); + border: 1px solid var(--black-100); + cursor: pointer; + + img { + width: 100%; + border-radius: 50%; + } + + &.hasControls { + overflow: visible; + } + + .controls { + position: absolute; + right: -50px; + display: flex; + flex-direction: column; + gap: 1rem; + } + + .control { + width: 40px; + height: 40px; + border-radius: 50%; + background: var(--background-color); + border: 1px solid var(--black-100); + + img { + border-radius: unset; + } + + &:hover { + background: var(--background-color-invert); + + img { + filter: invert(1); + } + } + } +} + .socialInput { margin-top: 1rem; } diff --git a/src/pages/profile/profileSettings.page.tsx b/src/pages/profile/profileSettings.page.tsx index dccc7cc6..991892c7 100644 --- a/src/pages/profile/profileSettings.page.tsx +++ b/src/pages/profile/profileSettings.page.tsx @@ -1,6 +1,6 @@ import { PageLayout } from '../../components/_shared/PageLayout' import { ProfileSettingsNavigation } from '../../components/Nav/ProfileSettingsNavigation' -import { For, createSignal, Show, onMount, onCleanup, createEffect } from 'solid-js' +import { For, createSignal, Show, onMount, onCleanup, createEffect, Switch, Match } from 'solid-js' import deepEqual from 'fast-deep-equal' import { clsx } from 'clsx' import styles from './Settings.module.scss' @@ -20,6 +20,10 @@ import { AuthGuard } from '../../components/AuthGuard' import { handleImageUpload } from '../../utils/handleImageUpload' import { SocialNetworkInput } from '../../components/_shared/SocialNetworkInput' import { profileSocialLinks } from '../../utils/profileSocialLinks' +import { Icon } from '../../components/_shared/Icon' +import { Popover } from '../../components/_shared/Popover' +import { Image } from '../../components/_shared/Image' +import { Loading } from '../../components/_shared/Loading' export const ProfileSettingsPage = () => { const { t } = useLocalize() @@ -65,7 +69,7 @@ export const ProfileSettingsPage = () => { const { selectFiles } = createFileUploader({ multiple: false, accept: 'image/*' }) - const handleAvatarClick = async () => { + const handleUploadAvatar = async () => { selectFiles(async ([uploadFile]) => { try { setUploadError(false) @@ -136,14 +140,48 @@ export const ProfileSettingsPage = () => {

{t('Here you can customize your profile the way you want.')}

{t('Userpic')}

-
- +
+
+ + + + + + {form.name} +
+ + {(triggerRef: (el) => void) => ( + + )} + + + {(triggerRef: (el) => void) => ( + + )} + +
+ + + + {t('Here you can upload your photo')} + + +
{t('Upload error')}