bold, create page title
This commit is contained in:
bniwredyc
parent
64e7ec03f3
commit
293e7a06e4
|
|
@ -232,5 +232,6 @@
|
|||
"zine": "zine",
|
||||
"By time": "By time",
|
||||
"New only": "New only",
|
||||
"Short opening": "Short opening"
|
||||
"Short opening": "Short opening",
|
||||
"Write an article": "Write an article"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -250,5 +250,6 @@
|
|||
"zine": "журнал",
|
||||
"By time": "По порядку",
|
||||
"New only": "Только новые",
|
||||
"Short opening": "Небольшое вступление, чтобы заинтересовать читателя"
|
||||
"Short opening": "Небольшое вступление, чтобы заинтересовать читателя",
|
||||
"Write an article": "Написать статью"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import type { Editor } from '@tiptap/core'
|
|||
import styles from './EditorBubbleMenu.module.scss'
|
||||
import { Icon } from '../_shared/Icon'
|
||||
import { clsx } from 'clsx'
|
||||
import { createEditorTransaction } from 'solid-tiptap'
|
||||
|
||||
type BubbleMenuProps = {
|
||||
editor: Editor
|
||||
|
|
@ -9,12 +10,25 @@ type BubbleMenuProps = {
|
|||
}
|
||||
|
||||
export const EditorBubbleMenu = (props: BubbleMenuProps) => {
|
||||
const isBold = createEditorTransaction(
|
||||
() => props.editor,
|
||||
(editor) => editor && editor.isActive('bold')
|
||||
)
|
||||
|
||||
return (
|
||||
<div ref={props.ref} class={styles.bubbleMenu}>
|
||||
<button class={clsx(styles.bubbleMenuButton, styles.bubbleMenuButtonActive)}>
|
||||
<button class={clsx(styles.bubbleMenuButton)}>
|
||||
<Icon name="editor-text-size" />
|
||||
</button>
|
||||
<button class={styles.bubbleMenuButton}>
|
||||
<button
|
||||
class={clsx(styles.bubbleMenuButton, {
|
||||
[styles.bubbleMenuButtonActive]: isBold()
|
||||
})}
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
props.editor.commands.toggleBold()
|
||||
}}
|
||||
>
|
||||
<Icon name="editor-bold" />
|
||||
</button>
|
||||
<button class={styles.bubbleMenuButton}>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { Loading } from '../_shared/Loading'
|
|||
import { useLocalize } from '../../context/localize'
|
||||
import { clsx } from 'clsx'
|
||||
import styles from './Create.module.scss'
|
||||
import { Title } from '@solidjs/meta'
|
||||
|
||||
const Editor = lazy(() => import('../Editor/Editor'))
|
||||
|
||||
|
|
@ -10,98 +11,101 @@ export const CreateView = () => {
|
|||
const { t } = useLocalize()
|
||||
|
||||
return (
|
||||
<Suspense fallback={<Loading />}>
|
||||
<form>
|
||||
<div class="wide-container">
|
||||
<div class="shift-content">
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-lg-9 col-xl-8">
|
||||
<h4>Заголовок</h4>
|
||||
<div class="pretty-form__item">
|
||||
<input
|
||||
type="text"
|
||||
name="header"
|
||||
id="header"
|
||||
placeholder="Придумайте заголовок вашей истории"
|
||||
/>
|
||||
<label for="header">Придумайте заголовок вашей истории</label>
|
||||
</div>
|
||||
|
||||
<h4>Подзаголовок</h4>
|
||||
<div class="pretty-form__item">
|
||||
<input type="text" name="subheader" id="subheader" placeholder="Подзаголовок" />
|
||||
<label for="subheader">Подзаголовок</label>
|
||||
</div>
|
||||
|
||||
<Editor />
|
||||
|
||||
<h1>Настройки публикации</h1>
|
||||
{/*<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">
|
||||
<input type="text" name="topics" id="topics" placeholder="Темы" class="nolabel" />
|
||||
</div>
|
||||
|
||||
<h4>Соавторы</h4>
|
||||
<p class="description">У каждого соавтора можно добавить роль</p>
|
||||
<div class="pretty-form__item--with-button">
|
||||
<>
|
||||
<Title>{t('Write an article')}</Title>
|
||||
<Suspense fallback={<Loading />}>
|
||||
<form>
|
||||
<div class="wide-container">
|
||||
<div class="shift-content">
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-lg-9 col-xl-8">
|
||||
<h4>Заголовок</h4>
|
||||
<div class="pretty-form__item">
|
||||
<input type="text" name="authors" id="authors" placeholder="Введите имя или e-mail" />
|
||||
<label for="authors">Введите имя или e-mail</label>
|
||||
<input
|
||||
type="text"
|
||||
name="header"
|
||||
id="header"
|
||||
placeholder="Придумайте заголовок вашей истории"
|
||||
/>
|
||||
<label for="header">Придумайте заголовок вашей истории</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" />
|
||||
<h4>Подзаголовок</h4>
|
||||
<div class="pretty-form__item">
|
||||
<input type="text" name="subheader" id="subheader" placeholder="Подзаголовок" />
|
||||
<label for="subheader">Подзаголовок</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Карточка материала на главной</h4>
|
||||
<p class="description">
|
||||
Выберите заглавное изображение для статьи, тут сразу можно увидеть как карточка будет
|
||||
выглядеть на главной странице
|
||||
</p>
|
||||
<div class={styles.articlePreview}></div>
|
||||
<Editor />
|
||||
|
||||
<div class={styles.saveBlock}>
|
||||
<p>
|
||||
Проверьте ещё раз введённые данные, если всё верно, вы можете сохранить или
|
||||
опубликовать ваш текст
|
||||
<h1>Настройки публикации</h1>
|
||||
{/*<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>
|
||||
<button class={clsx('button button--outline', styles.button)}>Сохранить</button>
|
||||
<button class={clsx('button button--submit', styles.button)}>Опубликовать</button>
|
||||
<div class="pretty-form__item">
|
||||
<input type="text" name="topics" id="topics" placeholder="Темы" class="nolabel" />
|
||||
</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>
|
||||
|
||||
<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={styles.articlePreview}></div>
|
||||
|
||||
<div class={styles.saveBlock}>
|
||||
<p>
|
||||
Проверьте ещё раз введённые данные, если всё верно, вы можете сохранить или
|
||||
опубликовать ваш текст
|
||||
</p>
|
||||
<button class={clsx('button button--outline', styles.button)}>Сохранить</button>
|
||||
<button class={clsx('button button--submit', styles.button)}>Опубликовать</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Suspense>
|
||||
</form>
|
||||
</Suspense>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user