Merge pull request #1716 from lbryio/publish-fixes

Publish fixes

src/renderer/component/button/view.jsx

@@ -23,6 +23,7 @@ type Props = {
   noPadding: ?boolean, // to remove padding and allow circular buttons
   uppercase: ?boolean,
   iconColor: ?string,
+  tourniquet: ?boolean, // to shorten the button and ellipsis, only use for links
 };
 
 class Button extends React.PureComponent<Props> {
@@ -50,6 +51,7 @@ class Button extends React.PureComponent<Props> {
       noPadding,
       uppercase,
       iconColor,
+      tourniquet,
       ...otherProps
     } = this.props;
 
@@ -69,6 +71,7 @@ class Button extends React.PureComponent<Props> {
             'btn--link': button === 'link',
             'btn--external-link': button === 'link' && href,
             'btn--uppercase': uppercase,
+            'btn--tourniquet': tourniquet,
           }
         : 'btn--no-style',
       className

src/renderer/component/publishForm/internal/bid-help-text.jsx

@@ -25,11 +25,13 @@ class BidHelpText extends React.PureComponent<Props> {
     } = this.props;
 
     if (!uri) {
-      return __('Create a URL for this content');
+      return __('Create a URL for this content.');
     }
 
     if (isStillEditing) {
-      return __('You are currently editing this claim');
+      return __(
+        'You are currently editing this claim. If you change the URL, you will need reselect a file.'
+      );
     }
 
     if (isResolvingUri) {
@@ -61,10 +63,10 @@ class BidHelpText extends React.PureComponent<Props> {
       <React.Fragment>
         {__('A deposit greater than')} {winningBidForClaimUri} {__('is needed to win')}
         {` ${uri}. `}
-        {__('However, you can still get this URL for any amount')}
+        {__('However, you can still get this URL for any amount.')}
       </React.Fragment>
     ) : (
-      __('Any amount will give you the winning bid')
+      __('Any amount will give you the winning bid.')
     );
   }
 }

src/renderer/component/publishForm/view.jsx

@@ -244,32 +244,54 @@ class PublishForm extends React.PureComponent<Props> {
   }
 
   checkIsFormValid() {
-    const { name, nameError, title, bid, bidError, tosAccepted } = this.props;
-    return name && !nameError && title && bid && !bidError && tosAccepted;
+    const {
+      name,
+      nameError,
+      title,
+      bid,
+      bidError,
+      tosAccepted,
+      editingURI,
+      isStillEditing,
+      filePath,
+    } = this.props;
+
+    // If they are editing, they don't need a new file chosen
+    const formValidLessFile = name && !nameError && title && bid && !bidError && tosAccepted;
+    return editingURI && !filePath ? isStillEditing && formValidLessFile : formValidLessFile;
   }
 
   renderFormErrors() {
-    const { name, nameError, title, bid, bidError, tosAccepted } = this.props;
+    const {
+      name,
+      nameError,
+      title,
+      bid,
+      bidError,
+      tosAccepted,
+      editingURI,
+      filePath,
+      isStillEditing,
+    } = this.props;
 
-    if (nameError || bidError) {
-      // There will be inline errors if either of these exist
-      // These are just extra help at the bottom of the screen
-      // There could be multiple bid errors, so just duplicate it at the bottom
-      return (
-        <div className="card__subtitle form-field__error">
-          {nameError && <div>{__('The URL you created is not valid.')}</div>}
-          {bidError && <div>{bidError}</div>}
-        </div>
-      );
-    }
+    const isFormValid = this.checkIsFormValid();
 
+    // These are extra help
+    // If there is an error it will be presented as an inline error as well
     return (
-      <div className="card__content card__subtitle card__subtitle--block form-field__error">
+      !isFormValid && (
+        <div className="card__content card__subtitle form-field__error">
           {!title && <div>{__('A title is required')}</div>}
           {!name && <div>{__('A URL is required')}</div>}
+          {name && nameError && <div>{__('The URL you created is not valid')}</div>}
           {!bid && <div>{__('A bid amount is required')}</div>}
+          {!!bid && bidError && <div>{bidError}</div>}
           {!tosAccepted && <div>{__('You must agree to the terms of service')}</div>}
+          {!!editingURI &&
+            !isStillEditing &&
+            !filePath && <div>{__('You need to reselect a file after changing the LBRY URL')}</div>}
         </div>
+      )
     );
   }
 
@@ -319,10 +341,10 @@ class PublishForm extends React.PureComponent<Props> {
 
     return (
       <Form onSubmit={this.handlePublish}>
-        <section className={classnames('card card--section')}>
+        <section className={classnames('card card--section', { 'card--disabled': publishing })}>
           <div className="card__title">{__('Content')}</div>
           <div className="card__subtitle">
-            {editingURI ? __('Editing a claim') : __('What are you publishing?')}
+            {isStillEditing ? __('Editing a claim') : __('What are you publishing?')}
           </div>
           {(filePath || !!editingURI) && (
             <div className="card-media__internal-links">
@@ -335,7 +357,7 @@ class PublishForm extends React.PureComponent<Props> {
             </div>
           )}
           <FileSelector currentPath={filePath} onFileChosen={this.handleFileChange} />
-          {!!editingURI && (
+          {!!isStillEditing && (
             <p className="card__content card__subtitle">
               {__("If you don't choose a file, the file from your existing claim")}
               {` "${name}" `}
@@ -379,7 +401,7 @@ class PublishForm extends React.PureComponent<Props> {
               ) : (
                 <React.Fragment>
                   {__(
-                    'Upload your thumbnail to spee.ch, or enter the URL manually. Learn more about spee.ch '
+                    'Upload your thumbnail (.png/.jpg/.gif) to spee.ch, or enter the URL manually. Learn more about spee.ch '
                   )}
                   <Button button="link" label={__('here')} href="https://spee.ch/about" />.
                 </React.Fragment>

src/renderer/component/transactionList/internal/transaction-list-item.jsx

@@ -72,6 +72,7 @@ class TransactionListItem extends React.PureComponent<Props> {
           {name &&
             claimId && (
               <Button
+                tourniquet
                 button="link"
                 navigate="/show"
                 navigateParams={{ uri: buildURI({ claimName: name, claimId }) }}

src/renderer/scss/component/_button.scss

@@ -66,11 +66,6 @@ button:disabled {
   min-width: 0;
   box-shadow: none;
   text-align: left;
-  /*Tourniquets text over 20VW*/
-  max-width: 20vw;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .btn.btn--external-link {
@@ -81,6 +76,13 @@ button:disabled {
   background-color: var(--btn-bg-secondary);
 }
 
+.btn.btn--tourniquet {
+  max-width: 20vw;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .btn.btn--no-style {
   font-size: inherit;
   font-weight: inherit;

src/renderer/scss/component/_card.scss

@@ -150,10 +150,6 @@
   padding-top: $spacing-vertical * 1/3;
 }
 
-.card__subtitle--block {
-  display: block;
-}
-
 .card__meta {
   color: var(--color-help);
   font-size: 14px;

src/renderer/scss/component/_table.scss

@@ -81,7 +81,7 @@ table.table--help {
     min-width: 130px;
   }
   td:nth-of-type(2) {
-/*Tourniquets text over 20VW*/
+    /*Tourniquets text over 20VW*/
     max-width: 20vw;
     overflow: hidden;
     white-space: nowrap;