Add more fields and functions to new sample form

megorei · Nov 28, 2023 · f221f79 · f221f79
1 parent e41df97
commit f221f79
Show file tree

Hide file tree

Showing 5 changed files with 512 additions and 115 deletions.
diff --git a/app/assets/stylesheets/element_form_type_fields_and_modal.scss b/app/assets/stylesheets/element_form_type_fields_and_modal.scss
@@ -1,10 +1,3 @@
-.edit-form-fields {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  color: #fff;
-}
-
 [dialogas=form-editor].modal {
   width: fit-content;
   height: fit-content;
@@ -126,6 +119,10 @@
     width: 24%;
   }
 }
+.grouped-fields-row.cols-1 {
+  margin-bottom: 0;
+}
+
 .grouped-fields-row.cols-2 .form-group {
   width: 49%;
   margin-right: 1%;
@@ -168,6 +165,9 @@ div[class^="grouped-fields-row cols-"] {
   .form-group.column-size-small {
     width: 9%;
   }
+  .form-group.column-size-amount {
+    margin-bottom: -10px;
+  }
   .tab {
     margin-right: 1%;
     margin-bottom: 5px;
@@ -275,6 +275,19 @@ div[class^="grouped-fields-row cols-"] {
   margin-right: 1%;
 }
 
+.select-with-button div.css-2b097c-container {
+  width: calc(100% - 42px);
+}
+
+.edit-form-fields.btn {
+  width: 37px;
+  height: 37px;
+  margin-left: 5px;
+  padding-left: 11px;
+  color: #fff;
+  font-size: 17px;
+}
+
 .section.toggle {
   padding: 0 10px 0 13px;
 }
@@ -331,6 +344,8 @@ button.element-form-type-add-button {
   .grouped-fields-row {
     width: 100%;
     padding-left: 0;
+    margin-bottom: 0;
+    margin-right: 0;
   }
 
   div[class^="grouped-fields-row cols-"] {
@@ -372,10 +387,21 @@ button.element-form-type-add-button {
     }
   }
 
-  .input-group {
+  .input-group, .input-group .form-control {
     z-index: 0;
   }
 
+  .input-group.molecule-name {
+    z-index: 10000;
+  }
+
+  div.css-1pahdxg-control {
+    z-index: 10000;
+  }
+  div.css-26l3qy-menu {
+    z-index: 10002;
+  }
+
   .input-group-addon {
     font-size: 13px;
     padding: 6px 8px;
@@ -386,4 +412,33 @@ button.element-form-type-add-button {
       width: calc((100% / 3) - 3.5%);
     }
   }
+
+  .selected-solvents {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+
+    input.form-control, span {
+      width: calc((100% - 34px - 2%) / 2);
+      margin-top: 12px;
+      margin-right: 1%;
+    }
+
+    span {
+      font-weight: bold;
+      margin-bottom: -7px;
+    }
+
+    input.form-control:disabled {
+      background-color: #eee;
+      color: #555;
+    }
+
+    .delete-solvent {
+      width: 34px;
+      height: 34px;
+      padding-left: 9px;
+      margin-top: 12px;
+    }
+  }
 }
diff --git a/app/packs/src/apps/mydb/elements/details/PrivateNoteElement.js b/app/packs/src/apps/mydb/elements/details/PrivateNoteElement.js
@@ -83,13 +83,13 @@ export default class PrivateNoteElement extends React.Component {
     }
 
     return (
-      <div style={{ marginBottom: '10px' }}>
+      <div style={{ marginBottom: '10px', width: '100%' }}>
         <FormGroup>
           <OverlayTrigger
             placement="top"
             overlay={
               <Tooltip id="private-note">Only you can see this note</Tooltip>
-          }
+            }
           >
             <ControlLabel>
               Private Note