fix labeling and rename some strings
This commit is contained in:
parent
18a6e7c7c1
commit
a565f7c5df
9 changed files with 40 additions and 38 deletions
|
@ -707,4 +707,11 @@ export const icons = {
|
||||||
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
|
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
|
||||||
</g>
|
</g>
|
||||||
),
|
),
|
||||||
|
[ICONS.POST]: buildIcon(
|
||||||
|
<g>
|
||||||
|
<path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z" />
|
||||||
|
<line x1="16" y1="8" x2="2" y2="22" />
|
||||||
|
<line x1="17.5" y1="15" x2="9" y2="15" />
|
||||||
|
</g>
|
||||||
|
),
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { selectIsStillEditing, makeSelectPublishFormValue, doUpdatePublishForm } from 'lbry-redux';
|
import { selectIsStillEditing, makeSelectPublishFormValue, doUpdatePublishForm } from 'lbry-redux';
|
||||||
import StoryEditor from './view';
|
import PostEditor from './view';
|
||||||
|
|
||||||
const select = (state, props) => ({
|
const select = (state, props) => ({
|
||||||
filePath: makeSelectPublishFormValue('filePath')(state),
|
filePath: makeSelectPublishFormValue('filePath')(state),
|
||||||
|
@ -12,4 +12,4 @@ const perform = dispatch => ({
|
||||||
updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
|
updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
|
||||||
});
|
});
|
||||||
|
|
||||||
export default connect(select, perform)(StoryEditor);
|
export default connect(select, perform)(PostEditor);
|
|
@ -19,7 +19,7 @@ type Props = {
|
||||||
setCurrentFileType: string => void,
|
setCurrentFileType: string => void,
|
||||||
};
|
};
|
||||||
|
|
||||||
function StoryEditor(props: Props) {
|
function PostEditor(props: Props) {
|
||||||
const {
|
const {
|
||||||
uri,
|
uri,
|
||||||
label,
|
label,
|
||||||
|
@ -37,7 +37,7 @@ function StoryEditor(props: Props) {
|
||||||
|
|
||||||
const [ready, setReady] = React.useState(!editing);
|
const [ready, setReady] = React.useState(!editing);
|
||||||
const [loading, setLoading] = React.useState(false);
|
const [loading, setLoading] = React.useState(false);
|
||||||
const [advancedEditor, setAdvancedEditor] = usePersistedState('publish-form-story-mode', false);
|
const [advancedEditor, setAdvancedEditor] = usePersistedState('publish-form-post-mode', false);
|
||||||
const { streamingUrl } = useFetchStreamingUrl(uri);
|
const { streamingUrl } = useFetchStreamingUrl(uri);
|
||||||
|
|
||||||
function toggleMarkdown() {
|
function toggleMarkdown() {
|
||||||
|
@ -101,9 +101,9 @@ function StoryEditor(props: Props) {
|
||||||
return (
|
return (
|
||||||
<FormField
|
<FormField
|
||||||
type={!SIMPLE_SITE && advancedEditor ? 'markdown' : 'textarea'}
|
type={!SIMPLE_SITE && advancedEditor ? 'markdown' : 'textarea'}
|
||||||
name="content_story"
|
name="content_post"
|
||||||
label={label}
|
label={label}
|
||||||
placeholder={__('My content for this story...')}
|
placeholder={__('My content for this post...')}
|
||||||
value={ready ? fileText : __('Loading...')}
|
value={ready ? fileText : __('Loading...')}
|
||||||
disabled={!ready || disabled}
|
disabled={!ready || disabled}
|
||||||
onChange={value => updatePublishForm({ fileText: advancedEditor ? value : value.target.value })}
|
onChange={value => updatePublishForm({ fileText: advancedEditor ? value : value.target.value })}
|
||||||
|
@ -114,4 +114,4 @@ function StoryEditor(props: Props) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default StoryEditor;
|
export default PostEditor;
|
|
@ -1,6 +1,6 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { doUpdatePublishForm, makeSelectPublishFormValue } from 'lbry-redux';
|
import { doUpdatePublishForm, makeSelectPublishFormValue } from 'lbry-redux';
|
||||||
import PublishPage from './view';
|
import PublishDescription from './view';
|
||||||
|
|
||||||
const select = state => ({
|
const select = state => ({
|
||||||
description: makeSelectPublishFormValue('description')(state),
|
description: makeSelectPublishFormValue('description')(state),
|
||||||
|
@ -10,4 +10,4 @@ const perform = dispatch => ({
|
||||||
updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
|
updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
|
||||||
});
|
});
|
||||||
|
|
||||||
export default connect(select, perform)(PublishPage);
|
export default connect(select, perform)(PublishDescription);
|
||||||
|
|
|
@ -12,7 +12,7 @@ type Props = {
|
||||||
updatePublishForm: ({}) => void,
|
updatePublishForm: ({}) => void,
|
||||||
};
|
};
|
||||||
|
|
||||||
function PublishText(props: Props) {
|
function PublishDescription(props: Props) {
|
||||||
const { description, updatePublishForm, disabled } = props;
|
const { description, updatePublishForm, disabled } = props;
|
||||||
const [advancedEditor, setAdvancedEditor] = usePersistedState('publish-form-description-mode', false);
|
const [advancedEditor, setAdvancedEditor] = usePersistedState('publish-form-description-mode', false);
|
||||||
function toggleMarkdown() {
|
function toggleMarkdown() {
|
||||||
|
@ -45,4 +45,4 @@ function PublishText(props: Props) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default PublishText;
|
export default PublishDescription;
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
import * as ICONS from 'constants/icons';
|
import * as ICONS from 'constants/icons';
|
||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { regexInvalidURI } from 'lbry-redux';
|
import { regexInvalidURI } from 'lbry-redux';
|
||||||
import StoryEditor from 'component/storyEditor';
|
import PostEditor from 'component/postEditor';
|
||||||
import FileSelector from 'component/common/file-selector';
|
import FileSelector from 'component/common/file-selector';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
import Card from 'component/common/card';
|
import Card from 'component/common/card';
|
||||||
|
@ -80,7 +80,7 @@ function PublishFile(props: Props) {
|
||||||
|
|
||||||
// Reset filePath if publish mode changed
|
// Reset filePath if publish mode changed
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (mode === PUBLISH_MODES.STORY) {
|
if (mode === PUBLISH_MODES.POST) {
|
||||||
if (currentFileType !== 'text/markdown' && !isStillEditing) {
|
if (currentFileType !== 'text/markdown' && !isStillEditing) {
|
||||||
updatePublishForm({ filePath: '', name: '' });
|
updatePublishForm({ filePath: '', name: '' });
|
||||||
}
|
}
|
||||||
|
@ -264,7 +264,7 @@ function PublishFile(props: Props) {
|
||||||
reader.addEventListener('load', event => {
|
reader.addEventListener('load', event => {
|
||||||
const text = event.target.result;
|
const text = event.target.result;
|
||||||
updatePublishForm({ fileText: text });
|
updatePublishForm({ fileText: text });
|
||||||
setPublishMode(PUBLISH_MODES.STORY);
|
setPublishMode(PUBLISH_MODES.POST);
|
||||||
});
|
});
|
||||||
// Read file contents
|
// Read file contents
|
||||||
reader.readAsText(file);
|
reader.readAsText(file);
|
||||||
|
@ -313,7 +313,7 @@ function PublishFile(props: Props) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const isPublishFile = mode === PUBLISH_MODES.FILE;
|
const isPublishFile = mode === PUBLISH_MODES.FILE;
|
||||||
const isPublishStory = mode === PUBLISH_MODES.STORY;
|
const isPublishPost = mode === PUBLISH_MODES.POST;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
|
@ -340,9 +340,9 @@ function PublishFile(props: Props) {
|
||||||
{isPublishFile && (
|
{isPublishFile && (
|
||||||
<FileSelector disabled={disabled} currentPath={currentFile} onFileChosen={handleFileChange} />
|
<FileSelector disabled={disabled} currentPath={currentFile} onFileChosen={handleFileChange} />
|
||||||
)}
|
)}
|
||||||
{isPublishStory && (
|
{isPublishPost && (
|
||||||
<StoryEditor
|
<PostEditor
|
||||||
label={__('Story content')}
|
label={__('Post')}
|
||||||
uri={uri}
|
uri={uri}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
fileMimeType={fileMimeType}
|
fileMimeType={fileMimeType}
|
||||||
|
|
|
@ -118,8 +118,8 @@ function PublishForm(props: Props) {
|
||||||
|
|
||||||
const TAGS_LIMIT = 5;
|
const TAGS_LIMIT = 5;
|
||||||
const fileFormDisabled = mode === PUBLISH_MODES.FILE && !filePath;
|
const fileFormDisabled = mode === PUBLISH_MODES.FILE && !filePath;
|
||||||
const emptyStoryError = mode === PUBLISH_MODES.STORY && (!fileText || fileText.trim() === '');
|
const emptyPostError = mode === PUBLISH_MODES.POST && (!fileText || fileText.trim() === '');
|
||||||
const formDisabled = (fileFormDisabled && !editingURI) || emptyStoryError || publishing;
|
const formDisabled = (fileFormDisabled && !editingURI) || emptyPostError || publishing;
|
||||||
const isInProgress = filePath || editingURI || name || title;
|
const isInProgress = filePath || editingURI || name || title;
|
||||||
// Editing content info
|
// Editing content info
|
||||||
const uri = myClaimForUri ? myClaimForUri.permanent_url : undefined;
|
const uri = myClaimForUri ? myClaimForUri.permanent_url : undefined;
|
||||||
|
@ -132,7 +132,7 @@ function PublishForm(props: Props) {
|
||||||
title &&
|
title &&
|
||||||
bid &&
|
bid &&
|
||||||
!bidError &&
|
!bidError &&
|
||||||
!emptyStoryError &&
|
!emptyPostError &&
|
||||||
!(uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS);
|
!(uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS);
|
||||||
|
|
||||||
const isOverwritingExistingClaim = !editingURI && myClaimForUri;
|
const isOverwritingExistingClaim = !editingURI && myClaimForUri;
|
||||||
|
@ -200,7 +200,7 @@ function PublishForm(props: Props) {
|
||||||
// @if TARGET='web'
|
// @if TARGET='web'
|
||||||
function createWebFile() {
|
function createWebFile() {
|
||||||
if (fileText) {
|
if (fileText) {
|
||||||
const fileName = name || title || 'story';
|
const fileName = name || title;
|
||||||
return new File([fileText], `${fileName}.md`, { type: 'text/markdown' });
|
return new File([fileText], `${fileName}.md`, { type: 'text/markdown' });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -212,7 +212,7 @@ function PublishForm(props: Props) {
|
||||||
let output = filePath;
|
let output = filePath;
|
||||||
if (!output || output === '') {
|
if (!output || output === '') {
|
||||||
// Generate a temporary file:
|
// Generate a temporary file:
|
||||||
output = tempy.file({ name: 'story.md' });
|
output = tempy.file({ name: 'post.md' });
|
||||||
}
|
}
|
||||||
// Create a temporary file and save file changes
|
// Create a temporary file and save file changes
|
||||||
if (typeof output === 'string') {
|
if (typeof output === 'string') {
|
||||||
|
@ -227,19 +227,13 @@ function PublishForm(props: Props) {
|
||||||
}
|
}
|
||||||
// @endif
|
// @endif
|
||||||
|
|
||||||
function verifyStoryContent() {
|
|
||||||
const isEmpty = !fileText || fileText.length === 0 || fileText.trim() === '';
|
|
||||||
// TODO: Verify file size limit, and character size as well ?
|
|
||||||
return !isEmpty;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handlePublish() {
|
async function handlePublish() {
|
||||||
// Publish story:
|
// Publish post:
|
||||||
// If here is no file selected yet on desktop, show file dialog and let the
|
// If here is no file selected yet on desktop, show file dialog and let the
|
||||||
// user choose a file path. On web a new File is created
|
// user choose a file path. On web a new File is created
|
||||||
const validStory = verifyStoryContent();
|
const validPost = !emptyPostError;
|
||||||
|
|
||||||
if (mode === PUBLISH_MODES.STORY) {
|
if (mode === PUBLISH_MODES.POST) {
|
||||||
let outputFile = filePath;
|
let outputFile = filePath;
|
||||||
// If user modified content on the text editor:
|
// If user modified content on the text editor:
|
||||||
// Save changes and updat file path
|
// Save changes and updat file path
|
||||||
|
@ -253,11 +247,11 @@ function PublishForm(props: Props) {
|
||||||
// @endif
|
// @endif
|
||||||
|
|
||||||
// New content stored locally and is not empty
|
// New content stored locally and is not empty
|
||||||
if (outputFile && validStory) {
|
if (outputFile && validPost) {
|
||||||
updatePublishForm({ filePath: outputFile });
|
updatePublishForm({ filePath: outputFile });
|
||||||
publish(outputFile);
|
publish(outputFile);
|
||||||
}
|
}
|
||||||
} else if (validStory && outputFile) {
|
} else if (validPost && outputFile) {
|
||||||
publish(outputFile);
|
publish(outputFile);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -274,9 +268,9 @@ function PublishForm(props: Props) {
|
||||||
// Update mode on editing
|
// Update mode on editing
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (autoSwitchMode && editingURI && myClaimForUri) {
|
if (autoSwitchMode && editingURI && myClaimForUri) {
|
||||||
// Change publish mode to "story" if editing content type is markdown
|
// Change publish mode to "post" if editing content type is markdown
|
||||||
if (fileMimeType === 'text/markdown' && mode !== PUBLISH_MODES.STORY) {
|
if (fileMimeType === 'text/markdown' && mode !== PUBLISH_MODES.POST) {
|
||||||
setMode(PUBLISH_MODES.STORY);
|
setMode(PUBLISH_MODES.POST);
|
||||||
// Prevent forced mode
|
// Prevent forced mode
|
||||||
setAutoSwitchMode(false);
|
setAutoSwitchMode(false);
|
||||||
}
|
}
|
||||||
|
|
|
@ -95,6 +95,7 @@ export const VIDEO = 'Video';
|
||||||
export const VOLUME_MUTED = 'VolumeX';
|
export const VOLUME_MUTED = 'VolumeX';
|
||||||
export const TEXT = 'FileText';
|
export const TEXT = 'FileText';
|
||||||
export const DOWNLOADABLE = 'Downloadable';
|
export const DOWNLOADABLE = 'Downloadable';
|
||||||
|
export const POST = 'Post';
|
||||||
export const REPOST = 'Repeat';
|
export const REPOST = 'Repeat';
|
||||||
export const VALIDATED = 'Check';
|
export const VALIDATED = 'Check';
|
||||||
export const SLIDERS = 'Sliders';
|
export const SLIDERS = 'Sliders';
|
||||||
|
|
|
@ -1,2 +1,2 @@
|
||||||
export const FILE = 'File';
|
export const FILE = 'File';
|
||||||
export const STORY = 'Story';
|
export const POST = 'Post';
|
||||||
|
|
Loading…
Add table
Reference in a new issue