discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Editor panel

Browse Source
This commit is contained in:
kvakazyambra 2023-04-07 00:40:34 +03:00
parent 59c1f1b3a5
commit c3378d3c7b
7 changed files with 325 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/icons/burger.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 242 B

3
public/icons/pencil.svg
View File

@ -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>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 715 B

After

Width:  |  Height:  |  Size: 724 B

7
public/locales/ru/translation.json
View File

@ -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": "Причина неизвестна",
@ -149,6 +155,7 @@
"Restore password": "Восстановить пароль",
"Save": "Сохранить",
"Save settings": "Сохранить настройки",
"Save draft": "Сохранить черновик",
"Search": "Поиск",
"Search author": "Поиск автора",
"Search topic": "Поиск темы",

4
src/components/Nav/HeaderAuth.tsx
View File

@ -72,6 +72,10 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
<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()}>

87
src/components/Views/Create.module.scss
View File

@ -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%);
}

93
src/components/Views/Create.tsx
View File

@ -12,6 +12,8 @@ import { router, useRouter } from '../../stores/router'
import { getPagePath } 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
@ -30,6 +32,7 @@ export const CreateView = () => {
const { page } = useRouter()
const [isSlugChanged, setIsSlugChanged] = createSignal(false)
const [isEditorPanelOPened, setIsEditorPanelOPened] = createSignal(false)
const [form, setForm] = createStore<ShoutForm>({
slug: '',
@ -82,7 +85,12 @@ export const CreateView = () => {
setForm('slug', slug)
}
const toggleEditorPanel = () => {
setIsEditorPanelOPened(!isEditorPanelOPened())
}
return (
<>
<div class={styles.container}>
<Title>{t('Write an article')}</Title>
@ -217,6 +225,91 @@ export const CreateView = () => {
</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>
<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>
</>
)
}

12
src/components/_shared/Button/Button.module.scss
View File

@ -50,13 +50,25 @@
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;
}
}