-
-
-
-
+ handleAddMedia(data)}
+ onVideoDelete={(index) => handleMediaDelete(index)}
+ />
+
+
+
+ handleAddMedia(value)}
+ onAudioChange={handleMediaChange}
+ onAudioSorted={(value) => handleSortedMedia(value)}
+ />
+
+
+
+
+
-
+
+
- handleTitleInputChange(value)}
- class={styles.titleInput}
- placeholder={articleTitle()}
- initialValue={form.title}
- maxLength={100}
- />
-
-
-
-
-
-
-
-
+
+ <>
+
- handleMediaDelete(index)}
- onImagesAdd={(value) => handleAddMedia(value)}
- onImagesSorted={(value) => handleSortedMedia(value)}
- />
-
-
-
- handleAddMedia(data)}
- onVideoDelete={(index) => handleMediaDelete(index)}
- />
-
-
-
- handleAddMedia(value)}
- onAudioChange={handleMediaChange}
- onAudioSorted={(value) => handleSortedMedia(value)}
- />
-
-
- {formErrors.title}
-
- handleBaseFieldsChange('artist', event.target.value)}
- />
- handleBaseFieldsChange('date', event.target.value)}
- />
- handleBaseFieldsChange('genre', event.target.value)}
- />
-
-
+
setForm('subtitle', value)}
- class={styles.subtitleInput}
- placeholder={t('Subheader')}
- initialValue={form.subtitle}
+ allowEnterKey={true}
+ value={(value) => handleTitleInputChange(value)}
+ class={styles.titleInput}
+ placeholder={articleTitle()}
+ initialValue={form.title}
maxLength={100}
/>
-
-
-
-
- {t('min. 1400×1400 pix')}
-
- {t('jpg, .png, max. 10 mb.')} - - } - isMultiply={false} - fileType={'image'} - onUpload={(val) => setForm('coverImageUrl', val[0].url)} + +
+
+
+
+
+
+
+ setForm('subtitle', value)}
+ class={styles.subtitleInput}
+ placeholder={t('Subheader')}
+ initialValue={form.subtitle}
+ maxLength={100}
/>
- }
- >
-
-
-
-
-
- - {t('jpg, .png, max. 10 mb.')} - - } - isMultiply={false} - fileType={'image'} - onUpload={(val) => setForm('coverImageUrl', val[0].url)} + +
{formErrors.title}
+
+ handleBaseFieldsChange('artist', event.target.value)}
+ />
+ handleBaseFieldsChange('date', event.target.value)}
+ />
+ handleBaseFieldsChange('genre', event.target.value)}
+ />
+
+
-
+ handleMediaDelete(index)}
+ onImagesAdd={(value) => handleAddMedia(value)}
+ onImagesSorted={(value) => handleSortedMedia(value)}
+ />
-
- {t('Publish Settings')}
- -Slug
-
-
-
-
-
- {/*Лид
*/} - {/**/}
- {/* */}
- {/* */}
- {/*
*/}
-
- {/*Выбор сообщества
*/} - {/*Сообщества можно перечислить через запятую
*/} - {/**/}
- {/*
*/}
-
- {t('Topics')}
- {/**/} - {/* Добавьте несколько тем, чтобы читатель знал, о чем ваш материал, и мог найти*/} - {/* его на страницах интересных ему тем. Темы можно менять местами, первая тема*/} - {/* становится заглавной*/} - {/*
*/} -
-
-
-
-
- {/*
-
- setForm('mainTopic', mainTopic)}
- mainTopic={form.mainTopic}
- />
-
-
- {formErrors.selectedTopics}
- Соавторы
*/} - {/*У каждого соавтора можно добавить роль
*/} - {/**/} - - {/**/}
- {/*
*/}
-
- Михаил Драбкин
*/}
- {/* */}
- {/* */}
- {/*
*/}
- {/*{t('Material card')}
-- {t( - 'Choose a title image for the article. You can immediately see how the publication card will look like.' - )} -
-
-
-
+
+ {t('min. 1400×1400 pix')}
+
+ {t('jpg, .png, max. 10 mb.')} + + } + isMultiply={false} + fileType={'image'} + onUpload={(val) => setForm('coverImageUrl', val[0].url)} + /> + } + > + +
+
+
+
+
-
-
-
+
- )
-
+
+ {t('jpg, .png, max. 10 mb.')} + + } + isMultiply={false} + fileType={'image'} + onUpload={(val) => setForm('coverImageUrl', val[0].url)} + /> + } + > + +
{form.title}
- {form.subtitle}
- {user().name}
-
+
+ handleUploadModalContentCloseSetCover(value)} />
+
+
+ )
+}
diff --git a/src/components/Views/PublishSettings/index.ts b/src/components/Views/PublishSettings/index.ts
new file mode 100644
index 00000000..500c89ca
--- /dev/null
+++ b/src/components/Views/PublishSettings/index.ts
@@ -0,0 +1 @@
+export { PublishSettings } from './PublishSettings'
diff --git a/src/components/_shared/GrowingTextarea/GrowingTextarea.module.scss b/src/components/_shared/GrowingTextarea/GrowingTextarea.module.scss
index 0149af68..81b706eb 100644
--- a/src/components/_shared/GrowingTextarea/GrowingTextarea.module.scss
+++ b/src/components/_shared/GrowingTextarea/GrowingTextarea.module.scss
@@ -3,6 +3,14 @@
width: 100%;
position: relative;
+ &.bordered {
+ box-sizing: border-box;
+ padding: 16px 12px;
+ border-radius: 2px;
+ border: 2px solid var(--black-100);
+ background: var(--white-500, #fff);
+ }
+
.growWrap {
display: grid;
width: 100%;
@@ -40,14 +48,16 @@
white-space: pre-wrap;
word-wrap: break-word;
overflow: hidden;
+ line-height: 1.2;
grid-area: 1 / 1 / 2 / 2;
width: 100%;
padding: 0;
+ margin: 0;
}
}
.maxLength {
- color: #000;
+ color: var(--default-color);
opacity: 1;
position: absolute;
z-index: 1;
@@ -60,7 +70,7 @@
line-height: 1;
user-select: none;
transition: opacity 0.3s ease-in-out;
- background: rgb(255 255 255 / 80%);
+ background: var(--white-500);
&.visible {
opacity: 1;
@@ -71,6 +81,13 @@
animation-iteration-count: 2;
}
}
+
+ &.bordered .maxLength {
+ opacity: 1;
+ font-weight: 500;
+ border: unset;
+ bottom: 0;
+ }
}
@keyframes blink {
diff --git a/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx b/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx
index 7fdc7f8f..d5e70faf 100644
--- a/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx
+++ b/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx
@@ -1,6 +1,7 @@
import { clsx } from 'clsx'
import styles from './GrowingTextarea.module.scss'
-import { createSignal, Show } from 'solid-js'
+import { createSignal, Show, Switch } from 'solid-js'
+import { style } from 'solid-js/web'
type Props = {
class?: string
@@ -9,6 +10,7 @@ type Props = {
value: (string) => void
maxLength?: number
allowEnterKey: boolean
+ variant?: 'bordered'
}
export const GrowingTextarea = (props: Props) => {
@@ -29,7 +31,7 @@ export const GrowingTextarea = (props: Props) => {
}
return (
-
+
+
+ {t('Publish Settings')}
+{t('Material card')}
+
+
+
+
+
+
+
+
+
+ })
+
+
+
+
+
+ {settingsForm.mainTopic.title}
+ {settingsForm.title}
+ {settingsForm.subtitle}
+ {user().name}
+ + {t( + 'Choose a title image for the article. You can immediately see how the publication card will look like.' + )} +
+ +
+ setSettingsForm('title', value)}
+ allowEnterKey={false}
+ maxLength={100}
+ />
+ setSettingsForm('subtitle', value)}
+ allowEnterKey={false}
+ maxLength={100}
+ />
+ MAX_LEAD_LIMIT - 1 && '...'}`}
+ value={(value) => setSettingsForm('lead', value)}
+ allowEnterKey={false}
+ maxLength={MAX_LEAD_LIMIT}
+ />
+
+
+ {t('Slug')}
+
+
+
+
+
+ {t('Topics')}
++ {t( + 'Add a few topics so that the reader knows what your content is about and can find it on pages of topics that interest them. Topics can be swapped, the first topic becomes the title' + )} +
+
+
+
+
+
+ {/*
+
+ setForm('mainTopic', mainTopic)}
+ mainTopic={props.form.mainTopic}
+ />
+
+
+ {formErrors.selectedTopics}
+ Соавторы
*/} + {/*У каждого соавтора можно добавить роль
*/} + {/**/} + + {/**/}
+ {/*
*/}
+
+ Михаил Драбкин
*/}
+ {/* */}
+ {/* */}
+ {/*
*/}
+ {/*
+
+
+
+
+
+