Move selected object buttons to the top of the form inside the header

Fixes #757 Make the form header stick to the top so it's always visible. Also reduce button sizes.
chairemobilite · Nov 9, 2023 · 6f6f0fe · 6f6f0fe
1 parent e8b2fba
commit 6f6f0fe
Show file tree

Hide file tree

Showing 10 changed files with 169 additions and 139 deletions.
diff --git a/packages/chaire-lib-frontend/src/components/pageParts/SelectedObjectButtons.tsx b/packages/chaire-lib-frontend/src/components/pageParts/SelectedObjectButtons.tsx
@@ -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"

diff --git a/...tend/src/components/pageParts/__tests__/__snapshots__/SelectedObjectButtons.test.tsx.snap b/...tend/src/components/pageParts/__tests__/__snapshots__/SelectedObjectButtons.test.tsx.snap
@@ -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"
@@ -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"
@@ -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"
@@ -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"

diff --git a/packages/chaire-lib-frontend/src/styles/_form.scss b/packages/chaire-lib-frontend/src/styles/_form.scss
@@ -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 {

diff --git a/packages/transition-frontend/src/components/forms/agency/TransitAgencyEdit.tsx b/packages/transition-frontend/src/components/forms/agency/TransitAgencyEdit.tsx
@@ -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">
@@ -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}

diff --git a/packages/transition-frontend/src/components/forms/line/TransitLineEdit.tsx b/packages/transition-frontend/src/components/forms/line/TransitLineEdit.tsx
@@ -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)}
@@ -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) && (

diff --git a/packages/transition-frontend/src/components/forms/node/TransitNodeEdit.tsx b/packages/transition-frontend/src/components/forms/node/TransitNodeEdit.tsx
@@ -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')}>
@@ -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}

diff --git a/packages/transition-frontend/src/components/forms/preferences/PreferencesEdit.tsx b/packages/transition-frontend/src/components/forms/preferences/PreferencesEdit.tsx
@@ -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}
@@ -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}

diff --git a/packages/transition-frontend/src/components/forms/scenario/TransitScenarioEdit.tsx b/packages/transition-frontend/src/components/forms/scenario/TransitScenarioEdit.tsx
@@ -137,12 +137,21 @@ class TransitScenarioEdit extends SaveableObjectForm<Scenario, ScenarioFormProps
                 }
                 className="tr__form-transit-scenario-edit apptr__form"
             >
-                <h3>
-                    {scenario.isNew()
-                        ? this.props.t('transit:transitScenario:New')
-                        : this.props.t('transit:transitScenario:Edit')}
-                    {scenario.toString(false) ? ` • ${scenario.toString(false)}` : ''}
-                </h3>
+                <div className="tr__form-sticky-header-container">
+                    <h3>
+                        {scenario.isNew()
+                            ? this.props.t('transit:transitScenario:New')
+                            : this.props.t('transit:transitScenario:Edit')}
+                        {scenario.toString(false) ? ` • ${scenario.toString(false)}` : ''}
+                    </h3>
+                    <SelectedObjectButtons
+                        onDelete={this.onDelete}
+                        openDeleteConfirmModal={this.openDeleteConfirmModal}
+                        backAction={this.onBack}
+                        openBackConfirmModal={this.openBackConfirmModal}
+                        object={scenario}
+                    />
+                </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">
@@ -301,13 +310,6 @@ class TransitScenarioEdit extends SaveableObjectForm<Scenario, ScenarioFormProps
                 {this.hasInvalidFields() && <FormErrors errors={['main:errors:InvalidFormFields']} />}
 
                 <div>
-                    <SelectedObjectButtons
-                        onDelete={this.onDelete}
-                        openDeleteConfirmModal={this.openDeleteConfirmModal}
-                        backAction={this.onBack}
-                        openBackConfirmModal={this.openBackConfirmModal}
-                        object={scenario}
-                    />
                     {this.state.confirmModalDeleteIsOpen && (
                         <ConfirmModal
                             isOpen={true}