diff --git a/public/icons/burger.svg b/public/icons/burger.svg new file mode 100644 index 00000000..cf903d0d --- /dev/null +++ b/public/icons/burger.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/pencil.svg b/public/icons/pencil.svg index f4efb296..39925e8e 100644 --- a/public/icons/pencil.svg +++ b/public/icons/pencil.svg @@ -1,3 +1,4 @@ - + diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index bde0c4d6..83d9c750 100644 --- a/public/locales/ru/translation.json +++ b/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": "Поиск темы", diff --git a/src/components/Nav/HeaderAuth.tsx b/src/components/Nav/HeaderAuth.tsx index 8183d7e6..04406f53 100644 --- a/src/components/Nav/HeaderAuth.tsx +++ b/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) => { - +
@@ -63,6 +64,20 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
+ +
+
+ +
+
+ +
+
+ +
@@ -70,7 +85,7 @@ export const HeaderAuth = (props: HeaderAuthProps) => { diff --git a/src/components/Views/Edit.module.scss b/src/components/Views/Edit.module.scss index 80839c8d..8ce5da1b 100644 --- a/src/components/Views/Edit.module.scss +++ b/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%); +} diff --git a/src/components/Views/Edit.tsx b/src/components/Views/Edit.tsx index e09ae27f..ee6c2f89 100644 --- a/src/components/Views/Edit.tsx +++ b/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({ slug: props.shout.slug, @@ -85,15 +88,19 @@ export const EditView = (props: EditViewProps) => { setForm('slug', slug) } - return ( -
- {t('Write an article')} + const toggleEditorPanel = () => { + setIsEditorPanelOPened(!isEditorPanelOPened()) + } -
-
-
+ return ( + <> +
+ {t('Write an article')} + + +
-
+
{
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+

+ Как написать хорошую статью +

+

+ Горячие клавиши +

+

+ Помощь +

+
+ +
+
+ Знаков: 2345 +
+
+ Слов: 215 +
+
+ Абзацев: 300 +
+
+ Посл. изм.: 22.03.22 в 18:20 +
+
+ + ) } diff --git a/src/components/_shared/Button/Button.module.scss b/src/components/_shared/Button/Button.module.scss index 50e510d7..70e0047f 100644 --- a/src/components/_shared/Button/Button.module.scss +++ b/src/components/_shared/Button/Button.module.scss @@ -37,13 +37,41 @@ line-height: 21px; color: #696969; - &.hover, - &.active { + &:hover, + &: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;