Skip to content

Commit

Permalink
Add styles for multi column publish tab (#4345)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomaskikutis
tomaskikutis authored Oct 26, 2023
1 parent bc85cfd commit db520e7
Show file tree
Hide file tree
Showing 7 changed files with 310 additions and 244 deletions.
30 changes: 15 additions & 15 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@
"sass-loader": "6.0.6",
"shortid": "2.2.8",
"style-loader": "0.20.2",
"superdesk-ui-framework": "^3.0.59",
"superdesk-ui-framework": "^3.0.60",
"ts-loader": "3.5.0",
"tslint": "5.11.0",
"typescript": "4.9.5",
Expand Down
240 changes: 125 additions & 115 deletions scripts/core/interactive-article-actions-panel/actions/publish-tab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {gettext} from 'core/utils';
import {PanelContent} from '../panel/panel-content';
import {PanelFooter} from '../panel/panel-footer';
import {DestinationSelect} from '../subcomponents/destination-select';
import {IPanelError, ISendToDestination} from '../interfaces';
import {IPanelError, IPropsHocInteractivePanelTab, ISendToDestination} from '../interfaces';
import {getCurrentDeskDestination} from '../utils/get-initial-destination';
import {
IPublishingDateOptions,
Expand All @@ -29,7 +29,7 @@ import {PreviewModal} from 'apps/publish-preview/previewModal';
import {notify} from 'core/notify/notify';
import {sdApi} from 'api';

interface IProps {
interface IProps extends IPropsHocInteractivePanelTab {
item: IArticle;
closePublishView(): void;
handleUnsavedChanges(): Promise<IArticle>;
Expand All @@ -45,7 +45,7 @@ interface IState {
subscribers: Array<ISubscriber> | null;
}

export class PublishTab extends React.PureComponent<IProps, IState> {
export class WithPublishTab extends React.PureComponent<IProps, IState> {
constructor(props: IProps) {
super(props);

Expand Down Expand Up @@ -153,129 +153,139 @@ export class PublishTab extends React.PureComponent<IProps, IState> {
.flatMap(({activationResult}) => activationResult?.contributions?.publishingSections ?? []);

const style: CSSProperties | undefined = sectionsFromExtensions.length > 0
? {display: 'flex', alignItems: 'start', justifyContent: 'space-between'}
? {display: 'flex', alignItems: 'start', justifyContent: 'space-between', gap: 32}
: undefined;

return (
<React.Fragment>
<PanelContent markupV2={markupV2} data-test-id="publishing-section">
<div style={style}>
<div>
{
publishFromEnabled && (
<ToggleBox title={gettext('From')} initiallyOpen>
<DestinationSelect
value={this.state.selectedDestination}
onChange={(value) => {
this.setState({
selectedDestination: value,
});
}}
includePersonalSpace={false}
const childrenStyle: CSSProperties = {
flex: 1, // equal width for columns
};

/**
* Changing the destination is only used
* to control which desk's output stage
* the published item appears in, thus
* choosing a stage would not have an impact
*/
hideStages={true}
/>
</ToggleBox>
)
}
return this.props.children({
columnCount: 1 + sectionsFromExtensions.length,
content: (
<React.Fragment>
<PanelContent markupV2={markupV2} data-test-id="publishing-section">
<div style={style}>
<div style={childrenStyle}>
{
publishFromEnabled && (
<ToggleBox title={gettext('From')} initiallyOpen>
<DestinationSelect
value={this.state.selectedDestination}
onChange={(value) => {
this.setState({
selectedDestination: value,
});
}}
includePersonalSpace={false}

<PublishingDateOptions
items={[this.props.item]}
value={this.state.publishingDateOptions}
onChange={(val) => {
this.setState(
{publishingDateOptions: val},
() => this.props.onDataChange({
...this.props.item,
...getPublishingDatePatch(
this.props.item,
this.state.publishingDateOptions,
),
}),
);
}}
allowSettingEmbargo={appConfig.ui.publishEmbargo !== false}
/>
/**
* Changing the destination is only used
* to control which desk's output stage
* the published item appears in, thus
* choosing a stage would not have an impact
*/
hideStages={true}
/>
</ToggleBox>
)
}

<PublishingDateOptions
items={[this.props.item]}
value={this.state.publishingDateOptions}
onChange={(val) => {
this.setState(
{publishingDateOptions: val},
() => this.props.onDataChange({
...this.props.item,
...getPublishingDatePatch(
this.props.item,
this.state.publishingDateOptions,
),
}),
);
}}
allowSettingEmbargo={appConfig.ui.publishEmbargo !== false}
/>

<PublishingTargetSelect
value={this.state.publishingTarget}
onChange={(val) => {
this.setState(
{publishingTarget: val},
() => this.props.onDataChange({
...this.props.item,
...getPublishingTargetPatch(this.props.item, this.state.publishingTarget),
}),
<PublishingTargetSelect
value={this.state.publishingTarget}
onChange={(val) => {
this.setState(
{publishingTarget: val},
() => this.props.onDataChange({
...this.props.item,
...getPublishingTargetPatch(
this.props.item,
this.state.publishingTarget,
),
}),
);
}}
/>
</div>

{
sectionsFromExtensions.map((panel, i) => {
const Component = panel.component;

return (
<div style={childrenStyle} key={i}>
<Component item={this.props.item} />
</div>
);
}}
/>
})
}
</div>
</PanelContent>

<PanelFooter markupV2={markupV2}>
{
sectionsFromExtensions.map((panel, i) => {
const Component = panel.component;

return (
<div key={i}>
<Component item={this.props.item} />
</div>
);
})
canPreview && (
<Button
text={gettext('Preview')}
onClick={() => {
this.doPreview();
}}
size="large"
expand
style="hollow"
/>
)
}
</div>
</PanelContent>

<PanelFooter markupV2={markupV2}>
{
canPreview && (
<Button
text={gettext('Preview')}
onClick={() => {
this.doPreview();
}}
size="large"
expand
style="hollow"
/>
)
}

{
publishFromEnabled && (
<Button
text={gettext('Publish from')}
onClick={() => {
this.doPublish(true);
}}
disabled={!otherDeskSelected}
size="large"
type="primary"
expand
style="hollow"
data-test-id="publish-from"
/>
)
}
{
publishFromEnabled && (
<Button
text={gettext('Publish from')}
onClick={() => {
this.doPublish(true);
}}
disabled={!otherDeskSelected}
size="large"
type="primary"
expand
style="hollow"
data-test-id="publish-from"
/>
)
}

<Button
text={gettext('Publish')}
onClick={() => {
this.doPublish();
}}
disabled={otherDeskSelected}
size="large"
type="highlight"
expand
data-test-id="publish"
/>
</PanelFooter>
</React.Fragment>
);
<Button
text={gettext('Publish')}
onClick={() => {
this.doPublish();
}}
disabled={otherDeskSelected}
size="large"
type="highlight"
expand
data-test-id="publish"
/>
</PanelFooter>
</React.Fragment>
),
});
}
}
Loading

0 comments on commit db520e7

Please sign in to comment.