use button group as publish file header instead of title for better app parity

This commit is contained in:
Sean Yesmunt 2020-08-05 13:06:24 -04:00
parent 3da4df6b8f
commit c4e6605ada
2 changed files with 21 additions and 28 deletions

View file

@ -36,6 +36,7 @@ type Props = {
setPublishMode: string => void, setPublishMode: string => void,
setPrevFileText: string => void, setPrevFileText: string => void,
setAutoPopulateName: boolean => void, setAutoPopulateName: boolean => void,
header: any,
}; };
function PublishFile(props: Props) { function PublishFile(props: Props) {
@ -62,6 +63,7 @@ function PublishFile(props: Props) {
setPrevFileText, setPrevFileText,
autoPopulateName, autoPopulateName,
setAutoPopulateName, setAutoPopulateName,
header,
} = props; } = props;
const ffmpegAvail = ffmpegStatus.available; const ffmpegAvail = ffmpegStatus.available;
@ -324,28 +326,17 @@ function PublishFile(props: Props) {
updatePublishForm(publishFormParams); updatePublishForm(publishFormParams);
} }
let cardTitle;
if (publishing) {
cardTitle = (
<span>
{__('Uploading')}
<Spinner type={'small'} />
</span>
);
} else {
cardTitle = isStillEditing ? __('Edit') : __('Upload');
}
const isPublishFile = mode === PUBLISH_MODES.FILE; const isPublishFile = mode === PUBLISH_MODES.FILE;
const isPublishPost = mode === PUBLISH_MODES.POST; const isPublishPost = mode === PUBLISH_MODES.POST;
return ( return (
<Card <Card
icon={ICONS.PUBLISH} // icon={ICONS.PUBLISH}
disabled={disabled || balance === 0} disabled={disabled || balance === 0}
title={ title={
<React.Fragment> <React.Fragment>
{cardTitle}{' '} {header}
{publishing && <Spinner type={'small'} />}
{inProgress && <Button button="close" label={__('Cancel')} icon={ICONS.REMOVE} onClick={clearPublish} />} {inProgress && <Button button="close" label={__('Cancel')} icon={ICONS.REMOVE} onClick={clearPublish} />}
</React.Fragment> </React.Fragment>
} }

View file

@ -291,20 +291,6 @@ function PublishForm(props: Props) {
// Editing claim uri // Editing claim uri
return ( return (
<div className="card-stack"> <div className="card-stack">
<div className="button-tab-group">
{MODES.map((modeName, index) => (
<Button
key={index}
icon={modeName}
label={modeName}
button="alt"
onClick={() => {
setMode(modeName);
}}
className={classnames('button-toggle', { 'button-toggle--active': mode === modeName })}
/>
))}
</div>
<PublishFile <PublishFile
uri={uri} uri={uri}
mode={mode} mode={mode}
@ -315,6 +301,22 @@ function PublishForm(props: Props) {
setPrevFileText={setPrevFileText} setPrevFileText={setPrevFileText}
autoPopulateName={autoPopulateNameFromTitle} autoPopulateName={autoPopulateNameFromTitle}
setAutoPopulateName={setAutoPopulateNameFromTitle} setAutoPopulateName={setAutoPopulateNameFromTitle}
header={
<div>
{MODES.map((modeName, index) => (
<Button
key={index}
icon={modeName}
label={modeName}
button="alt"
onClick={() => {
setMode(modeName);
}}
className={classnames('button-toggle', { 'button-toggle--active': mode === modeName })}
/>
))}
</div>
}
/> />
{!publishing && ( {!publishing && (
<div className={classnames({ 'card--disabled': formDisabled })}> <div className={classnames({ 'card--disabled': formDisabled })}>