From 525ca626fbdf06fc53474aa4b1e72a9acfb00d33 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Sat, 6 May 2023 18:04:50 +0300
Subject: [PATCH] Added scroll up button in the editor

---
 public/icons/up-button.svg            |  4 +++
 public/locales/en/translation.json    |  1 +
 public/locales/ru/translation.json    |  1 +
 src/components/Views/Edit.module.scss | 44 +++++++++++++++++++++++++++
 src/components/Views/Edit.tsx         | 13 ++++++++
 5 files changed, 63 insertions(+)
 create mode 100644 public/icons/up-button.svg

diff --git a/public/icons/up-button.svg b/public/icons/up-button.svg
new file mode 100644
index 00000000..a5a436ca
--- /dev/null
+++ b/public/icons/up-button.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="26" height="26" stroke="currentColor" stroke-width="2"/>
+<path d="M10 11H13V20H15V11H18L14 7L10 11Z" fill="currentColor"/>
+</svg>
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 087436bb..637bc0e0 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -166,6 +166,7 @@
   "Restore password": "Restore password",
   "Save draft": "Save draft",
   "Save settings": "Save settings",
+  "Scroll up": "Scroll up",
   "Search": "Search",
   "Search author": "Search author",
   "Search topic": "Search topic",
diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json
index d11e92d0..8ea0c002 100644
--- a/public/locales/ru/translation.json
+++ b/public/locales/ru/translation.json
@@ -187,6 +187,7 @@
   "Send": "Отправить",
   "Send link again": "Прислать ссылку ещё раз",
   "Settings": "Настройки",
+  "Scroll up": "Наверх",
   "Share": "Поделиться",
   "Short opening": "Небольшое вступление, чтобы заинтересовать читателя",
   "Show": "Показать",
diff --git a/src/components/Views/Edit.module.scss b/src/components/Views/Edit.module.scss
index f65a9d8a..46648131 100644
--- a/src/components/Views/Edit.module.scss
+++ b/src/components/Views/Edit.module.scss
@@ -13,6 +13,8 @@
 }
 
 .container {
+  position: relative;
+
   .titleInput,
   .subtitleInput {
     border: 0;
@@ -97,3 +99,45 @@
     }
   }
 }
+
+.scrollTopButton {
+  cursor: pointer;
+  left: 2rem;
+  position: sticky;
+  top: calc(100vh - 40px);
+  width: 2.8rem;
+  z-index: 2;
+
+  @include media-breakpoint-down(md) {
+    display: none;
+  }
+
+  @include media-breakpoint-up(xl) {
+    left: 4rem;
+  }
+
+  &:hover {
+    .icon {
+      opacity: 1;
+    }
+
+    .scrollTopButtonLabel {
+      display: block;
+    }
+  }
+
+  .icon {
+    opacity: 0.4;
+  }
+}
+
+.scrollTopButtonLabel {
+  display: none;
+  @include font-size(1.4rem);
+  font-weight: bold;
+  left: 100%;
+  padding-left: 0.5em;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx
index d871fda0..fac37216 100644
--- a/src/components/Views/Edit.tsx
+++ b/src/components/Views/Edit.tsx
@@ -13,6 +13,7 @@ import { translit } from '../../utils/ru2en'
 import { Editor } from '../Editor/Editor'
 import { Panel } from '../Editor/Panel'
 import { useEditorContext } from '../../context/editor'
+import { Icon } from '../_shared/Icon'
 
 type EditViewProps = {
   shout: Shout
@@ -73,8 +74,20 @@ export const EditView = (props: EditViewProps) => {
     setForm('slug', slug)
   }
 
+  const scrollTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }
+
   return (
     <>
+      <button class={styles.scrollTopButton} onClick={scrollTop}>
+        <Icon name="up-button" class={styles.icon} />
+        <span class={styles.scrollTopButtonLabel}>{t('Scroll up')}</span>
+      </button>
+
       <div class={styles.container}>
         <Title>{t('Write an article')}</Title>