Feature/invite co authors modal (#341)

* Change parent branch

* Invite co-authors

* resolve conversation

* resolve conversation

public/locales/en/translation.json

@@ -2,6 +2,7 @@
   "A guide to horizontal editorial: how an open journal works": "A guide to horizontal editorial: how an open journal works",
   "About": "About",
   "About the project": "About the project",
+  "Add": "Add",
   "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",
   "Add a link or click plus to embed media": "Add a link or click plus to embed media",
   "Add an embed widget": "Add an embed widget",
@@ -59,6 +60,9 @@
   "By title": "By title",
   "By updates": "By updates",
   "By views": "By views",
+  "Can make any changes, accept or reject suggestions, and share access with others": "Can make any changes, accept or reject suggestions, and share access with others",
+  "Can offer edits and comments, but cannot edit the post or share access with others": "Can offer edits and comments, but cannot edit the post or share access with others",
+  "Can write and edit text directly, and accept or reject suggestions from others": "Can write and edit text directly, and accept or reject suggestions from others",
   "Cancel": "Cancel",
   "Cancel changes": "Cancel changes",
   "Characters": "Знаков",
@@ -66,11 +70,15 @@
   "Choose a post type": "Choose a post type",
   "Choose a title image for the article. You can immediately see how the publication card will look like.": "Choose a title image for the article. You can immediately see how the publication card will look like.",
   "Choose who you want to write to": "Choose who you want to write to",
+  "Co-author": "Co-author",
   "Collaborate": "Help Edit",
+  "Collaborators": "Collaborators",
   "Collections": "Collections",
   "Come up with a subtitle for your story": "Come up with a subtitle for your story",
   "Come up with a title for your story": "Come up with a title for your story",
+  "Coming soon": "Coming soon",
   "Comment successfully deleted": "Comment successfully deleted",
+  "Commentator": "Commentator",
   "Comments": "Comments",
   "Communities": "Communities",
   "Community Discussion Rules": "Community Discussion Rules",
@@ -119,6 +127,7 @@
   "Edit": "Edit",
   "Edit profile": "Edit profile",
   "Editing": "Editing",
+  "Editor": "Editor",
   "Email": "Mail",
   "Enter": "Enter",
   "Enter URL address": "Enter URL address",
@@ -191,6 +200,7 @@
   "Invalid image URL": "Invalid image URL",
   "Invalid url format": "Invalid url format",
   "Invite co-authors": "Invite co-authors",
+  "Invite collaborators": "Invite collaborators",
   "Invite to collab": "Invite to Collab",
   "It does not look like url": "It doesn't look like a link",
   "Italic": "Italic",
@@ -391,6 +401,7 @@
   "Video": "Video",
   "Video format not supported": "Video format not supported",
   "Views": "Views",
+  "We are working on collaborative editing of articles and in the near future you will have an amazing opportunity - to create together with your colleagues": "We are working on collaborative editing of articles and in the near future you will have an amazing opportunity - to create together with your colleagues",
   "We can't find you, check email or": "We can't find you, check email or",
   "We know you, please try to login": "This email address is already registered, please try to login",
   "We've sent you a message with a link to enter our website.": "We've sent you an email with a link to your email. Follow the link in the email to enter our website.",
@@ -413,6 +424,7 @@
   "Write good articles, comment\nand it won't be so empty here": "Write good articles, comment\nand it won't be so empty here",
   "Write message": "Write a message",
   "Write to us": "Write to us",
+  "Write your colleagues name or email": "Write your colleague's name or email",
   "You can download multiple tracks at once in .mp3, .wav or .flac formats": "You can download multiple tracks at once in .mp3, .wav or .flac formats",
   "You were successfully authorized": "You were successfully authorized",
   "You ll be able to participate in discussions, rate others' comments and learn about new responses": "You ll be able to participate in discussions, rate others' comments and learn about new responses",

public/locales/ru/translation.json

@@ -3,6 +3,7 @@
   "A short introduction to keep the reader interested": "Добавьте вступление, чтобы заинтересовать читателя",
   "About": "О себе",
   "About the project": "О проекте",
+  "Add": "Добавить",
   "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 link or click plus to embed media": "Добавьте ссылку или нажмите плюс для вставки медиа",
   "Add an embed widget": "Добавить embed-виджет",
@@ -62,6 +63,9 @@
   "By title": "По названию",
   "By updates": "По обновлениям",
   "By views": "По просмотрам",
+  "Can make any changes, accept or reject suggestions, and share access with others": "Может вносить любые изменения, принимать и отклонять предложения, а также делиться доступом с другими",
+  "Can offer edits and comments, but cannot edit the post or share access with others": "Может предлагать правки и комментарии, но не может изменять пост и делиться доступом с другими",
+  "Can write and edit text directly, and accept or reject suggestions from others": "Может писать и редактировать текст напрямую, а также принимать или отклонять предложения других",
   "Cancel": "Отмена",
   "Cancel changes": "Отменить изменения",
   "Characters": "Знаков",
@@ -69,12 +73,16 @@
   "Choose a post type": "Выберите тип публикации",
   "Choose a title image for the article. You can immediately see how the publication card will look like.": "Выберите заглавное изображение для статьи. Тут же сразу можно увидеть как будет выглядеть карточка публикации.",
   "Choose who you want to write to": "Выберите кому хотите написать",
+  "Co-author": "Соавтор",
   "Collaborate": "Помочь редактировать",
+  "Collaborators": "Соавторы",
   "Collections": "Коллекции",
   "Come up with a subtitle for your story": "Придумайте подзаголовок вашей истории",
   "Come up with a title for your story": "Придумайте заголовок вашей истории",
+  "Coming soon": "Уже скоро",
   "Comment": "Комментировать",
   "Comment successfully deleted": "Комментарий успешно удален",
+  "Commentator": "Комментатор",
   "Comments": "Комментарии",
   "Communities": "Сообщества",
   "Community Discussion Rules": "Правила дискуссий в сообществе",
@@ -125,6 +133,7 @@
   "Edit profile": "Редактировать профиль",
   "Edited": "Отредактирован",
   "Editing": "Редактирование",
+  "Editor": "Редактор",
   "Email": "Почта",
   "Enter": "Войти",
   "Enter URL address": "Введите адрес ссылки",
@@ -200,6 +209,7 @@
   "Invalid image URL": "Некорректная ссылка на изображение",
   "Invalid url format": "Неверный формат ссылки",
   "Invite co-authors": "Пригласить соавторов",
+  "Invite collaborators": "Пригласить соавторов",
   "Invite experts": "Пригласить экспертов",
   "Invite to collab": "Пригласить к участию",
   "It does not look like url": "Это не похоже на ссылку",
@@ -411,6 +421,7 @@
   "Video": "Видео",
   "Video format not supported": "Тип видео не поддерживается",
   "Views": "Просмотры",
+  "We are working on collaborative editing of articles and in the near future you will have an amazing opportunity - to create together with your colleagues": "Мы работаем над коллаборативным редактированием статей и в ближайшем времени у вас появиться удивительная возможность - творить вместе с коллегами",
   "We can't find you, check email or": "Не можем вас найти, проверьте адрес электронной почты или",
   "We know you, please try to login": "Такой адрес почты уже зарегистрирован, попробуйте залогиниться",
   "We've sent you a message with a link to enter our website.": "Мы выслали вам письмо с ссылкой на почту. Перейдите по ссылке в письме, чтобы войти на сайт.",
@@ -434,6 +445,7 @@
   "Write good articles, comment\nand it won't be so empty here": "Пишите хорошие статьи, комментируйте,\nи здесь станет не так пусто",
   "Write message": "Написать сообщение",
   "Write to us": "Напишите нам",
+  "Write your colleagues name or email": "Напишите имя или e-mail коллеги",
   "You can download multiple tracks at once in .mp3, .wav or .flac formats": "Можно загрузить сразу несколько треков в форматах .mp3, .wav или .flac",
   "You was successfully authorized": "Вы были успешно авторизованы",
   "You ll be able to participate in discussions, rate others' comments and learn about new responses": "Вы сможете участвовать в обсуждениях, оценивать комментарии других и узнавать о новых ответах",

src/components/Editor/Panel/Panel.tsx

@@ -7,6 +7,7 @@ import Typograf from 'typograf'
 import { useEditorContext } from '../../../context/editor'
 import { useLocalize } from '../../../context/localize'
 import { router } from '../../../stores/router'
+import { showModal } from '../../../stores/ui'
 import { useEscKeyDownHandler } from '../../../utils/useEscKeyDownHandler'
 import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler'
 import { Button } from '../../_shared/Button'
@@ -91,7 +92,9 @@ export const Panel = (props: Props) => {
 
         <section>
           <p>
-            <a class={styles.link}>{t('Invite co-authors')}</a>
+            <span class={styles.link} onClick={() => showModal('inviteCoAuthors')}>
+              {t('Invite co-authors')}
+            </span>
           </p>
           <p>
             <a

src/components/Views/Edit.tsx

@@ -15,6 +15,7 @@ import { isDesktop } from '../../utils/media-query'
 import { slugify } from '../../utils/slugify'
 import { DropArea } from '../_shared/DropArea'
 import { Icon } from '../_shared/Icon'
+import { InviteCoAuthorsModal } from '../_shared/InviteCoAuthorsModal'
 import { Popover } from '../_shared/Popover'
 import { EditorSwiper } from '../_shared/SolidSwiper'
 import { Editor, Panel } from '../Editor'
@@ -413,6 +414,7 @@ export const EditView = (props: Props) => {
         <PublishSettings shoutId={props.shout.id} form={form} />
       </Show>
       <Panel shoutId={props.shout.id} />
+      <InviteCoAuthorsModal />
     </>
   )
 }

src/components/Views/PublishSettings/PublishSettings.tsx

@@ -225,23 +225,12 @@ export const PublishSettings = (props: Props) => {
                 <div class={styles.validationError}>{formErrors.selectedTopics}</div>
               </Show>
             </div>
-
-            {/*<h4>Соавторы</h4>*/}
-            {/*<p class="description">У каждого соавтора можно добавить роль</p>*/}
-            {/*<div class="pretty-form__item--with-button">*/}
-            {/*  <div class="pretty-form__item">*/}
-            {/*    <input type="text" name="authors" id="authors" placeholder="Введите имя или e-mail" />*/}
-            {/*    <label for="authors">Введите имя или e-mail</label>*/}
-            {/*  </div>*/}
-            {/*  <button class="button button--submit">Добавить</button>*/}
-            {/*</div>*/}
-
-            {/*<div class="row">*/}
-            {/*  <div class="col-md-6">Михаил Драбкин</div>*/}
-            {/*  <div class="col-md-6">*/}
-            {/*    <input type="text" name="coauthor" id="coauthor1" class="nolabel" />*/}
-            {/*  </div>*/}
-            {/*</div>*/}
+            <h4>{t('Collaborators')}</h4>
+            <Button
+              variant="primary"
+              onClick={() => showModal('inviteCoAuthors')}
+              value={t('Invite collaborators')}
+            />
           </div>
         </div>
       </div>

src/components/_shared/DropdownSelect/DropdownSelect.module.scss

@@ -0,0 +1,71 @@
+.DropdownSelect {
+  position: relative;
+
+  .toggler {
+    @include font-size(1.3rem);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    cursor: pointer;
+
+    &::after {
+      content: '';
+      display: block;
+      width: 0;
+      height: 0;
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+      border-top: 6px solid var(--background-color-invert);
+    }
+
+    &.isOpen::after {
+      transform: rotate(-180deg);
+    }
+  }
+
+  .listItems {
+    position: absolute;
+    right: 0;
+    padding: 8px 10px;
+    min-width: 30vw;
+    top: calc(100% + 2px);
+    border: 2px solid var(--background-color-invert);
+    background: var(--background-color);
+    margin: 0;
+
+    li {
+      padding: 6px;
+      cursor: pointer;
+      list-style: none;
+      margin: 0;
+      transition: 0.3s ease-in-out;
+
+      .title {
+        @include font-size(1.6rem);
+
+        font-weight: 700 !important;
+        margin-bottom: 0;
+      }
+
+      .description {
+        @include font-size(1.2rem);
+
+        color: var(--default-color);
+        opacity: 0.5;
+        margin: 6px 0;
+      }
+
+      &:hover {
+        background: var(--background-color-invert);
+        color: var(--default-color-invert);
+
+        .description {
+          opacity: 1;
+          color: #9fa1a7;
+        }
+      }
+    }
+  }
+}

src/components/_shared/DropdownSelect/DropdownSelect.tsx

@@ -0,0 +1,61 @@
+import { clsx } from 'clsx'
+import { createSignal, For, Show } from 'solid-js'
+
+import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler'
+
+import styles from './DropdownSelect.module.scss'
+
+type FilterItem = {
+  title: string
+  description?: string
+}
+
+type Props = {
+  class?: string
+  selectItems: FilterItem[]
+}
+
+export const DropdownSelect = (props: Props) => {
+  const [selected, setSelected] = createSignal<FilterItem>(props.selectItems[0])
+  const [isDropDownVisible, setIsDropDownVisible] = createSignal(false)
+
+  const containerRef: { current: HTMLElement } = {
+    current: null,
+  }
+
+  const handleShowDropdown = () => {
+    setIsDropDownVisible(!isDropDownVisible())
+  }
+
+  useOutsideClickHandler({
+    containerRef,
+    predicate: () => isDropDownVisible(),
+    handler: () => setIsDropDownVisible(false),
+  })
+
+  return (
+    <div class={clsx(styles.DropdownSelect, props.class)}>
+      <div
+        class={clsx(styles.toggler, { [styles.isOpen]: isDropDownVisible() })}
+        onClick={handleShowDropdown}
+      >
+        <div>{selected().title}</div>
+      </div>
+
+      <Show when={isDropDownVisible()}>
+        <ul class={styles.listItems} ref={(el) => (containerRef.current = el)}>
+          <For each={props.selectItems}>
+            {(item) => (
+              <li>
+                <h3 class={styles.title}>{item.title}</h3>
+                <Show when={item.description}>
+                  <p class={styles.description}>{item.description}</p>
+                </Show>
+              </li>
+            )}
+          </For>
+        </ul>
+      </Show>
+    </div>
+  )
+}

src/components/_shared/DropdownSelect/index.ts

@@ -0,0 +1 @@
+export { DropdownSelect } from './DropdownSelect'

src/components/_shared/InviteCoAuthorsModal/InviteCoAuthorsModal.tsx

@@ -0,0 +1,14 @@
+import { useLocalize } from '../../../context/localize'
+import { Modal } from '../../Nav/Modal'
+import { UserSearch } from '../UserSearch'
+
+export const InviteCoAuthorsModal = () => {
+  const { t } = useLocalize()
+
+  return (
+    <Modal variant="medium" name="inviteCoAuthors">
+      <h2>{t('Invite collaborators')}</h2>
+      <UserSearch placeholder={t('Write your colleagues name or email')} onChange={() => {}} />
+    </Modal>
+  )
+}

src/components/_shared/InviteCoAuthorsModal/index.ts

@@ -0,0 +1 @@
+export { InviteCoAuthorsModal } from './InviteCoAuthorsModal'

src/components/_shared/UserSearch/UserSearch.module.scss

@@ -0,0 +1,50 @@
+.UserSearch {
+  .searchHeader {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    width: 100%;
+    gap: 1rem;
+  }
+
+  .field {
+    border-bottom: 2px solid var(--background-color-invert);
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    padding: 4px 0;
+    align-items: center;
+    width: 100%;
+  }
+
+  .input {
+    @include font-size(1.5rem);
+
+    border: none;
+    padding: 0;
+    margin: 0;
+    flex: 1;
+
+    &::placeholder {
+      color: #404040;
+    }
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .authors {
+    height: 400px;
+    overflow: auto;
+    padding: 1rem 0;
+  }
+
+  .teaser {
+    min-height: 300px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+}

src/components/_shared/UserSearch/UserSearch.tsx

@@ -0,0 +1,61 @@
+import { clsx } from 'clsx'
+
+import { useLocalize } from '../../../context/localize'
+import { Button } from '../Button'
+import { DropdownSelect } from '../DropdownSelect'
+
+import styles from './UserSearch.module.scss'
+
+type Props = {
+  class?: string
+  placeholder: string
+  onChange: (value: string) => void
+}
+
+export const UserSearch = (props: Props) => {
+  const { t } = useLocalize()
+  const roles = [
+    {
+      title: t('Editor'),
+      description: t('Can write and edit text directly, and accept or reject suggestions from others'),
+    },
+    {
+      title: t('Co-author'),
+      description: t('Can make any changes, accept or reject suggestions, and share access with others'),
+    },
+    {
+      title: t('Commentator'),
+      description: t('Can offer edits and comments, but cannot edit the post or share access with others'),
+    },
+  ]
+  const handleInputChange = (value: string) => {
+    props.onChange(value)
+  }
+
+  return (
+    <div class={clsx(styles.UserSearch, props.class)}>
+      <div class={styles.searchHeader}>
+        <div class={styles.field}>
+          <input
+            class={styles.input}
+            type="text"
+            placeholder={props.placeholder ?? t('Search')}
+            onChange={(e) => handleInputChange(e.target.value)}
+          />
+          <DropdownSelect selectItems={roles} />
+        </div>
+
+        <Button variant={'bordered'} size={'M'} value={t('Add')} />
+      </div>
+
+      <div class={styles.teaser}>
+        <h3>{t('Coming soon')}</h3>
+        <p>
+          {t(
+            'We are working on collaborative editing of articles and in the near future you will have an amazing opportunity - to create together with your colleagues',
+          )}
+        </p>
+      </div>
+    </div>
+  )
+}

src/components/_shared/UserSearch/index.ts

@@ -0,0 +1 @@
+export { UserSearch } from './UserSearch'

src/stores/ui.ts

@@ -23,6 +23,7 @@ export type ModalType =
   | 'editorInsertLink'
   | 'followers'
   | 'following'
+  | 'inviteCoAuthors'
 
 export const MODALS: Record<ModalType, ModalType> = {
   auth: 'auth',
@@ -38,6 +39,7 @@ export const MODALS: Record<ModalType, ModalType> = {
   editorInsertLink: 'editorInsertLink',
   followers: 'followers',
   following: 'following',
+  inviteCoAuthors: 'inviteCoAuthors',
 }
 
 const [modal, setModal] = createSignal<ModalType>(null)