Userpic flow in profile settings (#311)

Userpic flow update

public/icons/user-image-black.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon">
+<path d="M2.70423 20.2826H18.9296C19.6763 20.2826 20.2817 19.6773 20.2817 18.9305V15.9658C20.2817 15.6139 20.1445 15.2759 19.8992 15.0235L16.5187 11.5449C15.9878 10.9986 15.1106 10.9985 14.5796 11.5447L13.0829 13.084C12.5107 13.6726 11.5502 13.6196 11.0462 12.9716L8.31344 9.45821C7.77885 8.77092 6.74349 8.76071 6.19546 9.43733L1.65353 15.0449C1.45852 15.2857 1.35211 15.5861 1.35211 15.896V18.9305C1.35211 19.6773 1.95747 20.2826 2.70423 20.2826Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5775 2.70423H2.70423V17.5775H17.5775V2.70423ZM0 0V20.2817H20.2817V0H0Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 5.40845H21.9718V21.9718H5.40845V24H24V5.40845Z" fill="currentColor"/>
+<path d="M14.8732 6.08451C14.8732 7.20463 13.9652 8.11268 12.8451 8.11268C11.7249 8.11268 10.8169 7.20463 10.8169 6.08451C10.8169 4.96438 11.7249 4.05634 12.8451 4.05634C13.9652 4.05634 14.8732 4.96438 14.8732 6.08451Z" fill="currentColor"/>
+</g>
+</svg>

public/icons/user-image-gray.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon">
+<path d="M2.70423 20.2826H18.9296C19.6763 20.2826 20.2817 19.6773 20.2817 18.9305V15.9658C20.2817 15.6139 20.1445 15.2759 19.8992 15.0235L16.5187 11.5449C15.9878 10.9986 15.1106 10.9985 14.5796 11.5447L13.0829 13.084C12.5107 13.6726 11.5502 13.6196 11.0462 12.9716L8.31344 9.45821C7.77885 8.77092 6.74349 8.76071 6.19546 9.43733L1.65353 15.0449C1.45852 15.2857 1.35211 15.5861 1.35211 15.896V18.9305C1.35211 19.6773 1.95747 20.2826 2.70423 20.2826Z" fill="#9FA1A7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5775 2.70423H2.70423V17.5775H17.5775V2.70423ZM0 0V20.2817H20.2817V0H0Z" fill="#9FA1A7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 5.40845H21.9718V21.9718H5.40845V24H24V5.40845Z" fill="#9FA1A7"/>
+<path d="M14.8732 6.08451C14.8732 7.20463 13.9652 8.11268 12.8451 8.11268C11.7249 8.11268 10.8169 7.20463 10.8169 6.08451C10.8169 4.96438 11.7249 4.05634 12.8451 4.05634C13.9652 4.05634 14.8732 4.96438 14.8732 6.08451Z" fill="#9FA1A7"/>
+</g>
+</svg>

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&#160;an&#160;intellectual environment, a&#160;web space and tools that allows authors to&#160;collaborate with readers and come together to&#160;co-create publications and media projects.<br/><em>We&#160;are convinced that one voice is&#160;good, but many is&#160;better. We&#160;create the most amazing stories together</em>",
@@ -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",

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": "Дискурс&#160;&#8212; это интеллектуальная среда, веб-пространство и&#160;инструменты, которые позволяют авторам сотрудничать&#160;с&#160;читателями и&#160;объединяться для совместного создания публикаций и&#160;медиапроектов.<br/>Мы&#160;убеждены, один голос хорошо, а&#160;много&#160;&#8212; лучше. Самые потрясающи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": "темы",

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;
 }

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 = () => {
                     <p class="description">{t('Here you can customize your profile the way you want.')}</p>
                     <form onSubmit={handleSubmit} enctype="multipart/form-data">
                       <h4>{t('Userpic')}</h4>
-                      <div class="pretty-form__item" style={{ 'max-width': '50%' }}>
+                      <div class="pretty-form__item">
-                        <Userpic
+                        <div
-                          name={form.name}
+                          class={clsx(styles.userpic, { [styles.hasControls]: form.userpic })}
-                          userpic={form.userpic}
+                          onClick={!form.userpic && handleUploadAvatar}
-                          size={'XL'}
+                        >
-                          onClick={handleAvatarClick}
+                          <Switch>
-                          loading={isUserpicUpdating()}
+                            <Match when={isUserpicUpdating()}>
-                        />
+                              <Loading />
+                            </Match>
+                            <Match when={form.userpic}>
+                              <Image width={180} alt={form.name} src={form.userpic} />
+                              <div class={styles.controls}>
+                                <Popover content={t('Delete userpic')}>
+                                  {(triggerRef: (el) => void) => (
+                                    <button
+                                      ref={triggerRef}
+                                      class={styles.control}
+                                      onClick={() => updateFormField('userpic', '')}
+                                    >
+                                      <Icon name="close" />
+                                    </button>
+                                  )}
+                                </Popover>
+                                <Popover content={t('Upload userpic')}>
+                                  {(triggerRef: (el) => void) => (
+                                    <button
+                                      ref={triggerRef}
+                                      class={styles.control}
+                                      onClick={handleUploadAvatar}
+                                    >
+                                      <Icon name="user-image-black" />
+                                    </button>
+                                  )}
+                                </Popover>
+                              </div>
+                            </Match>
+                            <Match when={!form.userpic}>
+                              <Icon name="user-image-gray" />
+                              {t('Here you can upload your photo')}
+                            </Match>
+                          </Switch>
+                        </div>
                         <Show when={uploadError()}>
                           <div class={styles.error}>{t('Upload error')}</div>
                         </Show>