(feat) Anchor workspace actions to the bottom of the screen in tablet…

… mode (#1650)

packages/esm-patient-chart-app/src/patient-chart/action-menu/action-menu.component.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
-import { ExtensionSlot } from '@openmrs/esm-framework';
+import { ExtensionSlot, useLayoutType } from '@openmrs/esm-framework';
 import styles from './action-menu.scss';
 
 interface ActionMenuInterface {
@@ -10,7 +10,7 @@ interface ActionMenuInterface {
 export const ActionMenu: React.FC<ActionMenuInterface> = ({ open }) => {
   const [keyboardVisible, setKeyboardVisible] = useState(false);
   const initialHeight = useRef(window.innerHeight);
-
+  const isTablet = useLayoutType() === 'tablet';
   useEffect(() => {
     const handleKeyboardVisibilityChange = () => {
       setKeyboardVisible(initialHeight.current > window.innerHeight);
@@ -22,6 +22,10 @@ export const ActionMenu: React.FC<ActionMenuInterface> = ({ open }) => {
     return () => window.removeEventListener('resize', handleKeyboardVisibilityChange);
   }, [initialHeight]);
 
+  if (open && isTablet) {
+    return null;
+  }
+
   return (
     <aside
       className={classNames(styles.sideRail, {

packages/esm-patient-chart-app/src/patient-chart/patient-chart.component.tsx

@@ -77,7 +77,7 @@ const PatientChart: React.FC = () => {
             </>
           )}
         </div>
-        <ActionMenu open={false} />
+        <ActionMenu open={active} />
       </>
     </main>
   );

packages/esm-patient-chart-app/src/visit/visit-form/visit-form.scss

@@ -42,12 +42,6 @@
   margin: 0.5rem 1rem;
 }
 
-.form {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: calc(100vh - 6rem);
-}
 
 .button {
   height: 4rem;
@@ -58,8 +52,11 @@
 }
 
 .tablet {
-  padding: 1.5rem 1rem;
+  padding: 1rem;
   background-color: $ui-02;
+  position: fixed;
+  bottom: 0rem;
+  width: 100%;
 }
 
 .desktop {
@@ -87,6 +84,17 @@
   color: $text-02;
 }
 
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  .form {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: calc(100vh - 6rem);
+  }
+}
+
+/* Tablet */
 :global(.omrs-breakpoint-lt-desktop) {
   .container {
     & section {

packages/esm-patient-conditions-app/src/conditions/conditions-form.scss

@@ -43,8 +43,11 @@
 }
 
 .tablet {
-  padding: 1.5rem 1rem;
+  padding: 1rem;
   background-color: $ui-02;
+  position: fixed;
+  bottom: 0rem;
+  width: 100%;
 }
 
 .desktop {

packages/esm-patient-labs-app/src/lab-orders/add-lab-order/lab-order-form.scss

@@ -67,6 +67,9 @@
   .buttonSet {
     padding: spacing.$spacing-06 spacing.$spacing-05;
     background-color: $ui-02;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
   }
 
 }

packages/esm-patient-medications-app/src/add-drug-order/drug-order-form.scss

@@ -9,15 +9,16 @@
 }
 
 .orderForm {
-  flex-grow:1;
+  flex-grow: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: layout.$spacing-03 0 0 layout.$spacing-05;
 
+
   input[data-invalid]:focus {
-    outline: 2px solid  colors.$red-60;
-     outline-offset: -2px;
+    outline: 2px solid colors.$red-60;
+    outline-offset: -2px;
   }
 
   :global(.cds--css-grid) {
@@ -101,7 +102,7 @@
   margin-bottom: layout.$spacing-05;
 }
 
-.pullColumnContentRight > div {
+.pullColumnContentRight>div {
   float: right;
 }
 
@@ -125,8 +126,8 @@
 
 .numberInput {
   :global(.cds--number__input-wrapper) input {
-  min-width: unset !important;
-  padding-right: layout.$spacing-05;
+    min-width: unset !important;
+    padding-right: layout.$spacing-05;
   }
 }
 
@@ -138,7 +139,8 @@
 
   button {
     display: flex;
-   padding-left: 0 !important;
+    padding-left: 0 !important;
+
     svg {
       order: 1;
       margin-right: layout.$spacing-03;
@@ -225,6 +227,9 @@
   .buttonSet {
     padding: layout.$spacing-06 layout.$spacing-05;
     background-color: colors.$white-0;
+    position: fixed;
+    bottom: 0rem;
+    width: 100%;
   }
 }
 
@@ -233,12 +238,12 @@
     outline: 2.5px solid colors.$red-60;
   }
 
-  input:focus, textarea:focus {
+  input:focus,
+  textarea:focus {
     outline: 2.5px solid colors.$red-60;
   }
 }
 
 .errorLabel {
   color: colors.$red-60;
-}
-
+}

packages/esm-patient-notes-app/src/notes/visit-notes-form.scss

@@ -66,8 +66,11 @@
 }
 
 .tablet {
-  padding: 1.5rem 1rem;
+  padding: 1rem 1rem;
   background-color: $ui-02;
+  position: fixed;
+  bottom: 0rem;
+  width: 100%;
 }
 
 .desktop {
@@ -93,7 +96,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: var(--desktop-workspace-window-height);
+  // height: var(--desktop-workspace-window-height);
 }
 
 .grid {

packages/esm-patient-orders-app/src/order-basket/order-basket.scss

@@ -52,5 +52,8 @@
   .buttonSet {
     padding: 1.5rem 1rem;
     background-color: $ui-02;
+    position: fixed;
+    bottom: 0rem;
+    width: 100%;
   }
 }