Merge remote-tracking branch 'gitlab/editor' into create-shout-2

public/icons/burger.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0.25H18V2.75H0V0.25ZM0 6.75H18V9.25H0V6.75ZM18 13.25H0V15.75H18V13.25Z" fill="black"/>
+</svg>

public/icons/pencil.svg

@@ -1,3 +1,4 @@
 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.80828 3.77898L0.439624 13.1393L0.00467497 17.078C-0.0505566 17.6022 0.391296 18.0506 0.9229 17.9954L4.86505 17.5608L14.2337 8.20049C14.2337 8.20049 14.3925 7.77972 14.2337 7.61417C14.0749 7.44862 10.402 3.78588 10.402 3.78588C10.2294 3.62033 9.96707 3.62033 9.80828 3.77898ZM17.1886 2.89606L15.1105 0.819817C14.4615 0.171422 14.2337 -0.644285 12.7701 0.819817C11.3064 2.28392 11.1753 2.41321 11.1753 2.41321C11.0165 2.57186 11.0165 2.83398 11.1753 2.99953L15.007 6.82782C15.1657 6.98647 15.4281 6.98647 15.5938 6.82782L17.1886 5.23442C18.6374 3.78588 17.8307 3.54446 17.1886 2.89606Z" fill="black"/>
+<path
+  d="M9.80828 3.77898L0.439624 13.1393L0.00467497 17.078C-0.0505566 17.6022 0.391296 18.0506 0.9229 17.9954L4.86505 17.5608L14.2337 8.20049C14.2337 8.20049 14.3925 7.77972 14.2337 7.61417C14.0749 7.44862 10.402 3.78588 10.402 3.78588C10.2294 3.62033 9.96707 3.62033 9.80828 3.77898ZM17.1886 2.89606L15.1105 0.819817C14.4615 0.171422 14.2337 -0.644285 12.7701 0.819817C11.3064 2.28392 11.1753 2.41321 11.1753 2.41321C11.0165 2.57186 11.0165 2.83398 11.1753 2.99953L15.007 6.82782C15.1657 6.98647 15.4281 6.98647 15.5938 6.82782L17.1886 5.23442C18.6374 3.78588 17.8307 3.54446 17.1886 2.89606Z" fill="currentColor"/>
 </svg>

public/locales/ru/translation.json

@@ -37,6 +37,7 @@
   "Cooperate": "Соучаствовать",
   "Copy": "Скопировать",
   "Copy link": "Скопировать ссылку",
+  "Corrections history": "История правок",
   "Create Chat": "Создать чат",
   "Create Group": "Создать группу",
   "Create account": "Создать аккаунт",
@@ -52,6 +53,7 @@
   "Drafts": "Черновики",
   "Edit": "Редактировать",
   "Edited": "Отредактирован",
+  "Editing": "Редактирование",
   "Email": "Почта",
   "Enter": "Войти",
   "Enter text": "Введите текст",
@@ -61,6 +63,7 @@
   "Error": "Ошибка",
   "Everything is ok, please give us your email address": "Ничего страшного, просто укажите свою почту, чтобы получить ссылку для сброса пароля.",
   "Favorite": "Избранное",
+  "FAQ": "Советы и предложения",
   "Favorite topics": "Избранные темы",
   "Feed settings": "Настройки ленты",
   "Feedback": "Обратная связь",
@@ -90,6 +93,7 @@
   "Independant magazine with an open horizontal cooperation about culture, science and society": "Независимый журнал с открытой горизонтальной редакцией о культуре, науке и обществе",
   "Introduce": "Представление",
   "Invalid email": "Проверьте правильность ввода почты",
+  "Invite co-authors": "Пригласить соавторов",
   "Invite experts": "Пригласить экспертов",
   "Invite to collab": "Пригласить к участию",
   "It does not look like url": "Это не похоже на ссылку",
@@ -134,11 +138,13 @@
   "Please, confirm email": "Пожалуйста, подтвердите электронную почту",
   "Popular": "Популярное",
   "Popular authors": "Популярные авторы",
+  "Preview": "Предпросмотр",
   "Principles": "Принципы сообщества",
   "Profile": "Профиль",
   "Profile settings": "Настройки профиля",
   "Profile successfully saved": "Профиль успешно сохранён",
   "Publications": "Публикации",
+  "Publication settings": "Настройки публикации",
   "Publish": "Опубликовать",
   "Quit": "Выйти",
   "Reason uknown": "Причина неизвестна",
@@ -147,7 +153,9 @@
   "Report": "Пожаловаться",
   "Resend code": "Выслать подтверждение",
   "Restore password": "Восстановить пароль",
+  "Save": "Сохранить",
   "Save settings": "Сохранить настройки",
+  "Save draft": "Сохранить черновик",
   "Search": "Поиск",
   "Search author": "Поиск автора",
   "Search topic": "Поиск темы",

src/components/Nav/HeaderAuth.tsx

@@ -13,6 +13,7 @@ import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
 import { useSession } from '../../context/session'
 import { useLocalize } from '../../context/localize'
 import { getPagePath } from '@nanostores/router'
+import { Button } from '../_shared/Button'
 
 type HeaderAuthProps = {
   setIsProfilePopupVisible: (value: boolean) => void
@@ -53,7 +54,7 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
               </div>
             </Show>
 
-            <Show when={isAuthenticated()}>
+            <Show when={isAuthenticated() && page().route !== 'create'}>
               <div class={styles.userControlItem}>
                 <a href="#" onClick={handleBellIconClick}>
                   <div>
@@ -63,6 +64,20 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
               </div>
             </Show>
 
+            <Show when={isAuthenticated() && page().route === 'create'}>
+              <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
+                <Button value={t('Save')} variant={'outline'} />
+              </div>
+
+              <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
+                <Button value={t('Publish')} variant={'outline'} />
+              </div>
+
+              <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
+                <Button value={<Icon name="burger" />} variant={'outline'} onClick={() => {}} />
+              </div>
+            </Show>
+
             <Show when={visibleWarnings()}>
               <div class={clsx(styles.userControlItem, 'notifications')}>
                 <Notifications />
@@ -70,7 +85,7 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
             </Show>
 
             <Show
-              when={isAuthenticated()}
+              when={isAuthenticated() && page().route !== 'create'}
               fallback={
                 <div class={clsx(styles.userControlItem, styles.userControlItemVerbose, 'loginbtn')}>
                   <a href="?modal=auth&mode=login">

src/components/Views/Edit.module.scss

@@ -1,3 +1,7 @@
+:global(.main-content) {
+  position: static;
+}
+
 .articlePreview {
   border: 2px solid #e8e8e8;
   min-height: 10em;
@@ -51,3 +55,86 @@
     display: block;
   }
 }
+
+.asidePanel {
+  background: #1f1f1f;
+  color: rgb(255 255 255 / 0.35);
+  display: flex;
+  flex-direction: column;
+  font-size: 1.7rem;
+  justify-content: flex-start;
+  height: 100%;
+  line-height: 1.4;
+  padding: $grid-gutter-width;
+  position: fixed;
+  transition: transform 0.3s;
+  right: 0;
+  top: 0;
+  z-index: 10;
+
+  .close {
+    filter: invert(1);
+    margin: -1.6rem 0 0 -1.6rem;
+  }
+
+  section {
+    border-bottom: 2px solid rgb(255 255 255 / 0.1);
+    //margin-bottom: 1.8rem;
+    margin-top: 1.8rem;
+    padding-bottom: 1.8rem;
+
+    p {
+      margin: 0.6em 0;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .button {
+    font-weight: normal;
+    margin-left: -1.6rem;
+
+    &:hover {
+      color: #fff;
+      text-decoration: none;
+    }
+  }
+
+  .buttonWithIcon {
+    margin-left: -1.6rem;
+
+    .icon {
+      filter: invert(0.5);
+      margin-right: 0.3em;
+      width: 1em;
+    }
+
+    img {
+      vertical-align: middle;
+    }
+  }
+
+  .stats {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: flex-end;
+    margin-top: 3em;
+  }
+
+  a {
+    color: rgb(255 255 255 / 0.35);
+    font-weight: normal !important;
+
+    &:hover {
+      background: none;
+      color: #fff;
+    }
+  }
+}
+
+.asidePanelHidden {
+  transform: translateX(100%);
+}

src/components/Views/Edit.tsx

@@ -11,6 +11,8 @@ import { router, useRouter } from '../../stores/router'
 import { getPagePath, openPage } from '@nanostores/router'
 import { translit } from '../../utils/ru2en'
 import { Editor } from '../Editor/Editor'
+import { Button } from '../_shared/Button'
+import { Icon } from '../_shared/Icon'
 
 type ShoutForm = {
   slug: string
@@ -33,6 +35,7 @@ export const EditView = (props: EditViewProps) => {
   const { page } = useRouter()
 
   const [isSlugChanged, setIsSlugChanged] = createSignal(false)
+  const [isEditorPanelOPened, setIsEditorPanelOPened] = createSignal(false)
 
   const [form, setForm] = createStore<ShoutForm>({
     slug: props.shout.slug,
@@ -85,15 +88,19 @@ export const EditView = (props: EditViewProps) => {
     setForm('slug', slug)
   }
 
-  return (
+  const toggleEditorPanel = () => {
-    <div class={styles.container}>
+    setIsEditorPanelOPened(!isEditorPanelOPened())
-      <Title>{t('Write an article')}</Title>
+  }
 
-      <form onSubmit={handleFormSubmit}>
+  return (
-        <div class="wide-container">
+    <>
-          <div class="shift-content">
+      <div class={styles.container}>
+        <Title>{t('Write an article')}</Title>
+
+        <form onSubmit={handleFormSubmit}>
+          <div class="wide-container">
             <div class="row">
-              <div class="col-md-20 col-lg-18 col-xl-16">
+              <div class="col-md-19 col-lg-18 col-xl-16 offset-md-5">
                 <div
                   class={clsx(styles.edit, {
                     [styles.visible]: page().route === 'edit'
@@ -225,9 +232,93 @@ export const EditView = (props: EditViewProps) => {
               </div>
             </div>
           </div>
+        </form>
+      </div>
+
+      <aside
+        class={clsx('col-md-6', styles.asidePanel, { [styles.asidePanelHidden]: !isEditorPanelOPened() })}
+      >
+        <div>
+          <Button
+            value={<Icon name="close" />}
+            variant={'inline'}
+            class={styles.close}
+            onClick={toggleEditorPanel}
+          />
         </div>
-      </form>
+
-    </div>
+        <section>
+          <Button value={t('Publish')} variant={'inline'} class={styles.button} />
+          <Button value={t('Save draft')} variant={'inline'} class={styles.button} />
+        </section>
+
+        <section>
+          <Button
+            value={
+              <>
+                <Icon name="eye" class={styles.icon} />
+                {t('Preview')}
+              </>
+            }
+            variant={'inline'}
+            class={clsx(styles.button, styles.buttonWithIcon)}
+          />
+          <Button
+            value={
+              <>
+                <Icon name="pencil-outline" class={styles.icon} />
+                {t('Editing')}
+              </>
+            }
+            variant={'inline'}
+            class={clsx(styles.button, styles.buttonWithIcon)}
+          />
+          <Button
+            value={
+              <>
+                <Icon name="feed-discussion" class={styles.icon} />
+                {t('FAQ')}
+              </>
+            }
+            variant={'inline'}
+            class={clsx(styles.button, styles.buttonWithIcon)}
+          />
+        </section>
+
+        <section>
+          <Button value={t('Invite co-authors')} variant={'inline'} class={styles.button} />
+          <Button value={t('Publication settings')} variant={'inline'} class={styles.button} />
+          <Button value={t('Corrections history')} variant={'inline'} class={styles.button} />
+        </section>
+
+        <section>
+          <p>
+            <a href="/how-to-write-a-good-article">Как написать хорошую статью</a>
+          </p>
+          <p>
+            <a href="#">Горячие клавиши</a>
+          </p>
+          <p>
+            <a href="#">Помощь</a>
+          </p>
+        </section>
+
+        <div class={styles.stats}>
+          <div>
+            Знаков: <em>2345</em>
+          </div>
+          <div>
+            Слов: <em>215</em>
+          </div>
+          <div>
+            Абзацев: <em>300</em>
+          </div>
+          <div>
+            Посл. изм.: <em>22.03.22 в 18:20</em>
+          </div>
+        </div>
+      </aside>
+    </>
   )
 }
 

src/components/_shared/Button/Button.module.scss

@@ -37,13 +37,41 @@
     line-height: 21px;
     color: #696969;
 
-    &.hover,
+    &:hover,
-    &.active {
+    &:active {
       text-decoration: underline;
       color: #141414;
     }
   }
 
+  &.outline {
+    border: 3px solid #f2f2f2;
+    border-radius: 1.2em;
+    cursor: pointer;
+    font-weight: bold;
+    margin-right: 0.8em;
+    min-width: auto !important;
+    padding: 0;
+    transition: border-color 0.3s, background-color 0.3s, color 0.3s;
+
+    &:hover,
+    &:active {
+      background: #000;
+      border-color: #000;
+      color: #fff;
+
+      :global(.icon) {
+        filter: invert(1);
+      }
+    }
+
+    :global(.icon) {
+      margin: 0 -0.5em;
+      filter: invert(0);
+      transition: filter 0.3s;
+    }
+  }
+
   &:disabled,
   &:disabled:hover {
     cursor: default;