Update bootstrap researchplans #2052

ashwiniHerle · 2024-08-02T12:02:28Z

This PR covers react-bootstrap upgrade for the components under:

apps/mydb/elements/details/researchPlans/*.js:

researchPlanTab/*
analysesTab/*
attachmentsTab/*
components/structureEditor/StructureEditorModal.js

Components under apps/mydb/elements/details/researchPlans/wellPlatesTab are not covered in this PR

… modal

beque

Just some minor fixes ;-)

beque · 2024-08-02T14:15:23Z

app/assets/stylesheets/chemotion_bootstrap.scss

@@ -106,5 +106,6 @@ $theme-colors: map-merge($theme-colors, $gray-tones);
 }

 .border-dashed {
-  border-style: dashed;
+  border: dashed;


Border is a shorthand for the properties border-width, border-style and border-color.
This class should be like the bootstrap classes for border-width (border-2)
I do not think it is a good idea to change this class

For some reason, it did not work with just border-dashed class. I will look into it again

beque · 2024-08-02T14:23:55Z

app/packs/src/apps/admin/textTemplates/TextTemplateIcon.js

    );
  }

  const text = (data || {}).text || name;

  return (
-    <span className='fs-3'>{text.toUpperCase()}</span>
+    <span className='fs-4'>{text.toUpperCase()}</span>
  );
 };



I have extended this component in my screen branch too.
Unfortunately this changes of font size will take effect in the icons in the quill editor.

That's what I have changed:
39b3856
If you want you can adopt this in this branch
Or I will do it when I rebase my branch

I'll adopt your method and check all the occurrences with it

beque · 2024-08-02T14:40:05Z

app/packs/src/apps/mydb/elements/details/researchPlans/ResearchPlanMetadata.js

+                </Col>
+                <Col smOffset={0} sm={2}>
+                  <Form.Label>Action</Form.Label><br />
+                  <Button variant="danger" className="pull-right" size="sm" onClick={() => this.removeResearchPlanMetadataArrayItem('description', index)}>


As I remember it correct.
className="pull-right" should be removed
There are several places in this file
Just test it if it still works

Yes, it still works. I found few places where normal justify-content and similar classes didn't work and pull-right has worked.

beque · 2024-08-02T15:06:45Z

...cks/src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsField.js

+                    ))
+                  }
+                </Dropdown.Menu>
+              </Dropdown>
            </ButtonGroup>
          </OverlayTrigger>
        );
      }


here are some pull-right classes in this file

beque · 2024-08-02T15:15:32Z

...rc/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldImage.js

        </div>
      );
    } else {
      content = <p>Drop Files, or Click to Select.</p>;
    }
    return (
      <div>
-        <FormGroup style={{ width: '30%' }}>
+        <Form.Group style={{ width: '30%' }}>


Maybe you can try the col classes for the width
https://getbootstrap.com/docs/5.3/layout/grid/

beque · 2024-08-02T15:29:52Z

...details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldTableMeasurementExportModal.js

@@ -154,7 +154,7 @@ class ResearchPlanDetailsFieldTableMeasurementExportModal extends Component {
          </Modal.Title>
        </Modal.Header>
        <Modal.Body className='measurementExportModal__body'>
-          <table className="table">
+          <Table className="table">


Is this class "table" necessary?

Probably not. Will make necessary changes

beque · 2024-08-02T15:32:14Z

...details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldTableMeasurementExportModal.js

-            <ButtonToolbar>
+          </Table>
+        </Modal.Body>
+        <Modal.Footer className="modal-footer border-0">


Is this class "modal-footer" necessary?

beque · 2024-08-02T15:36:50Z

...acks/src/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsName.js

@@ -18,21 +17,12 @@ export default class ResearchPlanDetailsName extends Component {
      >
        <Button
          id="copyMetadataButton"
-          title=""
          className="fa fa-laptop pull-right"


Another pull-right class

beque · 2024-08-02T15:46:12Z

app/assets/stylesheets/research-plan.scss

@@ -197,4 +197,3 @@
        display: none
    }
 }
-


You have removed many classes in the components.
Are there any classes left from this file?
If not, you could delete this file

maiwald

Some minor notes 😊

maiwald · 2024-08-05T11:26:50Z

...rc/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldTable.js

@@ -161,7 +154,7 @@ export default class ResearchPlanDetailsFieldTable extends Component {
    onChange(field.value, field.id);
  }

-  handleSchemaModalShow() {
+  handleSchemaModalShow = () => {


What is the difference between this and the previous method declaration? Just trying to understand the reasoning. 😊

We use .bind in many places. Got rid of the .bind after using arrow function

maiwald · 2024-08-05T11:33:10Z

...rc/apps/mydb/elements/details/researchPlans/researchPlanTab/ResearchPlanDetailsFieldImage.js

        <Dropzone
          accept="image/*"
          multiple={false}
          onDrop={(files) => this.handleDrop(files)}
          className="border-dashed border-gray-300 text-center p-2 mb-3"
        >
+          {isAnnotationUpdated && <SaveEditedImageWarning visible />}


If <SaveEditedImageWarning> is not used anywhere else, we might as well get rid of the visible prop.

It is used in other components as of now

maiwald · 2024-08-05T11:36:18Z

app/packs/src/apps/mydb/elements/list/AttachmentList.js

@@ -146,7 +146,7 @@ export const annotateButton = (attachment, parent) => (
  <ImageAnnotationEditButton
    parent={parent}
    attachment={attachment}
-    className={`attachment-button-size ${!isImageFile(attachment.filename) ? 'attachment-gray-button' : ''}`}
+    className={`attachment-button-size ${!isImageFile(attachment.filename) && 'attachment-gray-button'}`}


This will add a class named false if !isImageFile(attachment.filename) evaluates to false.

maiwald · 2024-08-05T11:43:48Z

...ks/src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers.js

@@ -181,7 +181,7 @@ export default class ResearchPlanDetailsContainers extends Component {
      const contentOneLine = {
        ops: content.ops.map((x) => {
          const c = Object.assign({}, x);
-          if (c.insert) c.insert = truncateText(c.insert.replace(/\n/g, ' '), 300);
+          if (c.insert) c.insert = truncateText(c.insert.replace(/\n/g, ' '), 100);


Maybe we can extract truncateText into a separate file, as there is now one instance in this file and in ReactionDetailsContainers.js? Or would truncating in CSS be an option? Not sure whether that is better here, though.

Maybe you can use this:
https://getbootstrap.com/docs/5.3/helpers/text-truncation/

Done. Moved to textHelper and reused it.

maiwald · 2024-08-05T11:45:00Z

app/packs/src/components/structureEditor/StructureEditorModal.js

+    <Card.Body>
+      <p>This sample has parents or descendants, and they will not be changed.</p>
+      <p>Are you sure?</p>
+      <br />


Can we get rid of this <br />?

update bootstrap: researchplans and structure editor modal

ashwiniHerle added 30 commits July 29, 2024 11:51

refactor researchplan details name and body

cf18524

replace css classes with bootstrap utility classes

6beecc5

added border class for researchplan ketcher editor

5899dc8

replace glyphicon and undo previous changes

b7a2620

undo additional css class

6daea10

added styling changes

e71d9a0

refactor research plan details to latest bootstrap version

8502d8d

refactor details field and add field to latest bootstrap version

4fc6c29

added spacing changes to drag button

799d04f

refactor sample field in researchplan

2d673e0

re-added eln-panel-detail for scrolling

6b2a95a

refactor researchplan table schema, measurement export and columnname…

295b73c

… modal

refactor research plan table

6c02250

corrected border property name for drop zone

5f2c56b

replaced css class for drop-zone styling

c58b707

refactor sample and reaction field in researchplan

71f1d04

refactor ImageAnnotationEditButton

eb854ce

refactor research plan image field

90c8812

wip - refactor image annotation modal

22980fe

researchplan details - move close and save buttons to the footer

08ad3ed

refactor researchplan metadata to latest react-bootstrap

1cd7c0c

refactor edited image warning and improve placement

960a5b4

update color classes

6165019

change size of image annotation button

54345c6

refactor researchplan attachments

94cf973

replace conditional operator with &&

8f33b65

minor styling changes

da00bc0

refactor research plan details containers

0b53c57

removed redundant spaces

c8d07fa

changed the text truncate value

62b1f43

ashwiniHerle added 4 commits August 2, 2024 08:47

changed the text truncate value for research plan analyses

9340ad7

convert inline styles and external css to utility classes

2467c1d

fix the sizing of text template icons

64e1602

refactor structure editor modal

0a72775

ashwiniHerle requested review from maiwald and beque August 2, 2024 12:02

ashwiniHerle self-assigned this Aug 2, 2024

beque reviewed Aug 2, 2024

View reviewed changes

ashwiniHerle added 3 commits August 5, 2024 06:43

align toggle button spacing with name

96e1b25

changed border-dashed class property to initial value

6accb46

replaced pull-right with equivalent utility classes

c6fc1f3

maiwald reviewed Aug 5, 2024

View reviewed changes

ashwiniHerle added 5 commits August 5, 2024 11:52

added important rule to border-dashed class

70502ef

styling and spacing changes

f4875cd

undo changes to textTemplateIcon

bb9a72e

moved truncateText to textHelper and changed all occurrences

d2a8b0a

styling changes and code cleanup

54041c2

ashwiniHerle merged commit 68627aa into update-bootstrap-ui-library Aug 5, 2024
2 of 3 checks passed

ashwiniHerle added a commit that referenced this pull request Aug 13, 2024

Update bootstrap researchplans (#2052)

738a37c

update bootstrap: researchplans and structure editor modal

ashwiniHerle deleted the update-bootstrap-researchplans branch August 15, 2024 09:11

maiwald pushed a commit that referenced this pull request Aug 27, 2024

Update bootstrap researchplans (#2052)

89220e1

update bootstrap: researchplans and structure editor modal

ashwiniHerle added a commit that referenced this pull request Aug 28, 2024

Update bootstrap researchplans (#2052)

bc0906f

update bootstrap: researchplans and structure editor modal

maiwald mentioned this pull request Sep 9, 2024

Update Bootstrap: Various fixes and specs #2146

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update bootstrap researchplans #2052

Update bootstrap researchplans #2052

ashwiniHerle commented Aug 2, 2024 •

edited

Loading

beque left a comment

beque Aug 2, 2024

ashwiniHerle Aug 2, 2024

beque Aug 2, 2024

ashwiniHerle Aug 2, 2024

beque Aug 2, 2024

ashwiniHerle Aug 2, 2024

beque Aug 2, 2024

beque Aug 2, 2024

beque Aug 2, 2024

ashwiniHerle Aug 2, 2024

beque Aug 2, 2024

beque Aug 2, 2024

beque Aug 2, 2024

maiwald left a comment

maiwald Aug 5, 2024

ashwiniHerle Aug 5, 2024

maiwald Aug 5, 2024

ashwiniHerle Aug 5, 2024

maiwald Aug 5, 2024

maiwald Aug 5, 2024

beque Aug 5, 2024

ashwiniHerle Aug 5, 2024

maiwald Aug 5, 2024

Update bootstrap researchplans #2052

Update bootstrap researchplans #2052

Conversation

ashwiniHerle commented Aug 2, 2024 • edited Loading

beque left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

maiwald left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ashwiniHerle commented Aug 2, 2024 •

edited

Loading