Added create article controls to the header
This commit is contained in:
parent
21282aad92
commit
59c1f1b3a5
|
|
@ -147,6 +147,7 @@
|
|||
"Report": "Пожаловаться",
|
||||
"Resend code": "Выслать подтверждение",
|
||||
"Restore password": "Восстановить пароль",
|
||||
"Save": "Сохранить",
|
||||
"Save settings": "Сохранить настройки",
|
||||
"Search": "Поиск",
|
||||
"Search author": "Поиск автора",
|
||||
|
|
|
|||
|
|
@ -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,16 @@ 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>
|
||||
</Show>
|
||||
|
||||
<Show when={visibleWarnings()}>
|
||||
<div class={clsx(styles.userControlItem, 'notifications')}>
|
||||
<Notifications />
|
||||
|
|
@ -70,7 +81,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">
|
||||
|
|
|
|||
|
|
@ -88,130 +88,128 @@ export const CreateView = () => {
|
|||
|
||||
<form onSubmit={handleFormSubmit}>
|
||||
<div class="wide-container">
|
||||
<div class="shift-content">
|
||||
<div class="row">
|
||||
<div class="col-md-20 col-lg-18 col-xl-16">
|
||||
<div
|
||||
class={clsx(styles.create, {
|
||||
[styles.visible]: page().route === 'create'
|
||||
})}
|
||||
>
|
||||
<input
|
||||
class={styles.titleInput}
|
||||
type="text"
|
||||
name="title"
|
||||
id="title"
|
||||
placeholder="Заголовок"
|
||||
value={form.title}
|
||||
onChange={handleTitleInputChange}
|
||||
/>
|
||||
<div class="row">
|
||||
<div class="col-md-19 col-lg-18 col-xl-16 offset-md-5">
|
||||
<div
|
||||
class={clsx(styles.create, {
|
||||
[styles.visible]: page().route === 'create'
|
||||
})}
|
||||
>
|
||||
<input
|
||||
class={styles.titleInput}
|
||||
type="text"
|
||||
name="title"
|
||||
id="title"
|
||||
placeholder="Заголовок"
|
||||
value={form.title}
|
||||
onChange={handleTitleInputChange}
|
||||
/>
|
||||
|
||||
<input
|
||||
class={styles.subtitleInput}
|
||||
type="text"
|
||||
name="subtitle"
|
||||
id="subtitle"
|
||||
placeholder="Подзаголовок"
|
||||
value={form.subtitle}
|
||||
onChange={(e) => setForm('subtitle', e.currentTarget.value)}
|
||||
/>
|
||||
<input
|
||||
class={styles.subtitleInput}
|
||||
type="text"
|
||||
name="subtitle"
|
||||
id="subtitle"
|
||||
placeholder="Подзаголовок"
|
||||
value={form.subtitle}
|
||||
onChange={(e) => setForm('subtitle', e.currentTarget.value)}
|
||||
/>
|
||||
|
||||
<Editor shoutId={42} onChange={(body) => setForm('body', body)} />
|
||||
<Editor shoutId={42} onChange={(body) => setForm('body', body)} />
|
||||
|
||||
<div class={styles.saveBlock}>
|
||||
{/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
|
||||
<a href={getPagePath(router, 'createSettings')}>Настройки</a>
|
||||
</div>
|
||||
<div class={styles.saveBlock}>
|
||||
{/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
|
||||
<a href={getPagePath(router, 'createSettings')}>Настройки</a>
|
||||
</div>
|
||||
<div
|
||||
class={clsx(styles.createSettings, {
|
||||
[styles.visible]: page().route === 'createSettings'
|
||||
})}
|
||||
>
|
||||
<h1>Настройки публикации</h1>
|
||||
</div>
|
||||
<div
|
||||
class={clsx(styles.createSettings, {
|
||||
[styles.visible]: page().route === 'createSettings'
|
||||
})}
|
||||
>
|
||||
<h1>Настройки публикации</h1>
|
||||
|
||||
<h4>Slug</h4>
|
||||
<div class="pretty-form__item">
|
||||
<input
|
||||
type="text"
|
||||
name="slug"
|
||||
id="slug"
|
||||
value={form.slug}
|
||||
onChange={handleSlugInputChange}
|
||||
<h4>Slug</h4>
|
||||
<div class="pretty-form__item">
|
||||
<input
|
||||
type="text"
|
||||
name="slug"
|
||||
id="slug"
|
||||
value={form.slug}
|
||||
onChange={handleSlugInputChange}
|
||||
/>
|
||||
<label for="slug">Slug</label>
|
||||
</div>
|
||||
|
||||
{/*<h4>Лид</h4>*/}
|
||||
{/*<div class="pretty-form__item">*/}
|
||||
{/* <textarea name="lead" id="lead" placeholder="Лид"></textarea>*/}
|
||||
{/* <label for="lead">Лид</label>*/}
|
||||
{/*</div>*/}
|
||||
|
||||
{/*<h4>Выбор сообщества</h4>*/}
|
||||
{/*<p class="description">Сообщества можно перечислить через запятую</p>*/}
|
||||
{/*<div class="pretty-form__item">*/}
|
||||
{/* <input*/}
|
||||
{/* type="text"*/}
|
||||
{/* name="community"*/}
|
||||
{/* id="community"*/}
|
||||
{/* placeholder="Сообщества"*/}
|
||||
{/* class="nolabel"*/}
|
||||
{/* />*/}
|
||||
{/*</div>*/}
|
||||
|
||||
<h4>Темы</h4>
|
||||
{/*<p class="description">*/}
|
||||
{/* Добавьте несколько тем, чтобы читатель знал, о чем ваш материал, и мог найти*/}
|
||||
{/* его на страницах интересных ему тем. Темы можно менять местами, первая тема*/}
|
||||
{/* становится заглавной*/}
|
||||
{/*</p>*/}
|
||||
<div class="pretty-form__item">
|
||||
<Show when={topics()}>
|
||||
<TopicSelect
|
||||
topics={topics()}
|
||||
onChange={(newSelectedTopics) => setForm('selectedTopics', newSelectedTopics)}
|
||||
selectedTopics={form.selectedTopics}
|
||||
/>
|
||||
<label for="slug">Slug</label>
|
||||
</div>
|
||||
</Show>
|
||||
{/*<input type="text" name="topics" id="topics" placeholder="Темы" class="nolabel" />*/}
|
||||
</div>
|
||||
|
||||
{/*<h4>Лид</h4>*/}
|
||||
{/*<div class="pretty-form__item">*/}
|
||||
{/* <textarea name="lead" id="lead" placeholder="Лид"></textarea>*/}
|
||||
{/* <label for="lead">Лид</label>*/}
|
||||
{/*</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>*/}
|
||||
|
||||
{/*<h4>Выбор сообщества</h4>*/}
|
||||
{/*<p class="description">Сообщества можно перечислить через запятую</p>*/}
|
||||
{/*<div class="pretty-form__item">*/}
|
||||
{/* <input*/}
|
||||
{/* type="text"*/}
|
||||
{/* name="community"*/}
|
||||
{/* id="community"*/}
|
||||
{/* placeholder="Сообщества"*/}
|
||||
{/* class="nolabel"*/}
|
||||
{/* />*/}
|
||||
{/*</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>Темы</h4>
|
||||
{/*<p class="description">*/}
|
||||
{/* Добавьте несколько тем, чтобы читатель знал, о чем ваш материал, и мог найти*/}
|
||||
{/* его на страницах интересных ему тем. Темы можно менять местами, первая тема*/}
|
||||
{/* становится заглавной*/}
|
||||
{/*</p>*/}
|
||||
<div class="pretty-form__item">
|
||||
<Show when={topics()}>
|
||||
<TopicSelect
|
||||
topics={topics()}
|
||||
onChange={(newSelectedTopics) => setForm('selectedTopics', newSelectedTopics)}
|
||||
selectedTopics={form.selectedTopics}
|
||||
/>
|
||||
</Show>
|
||||
{/*<input type="text" name="topics" id="topics" placeholder="Темы" class="nolabel" />*/}
|
||||
</div>
|
||||
<h4>Карточка материала на главной</h4>
|
||||
<p class="description">
|
||||
Выберите заглавное изображение для статьи, тут сразу можно увидеть как карточка будет
|
||||
выглядеть на главной странице
|
||||
</p>
|
||||
<div class={styles.articlePreview} />
|
||||
|
||||
{/*<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>Карточка материала на главной</h4>
|
||||
<p class="description">
|
||||
Выберите заглавное изображение для статьи, тут сразу можно увидеть как карточка будет
|
||||
выглядеть на главной странице
|
||||
<div class={styles.saveBlock}>
|
||||
<p>
|
||||
Проверьте ещё раз введённые данные, если всё верно, вы можете сохранить или
|
||||
опубликовать ваш текст
|
||||
</p>
|
||||
<div class={styles.articlePreview} />
|
||||
|
||||
<div class={styles.saveBlock}>
|
||||
<p>
|
||||
Проверьте ещё раз введённые данные, если всё верно, вы можете сохранить или
|
||||
опубликовать ваш текст
|
||||
</p>
|
||||
{/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
|
||||
<a href={getPagePath(router, 'create')}>Назад</a>
|
||||
<button type="submit" class={clsx('button button--submit', styles.button)}>
|
||||
Опубликовать
|
||||
</button>
|
||||
</div>
|
||||
{/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
|
||||
<a href={getPagePath(router, 'create')}>Назад</a>
|
||||
<button type="submit" class={clsx('button button--submit', styles.button)}>
|
||||
Опубликовать
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -37,13 +37,29 @@
|
|||
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;
|
||||
padding: 0;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: #000;
|
||||
border-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&:disabled:hover {
|
||||
cursor: default;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user