cleanup + image upload modal styling

lbryio · Jul 1, 2020 · 5f0472e · 5f0472e
1 parent b16817a
commit 5f0472e
Show file tree

Hide file tree

Showing 16 changed files with 186 additions and 148 deletions.
diff --git a/package.json b/package.json
@@ -70,7 +70,7 @@
     "@datapunt/matomo-tracker-js": "^0.1.4",
     "@exponent/electron-cookies": "^2.0.0",
     "@hot-loader/react-dom": "^16.8",
-    "@lbry/components": "^4.2.2",
+    "@lbry/components": "^4.2.5",
     "@reach/menu-button": "0.7.4",
     "@reach/rect": "^0.2.1",
     "@reach/tabs": "^0.1.5",

diff --git a/ui/component/channelEdit/view.jsx b/ui/component/channelEdit/view.jsx
@@ -35,7 +35,10 @@ type Props = {
   createError: string,
   creatingChannel: boolean,
   onDone: () => void,
-  openModal: (id: string, { onUpdate: string => void, label: string, helptext: string, currentValue: string }) => void,
+  openModal: (
+    id: string,
+    { onUpdate: string => void, assetName: string, helpText: string, currentValue: string, title: string }
+  ) => void,
   uri: string,
 };
 
@@ -172,8 +175,9 @@ function ChannelForm(props: Props) {
               onClick={() =>
                 openModal(MODALS.IMAGE_UPLOAD, {
                   onUpdate: coverUrl => handleCoverChange(coverUrl),
-                  label: __('Cover'),
-                  helptext: __('This shoul de such a size'),
+                  title: __('Edit Cover Image'),
+                  helpText: __('(Y x Z)'),
+                  assetName: __('Cover Image'),
                   currentValue: params.cover,
                 })
               }
@@ -190,8 +194,9 @@ function ChannelForm(props: Props) {
                 onClick={() =>
                   openModal(MODALS.IMAGE_UPLOAD, {
                     onUpdate: v => handleThumbnailChange(v),
-                    label: __('Thumbnail'),
-                    helptext: __('This shoul de such a size'),
+                    title: __('Edit Thumbnail Image'),
+                    helpText: __('(Y x Z)'),
+                    assetName: __('Thumbnail'),
                     currentValue: params.thumbnail,
                   })
                 }
@@ -224,22 +229,30 @@ function ChannelForm(props: Props) {
               <Card
                 body={
                   <>
-                    <FormField
-                      type="text"
-                      name="channel_name"
-                      label={__('Name')}
-                      placeholder={__('required')}
-                      value={params.name || channelName}
-                      error={nameError}
-                      disabled={!isNewChannel}
-                      helper={!isNewChannel && __('This field cannot be changed.')}
-                      onChange={e => setParams({ ...params, name: e.target.value })}
-                    />
+                    <fieldset-group class="fieldset-group--smushed fieldset-group--disabled-prefix">
+                      <fieldset-section>
+                        <label htmlFor="channel_name">{__('Name')}</label>
+                        <div className="form-field__prefix">@</div>
+                      </fieldset-section>
+
+                      <FormField
+                        autoFocus={isNewChannel}
+                        type="text"
+                        name="channel_name"
+                        placeholder={__('MyAwesomeChannel')}
+                        value={params.name || channelName}
+                        error={nameError}
+                        disabled={!isNewChannel}
+                        onChange={e => setParams({ ...params, name: e.target.value })}
+                      />
+                    </fieldset-group>
+                    {!isNewChannel && <span className="form-field__help">{__('This field cannot be changed.')}</span>}
+
                     <FormField
                       type="text"
                       name="channel_title2"
                       label={__('Title')}
-                      placeholder={__('Titular Title')}
+                      placeholder={__('My Awesome Channel')}
                       value={params.title}
                       onChange={e => setParams({ ...params, title: e.target.value })}
                     />

diff --git a/ui/component/channelThumbnail/view.jsx b/ui/component/channelThumbnail/view.jsx
@@ -1,5 +1,5 @@
 // @flow
-import React, { useState } from 'react';
+import React from 'react';
 import { parseURI } from 'lbry-redux';
 import classnames from 'classnames';
 import Gerbil from './gerbil.png';
@@ -25,20 +25,13 @@ function ChannelThumbnail(props: Props) {
     small = false,
     allowGifs = false,
   } = props;
+  const [thumbError, setThumbError] = React.useState(false);
   const thumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://');
   const thumbnailPreview = rawThumbnailPreview && rawThumbnailPreview.trim().replace(/^http:\/\//i, 'https://');
   const channelThumbnail = thumbnail || thumbnailPreview;
-
-  const [thumbError, setThumbError] = useState(false);
-  if (channelThumbnail && channelThumbnail.endsWith('gif') && !allowGifs) {
-    return <FreezeframeWrapper src={channelThumbnail} className="channel-thumbnail" />;
-  }
-
   const showThumb = (!obscure && !!thumbnail) || thumbnailPreview;
-
   // Generate a random color class based on the first letter of the channel name
   const { channelName } = parseURI(uri);
-
   let initializer;
   let colorClassName;
   if (channelName) {
@@ -47,6 +40,11 @@ function ChannelThumbnail(props: Props) {
   } else {
     colorClassName = `channel-thumbnail__default--4`;
   }
+
+  if (channelThumbnail && channelThumbnail.endsWith('gif') && !allowGifs) {
+    return <FreezeframeWrapper src={channelThumbnail} className="channel-thumbnail" />;
+  }
+
   return (
     <div
       className={classnames('channel-thumbnail', className, {

diff --git a/ui/component/claimAbandonButton/view.jsx b/ui/component/claimAbandonButton/view.jsx
@@ -21,7 +21,7 @@ export default function ClaimAbandonButton(props: Props) {
   return (
     <Button
       disabled={!claim}
-      label={__('Delete')}
+      label={__('Delete Channel')}
       button="alt"
       iconColor="red"
       icon={ICONS.DELETE}

diff --git a/ui/component/common/file-selector.jsx b/ui/component/common/file-selector.jsx
@@ -15,9 +15,14 @@ type Props = {
   accept?: string,
   error?: string,
   disabled?: boolean,
+  autoFocus?: boolean,
 };
 
 class FileSelector extends React.PureComponent<Props> {
+  static defaultProps = {
+    autoFocus: false,
+  };
+
   componentDidUpdate(prevProps: Props) {
     // If the form has just been cleared,
     // clear the file input
@@ -58,7 +63,18 @@ class FileSelector extends React.PureComponent<Props> {
   input: ?HTMLInputElement;
 
   render() {
-    const { type, currentPath, label, fileLabel, directoryLabel, placeholder, accept, error, disabled } = this.props;
+    const {
+      type,
+      currentPath,
+      label,
+      fileLabel,
+      directoryLabel,
+      placeholder,
+      accept,
+      error,
+      disabled,
+      autoFocus = false,
+    } = this.props;
     const buttonLabel = type === 'file' ? fileLabel || __('Choose File') : directoryLabel || __('Choose Directory');
     const placeHolder = currentPath || placeholder;
 
@@ -74,7 +90,13 @@ class FileSelector extends React.PureComponent<Props> {
           readOnly="readonly"
           value={placeHolder || __('Choose a file')}
           inputButton={
-            <Button button="secondary" disabled={disabled} onClick={this.fileInputButton} label={buttonLabel} />
+            <Button
+              autoFocus={autoFocus}
+              button="secondary"
+              disabled={disabled}
+              onClick={this.fileInputButton}
+              label={buttonLabel}
+            />
           }
         />
         <input

diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
@@ -13,6 +13,7 @@ import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
 import Tooltip from 'component/common/tooltip';
 import NavigationButton from 'component/navigationButton';
 import { LOGO_TITLE } from 'config';
+import useIsMobile from 'effects/use-is-mobile';
 // @if TARGET='app'
 import { remote } from 'electron';
 import { IS_MAC } from 'component/app/view';
@@ -37,7 +38,11 @@ type Props = {
   email: ?string,
   authenticated: boolean,
   authHeader: boolean,
-  backout: { backFunction: () => void, backTitle: string },
+  backout: {
+    backFunction: () => void,
+    title: string,
+    simpleTitle: string, // Just use the same value as `title` if `title` is already short (~< 10 chars), unless you have a better idea for title overlfow on mobile
+  },
   syncError: ?string,
   emailToVerify?: string,
   signOut: () => void,
@@ -69,7 +74,7 @@ const Header = (props: Props) => {
     emailToVerify,
     backout,
   } = props;
-
+  const isMobile = useIsMobile();
   // on the verify page don't let anyone escape other than by closing the tab to keep session data consistent
   const isVerifyPage = history.location.pathname.includes(PAGES.AUTH_VERIFY);
   const isSignUpPage = history.location.pathname.includes(PAGES.AUTH);
@@ -139,8 +144,8 @@ const Header = (props: Props) => {
       <div className="header__contents">
         {!authHeader && backout ? (
           <div className="card__actions--between">
-            <Button onClick={backout.backFunction} button="link" label={__('Back')} icon={ICONS.ARROW_LEFT} />
-            {backout.backTitle && <h1 className={'card__title'}>{backout.backTitle}</h1>}
+            <Button onClick={backout.backFunction} button="link" label={__('Cancel')} icon={ICONS.ARROW_LEFT} />
+            {backout.title && <h1 className={'card__title'}>{isMobile ? backout.simpleTitle : backout.title}</h1>}
             <Button
               aria-label={__('Your wallet')}
               navigate={`/$/${PAGES.WALLET}`}