2320 allow input value copied to selected rows

common/styles/scss/_recordedit-app.scss

@@ -136,7 +136,7 @@
                     /**
                      * make sure the table cells have the same width
                      */
-                    .shift-form, .select-all-row {
+                    .shift-form, .multi-form-input-row {
                         display: flex;
                         width: 100%;
                     }

src/assets/scss/_button-group.scss

@@ -23,12 +23,12 @@
     }
   }
 }
-// Optional: Group multiple button groups together for a toolbar
+
+// Changing this to grid to set maximum two rows of wrapping buttons if width is less
 .chaise-btn-toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
   gap: 5px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
 
   .input-group {
     width: auto;

src/assets/scss/_inputs.scss

@@ -235,7 +235,9 @@
     // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
     opacity: 1;
     cursor: not-allowed;
-
+    // We are adding this to fix the issue in firefox where the form is not clickable if its disabled
+    pointer-events: none;
+
     // make sure the input is taking the input-disabled styles and not the default bootstrap/browser ones
     // (using * so it selects input, textarea, or any other HTML element that we might have
     *::placeholder, *:disabled {

src/assets/scss/_recordedit.scss

@@ -3,7 +3,7 @@
 @use 'helpers';
 
 // From _recordedit-app.scss
-.recordedit-container{
+.recordedit-container {
   .btn-sm[data-handler="bootstrap-markdown-cmdRidLink"] {
     padding: 5px 3px;
   }
@@ -104,28 +104,159 @@
 
         &.highlighted-row {
           background-color: map-get(variables.$color-map, 'recordedit-highlighted-row');
+          // We add this so that the multi-form-input-row spans across the entire view
+          max-width: none;
         }
 
         .inputs-row {
           display: flex;
           flex-direction: row;
+
+          // adding an overlay on top of form to add the click event
+          .form-overlay {
+            height: 100%;
+            width: 100%;
+            cursor: pointer;
+            // This rule is to overwrite cursor:not-allowed for toolbar.
+            .chaise-btn-toolbar {
+              pointer-events: none;
+            }
+          }
         }
 
-        .select-all-row {
+        .multi-form-input-row {
           width: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 5px;
+          // Making it sticky so that it is fixed in its position and rest of the form conatiner scrolls horizontally
+          position: sticky;
+          top: 0;
+          left: 0;
+          // we are giving z-index 2, which is lower than the dropdown input values, so that they show up
+          z-index: map-get(variables.$z-index-map, 'multi-form-input-row');
 
-          .select-all-text, .select-all-input, .select-all-buttons {
-            float: left;
+          // Adding a div to align the content centre always
+          .centre-align {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            gap: 5px;
+            max-width: 100%;
           }
 
-          .select-all-text {
-            padding: 4px;
-            border: 1px solid transparent;
+          .centre-align-textarea {
+            width: auto;
           }
 
-          .select-all-input {
-            width: 250px;
-            margin: 0px 5px;
+          .multi-form-upper-row {
+            display: flex;
+            width: 100%;
+            justify-content: space-between;
+
+            .multi-form-input-checkbox-container {
+              display: flex;
+              align-items: center;
+              cursor: pointer;
+
+              .multi-form-input-checkbox {
+                display: flex;
+                align-items: center;
+
+                .checkbox-input {
+                  position: relative;
+                  margin: 0 5px 0 0;
+                  width: 16px;
+                  height: 16px;
+
+                  // We are reducing the width and height to make it consitent with the text
+                  &:before {
+                    width: 16px;
+                    height: 16px;
+                  }
+
+                  // adjusting the top and left to make the selection centre aligned in the checkbox
+                  &:after {
+                    top: -5px;
+                    left: -1px;
+                  }
+                }
+              }
+              .multi-form-input-how-to {
+                border-color: map-get(variables.$color-map, 'white')!important;
+                cursor: default;
+                margin-left: 5px;
+                color: map-get(variables.$color-map, 'how-to-multi-form');
+              }
+
+              .multi-form-input-how-to:hover {
+                z-index: auto !important;
+              }
+            }
+
+          .multi-form-input-button-container {
+            /**
+            * We are aligning the buttons always to the right of the container so that when the width is less it always 
+            * aligns to the top right in the first row
+            */
+              text-align: right;
+            }
+          }
+
+          .multi-form-input {
+            width: 100%;
+
+            // We follow the min-width given for multi-form-input-row which is 250px
+            textarea {
+              resize: both;
+              min-width: 250px;
+              max-width: 100%;
+            }
+          }
+
+
+        }
+
+        /**
+          * We are adding this rule to centre align the input area when the screen resolution is greater than 1800px.
+          * We also give a width to the input area of 1200px.
+        */
+        @media (min-width: 1800px) {
+          .multi-form-input-row {
+            .centre-align {
+              width: 1200px;
+            }
+
+            .centre-align-textarea {
+              width: auto;
+            }
+
+            .multi-form-input {
+              textarea {
+                width: 1200px;
+                max-width: 100%;
+              }
+            }
+
+            .multi-form-input-textarea {
+              width: 100%;
+            }
+          }
+
+        }
+
+        @media (max-width: 1799px) {
+          .multi-form-input-row {
+            .multi-form-input-input {
+              width: 100%;
+
+              textarea {
+                max-width: 100%;
+              }
+            }
           }
         }
       }
@@ -164,6 +295,7 @@
             background: map-get(variables.$color-map, 'disabled-background');
             opacity: 0.55;
           }
+
           .spinner-border-sm {
             left: 50%;
             top: 15px;
@@ -188,6 +320,12 @@
         padding: 8px 10px;
       }
 
+      // This is added to show the form is selected to apply the change
+      .entity-active {
+        outline: 2px solid map-get(variables.$color-map, 'primary');
+        outline-offset: -2px;
+      }
+
       // only form inputs
       .column-cell {
         border-left: none;
@@ -221,6 +359,7 @@
 
       .form-header-buttons-container {
         float: right;
+
         .remove-form-btn {
           padding: 1px 7px 0px 7px;
         }
@@ -265,7 +404,7 @@
   }
 
   @-moz-document url-prefix() {
-    #form-edit > table > tbody > tr > td:first-child {
+    #form-edit>table>tbody>tr>td:first-child {
       margin-top: -1px;
     }
   }
@@ -330,4 +469,5 @@
   //   width: 0%;
   //   background-color: #8cacc7 !important;
   // }
-}
+
+}

src/assets/scss/app.scss

@@ -723,6 +723,11 @@ html {
         background-color: map-get(variables.$color-map, 'white');
       }
 
+      &:indeterminate:before {
+        /* Style for indeterminate state */
+        background: none;
+      }
+
       &:checked:after {
         position: absolute;
         top: -2px;

src/assets/scss/maps/_color-map.scss

@@ -36,4 +36,5 @@ $color-map: (
   'vocab-background': rgba(220, 220, 220, 0.68),
   'warning': #f0ad4e,
   'white': #ffffff,
+  'how-to-multi-form': #000
 );

src/assets/scss/maps/_z-index-map.scss

@@ -62,4 +62,6 @@ $z-index-map: (
   'modal-error-backdrop-on-search-popup': 1061,
   'modal-error-on-search-popup': 1066,
 
+  // higher than dropdown
+  'multi-form-input-row': 2
 )