use button group as publish file header instead of title for better app parity
This commit is contained in:
parent
3da4df6b8f
commit
c4e6605ada
2 changed files with 21 additions and 28 deletions
|
@ -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>
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 })}>
|
||||||
|
|
Loading…
Reference in a new issue