Skip to content

Commit

Permalink
[STT-52] Layout and style improvements as part of the tiket (#1167)
Browse files Browse the repository at this point in the history 
* [NHUB-558] sort by dropdown is below save new topic bar

* [NHUB-562] Checkmark is missing when items are selected for bulk actions

* [STTNHUB-371] Newshub Agenda: Some UI elements displayed over filter dropdown menus

* [STT-52] - Layout and style improvements

* comment based fix
  • Loading branch information
@fritzSF
fritzSF authored Nov 20, 2024
1 parent 7fbea78 commit 4999e46
Show file tree
Hide file tree
Showing 8 changed files with 150 additions and 122 deletions.
74 changes: 38 additions & 36 deletions assets/agenda/components/AgendaCoverages.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,44 +55,46 @@ export default function AgendaCoverages({
))}
</div>
)}
{coveragesWithState.map((coverage: ICoverage) => {
return (
<div
className={classNames(
'coverage-item',
{'coverage-item--clickable': onClick}
)}
key={coverage.coverage_id}
onClick={onClick}
title={onClick ? gettext('Open {{agenda}} in a new tab', window.sectionNames) : ''}
>
{coverageFieldsToRender.map((field) => {
const FieldComponent = coverageFieldToComponentMap[field];
<div className='coverage-item__list'>
{coveragesWithState.map((coverage: ICoverage) => {
return (
<div
className={classNames(
'coverage-item',
{'coverage-item--clickable': onClick}
)}
key={coverage.coverage_id}
onClick={onClick}
title={onClick ? gettext('Open {{agenda}} in a new tab', window.sectionNames) : ''}
>
{coverageFieldsToRender.map((field) => {
const FieldComponent = coverageFieldToComponentMap[field];

if (FieldComponent == null) {
console.warn(`Component not registered for field ${field}`);
return null;
}
if (FieldComponent == null) {
console.warn(`Component not registered for field ${field}`);
return null;
}

return (
<FieldComponent
key={field}
agenda={item}
coverage={coverage}
wireItems={wireItems}
actions={actions}
user={user}
hideViewContentItems={hideViewContentItems}
fullCoverage={
(item.planning_items || [])
.find((planningItem) => planningItem._id === coverage.planning_id)
?.coverages?.find((coverageItem) => coverageItem.coverage_id === coverage.coverage_id)
}
/>
);
})}
</div>
);})}
return (
<FieldComponent
key={field}
agenda={item}
coverage={coverage}
wireItems={wireItems}
actions={actions}
user={user}
hideViewContentItems={hideViewContentItems}
fullCoverage={
(item.planning_items || [])
.find((planningItem) => planningItem._id === coverage.planning_id)
?.coverages?.find((coverageItem) => coverageItem.coverage_id === coverage.coverage_id)
}
/>
);
})}
</div>
);})}
</div>
</React.Fragment>
);
}
4 changes: 2 additions & 2 deletions assets/agenda/components/AgendaPreviewCoverages.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ class AgendaPreviewCoverages extends React.Component<IProps, IState> {
return (item.item_type === 'planning' || restrictCoverageInfo) ? (
<React.Fragment>
{displayCoverages.current.length > 0 && (
<PreviewBox label={gettext('Coverages:')}>
<PreviewBox label={gettext('Coverages')}>
<AgendaCoverages
item={item}
coverages={displayCoverages.current}
Expand All @@ -66,7 +66,7 @@ class AgendaPreviewCoverages extends React.Component<IProps, IState> {
)}

{displayCoverages.previous.length > 0 && (
<PreviewBox label={gettext('Previous Coverages:')}>
<PreviewBox label={gettext('Previous Coverages')}>
<AgendaCoverages
item={item}
coverages={displayCoverages.previous}
Expand Down
94 changes: 48 additions & 46 deletions assets/agenda/components/AgendaPreviewEvent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,54 +61,56 @@ class AgendaPreviewEventComponent extends React.Component<any, any> {
}

return (
<div className="agenda-planning__container info-box">
<div className="info-box__content">
<span className="info-box__label">
<div className="agenda-planning__container">
<div className="preview__content-block">
<div className="preview__content-block-title">
{gettext('Associated Event')}
</span>
<div className={classNames(
'agenda-planning__preview',
{'agenda-planning__preview--expanded': this.state.expanded}
)}>
{this.state.loading ? (
<div className="spinner-border text-success" />
) : (
<React.Fragment>
<div className="agenda-planning__preview-header">
<a href='#' onClick={this.toggleExpanded}>
<i className={classNames('icon-small--arrow-down me-1', {
'rotate-90-ccw': !this.state.expanded,
})} />
</a>
<h3 onClick={this.toggleExpanded}>{getName(this.props.event)}</h3>
</div>
<div className="agenda-planning__preview-date">
<AgendaTime item={this.props.event}>
<AgendaListItemLabels item={this.props.event} />
</AgendaTime>
</div>
{!this.state.expanded ? null : (
<div className="agenda-planning__preview-metadata">
<AgendaMeta item={this.props.event} />
<AgendaLongDescription item={this.props.event} />
<AgendaPreviewAttachments item={this.props.event} />
<AgendaTags
item={this.props.event}
isItemDetail={false}
/>
<AgendaEdNote
item={this.props.event}
plan={{}}
secondaryNoteField="state_reason"
/>
<AgendaInternalNote
internalNote={getInternalNote(this.props.event, {})}
mt2={!!(this.props.event.ednote || this.props.event.state_reason)}
/>
</div>
<div className='agenda-planning__preview-list'>
<div className={classNames(
'agenda-planning__preview',
{'agenda-planning__preview--expanded': this.state.expanded}
)}>
{this.state.loading ? (
<div className="spinner-border text-success" />
) : (
<React.Fragment>
<div className="agenda-planning__preview-header">
<a href='#' onClick={this.toggleExpanded}>
<i className={classNames('icon-small--arrow-down me-1', {
'rotate-90-ccw': !this.state.expanded,
})} />
</a>
<h3 onClick={this.toggleExpanded}>{getName(this.props.event)}</h3>
</div>
<div className="agenda-planning__preview-date">
<AgendaTime item={this.props.event}>
<AgendaListItemLabels item={this.props.event} />
</AgendaTime>
</div>
)}
</React.Fragment>
)}
{!this.state.expanded ? null : (
<div className="agenda-planning__preview-metadata">
<AgendaMeta item={this.props.event} />
<AgendaLongDescription item={this.props.event} />
<AgendaPreviewAttachments item={this.props.event} />
<AgendaTags
item={this.props.event}
isItemDetail={false}
/>
<AgendaEdNote
item={this.props.event}
plan={{}}
secondaryNoteField="state_reason"
/>
<AgendaInternalNote
internalNote={getInternalNote(this.props.event, {})}
mt2={!!(this.props.event.ednote || this.props.event.state_reason)}
/>
</div>
)}
</React.Fragment>
)}
</div>
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions assets/agenda/components/AgendaPreviewPlanning.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ function AgendaPreviewPlanningComponent({
return (
<React.Fragment>
{!plan ? null : (
<div className="agenda-planning__container info-box">
<div className="agenda-planning__container">
<div className="info-box__content">
<span className="info-box__label">
{gettext('Planning Item')}
Expand All @@ -74,7 +74,7 @@ function AgendaPreviewPlanningComponent({
</div>
)}
{!otherPlanningItems.length ? null : (
<div className="agenda-planning__container info-box">
<div className="agenda-planning__container">
<div className="info-box__content">
<span className="info-box__label">
{plan == null ? gettext('Planning Items') : gettext('Other Planning Items')}
Expand Down
2 changes: 1 addition & 1 deletion assets/agenda/components/AgendaTags.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ function AgendaTagsComponent({item, plan, isItemDetail, displayConfig, filterGro

return (
<InfoBox
label={isItemDetail ? gettext('Metadata') : null}
label={gettext('Metadata')}
top={!isItemDetail}
>
{!services ? null : (
Expand Down
Loading

0 comments on commit 4999e46

Please sign in to comment.