Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move navigation buttons to top of panel and add margin at the bottom of lines collapsible #758

Merged
merged 2 commits into from
Nov 9, 2023
Merged

Move navigation buttons to top of panel and add margin at the bottom of lines collapsible #758

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9bf5c1f
Wrap agency and lines components in a div to add a bottom margin
davidmurray Nov 9, 2023
5bfd158
Move selected object buttons to the top of the form inside the header
davidmurray Nov 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/chaire-lib-frontend/src/components/pageParts/SelectedObjectButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ const SelectedObjectButtons: React.FunctionComponent<SelectedObjectButtonsProps<
};

return (
<div className="tr__form-buttons-container">
<div className="tr__form-buttons-container tr__form-selected-object-buttons-container">
<span title={props.t('main:Back')}>
<Button
key="back"
Expand Down
8 changes: 4 additions & 4 deletions ...tend/src/components/pageParts/__tests__/__snapshots__/SelectedObjectButtons.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`Test with delete button 1`] = `
<div
className="tr__form-buttons-container"
className="tr__form-buttons-container tr__form-selected-object-buttons-container"
>
<span
title="main:Back"
Expand Down Expand Up @@ -181,7 +181,7 @@ exports[`Test with delete button 1`] = `

exports[`Test with save button 1`] = `
<div
className="tr__form-buttons-container"
className="tr__form-buttons-container tr__form-selected-object-buttons-container"
>
<span
title="main:Back"
Expand Down Expand Up @@ -360,7 +360,7 @@ exports[`Test with save button 1`] = `

exports[`Test without delete button 1`] = `
<div
className="tr__form-buttons-container"
className="tr__form-buttons-container tr__form-selected-object-buttons-container"
>
<span
title="main:Back"
Expand Down Expand Up @@ -505,7 +505,7 @@ exports[`Test without delete button 1`] = `

exports[`Test without save button 1`] = `
<div
className="tr__form-buttons-container"
className="tr__form-buttons-container tr__form-selected-object-buttons-container"
>
<span
title="main:Back"
Expand Down
5 changes: 4 additions & 1 deletion packages/chaire-lib-frontend/src/styles/_dashboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,4 +234,7 @@
.tr__resizable-split-view-divider-hitbox:hover .tr__resizable-split-view-divider {
border-left: 2px solid white;
}


.tr__form-agencies-panel-lines-list {
margin-bottom: 8px;
}
18 changes: 18 additions & 0 deletions packages/chaire-lib-frontend/src/styles/_form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,25 @@ select {
&._center {
justify-content: center;
}
}

.tr__form-sticky-header-container {
display: flex;
position: sticky;
top: 0;
background-color: rgba(29, 31, 33, 0.8);
z-index: 1;
border-bottom: 1px solid $border-white;
justify-content: space-between;

h3 {
letter-spacing: unset !important;
}
}

.tr__form-selected-object-buttons-container .button {
padding: 0.3rem 0.6rem;
min-height: 2.6rem;
}

._input-color {
Expand Down
58 changes: 30 additions & 28 deletions packages/transition-frontend/src/components/forms/agency/TransitAgencyButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,35 +212,37 @@ const TransitAgencyButton: React.FunctionComponent<AgencyButtonProps> = (props:
</ButtonCell>
)}
</Button>
<Button key={`lines${props.agency.getId()}`} isSelected={agencyIsSelected} flushActionButtons={false}>
<Collapsible
lazyRender={true}
trigger={props.t('transit:transitLine:List')}
open={false}
transitionTime={100}
>
<ButtonList key={`lines${props.agency.getId()}`}>
{linesButtons}
{!isFrozen && (
<Button isSelected={false} key="containerLink">
<ButtonCell
alignment="left"
onClick={newLineForAgency}
title={props.t('transit:transitLine:New')}
>
<img
className="_list-element _icon-alone"
src={'/dist/images/icons/transit/line_add_white.svg'}
alt={props.t('transit:transitLine:New')}
<div className="tr__form-agencies-panel-lines-list">
<Button key={`lines${props.agency.getId()}`} isSelected={agencyIsSelected} flushActionButtons={false}>
<Collapsible
lazyRender={true}
trigger={props.t('transit:transitLine:List')}
open={false}
transitionTime={100}
>
<ButtonList key={`lines${props.agency.getId()}`}>
{linesButtons}
{!isFrozen && (
<Button isSelected={false} key="containerLink">
<ButtonCell
alignment="left"
onClick={newLineForAgency}
title={props.t('transit:transitLine:New')}
/>
<span className="_list-element">{props.t('transit:transitLine:New')}</span>
</ButtonCell>
</Button>
)}
</ButtonList>
</Collapsible>
</Button>
>
<img
className="_list-element _icon-alone"
src={'/dist/images/icons/transit/line_add_white.svg'}
alt={props.t('transit:transitLine:New')}
title={props.t('transit:transitLine:New')}
/>
<span className="_list-element">{props.t('transit:transitLine:New')}</span>
</ButtonCell>
</Button>
)}
</ButtonList>
</Collapsible>
</Button>
</div>
</React.Fragment>
);
};
Expand Down
28 changes: 15 additions & 13 deletions packages/transition-frontend/src/components/forms/agency/TransitAgencyEdit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,12 +113,21 @@ class TransitAgencyEdit extends SaveableObjectForm<Agency, AgencyFormProps, Agen
}
className="tr__form-transit-agency-edit apptr__form"
>
<h3>
{agency.isNew()
? this.props.t('transit:transitAgency:New')
: this.props.t('transit:transitAgency:Edit')}
{agency.toString(false) ? ` • ${agency.toString(false)}` : ''}
</h3>
<div className="tr__form-sticky-header-container">
<h3>
{agency.isNew()
? this.props.t('transit:transitAgency:New')
: this.props.t('transit:transitAgency:Edit')}
{agency.toString(false) ? ` • ${agency.toString(false)}` : ''}
</h3>
<SelectedObjectButtons
onDelete={this.onDelete}
openDeleteConfirmModal={this.openDeleteConfirmModal}
backAction={this.onBack}
openBackConfirmModal={this.openBackConfirmModal}
object={agency}
/>
</div>
<Collapsible trigger={this.props.t('form:basicFields')} open={true} transitionTime={100}>
<div className="tr__form-section">
<div className="apptr__form-input-container _two-columns">
Expand Down Expand Up @@ -227,13 +236,6 @@ class TransitAgencyEdit extends SaveableObjectForm<Agency, AgencyFormProps, Agen
<FormErrors errors={agency.errors} />

<div>
<SelectedObjectButtons
onDelete={this.onDelete}
openDeleteConfirmModal={this.openDeleteConfirmModal}
backAction={this.onBack}
openBackConfirmModal={this.openBackConfirmModal}
object={agency}
/>
{this.state.confirmModalDeleteIsOpen && (
<ConfirmModal
isOpen={true}
Expand Down
40 changes: 21 additions & 19 deletions packages/transition-frontend/src/components/forms/line/TransitLineEdit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,15 +211,27 @@ class TransitLineEdit extends SaveableObjectForm<Line, LineFormProps, LineFormSt
id={line.isNew() ? 'tr__form-transit-line-new' : `tr__form-transit-line-edit__id_${line.get('id')}`}
className="tr__form-transit-line-edit apptr__form"
>
<h3>
<img
src={'/dist/images/icons/transit/line_white.svg'}
className="_icon"
alt={this.props.t('transit:transitLine:Line')}
/>{' '}
{line.isNew() ? this.props.t('transit:transitLine:New') : this.props.t('transit:transitLine:Edit')}
{line.toString(false) ? ` • ${line.toString(false)}` : ''}
</h3>
<div className="tr__form-sticky-header-container">
<h3>
<img
src={'/dist/images/icons/transit/line_white.svg'}
className="_icon"
alt={this.props.t('transit:transitLine:Line')}
/>{' '}
{line.isNew() ? this.props.t('transit:transitLine:New') : this.props.t('transit:transitLine:Edit')}
{line.toString(false) ? ` • ${line.toString(false)}` : ''}
</h3>
{!this.props.selectedPath && canActionButtons && (
<SelectedObjectButtons
onDelete={this.onDelete}
openDeleteConfirmModal={this.openDeleteConfirmModal}
object={line}
backAction={this.onBack}
openBackConfirmModal={this.openBackConfirmModal}
saveAction={this.onSave}
/>
)}
</div>
<Collapsible
trigger={this.props.t('form:basicFields')}
open={_isBlank(this.props.selectedPath)}
Expand Down Expand Up @@ -367,16 +379,6 @@ class TransitLineEdit extends SaveableObjectForm<Line, LineFormProps, LineFormSt

{canActionButtons && (
<div>
{!this.props.selectedPath && (
<SelectedObjectButtons
onDelete={this.onDelete}
openDeleteConfirmModal={this.openDeleteConfirmModal}
object={line}
backAction={this.onBack}
openBackConfirmModal={this.openBackConfirmModal}
saveAction={this.onSave}
/>
)}
{!this.props.selectedPath &&
!this.props.selectedSchedule &&
(completePaths.length > 0 || lineHasSchedules) && (
Expand Down
104 changes: 53 additions & 51 deletions packages/transition-frontend/src/components/forms/node/TransitNodeEdit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,10 +223,59 @@ class TransitNodeEdit extends SaveableObjectForm<Node, NodeFormProps, NodeFormSt
id={isNew ? 'tr__form-transit-node-new' : `tr__form-transit-node-edit__id_${nodeId}`}
className="tr__form-transit-node-edit apptr__form"
>
<h3>
{isNew ? this.props.t('transit:transitNode:New') : this.props.t('transit:transitNode:Edit')}
{node.toString(false) ? ` • ${node.toString(false)}` : ''}
</h3>
<div className="tr__form-sticky-header-container">
<h3>
{isNew ? this.props.t('transit:transitNode:New') : this.props.t('transit:transitNode:Edit')}
{node.toString(false) ? ` • ${node.toString(false)}` : ''}
</h3>
<SelectedObjectButtons
onDelete={this.onDelete}
openDeleteConfirmModal={this.openDeleteConfirmModal}
backAction={this.onBack}
openBackConfirmModal={this.openBackConfirmModal}
object={node}
hideDelete={isFrozen === true || hasPaths}
saveAction={() => {
// save
if (isFrozen === true && node.wasFrozen()) {
serviceLocator.selectedObjectsManager.deselect('node');
return true;
}
node.validate();
if (node.isValid) {
if (node.hasChanged()) {
serviceLocator.eventManager.emit('progress', {
name: 'SavingNode',
progress: 0.0
});
NodeGeographyUtils.updateTransferableNodesWithAffected(
node,
serviceLocator.collectionManager.get('nodes'),
serviceLocator.collectionManager
).then(async (affectedNodes) => {
await Promise.all(
affectedNodes.map((n) => n.save(serviceLocator.socketEventManager))
);
await node.save(serviceLocator.socketEventManager);
serviceLocator.selectedObjectsManager.deselect('node');
serviceLocator.collectionManager.refresh('nodes');
serviceLocator.eventManager.emit('progress', {
name: 'SavingNode',
progress: 1.0
});
});
} else {
serviceLocator.selectedObjectsManager.deselect('node');
}
} else {
serviceLocator.selectedObjectsManager.update('node', node);
this.updateLayers();
}
}}
onUndo={this.onHistoryChange}
onRedo={this.onHistoryChange}
/>
</div>
<Collapsible trigger={this.props.t('form:basicFields')} open={true} transitionTime={100}>
<div className="tr__form-section">
<InputWrapper label={this.props.t('transit:transitNode:Name')}>
Expand Down Expand Up @@ -391,53 +440,6 @@ class TransitNodeEdit extends SaveableObjectForm<Node, NodeFormProps, NodeFormSt
</Collapsible>
)}
<div>
<SelectedObjectButtons
onDelete={this.onDelete}
openDeleteConfirmModal={this.openDeleteConfirmModal}
backAction={this.onBack}
openBackConfirmModal={this.openBackConfirmModal}
object={node}
hideDelete={isFrozen === true || hasPaths}
saveAction={() => {
// save
if (isFrozen === true && node.wasFrozen()) {
serviceLocator.selectedObjectsManager.deselect('node');
return true;
}
node.validate();
if (node.isValid) {
if (node.hasChanged()) {
serviceLocator.eventManager.emit('progress', {
name: 'SavingNode',
progress: 0.0
});
NodeGeographyUtils.updateTransferableNodesWithAffected(
node,
serviceLocator.collectionManager.get('nodes'),
serviceLocator.collectionManager
).then(async (affectedNodes) => {
await Promise.all(
affectedNodes.map((n) => n.save(serviceLocator.socketEventManager))
);
await node.save(serviceLocator.socketEventManager);
serviceLocator.selectedObjectsManager.deselect('node');
serviceLocator.collectionManager.refresh('nodes');
serviceLocator.eventManager.emit('progress', {
name: 'SavingNode',
progress: 1.0
});
});
} else {
serviceLocator.selectedObjectsManager.deselect('node');
}
} else {
serviceLocator.selectedObjectsManager.update('node', node);
this.updateLayers();
}
}}
onUndo={this.onHistoryChange}
onRedo={this.onHistoryChange}
/>
{this.state.confirmModalDeleteIsOpen && (
<ConfirmModal
isOpen={true}
Expand Down
21 changes: 11 additions & 10 deletions packages/transition-frontend/src/components/forms/preferences/PreferencesEdit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,17 @@ class PreferencesPanel extends SaveableObjectForm<PreferencesClass, PreferencesP

return (
<form id="tr__form-preferences" className="tr__form-preferences apptr__form">
<h3>{this.props.t('main:Preferences')}</h3>

<div className="tr__form-sticky-header-container">
<h3>{this.props.t('main:Preferences')}</h3>
<SelectedObjectButtons
backAction={this.onBack}
openBackConfirmModal={this.openBackConfirmModal}
object={this.state.object}
hideDelete={true}
onUndo={this.onHistoryChange}
onRedo={this.onHistoryChange}
/>
</div>
<PreferencesSectionGeneral
preferences={this.state.object}
onValueChange={this.onValueChange}
Expand Down Expand Up @@ -149,14 +158,6 @@ class PreferencesPanel extends SaveableObjectForm<PreferencesClass, PreferencesP
{this.hasInvalidFields() && <FormErrors errors={['main:errors:InvalidFormFields']} />}

<div>
<SelectedObjectButtons
backAction={this.onBack}
openBackConfirmModal={this.openBackConfirmModal}
object={this.state.object}
hideDelete={true}
onUndo={this.onHistoryChange}
onRedo={this.onHistoryChange}
/>
{this.state.confirmModalBackIsOpen && (
<ConfirmModal
isOpen={true}
Expand Down
Loading
Loading